/* ============================================================
   峡谷语音 · 设计系统「海克斯科技」
   风格：墨黑底 + 海克斯金 + 符文青蓝，斜切面板 / 金边辉光
   色板取自英雄联盟客户端官方 Hextech UI 规范
   ============================================================ */

:root {
  /* 品牌：海克斯金（官方 GOLD 1-7） */
  --accent: #C8AA6E;
  --accent-hover: #CDBE91;
  --accent-active: #785A28;
  --accent-soft: rgba(200, 170, 110, .13);
  --accent-softer: rgba(200, 170, 110, .06);
  --accent-contrast: #0A1218;
  --gold: #C89B3C;
  --gold-soft: rgba(200, 155, 60, .14);
  --gold-bright: #F0E6D2;
  --gold-line: rgba(200, 155, 60, .42);

  /* 符文青蓝（BLUE 2-5） */
  --hex: #0AC8B9;
  --hex-deep: #0A96AA;
  --hex-night: #005A82;

  /* 语义色（暗色屏适配） */
  --success: #3BC98B;
  --success-soft: rgba(59, 201, 139, .12);
  --warning: #E0B341;
  --warning-soft: rgba(224, 179, 65, .13);
  --danger: #E8465A;
  --danger-soft: rgba(232, 70, 90, .13);
  --info: #2FB9CE;
  --info-soft: rgba(47, 185, 206, .12);

  /* 中性色：HEXTECH BLACK / GREY COOL */
  --bg: #06121B;
  --surface: #0C1C28;
  --surface-2: #0F2230;
  --surface-3: #15303F;
  --elevated: #102735;
  --border: #1D3A49;
  --border-strong: #2C5266;
  --text: #F0E6D2;
  --text-2: #B9AF9C;
  --muted: #8B908C;
  --faint: #5E6B6C;
  --scrim: rgba(1, 8, 14, .68);

  /* 微质感：暗场辉光 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 3px 12px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .66);
  --ring: 0 0 0 2px rgba(200, 155, 60, .35), 0 0 18px rgba(200, 155, 60, .15);

  /* 尺寸 */
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  /* 海克斯斜切角（clip-path 用） */
  --bevel: 10px;
  --bevel-sm: 7px;

  /* 字体 */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;

  /* 段位色板（暗屏提亮） */
  --tier-0: #8B8F96;  /* 黑铁 */
  --tier-1: #C08A52;  /* 青铜 */
  --tier-2: #C7CDD6;  /* 白银 */
  --tier-3: #E3B54B;  /* 黄金 */
  --tier-4: #3FCFC4;  /* 铂金 */
  --tier-5: #2FC47E;  /* 翡翠 */
  --tier-6: #5B9BEE;  /* 钻石 */
  --tier-7: #A56FE0;  /* 大师 */
  --tier-8: #E85B6E;  /* 宗师 */
  --tier-9: #F0D27A;  /* 王者 */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1);
}

[data-theme="dark"] {
  --accent: #C8AA6E;
  --accent-hover: #F0E6D2;
  --accent-active: #785A28;
  --accent-soft: rgba(200, 170, 110, .12);
  --accent-softer: rgba(200, 170, 110, .05);
  --gold: #C89B3C;
  --gold-soft: rgba(200, 155, 60, .13);

  --bg: #010A13;
  --surface: #0A1822;
  --surface-2: #0C1F2B;
  --surface-3: #122C3A;
  --elevated: #0D2330;
  --border: #18323F;
  --border-strong: #26485A;
  --text: #F0E6D2;
  --text-2: #B3AA98;
  --muted: #868C89;
  --faint: #566265;
  --scrim: rgba(0, 4, 8, .74);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 3px 12px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .72);
  --ring: 0 0 0 2px rgba(200, 155, 60, .32), 0 0 18px rgba(200, 155, 60, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 78% -12%, rgba(10, 150, 170, .16), transparent 62%),
    radial-gradient(900px 620px at -12% 108%, rgba(200, 155, 60, .09), transparent 60%),
    linear-gradient(180deg, rgba(10, 50, 60, .22), transparent 42%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

h1, h2, h3, h4, h5 {
  font-weight: 600; color: var(--gold-bright); line-height: 1.35;
  font-family: var(--font-display);
  letter-spacing: .04em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; color: var(--text); }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(200, 155, 60, .28); color: #fff; }

/* 数字等宽（钱包/计数） */
.num, .n { font-variant-numeric: tabular-nums; }

/* 细滚动条：金铜色 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #463714, #2A2415); border-radius: 2px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #785A28, #463714); border: 2px solid transparent; background-clip: content-box; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

[hidden] { display: none !important; }

.icon { width: 18px; height: 18px; stroke-width: 1.7; flex: none; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }
.icon.xl { width: 28px; height: 28px; }

/* 通用动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }

.spin { animation: spin .9s linear infinite; }

/* 页面径向进入（圆形扩散） */
.view-enter { animation: viewReveal .42s var(--ease); }
@keyframes viewReveal {
  from { opacity: 0; clip-path: circle(0 at var(--rx, 50%) var(--ry, 30%)); }
  to   { opacity: 1; clip-path: circle(140% at var(--rx, 50%) var(--ry, 30%)); }
}

/* 主题切换圆形扩散层 */
.theme-fx {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  animation: themeSpread .48s var(--ease) forwards;
}
@keyframes themeSpread {
  from { clip-path: circle(0 at var(--fx) var(--fy)); }
  to   { clip-path: circle(145% at var(--fx) var(--fy)); }
}