/* =========================================================================
   皮肤覆盖 · Vistascape — 暗青绿 + 暖金黄（登录/定价暗色门面，工具区浅色）
   加载于 style.css 之后，仅覆盖变量与关键组件，不重写布局
   2026-09-02 按《Vistascape-设计规范》§4 令牌全量校准：
   brand-900 #0B1414 / brand-800 #0F2929 / brand-700 #143D3D / gold-400 #C9A25D /
   neutral-50 #F8FAFA / neutral-200 #DDE3E3；圆角 md=10px lg=16px；
   暗色卡片不用阴影靠边框（§5.3）；工具页主操作=深绿、金黄仅点缀（§8 最佳实践2）
   2026-09-02（第二轮）浅色工具模式修正：前台 --f-* 浅色值上移至 :root
   （规范 §4.5 工具页=浅色模式为默认形态），暗青门面色整体移入 [data-theme="dark"]；
   前台浅色 = neutral-50 底 / 白卡 / 深绿主操作 / 金仅点缀；
   清除旧调色板残留（金→青 #22D3EE、金→靛 #4F46E5 混合渐变与靛蓝光晕）。
   ========================================================================= */

:root{
  /* ---- Vistascape 设计令牌（规范 §4；页面颜色一律走变量，禁硬编码 HEX）---- */
  --vs-brand-950:#051414; --vs-brand-900:#0B1414; --vs-brand-800:#0F2929;
  --vs-brand-700:#143D3D; --vs-brand-600:#1D4545; --vs-brand-500:#2A5A5A;
  --vs-brand-400:#3F7575; --vs-brand-300:#5E9292; --vs-brand-200:#8FB5B5;
  --vs-brand-100:#C2D8D8; --vs-brand-50:#E8F2F2;
  --vs-gold-600:#8A6329; --vs-gold-500:#A87D38; --vs-gold-400:#C9A25D;
  --vs-gold-300:#D9BC86; --vs-gold-200:#EAD3A8; --vs-gold-100:#F5EAD0; --vs-gold-50:#FBF7ED;
  --vs-neutral-950:#0B0F0F; --vs-neutral-900:#141A1A; --vs-neutral-700:#2F3737;
  --vs-neutral-500:#6B7373; --vs-neutral-400:#8F9696; --vs-neutral-300:#B8BFBF;
  --vs-neutral-200:#DDE3E3; --vs-neutral-100:#F0F3F3; --vs-neutral-50:#F8FAFA;
  --vs-radius-md:10px; --vs-radius-lg:16px;
  --vs-shadow-sm:0 1px 2px rgba(5,20,20,.06);
  --vs-shadow-md:0 4px 12px rgba(5,20,20,.08);
  --vs-shadow-gold:0 4px 20px rgba(201,162,93,.25);
  --vs-font-display:"Plus Jakarta Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --vs-font-sans:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --vs-font-mono:"JetBrains Mono","Noto Sans Mono","SF Mono",Consolas,monospace;

  /* ---- 前台品牌 → 暗青绿 + 暖金黄（主操作=深绿，金黄仅点缀）---- */
  --f-brand:var(--vs-brand-700);
  --f-brand-2:var(--vs-gold-600);
  --f-brand-grad:linear-gradient(135deg,var(--vs-brand-700),var(--vs-brand-600));
  --f-glow:rgba(201,162,93,.22);

  /* ---- 工具区浅色（规范 §4.5：工具页浅色模式默认形态）----
     底=neutral-50 / 白卡 / 中性线；语义色沿用基础系统浅色值（warn/danger/ok 不在此覆盖） */
  --f-bg:var(--vs-neutral-50);
  --f-card:#FFFFFF;
  --f-text:var(--vs-neutral-900);
  --f-text-sub:var(--vs-neutral-700);
  --f-line:var(--vs-neutral-200);
  --f-soft:var(--vs-neutral-100);
  --f-surface-2:#FFFFFF;
  --f-nav-bg:rgba(255,255,255,.85);

  /* ---- 后台 → 暗青绿侧栏 + 金 accent（浅色工具模式，深色专业侧栏）---- */
  --a-side:var(--vs-brand-900);
  --a-side-2:var(--vs-brand-800);
  --a-accent:var(--vs-gold-400);
  --a-accent-2:var(--vs-gold-600);
  --a-bg:var(--vs-neutral-50);
  --a-card:#FFFFFF;
  --a-text:var(--vs-neutral-900);
  --a-text-sub:var(--vs-neutral-700);
  --a-line:var(--vs-neutral-200);
  --a-soft:var(--vs-neutral-100);
  --a-surface-2:#FFFFFF;
}

