/* Vinividivici brand accents for the new-api (Semi UI) console.
 *
 * DELIBERATELY theme-neutral. We do NOT override page / card / sidebar /
 * table / input backgrounds or text colors — Semi Design ships a complete,
 * tested light AND dark theme (its color tokens live on `body[theme-mode]`),
 * and the console must stay internally consistent in whichever mode the user
 * picks via the theme toggle.
 *
 * History: the first version of this file was a 320-line hardcoded *light*
 * skin (#fff cards, dark ink, !important everywhere). In dark mode it forced
 * the page/cards light while un-overridden components (tables) stayed Semi-
 * dark — a dark island on a white page, with invisible light sidebar text.
 * The fix was to stop shipping a theme skin at all and only keep brand
 * identity: a dark top bar, gold primary actions, hidden upstream attribution,
 * and rounded corners.
 */

:root {
  --vvv-brand: #090b12;
  --vvv-gold: #d4a64a;
  --vvv-gold-2: #f0d37a;
}

/* Gold as Semi's primary accent (buttons, focus rings, etc.).
   Only the primary tokens — backgrounds/text are left to the theme. */
body,
body .semi-always-light {
  --semi-color-primary: var(--vvv-gold) !important;
  --semi-color-primary-hover: var(--vvv-gold-2) !important;
  --semi-color-primary-active: #9a640f !important;
  --semi-color-focus-border: var(--vvv-gold) !important;
}

/* Hide upstream (QuantumNous/new-api) attribution links + decorative blobs. */
a[href*="QuantumNous/new-api"],
a[href="https://github.com/QuantumNous"],
*:has(> a[href*="QuantumNous/new-api"]),
*:has(> a[href="https://github.com/QuantumNous"]) {
  display: none !important;
}

#root .blur-ball,
#root .with-pastel-balls::before {
  display: none !important;
}

/* Brand top bar — intentionally dark in BOTH themes (this is the one
   cross-theme brand element). White text/icons on the dark bar. */
#root .semi-layout-header {
  background: var(--vvv-brand) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#root .semi-layout-header a,
#root .semi-layout-header .semi-typography,
#root .semi-layout-header .semi-typography a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-button,
#root .semi-layout-header .semi-button * {
  color: #f8fafc !important;
}

#root .semi-layout-header a:hover {
  text-decoration: none !important;
}

#root .semi-layout-header .semi-button-tertiary:hover,
#root .semi-layout-header .semi-button-borderless:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* The primary "登录/Sign in"-style button on the dark bar stays gold. */
#root .semi-layout-header .semi-button-primary {
  background: var(--vvv-gold) !important;
  border-color: var(--vvv-gold) !important;
}

#root .semi-layout-header .semi-button-primary,
#root .semi-layout-header .semi-button-primary * {
  color: #17110a !important;
}

#root .semi-layout-header .semi-button-primary:hover {
  background: var(--vvv-gold-2) !important;
  border-color: var(--vvv-gold-2) !important;
}

/* Gold primary buttons throughout the app (text dark for contrast on gold). */
#root .semi-button-primary {
  background: var(--vvv-gold) !important;
  border-color: var(--vvv-gold) !important;
  font-weight: 700 !important;
}

#root .semi-button-primary,
#root .semi-button-primary * {
  color: #17110a !important;
}

#root .semi-button-primary:hover {
  background: var(--vvv-gold-2) !important;
  border-color: var(--vvv-gold-2) !important;
}

#root .semi-button-primary:hover * {
  color: #17110a !important;
}

/* Rounded corners — theme-neutral cosmetic only. */
#root .semi-card,
#root .semi-table,
#root .table-scroll-card,
#root .semi-toast-content {
  border-radius: 8px !important;
}

/* "PRO" badge beside the header avatar (seats only, injected by app-brand.js). */
#root .semi-layout-header #vvv-pro-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.4;
  vertical-align: middle;
  color: #17110a !important;
  background: linear-gradient(135deg, var(--vvv-gold), var(--vvv-gold-2));
}

/* Pro-seat usage card (injected by app-brand.js at the top of the dashboard).
   Reuses .semi-card so the background/border follow the active theme. */
#root #vvv-usage-card {
  grid-column: 1 / -1;
  flex: 1 1 100%;
  width: 100%;
  margin-bottom: 16px;
  padding: 20px 24px;
}

#root #vvv-usage-card .vvv-card-head {
  font-weight: 700;
  font-size: 15px;
  color: var(--vvv-gold);
  margin-bottom: 16px;
}

#root #vvv-usage-card .vvv-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root #vvv-usage-card .vvv-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

#root #vvv-usage-card .vvv-row-label {
  width: 100px;
  flex: none;
  font-size: 13px;
  color: var(--semi-color-text-1);
}

#root #vvv-usage-card .vvv-row-bar {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--semi-color-fill-1);
  overflow: hidden;
}

#root #vvv-usage-card .vvv-row-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--vvv-gold);
  transition: width 0.4s ease;
}

#root #vvv-usage-card .vvv-row.vvv-row-hot .vvv-row-bar > i {
  background: #e5484d;
}

#root #vvv-usage-card .vvv-row-pct {
  width: 52px;
  flex: none;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--semi-color-text-0);
}

#root #vvv-usage-card .vvv-card-note {
  margin-top: 14px;
  font-size: 13px;
  color: #e5484d;
}

#root #vvv-usage-card .vvv-card-note:empty {
  display: none;
}