/* ==========================================================================
   Toolbox — design system
   ========================================================================== */

:root{
  --radius-lg: 18px;
  --radius: 13px;
  --radius-sm: 9px;
  --side-w: 266px;
  --top-h: 60px;
  --fs-scale: 1;   /* 全局字号缩放：移动端媒体查询里改小 */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- dark (default) ---------- */
html[data-theme="dark"]{
  --bg: #07080c;
  --bg-soft: #0b0e14;
  --surface: #10141c;
  --surface-2: #151a24;
  --surface-3: #1b2230;
  --border: rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.15);
  --text: #e9edf5;
  --text-2: #aab4c5;
  --muted: #7c879a;
  --faint: #59627399;
  --accent: #7b86ff;
  --accent-2: #35d6e8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(123,134,255,.14);
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-pop: 0 30px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(123,134,255,.22), transparent 70%);
  --card-hover: #161c27;
  --code-bg: #0a0d13;
  --sel: rgba(123,134,255,.32);
  color-scheme: dark;
}

/* ---------- light ---------- */
html[data-theme="light"]{
  /* 中性灰底 + 纯白卡：底色压深一档，白卡才立得起来 */
  --bg: #f5f6f9;
  --bg-soft: #eef0f5;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eceef4;
  --border: #e4e7ee;
  --border-strong: #cfd5e1;
  --text: #0e1320;
  --text-2: #3b4456;
  --muted: #677186;
  --faint: #8d97a8;
  --accent: #4759d6;
  --accent-2: #0d8b96;
  --accent-ink: #ffffff;
  --accent-soft: rgba(71,89,214,.10);
  --good: #0c8a5c;
  --warn: #a35c07;
  --bad: #ce3232;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -18px rgba(15,23,42,.28);
  --shadow-pop: 0 22px 52px -22px rgba(15,23,42,.24), 0 0 0 1px rgba(15,23,42,.06);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(71,89,214,.10), transparent 70%);
  --card-hover: #ffffff;
  --code-bg: #f5f7fa;
  --sel: rgba(71,89,214,.16);
  /* 白卡需要一点点投影才不「飘」 */
  --card-shadow: 0 1px 1px rgba(15,23,42,.035), 0 5px 14px -8px rgba(15,23,42,.12);
  --card-shadow-hover: 0 2px 4px rgba(15,23,42,.05), 0 14px 26px -14px rgba(15,23,42,.18);
  color-scheme: light;
}

/* category hues */
html[data-theme="dark"]{
  --c-dev:#7b86ff; --c-text:#3ddc97; --c-image:#fbbf24; --c-calc:#b18cff;
  --c-random:#fb7185; --c-net:#38bdf8; --c-time:#fb923c;
  --c-qr:#2dd4bf;
  --c-pdf:#f87171; --c-video:#a3e635;
  --c-almanac:#e879f9; --c-travel:#38bdf8; --c-psych:#f9a8d4;
}
html[data-theme="light"]{
  --c-dev:#4759d6; --c-text:#0c8a5e; --c-image:#ab610d; --c-calc:#7748c6;
  --c-random:#c33257; --c-net:#0a7ba1; --c-time:#bb5c0b;
  --c-qr:#0a877e;
  --c-pdf:#c5332e; --c-video:#537a17;
  --c-almanac:#973aa8; --c-travel:#17699b; --c-psych:#9d174d;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:max(12.5px, calc(16px * var(--fs-scale, 1))); line-height:1.55;
  /* 别让 iOS 横竖屏切换时自动放大字号，移动端字号统一由 --fs-scale 控制 */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 460px at 82% -8%, var(--accent-soft), transparent 70%),
    radial-gradient(700px 400px at 4% 104%, rgba(53,214,232,.08), transparent 70%);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(820px 420px at 86% -12%, rgba(71,89,214,.055), transparent 68%),
    radial-gradient(620px 380px at 0% 108%, rgba(71,89,214,.035), transparent 70%);
}
::selection{ background:var(--sel); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
h1,h2,h3,h4,p{ margin:0; }
img{ max-width:100%; }
.sprite{ display:none; }

[data-ic]{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none;
}
[data-ic] svg{
  width:100%; height:100%; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box; }

/* ============================ layout ============================ */
.app{ display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; position:relative; z-index:1; }

.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  padding:18px 14px 14px; border-right:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  z-index:30;
}
html[data-theme="light"] .sidebar{ background:var(--surface); backdrop-filter:none; }
.brand{ display:flex; align-items:center; gap:11px; padding:4px 8px 18px; }
.brand-mark{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--accent), var(--accent-2));
  color:#fff; box-shadow:0 8px 20px -8px var(--accent);
}
.brand-mark [data-ic]{ width:21px; height:21px; }
.brand-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.brand-name{ font-size:max(12.5px, calc(17.5px * var(--fs-scale, 1))); font-weight:650; letter-spacing:.2px; display:flex; align-items:baseline; gap:7px; }
.brand-name em{ font-style:normal; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.brand-sub{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); white-space:nowrap; }

.side-search{
  display:flex; align-items:center; gap:8px; padding:0 10px; height:38px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
  color:var(--muted); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.side-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--text); }
.side-search input{
  flex:1; min-width:0; border:0; background:none; outline:none; font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); color:var(--text);
}
.side-search input::placeholder{ color:var(--muted); }
kbd{
  font-family:var(--mono); font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); padding:2px 5px; border-radius:5px;
  border:1px solid var(--border); background:var(--surface-3); color:var(--muted);
  white-space:nowrap;
}

.nav{ margin-top:14px; overflow-y:auto; overflow-x:hidden; flex:1; padding-right:2px; margin-right:-4px; }
.nav-group{ margin-bottom:14px; }
.nav-label{
  font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); letter-spacing:1.1px; text-transform:uppercase; color:var(--faint);
  padding:0 10px 6px; font-weight:650;
}
.nav a{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
  color:var(--text-2, var(--muted)); font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease);
  position:relative;
}
.nav a .dot{ width:6px; height:6px; border-radius:50%; background:var(--c, var(--accent)); opacity:.9; flex:none; box-shadow:0 0 8px -1px var(--c, var(--accent)); }
html[data-theme="light"] .nav a .dot{ box-shadow:none; opacity:.85; }
.nav a .cnt{ margin-left:auto; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--faint); font-variant-numeric:tabular-nums; }
.nav a:hover{ background:var(--surface-2); color:var(--text); }
.nav a.on{ background:var(--accent-soft); color:var(--text); font-weight:600; }
.nav a.on::before{
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:0 3px 3px 0; background:var(--c, var(--accent));
}

.side-foot{ padding-top:12px; border-top:1px solid var(--border); }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.seg button{
  display:flex; align-items:center; justify-content:center; gap:5px; height:28px; border-radius:7px;
  font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); transition:all .16s var(--ease);
}
.seg button [data-ic]{ width:14px; height:14px; }
.seg button:hover{ color:var(--text); }
.seg button.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.14); font-weight:600; }
.privacy{ display:flex; align-items:center; gap:6px; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); line-height:1.45; color:var(--faint); padding:11px 4px 0; }
.privacy [data-ic]{ width:13px; height:13px; }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:var(--top-h); position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; padding:0 26px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
}
.crumb{ display:flex; align-items:center; gap:7px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); color:var(--muted); min-width:0; }
.crumb a:hover{ color:var(--text); }
.crumb .sep{ opacity:.5; }
.crumb .cur{ color:var(--text); font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ghost-search{
  display:flex; align-items:center; gap:8px; height:34px; padding:0 9px 0 11px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  color:var(--muted); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); transition:all .16s var(--ease);
}
.ghost-search:hover{ border-color:var(--border-strong); color:var(--text); }
.ghost-search [data-ic]{ width:15px; height:15px; }
.icon-btn{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-2, var(--muted));
  transition:all .16s var(--ease);
}
.icon-btn:hover{ color:var(--text); border-color:var(--border-strong); transform:translateY(-1px); }
.icon-btn.sm{ width:26px; height:26px; border:0; background:none; }
.only-mobile{ display:none; }

