/* -*- coding: utf-8 -*-
 * 田赛成绩录入终端（M2 实装版）——样式移植自 docs/原型_田赛成绩录入终端_定稿版.html
 * 实装适配：键盘与底部标签栏 position:fixed + safe-area-inset（§8.1）；
 * 新增：登录绑定页 / 离线横幅 / 上行流水抽屉 / 演示数据标识 / 状态 toast。
 */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  --vi:#1d4ed8;
  --vi-grad:linear-gradient(90deg,#3b82f6,#1d4ed8);
  --vi-grad2:linear-gradient(135deg,#3b82f6,#1e40af);
  --grad-green:linear-gradient(135deg,#34d399,#059669);
  --grad-red:linear-gradient(135deg,#f87171,#dc2626);
  --grad-amber:linear-gradient(135deg,#fbbf24,#f59e0b);
  --bg:#f5f6fa; --surface:#fff; --text:#1f2937; --muted:#8a94a6; --border:#eef0f4;
  --key:#f6f7f9; --keyline:#e3e7ee;
  --green:#059669; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --red:#dc2626; --red-soft:#fef2f2; --red-line:#fecaca;
  --amber:#d97706;
  --shadow:0 1px 2px rgba(31,41,55,.04),0 6px 18px rgba(31,41,55,.06);
  color:var(--text);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#e5e7eb;
  -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
[hidden] { display:none !important; }
i[data-icon] { display:inline-flex; line-height:0; }
i[data-icon] svg { width:18px; height:18px; }

/* ===== 主列（PC 居中 820，手机全屏） ===== */
#app { max-width:820px; margin:0 auto; min-height:100%; background:var(--bg);
  box-shadow:0 14px 40px rgba(31,41,55,.12); position:relative; }
@media (min-width:821px) { #app { border-radius:0; } }

/* ---- App Bar（白底居中标题 + 圆形图标钮） ---- */
.appbar { display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  padding:calc(10px + var(--sat)) 12px 10px; background:var(--surface);
  box-shadow:0 1px 0 var(--border); position:relative; z-index:5; }
.appbar .circ { width:38px; height:38px; border-radius:50%; background:#f3f4f6; color:#4b5563;
  display:flex; align-items:center; justify-content:center; }
.appbar .circ i[data-icon] svg { width:18px; height:18px; }
.appbar .title { font-size:16px; font-weight:700; color:var(--vi); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 项目组次选择（下拉，按日程快照下发） ---- */
.evcard { background:var(--surface); margin:12px 16px 0; border-radius:16px;
  padding:11px 13px; box-shadow:var(--shadow); }
.evname { font-size:13px; font-weight:600; color:#6b7280; margin-bottom:0; }
.evname.with-date { margin-bottom:9px; }
.evname .evdate { font-variant-numeric:tabular-nums; }
.evselect { width:100%; appearance:none; -webkit-appearance:none;
  border:1.5px solid #bfdbfe; background:#f8faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232563eb' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  border-radius:12px; color:var(--text); font-size:15px; font-weight:600;
  padding:11px 34px 11px 12px; font-family:inherit; }
.evselect:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.content { padding:10px 16px 14px; display:flex; flex-direction:column; gap:10px; }
body.mode-far .content { padding-bottom:calc(410px + 72px + var(--sab)); }
body.mode-high .content, body.tab-roster .content { padding-bottom:calc(14px + 72px + var(--sab)); }
.card { background:var(--surface); border-radius:16px; box-shadow:var(--shadow); }
.panelcol { display:flex; flex-direction:column; gap:10px; }

/* ---- 离线横幅 ---- */
#offline-banner { position:fixed; top:calc(2px + var(--sat)); left:0; right:0; z-index:60;
  display:flex; justify-content:center; pointer-events:none; }
#offline-banner #offline-text { display:flex; align-items:center; gap:8px;
  background:#fef3c7; color:#92400e; border:1px solid #fde68a; border-radius:999px;
  padding:7px 14px; font-size:12.5px; font-weight:600; box-shadow:0 6px 18px rgba(31,41,55,.12); }
#offline-banner .dot { width:8px; height:8px; border-radius:50%; background:#f59e0b;
  animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---- 状态胶囊行 ---- */
.metarow { display:flex; gap:7px; flex-wrap:wrap; }
.metarow span { background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:4px 11px; font-size:12px; color:#4b5563; font-weight:500; box-shadow:var(--shadow); }
.metarow b { color:var(--vi); font-weight:700; }
.metarow span.tappable { cursor:pointer; }
.metarow span.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.metarow span.alert { background:var(--red-soft); border-color:var(--red-line); color:var(--red); }
.metarow span.demo { background:#fef3c7; border-color:#fcd34d; color:#92400e; }

/* ---- 当前运动员 ---- */
.ath { padding:13px 14px; }
.ath .head { display:flex; align-items:center; gap:11px; }
.avatar { flex:none; width:46px; height:46px; border-radius:14px; background:var(--vi-grad2);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px;
  font-weight:700; letter-spacing:.5px; box-shadow:0 4px 10px rgba(29,78,216,.3); }
.ath .who { flex:1; min-width:0; }
.ath .name { font-size:19px; font-weight:600; line-height:1.25; }
.ath .team { color:var(--muted); font-size:12px; margin-top:1px; }
.ath .pos { font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; line-height:1.5; }
.ath .pos small { display:block; color:var(--muted); }
.ath .pos small b { color:var(--green); font-size:15px; font-weight:700; }
.ath .rounds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }
.ath .rounds.six { gap:6px; }                       /* 6 轮收进一屏 */
.ath .rounds.six .cell { padding:8px 1px 7px; border-radius:10px; }
.ath .rounds.six .lb { font-size:10px; }
.ath .rounds.six .vl { font-size:16px; }
.cell { position:relative; border:1.5px solid var(--border); border-radius:12px;
  padding:10px 2px 9px; text-align:center; background:var(--bg); cursor:pointer; }
.cell .lb { font-size:11px; color:var(--muted); }
.cell .vl { font-size:22px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.cell.cur { border-color:#93c5fd; background:#eff6ff; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.cell.cur .vl { color:var(--vi); }
.cell.filled { background:var(--green-soft); border-color:var(--green-line); }
.cell.filled .vl { color:var(--green); }
.cell.foul { background:var(--red-soft); border-color:var(--red-line); }
.cell.foul .vl { color:var(--red); }
.cell.pass { background:#fffbeb; border-color:#fde68a; }   /* 免跳：与高度面板 − 同语义 */
.cell.pass .vl { color:var(--amber); }
.cell .cdot { position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; }
.cdot.sub { background:#8b5cf6; box-shadow:0 0 5px rgba(139,92,246,.7); }   /* 紫=已提交（网关跟踪投递） */
.cdot.fwd { background:#10b981; box-shadow:0 0 5px rgba(16,185,129,.7); }  /* 绿=已转发编排中心 */
.cdot.draft { background:#f59e0b; box-shadow:0 0 5px rgba(245,158,11,.7); } /* 琥珀=已保存未提交 */
.nextline { background:var(--surface); border-radius:999px; padding:8px 14px; font-size:12px;
  color:#6b7280; box-shadow:var(--shadow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nextline b { color:var(--vi); font-weight:600; }
.elim { display:inline-block; font-size:10px; background:var(--red-soft); color:var(--red);
  border-radius:5px; padding:1px 5px; font-weight:600; margin-left:6px; vertical-align:1px; }

/* ---- 数字键盘（fixed，safe-area） ---- */
.keypad { background:var(--surface); border-radius:16px 16px 0 0; padding:10px 11px;
  padding-bottom:calc(11px + var(--sab)); position:fixed; bottom:calc(64px + var(--sab));
  left:0; right:0; z-index:40; max-width:820px; margin:0 auto;
  box-shadow:0 -6px 24px rgba(31,41,55,.10); }
.display { text-align:center; font-size:26px; font-weight:700; padding:8px; background:#111827;
  color:#f8fafc; border-radius:12px; margin-bottom:9px; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
.display small { font-size:12px; color:#94a3b8; font-weight:400; margin-left:6px; }
.keys { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.key { border:1px solid var(--keyline); border-radius:12px; padding:12px 0; font-size:21px;
  font-weight:600; background:var(--key); color:var(--text); box-shadow:0 1px 0 var(--keyline); }
.key:active { transform:translateY(1px); }
.key.fn { background:#eff6ff; color:#1d4ed8; font-size:14px; font-weight:600;
  border-color:transparent; box-shadow:none; }
.key.danger { background:var(--red-soft); color:var(--red); font-size:14px; font-weight:600;
  border-color:transparent; box-shadow:none; }
.key.warn { background:#fffbeb; color:var(--amber); font-size:14px; font-weight:600;
  border-color:transparent; box-shadow:none; }
.key.gray { background:var(--key); color:var(--muted); font-size:14px; font-weight:600;
  border-color:transparent; box-shadow:none; }
.key.save { grid-column:span 2; }
.key.act { background:var(--vi-grad2); color:#fff; font-size:15px; font-weight:700;
  border-color:transparent; box-shadow:0 5px 14px rgba(29,78,216,.35); }

/* ---- 高度面板 ---- */
.attline { display:flex; align-items:center; gap:6px; margin-top:10px; }
.attline .lbl { font-size:11px; color:var(--muted); margin-right:2px; }
.attline .att { width:28px; height:28px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; background:#f3f4f6; color:#cbd5e1; font-size:16px; font-weight:700;
  border:1.5px solid transparent; font-variant-numeric:tabular-nums; }
.attline .att.o { background:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.attline .att.x { background:var(--red-soft); color:var(--red); border-color:var(--red-line); }
.attline .att.p { background:#fffbeb; color:var(--amber); border-color:#fde68a; }
.attline .att.cur { background:#eff6ff; color:var(--vi); border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.hjbar { padding:20px 16px; }
.hjbar .h { display:flex; align-items:baseline; gap:10px; }
.hjbar .h small { font-size:14px; color:var(--muted); font-weight:500; }
.hjbar .h b { font-size:46px; font-weight:700; color:var(--vi); font-variant-numeric:tabular-nums; line-height:1; }
.hjbar .h b small { font-size:15px; color:var(--muted); font-weight:400; }
.plan { display:flex; gap:7px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:none; }
.plan::-webkit-scrollbar { display:none; }
.plan .st { flex:none; min-width:66px; text-align:center; border-radius:11px; padding:9px 6px;
  font-size:13px; font-weight:600; background:var(--surface); color:var(--muted);
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow); }
.plan .st.add { color:var(--vi); background:#f8faff; border:1.5px dashed #bfdbfe; }
.plan-add { border:1.5px dashed #bfdbfe; background:#f8faff; color:var(--vi);
  border-radius:12px; padding:11px 0; font-size:13.5px; font-weight:600; }

/* ---- 横杆计划弹层（M4） ---- */
#plan-sheet-mask { position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:80; }
#plan-sheet { position:fixed; left:0; right:0; bottom:0; z-index:81; max-width:820px;
  margin:0 auto; background:var(--surface); border-radius:20px 20px 0 0;
  box-shadow:0 -12px 40px rgba(31,41,55,.25); display:flex; flex-direction:column;
  max-height:76vh; }
.sheet-head { display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; font-size:15px; font-weight:700; }
.sheet-head .circ { width:34px; height:34px; border-radius:50%; background:#f3f4f6;
  color:#4b5563; display:flex; align-items:center; justify-content:center; }
.sheet-list { flex:1; overflow-y:auto; padding:4px 16px; display:flex;
  flex-direction:column; gap:6px; }
.plan-row { display:flex; align-items:center; gap:8px; border:1px solid var(--border);
  border-radius:12px; padding:8px 10px; font-size:14px; font-variant-numeric:tabular-nums; }
.plan-row .h { font-weight:700; min-width:64px; }
.plan-row .tag { font-size:10.5px; border-radius:999px; padding:2px 8px; font-weight:600; }
.plan-row .tag.cur { background:var(--vi-grad2); color:#fff; }
.plan-row .tag.done { background:var(--green-soft); color:var(--green); }
.plan-row .tag.open { background:#f3f4f6; color:#6b7280; }
.plan-row .grow { flex:1; }
.plan-row button.setcur { border:1px solid #bfdbfe; background:#eff6ff; color:var(--vi);
  border-radius:9px; padding:5px 10px; font-size:12px; font-weight:600; }
.plan-row button.del { border:1px solid var(--red-line); background:var(--red-soft);
  color:var(--red); border-radius:9px; padding:5px 9px; font-size:12px; font-weight:600; }
.plan-row button[disabled] { opacity:.4; }
.sheet-add { display:grid; grid-template-columns:1fr auto; gap:8px; padding:8px 16px 4px; }
.sheet-add input { border:1.5px solid #e3e7ee; border-radius:12px; padding:10px 12px;
  font-size:15px; font-family:inherit; background:#fafbfd; }
.sheet-add input:focus { outline:none; border-color:#3b82f6; }
.sheet-add button { background:var(--vi-grad2); color:#fff; border-radius:12px;
  padding:0 18px; font-size:14px; font-weight:700; }
.sheet-foot { display:grid; grid-template-columns:auto 1fr; gap:9px;
  padding:8px 16px calc(12px + var(--sab)); }
.sheet-foot button { width:100%; background:var(--vi-grad2); color:#fff; border-radius:14px;
  padding:13px 0; font-size:15px; font-weight:700; box-shadow:0 8px 20px rgba(29,78,216,.35); }
.sheet-foot button.danger { width:auto; padding:13px 16px; background:var(--red-soft);
  color:var(--red); border:1px solid var(--red-line); box-shadow:none; }
.sheet-foot button[disabled] { opacity:.45; box-shadow:none; }
.plan .st small { display:block; font-size:10px; font-weight:400; margin-top:1px; opacity:.8; }
.plan .st.done { background:var(--green-soft); color:var(--green); }
.plan .st.cur { background:var(--vi-grad2); color:#fff; box-shadow:0 4px 12px rgba(29,78,216,.35); }
.tri { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.tri button { border:none; border-radius:14px; padding:18px 0; font-size:18px; font-weight:700; color:#fff; }
.tri button:active { transform:translateY(1px); }
.tri .ok { background:var(--grad-green); box-shadow:0 6px 16px rgba(5,150,105,.35); }
.tri .no { background:var(--grad-red); box-shadow:0 6px 16px rgba(220,38,38,.32); }
.tri .ps { background:var(--grad-amber); color:#42200a; box-shadow:0 6px 16px rgba(245,158,11,.32); }
.navrow { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.navrow button { border:1px solid var(--border); background:var(--surface); color:var(--vi);
  border-radius:12px; padding:12px 0; font-size:14px; font-weight:600; box-shadow:var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.navrow button.primary { background:var(--vi-grad2); color:#fff; border-color:transparent;
  box-shadow:0 5px 14px rgba(29,78,216,.35); font-size:15px; font-weight:700; }
.navrow button.wide { grid-column:span 2; }
.navrow button[disabled], .key[disabled] { opacity:.45; }
.navrow button i[data-icon] svg { width:15px; height:15px; }
.donebar { display:none; align-items:center; gap:9px; background:#fffbeb; color:#92400e;
  border-radius:12px; padding:11px 13px; font-size:14px; font-weight:600; box-shadow:var(--shadow); }
.donebar.show { display:flex; }
.donebar i[data-icon] svg { width:16px; height:16px; }

/* ---- 名单表（渐变表头 + 斑马纹） ---- */
.tblcard { padding:0; overflow-x:auto; overflow-y:hidden; }
.roster-ops { display:flex; justify-content:flex-end; padding:9px 12px 0; }
.roster-ops button { border:1px solid #bfdbfe; background:#eff6ff; color:var(--vi);
  border-radius:10px; padding:7px 14px; font-size:13px; font-weight:700; }
.roster-ops button:active { transform:translateY(1px); }
#view-roster .tblcard { min-height:60vh; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:15px; }
.tbl th { background:var(--vi-grad); color:#fff; font-weight:600; padding:14px 6px;
  text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl th.nm, .tbl td.nm { text-align:left; padding-left:11px; white-space:nowrap; }
.tbl td { padding:13px 6px; text-align:center; font-variant-numeric:tabular-nums; color:#374151; }
.tbl tbody tr:nth-child(even) { background:#eff6ff; }
.tbl tbody tr.cur td { background:#dbeafe; }
.tbl tbody tr.out td { opacity:.45; }
.tbl td.nm { font-size:15px; font-weight:500; }
.tbl td.nm small { display:block; color:var(--muted); font-size:12px; font-weight:400; }
.tbl .c-o { color:var(--green); font-weight:700; }
.tbl .c-x { color:var(--red); font-weight:600; }
.tbl .c-p { color:var(--amber); font-weight:700; }
.tbl .c-n { color:#d1d5db; }
.tbl td.curcol { outline:2px solid #93c5fd; outline-offset:-2px; }
.tbl .best { color:var(--vi); font-weight:700; }
.pill { display:inline-block; font-size:10px; border-radius:999px; padding:2px 8px; font-weight:600; }
.pill.blue { background:#eff6ff; color:var(--vi); }
.pill.green { background:var(--green-soft); color:var(--green); }
.pill.gray { background:#f3f4f6; color:#6b7280; }
.note { font-size:11px; color:var(--muted); padding:0 4px; }
.tbl th.idx { color:#fff; }
.tbl td.idx { color:var(--muted); width:34px; }
.tbl th:not(.nm):not(.idx), .tbl td:not(.nm):not(.idx) { min-width:48px; }  /* 压不下时横向滚 */
.rtctl { margin-left:auto; display:inline-flex; align-items:center; gap:0; padding:2px !important; }
.rtctl .rt { border:none; background:transparent; color:var(--muted); font-size:12px; font-weight:600;
  border-radius:999px; padding:3px 12px; cursor:pointer; }
.rtctl .rt.on { background:#eff6ff; color:var(--vi); }
.anctl small { margin-left:8px; font-size:11px; color:var(--muted); font-weight:400; }
#view-settings .card .anctl { display:flex; padding:13px 0; }
#view-settings .card .anctl + .anctl { border-top:1px solid var(--border); }
#view-settings .datacard { margin-top:10px; padding:13px 16px; }
#view-settings .datarow { display:flex; gap:10px; }
#view-settings .databtn { flex:1; border-radius:12px; padding:12px 0; font-size:13.5px; font-weight:700; border:1px solid #bfdbfe; background:#eff6ff; color:var(--vi); }
#view-settings .databtn.danger { border-color:#fecaca; background:var(--red-soft); color:var(--red); }
#view-settings .datacard small { display:block; margin-top:9px; font-size:11px; color:var(--muted); }
.anctl { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:#334155; cursor:pointer; user-select:none; }
.anctl .anbox { width:15px; height:15px; border:1.5px solid #cbd5e1; border-radius:4px;
  background:#fff; display:inline-block; }
.anctl .anbox.on { background:var(--vi); border-color:var(--vi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l3 3 5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat; }

/* ---- 底部标签栏（fixed + safe-area） ---- */
.tabbar { display:flex; background:var(--surface); box-shadow:0 -1px 0 var(--border);
  padding:6px 10px; padding-bottom:calc(9px + var(--sab)); position:fixed; bottom:0;
  left:0; right:0; z-index:50; max-width:820px; margin:0 auto; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px;
  color:#9ca3af; font-weight:500; padding:5px 0; }
.tab i[data-icon] svg { width:20px; height:20px; }
.tab[aria-pressed="true"] { color:var(--vi); font-weight:600; }

/* ---- 登录绑定页 ---- */
#view-login { min-height:100%; display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + var(--sab)); background:#e5e7eb; }
.login-card { width:100%; max-width:390px; background:var(--surface); border-radius:20px;
  padding:26px 24px 22px; box-shadow:0 14px 40px rgba(31,41,55,.14); }
.login-badge { width:44px; height:44px; border-radius:14px; background:var(--vi-grad2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  margin-bottom:12px; box-shadow:0 6px 16px rgba(29,78,216,.3); }
.login-title { font-size:19px; font-weight:700; }
.login-sub { font-size:12px; color:var(--muted); margin:4px 0 18px; }
.fld { display:block; font-size:12.5px; color:#6b7280; font-weight:600; margin-bottom:12px; }
.fld input { display:block; width:100%; margin-top:6px; border:1.5px solid #e3e7ee;
  border-radius:12px; padding:11px 12px; font-size:15px; font-family:inherit; color:var(--text);
  background:#fafbfd; }
.fld input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.fld2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#btn-login { width:100%; background:var(--vi-grad2); color:#fff; font-size:16px; font-weight:700;
  border-radius:14px; padding:13px 0; margin-top:6px; box-shadow:0 8px 20px rgba(29,78,216,.35); }
#btn-login:active { transform:translateY(1px); }
.login-err { margin-top:12px; background:var(--red-soft); color:var(--red); border:1px solid var(--red-line);
  border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; }
/* 扫码准入状态（M4） */
.prov-box { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px;
  padding:14px 12px; text-align:center; margin-bottom:14px; }
.prov-title { font-size:15px; font-weight:700; color:var(--vi); }
.prov-title::after { content:''; display:inline-block; width:12px; height:12px;
  margin-left:8px; border:2px solid #93c5fd; border-top-color:var(--vi); border-radius:50%;
  animation:provspin .8s linear infinite; vertical-align:-1px; }
@keyframes provspin { to { transform:rotate(360deg); } }
.prov-sub { font-size:12px; color:var(--muted); margin-top:5px; }
.login-cancel { display:block; margin:14px auto 0; font-size:13px; color:var(--vi); font-weight:600; }

/* ---- 待发送抽屉 ---- */
#drawer-mask { position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:80; }
#drawer { position:fixed; top:0; right:0; bottom:0; width:min(360px, 92vw); background:var(--surface);
  z-index:81; display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(31,41,55,.2); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px;
  font-size:15px; font-weight:700; border-bottom:1px solid var(--border); }
.drawer-head .circ { width:34px; height:34px; border-radius:50%; background:#f3f4f6; color:#4b5563;
  display:flex; align-items:center; justify-content:center; }
.drawer-list { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.ob-row { border:1px solid var(--border); border-radius:12px; padding:9px 11px; font-size:12px;
  display:flex; flex-direction:column; gap:3px; background:#fafbfd; }
.ob-row .r1 { display:flex; align-items:center; gap:8px; }
.ob-row .st { font-size:10px; font-weight:700; border-radius:999px; padding:2px 8px; }
.ob-row .st.pending { background:#fffbeb; color:#92400e; }
.ob-row .st.submitted { background:#f5f3ff; color:#6d28d9; }
.ob-row .st.forwarded { background:var(--green-soft); color:var(--green); }
.ob-row .r1 b { font-size:12.5px; }
.ob-row .r1 time { margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.ob-row .r2 { color:var(--muted); font-size:11px; word-break:break-all; }
.drawer-empty { color:var(--muted); font-size:12.5px; text-align:center; padding:30px 0; }
.drawer-foot { display:grid; grid-template-columns:1fr; gap:9px; padding:10px 12px;
  padding-bottom:calc(12px + var(--sab)); border-top:1px solid var(--border); }
.drawer-foot button { border-radius:12px; padding:11px 0; font-size:13.5px; font-weight:700;
  background:#eff6ff; color:var(--vi); }
.drawer-foot button.danger { background:var(--red-soft); color:var(--red); }
.drawer-foot button:active { transform:translateY(1px); }

/* ---- toast ---- */
#toast { position:fixed; left:50%; bottom:calc(84px + var(--sab)); transform:translateX(-50%);
  background:rgba(17,24,39,.85); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:600; z-index:90; max-width:86vw; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25); }
