/* 启光管理 — 共用样式
   炭黑底 + 金橙主色 + clay 大圆角卡片 */

:root{
  --bg:#1a1a1e;
  --clay:#25252a;
  --clay-2:#2e2e34;
  --line:#35353d;
  --gold:#f5a623;
  --gold-dim:#8a5f14;
  --green:#4caf50;
  --red:#e53935;
  --blue:#5b8def;
  --text:#e8e8ea;
  --text-2:#c2c2c8;
  --sub:#8a8a92;
  --radius:24px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang HK","PingFang SC","Microsoft JhengHei","Noto Sans HK","Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

.wrap{max-width:520px;margin:0 auto;padding-block:20px calc(32px + env(safe-area-inset-bottom,0px))}
.wrap--wide{max-width:1100px}

/* ── 顶栏 ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 2px 18px;
}
.brand{font-size:17px;font-weight:800;letter-spacing:3px;color:#fff}
.who{font-size:12.5px;color:var(--sub)}
.who b{color:var(--text-2);font-weight:600}

/* ── clay 卡片 ── */
.clay{
  background:linear-gradient(180deg,#2c2c33 0%,#222228 45%,#1e1e24 100%);
  border-radius:var(--radius);
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 8px 16px rgba(0,0,0,.26),
    0 16px 34px rgba(0,0,0,.3),
    inset 0 1px 1px rgba(255,255,255,.055),
    inset 0 -1px 1px rgba(0,0,0,.22);
}

/* ── 入口按钮 ── */
.entry{
  display:flex;align-items:center;gap:14px;
  width:100%;text-align:left;
  padding:16px 18px;margin-bottom:12px;
  border:0;cursor:pointer;color:inherit;font:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.entry:active{transform:scale(.985)}
.entry .ico{
  width:44px;height:44px;flex:none;border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.06),inset 0 -1px 2px rgba(0,0,0,.16);
}
.entry .lbl{font-size:15.5px;font-weight:700;color:#f2f2f4}
.entry .sub{font-size:12px;color:var(--sub);line-height:1.45}
.entry .ch{margin-left:auto;color:var(--sub);font-size:18px}

/* ── 队列提示 ── */
.queue{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#e8b45c;
  background:rgba(245,166,35,.09);
  border:1px solid rgba(245,166,35,.24);
  border-radius:14px;padding:9px 13px;margin-bottom:14px;
}
.queue.over{color:#f0918c;background:rgba(229,57,53,.1);border-color:rgba(229,57,53,.28)}
.queue .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 8px rgba(245,166,35,.8)}
.queue.over .dot{background:var(--red);box-shadow:0 0 8px rgba(229,57,53,.8)}
.queue .btn-mini{margin-left:auto;font-size:12px;color:var(--gold);background:none;border:0;padding:2px 4px;cursor:pointer;font-family:inherit}

/* ── 区块标题 ── */
.sect{
  font-size:11px;font-weight:600;letter-spacing:1.4px;color:#6f6f78;
  padding:14px 4px 8px;text-transform:uppercase;
}

/* ── 列表行 ── */
.row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;
  background:#222228;border:1px solid #2e2e36;margin-bottom:8px;
}
.row .body{min-width:0;flex:1}
.row .t1{font-size:13.5px;color:#dcdce0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2{font-size:11px;color:var(--sub);font-family:ui-monospace,Menlo,Consolas,monospace}
.row .amt{font-size:14.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .amt.gold{color:var(--gold)}
.row .shot{
  width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;
  background:#2a2a31;border:1px solid #35353d;
}

.pill{
  display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:8px;
  background:#2c2c34;color:var(--sub);margin-top:3px;
}
.pill.warn{background:rgba(245,166,35,.14);color:#e8b45c}
.pill.ok{background:rgba(76,175,80,.14);color:#7fd183}
.pill.bad{background:rgba(229,57,53,.14);color:#f0918c}

/* ── 表单 ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:6px;letter-spacing:.3px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:15px;
  color:var(--text);background:#1e1e24;
  border:1px solid #35353d;border-radius:14px;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(245,166,35,.08)}
.field input::placeholder{color:#5c5c66}

.btn{
  display:block;width:100%;padding:15px;font:inherit;font-size:15.5px;font-weight:700;
  color:#1a1a1e;background:linear-gradient(180deg,#ffb545,#f5a623);
  border:0;border-radius:18px;cursor:pointer;
  box-shadow:0 6px 18px rgba(245,166,35,.24);
  transition:opacity .15s;
}
.btn:active{opacity:.85}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{
  background:transparent;color:var(--text-2);
  border:1px solid #35353d;box-shadow:none;font-weight:600;
}
.btn.danger{background:transparent;color:#f0918c;border:1px solid rgba(229,57,53,.35);box-shadow:none}

/* ── 底部弹层 ── */
.sheet-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.62);
  display:none;align-items:flex-end;justify-content:center;z-index:50;
  padding:0;
}
.sheet-mask.show{display:flex}
.sheet{
  width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:#1f1f25;border-radius:26px 26px 0 0;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #35353d;
  animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 16px;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
.sheet h3 button{background:none;border:0;color:var(--sub);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}

.shot-pick{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:150px;border-radius:16px;cursor:pointer;
  border:1.5px dashed #3b3b45;background:#1a1a20;
  color:var(--sub);font-size:14px;margin-bottom:14px;
  position:relative;overflow:hidden;
}
.shot-pick img{width:100%;height:100%;object-fit:cover;display:none}
.shot-pick.has img{display:block}
.shot-pick.has span{display:none}

/* ── 登录页 ── */
.login-wrap{
  min-height:100%;display:flex;align-items:center;justify-content:center;
  padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));
}
.login-card{width:100%;max-width:380px;padding:32px 26px}
.login-card h1{
  font-size:24px;letter-spacing:5px;font-weight:800;color:#fff;
  text-align:center;margin:0 0 6px;
}
.login-card .tagline{text-align:center;color:var(--sub);font-size:12.5px;margin:0 0 28px}

/* ── 报表 ── */
.stats{display:flex;gap:10px;margin-bottom:10px}
.stat{
  flex:1;background:#222228;border:1px solid #2e2e36;border-radius:16px;padding:13px 14px;
}
.stat .k{font-size:10.5px;color:var(--sub);letter-spacing:.8px;text-transform:uppercase}
.stat .v{font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.3}

.donut-wrap{display:flex;align-items:center;gap:18px;padding:16px;flex-wrap:wrap}
.donut{
  position:relative;width:130px;height:130px;border-radius:50%;flex:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.donut .hole{
  position:absolute;inset:26px;border-radius:50%;background:#1e1e24;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.donut .hole .k{font-size:9px;color:var(--sub);letter-spacing:.8px}
.donut .hole .v{font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px}
.legend div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.legend i{width:9px;height:9px;border-radius:2.5px;flex:none}
.legend .pc{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#fff}

/* ── 管理端选项卡 ── */
.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.tabs button{
  padding:9px 16px;border-radius:13px;border:1px solid #2e2e36;background:#202026;
  color:var(--sub);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.tabs button.on{background:rgba(245,166,35,.13);border-color:rgba(245,166,35,.4);color:var(--gold)}

.empty{
  text-align:center;color:#5c5c66;font-size:13px;padding:44px 20px;line-height:1.8;
}

.hint{font-size:12px;color:var(--sub);line-height:1.7;margin:10px 2px 0}

@media (max-width:420px){
  .entry{padding:14px 15px}
  .donut-wrap{gap:14px}
}