.view{ flex:1; padding:34px 34px 80px; max-width:1360px; width:100%; margin:0 auto; outline:none; }

/* ============================ home ============================ */
.hero{ position:relative; padding:26px 0 34px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 7px; border-radius:99px;
  border:1px solid var(--border); background:var(--surface); font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted);
  margin-bottom:18px;
}
.hero-badge [data-ic]{ width:14px; height:14px; color:var(--accent); }
.hero-badge b{ color:var(--text); font-weight:600; }
.hero h1{
  font-size:clamp(30px,4.4vw,46px); line-height:1.13; letter-spacing:-1.2px; font-weight:800;
  max-width:16em;
}
.hero h1 span{
  background:linear-gradient(100deg, var(--accent) 8%, var(--accent-2) 52%, var(--accent) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:shimmer 9s var(--ease) infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
html[data-theme="light"] .hero h1 span{
  background-image:linear-gradient(100deg, #3f4ecc 6%, #6d7cf2 52%, #3f4ecc 96%);
}
.hero p.lead{ margin-top:14px; font-size:max(12.5px, calc(16.5px * var(--fs-scale, 1))); color:var(--muted); max-width:44em; }

.hero-search{ margin-top:24px; position:relative; max-width:640px; }
.hero-search .box{
  display:flex; align-items:center; gap:10px; height:52px; padding:0 12px 0 16px;
  border-radius:14px; border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-search .box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--shadow); }
.hero-search .box [data-ic]{ color:var(--muted); width:19px; height:19px; }
.hero-search input{ flex:1; min-width:0; border:0; outline:none; background:none; font-size:max(12.5px, calc(17px * var(--fs-scale, 1))); }
.hero-search input::placeholder{ color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.chip{
  padding:5px 11px; border-radius:99px; border:1px solid var(--border); background:var(--surface-2);
  font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--muted); transition:all .15s var(--ease);
}
.chip:hover{ color:var(--text); border-color:var(--border-strong); transform:translateY(-1px); }
html[data-theme="light"] .chip{ background:var(--surface); }
html[data-theme="light"] .sc-prov{ background:var(--surface); }
html[data-theme="light"] .sc-prov:hover{ background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
html[data-theme="light"] .sc-prov.on{ background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.home-stats{ display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
.home-stats div{ display:flex; flex-direction:column; }
.home-stats b{ font-size:max(12.5px, calc(20.5px * var(--fs-scale, 1))); font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.home-stats span{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); }

.section-head{ display:flex; align-items:center; gap:10px; margin:38px 0 15px; }
.section-head h2{ font-size:max(12.5px, calc(17.5px * var(--fs-scale, 1))); font-weight:650; letter-spacing:-.2px; }
.section-head .bar{ width:3px; height:15px; border-radius:2px; background:var(--c, var(--accent)); }
.section-head .count{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); padding:2px 8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); }
.section-head .more{ margin-left:auto; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--muted); display:flex; align-items:center; gap:4px; }
.section-head .more:hover{ color:var(--accent); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(228px,1fr)); gap:12px; }
.card{
  position:relative; display:flex; gap:12px; padding:15px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface); text-align:left;
  box-shadow:var(--card-shadow, none);
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px 120px at 12% 0%, var(--c), transparent 72%);
  opacity:0; transition:opacity .22s var(--ease);
}
.card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 42%, var(--border)); background:var(--card-hover); box-shadow:var(--card-shadow-hover, 0 16px 34px -26px rgba(0,0,0,.8)); }
.card:hover::after{ opacity:.075; }
.card-ic{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.card-ic [data-ic]{ width:18px; height:18px; }
.card-tx{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.card-tx b{ font-size:max(12.5px, calc(15.5px * var(--fs-scale, 1))); font-weight:600; letter-spacing:-.1px; }
.card-tx span{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .star{ position:absolute; top:12px; right:12px; color:var(--accent); opacity:0; transition:opacity .16s; }
.card:hover .star{ opacity:.9; }
.card .star [data-ic]{ width:14px; height:14px; }

.recent-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.recent-strip a{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border); font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--text-2,var(--muted));
}
.recent-strip a:hover{ color:var(--text); border-color:var(--border-strong); }
.recent-strip .dot{ width:5px; height:5px; border-radius:50%; background:var(--c, var(--accent)); }

.empty{ padding:60px 20px; text-align:center; color:var(--muted); }
.empty b{ display:block; font-size:max(12.5px, calc(17px * var(--fs-scale, 1))); color:var(--text); margin-bottom:6px; }
.empty [data-ic]{ width:34px; height:34px; margin-bottom:10px; opacity:.5; }

/* ============================ tool page ============================ */
.tool-head{ display:flex; gap:15px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.tool-head .tile{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  box-shadow:0 12px 26px -18px var(--c);
}
.tool-head .tile [data-ic]{ width:23px; height:23px; }
.tool-head h1{ font-size:max(12.5px, calc(23.5px * var(--fs-scale, 1))); letter-spacing:-.5px; font-weight:700; }
.tool-head .desc{ margin-top:5px; color:var(--muted); font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); max-width:60em; }
.tool-meta{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.tag{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); padding:2px 8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); }
.tool-head .spacer{ flex:1; }
.fav-btn{ display:flex; align-items:center; gap:5px; }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow);
}
.panel + .panel{ margin-top:14px; }

/* 工具主体：统一卡片容器 */
.tool-body{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow);
}
.tool-body > * + *{ margin-top:14px; }
.panel-title{ display:flex; align-items:center; gap:8px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; color:var(--text-2,var(--muted)); letter-spacing:.2px; margin-bottom:12px; }
.panel-title .line{ flex:1; height:1px; background:var(--border); }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
/* 行内控件不再撑满整行，避免把同伴挤到下一行 */
.row > select{ width:auto; min-width:110px; flex:0 0 auto; }
.row > input[type="text"], .row > input[type="number"], .row > input[type="search"],
.row > input[type="password"], .row > input[type="date"], .row > input[type="datetime-local"]{
  width:auto; flex:1 1 140px; min-width:90px;
}
.row > input[type="color"]{ width:64px; flex:0 0 auto; }
.row > .btn, .row > .segmented{ flex:0 0 auto; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.grow{ flex:1; min-width:0; }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.row > .field{ flex:1 1 170px; }
.row > .field.grow-none{ flex:0 0 auto; }
.field > label, .lbl{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; color:var(--muted); letter-spacing:.2px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.field .hint{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--faint); }
.range-wrap{ display:flex; align-items:center; gap:10px; width:100%; }
.range-wrap input[type="range"]{ flex:1 1 auto; min-width:70px; }
.range-wrap .range-val{
  min-width:44px; text-align:right; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums; font-family:var(--mono);
}

input[type="text"], input[type="number"], input[type="password"], input[type="search"], select, textarea{
  width:100%; padding:9px 11px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); outline:none; font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); color:var(--text);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface); }
