/* ===================================================================
   郑氏家谱 · 视觉系统 v2「深墨鎏金」
   深墨底 · 鎏金线 · 衬线标题 · 手机/PC 自适应
   =================================================================== */

:root{
  /* 底色 */
  --bg:        #0e0c0a;
  --bg-2:      #14110d;
  --surface:   #1b1712;
  --surface-2: #221d16;
  --surface-3: #2a241b;

  /* 线条 */
  --line:   rgba(214,176,106,.14);
  --line-2: rgba(214,176,106,.30);

  /* 主色：鎏金 */
  --gold:     #d6b06a;
  --gold-lit: #f2d79d;
  --gold-dim: #8d7443;
  --gold-soft: rgba(214,176,106,.10);

  /* 兼容旧变量名（页面内联样式仍在用） */
  --red:      #d6b06a;
  --red-soft: rgba(214,176,106,.12);
  --paper:    #0e0c0a;
  --paper-2:  #1b1712;

  /* 辅助色 */
  --cinnabar: #d0705f;   /* 朱砂 */
  --jade:     #7fb08a;   /* 青玉 */
  --azure:    #6fa0c8;   /* 天青 */
  --rose:     #c98098;   /* 女性 */
  --green:    #7fb08a;
  --blue:     #6fa0c8;

  /* 文字 */
  --ink:   #f3ece0;
  --ink-2: #bdb2a0;
  --ink-3: #857a6a;

  --shadow:   0 4px 24px rgba(0,0,0,.45);
  --shadow-2: 0 12px 44px rgba(0,0,0,.6);
  --radius: 14px;

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
           "SimSun", Georgia, serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(214,176,106,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(208,112,95,.055), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 340px, var(--bg) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--gold);text-decoration:none;transition:color .18s}
a:hover{color:var(--gold-lit);text-decoration:none}
::selection{background:rgba(214,176,106,.28);color:#fff}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#332b20;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#4a3f2d}

/* ============ 顶部导航 ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,12,10,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,176,106,.55),transparent);
}
.nav-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{
  font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:5px;
  white-space:nowrap; line-height:1.25;
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 45%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand small{
  display:block; font-family:var(--sans); font-size:9px; letter-spacing:2.4px;
  color:var(--ink-3); font-weight:400; margin-top:1px;
  -webkit-text-fill-color:var(--ink-3);
}
.nav-links{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav-links a{
  position:relative; color:var(--ink-2); font-size:14px; padding:6px 12px;
  border-radius:8px; transition:.18s; letter-spacing:.5px;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.045)}
.nav-links a.on{color:var(--gold);background:var(--gold-soft)}
.nav-links a.on::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:1px;
  width:16px; height:2px; border-radius:2px; background:var(--gold);
}
.nav-user{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.badge{
  display:inline-block; background:var(--gold-soft); color:var(--gold);
  border:1px solid var(--line-2); border-radius:20px;
  padding:2px 11px; font-size:12px; white-space:nowrap; letter-spacing:.5px;
}
.badge.g{background:rgba(127,176,138,.11);color:var(--jade);border-color:rgba(127,176,138,.3)}
.badge.b{background:rgba(111,160,200,.11);color:var(--azure);border-color:rgba(111,160,200,.3)}
.badge.y{background:rgba(208,112,95,.11);color:var(--cinnabar);border-color:rgba(208,112,95,.3)}

/* ============ 布局 ============ */
.wrap{max-width:1120px;margin:0 auto;padding:28px 20px 72px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.014));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
  transition:border-color .22s, transform .22s;
}
.card h2{
  margin:0 0 16px; font-family:var(--serif); font-size:17px; font-weight:600;
  letter-spacing:2.5px; color:var(--ink); display:flex; align-items:center; gap:10px;
}
.card h2::before{
  content:""; width:3px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold-lit),var(--gold-dim));
}
.card h3{margin:20px 0 10px;font-size:14px;color:var(--ink-2);letter-spacing:1.5px;font-weight:600}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}

