/* 白猫俱乐部 · 共享样式（客户端/陪练师端/管理后台共用） */
:root{
  --bg:#0f1220;
  --panel:#181c2e;
  --panel2:#20263d;
  --line:#2a3046;
  --text:#e8eaf2;
  --muted:#8a90a8;
  --accent:#6c8cff;
  --accent2:#8aa0ff;
  --gold:#f5b64a;
  --green:#3ddc84;
  --red:#ff6b6b;
  --orange:#ff9f43;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC",-apple-system,sans-serif;
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2);text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* 手机壳容器（模拟微信内网页） */
.shell{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:80px}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:rgba(15,18,32,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .title{font-size:17px;font-weight:700}
.topbar .back{font-size:22px;line-height:1;color:var(--text);cursor:pointer;padding:4px}

/* 卡片 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 16px}
.card h3{font-size:15px;margin-bottom:10px}

/* 选项格子（游戏/类型/时长/陪练师） */
.grid{display:grid;gap:10px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:1fr 1fr 1fr}
.opt{
  border:1.5px solid var(--line);border-radius:12px;padding:12px;
  cursor:pointer;transition:all .15s;background:var(--panel2);position:relative;
}
.opt .ico{font-size:22px;display:block;margin-bottom:4px}
.opt .nm{font-weight:600;font-size:14px}
.opt .sub{font-size:11px;color:var(--muted);margin-top:2px}
.opt.sel{border-color:var(--accent);background:rgba(108,140,255,.12);box-shadow:0 0 0 1px var(--accent) inset}
.opt .tag-extra{position:absolute;top:6px;right:6px;font-size:10px;color:var(--gold)}

/* 按钮 */
.btn{
  display:block;width:100%;padding:13px;border:none;border-radius:12px;
  font-size:16px;font-weight:700;text-align:center;transition:all .15s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:active{background:var(--accent2)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--text)}
.btn-gold{background:var(--gold);color:#1a1200}
.btn-danger{background:var(--red);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* 底部固定条 */
.footbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:460px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(15,18,32,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;z-index:20;
}
.footbar .price{flex:1}
.footbar .price .lbl{font-size:11px;color:var(--muted)}
.footbar .price .val{font-size:20px;font-weight:800;color:var(--gold)}

/* 输入框 */
.input{
  width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--panel2);color:var(--text);font-size:14px;font-family:inherit;
}
.input:focus{outline:none;border-color:var(--accent)}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}

/* 状态徽章 */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge.pending{background:rgba(245,182,74,.15);color:var(--gold)}
.badge.paid{background:rgba(108,140,255,.15);color:var(--accent2)}
.badge.assigned{background:rgba(255,159,67,.15);color:var(--orange)}
.badge.serving{background:rgba(61,220,132,.15);color:var(--green)}
.badge.done{background:rgba(61,220,132,.2);color:var(--green)}
.badge.closed{background:rgba(255,107,107,.15);color:var(--red)}

/* 底部导航 */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:460px;display:flex;background:var(--panel);
  border-top:1px solid var(--line);z-index:30;
}
.tabbar .tab{flex:1;text-align:center;padding:8px 0;cursor:pointer;color:var(--muted)}
.tabbar .tab .i{font-size:20px;display:block}
.tabbar .tab .t{font-size:11px}
.tabbar .tab.on{color:var(--accent2)}

/* 空状态 */
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .i{font-size:48px;display:block;margin-bottom:12px}

/* 订单卡 */
.ocard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 16px 12px}
.ocard .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ocard .ono{font-size:11px;color:var(--muted);font-family:monospace}
.ocard .amt{font-size:17px;font-weight:800;color:var(--gold)}

/* 提示条 */
.notice{background:rgba(245,182,74,.08);border:1px solid rgba(245,182,74,.3);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--gold);margin:12px 16px}

/* 桌面端居中留白 */
@media(min-width:480px){
  body{background:#080a14}
}