input::placeholder, textarea::placeholder{ color:var(--muted); opacity:.85; }
textarea{ resize:vertical; min-height:120px; font-family:var(--mono); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.6; tab-size:2; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 51%, calc(100% - 10px) 51%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; cursor:pointer; }
input[type="range"]{ -webkit-appearance:none; width:100%; height:4px; padding:0; border:0; background:var(--surface-3); border-radius:99px; box-shadow:none; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
input[type="range"]:focus{ box-shadow:none; }
input[type="color"]{ width:100%; height:38px; padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }
.check{ display:inline-flex; align-items:center; gap:7px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); color:var(--text-2,var(--muted)); cursor:pointer; user-select:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px;
  border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); font-weight:550; transition:all .16s var(--ease); white-space:nowrap;
  flex:0 0 auto; line-height:1;
}
.btn [data-ic]{ width:15px; height:15px; }
.btn:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.primary{
  background:linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
  border-color:transparent; color:var(--accent-ink); font-weight:600;
  box-shadow:0 10px 22px -14px var(--accent);
}
.btn.primary:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; }
.btn.sm{ height:29px; padding:0 10px; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); border-radius:8px; }
.btn.icon{ width:36px; padding:0; }
.btn.icon.sm{ width:29px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn.danger:hover{ color:var(--bad); border-color:var(--bad); }

.segmented{ display:inline-flex; padding:3px; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.segmented button{ padding:5px 11px; border-radius:7px; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--muted); transition:all .15s var(--ease); white-space:nowrap; }
.segmented button:hover{ color:var(--text); }
.segmented button.on{ background:var(--surface); color:var(--text); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.16); }

.out{
  width:100%; margin:0; padding:12px 14px; min-height:90px; max-height:440px; overflow:auto;
  background:var(--code-bg); border:1px solid var(--border); border-radius:11px;
  font-family:var(--mono); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.65; white-space:pre-wrap; word-break:break-word;
}
.out:empty::before{ content:"结果会显示在这里"; color:var(--muted); opacity:.7; }
.out.mono-sm{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); }
.out.tall{ min-height:220px; }
.out.err{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--border)); }
.out.ok{ color:var(--good); }
.pane{ position:relative; }
.pane-tools{ position:absolute; top:8px; right:8px; display:flex; gap:5px; z-index:2; }
.pane-tools .btn{ height:26px; padding:0 8px; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(6px); }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:9px; }
.stat{
  padding:12px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px; overflow:hidden;
}
.stat b{
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
  font-size:max(12.5px, calc(19px * var(--fs-scale, 1))); font-weight:700; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stat span{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); }
.stat.accent b{ color:var(--accent); }

.note{
  display:flex; gap:9px; padding:11px 13px; border-radius:11px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.6;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}
.note [data-ic]{ width:15px; height:15px; margin-top:2px; color:var(--accent); flex:none; }
.note b{ color:var(--text); font-weight:600; }
.note.warn{ border-color:color-mix(in srgb, var(--warn) 34%, var(--border)); }
.note.warn [data-ic]{ color:var(--warn); }
.note.bad{ border-color:color-mix(in srgb, var(--bad) 34%, var(--border)); }
.note.bad [data-ic]{ color:var(--bad); }

.kv{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; font-family:var(--mono); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); word-break:break-all; }

table.tbl{ width:100%; border-collapse:collapse; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); }
table.tbl th{
  text-align:left; padding:8px 10px; color:var(--muted); font-weight:600; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1)));
  border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.5px;
}
table.tbl td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:var(--surface-2); }
table.tbl td.num{ font-family:var(--mono); }
table.tbl .swatch{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border); }

.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; }
.swatch-card{
  border-radius:11px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2); cursor:pointer;
  transition:transform .15s var(--ease), border-color .15s;
}
.swatch-card:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.swatch-card .fill{ height:56px; }
.swatch-card .meta{ padding:8px 10px; display:flex; flex-direction:column; gap:1px; }
.swatch-card .meta b{ font-family:var(--mono); font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; text-transform:uppercase; }
.swatch-card .meta span{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); }

/* diff */
.diff{ font-family:var(--mono); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.65; border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--code-bg); }
.diff-line{ display:flex; gap:10px; padding:1px 12px; white-space:pre-wrap; word-break:break-word; }
.diff-line .no{ width:34px; flex:none; text-align:right; color:var(--faint); user-select:none; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); }
.diff-line.add{ background:color-mix(in srgb, var(--good) 13%, transparent); box-shadow:inset 2px 0 0 var(--good); }
.diff-line.del{ background:color-mix(in srgb, var(--bad) 12%, transparent); box-shadow:inset 2px 0 0 var(--bad); }
.diff-line.same{ color:var(--muted); }

/* markdown preview */
.md-body{ font-size:max(12.5px, calc(16px * var(--fs-scale, 1))); line-height:1.75; word-break:break-word; }
.md-body h1,.md-body h2,.md-body h3,.md-body h4{ margin:1.2em 0 .5em; line-height:1.3; letter-spacing:-.3px; }
.md-body h1{ font-size:1.7em; } .md-body h2{ font-size:1.4em; } .md-body h3{ font-size:1.15em; } .md-body h4{ font-size:1em; }
.md-body p{ margin:.7em 0; }
.md-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.md-body code{ font-family:var(--mono); font-size:.88em; padding:2px 5px; border-radius:5px; background:var(--surface-3); }
.md-body pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:13px; overflow:auto; }
.md-body pre code{ background:none; padding:0; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); }
.md-body blockquote{ margin:.8em 0; padding:.2em 1em; border-left:3px solid var(--border-strong); color:var(--muted); }
.md-body ul,.md-body ol{ margin:.6em 0; padding-left:1.4em; }
.md-body li{ margin:.25em 0; }
.md-body hr{ border:0; border-top:1px solid var(--border); margin:1.4em 0; }
.md-body table{ border-collapse:collapse; margin:.8em 0; }
.md-body th,.md-body td{ border:1px solid var(--border); padding:6px 10px; }
.md-body img{ border-radius:8px; }

/* image tools */
.drop{
  border:1.5px dashed var(--border-strong); border-radius:14px; padding:34px 20px; text-align:center;
  background:var(--surface-2); color:var(--muted); cursor:pointer; transition:all .18s var(--ease);
}
.drop:hover, .drop.over{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); }
.drop [data-ic]{ width:26px; height:26px; margin-bottom:8px; color:var(--accent); }
.drop b{ display:block; color:var(--text); font-size:max(12.5px, calc(15.5px * var(--fs-scale, 1))); margin-bottom:3px; }
.drop small{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); }
.preview-wrap{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; }
.preview-box{
  position:relative; border-radius:11px; border:1px solid var(--border); background:
    repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50%/16px 16px;
  min-height:180px; display:grid; place-items:center; overflow:hidden; padding:8px;
}
.preview-box img{ max-height:min(52vh, 520px); border-radius:6px; display:block; cursor:zoom-in; }
.preview-box .cap{ position:absolute; top:7px; left:7px; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); padding:2px 7px; border-radius:6px; background:color-mix(in srgb, var(--bg) 70%, transparent); color:var(--text-2,var(--muted)); backdrop-filter:blur(4px); }
.preview-box canvas{ max-width:100%; max-height:min(52vh, 520px); border-radius:6px; display:block; cursor:crosshair; }
.preview-zoom{
  position:absolute; top:7px; right:7px; z-index:2; display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px; opacity:0; transform:translateY(-2px);
  background:color-mix(in srgb, var(--bg) 74%, transparent); border:1px solid var(--border-strong);
  color:var(--text-2, var(--muted)); backdrop-filter:blur(6px); transition:all .16s var(--ease);
}
.preview-zoom [data-ic]{ width:15px; height:15px; }
.preview-box:hover .preview-zoom, .preview-zoom:focus-visible{ opacity:1; transform:none; }
.preview-zoom:hover{ color:var(--text); border-color:var(--accent); background:var(--accent-soft); }
@media (hover:none){ .preview-zoom{ opacity:1; transform:none; } }

