/* TT Vogue 通站样式：订桌 / 俱乐部后台 / 超管后台共用。
   设计变量刻意沿用榜单页（tt_elo/build_h2h.py）里的那一套，保证整站视觉一致。 */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --sub:#6b7280; --line:#e5e7eb;
  --acc:#1f4e79; --soft:#eef2f6; --navbg:#12395c;
  --ok:#1a7f52; --warn:#b26a00; --bad:#b3261e;
  --sl-open:#fff; --sl-sel:#1f4e79; --sl-taken:#dfe3e8; --sl-block:#cfd6dd;
  /* hold = 有人正在付款：黄灰色，和「已订」（灰）要能一眼区分 */
  --sl-hold:#f3dfae; --sl-hold-fg:#8a6a1f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px 60px}
a{color:var(--acc)}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 10px}
h3{font-size:14px;margin:0 0 8px;color:var(--acc)}
.sub{color:var(--sub);font-size:12.5px;margin-bottom:16px}

/* ---------- 导航（同榜单页） ----------
   2026-10-10：吸顶。导航贴在页面最顶端，稍微一滚就被切在屏幕顶缘（看起来像被
   浏览器书签栏 / 系统任务栏盖住）。sticky 让它滚动时一直留在最上面；
   小屏（≤640px）不吸顶，整条导航有两行高，吸顶会吃掉太多竖向空间。 */
