/* 海华出海 · 官网玄金 Noir 设计系统（批次 29）
 * 颜色值逐一照搬小程序 lhch/app.wxss 的 --n-* 两套（rpx ÷ 2 = px）。
 * :root 为 noir（深色），body.theme-light 为 light（长文阅读页）。
 * 本文件只在变量定义行出现色值；组件一律 var(--n-*)。 */

@font-face{font-family:"Outfit";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/outfit-600.ttf") format("truetype")}
@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/outfit-700.ttf") format("truetype")}

:root,.theme-noir{
  --n-bg: #0C0D0F; --n-surface: #16181C; --n-surface-2: #1E2126; --n-line: #23262C;
  --n-text: #EDEAE3; --n-text-2: #9A9BA1; --n-text-3: #6E7076;
  --n-gold: #D6B676; --n-gold-grad: linear-gradient(135deg, #E3C78E, #B8954F); --n-on-gold: #0C0D0F;
  --n-danger: #F08A6E; --n-success: #7FC8A9;
  --n-glow: 0 10px 24px -8px rgba(214, 182, 118, 0.55);
  --n-hero-glow: #3A3020; --n-hero-line: #2E2A20; --n-gold-pale: #F3E7C9;
  --n-on-danger: #0C0D0F;
  --n-warning: #E8B04B; --n-info: #9DB0C4;
  --n-medal-1: #D6B676; --n-medal-2: #C4C8CE; --n-medal-3: #C08A5B;
  --n-scrim: rgba(0, 0, 0, 0.6);
}
.theme-light{
  --n-bg: #F7F5F0; --n-surface: #FFFFFF; --n-surface-2: #F1EEE7; --n-line: #E6E1D6;
  --n-text: #1A1814; --n-text-2: #6B665C; --n-text-3: #9A948A;
  --n-gold: #8A6A2E; --n-gold-grad: linear-gradient(135deg, #E3C78E, #B8954F); --n-on-gold: #0C0D0F;
  --n-danger: #C2412A; --n-success: #2F7D5B;
  --n-glow: 0 6px 16px -8px rgba(138, 106, 46, 0.35);
  --n-hero-glow: #EFE4CC; --n-hero-line: #E2D6BC; --n-gold-pale: #6F5422;
  --n-on-danger: #FFFFFF;
  --n-warning: #8F6210; --n-info: #4F5D6E;
  --n-medal-1: #8A6A2E; --n-medal-2: #6E747C; --n-medal-3: #9A5B33;
  --n-scrim: rgba(12, 13, 15, 0.45);
}

/* 字号 / 圆角 / 字体 token（不随主题变化） */
:root{
  --n-fs-hero:36px; --n-fs-xl:20px; --n-fs-lg:17px; --n-fs-md:15px; --n-fs-base:14px; --n-fs-sm:12px; --n-fs-xs:11px;
  --n-r-card:16px; --n-r-btn:10px; --n-r-tag:6px;
  --n-font:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --n-font-num:"Outfit",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* ---- 基础 ---- */
body{background:var(--n-bg);color:var(--n-text);font-family:var(--n-font);font-size:var(--n-fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
.num{font-family:var(--n-font-num);font-weight:600;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--n-gold);outline-offset:2px;border-radius:4px}

/* ---- 统一头部（src/utils/html.js 的 NAV 为唯一来源；类名独立，避免与页面遗留内联规则冲突） ---- */
header.nav.site-nav{background:var(--n-bg);border-bottom:1px solid var(--n-line);position:sticky;top:0;z-index:50}
.site-nav .sn-in{max-width:1040px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;gap:24px}
.site-nav .sn-logo{display:flex;align-items:center;flex:none;min-height:44px}
.site-nav .sn-logo img{height:32px;width:auto;display:block}
.site-nav .sn-logo .lk-light{display:none}
.theme-light .site-nav .sn-logo .lk-dark{display:none}
.theme-light .site-nav .sn-logo .lk-light{display:block}
.site-nav .sn-links{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.site-nav .sn-links::-webkit-scrollbar{display:none}
.site-nav .sn-links a{flex:none;padding:10px 12px;border-radius:var(--n-r-btn);color:var(--n-text-2);font-size:var(--n-fs-md);font-weight:600;white-space:nowrap}
.site-nav .sn-links a:hover{color:var(--n-gold);background:var(--n-surface)}
.site-nav .sn-r{display:flex;align-items:center;gap:8px;flex:none}
.site-nav .sn-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--n-text-2);border-radius:var(--n-r-btn)}
.site-nav .sn-search:hover{color:var(--n-gold)}
.site-nav .sn-search svg{width:20px;height:20px}
.site-nav .sn-auth{display:inline-flex;align-items:center;gap:8px}
@media(max-width:720px){
  .site-nav .sn-in{gap:8px;padding:0 12px;flex-wrap:wrap;height:auto;padding-top:8px}
  .site-nav .sn-r{margin-left:auto}
  .site-nav .sn-links{order:3;flex:0 0 100%;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,black 85%,transparent);mask-image:linear-gradient(90deg,black 85%,transparent)}
  .site-nav .sn-logo img{height:28px}
  .site-nav .sn-auth a.btn--ghost[href="/login.html"]{display:none}
}

/* ---- 统一页脚 ---- */
body footer.site-foot{border-top:1px solid var(--n-line);margin-top:40px;padding:32px 20px;color:var(--n-text-3);font-size:var(--n-fs-sm);text-align:center;background:transparent}
.site-foot .sf-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 20px;margin-bottom:12px}
.site-foot .sf-links a{color:var(--n-text-2);padding:6px 0}
.site-foot .sf-links a:hover{color:var(--n-gold)}
.site-foot .sf-copy{color:var(--n-text-3)}

