/* 主题令牌：色相（蓝/橙/紫/玉）× 深浅（浅色/柔和/深色）
   Theme tokens: hue (blue/orange/purple/jade) by depth (light/pastel/dark).
   强调色的淡色都由 color-mix 从 --ac 推导，换色相时不会留下旧色的痕迹。
   Every accent tint is derived from --ac with color-mix, so switching hue leaves no stale colour behind. */

:root {
  --ac: #1C64F2;
  --ac-strong: color-mix(in srgb, var(--ac) 84%, #000000);
  --ac-tint: color-mix(in srgb, var(--ac) 12%, var(--surface));
  --ac-tint-2: color-mix(in srgb, var(--ac) 26%, var(--surface));
  --ac-line: color-mix(in srgb, var(--ac) 30%, var(--surface));
  --ac-soft: color-mix(in srgb, var(--ac) 45%, var(--surface));
  --on-ac: #FFFFFF;
  /* 深色半透明徽章上的反白，不随主题变 / Reversed on a translucent dark badge; fixed across themes */
  --on-dark: #FFFFFF;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --surface-3: #F1F3F7;
  --surface-4: #EDEFF3;
  --surface-dim: #FCFCFD;
  --line: #E9EBF0;
  --line-strong: #D5D9E2;
  --line-soft: #F1F3F7;
  --track: #E9EBF0;
  --track-2: #E4E7ED;

  --t1: #12141A;
  --t2: #4A5160;
  --t3: #6E7685;
  --t4: #8A91A0;
  --t-body: #2A3040;
  --t-faint: #B4BAC5;
  --t-disabled: #A3A9B5;

  --ok: #057A55;
  --ok-bg: #E3F5EC;
  --warn: #B45309;
  --warn-ink: #7A4A09;
  --warn-bg: #FDF4E7;
  --err: #B42318;
  --err-ink: #7A1C12;
  --err-bg: #FDE8E6;
  --err-bg-soft: #FFF8F7;
  --err-line: #F2C4BF;

  /* 平台色随深浅调整，但不随主色相变 / Platform colours follow depth, never the chosen hue */
  --brand-wa: #128C4B;
  --brand-ms: #0A5BD3;
  --brand-ig: #B52A75;
  --brand-ig2: #A61E69;
  --tag-purple: #6B3A78;

  --tint-cream: #EFE7D6;
  --tint-cream-ink: #6B5F43;
  --tint-purple: #F1E7F3;
  --tint-pink: #FBE8F4;
  --tint-pink-ink: #7A3A5E;
  --tint-blue: #E4EDFD;
  --tint-blue-ink: #3B5280;
  --tint-green-ink: #3F6453;

  /* 图表序列色：固定不随主色相变，否则同一个账号换主题就换颜色
     Chart series colours: fixed, never derived from the accent, so an account keeps its colour */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
}

html[data-hue="orange"] { --ac: #C2410C; }
html[data-hue="purple"] { --ac: #7C3AED; }
html[data-hue="jade"]   { --ac: #087A5E; }

/* 柔和：底色带一点主色，线条更淡，文字对比略降但仍可读
   Pastel: the ground picks up a trace of the accent and the rules soften; text stays readable */
html[data-depth="pastel"] {
  --bg: color-mix(in srgb, var(--ac) 6%, #FFFFFF);
  --surface: #FFFFFF;
  --surface-2: color-mix(in srgb, var(--ac) 8%, #FFFFFF);
  --surface-3: color-mix(in srgb, var(--ac) 13%, #FFFFFF);
  --surface-4: color-mix(in srgb, var(--ac) 11%, #FFFFFF);
  --surface-dim: color-mix(in srgb, var(--ac) 3%, #FFFFFF);
  --line: color-mix(in srgb, var(--ac) 17%, #FFFFFF);
  --line-strong: color-mix(in srgb, var(--ac) 28%, #FFFFFF);
  --line-soft: color-mix(in srgb, var(--ac) 11%, #FFFFFF);
  --track: color-mix(in srgb, var(--ac) 17%, #FFFFFF);
  --track-2: color-mix(in srgb, var(--ac) 24%, #FFFFFF);
  --t1: #1A1F2E;
  --t2: #4E5668;
  --t3: #727A8C;
  --t4: #929AA8;
}

html[data-depth="dark"] {
  --ac: #6098FF;
  --ac-strong: color-mix(in srgb, var(--ac) 80%, #FFFFFF);
  --on-ac: #0F1116;

  --bg: #0F1116;
  --surface: #171A21;
  --surface-2: #1C202A;
  --surface-3: #222733;
  --surface-4: #0B0D11;
  --surface-dim: #131620;
  --line: #272C37;
  --line-strong: #39404E;
  --line-soft: #212630;
  --track: #2A303C;
  --track-2: #333A47;

  --t1: #ECEEF3;
  --t2: #B3BAC7;
  --t3: #8D95A3;
  --t4: #737B89;
  --t-body: #D3D8E0;
  --t-faint: #5B6270;
  --t-disabled: #5B6270;

  --ok: #34D399;
  --ok-bg: #10291F;
  --warn: #FBBF24;
  --warn-ink: #FCD34D;
  --warn-bg: #2A2008;
  --err: #FB7185;
  --err-ink: #FDA4AF;
  --err-bg: #2E1317;
  --err-bg-soft: #241013;
  --err-line: #5B2630;

  --brand-wa: #36D07D;
  --brand-ms: #5FA8FF;
  --brand-ig: #F472B6;
  --brand-ig2: #F9A8D4;
  --tag-purple: #C4A2D4;

  --tint-cream: #3A3425;
  --tint-cream-ink: #CBBE9C;
  --tint-purple: #2E2435;
  --tint-pink: #35202D;
  --tint-pink-ink: #E8B3CE;
  --tint-blue: #1B2740;
  --tint-blue-ink: #A9C2EE;
  --tint-green-ink: #9FD0B8;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
}

html[data-depth="dark"][data-hue="orange"] { --ac: #FF9558; }
html[data-depth="dark"][data-hue="purple"] { --ac: #B18CFF; }
html[data-depth="dark"][data-hue="jade"]   { --ac: #3FC79B; }

/* 深色下给商标垫一层白底：标志里的 G 和 AI 近黑，直接放深色背景上会消失
   A white plate behind the wordmark on dark: its G and AI are near-black and would vanish */
html[data-depth="dark"] .brand-logo {
  background: #FFFFFF; padding: 5px 8px; border-radius: 9px; box-sizing: content-box;
}

/* 侧栏收起：宽度跟线上一致（展开 220 / 收起 64）。页面里的样式是内联的，
   只能用 !important 盖过去。
   Collapsed sidebar, matching the live app's 220 / 64. The page's own styles are inline,
   so these overrides need !important to win. */
.app-nav { transition: width .14s ease; }
.nav-slot { transition: flex-basis .14s ease; }
.nav-toggle:hover { color: var(--ac); }
.nav-toggle:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

body.nav-collapsed .nav-slot { flex: 0 0 64px !important; }
body.nav-collapsed .app-nav { width: 64px !important; padding-left: 8px !important; padding-right: 8px !important; }
body.nav-collapsed .app-nav .nav-label,
body.nav-collapsed .app-nav .nav-group,
body.nav-collapsed .app-nav .brand-logo { display: none !important; }
body.nav-collapsed .app-nav .nav-brand { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
body.nav-collapsed .app-nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
body.nav-collapsed .app-nav .nav-user { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 取色器：固定在右下角，与左下角的返回链接对称
   The picker sits bottom right, mirroring the back link bottom left */
.theme-picker {
  position: fixed; right: 16px; bottom: 16px; z-index: 99;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.theme-picker__group { display: flex; align-items: center; gap: 6px; }
.theme-picker__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t4);
}
.theme-picker__hue {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.14);
}
.theme-picker__hue[aria-pressed="true"] { border-color: var(--t1); }
.theme-picker__hue:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.theme-picker__depth {
  height: 26px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--t2); background: var(--surface); border: 1px solid var(--line-strong);
}
.theme-picker__depth[aria-pressed="true"] {
  color: var(--on-ac); background: var(--ac); border-color: var(--ac);
}
.theme-picker__depth:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.theme-picker__rule { width: 1px; align-self: stretch; background: var(--line); }

@media (max-width: 720px) {
  .theme-picker { left: 16px; right: 16px; bottom: 60px; justify-content: center; flex-wrap: wrap; }
}