/* WAKE 游戏资料库 · 样式（令牌沿用 wake-ui 0.22.x，整页两档） */
:root{
  --bg:#0d1117; --bg1:#161b22; --bg2:#1d242e; --bg3:#232b36;
  --line:#2d333b; --line2:#3a424d;
  --text:#e8edf5; --text2:#aeb6c3; --text3:#8b94a5;
  --brand:#e3b341; --brand2:#f0c14b;
  --ok:#3fb950; --warn:#d97a1f; --danger:#f85149; --info:#58a6ff;
  --radius:10px; --radius-s:6px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
html.light{
  --bg:#f7f9fc; --bg1:#ffffff; --bg2:#eef2f7; --bg3:#e4eaf2;
  --line:#d8e0ea; --line2:#c3cedc;
  --text:#1d242e; --text2:#4b5666; --text3:#6b7787;
  --brand:#c99a2a; --brand2:#e3b341;
  --shadow:0 8px 24px rgba(24,39,64,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(227,179,65,.16)}
input::placeholder,textarea::placeholder{color:var(--text3)}

/* 顶栏 */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:color-mix(in srgb,var(--bg1) 92%,transparent);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--brand2),var(--brand));color:#17110a;font-weight:900;font-size:13px}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--text3);line-height:1.1}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;padding-left:32px}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px}
.kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:11px var(--mono);
  color:var(--text3);border:1px solid var(--line2);border-radius:4px;padding:1px 5px}
.top .spacer{flex:1}
.btn{border:1px solid var(--line2);border-radius:var(--radius-s);padding:7px 12px;color:var(--text2);
  display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn:hover{border-color:var(--brand);color:var(--text)}
.btn.primary{background:linear-gradient(180deg,var(--brand2),var(--brand));border-color:transparent;color:#17110a;font-weight:600}

/* 数据状态条 */
.statusbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 20px;
  background:var(--bg1);border-bottom:1px solid var(--line);font-size:12px;color:var(--text3)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line2);color:var(--text2);white-space:nowrap}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* 布局 */
.wrap{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:calc(100vh - 104px)}
.side{border-right:1px solid var(--line);padding:14px 12px;background:var(--bg1)}
.side h4{margin:14px 8px 8px;font-size:11px;letter-spacing:.8px;color:var(--text3);text-transform:uppercase}
.nav-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;color:var(--text2);cursor:pointer;transition:.13s}
.nav-item:hover{background:var(--bg2);color:var(--text)}
.nav-item.on{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--text);font-weight:600;
  box-shadow:inset 2px 0 0 var(--brand)}
.nav-item .n{font:11px var(--mono);color:var(--text3)}
.side .fld{margin:8px 0;display:grid;gap:4px}
.side label{font-size:11px;color:var(--text3);padding-left:2px}
.side select,.side input{width:100%;font-size:13px;padding:6px 8px}

.main{padding:16px 20px 40px;min-width:0}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.toolbar .total{font-size:13px;color:var(--text2)}
.toolbar .total b{color:var(--text);font-size:15px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{padding:5px 10px;font-size:12px;color:var(--text3)}
.seg button.on{background:var(--bg3);color:var(--text)}

/* 表格 */
.card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;background:var(--bg2);text-align:left;font-weight:600;color:var(--text2);
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px}
tbody td{padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);vertical-align:middle}
tbody tr{cursor:pointer;transition:.12s}
tbody tr:hover{background:var(--bg2)}
tbody tr:last-child td{border-bottom:0}
.name{font-weight:600}
.sub{color:var(--text3);font-size:12px}
.num{font-family:var(--mono);color:var(--text2)}
.null{color:var(--text3)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:1px 7px;border-radius:99px;
  border:1px solid var(--line2);color:var(--text3)}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.tag{font-size:11px;padding:1px 6px;border-radius:4px;background:var(--bg3);color:var(--text2);margin-right:4px}

/* 卡片视图 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tile{background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);padding:12px;cursor:pointer;transition:.15s}
.tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.tile h3{margin:0 0 4px;font-size:14px}
.tile .kv{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:12px;margin-top:8px}
.tile .kv span:nth-child(odd){color:var(--text3)}

/* 抽屉 */
.mask{position:fixed;inset:0;background:rgba(4,7,12,.55);opacity:0;pointer-events:none;transition:.18s;z-index:40}
.mask.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--bg1);
  border-left:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(102%);
  transition:transform .22s ease;z-index:50;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer header h3{margin:0;font-size:15px;flex:1}
.drawer .body{padding:14px 16px;overflow:auto;flex:1}
.drawer .row{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:7px 0;border-bottom:1px dashed color-mix(in srgb,var(--line) 70%,transparent);font-size:13px}
.drawer .row dt{color:var(--text3);font-size:12px}
.drawer .row dd{margin:0;word-break:break-all}
.drawer pre{margin:10px 0 0;padding:10px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  font:11.5px/1.6 var(--mono);color:var(--text2);overflow:auto;max-height:240px}
.iconbtn{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--text3)}
.iconbtn:hover{background:var(--bg3);color:var(--text)}