/* ---- 卡片 ---- */
.card{background:var(--n-surface);border:1px solid var(--n-line);border-radius:var(--n-r-card);padding:20px}
.card--hero{background:var(--n-surface);border:1px solid var(--n-hero-line);box-shadow:var(--n-glow)}

/* ---- 按钮（最小高度 44px 满足移动端热区；旧类名 .btn.blue/.btn.gold 兼容映射为金色主按钮） ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--n-r-btn);font-size:var(--n-fs-md);font-weight:700;cursor:pointer;border:1px solid transparent;font-family:inherit;line-height:1.2}
.btn--gold,.btn.blue,.btn.gold{background:var(--n-gold-grad);color:var(--n-on-gold);box-shadow:var(--n-glow)}
.btn--gold:hover,.btn.blue:hover,.btn.gold:hover{filter:brightness(1.06)}
.btn--ghost,.btn.ghost{background:transparent;color:var(--n-gold);border-color:var(--n-line)}
.btn--ghost:hover,.btn.ghost:hover{border-color:var(--n-gold)}
.btn.sm{min-height:36px;padding:0 14px;font-size:var(--n-fs-base)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ---- 标签 / 徽标 ---- */
.tag{display:inline-block;font-size:var(--n-fs-xs);font-weight:700;line-height:1.5;padding:2px 8px;border-radius:var(--n-r-tag);background:var(--n-surface-2);color:var(--n-gold)}
.tag--ok{color:var(--n-success)}.tag--warn{color:var(--n-warning)}.tag--danger{color:var(--n-danger)}.tag--info{color:var(--n-info)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--n-danger);color:var(--n-on-danger);font-size:var(--n-fs-xs);font-weight:700;line-height:1}

/* ---- 分段选择（tab / 筛选 chip） ---- */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-item{min-height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:var(--n-r-btn);background:var(--n-surface);border:1px solid var(--n-line);color:var(--n-text-2);font-size:var(--n-fs-base);font-weight:600;cursor:pointer}
.seg-item:hover{color:var(--n-gold)}
.seg-item.on{background:var(--n-gold-grad);color:var(--n-on-gold);border-color:transparent}

/* ---- 输入 ---- */
.input{width:100%;min-height:44px;padding:0 14px;border-radius:var(--n-r-btn);background:var(--n-surface);border:1px solid var(--n-line);color:var(--n-text);font-family:inherit;font-size:var(--n-fs-md)}
textarea.input{padding:10px 14px;min-height:96px;line-height:1.6}
.input::placeholder{color:var(--n-text-3)}
.input:focus{outline:none;border-color:var(--n-gold)}

/* ---- 列表行 ---- */
.row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--n-line);color:var(--n-text)}
.row:last-child{border-bottom:0}
a.row:hover{color:var(--n-gold)}
.row .row-sub{color:var(--n-text-2);font-size:var(--n-fs-sm)}

/* ---- 封面色系 tone-a~e：金 / 墨 / 状态色 ---- */
.tone-a{background:var(--n-gold-grad);color:var(--n-on-gold)}
.tone-b{background:linear-gradient(135deg,var(--n-surface-2),var(--n-line));color:var(--n-gold)}
.tone-c{background:linear-gradient(135deg,var(--n-hero-glow),var(--n-surface-2));color:var(--n-gold)}
.tone-d{background:linear-gradient(135deg,var(--n-surface),var(--n-hero-line));color:var(--n-gold-pale)}
.tone-e{background:var(--n-surface-2);color:var(--n-text);box-shadow:inset 0 0 0 1px var(--n-hero-line)}

/* ---- 骨架 / 空态 ---- */
.sk{border-radius:12px;background:linear-gradient(90deg,var(--n-surface) 25%,var(--n-surface-2) 37%,var(--n-surface) 63%);background-size:400% 100%;animation:n-sk 1.3s infinite}
@keyframes n-sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.empty{text-align:center;color:var(--n-text-3);padding:60px 0}