/* ---------- 图片全屏查看 ---------- */
.zoom-layer{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; overflow:hidden;
  background:rgba(6,8,12,.9); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .18s var(--ease); touch-action:none;
}
.zoom-layer[hidden]{ display:none; }
.zoom-layer.on{ opacity:1; }
.zoom-stage{ position:relative; display:grid; place-items:center; cursor:grab; }
.zoom-stage.drag{ cursor:grabbing; }
.zoom-stage img{
  max-width:94vw; max-height:84vh; display:block; border-radius:8px; user-select:none;
  -webkit-user-drag:none; transform-origin:center center; will-change:transform;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  image-rendering:auto;
}
.zoom-hud{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:12px; padding:7px 10px 7px 16px; border-radius:99px;
  background:rgba(18,22,30,.88); border:1px solid rgba(255,255,255,.13);
  color:#cbd3e0; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); white-space:nowrap; backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.zoom-hud .zoom-meta{ display:flex; align-items:center; gap:9px; min-width:0; }
.zoom-hud .zoom-cap{ color:#eef2f8; font-weight:600; max-width:22ch; overflow:hidden; text-overflow:ellipsis; }
.zoom-hud .zoom-dims{ font-style:normal; color:#8e99ac; font-variant-numeric:tabular-nums; }
.zoom-hud .zoom-val{ color:#fff; font-weight:600; min-width:44px; text-align:right; font-variant-numeric:tabular-nums; }
.zoom-hud .zoom-nav{ display:none; align-items:center; gap:2px; padding-left:12px; border-left:1px solid rgba(255,255,255,.14); }
.zoom-hud .zoom-nav:not([hidden]){ display:flex; }
.zoom-hud .zoom-idx{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:#a9b3c4; font-variant-numeric:tabular-nums; min-width:40px; text-align:center; }
.zoom-hud .sep{ width:1px; height:14px; background:rgba(255,255,255,.16); }
.zoom-hud button{
  display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  color:#cbd3e0; transition:all .15s var(--ease);
}
.zoom-hud button:hover:not(:disabled){ background:rgba(255,255,255,.12); color:#fff; }
.zoom-hud button:disabled{ opacity:.3; cursor:default; }
.zoom-hud [data-ic]{ width:15px; height:15px; }
.zoom-close{
  position:fixed; top:20px; right:22px; z-index:2; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; color:#e8edf6;
  background:rgba(22,26,34,.8); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px);
  transition:all .16s var(--ease);
}
.zoom-close:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }
.zoom-close [data-ic]{ width:17px; height:17px; }
.img-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); color:var(--muted); }
.img-meta b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.qr-holder{ display:grid; place-items:center; align-self:flex-start; padding:14px; background:#fff; border-radius:12px; }
.field > .segmented{ align-self:flex-start; }
.qr-holder img, .qr-holder canvas{ display:block; max-width:100%; }
.qr-extra{ display:flex; flex-direction:column; gap:12px; padding-top:16px; border-top:1px dashed var(--border); }
.qr-extra > .lbl{ color:var(--text); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); }
.qr-extra > .lbl svg{ width:14px; height:14px; opacity:.8; }
/* PDF / 视频：页面缩略图网格 */
.pdf-pages{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; }
.pdf-page{ border:1px solid var(--border); border-radius:12px; background:var(--surface-2); padding:8px; display:flex; flex-direction:column; gap:8px; }
.pdf-page .thumb{ background:#fff; border-radius:8px; overflow:hidden; display:grid; place-items:center; min-height:120px; }
.pdf-page .thumb img{ display:block; width:100%; height:auto; }
.pdf-page .row.between{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); gap:6px; }
.pdf-page .row.between span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 视频预览 */
.video-box{ border:1px solid var(--border); border-radius:12px; background:#000; overflow:hidden; display:grid; place-items:center; }
.video-box video{ display:block; max-width:100%; max-height:360px; width:auto; }
.gif-box{ border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px; display:grid; place-items:center; align-self:flex-start; max-width:100%; }
.gif-box img{ display:block; max-width:100%; border-radius:6px; }
.timeline-row{ display:grid; grid-template-columns:1fr 88px; gap:10px; align-items:center; }

.qr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.qr-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.qr-card canvas{ width:100%; height:auto; border-radius:6px; background:#fff; display:block; }
.qr-card .t{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qr-card .btn{ width:100%; }

/* palette */
.palette{ position:fixed; inset:0; z-index:80; display:grid; place-items:start center; padding-top:13vh; background:rgba(4,6,10,.55); backdrop-filter:blur(6px); animation:fade .16s var(--ease); }
.palette[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0; } }
.palette-box{
  width:min(600px, calc(100vw - 32px)); border-radius:16px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-pop);
  animation:pop .2s var(--ease);
}
@keyframes pop{ from{ transform:translateY(-8px) scale(.985); opacity:0; } }
.palette-input{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.palette-input [data-ic]{ color:var(--muted); }
.palette-input input{ flex:1; border:0; background:none; outline:none; font-size:max(12.5px, calc(17px * var(--fs-scale, 1))); }
.palette-list{ max-height:min(52vh, 420px); overflow-y:auto; padding:7px; }
.p-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; }
.p-item .pi-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c); flex:none; }
.p-item .pi-ic [data-ic]{ width:15px; height:15px; }
.p-item b{ font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); font-weight:550; display:block; }
.p-item span{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); }
.p-item .pi-cat{ margin-left:auto; font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); opacity:.78; }
.p-item.on{ background:var(--accent-soft); }
.p-item.on b{ color:var(--accent); }
.p-empty{ padding:30px; text-align:center; color:var(--muted); font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); }
.palette-foot{ display:flex; gap:16px; padding:9px 14px; border-top:1px solid var(--border); font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); }
.palette-foot span{ display:flex; align-items:center; gap:4px; }

/* toast */
.toasts{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:10px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1)));
  background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-pop);
  animation:toast-in .22s var(--ease); color:var(--text);
}
.toast.out{ animation:toast-out .22s var(--ease) forwards; }
.toast [data-ic]{ width:15px; height:15px; color:var(--good); }
.toast.bad [data-ic]{ color:var(--bad); }
@keyframes toast-in{ from{ transform:translateY(10px); opacity:0; } }
@keyframes toast-out{ to{ transform:translateY(6px); opacity:0; } }

.scrim{ display:none; }