/* 深色模式：暗青门面（与登录门面同源色相）+ 管理端夜色 */
:root[data-theme="dark"]{
  --f-brand:#7FB3B0;
  --f-brand-2:var(--vs-gold-400);
  --f-brand-grad:linear-gradient(135deg,#1D4545,#0F2929);
  --f-bg:var(--vs-brand-950);
  --f-card:var(--vs-brand-800);
  --f-text:#FFFFFF;
  --f-text-sub:var(--vs-neutral-300);
  --f-line:var(--vs-brand-600);
  --f-soft:#113331;
  --f-warn:#E8B34B;
  --f-danger:#E2606A;
  --f-ok:#3FBF8F;
  --f-surface-2:var(--vs-brand-700);
  --f-nav-bg:rgba(11,20,20,.78);
  --f-glow:rgba(201,162,93,.16);

  --a-bg:#081414;
  --a-card:var(--vs-brand-800);
  --a-text:#DDEAE3;
  --a-text-sub:#8FA69B;
  --a-line:var(--vs-brand-600);
  --a-soft:#113331;
  --a-surface-2:#113331;
  --a-side:var(--vs-brand-950);
  --a-side-2:var(--vs-brand-800);
  --a-top-bg:var(--vs-brand-900);
  --a-accent-2:var(--vs-gold-300);
}

/* ---- 字体（规范 §4.6；容器级作用域——登录页定稿自带 np-serif/np-sans 字体口径，不含这些容器类，不受影响）---- */
.page,.f-nav,.a-main,.a-side{font-family:var(--vs-font-sans);}
.page h1,.page h2,.page h3,.page h4,
.f-nav h1,.f-nav h2,.f-nav h3,.f-nav h4,
.a-main h1,.a-main h2,.a-main h3,.a-main h4,
.modal h3,.layer h3,.card-title{font-family:var(--vs-font-display);}
.num,.mono,.pts-badge{font-family:var(--vs-font-mono);}

/* ---- 焦点环（规范 §5.1：所有可交互元素 2px primary outline + offset 2px；
      键盘导航可见，不改变默认视觉）---- */
:focus-visible{outline:2px solid var(--vs-gold-400);outline-offset:2px;}
body.app-admin :focus-visible{outline-color:var(--vs-brand-700);}

/* ---- 主要按钮：工具区主操作=深绿 brand-700（§8 最佳实践2：金黄仅点缀）；
      深色提亮 brand-600 + 边框保证对比 ---- */
.btn-primary,.f-btn-primary{
  background:var(--vs-brand-700);color:#fff;
  box-shadow:var(--vs-shadow-sm);
  border-radius:var(--vs-radius-md);
  border:1px solid transparent;
}
.btn-primary:hover,.f-btn-primary:hover{background:var(--vs-brand-800);filter:none;}
[data-theme="dark"] .btn-primary,[data-theme="dark"] .f-btn-primary{background:#1D4545;border-color:#2A5A5A;box-shadow:none;}
[data-theme="dark"] .btn-primary:hover,[data-theme="dark"] .f-btn-primary:hover{background:#2A5A5A;}

/* 按钮统一 radius-md 10px */
.btn,.f-btn{border-radius:var(--vs-radius-md);}

/* ---- 次级按钮：透明底 + 1px 品牌边框（规范 §5.1 次级按钮两模式同构）---- */
.btn-soft{background:transparent;color:var(--vs-brand-700);border:1px solid var(--vs-brand-200);}
.btn-soft:hover{background:rgba(20,61,61,.06);}
[data-theme="dark"] .btn-soft{color:var(--vs-brand-100);border-color:var(--vs-brand-600);}
[data-theme="dark"] .btn-soft:hover{background:rgba(94,146,146,.10);}

/* ---- 前台输入聚焦：深绿 primary + 淡青绿焦点环（§5.2；按控件类作用域，
      登录页裸 input 不含 .input/.select/.textarea 类，不受影响）---- */
.app-front .input:focus,.app-front .select:focus,.app-front .textarea:focus{
  border-color:var(--vs-brand-700);box-shadow:0 0 0 3px rgba(20,61,61,.14);
}

/* ---- 卡片：圆角 16px；暗色不用阴影靠边框区分层级，浅色用 shadow-md（§5.3）---- */
.f-card{border-radius:var(--vs-radius-lg);}
body.app-front .f-card{border:1px solid var(--f-line);box-shadow:none;}
body.app-front .f-card:hover{border-color:rgba(201,162,93,.45);}
body.app-admin .f-card{border:1px solid var(--a-line);box-shadow:var(--vs-shadow-md);}
/* 深色管理端：焦点提亮保证对比（链接色统一走上方 :where(a) 规则） */
[data-theme="dark"] body.app-admin :focus-visible{outline-color:var(--vs-gold-400);}

/* ---- 前台页面底：中性纸面 + 金/青点状氛围光（替换旧蓝青光晕）
      （:not(:has(> .hero)) 排除封版登录页——其 body 底色由页内样式全权控制）---- */
body.app-front:not(:has(> .hero)){background:
  radial-gradient(1100px 420px at 85% -120px,rgba(201,162,93,.06),transparent 62%),
  radial-gradient(900px 380px at -80px 30%,rgba(20,61,61,.04),transparent 60%),
  var(--f-bg);
  background-attachment:fixed;}
[data-theme="dark"] body.app-front:not(:has(> .hero)){background:
  radial-gradient(1100px 420px at 85% -120px,rgba(201,162,93,.08),transparent 62%),
  radial-gradient(900px 380px at -80px 30%,rgba(63,191,143,.05),transparent 60%),
  var(--f-bg);
  background-attachment:fixed;}

/* ---- 前台导航：浅色纸玻璃 / 深色暗青玻璃（随 --f-nav-bg/--f-line 翻转）---- */
.f-nav{background:var(--f-nav-bg);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--f-line);}
.f-nav .logo{color:var(--f-text);}
.f-nav .mark{background:linear-gradient(135deg,var(--vs-gold-400),var(--vs-gold-500));}

/* ---- 海报输出物：恒为浅色纸面（双模式不变）——文字恒墨色、标题恒金-600、弱化字恒中灰；
      内联 var(--f-text-sub)/var(--f-brand-2) 经此处自定义属性覆盖后不再随主题翻转 ---- */
.poster{color:var(--vs-neutral-900);--f-text-sub:var(--vs-neutral-500);--f-brand-2:var(--vs-gold-600);}

/* ---- 悬停色相校准（旧系统青绿 rgba → 品牌深青绿）---- */
.app-front .drop:hover{background:rgba(20,61,61,.05);}
.app-front .day-card:hover{border-color:rgba(20,61,61,.35);}

/* ---- 管理端：暗青侧栏 + 金 accent（参考稿工具页深色按键）---- */
.a-side{background:var(--vs-brand-900);}
.a-side a.active,.a-side .nav a.on,.a-side nav a.on{
  background:rgba(201,162,93,.10);color:#fff;
  box-shadow:inset 3px 0 0 var(--vs-gold-400);
}
/* 管理端主操作 .a-btn = 深绿；侧栏 mark / 顶栏头像 = 纯金渐变（清除金→青、金→靛混合） */
body.app-admin .a-btn{background:var(--vs-brand-700);box-shadow:var(--vs-shadow-sm);border-radius:var(--vs-radius-md);}
body.app-admin .a-btn:hover{background:var(--vs-brand-800);filter:none;}
[data-theme="dark"] body.app-admin .a-btn{background:#1D4545;border:1px solid #2A5A5A;box-shadow:none;}
[data-theme="dark"] body.app-admin .a-btn:hover{background:#2A5A5A;}
/* ghost 变体须盖过上面的 .a-btn 主操作底色（行内编辑/停用/删除为静默按钮） */
body.app-admin .a-btn-ghost{background:var(--a-card);color:var(--a-text);border:1px solid var(--a-line);box-shadow:var(--vs-shadow-sm);}
body.app-admin .a-btn-ghost:hover{background:var(--a-soft);border-color:var(--vs-gold-400);color:var(--vs-gold-600);filter:none;transform:none;}
[data-theme="dark"] body.app-admin .a-btn-ghost{background:var(--a-surface-2);color:var(--a-text);border-color:var(--a-line);}
[data-theme="dark"] body.app-admin .a-btn-ghost:hover{background:#1D4545;border-color:var(--vs-gold-400);color:var(--vs-gold-300);}
.a-side .s-brand .mark{background:linear-gradient(135deg,var(--vs-gold-400),var(--vs-gold-500));box-shadow:0 4px 14px rgba(201,162,93,.35),inset 0 1px 0 rgba(255,255,255,.28);}
.a-top .a-user .avatar{background:linear-gradient(135deg,var(--vs-gold-400),var(--vs-gold-500));color:#fff;box-shadow:0 3px 10px rgba(201,162,93,.30);}

/* 筛选 chip 选中 = 深绿主操作（清除靛蓝光晕；金仅点缀） */
body.app-admin .a-chip.on{background:var(--vs-brand-700);border-color:var(--vs-brand-700);color:#fff;box-shadow:var(--vs-shadow-sm);}
[data-theme="dark"] body.app-admin .a-chip.on{background:#1D4545;border-color:#2A5A5A;box-shadow:none;}
/* 管理端输入聚焦 = 深绿 primary + 淡青绿焦点环（§5.2；元素级作用域同时覆盖 .input 与 .a-input；登录页不在 body.app-admin 作用域） */
body.app-admin input:focus,body.app-admin select:focus,body.app-admin textarea:focus{
  border-color:var(--vs-brand-700) !important;box-shadow:0 0 0 3px rgba(20,61,61,.16);
}

/* 链接色（§4.5 --color-link）：走 --link 自定义属性 + :where(a) 恒零特异性规则——
   组件类（.btn-ghost/.a-btn-ghost/.user-dropdown a 等）自带颜色时永不受全局链接色污染；
   浅=brand-600 / 深=brand-300 / 管理端浅=brand-500 深=brand-300 */
:root{--link:var(--vs-brand-600);}
[data-theme="dark"]{--link:var(--vs-brand-300);}
body.app-admin{--link:var(--vs-brand-500);}
[data-theme="dark"] body.app-admin{--link:var(--vs-brand-300);}
:where(a){color:var(--link);}
/* 管理端侧栏链接恒在暗青侧栏上：还原浅色文字（盖过上面的管理端链接色） */
body.app-admin .a-side a{color:#C4CFDE;}
body.app-admin .a-side a:hover{color:#fff;}
.f-brand-text,.a-accent-text{color:var(--vs-gold-400) !important;}

/* ---- 标签字体系（浅色可读、深色提亮）：brand=金调 / blue→青绿家族 / soft=金调 ---- */
.tag-brand{background:var(--vs-gold-100);color:var(--vs-gold-600);border-color:var(--vs-gold-200);}
[data-theme="dark"] .tag-brand{background:rgba(138,99,41,.22);color:var(--vs-gold-300);border-color:rgba(217,188,134,.32);}
.tag-blue{background:rgba(20,61,61,.08);color:var(--vs-brand-700);border-color:rgba(20,61,61,.22);}
[data-theme="dark"] .tag-blue{background:rgba(94,146,146,.15);color:var(--vs-brand-200);border-color:rgba(94,146,146,.35);}
.tag-soft{background:var(--vs-gold-50);color:var(--vs-gold-600);border-color:var(--vs-gold-200);}
[data-theme="dark"] .tag-soft{background:rgba(138,99,41,.18);color:var(--vs-gold-300);border-color:rgba(217,188,134,.30);}

/* 标题字气质：衬线点缀（杂志感 kicker） */
.card-title{letter-spacing:.04em;}
.page-head h1{font-weight:800;letter-spacing:.01em;}

/* 复选/选中态 */
.on::before,.tag.on::before{background:var(--vs-gold-400);}

/* 模态层描边微调 + 圆角对齐 radius-lg */
.modal,.layer{border-color:rgba(200,169,105,.35);border-radius:var(--vs-radius-lg);}