/* ============ 首页 Hero ============ */
.hero{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid var(--line-2); border-radius:18px;
  padding:52px 24px 44px; margin-bottom:22px;
  background:
    radial-gradient(620px 260px at 50% 0%, rgba(214,176,106,.13), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow:var(--shadow-2);
}
.hero::before,.hero::after{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(214,176,106,.10), transparent 68%);
  pointer-events:none;
}
.hero::before{top:-110px;left:-70px}
.hero::after{bottom:-130px;right:-60px}
.hero-title{
  position:relative; font-family:var(--serif); font-size:44px; font-weight:700;
  letter-spacing:16px; text-indent:16px; line-height:1.3; margin:0;
  background:linear-gradient(135deg,#fbeecd 0%,var(--gold) 42%,#a8834a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  position:relative; margin-top:14px; color:var(--ink-2);
  font-size:13.5px; letter-spacing:2px; line-height:1.9;
}
.hero-rule{
  position:relative; width:150px; height:1px; margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.hero-rule::after{
  content:"❖"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:12px; background:transparent; padding:0 8px;
}
.seal{
  position:absolute; top:22px; right:24px; width:52px; height:52px;
  border:1.5px solid rgba(208,112,95,.55); border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:0;
  color:rgba(208,112,95,.8); line-height:1.05; transform:rotate(-6deg);
  background:rgba(208,112,95,.05);
}
@media(max-width:640px){
  .hero{padding:38px 18px 32px}
  .hero-title{font-size:29px;letter-spacing:9px;text-indent:9px}
  .seal{display:none}
}

/* ============ 统计卡 ============ */
.stat{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 14px; text-align:center; transition:.22s;
}
.stat::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,176,106,.4),transparent);
}
.stat:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.stat .n{
  font-family:Georgia,var(--serif); font-size:34px; font-weight:700; line-height:1.15;
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .l{font-size:12.5px;color:var(--ink-3);margin-top:6px;letter-spacing:1.5px}
.stat.alt .n{background:linear-gradient(135deg,#a9cde8,var(--azure) 55%,#3f6f95);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.alt2 .n{background:linear-gradient(135deg,#b3dcbb,var(--jade) 55%,#4b7c56);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.rose .n{background:linear-gradient(135deg,#eec2d1,var(--rose) 55%,#94566c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ 表单 ============ */
label{display:block;font-size:12.5px;color:var(--ink-2);margin:14px 0 6px;letter-spacing:1px}
input,select,textarea{
  width:100%; padding:11px 13px;
  border:1px solid var(--line-2); border-radius:10px;
  background:rgba(0,0,0,.28); color:var(--ink);
  font-size:14px; font-family:inherit; transition:.18s;
}
input::placeholder,textarea::placeholder{color:#6b6153}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold);
  background:rgba(0,0,0,.38);
  box-shadow:0 0 0 3px rgba(214,176,106,.13);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select option{background:var(--surface-2);color:var(--ink)}
textarea{min-height:88px;resize:vertical;line-height:1.7}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 24px; border:1px solid transparent; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 55%,#b08f4f);
  color:#221b0e; font-size:14px; font-weight:700; font-family:inherit; letter-spacing:2px;
  box-shadow:0 3px 14px rgba(214,176,106,.22); transition:.2s;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(214,176,106,.32)}
.btn:active{transform:translateY(0)}
.btn:disabled{background:#3a342a;color:#7d7365;box-shadow:none;cursor:not-allowed;transform:none;filter:none}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);box-shadow:none;font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--gold-dim)}
/* <a> 当按钮用时，防止被全局 a:hover 抢走文字色（金底金字看不清） */
a.btn:hover{color:#221b0e}
a.btn.ghost:hover{color:var(--ink)}
a.btn.gold:hover{color:#2a2008}
a.btn.ok:hover{color:#10240f}
a.btn.danger:hover{color:#2a0f0a}
.btn.ok{background:linear-gradient(135deg,#a5d3ac,var(--jade) 55%,#4f8459);color:#10240f;box-shadow:0 3px 14px rgba(127,176,138,.2)}
.btn.danger{background:linear-gradient(135deg,#e59d8f,var(--cinnabar) 55%,#9d4a3d);color:#2a0f0a;box-shadow:0 3px 14px rgba(208,112,95,.2)}
.btn.gold{background:linear-gradient(135deg,#e7c98c,var(--gold) 55%,#b8923f);color:#2a2008;box-shadow:0 3px 14px rgba(214,176,106,.28)}
.btn.sm{padding:6px 14px;font-size:12.5px;letter-spacing:1px;border-radius:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ============ 滑块验证 ============ */
.slider-box{margin-top:8px;user-select:none}
.slider-track{
  position:relative; height:44px; background:rgba(0,0,0,.32);
  border:1px solid var(--line-2); border-radius:10px; overflow:hidden;
}
.slider-gap{
  position:absolute; top:6px; width:32px; height:32px;
  border:1.5px dashed rgba(214,176,106,.5); border-radius:7px; background:rgba(214,176,106,.05);
}
.slider-fill{position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,rgba(214,176,106,.22),rgba(214,176,106,.35))}
.slider-knob{
  position:absolute; top:4px; left:0; width:36px; height:36px;
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 60%,#b08f4f);
  border-radius:8px; cursor:grab; color:#221b0e; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.slider-tip{position:absolute;width:100%;text-align:center;line-height:44px;font-size:13px;color:var(--ink-3);pointer-events:none;letter-spacing:1px}
.slider-box.ok .slider-track{border-color:var(--jade)}
.slider-box.ok .slider-fill{background:linear-gradient(90deg,rgba(127,176,138,.2),rgba(127,176,138,.34))}
.slider-box.ok .slider-tip{color:var(--jade)}
.slider-box.ok .slider-knob{background:linear-gradient(135deg,#b3dcbb,var(--jade));color:#10240f}

/* ============ 人物 ============ */
.person-list{display:grid;gap:10px}
.person-item{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line); border-radius:12px; cursor:pointer;
  transition:.2s; position:relative; overflow:hidden;
}
.person-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); opacity:0; transition:.2s;
}
.person-item:hover{border-color:var(--line-2);background:rgba(255,255,255,.055);transform:translateX(3px)}
.person-item:hover::before{opacity:1}
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-family:var(--serif); font-weight:600; color:#0d1a24;
  background:linear-gradient(135deg,#a9cde8,var(--azure));
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.avatar.f{background:linear-gradient(135deg,#eab8c9,var(--rose));color:#2a1019}
.avatar.u{background:linear-gradient(135deg,#a89d8c,#6f6558);color:#1c1913}
.p-main{flex:1;min-width:0}
.p-name{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:1.5px;color:var(--ink)}
.p-meta{font-size:12px;color:var(--ink-3);margin-top:2px;letter-spacing:.5px}
.p-side{font-size:12px;color:var(--ink-3);text-align:right;white-space:nowrap}
.person-item:hover .p-side{color:var(--gold)}

.rel-group{margin-bottom:18px}
.rel-title{
  font-size:12px; color:var(--gold); letter-spacing:3px; margin-bottom:10px;
  padding-bottom:6px; border-bottom:1px solid var(--line); font-weight:600;
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:22px; padding:6px 15px; margin:0 8px 9px 0; cursor:pointer;
  font-size:14px; transition:.18s; color:var(--ink);
}
.chip:hover{border-color:var(--gold-dim);background:rgba(214,176,106,.10);transform:translateY(-1px)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--azure);flex:0 0 7px}
.chip .dot.f{background:var(--rose)}
.chip .dot.u{background:var(--ink-3)}
.chip small{color:var(--ink-3);font-size:11px}
.chip b{color:var(--ink-3)!important}

.lineage{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px}
.lineage span.sep{color:var(--gold-dim)}
.bio{
  background:rgba(0,0,0,.24); border:1px solid var(--line);
  border-left:2px solid var(--gold-dim); padding:16px 18px; border-radius:0 10px 10px 0;
  font-family:var(--serif); font-size:14.5px; line-height:2.05; color:var(--ink-2);
  white-space:pre-wrap; letter-spacing:.4px;
}
.masked{
  color:var(--ink-3); font-size:13px; background:rgba(0,0,0,.2);
  border:1px dashed var(--line-2); padding:12px 14px; border-radius:10px;
}
.kv{display:grid;grid-template-columns:88px 1fr;gap:10px 14px;font-size:14px}
.kv .k{color:var(--ink-3);letter-spacing:1px}
.pending{color:var(--cinnabar);font-size:12px;margin-left:6px}

/* ============ 注册时选择本人 ============ */
.pick{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border:1px solid var(--line-2); border-radius:9px;
  background:rgba(255,255,255,.02); cursor:pointer; font-size:13px; transition:.16s;
}
.pick:hover{border-color:var(--gold-dim);background:rgba(214,176,106,.09)}
.pick b{color:var(--ink);font-size:14.5px;letter-spacing:1px}
.pick span{color:var(--ink-3);font-size:12px}
.pick em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-3)}
.pick em.ok{color:var(--gold)}
.pick.off{opacity:.42;cursor:not-allowed}
.pick.off:hover{border-color:var(--line-2);background:rgba(255,255,255,.02)}
.pick-list{display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto;margin-top:6px}

/* ============ 联系方式 ============ */
.contact-lock{color:var(--ink-3);font-size:13px}
.contact-val{color:var(--ink);letter-spacing:.8px;font-size:14.5px}
.self-tag{
  display:inline-block; margin-left:9px; padding:2px 10px; border-radius:20px;
  font-size:11.5px; letter-spacing:1.5px; vertical-align:middle;
  background:linear-gradient(135deg,rgba(214,176,106,.24),rgba(214,176,106,.07));
  border:1px solid rgba(214,176,106,.45); color:var(--gold);
}

/* ============ 表格 ============ */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--gold);font-weight:600;background:rgba(214,176,106,.06);letter-spacing:1px;font-size:12px}
tr:hover td{background:rgba(255,255,255,.03)}

/* ============ 提示 ============ */
.msg{padding:12px 15px;border-radius:10px;font-size:13.5px;margin:12px 0;line-height:1.8;border:1px solid}
.msg.err{background:rgba(208,112,95,.10);color:#eda695;border-color:rgba(208,112,95,.32)}
.msg.ok{background:rgba(127,176,138,.10);color:#a8d3b0;border-color:rgba(127,176,138,.32)}
.msg.info{background:rgba(111,160,200,.09);color:#a8c9e2;border-color:rgba(111,160,200,.28)}
.msg.warn{background:rgba(214,176,106,.10);color:#e7cd97;border-color:rgba(214,176,106,.34)}
.empty{text-align:center;color:var(--ink-3);padding:48px 10px;font-size:14px;letter-spacing:1px}
.empty::before{content:"❋";display:block;font-size:26px;color:var(--gold-dim);margin-bottom:10px}
.loading{text-align:center;color:var(--ink-3);padding:40px;font-size:14px;letter-spacing:2px}
.loading::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-left:8px;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* ============ 条形图 ============ */
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13px}
.bar-label{width:56px;color:var(--ink-3);text-align:right;flex:0 0 56px;font-size:12px;letter-spacing:1px}
.bar-track{flex:1;background:rgba(0,0,0,.3);border-radius:5px;height:20px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.04)}
.bar-fill{
  height:100%; border-radius:4px; position:relative;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold) 70%,var(--gold-lit));
  box-shadow:0 0 12px rgba(214,176,106,.28);
  animation:grow .8s cubic-bezier(.22,.9,.3,1) both;
}
.bar-fill.b{background:linear-gradient(90deg,#3f6f95,var(--azure) 70%,#a9cde8);box-shadow:0 0 12px rgba(111,160,200,.25)}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.bar-num{width:62px;color:var(--ink-2);flex:0 0 62px;font-size:12.5px}

/* ============ 世系树 ============ */
.tree{font-size:14px}
.tree ul{list-style:none;margin:0;padding-left:26px;border-left:1px solid var(--line-2)}
.tree li{margin:7px 0;position:relative}
.tree li::before{content:"";position:absolute;left:-26px;top:16px;width:20px;border-top:1px solid var(--line-2)}
.tree .node{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:20px; cursor:pointer; transition:.18s; color:var(--ink);
}
.tree .node:hover{border-color:var(--gold-dim);background:rgba(214,176,106,.10)}
.tree .node.root{
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 60%,#b08f4f);
  color:#221b0e; border-color:transparent; font-weight:700;
  box-shadow:0 3px 14px rgba(214,176,106,.25);
}
.tree .more{font-size:12px;color:var(--gold);margin-left:6px}

/* ============ 审核台 ============ */
.diff{background:rgba(0,0,0,.24);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:9px 0;font-size:13px}
.diff .f{color:var(--ink-3);letter-spacing:1px}
.diff .old{color:#d4907f;text-decoration:line-through;opacity:.8}
.diff .new{color:#a8d3b0;font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{
  padding:8px 18px; border:1px solid var(--line); border-radius:22px; cursor:pointer;
  font-size:13.5px; background:rgba(255,255,255,.03); color:var(--ink-2);
  transition:.18s; letter-spacing:1px;
}
.tab:hover{border-color:var(--gold-dim);color:var(--ink)}
.tab.on{
  background:linear-gradient(135deg,var(--gold-lit),var(--gold) 60%,#b08f4f);
  color:#221b0e; border-color:transparent; font-weight:700;
  box-shadow:0 3px 14px rgba(214,176,106,.22);
}
.tab .cnt{display:inline-block;background:rgba(0,0,0,.22);border-radius:10px;padding:0 7px;margin-left:6px;font-size:11.5px}
.tab.on .cnt{background:rgba(0,0,0,.2)}

.modal-bg{
  position:fixed; inset:0; background:rgba(6,5,4,.72);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;
  animation:fade .18s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:16px; padding:26px;
  max-width:560px; width:100%; max-height:86vh; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.05) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 16px;font-family:var(--serif);font-size:18px;color:var(--gold);letter-spacing:2px}

.footer{
  text-align:center; color:#6b6153; font-size:12px; padding:32px 16px;
  border-top:1px solid var(--line); letter-spacing:1.5px;
}

@media(max-width:640px){
  body{font-size:14.5px}
  .wrap{padding:18px 14px 56px}
  .card{padding:16px 16px}
  .nav-in{padding:9px 12px;gap:10px;flex-wrap:nowrap;align-items:center}
  .brand{font-size:16px;letter-spacing:2px;flex:0 0 auto}
  .brand small{display:none}
  .nav-links{
    order:2;flex:1 1 auto;width:auto;gap:2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:13px;padding:6px 9px;white-space:nowrap}
  .nav-user{order:3;flex:0 0 auto;gap:8px;font-size:12px;max-width:40%;justify-content:flex-end}
  .nav-user .nav-uname,.nav-user .nav-quota,.nav-user .nav-chgpwd{display:none}
  .stat{padding:16px 10px}
  .stat .n{font-size:26px}
  .kv{grid-template-columns:74px 1fr}
}