.nav{background:var(--navbg);color:#e8eef5;padding:10px 0;margin-bottom:18px;
position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(18,57,92,.18)}
.nav .wrap{padding:0 18px 0;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.nav b{font-size:15px;letter-spacing:.5px;cursor:pointer}
.nav a{color:#cfe0f0;text-decoration:none;font-size:13px}
.nav a:hover{color:#fff;text-decoration:underline}
.nav a.here{color:#fff;font-weight:700}
.nav .sp{flex:1}
.nav .langsw{display:flex;gap:0;border:1px solid #7ea6cc;border-radius:7px;overflow:hidden}
.nav .langsw a{padding:3px 11px;font-size:12.5px;color:#cfe0f0}
.nav .langsw a:hover{background:rgba(255,255,255,.10);text-decoration:none}
.nav .langsw a.on{background:#e8eef5;color:var(--navbg);font-weight:700}
.nav .me{display:flex;gap:10px;align-items:center;font-size:12.5px}
.nav .bell{position:relative;cursor:pointer}
.nav .bell i{font-style:normal;background:#c0392b;color:#fff;border-radius:9px;
  padding:0 5px;font-size:11px;line-height:16px;display:inline-block;margin-left:3px}
.foot{color:var(--sub);font-size:12px;text-align:center;padding:22px 0 0;
  border-top:1px solid var(--line);margin-top:22px}

/* ---------- 通用块 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.bar .sp{flex:1}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{min-width:0}
.muted{color:var(--sub)}
.empty{color:var(--sub);font-size:13px;padding:18px;text-align:center}
.err{color:var(--bad);font-size:13px}
.ok{color:var(--ok);font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px}
button:hover{border-color:#b9c3cf}
button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
button.pri{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600;padding:9px 22px}
button.dgr{color:var(--bad);border-color:#e8c9c7}
button.sm{padding:3px 10px;font-size:12px}
button[disabled]{opacity:.5;cursor:not-allowed}
input,select,textarea{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;background:#fff;color:var(--ink)}
input:focus,select,textarea:focus{outline:none;border-color:var(--acc)}
label{display:block;font-size:12.5px;color:var(--sub);margin:0 0 3px}
.field{margin-bottom:11px}
.field input,.field select,.field textarea{width:100%}
.hint{font-size:11.5px;color:var(--sub);margin-top:3px}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:var(--soft);color:var(--acc);font-weight:600;white-space:nowrap}
td.r,th.r{text-align:right}
tbody tr:hover{background:#fafbfc}
.tblwrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}

/* ---------- 徽标 ---------- */
.bd{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11.5px;font-weight:600;
  border:1px solid transparent;white-space:nowrap}
.bd.pending{background:#fff5e6;color:var(--warn);border-color:#f0d9a8}
.bd.confirmed{background:#e8f5ee;color:var(--ok);border-color:#b8e0c8}
.bd.rejected,.bd.cancelled{background:#fdecea;color:var(--bad);border-color:#f3c5c1}
.bd.completed{background:var(--soft);color:var(--sub);border-color:var(--line)}
.bd.expired{background:#f3f4f6;color:#868e96;border-color:#dfe3e8}
.bd.paid{background:#e8f5ee;color:var(--ok);border-color:#b8e0c8}
.bd.unpaid{background:#fdecea;color:var(--bad);border-color:#f3c5c1}
/* 少付待核对：橙红色，比未收款醒目一点 —— 老板要优先处理这种单 */
.bd.underpaid{background:#fdecea;color:#c0392b;border-color:#e8a09a}
.bd.approved{background:#e8f5ee;color:var(--ok);border-color:#b8e0c8}
.bd.suspended{background:var(--soft);color:var(--sub);border-color:var(--line)}
.bd.admin{background:#e7eef6;color:var(--acc);border-color:#bcd0e4}

/* ---------- 时段网格（核心交互） ----------
   需求：可订＝白色可点，已订＝灰不可点，被老板/超管封锁＝更深灰带横线。
   超管手动撤销后必须立刻变回白色可点 —— 网格每次都从库里重读，不做本地缓存。 */
.slots{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:auto}
.slots table{border-collapse:separate;border-spacing:0;font-size:12.5px}
.slots th{padding:7px 6px;text-align:center;min-width:58px;border-bottom:1px solid var(--line)}
.slots th.tb{position:sticky;left:0;z-index:2;text-align:left;min-width:120px;background:var(--soft)}
.slots td{padding:0;border-bottom:1px solid var(--line);border-right:1px solid #f0f2f5}
.slots td.tb{position:sticky;left:0;z-index:1;background:var(--soft);color:var(--acc);
  font-weight:600;padding:7px 10px;white-space:nowrap;border-right:1px solid var(--line)}
/* 格子里现在是「状态 + 价格」两行（不同球台不同价、不同时段还有加减价，
   不在格子上标价客人根本看不出区别），所以改用 flex 竖排居中。 */
.sl{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:34px;padding:3px 4px;border:0;border-radius:0;background:var(--sl-open);
  font-size:12px;line-height:1.2;cursor:pointer;color:var(--ink)}
.sl i{display:block;font-style:normal;font-size:10.5px;font-weight:500;opacity:.72;margin-top:1px}
/* 球台名下那行小字（「每 30 分钟 · S$14.00 / 小时」）：只在跟俱乐部默认值不同时才出现 */
.slots td.tb .tbm{font-weight:400;font-size:11px;color:var(--sub);margin-top:1px}
.sl:hover:enabled{background:#e7eef6}
.sl.sel{background:var(--sl-sel);color:#fff;font-weight:600}
.sl.taken{background:var(--sl-taken);color:#98a0a8;cursor:not-allowed}
.sl.hold{background:var(--sl-hold);color:var(--sl-hold-fg);cursor:not-allowed;font-weight:600}
.sl.block{background:var(--sl-block);color:#8b939b;cursor:not-allowed;text-decoration:line-through}
.sl.past{background:#f4f5f7;color:#c2c7cd;cursor:not-allowed}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin:10px 0 0}
.legend i{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid var(--line);
  vertical-align:-2px;margin-right:4px}
/* 网格下方那句「可以一次选满 24 小时」的小字提示：
   用虚线框 + 主题色，比 .muted 更抓眼，但又不抢网格的主体位置 */
.tip24{display:flex;gap:7px;align-items:flex-start;margin:12px 0 0;padding:8px 11px;
  border:1px dashed var(--acc);border-radius:8px;background:#f5f8fb;
  font-size:12.5px;line-height:1.55;color:var(--acc)}
.tip24 b{font-weight:700}

/* 订单表里「客人」那一格的账号 ID：可点开看真实邮箱 / 手机号。
   用虚下划线 + 主题色，让人一眼看出能点，但不至于像外链那样抢视线 */
.gl{color:var(--acc);font-weight:600;text-decoration:none;border-bottom:1px dashed var(--acc);
  cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.gl:hover{background:var(--soft)}
/* 联系方式弹层里的键值行 */
.ctk{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;align-items:baseline;
  font-size:13px;margin:4px 0 0}
.ctk dt{color:var(--sub);font-size:12.5px}
.ctk dd{margin:0;word-break:break-all}

/* ---------- 登录弹层 ---------- */
#mask,#paygate{position:fixed;inset:0;background:rgba(20,26,33,.45);display:none;z-index:120;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
#mask.show,#paygate.show{display:flex}
.dlg{background:#fff;border-radius:14px;padding:22px 24px;width:100%;max-width:430px;
  box-shadow:0 14px 44px rgba(0,0,0,.22)}
.dlg h2{display:flex;align-items:baseline;gap:8px}
.dlg .tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:12px 0 16px}
.dlg .tabs button{flex:1;border:0;border-radius:0;padding:8px 0;background:#fff}
.dlg .tabs button.on{background:var(--acc);color:#fff}
.dlg .x{margin-left:auto;cursor:pointer;color:var(--sub);font-size:18px;line-height:1}

/* ---------- 遮罩与提示 ---------- */
#busy{position:fixed;inset:0;background:rgba(246,247,249,.92);display:none;
  align-items:center;justify-content:center;z-index:140}
#busy .bx{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px;
  text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.08);max-width:80vw}
#busy .sp2{display:inline-block;width:22px;height:22px;border:3px solid #cfe0f0;border-top-color:#1f4e79;
  border-radius:50%;animation:sp 1s linear infinite;margin-bottom:8px}
@keyframes sp{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:160;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#toast div{background:#24303c;color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);animation:tin .18s ease-out}
#toast div.bad{background:var(--bad)}
#toast div.good{background:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 俱乐部卡片 ---------- */
.club{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;
  display:flex;gap:10px;flex-direction:column;cursor:pointer;margin-bottom:12px}
.club:hover{border-color:var(--acc);box-shadow:0 3px 12px rgba(31,78,121,.08)}
.club .nm{font-size:15px;font-weight:600;color:var(--acc)}
.club .mt{font-size:12.5px;color:var(--sub)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.chip{font-size:11.5px;background:var(--soft);color:var(--sub);border-radius:8px;padding:1px 8px}
.price{font-weight:700;color:var(--acc)}
.pill{display:inline-block;padding:2px 10px;border-radius:11px;border:1px solid var(--line);font-size:12px}
.pill.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.paybox{border:1px dashed #bcd0e4;background:#f7fafd;border-radius:10px;padding:12px 14px;margin:10px 0}
/* 订单号：全站统一编号，一眼能认出来 */
.ono{display:inline-block;padding:2px 9px;border-radius:7px;background:var(--acc);color:#fff;
  font-weight:700;font-size:12.5px;letter-spacing:.3px;font-variant-numeric:tabular-nums}
/* 待付款占位提示（锁定时长倒计时） */
.payhold{border:1px solid #f0d9a8;background:#fff8ec;border-radius:8px;padding:9px 12px;margin:8px 0;font-size:13px}
.payhold b{color:var(--warn);font-variant-numeric:tabular-nums}
/* 付款金额把关弹窗里的大号应付金额 */
.pgamt{font-size:30px;font-weight:800;color:var(--acc);text-align:center;
  font-variant-numeric:tabular-nums;margin:6px 0 2px}
/* 付款后回到本站时的成功提示 */
.okbox{border:1px solid #b7e0c4;background:#f2fbf5;border-radius:10px;padding:12px 14px;margin:10px 0}
.okbox h3{margin:0 0 6px}
.notif{border-bottom:1px solid var(--line);padding:9px 0}
.notif:last-child{border-bottom:0}
.notif .t{font-weight:600;font-size:13px}
.notif.unread .t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--acc);vertical-align:2px;margin-right:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px}
.kv dt{color:var(--sub)}
.kv dd{margin:0}

/* ---------- 球员名字（比赛表格里一律可点，含组织者建的临时账号） ----------
   积分小字跟在名字后面；窄格子里用 .st 换成「名字 / 积分」两行，避免挤成一团。 */
.plink{color:var(--acc);text-decoration:none;border-bottom:1px dashed var(--acc);cursor:pointer}
.plink:hover{background:var(--soft)}
.plink .pr{font-size:11px;color:var(--sub);margin-left:5px;font-variant-numeric:tabular-nums;
  border-bottom:0;text-decoration:none}
.plink.st{border-bottom:0;display:inline-block;line-height:1.25}
.plink.st .pn{display:block}
.plink.st .pr{display:block;margin-left:0;font-size:10.5px}
/* 逐局比分编辑器（录分弹窗） */
.gmrow{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.gmrow .gi{width:58px;text-align:center;padding:5px 4px;font-variant-numeric:tabular-nums}
.gmrow .gn{width:34px;font-size:12px;color:var(--sub)}
.gmrow .gw{flex:1;font-size:12px;text-align:center;color:var(--sub)}
.plink.win{font-weight:600}
.wotag{font-size:11.5px;color:var(--bad)}
.advtag{font-size:11.5px;color:var(--ok)}
/* 逐场列表里「每一局多少」的小字 */
.gline{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;font-weight:400}
/* 录分弹窗里的实时预估加减分 */
.est{font-size:11.5px;color:var(--sub);margin-top:3px;font-variant-numeric:tabular-nums}
.est b{font-weight:700}
.est .up{color:var(--ok)}
.est .dn{color:var(--bad)}
/* 组内管理条：成员 chip + × 移除按钮 */
.gchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px;background:#fff}
.gchip .gdel{border:0;background:var(--soft);color:var(--bad);border-radius:999px;
  width:18px;height:18px;line-height:16px;padding:0;font-size:13px;cursor:pointer}
.gchip .gdel:hover{background:var(--bad);color:#fff}
/* ---------- 赛事英雄图 ----------
   公开赛事页顶部横幅。组织者可自定义上传，没传就用平台默认图。
   固定 21:9 裁切：不管组织者传的是竖图还是方图，横幅高度都不会失控。 */
.hero{margin:0 0 14px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--soft);position:relative}
.hero img{display:block;width:100%;height:190px;object-fit:cover}
.hero .ht{padding:9px 14px;font-size:12px;color:var(--sub);background:#fff;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.heroedit{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
.heroedit .hpv{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--soft)}
.heroedit .hpv img{display:block;width:100%;height:150px;object-fit:cover}
@media(max-width:640px){
  .hero img{height:126px}
  .heroedit .hpv img{height:110px}
}

/* ---------- 名单批量编辑 ----------
   球员池的「录分员 / 参赛 / 种子 / 积分」改完不立即落库：
   改过的行先在本地高亮（脏行），组织者一次性点「保存更改」。 */
tbody tr.dirty td{background:#fffbe9}
tbody tr.dirty:first-child td{border-top:1px solid #e6d79a}
.picklist{max-height:330px;overflow:auto;margin-top:8px}
.picklist table{margin:0}
.picklist tr.added td{opacity:.62}

@media(max-width:640px){
  .wrap{padding:0 12px 40px}
  h1{font-size:18px}
  .slots th{min-width:52px}
  .nav .wrap{gap:10px}
  .nav{position:static;box-shadow:none}
}

/* ---------- 待处理提现：常驻提醒（2026-10-11 加）----------
   提现是要真金白银转出去的，漏一笔就是漏一笔钱。所以后台只要还有 pending
   提现，就在最顶上钉一条会呼吸的红框横幅，并在「年费与提现」tab 上挂数字角标 ——
   站长切到别的 tab 也躲不开。 */
.wdalarm{border:2px solid var(--bad)!important;background:#fdecea;
  animation:wdpulse 1.8s ease-in-out infinite}
@keyframes wdpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.30)}
  50%{box-shadow:0 0 0 7px rgba(179,38,30,0)}}
.wddot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--bad);
  animation:wdblink 1s steps(1,end) infinite}
@keyframes wdblink{0%,49%{opacity:1}50%,100%{opacity:.22}}
.wdtag{display:inline-block;min-width:16px;padding:0 4px;margin-left:5px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:11px;line-height:16px;text-align:center}
/* 晕动症 / 省电偏好：不该被闪的东西就别闪，信息靠红框和角标照样传达 */
@media (prefers-reduced-motion:reduce){.wdalarm,.wddot{animation:none}}

/* ---------- 价格规则：星期多选（2026-10-11 加）----------
   星期是「哪几天生效」，写成七个复选框最直观 —— 下拉多选在手机上难点，
   也没法一眼看出「周一到周五都勾了」。 */
.dowpick{display:flex;flex-wrap:wrap;gap:10px 14px;padding:6px 2px}
.dowpick label{display:inline-flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;
  white-space:nowrap}