/* ============================================================
   V5 Glass · 认知脚手架玻璃拟态设计系统
   参考: superdesign.dev/library/glassmorphism-card
   单色基底 + 亮灰高光 + 深层半透明玻璃 + 噪点纹理
   ============================================================ */

:root {
  /* —— 浅色主题 —— */
  --bg: #F4F4F5;                 /* zinc-100 */
  --bg-elev: #FFFFFF;
  --bg-sunken: #E4E4E7;          /* zinc-200 */
  --text: #18181B;               /* zinc-900 */
  --text-2: #71717A;             /* zinc-500 */
  --text-3: #A1A1AA;             /* zinc-400 */
  --border: rgba(24, 24, 27, .08);
  --border-strong: rgba(24, 24, 27, .14);
  --glass-bg: rgba(255, 255, 255, .66);
  --glass-bg-soft: rgba(255, 255, 255, .45);
  --glass-border: rgba(255, 255, 255, .9);
  --glass-border-outer: rgba(24, 24, 27, .06);
  --accent: #059669;
  --accent-strong: #047857;
  --accent-ink: #FAFAFA;
  --accent-soft: rgba(5, 150, 105, .10);
  --accent-glow: rgba(16, 185, 129, .28);
  --info: #0284C7;
  --info-soft: rgba(2, 132, 199, .12);
  --success: #0F766E;
  --success-soft: rgba(15, 118, 110, .12);
  --warning: #B45309;
  --warning-soft: rgba(180, 83, 9, .12);
  --danger: #B91C1C;
  --danger-soft: rgba(185, 28, 28, .12);
  --nav-bg: rgba(244, 244, 245, .72);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -8px rgba(0,0,0,.08);
  --shadow-float: 0 24px 64px -16px rgba(0,0,0,.18);
  --grain-opacity: .05;
  --hero-overlay: linear-gradient(180deg, rgba(244,244,245,0) 0%, rgba(244,244,245,.92) 100%);
  color-scheme: light;
}

html.dark {
  /* —— 暗色主题（玻璃拟态主场） —— */
  --bg: #000000;
  --bg-elev: #09090B;            /* zinc-950 */
  --bg-sunken: #18181B;          /* zinc-900 */
  --text: #FAFAFA;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .16);
  --glass-bg: rgba(255, 255, 255, .05);
  --glass-bg-soft: rgba(255, 255, 255, .03);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-border-outer: rgba(255, 255, 255, .06);
  --accent: #34D399;
  --accent-strong: #6EE7B7;
  --accent-ink: #18181B;
  --accent-soft: rgba(52, 211, 153, .12);
  --accent-glow: rgba(52, 211, 153, .22);
  --info: #38BDF8;
  --info-soft: rgba(56, 189, 248, .14);
  --success: #2DD4BF;
  --success-soft: rgba(45, 212, 191, .14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, .14);
  --danger: #FB7185;
  --danger-soft: rgba(251, 113, 133, .14);
  --nav-bg: rgba(0, 0, 0, .55);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
  --shadow-float: 0 24px 64px -16px rgba(0,0,0,.75);
  --grain-opacity: .15;
  --hero-overlay: linear-gradient(180deg, rgba(9,9,11,.4) 0%, rgba(9,9,11,.92) 100%);
  color-scheme: dark;
}

/* —— 基础 —— */
body.v5 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

.v5-container { max-width: 1600px; margin: 0 auto; width: 100%; }

/*  editorial 排版 */
.v5-display { font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; }
.v5-title   { font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
.v5-body    { font-weight: 400; line-height: 1.65; color: var(--text-2); }
.v5-label   { font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.v5-num     { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* —— 玻璃材质 —— */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}
.glass-soft {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--glass-border-outer);
}
.glass-strong {  /* 浮动导航 / 悬浮条 */
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-float);
}
.glass-inset { /* 玻璃容器内嵌片 */
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border-outer);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* —— 圆角节奏（规范：大容器 40 / 卡片 24 / 内片 16） —— */
.r-section { border-radius: 40px; }
.r-card    { border-radius: 24px; }
.r-inner   { border-radius: 16px; }

/* —— 噪点纹理（暗色 15% / 浅色 5%，固定覆盖） —— */
.grain::before {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— 氛围光斑（暗色 hero / 区块背景） —— */
.glow-orb { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; }
.glow-emerald { background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); }
.glow-zinc    { background: radial-gradient(circle, rgba(113,113,122,.18) 0%, transparent 70%); }

