:root{
  --bg:#0a0a0c;
  --gold:#e8c87a;
  --gold-2:#c9a227;
  --gold-3:#b8860b;
  --ink:#f3ede0;
  --ink-2:#d8d2c6;   /* 次级文字（表格正文等） */
  --ink-3:#8d877d;   /* 弱化文字（说明/占位） */
  --muted:#9a948a;
  --card:rgba(28,26,22,.72);
  --line:rgba(201,162,39,.28);
  --glow:rgba(201,162,39,.16);
}
*{box-sizing:border-box;}
/* hidden 属性必须优先于任何 display 规则（否则 .admin-shell 的 grid 会盖掉 hidden） */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--glow), transparent 60%),
    radial-gradient(600px 400px at 90% 10%, rgba(184,134,11,.10), transparent 60%),
    linear-gradient(180deg,#0a0a0c,#0c0c0f 40%,#0a0a0c);
}
.gold{
  background:linear-gradient(90deg,var(--gold),#fff3cf 40%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(232,200,122,.25);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,12,.7); backdrop-filter:blur(10px);
}
.brand{font-weight:800; font-size:18px; letter-spacing:.5px; color:var(--ink); white-space:nowrap;}
.brand span{color:var(--gold);}
.nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px;}
.nav a{
  text-decoration:none; color:var(--muted); font-size:13px;
  padding:6px 11px; border-radius:8px; border:1px solid transparent; white-space:nowrap;
  transition:.2s;
}
.nav a:hover{color:var(--gold); border-color:var(--line); background:rgba(201,162,39,.06);}

.wrap{max-width:820px; margin:0 auto; padding:28px 18px 250px;}

/* hero */
.hero{text-align:center; padding:18px 0 8px;}
.hero h1{font-size:clamp(26px,6vw,40px); line-height:1.32; margin:0 0 18px; font-weight:800; letter-spacing:.5px; animation:rise .6s both;}
.cats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 16px;}
.cats span{
  border:1px solid var(--line); color:var(--gold);
  padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600;
  background:rgba(201,162,39,.06); transition:.25s; animation:pop .5s both;
}
.cats span:hover{background:rgba(201,162,39,.16); transform:translateY(-2px); box-shadow:0 6px 18px rgba(201,162,39,.18);}
.hero .sub{color:var(--gold); font-size:14px; letter-spacing:.5px; margin:0 0 18px; animation:rise .7s both;}
.hero .intro{
  color:var(--muted); font-size:15px; line-height:1.9; text-align:left;
  max-width:680px; margin:0 auto; padding:16px 18px;
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  animation:rise .8s both;
}