/* 四态 */
.state{padding:46px 20px;text-align:center;color:var(--text3)}
.state h4{margin:0 0 6px;color:var(--text2);font-size:15px}
.state p{margin:0 0 14px;font-size:13px}
.sk{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--bg2),var(--bg3),var(--bg2));
  background-size:200% 100%;animation:sh 1.1s infinite}
@keyframes sh{0%{background-position:0 0}100%{background-position:-200% 0}}
.skrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px;padding:12px}
.hidden{display:none !important}

/* 导入面板 */
.import{padding:6px 0}
.import textarea{width:100%;min-height:180px;font:12px/1.6 var(--mono);resize:vertical}
.import .hint{font-size:12px;color:var(--text3);margin:6px 0 10px}
.imp-res{margin-top:12px;display:grid;gap:6px;font-size:12.5px}
.imp-res .line{padding:8px 10px;border-radius:6px;background:var(--bg2);border-left:3px solid var(--line2)}
.imp-res .line.bad{border-left-color:var(--danger);color:#ffb4ae}
.imp-res .line.good{border-left-color:var(--ok);color:#a7e8b3}

/* 游戏切换 */
.games{display:inline-flex;gap:6px;padding:3px;border:1px solid var(--line2);border-radius:10px}
.gbtn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:13px;color:var(--text2)}
.gbtn.on{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--text);font-weight:600}
.gbtn .gn{font:11px var(--mono);color:var(--text3)}

/* 缩略图（有 img 用图片，否则自绘图标） */
.thumb{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);object-fit:cover;flex:none;display:block}
.thumb.sm{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);object-fit:cover}
.thumb.ph{display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3);background:var(--bg2)}

.thumb.xl{width:64px;height:64px;border-radius:12px}
.tc{text-align:center}
.tile-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.tile-top h3{margin:0;font-size:14px}

/* 公告 */
.nt{color:var(--text);text-decoration:none}
.nt:hover{color:var(--brand);text-decoration:underline}
.tag.ty{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px 0}
.pager .btn[disabled]{opacity:.4;cursor:not-allowed}
.dt-hero{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ck{display:flex;align-items:center;gap:6px;color:var(--text2);font-size:12.5px;padding:0}
.ck input{width:auto}

/* 校对工作台 */
.vf{margin:14px 0;padding:12px;border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--brand) 5%,transparent)}
.vf h4{margin:0 0 8px;font-size:13px;color:var(--text2)}
.vfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.vfgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text3)}
.vfgrid input,.vfgrid select{padding:6px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--text);font-size:13px}


/* 素材库 */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.acard{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.athumb{height:132px;display:flex;align-items:center;justify-content:center;background:#0b0d11;overflow:hidden}
.athumb img{max-width:100%;max-height:100%;object-fit:contain}
.athumb video{width:100%;height:100%;object-fit:cover;background:#000}
.acard figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;font-size:12px;color:var(--text2)}
.acard .src{margin-left:auto;color:var(--brand);text-decoration:none}
.gcover{width:18px;height:18px;border-radius:4px;object-fit:cover;margin-right:2px}
html.light .athumb{background:#eef1f6}

/* 移动端 */
@media (max-width:900px){
  .top{flex-wrap:wrap}
  .games{max-width:100%;overflow-x:auto}
  .wrap{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);padding:10px 12px;position:sticky;top:57px;z-index:20}
  .side{max-width:100vw;overflow-x:auto}
  .side .navlist{display:flex;gap:6px;overflow:auto;padding-bottom:4px;min-width:0;max-width:100%}
  .side .navlist .nav-item{flex:none}
  .side .nav-item{white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:5px 12px}
  .side .nav-item.on{box-shadow:none;border-color:var(--brand)}
  .side h4{display:none}
  .side .filters{display:flex;gap:8px;overflow:auto;padding-top:8px}
  .side .fld{margin:0;min-width:120px}
  .main{padding:12px}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  tbody td{border:0;padding:0}
  tbody td.hide-m{display:none}
  .grid{grid-template-columns:1fr}
  .top{padding:10px 12px;gap:8px}
  .brand small,.kbd{display:none}
}

/* ---------- 物品库（图标网格） ---------- */
.ibhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:8px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.icard{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--wk-line,#2a2f3a);border-radius:12px;
  background:var(--wk-card,#151a23);cursor:pointer;transition:transform .12s,border-color .12s;min-width:0}
.icard:hover{transform:translateY(-2px);border-color:var(--wk-brand,#4f8f8a)}
.ithumb{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.ithumb img{width:88%;height:88%;object-fit:contain}
.icard b{font-size:13px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imeta{font-size:11px;opacity:.62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iprice{font-size:12px;font-variant-numeric:tabular-nums;opacity:.92}
.icard.r-u{border-color:#3f7fbf55}.icard.r-u .iprice{color:#6fb3e8}
.icard.r-r{border-color:#8a5fb855}.icard.r-r .iprice{color:#b692e8}
.icard.r-v{border-color:#c9a22788}.icard.r-v .iprice{color:#e0bc4a}
.icard.r-k{border-color:#c0555a88}.icard.r-k .iprice{color:#e4767b}
@media (max-width:640px){.igrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.icard{padding:8px}}