/* ============================ responsive ============================ */
@media (max-width: 1080px){
  :root{ --side-w: 228px; }
  .view{ padding:26px 22px 70px; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }
}
@media (max-width: 860px){
  :root{ --fs-scale: .9; }   /* 手机端整体字号缩到 90%，桌面端不变 */
  .app{ grid-template-columns:1fr; }
  .only-mobile{ display:grid; }
  .sidebar{
    position:fixed; left:0; top:0; width:272px; transform:translateX(-100%);
    transition:transform .24s var(--ease); background:var(--surface); z-index:60;
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .scrim{ display:block; position:fixed; inset:0; background:rgba(4,6,10,.5); z-index:55; backdrop-filter:blur(3px); }
  .topbar{ padding:0 16px; }
  .ghost-search span{ display:none; }
  .ghost-search kbd{ display:none; }
  .view{ padding:20px 16px 60px; }
  .grid-2, .grid-3, .preview-wrap{ grid-template-columns:1fr; }
  .hero h1{ font-size:max(12.5px, calc(30px * var(--fs-scale, 1))); }
  .hero-search .box{ height:46px; }
  .hero-search kbd{ display:none; }
  .tool-head{ gap:12px; }
  .tool-head h1{ font-size:max(12.5px, calc(20.5px * var(--fs-scale, 1))); }
  .panel{ padding:14px; border-radius:14px; }
  .tool-body{ padding:14px; border-radius:14px; }
  .row > .field{ flex:1 1 100%; }
  .zoom-hud .zoom-tip, .zoom-hud .sep.zoom-tip, .zoom-hud .zoom-dims{ display:none; }
  .zoom-hud{ max-width:92vw; gap:10px; padding:6px 8px 6px 14px; }
  .zoom-stage img{ max-width:96vw; max-height:80vh; }
  .zoom-close{ top:14px; right:14px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================ 民俗历法：星座 / 节气 ============================ */
html[data-theme="dark"]{
  --el-fire:#fb7185; --el-earth:#fbbf24; --el-air:#38bdf8; --el-water:#60a5fa;
  --season-spring:#4ade80; --season-summer:#fb7185; --season-autumn:#fbbf24; --season-winter:#60a5fa;
}
html[data-theme="light"]{
  --el-fire:#c33257; --el-earth:#96660a; --el-air:#0a7ba1; --el-water:#2a5bd7;
  --season-spring:#0c8a5e; --season-summer:#c33a35; --season-autumn:#96660a; --season-winter:#2a5bd7;
}
.gl{ font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans","PingFang SC",serif; font-variant-emoji:text; }
.dsep{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--faint); vertical-align:middle; }

/* ---------- 星座 ---------- */
.sign-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:8px; }
.sign-tile{
  display:flex; align-items:center; gap:9px; padding:8px 10px; min-width:0; text-align:left;
  border:1px solid var(--border); border-radius:11px; background:var(--surface-2);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.sign-tile:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.sign-tile .gl{ font-size:max(15px, calc(20px * var(--fs-scale, 1))); line-height:1; color:var(--el); }
.sign-tile b{ display:block; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; white-space:nowrap; }
.sign-tile small{ display:block; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sign-tile.on{ background:color-mix(in srgb, var(--el) 14%, transparent); border-color:color-mix(in srgb, var(--el) 46%, var(--border)); }
.sign-tile.on b{ color:var(--el); }

.sign-hero{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:16px 18px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--el) 26%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--el) 13%, transparent), transparent 62%), var(--surface-2);
}
.sign-hero .gl{ font-size:max(34px, calc(44px * var(--fs-scale, 1))); line-height:1; color:var(--el); }
.el-badge{
  display:inline-flex; align-items:center; padding:1px 8px; border-radius:99px;
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); font-weight:600; color:var(--el);
  border:1px solid color-mix(in srgb, var(--el) 38%, transparent);
  background:color-mix(in srgb, var(--el) 12%, transparent);
}
.pd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pd-box{ border:1px solid var(--border); border-radius:12px; padding:11px 13px 12px; background:var(--surface-2); }
.pd-box h4{ display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); font-weight:600; color:var(--muted); }
.pd-box h4 [data-ic]{ width:14px; height:14px; }
.pd-box.good h4 [data-ic]{ color:var(--good); }
.pd-box.bad h4 [data-ic]{ color:var(--bad); }
.pd-box ul{ margin:0; padding-left:16px; }
.pd-box li{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); line-height:1.65; color:var(--text-2, var(--muted)); }
.pd-box.good li::marker{ color:var(--good); }
.pd-box.bad li::marker{ color:var(--bad); }

.luck-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.luck-item{ padding:9px 11px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); min-width:0; }
.luck-item span{ display:block; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.luck-item b{ display:block; margin-top:2px; font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.score-list{ display:flex; flex-direction:column; gap:1px; max-width:600px; }
.score-row{ display:grid; grid-template-columns:104px 1fr 38px; gap:10px; align-items:center; padding:5px 4px; border-radius:7px; }
.score-row:hover{ background:var(--surface-2); }
.score-name{ display:flex; align-items:center; gap:6px; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); min-width:0; white-space:nowrap; }
.score-name .gl{ color:var(--el); }
.score-bar{ height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.score-bar i{ display:block; height:100%; border-radius:99px; }
.score-bar i.hi{ background:var(--good); }
.score-bar i.mid{ background:var(--accent); }
.score-bar i.lo{ background:var(--muted); }
.score-val{ font-family:var(--mono); font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); text-align:right; color:var(--text-2, var(--muted)); font-variant-numeric:tabular-nums; }

.matrix-wrap{ overflow-x:auto; padding:8px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); }
.matrix{ display:grid; grid-template-columns:70px repeat(12, minmax(42px, 1fr)); gap:3px; min-width:600px; }
.matrix .hd{ display:flex; align-items:center; justify-content:center; gap:4px; padding:2px 0; white-space:nowrap;
  font-size:max(12.5px, calc(12px * var(--fs-scale, 1))); color:var(--muted); }
.matrix .cell{
  display:grid; place-items:center; aspect-ratio:1/1; border-radius:6px; color:var(--text);
  font-family:var(--mono); font-size:max(12.5px, calc(12px * var(--fs-scale, 1))); font-variant-numeric:tabular-nums;
  border:1px solid transparent;
}
.matrix .cell.self{ color:var(--muted); font-weight:700; background:var(--surface-3); }

/* ---------- 二十四节气 ---------- */
.next-term{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:baseline; gap:3px 12px;
  padding:13px 16px; border-radius:13px; border:1px solid var(--border-strong);
  background:linear-gradient(120deg, var(--accent-soft), transparent 64%), var(--surface-2);
}
.next-term .lbl{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted); }
.next-term .nm{ font-size:max(18px, calc(25px * var(--fs-scale, 1))); font-weight:700; letter-spacing:-.5px; color:var(--accent); }
.next-term .when{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); }
.next-term .cd{ justify-self:end; font-family:var(--mono); font-size:max(13px, calc(19px * var(--fs-scale, 1)));
  font-variant-numeric:tabular-nums; letter-spacing:-.3px; }

.season-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.season-legend span{ display:inline-flex; align-items:center; gap:5px; }
.season-legend i{ width:8px; height:8px; border-radius:50%; background:var(--sc); }

.term-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.term-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 11px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface-2);
  box-shadow:inset 3px 0 0 color-mix(in srgb, var(--sc) 70%, transparent);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.term-tile:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.term-tile .nm{ font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; white-space:nowrap; }
.term-tile .dt{ font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.term-tile .hh{ font-family:var(--mono); font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); color:var(--muted); opacity:.85; font-variant-numeric:tabular-nums; }
.term-tile.on{ border-color:color-mix(in srgb, var(--sc) 55%, var(--border)); background:color-mix(in srgb, var(--sc) 12%, var(--surface-2)); }
.term-tile.on .nm{ color:var(--sc); }
.term-tile.today .dt{ color:var(--good); }