/* chat */
.chat{display:flex; flex-direction:column; gap:14px; margin:22px 0;}
.chat-hint{text-align:center; color:#6f6a60; font-size:13px; padding:20px 0; animation:rise .8s both;}
.msg{max-width:92%; padding:12px 15px; border-radius:14px; font-size:15px; white-space:pre-wrap; word-break:break-word; animation:rise .4s both;}
.msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border-bottom-right-radius:4px; font-weight:600;}
.msg.bot{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px;}
.cards{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.card{
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:11px 13px; background:rgba(20,18,14,.6); transition:.25s;
}
.card:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.5);}
.card .ctitle{font-weight:700; color:var(--ink); margin-bottom:4px;}
.card .cplain{color:#d8d2c6; font-size:14px;}
.card .cmeta{font-size:12px; color:var(--muted); margin-top:7px; display:flex; flex-wrap:wrap; gap:6px;}
.tag{background:rgba(201,162,39,.12); color:var(--gold); border-radius:6px; padding:1px 7px; font-size:11px;}
.tag.gold{background:rgba(201,162,39,.18); color:var(--gold);}

.pay-cta{margin-top:12px; padding:12px 14px; border:1px dashed var(--gold); background:rgba(201,162,39,.06); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pay-cta .ptext{font-size:14px; color:var(--ink);}
.pay-cta button{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border:none; padding:9px 16px; border-radius:9px; font-weight:700; cursor:pointer;}

/* composer + 版权（输入区抬高、加厚） */
.composer{
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(10,10,12,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -1px 0 rgba(201,162,39,.25), 0 -12px 32px rgba(0,0,0,.55);
  padding:22px 16px 14px;
}
.composer .row{display:flex; gap:12px; max-width:820px; margin:0 auto;}
.composer .mode{max-width:820px; margin:14px auto 0; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px;}
#input{flex:1; padding:16px 18px; border:1px solid var(--line); border-radius:12px; font-size:16px; outline:none; background:rgba(20,18,14,.7); color:var(--ink);}
#input::placeholder{color:#6f6a60;}
#input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.15);}
#send{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border:none; padding:0 34px; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; white-space:nowrap;}
#send:hover{filter:brightness(1.08);}
.copyright{max-width:820px; margin:12px auto 0; padding-top:10px; border-top:1px solid rgba(201,162,39,.14); font-size:11px; line-height:1.7; color:#6f6a60; text-align:center;}

/* 看板娘 */
.kanban{position:fixed; left:16px; bottom:150px; z-index:30; display:flex; align-items:flex-end; gap:10px; cursor:pointer; animation:kbFloat 3.2s ease-in-out infinite;}
.kb-avatar{width:64px; height:64px; flex:0 0 auto; border-radius:50%; background:radial-gradient(circle at 50% 35%, #1c1a15, #0c0b09); border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 0 4px rgba(201,162,39,.08);}
.kb-avatar svg{display:block;}
.kb-bubble{position:relative; max-width:240px; background:linear-gradient(180deg,#1a1813,#100f0c); border:1px solid var(--line); border-radius:14px; padding:11px 14px; font-size:13px; line-height:1.65; color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(8px); transition:.3s; pointer-events:none;}
.kanban.show .kb-bubble{opacity:1; transform:none;}
.kb-bubble::after{content:""; position:absolute; left:-7px; bottom:18px; border:7px solid transparent; border-right-color:#100f0c;}
.kb-caret{display:inline-block; width:6px; height:13px; background:var(--gold); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite;}
@keyframes kbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes blink{50%{opacity:0;}}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(4px);}
.modal[hidden]{display:none;}
.modal-card{background:linear-gradient(180deg,#15130f,#0f0e0b); border:1px solid var(--line); border-radius:16px; padding:22px; width:320px; text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal-card h3{margin:0 0 12px; font-size:16px; color:var(--gold);}
.modal-card .close{position:absolute; right:12px; top:8px; border:none; background:none; font-size:22px; cursor:pointer; color:var(--muted);}
.qr{width:200px; height:200px; margin:0 auto; background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.qr svg,.qr img{width:180px; height:180px;}
.qr-text{font-size:12px; color:var(--muted); word-break:break-all; margin:8px 0;}
.pay-method{width:100%; margin-top:8px; padding:11px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; font-weight:700; cursor:pointer;}
.pay-method.alt{background:linear-gradient(135deg,#3a7bd5,#1d4ed8); color:#fff;}
.mock-btn{width:100%; margin-top:8px; padding:9px; border:1px dashed var(--gold); background:rgba(201,162,39,.06); color:var(--gold); border-radius:10px; cursor:pointer; font-size:13px;}
.status{font-size:13px; color:var(--muted); min-height:18px; margin-top:8px;}
.muted{color:var(--muted);}

@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes pop{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:none;}}
.reveal{animation:rise .6s both;}
@media (max-width:560px){
  .wrap{padding:18px 14px 275px;}
  .hero .intro{font-size:14px;}
  .cats span{font-size:13px; padding:6px 11px;}
  .nav a{font-size:12px; padding:5px 8px;}
  .composer .row{flex-wrap:nowrap;}
  #input{padding:15px 16px; font-size:16px;}
  #send{padding:0 26px;}
  .kb-bubble{max-width:200px; font-size:12px;}
  .kb-avatar{width:54px; height:54px;}
}

/* 用户栏（登录/注册、会员徽标） */
.userbar{display:flex; align-items:center; gap:8px; white-space:nowrap;}
.userbar button{
  background:transparent; color:var(--gold); border:1px solid var(--line);
  padding:7px 13px; border-radius:8px; font-size:13px; cursor:pointer; transition:.2s;
}
.userbar button:hover{background:rgba(201,162,39,.1);}
.userbar .uname{color:var(--ink); font-size:13px;}
.badge{font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted);}
.badge.paid{color:#1a1408; background:linear-gradient(135deg,var(--gold),var(--gold-2)); border-color:transparent; font-weight:700;}

/* 模式栏：会员状态 + 解锁按钮 */
.mode{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px 0;}
.mode .hint{color:var(--muted); font-size:13px;}
.unlock-btn{
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border:none;
  padding:9px 16px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer;
  box-shadow:0 4px 16px rgba(201,162,39,.25); transition:.2s;
}
.unlock-btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(201,162,39,.35);}

/* 登录/注册弹窗 */
.tabs{display:flex; gap:8px; margin:6px 0 16px;}
.tab{
  flex:1; background:transparent; color:var(--muted); border:1px solid var(--line);
  padding:9px; border-radius:9px; font-size:14px; cursor:pointer; transition:.2s;
}
.tab.active{color:#1a1408; background:linear-gradient(135deg,var(--gold),var(--gold-2)); border-color:transparent; font-weight:700;}
.auth-form{display:flex; flex-direction:column; gap:11px;}
.auth-form input{
  background:rgba(20,18,14,.7); border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:10px; font-size:15px; outline:none; transition:.2s;
}
.auth-form input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.12);}
.auth-form .row2{display:flex; gap:9px;}
.auth-form .row2 input{flex:1;}
.auth-form .row2 button{
  background:rgba(201,162,39,.1); color:var(--gold); border:1px solid var(--line);
  border-radius:10px; padding:0 14px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.auth-form .row2 button:disabled{opacity:.5; cursor:not-allowed;}
.auth-submit{
  margin-top:4px; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408;
  border:none; padding:13px; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer; transition:.2s;
}
.auth-submit:hover{transform:translateY(-1px);}
.status{color:var(--gold); font-size:13px; min-height:18px; margin:10px 0 0; text-align:center;}

/* ===== ICP 备案号（页脚版权下方） ===== */
.icp{margin-top:8px; font-size:12px; color:var(--muted); text-align:center;}
.icp a{color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--line);}
.icp a:hover{color:var(--gold); border-color:var(--gold);}

/* ===== 登录 / 注册 独立页面 ===== */
.muted{color:var(--muted); font-size:13px;}
.auth-page{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:28px 16px 40px;}
.auth-box{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:28px 24px 22px; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.auth-head{text-align:center; margin-bottom:18px;}
.auth-head h2{margin:6px 0 4px; font-size:22px; letter-spacing:1px;}
.auth-head .muted{margin:0;}
.auth-page form{display:flex; flex-direction:column; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field > span{font-size:13px; color:var(--muted);}
.field input{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:12px 14px; font-size:15px; outline:none; transition:.2s;
}
.field input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.12);}
.code-wrap{display:flex; gap:8px;}
.code-wrap input{flex:1;}
.code-wrap button{
  background:rgba(201,162,39,.1); color:var(--gold); border:1px solid var(--line);
  border-radius:10px; padding:0 14px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.code-wrap button:disabled{opacity:.5; cursor:not-allowed;}
.auth-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.auth-foot a{color:var(--gold); text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}
.auth-foot-note{margin-top:18px;}

/* ===== 后台管理 /admin ===== */
.admin-page{padding:0 0 60px;}
.admin-wrap{max-width:1180px; margin:0 auto; padding:24px 18px;}
.admin-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:20px;
}
.admin-head .tagline{
  font-style:normal; font-size:12px; color:var(--gold-2); margin-left:8px;
  border:1px solid var(--line); border-radius:6px; padding:2px 7px;
}
.back-link{color:var(--gold); text-decoration:none; font-size:13px;}
.admin-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; margin-bottom:18px;
}
.admin-card h3{margin:0 0 6px; font-size:18px; letter-spacing:.5px;}
.admin-card code{color:var(--gold); background:rgba(201,162,39,.08); padding:1px 6px; border-radius:5px; font-size:12px;}
.nav-list{display:flex; flex-direction:column; gap:10px; margin:16px 0;}
.nav-row{display:flex; gap:8px; align-items:center;}
.nav-row input{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-size:14px; outline:none; transition:.2s;
}
.nav-row input:focus{border-color:var(--gold);}
.nav-row .nav-label{width:34%; min-width:110px;}
.nav-row .nav-href{flex:1;}
.nav-row .del{
  background:rgba(255,90,90,.12); color:#ff8080; border:1px solid rgba(255,90,90,.3);
  border-radius:10px; width:38px; height:38px; font-size:18px; cursor:pointer; flex:none;
}
.admin-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.admin-actions .auth-submit{margin-top:0; padding:11px 20px;}
.ghost-btn{
  background:transparent; color:var(--gold); border:1px solid var(--line);
  border-radius:10px; padding:11px 16px; font-size:14px; cursor:pointer; transition:.2s;
}
.ghost-btn:hover{background:rgba(201,162,39,.08);}
.userbar .ghost{background:transparent; color:var(--gold); border-color:var(--line);}
.userbar .ghost:hover{background:rgba(201,162,39,.08);}

/* ===== 后台：多模块主控台 ===== */
.admin-head .head-right{display:flex; align-items:center; gap:12px;}
.ghost-btn.small{padding:6px 12px; font-size:12px;}
.admin-shell{display:grid; grid-template-columns:172px 1fr; gap:18px; align-items:start;}
.admin-side{
  display:flex; flex-direction:column; gap:6px; position:sticky; top:16px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px;
}
.side-btn{
  background:transparent; border:1px solid transparent; color:var(--ink-2);
  padding:10px 12px; border-radius:10px; font-size:14px; text-align:left; cursor:pointer; transition:.2s;
}
.side-btn:hover{background:rgba(201,162,39,.08); color:var(--gold);}
.side-btn.active{
  background:linear-gradient(135deg, rgba(201,162,39,.18), rgba(201,162,39,.06));
  border-color:rgba(201,162,39,.35); color:var(--gold); font-weight:600;
}
.admin-main{min-width:0;}
.admin-card h4.sub{
  margin:22px 0 10px; font-size:14px; color:var(--gold); letter-spacing:.5px;
  padding-left:9px; border-left:3px solid var(--gold);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field span{font-size:12.5px; color:var(--ink-2);}
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px 12px; font-size:14px; outline:none; transition:.2s;
  font-family:inherit; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);}
.switch-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:14px 0; padding:12px 14px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--ink-2);
}
.switch-row b{color:var(--ink); font-size:14px;}
.switch-row b.on{color:#4ade80;} .switch-row b.off{color:#f87171;}
.switch{display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink); font-size:14px;}
.switch input{width:18px; height:18px; accent-color:var(--gold); cursor:pointer;}

.stat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:14px 0 4px;}
.stat-card{
  background:linear-gradient(160deg, rgba(201,162,39,.10), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:12px; padding:16px 14px;
  display:flex; flex-direction:column; gap:3px;
}
.stat-card b{font-size:22px; color:var(--gold); letter-spacing:.5px;}
.stat-card span{font-size:12.5px; color:var(--ink-2);}
.stat-card em{font-size:11.5px; color:var(--ink-3); font-style:normal;}

.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 12px;}
.filter-bar input, .filter-bar select{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:9px 12px; font-size:13px; outline:none;
}
.filter-bar input{flex:1; min-width:150px;}
.filter-bar .ghost-btn{padding:9px 14px; font-size:13px;}
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px;}
.adm-table{width:100%; border-collapse:collapse; font-size:13px; min-width:660px;}
.adm-table th{
  text-align:left; padding:11px 12px; color:var(--gold); font-weight:600;
  background:rgba(201,162,39,.06); border-bottom:1px solid var(--line); white-space:nowrap;
}
.adm-table td{padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--ink-2);}
.adm-table tr:last-child td{border-bottom:none;}
.adm-table td.mono{font-family:ui-monospace,Consolas,monospace; font-size:12px; color:var(--ink);}
.adm-table .empty{text-align:center; padding:26px; color:var(--ink-3);}
.badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; white-space:nowrap;
}
.badge.paid{background:rgba(74,222,128,.14); color:#4ade80; border:1px solid rgba(74,222,128,.3);}
.badge.free{background:rgba(255,255,255,.06); color:var(--ink-3); border:1px solid var(--line);}
.badge.unpaid{background:rgba(248,113,113,.12); color:#f87171; border:1px solid rgba(248,113,113,.28);}
.badge.mock{background:rgba(255,255,255,.05); color:var(--ink-3); border:1px solid var(--line);}
button.mini{
  background:transparent; color:var(--gold); border:1px solid var(--line);
  border-radius:8px; padding:5px 11px; font-size:12px; cursor:pointer; transition:.2s; white-space:nowrap;
}
button.mini:hover{background:rgba(201,162,39,.12);}

@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-side{
    position:static; flex-direction:row; overflow-x:auto; gap:8px; padding:10px;
  }
  .side-btn{white-space:nowrap; padding:9px 14px;}
  .grid2{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
  .auth-foot{flex-direction:column; gap:8px;}
  .nav-row{flex-wrap:wrap;}
  .nav-row .nav-label{width:100%;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .stat-card b{font-size:19px;}
}