/* —— 组件：胶囊动作按钮（白色基座 + 内嵌圆形图标仓） —— */
.btn-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 9999px;
  padding: 8px 8px 8px 24px; font-weight: 500; font-size: 15px;
  cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  box-shadow: var(--shadow-card); text-decoration: none;
}
.btn-pill:hover { transform: scale(1.05); box-shadow: var(--shadow-float); }
.btn-pill .pill-ic {
  width: 40px; height: 40px; border-radius: 9999px; flex: none;
  background: var(--text); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.btn-pill:hover .pill-ic { background: var(--accent); color: #fff; }
.btn-pill .pill-ic .material-symbols-outlined { font-size: 20px; }
.btn-pill.btn-accent { background: var(--accent); border-color: transparent; color: var(--accent-ink, #fff); }
.btn-pill.btn-accent .pill-ic { background: rgba(255,255,255,.22); color: var(--accent-ink, #fff); }

/* 幽灵按钮（玻璃态次级操作） */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px; padding: 10px 20px; font-size: 14px; font-weight: 500;
  color: var(--text-2); border: 1px solid var(--border);
  background: var(--glass-bg-soft); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all .3s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); background: var(--glass-bg); }

/* —— 组件：玻璃数据卡（指标） —— */
.stat-card {
  padding: 20px; border-radius: 24px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.stat-card .stat-num { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat-card .stat-cap { margin-top: 6px; font-size: 13px; color: var(--text-2); }

/* —— 组件：标签 / 徽章 —— */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500;
  background: var(--glass-bg-soft); border: 1px solid var(--border); color: var(--text-2);
}
.chip-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chip-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.chip-success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.chip-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.chip-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.chip .material-symbols-outlined { font-size: 14px; }

/* —— 卡片悬浮 —— */
.card-hover { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s, background .3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--border-strong); }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img { transform: scale(1.05); }

/* —— 进度条（玻璃分析片用） —— */
.meter { height: 6px; border-radius: 9999px; background: var(--bg-sunken); overflow: hidden; }
html.dark .meter { background: rgba(255,255,255,.08); }
.meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }

/* —— 导航链接 —— */
.nav-link {
  padding: 8px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500;
  color: var(--text-2); transition: all .25s; text-decoration: none; white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--glass-bg); }
.nav-link.active { color: var(--text); background: var(--glass-bg); border: 1px solid var(--glass-border); }

/* 图标按钮（24px 图标 / 40px 触控区，沿用统一导航规范） */
.icon-btn {
  width: 40px; height: 40px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); cursor: pointer; border: 1px solid transparent;
  transition: all .25s; background: transparent;
}
.icon-btn:hover { color: var(--text); background: var(--glass-bg); border-color: var(--glass-border); }
.icon-btn .material-symbols-outlined { font-size: 24px; }

.lang-menu { position:relative; }
.lang-menu-list { position:absolute; top:calc(100% + 8px); right:0; z-index:60; display:grid; min-width:128px; padding:6px; border:1px solid var(--glass-border); border-radius:14px; box-shadow:var(--shadow-float); }
.lang-menu-list[hidden] { display:none; }
.lang-menu-list button { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:var(--text-2); cursor:pointer; font:inherit; font-size:13px; text-align:left; }
.lang-menu-list button:hover,.lang-menu-list button:focus-visible { background:var(--accent-soft); color:var(--text); }
.lang-menu-list button[aria-checked="true"] { color:var(--accent); }
.lang-menu-list .material-symbols-outlined { font-size:17px; opacity:0; }
.lang-menu-list button[aria-checked="true"] .material-symbols-outlined { opacity:1; }

/* 键盘焦点不依赖悬停或颜色状态；页面局部规则可按需要覆盖。 */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* 主题配色：仅覆盖交互 accent，明暗与语义状态色仍由基础 token 管理。 */
.tm-palette { width:min(360px, calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; margin:auto; padding:20px; color:var(--text); border:1px solid var(--glass-border); border-radius:24px; background:var(--bg-elev); box-shadow:var(--shadow-float); }
.tm-palette::backdrop { background:color-mix(in srgb, var(--bg) 74%, transparent); }
.tm-palette-head,.tm-palette-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tm-palette-head h2 { margin:0; font-size:16px; }
.tm-palette-close { width:44px; height:44px; border:0; padding:0; background:transparent; color:var(--text-2); cursor:pointer; }
.tm-palette-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:16px 0; }
.tm-palette-choice { position:relative; display:grid; gap:5px; place-items:center; min-height:56px; padding:7px 3px; border:1px solid var(--border); border-radius:14px; background:var(--glass-bg-soft); color:var(--text-2); font:11px/1 inherit; cursor:pointer; }
.tm-palette-choice[aria-pressed="true"] { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 2px var(--accent-soft); }
.tm-palette-selected { display:none; position:absolute; top:5px; right:7px; color:var(--text); font-size:16px; font-variation-settings:"FILL" 1; }
.tm-palette-choice[aria-pressed="true"] .tm-palette-selected { display:block; }
.tm-palette-swatch { width:22px; height:22px; border-radius:999px; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.tm-palette-custom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--glass-bg-soft); }
.tm-palette-custom label { font-size:13px; color:var(--text-2); }
.tm-palette-color { width:44px; height:44px; padding:2px; border:1px solid var(--border); border-radius:9px; background:transparent; cursor:pointer; }
.tm-palette-status { min-height:20px; margin:12px 0 0; color:var(--text-3); font-size:12px; }
.tm-palette-status.ok { color:var(--success); }.tm-palette-status.error { color:var(--danger); }
.tm-palette-restore,.tm-palette-save { min-height:44px; border:0; padding:9px 14px; border-radius:999px; font:13px/1 inherit; cursor:pointer; }
.tm-palette-restore { background:transparent; color:var(--text-2); }.tm-palette-save { background:var(--accent); color:var(--accent-ink, #fff); }

/* 图谱工具栏使用 40px 紧凑控制，页面选择器会覆盖此通用触控规则。 */
@media (pointer:coarse) {
  .icon-btn { width:44px; height:44px; }
  .btn-pill,.btn-ghost { min-height:44px; }
}

/* —— 输入框（需压过 vendor tailwind 预检的 [type="text"] 白底） —— */
body.v5 .input-glass {
  width: 100%; border-radius: 9999px; border: 1px solid var(--border);
  background: var(--glass-bg-soft); color: var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 10px 18px; font-size: 14px; outline: none; transition: all .25s;
}
body.v5 .input-glass::placeholder { color: var(--text-3); }
body.v5 .input-glass:focus { border-color: var(--accent); background: var(--glass-bg); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 文本域（投稿/表单页用），同上压预检 */
body.v5 .area-glass {
  width: 100%; border-radius: 20px; border: 1px solid var(--border);
  background: var(--glass-bg-soft); color: var(--text);
  padding: 14px 18px; font-size: 14px; line-height: 1.6; outline: none; transition: all .25s;
  resize: vertical; min-height: 96px;
}
body.v5 .area-glass::placeholder { color: var(--text-3); }
body.v5 .area-glass:focus { border-color: var(--accent); background: var(--glass-bg); box-shadow: 0 0 0 3px var(--accent-soft); }
body.v5 select.input-glass { border-radius: 14px; appearance: none; }

/* —— 入场动效（0.8s 标准曲线） —— */
.fade-up { opacity: 0; transform: translateY(20px); animation: v5FadeUp .8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes v5FadeUp { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: .1s } .delay-200 { animation-delay: .2s }
.delay-300 { animation-delay: .3s } .delay-400 { animation-delay: .4s }
.delay-500 { animation-delay: .5s }

@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; opacity: 1; transform: none; }
  .card-hover, .btn-pill, .img-zoom img { transition: none; }
}

/* 受限网络/低端设备：复用 app-interactions 的 data-app-lite，保留版式并省掉最贵的合成层。 */
html[data-app-lite="true"] .glass,
html[data-app-lite="true"] .glass-soft,
html[data-app-lite="true"] .glass-strong,
html[data-app-lite="true"] .glass-inset,
html[data-app-lite="true"] .btn-ghost,
html[data-app-lite="true"] .stat-card,
html[data-app-lite="true"] body.v5 .input-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-app-lite="true"] .fade-up { animation: none; opacity: 1; transform: none; }
html[data-app-lite="true"] .card-hover,
html[data-app-lite="true"] .btn-pill,
html[data-app-lite="true"] .btn-ghost,
html[data-app-lite="true"] .icon-btn,
html[data-app-lite="true"] .nav-link,
html[data-app-lite="true"] .img-zoom img { transition: none; }

/* —— 背景巨字（hero 装饰，6% 透明度 + 模糊） —— */
.bg-word {
  position: absolute; font-weight: 800; letter-spacing: -0.06em; line-height: .8;
  color: var(--text); opacity: .06; filter: blur(2px);
  user-select: none; pointer-events: none; white-space: nowrap;
}

/* —— 滚动条 —— */
.v5 ::-webkit-scrollbar, body.v5 ::-webkit-scrollbar { width: 6px; height: 6px; }
body.v5 ::-webkit-scrollbar-track { background: transparent; }
body.v5 ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

/* 状态点 */
.dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.dot-live { background: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }

/* —— 接缝辉光线（seam）：accent 色 1px 渐变辉光，portal hero 同源细节 —— */
.seam {
  display: block; width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .55;
  box-shadow: 0 0 16px var(--accent-glow);
}
.seam-vertical {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  box-shadow: 0 0 12px var(--accent-glow);
}
@media (prefers-reduced-motion: reduce) { .seam, .seam-vertical { box-shadow: none; } }