.term-hero{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; padding:14px 16px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--sc) 28%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 62%), var(--surface-2);
}
.term-blocks{ display:flex; flex-direction:column; padding:2px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.term-blocks .blk{ display:grid; grid-template-columns:80px 1fr; gap:12px; padding:9px 0; border-top:1px dashed var(--border); }
.term-blocks .blk:first-child{ border-top:0; }
.term-blocks .k{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted); font-weight:600; }
.term-blocks .v{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); line-height:1.7; color:var(--text-2, var(--muted)); }
.hou-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hou{ padding:10px 12px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); }
.hou span{ display:block; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.hou b{ display:block; margin-top:2px; font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; }

@media (max-width: 860px){
  .pd-cols{ grid-template-columns:1fr; }
  .score-row{ grid-template-columns:88px 1fr 36px; }
  .next-term{ grid-template-columns:1fr auto; gap:2px 10px; }
  .next-term .lbl{ grid-column:1 / -1; }
  .next-term .nm{ grid-column:1; grid-row:2; }
  .next-term .cd{ grid-column:2; grid-row:2; }
  .next-term .when{ grid-column:1 / -1; grid-row:3; }
  .term-blocks{ padding:2px 12px; }
  .term-blocks .blk{ grid-template-columns:1fr; gap:2px; padding:10px 0; }
  .hou-row{ grid-template-columns:1fr; }
  .sign-grid{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
  .matrix{ min-width:560px; }
}

/* ============================ 中国旅游：名山 / 景区 ============================ */
html[data-theme="dark"]{
  --t-5yue:#fb7185; --t-fo:#fbbf24; --t-dao:#c084fc;
  --t-snow:#60a5fa; --t-danxia:#f59e0b; --t-ming:#4ade80;
  --t-5a:#fbbf24; --t-4a:#38bdf8;
}
html[data-theme="light"]{
  --t-5yue:#c33257; --t-fo:#96660a; --t-dao:#7043c6;
  --t-snow:#2a5bd7; --t-danxia:#b05a0a; --t-ming:#0c8a5e;
  --t-5a:#96660a; --t-4a:#1a6fa8;
}

/* ---------- 通用卡片网格 ---------- */
.mt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; }
.mt-card, .sc-card{
  display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left;
  padding:10px 12px 11px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); position:relative; overflow:hidden;
  box-shadow:inset 3px 0 0 color-mix(in srgb, var(--tc) 62%, transparent);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.mt-card:hover, .sc-card:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.mt-card.on, .sc-card.on{
  border-color:color-mix(in srgb, var(--tc) 52%, var(--border));
  background:color-mix(in srgb, var(--tc) 11%, var(--surface-2));
}
.mt-card .nm, .sc-card .nm{
  font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-card.on .nm, .sc-card.on .nm{ color:var(--tc); }
.mt-card .lo, .sc-card .lo{
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mt-card .brow{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.tag-mini{
  font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); padding:0 7px; border-radius:99px;
  color:var(--tc); border:1px solid color-mix(in srgb, var(--tc) 38%, transparent);
  background:color-mix(in srgb, var(--tc) 10%, transparent); white-space:nowrap;
}
.mt-card .alt{
  margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); color:var(--muted);
}
.sc-top{ display:flex; align-items:center; gap:6px; min-width:0; }
.sc-top .nm{ flex:1 1 auto; min-width:0; }
.lv-badge{
  flex:0 0 auto; font-family:var(--mono); font-weight:700; letter-spacing:-.2px;
  font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); line-height:1.5;
  padding:0 5px; border-radius:5px; color:var(--lv);
  border:1px solid color-mix(in srgb, var(--lv) 42%, transparent);
  background:color-mix(in srgb, var(--lv) 13%, transparent);
}
.sc-card .ds{
  margin-top:3px; font-size:max(12.5px, calc(12px * var(--fs-scale, 1))); color:var(--muted);
  line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- 等级 / 省份筛选 ---------- */
.sc-filters{ display:flex; flex-direction:column; gap:9px; }
.sc-filter{ display:flex; align-items:flex-start; gap:10px; }
.sc-filter-k{
  flex:0 0 auto; padding-top:5px; letter-spacing:0; font-weight:600;
  font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); color:var(--muted);
}
.sc-prov-grid{ display:flex; flex-wrap:wrap; gap:7px; flex:1 1 320px; min-width:0; }
.sc-prov{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  flex:0 0 auto; min-width:114px;
  padding:7px 11px 8px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2);
  transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.sc-prov:hover{ transform:translateY(-1px); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.sc-prov b{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; white-space:nowrap; }
.sc-prov .cnt{
  font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); color:var(--muted);
}
.sc-prov.on{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, var(--surface-2));
}
.sc-prov.on b, .sc-prov.on .cnt{ color:var(--accent); }
.sc-prov.on .cnt{ opacity:.78; }
.back-chip{
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  border-radius:99px; padding:3px 11px; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); cursor:pointer;
}
.back-chip:hover{ color:var(--text); border-color:var(--border-strong); }
.sc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
/* 两行式分段按钮：名称在上，数量在下 */
.segmented button .seg2{ display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.25; }
.seg2 b{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); font-weight:600; letter-spacing:0; }
.seg2 .n{
  font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.2px;
  font-size:max(12.5px, calc(11.5px * var(--fs-scale, 1))); color:var(--muted);
}
.segmented button.seg2-btn{ padding:4px 12px 5px; min-width:60px; }
.segmented button.on .seg2 b{ color:var(--accent); }
.segmented button.on .seg2 .n{ color:var(--accent); opacity:.8; }
.segmented button.seg2-btn.on{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent), 0 1px 4px rgba(0,0,0,.16);
}

.sc-detail{ scroll-margin-top:78px; }
.sc-group-t{
  display:flex; align-items:baseline; gap:8px; margin-top:4px; padding-bottom:6px;
  border-bottom:1px dashed var(--border);
}
.sc-group-t b{ font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:600; letter-spacing:-.2px; }
.sc-group-t span{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:max(12.5px, calc(12px * var(--fs-scale, 1))); color:var(--muted);
}

/* ---------- 详情 hero ---------- */
.mt-hero{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:14px 17px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--tc) 26%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--tc) 12%, transparent), transparent 62%), var(--surface-2);
}

@media (max-width: 860px){
  .mt-grid{ grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); }
  .sc-grid{ grid-template-columns:1fr; }
  .sc-filter{ flex-direction:column; gap:6px; }
  .sc-filter-k{ padding-top:0; }
  .sc-prov-grid{ width:100%; flex:1 1 100%; }
  .sc-prov{ min-width:104px; padding:7px 10px 8px; }
  /* 手机上「全部」独占一行、横排，其余省份按列铺开更紧凑 */
  .sc-prov:first-child{ flex:1 1 100%; flex-direction:row; align-items:baseline; gap:9px; }
  .mt-hero{ gap:10px; }
}

/* ============================ 心理测评：MBTI / 九型 ============================ */
/* 维度条：少数侧用主色的淡调，比纯灰更容易看出比例 */
html[data-theme="dark"]{ --psy-dim:#5b6788; }
html[data-theme="light"]{ --psy-dim:#aebbd2; }
/* 图鉴分组色：NT / NF / SJ / SP，以及九型三中心 */
html[data-theme="dark"]{
  --psy-g-nt:#8ea2ff; --psy-g-nf:#f7a8d8; --psy-g-sj:#4ade80; --psy-g-sp:#fbbf24;
  --psy-g-inst:#fbbf24; --psy-g-feel:#f7a8d8; --psy-g-think:#7dd3fc;
}
html[data-theme="light"]{
  --psy-g-nt:#3f4dc4; --psy-g-nf:#ad1a63; --psy-g-sj:#0d7346; --psy-g-sp:#8f5c00;
  --psy-g-inst:#8f5c00; --psy-g-feel:#ad1a63; --psy-g-think:#0b6389;
}

/* ---------- 介绍卡 ---------- */
.psy-hero{
  display:flex; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:16px;
  border:1px solid var(--border); background:var(--surface);
  background-image:linear-gradient(132deg, color-mix(in srgb, var(--c-psych) 10%, transparent), transparent 58%);
  box-shadow:var(--card-shadow, none);
}
.psy-kicker{
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.psy-title{
  margin-top:6px; font-size:max(18px, calc(24px * var(--fs-scale, 1)));
  font-weight:700; letter-spacing:-.5px; line-height:1.28;
}
.psy-lead{
  margin-top:9px; color:var(--text-2, var(--muted)); max-width:46em;
  font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.75;
}
.psy-facts{ display:flex; gap:20px; margin-top:16px; flex-wrap:wrap; }
.psy-fact{ display:flex; flex-direction:column; }
.psy-fact b{
  font-size:max(12.5px, calc(19px * var(--fs-scale, 1))); font-weight:700;
  letter-spacing:-.4px; font-variant-numeric:tabular-nums;
}
.psy-fact span{ font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.psy-side{
  flex:0 1 268px; min-width:0; display:flex; flex-direction:column; gap:9px;
  padding:13px 15px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
}
.psy-dimline{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--text-2, var(--muted));
}
.psy-dimline b{ font-family:var(--mono); font-weight:700; color:var(--dc); }
.psy-dimline i{ color:var(--faint); font-style:normal; }

/* ---------- 答题卡 ---------- */
.psy-card{
  padding:18px 20px 20px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--card-shadow, none);
}
.psy-progress{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.psy-progress i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .25s var(--ease);
}
.psy-qhead{
  margin-top:9px; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1)));
  color:var(--text-2, var(--muted)); font-variant-numeric:tabular-nums;
}
.psy-q{
  margin:16px 0 12px; font-size:max(15px, calc(19px * var(--fs-scale, 1)));
  font-weight:650; letter-spacing:-.2px; line-height:1.45;
}
.psy-opts{ display:flex; flex-direction:column; gap:9px; }
.psy-opt{
  display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left;
  padding:14px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); line-height:1.6;
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.psy-opt:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.psy-opt .k{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--mono); font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); font-weight:700;
  color:var(--muted); border:1px solid var(--border-strong);
}
.psy-opt.on{
  border-color:color-mix(in srgb, var(--accent) 60%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.psy-opt.on .k{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }

/* ---------- 结果 ---------- */
.psy-result-head{
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  padding:20px 22px; border-radius:16px; border:1px solid var(--border);
  background:var(--surface);
  background-image:linear-gradient(132deg, color-mix(in srgb, var(--c-psych) 12%, transparent), transparent 60%);
  box-shadow:var(--card-shadow, none);
}
.psy-code{
  font-family:var(--mono); font-weight:800; letter-spacing:1px; line-height:1.05;
  font-size:max(30px, calc(46px * var(--fs-scale, 1))); color:var(--accent);
}
.psy-tname{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:7px; }
.psy-tname b{ font-size:max(15px, calc(19px * var(--fs-scale, 1))); font-weight:700; letter-spacing:-.3px; }
.psy-tname span{
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--faint);
  letter-spacing:.6px; text-transform:uppercase;
}
.psy-tname em{
  font-style:normal; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1)));
  color:var(--muted); padding-left:10px; border-left:1px solid var(--border-strong);
}
.psy-actions{ display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }

.psy-dims{ display:grid; gap:14px; }
.psy-dim{ display:flex; flex-direction:column; gap:6px; }
.psy-dim-t{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.psy-dim-t span{
  font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.psy-dim-t span.on{ color:var(--text); font-weight:650; }
.psy-bar{ display:flex; height:9px; border-radius:99px; overflow:hidden; background:var(--surface-3); }
.psy-bar i{ display:block; height:100%; background:var(--dc, var(--psy-dim)); transition:width .3s var(--ease); }

.psy-desc{
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); line-height:1.85;
  color:var(--text-2, var(--muted));
}
.psy-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.psy-box{ padding:13px 15px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); }
.psy-box h4{
  display:flex; align-items:center; gap:6px; margin:0 0 7px;
  font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); font-weight:650; color:var(--text-2, var(--muted));
}
.psy-box h4 [data-ic]{ width:15px; height:15px; }
.psy-box.good h4 [data-ic]{ color:var(--good); }
.psy-box.warn h4 [data-ic]{ color:var(--warn); }
.psy-box ul{ margin:0; padding-left:16px; }
.psy-box li{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); line-height:1.75; color:var(--text-2, var(--muted)); }
.psy-box.good li::marker{ color:var(--good); }
.psy-box.warn li::marker{ color:var(--warn); }
.psy-box p{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); line-height:1.75; color:var(--text-2, var(--muted)); }

.psy-sec{ display:flex; flex-direction:column; gap:9px; }
.psy-sec-h{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); font-weight:650; color:var(--text-2, var(--muted)); }
.psy-tags{ display:flex; gap:7px; flex-wrap:wrap; }
.psy-tag{
  font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); padding:4px 11px; border-radius:99px;
  color:var(--sc, var(--accent)); border:1px solid color-mix(in srgb, var(--sc, var(--accent)) 34%, transparent);
  background:color-mix(in srgb, var(--sc, var(--accent)) 10%, transparent);
  font-style:normal;
}
.psy-text{ font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.8; color:var(--text-2, var(--muted)); }
.psy-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; }
.psy-list li{ font-size:max(12.5px, calc(14px * var(--fs-scale, 1))); line-height:1.7; color:var(--text-2, var(--muted)); }

/* ---------- 九型 ---------- */
.enne-num{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--mono); font-weight:800; font-size:max(20px, calc(26px * var(--fs-scale, 1)));
  color:var(--c-psych); border:1px solid color-mix(in srgb, var(--c-psych) 40%, transparent);
  background:color-mix(in srgb, var(--c-psych) 12%, transparent);
}
.enne-num.sm{ width:34px; height:34px; border-radius:10px; font-size:max(14px, calc(17px * var(--fs-scale, 1))); }

.psy-scale-head{ padding:13px 16px; }
.enne-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.enne-legend span{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted);
}
.enne-legend b{ font-family:var(--mono); color:var(--text-2, var(--muted)); font-weight:700; }

.enne-q{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--card-shadow, none);
}
.enne-t{
  flex:1 1 260px; min-width:0; display:flex; gap:8px; align-items:baseline;
  font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); line-height:1.6;
}
.enne-t em{
  font-style:normal; font-family:var(--mono); color:var(--faint);
  font-size:max(12.5px, calc(12px * var(--fs-scale, 1))); flex:0 0 auto;
}
.enne-scale{ display:flex; gap:6px; flex:0 0 auto; }
.enne-dot{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--muted);
  font-family:var(--mono); font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); font-weight:600;
  transition:all .14s var(--ease);
}
.enne-dot:hover{ border-color:var(--c-psych); color:var(--text); }
.enne-dot.fill{ color:var(--text); border-color:color-mix(in srgb, var(--c-psych) 30%, var(--border)); }
/* 深色下主色是浅粉，实心底配白字读不清；用浅底 + 彩色字 */
.enne-dot.on{
  color:var(--c-psych); font-weight:700;
  background:color-mix(in srgb, var(--c-psych) 20%, transparent);
  border-color:color-mix(in srgb, var(--c-psych) 58%, transparent);
}
/* 浅色下主色是深品红，实心底白字对比足够 */
html[data-theme="light"] .enne-dot.on{
  color:#fff; background:var(--c-psych); border-color:transparent;
}

.enne-foot{ position:sticky; bottom:10px; z-index:5; }
.enne-foot-in{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:11px 14px; border-radius:13px; border:1px solid var(--border-strong);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(12px); box-shadow:var(--shadow-pop);
}
.enne-foot-in > span{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); }

.enne-rows{ display:flex; flex-direction:column; gap:3px; }
.enne-row{
  display:grid; grid-template-columns:26px 96px 1fr 46px; gap:10px; align-items:center;
  padding:7px 9px; border-radius:9px; text-align:left; color:var(--text);
  transition:background .14s var(--ease);
}
.enne-row:hover{ background:var(--surface-2); }
.enne-row.on{ background:color-mix(in srgb, var(--c-psych) 12%, transparent); }
.enne-row .n{
  font-family:var(--mono); font-weight:700; color:var(--c-psych);
  font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1)));
}
.enne-row .nm{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); white-space:nowrap; }
.enne-row .bar{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.enne-row .bar i{ display:block; height:100%; border-radius:99px; background:color-mix(in srgb, var(--c-psych) 55%, var(--surface-3)); }
.enne-row.on .bar i{ background:var(--c-psych); }
.enne-row .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--muted);
  font-size:max(12.5px, calc(13px * var(--fs-scale, 1)));
}
.enne-row.on .v{ color:var(--text); }

.psy-detail{
  padding:16px 18px 18px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--card-shadow, none);
}
.psy-detail-h{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:12px; }
.psy-detail-h b{ font-size:max(12.5px, calc(16px * var(--fs-scale, 1))); font-weight:700; letter-spacing:-.2px; }
.psy-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.psy-kv{ padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); min-width:0; }
.psy-kv span{
  display:block; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1)));
  color:var(--muted); margin-bottom:3px;
}
.psy-kv p{
  margin:0; font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1)));
  line-height:1.65; color:var(--text-2, var(--muted));
}

/* ---------- 人格图鉴：选类型看解读 ---------- */
.psy-bhead{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  padding:18px 20px; border-radius:16px; border:1px solid var(--border); background:var(--surface);
  background-image:linear-gradient(132deg, color-mix(in srgb, var(--c-psych) 10%, transparent), transparent 58%);
  box-shadow:var(--card-shadow, none);
}
.psy-ghead{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.psy-ghead b{ font-size:max(12.5px, calc(13.5px * var(--fs-scale, 1))); font-weight:700; }
.psy-ghead span{ font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.psy-ghead .psy-gdot{ align-self:center; margin-left:6px; }
.psy-ghead .psy-gdot:first-child{ margin-left:0; }
.psy-gdot{ width:8px; height:8px; border-radius:99px; background:var(--gc, var(--c-psych)); flex:0 0 auto; }
/* 三中心图例：每项内部不折行，整体按项换行 */
.psy-glegend{ display:flex; gap:8px 16px; flex-wrap:wrap; }
.psy-glegend-i{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted);
}
.psy-glegend-i b{ font-size:max(12.5px, calc(13px * var(--fs-scale, 1))); font-weight:700; color:var(--text-2, var(--muted)); }

.psy-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; }
.psy-grid.enne{ grid-template-columns:repeat(3, 1fr); }
.psy-gcard{
  position:relative; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  min-width:0; padding:12px 13px 13px 16px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); text-align:left;
  box-shadow:var(--card-shadow, none);
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.psy-gcard::before{
  content:''; position:absolute; left:0; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:var(--gc, var(--c-psych)); opacity:.9;
}
.psy-gcard:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--gc, var(--c-psych)) 48%, var(--border)); }
.psy-gcard:focus-visible{ outline:2px solid var(--gc, var(--c-psych)); outline-offset:2px; }
.psy-gcard.on{ border-color:var(--gc, var(--c-psych)); background:color-mix(in srgb, var(--gc, var(--c-psych)) 9%, var(--surface)); }
.psy-gcard .gc-code{
  font-family:var(--mono); font-weight:800; letter-spacing:.6px;
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); color:var(--gc, var(--c-psych));
}
.psy-gcard .gc-nm{ font-size:max(12.5px, calc(14.5px * var(--fs-scale, 1))); font-weight:650; line-height:1.35; }
.psy-gcard .gc-tag{
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.psy-gcard.enne{ flex-direction:row; align-items:center; gap:10px; padding:11px 13px 11px 14px; }
.psy-gcard .gc-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-family:var(--mono); font-weight:800; font-size:max(14px, calc(17px * var(--fs-scale, 1)));
  color:var(--gc, var(--c-psych)); border:1px solid color-mix(in srgb, var(--gc, var(--c-psych)) 40%, transparent);
  background:color-mix(in srgb, var(--gc, var(--c-psych)) 12%, transparent);
}
.psy-gcard .gc-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.psy-gcard .gc-body .gc-tag{ -webkit-line-clamp:1; }

/* 单类型解读 */
.psy-tcard{ position:relative; }
/* 图鉴里的型号大号数字跟随所属中心的颜色 */
.psy-detail .enne-num{
  color:var(--gc, var(--c-psych));
  border-color:color-mix(in srgb, var(--gc, var(--c-psych)) 42%, transparent);
  background:color-mix(in srgb, var(--gc, var(--c-psych)) 12%, transparent);
}
.psy-tcode{
  flex:0 0 auto; padding:5px 10px; border-radius:9px;
  font-family:var(--mono); font-weight:800; letter-spacing:.8px; line-height:1.3;
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); color:var(--gc, var(--c-psych));
  border:1px solid color-mix(in srgb, var(--gc, var(--c-psych)) 42%, transparent);
  background:color-mix(in srgb, var(--gc, var(--c-psych)) 12%, transparent);
}
.psy-tcode-en{
  margin-left:7px; font-size:max(12.5px, calc(12px * var(--fs-scale, 1)));
  letter-spacing:.5px; text-transform:uppercase; color:var(--faint);
}
.psy-detail-h .psy-tag{ margin-left:6px; }
.psy-quote{
  margin:2px 0 14px; padding-left:11px;
  border-left:2px solid color-mix(in srgb, var(--gc, var(--c-psych)) 55%, transparent);
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1))); line-height:1.7; color:var(--text-2, var(--muted));
}
.psy-axes{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.psy-ax{
  min-width:0; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2);
}
.psy-ax-h{ display:flex; align-items:baseline; gap:7px; }
.psy-ax-h b{
  font-family:var(--mono); font-weight:800; color:var(--dc, var(--accent));
  font-size:max(12.5px, calc(15px * var(--fs-scale, 1)));
}
.psy-ax-h span{ font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted); }
.psy-ax p{
  margin:3px 0 0; font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1)));
  line-height:1.62; color:var(--text-2, var(--muted));
}
/* 二级 / 三级界面顶部常驻导航：返回上一级 + 同级切换，滚动时一直可见 */
.psy-nav{
  position:sticky; top:calc(var(--top-h) + 8px); z-index:6;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:7px 9px; border-radius:12px;
  border:1px solid var(--border-strong);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--card-shadow, none);
}
.psy-nav-chips{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  flex:1 1 220px; min-width:0;
}
/* 带切换芯片的导航：返回 + 前后在同一行，芯片另起一行铺满，避免和按钮挤在一块 */
.psy-nav.has-chips{ row-gap:8px; }
.psy-nav.has-chips .psy-nav-chips{ order:3; flex:1 1 100%; }
.psy-nav-step{ display:flex; gap:6px; margin-left:auto; flex:0 0 auto; }
.psy-nav-note{
  font-size:max(12.5px, calc(12.5px * var(--fs-scale, 1))); color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; margin-left:auto;
}

.psy-chip{
  display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap;
  padding:2px 6px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface-2);
  color:var(--text-2, var(--muted)); font-weight:600;
  font-size:max(12.5px, calc(11px * var(--fs-scale, 1)));
  transition:border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.psy-chip b{ font-family:var(--mono); font-weight:700; letter-spacing:.2px; opacity:.8; }
.psy-chip span{ font-weight:500; }
.psy-chip:hover{ border-color:var(--c-psych); color:var(--text); }
.psy-chip.on{
  color:var(--text); border-color:var(--c-psych);
  background:color-mix(in srgb, var(--c-psych) 14%, transparent);
}

@media (max-width: 860px){
  .psy-cols{ grid-template-columns:1fr; }
  .psy-two{ grid-template-columns:1fr; }
  .psy-side{ flex:1 1 100%; }
  .psy-grid{ grid-template-columns:1fr 1fr; }
  .psy-grid.enne{ grid-template-columns:1fr 1fr; }
  .psy-axes{ grid-template-columns:1fr; }
  .psy-bhead{ padding:16px 17px; }
  /* 窄屏：返回 + 前后在同一行，切换芯片独占一行横向滚动 */
  .psy-nav{ top:calc(var(--top-h) + 6px); gap:7px; padding:6px 8px; }
  .psy-nav-chips{
    flex:1 1 100%; order:3; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  .psy-nav-chips::-webkit-scrollbar{ display:none; }
  .psy-nav-chips .psy-chip{ flex:0 0 auto; }
  .psy-nav-step{ margin-left:auto; }
  .enne-legend{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px 8px; }
  .enne-legend b{ min-width:9px; }
  .enne-q{ padding:12px 13px; gap:9px; }
  .enne-t{ flex:1 1 100%; }
  .enne-scale{ width:100%; justify-content:space-between; }
  .enne-dot{ flex:1 1 0; width:auto; height:36px; border-radius:9px; }
  .enne-row{ grid-template-columns:22px 84px 1fr 42px; gap:8px; }
  .enne-foot{ bottom:6px; }
}