/* Orai 設計系統:照抄雛形 sports-prototype.html 的 <style>(2026-10-25 版)。改外觀請改雛形再重新複製,v0 專屬的補充寫在 style.css。 */
/* ==========================================================================
   Sports Platform — v12 design system (lifestyle marketplace, calm UI)
   85% refined marketplace · 10% structured sports info · 5% brand energy.
   Tokens first; every component below reads only these tokens.
   ========================================================================== */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --sunk:#F7F7F7; --ink:#222222; --ink2:#3F3F3F; --muted:#6A6A6A; --line:#EBEBEB; --line2:#DDDDDD; --bd:#EBEBEB;
  --live:#F26522; --live-ink:#A8390B; --live-soft:#FEF0E7; --on-live:#FFFFFF; --cta:#C2410C; --on-cta:#FFFFFF;
  --mat:#222222; --mat-soft:#F7F7F7; --on-mat:#FFFFFF;
  --ok:#1E6E58; --ok-soft:#E7F4EF; --hold:#7A5210; --hold-soft:#FFF1C2; --warn:#B7791F; --bad:#C74B43; --bad-soft:#FBEAE8; --blue:#2F6BC7; --blue-soft:#E9F0FB; --yel:#E2A91E;
  --head:#FFFFFF; --on-head:#202124; --dots:transparent;
  --scrim:rgba(0,0,0,.4); --shadow:0 6px 16px rgba(0,0,0,.08); --shadow-sm:0 1px 2px rgba(20,20,22,.06); --shadow-lg:0 8px 28px rgba(20,20,22,.12);
  --r:14px; --r-sm:10px; --r-lg:20px;
  --num:"Noto Sans TC",system-ui,-apple-system,"PingFang TC",sans-serif;
  --stat:"Noto Sans TC",system-ui,sans-serif;
  --body:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141517; --surface:#1C1D20; --sunk:#232428; --ink:#ECEDEE; --ink2:#D4D5D8; --muted:#9A9DA4; --line:#2E3034; --line2:#3A3C41; --bd:#2E3034;
  --live:#F47A3F; --live-ink:#FF9A66; --live-soft:#3A2416; --on-live:#141517; --cta:#F47A3F; --on-cta:#141517;
  --mat:#ECEDEE; --mat-soft:#232428; --on-mat:#141517;
  --ok:#4CB894; --ok-soft:#173027; --hold:#E0B055; --hold-soft:#3D2E00; --warn:#E0B055; --bad:#E57A71; --bad-soft:#3A1C19; --blue:#7EA7EC; --blue-soft:#1A2436; --yel:#E0B055;
  --head:#1C1D20; --on-head:#ECEDEE;
  --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 8px 28px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141517; --surface:#1C1D20; --sunk:#232428; --ink:#ECEDEE; --ink2:#D4D5D8; --muted:#9A9DA4; --line:#2E3034; --line2:#3A3C41; --bd:#2E3034;
  --live:#F47A3F; --live-ink:#FF9A66; --live-soft:#3A2416; --on-live:#141517; --cta:#F47A3F; --on-cta:#141517;
  --mat:#ECEDEE; --mat-soft:#232428; --on-mat:#141517;
  --ok:#4CB894; --ok-soft:#173027; --hold:#E0B055; --hold-soft:#3D2E00; --warn:#E0B055; --bad:#E57A71; --bad-soft:#3A1C19; --blue:#7EA7EC; --blue-soft:#1A2436; --yel:#E0B055;
  --head:#1C1D20; --on-head:#ECEDEE;
  --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 8px 28px rgba(0,0,0,.45); color-scheme:dark}

/* ---------- base ---------- */
html,body{height:100%}
html{overscroll-behavior-y:contain}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.app{max-width:560px;margin:0 auto;min-height:100%}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1{font-size:24px;line-height:1.3;margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:17px;line-height:1.4;margin:0;font-weight:700;text-wrap:balance}
h3{font-size:16px;margin:0;line-height:1.4;font-weight:700}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.num{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}
.stat{font-weight:700;font-variant-numeric:tabular-nums}
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.roll .ghost{position:absolute;left:0;top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kick{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
*:focus-visible{outline:2px solid var(--live);outline-offset:2px;border-radius:6px}

/* ---------- app shell ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:10px;border-bottom:1px solid transparent}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.brand .en{display:none}
.logo{width:32px;height:32px;border-radius:10px;background:var(--live);display:grid;place-items:center;color:#fff}
.icon-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;position:relative;color:inherit}
.icon-btn:hover{background:var(--sunk)}
.dot{position:absolute;top:2px;right:0;min-width:16px;height:16px;border-radius:8px;background:var(--live);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
.mode-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--ink2)}
main{padding-block:4px calc(104px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
main.enter{animation:pagein .2s var(--ease)}
@keyframes pagein{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs .in{max-width:560px;margin:0 auto;display:flex;padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}
.tab{flex:1;padding:8px 2px 10px;min-height:56px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted);position:relative}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--live-ink);font-weight:600}
.tab .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--live);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.game{text-align:left;width:100%;transition:box-shadow .15s,transform .15s}
.game:hover{box-shadow:var(--shadow-lg)}
.game:active{transform:scale(.99)}
.offer{border-color:color-mix(in srgb,var(--live) 45%,var(--line));background:var(--surface)}
.guide{border-style:dashed;box-shadow:none}
.empty{text-align:center;padding:28px 16px;color:var(--muted)}
.cancelled{opacity:.6}
.flash{border-left:4px solid var(--yel)}
.supper{border-style:dashed}
.rescue{border-color:color-mix(in srgb,var(--live) 45%,var(--line))}
.rescue .big{font-size:17px;font-weight:700}
.wx{border-left:4px solid var(--blue)}
.ai{background:var(--surface)}
.ai .pick{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.ai .pick b{font-size:15px}
.ai .why{font-size:13px;color:var(--ink2)}
.ai .src{font-size:12px;color:var(--muted)}
.pcard{border-left:0}

/* ---------- type helpers ---------- */
.facts,.infoline{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);align-items:center}
.infoline svg{color:var(--muted)}
.icw{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.icw svg{flex:none}
.when{display:flex;align-items:baseline;gap:8px}
.when .num{font-size:17px}
.price{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.price small{font-size:12px;font-weight:500;color:var(--muted)}
.left{color:var(--live-ink);font-weight:600}
.fine{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.quote{border-left:3px solid var(--live);padding:6px 12px;background:var(--sunk);border-radius:0 var(--r-sm) var(--r-sm) 0;font-weight:500;font-size:14px}
.demo-note{font-size:12px;color:var(--muted);text-align:center}
.link{color:var(--live-ink);font-weight:600;font-size:14px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
a.link{display:inline-block;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- status system ---------- */
.status{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;line-height:1.6}
.s-ok{background:var(--ok-soft);color:var(--ok)}
.s-need{background:var(--live-soft);color:var(--live-ink)}
.s-hold{background:var(--hold-soft);color:var(--hold)}
.s-full,.s-off{background:var(--sunk);color:var(--muted)}
.s-bad{background:var(--bad-soft);color:var(--bad)}
.s-blue{background:var(--blue-soft);color:var(--blue)}
.tag{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:500;border-radius:999px;padding:1px 9px;background:var(--sunk);color:var(--ink2);margin:0 4px 4px 0;line-height:1.7}
.tag.reg{background:var(--sunk);color:var(--ink);font-weight:600}
.tag.new{background:var(--hold-soft);color:var(--hold)}
.tag svg{color:inherit}
.rchip{display:inline-flex;align-items:center;gap:4px;font-size:13px;background:var(--sunk);padding:3px 10px;border-radius:999px;margin:0 6px 6px 0}
.badge-pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:12px;font-weight:600;background:var(--ink);color:var(--surface);border:1px solid transparent;transition:transform .1s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn.go{background:var(--cta);color:var(--on-cta)}
.btn.go:hover{background:color-mix(in srgb,var(--cta) 88%,#000)}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line2)}
.btn.sec:hover{background:var(--sunk)}
.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn.blue{background:var(--blue);color:#fff}
.btn.sm{min-height:44px;padding:6px 14px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.45;pointer-events:none}

.ibtn{width:44px;height:44px;margin:-8px -6px;display:inline-grid;place-items:center;color:var(--muted);vertical-align:middle;flex:none;border-radius:999px}
.ibtn:hover{color:var(--ink)}
.cta{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom,0px));z-index:22;pointer-events:none}
.cta .in{max-width:560px;margin:0 auto;padding-block:10px;display:flex;gap:8px;pointer-events:auto;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.04);flex-wrap:wrap}
.cta .btn{flex:1;font-size:16px;min-height:48px}
.cta .btn.side{flex:none}
.soul{font-size:13px;color:var(--ink2);padding:8px 12px;background:var(--ok-soft);border-radius:var(--r-sm);line-height:1.5}

/* ---------- chips, filters, tabs ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;white-space:nowrap}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pill .cnt{background:var(--live);color:#fff;border-radius:999px;font-size:11px;padding:0 6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:flex;background:var(--sunk);border-radius:12px;padding:3px}
.seg button{flex:1;min-height:38px;padding:6px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.tgl{border:1px solid var(--line2);border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap;min-height:44px;background:var(--surface)}
.tgl[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.spchips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0 0;border-bottom:1px solid var(--line);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.spchips::-webkit-scrollbar{display:none}
.spchip{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px;min-height:56px;padding:6px 6px 10px;font-size:12px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.spchip svg{width:24px;height:24px}
.spchip[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.dates{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 4px;scrollbar-width:none}
.dates::-webkit-scrollbar{display:none}
.d{scroll-snap-align:start;flex:none;width:52px;min-height:60px;padding:6px 0;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:0}
.d b{font-size:18px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.d span{font-size:11px;color:var(--muted)}
.d i{display:flex;gap:2px;height:5px}
.d i em{width:4px;height:4px;border-radius:50%;background:var(--live)}
.d[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.d[aria-pressed="true"] span{color:var(--surface);opacity:.8}
.d[aria-pressed="true"] i em{background:var(--surface)}

/* ---------- forms ---------- */
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--live) 50%,transparent);border-color:var(--live)}
label.f,.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:12px;background:var(--surface);overflow:hidden}
.stepper button{width:44px;height:44px;font-size:18px}
.stepper output{flex:1;text-align:center;font-weight:700;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.switch{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;width:100%;text-align:left}
.sw{width:44px;height:26px;border-radius:13px;background:var(--line2);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.sw[aria-checked="true"]{background:var(--live)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.pubsw{border:0;padding:4px 0}
details.more>summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;color:var(--ink)}
details.more>summary::before{content:"＋ ";color:var(--muted)}
details.more[open]>summary::before{content:"－ "}

/* ---------- lists & kv ---------- */
.list{display:flex;flex-direction:column}
.ri{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ri:last-child{border-bottom:0}
.ri .n{width:22px;text-align:right;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ri .nm{flex:1;min-width:110px}
.kv{display:grid;grid-template-columns:64px 1fr;gap:10px;font-size:14px}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;min-width:0}
.kv2{display:grid;grid-template-columns:22px 1fr;gap:14px 12px;align-items:start;font-size:15px}
.kv2>svg{color:var(--ink2);margin-top:2px}
.kv2 .sub{font-size:13px;color:var(--muted)}
.feed .ri{font-size:13px}
.legend{display:flex;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- capacity / roster ---------- */
.meter{height:6px;border-radius:3px;background:var(--sunk);position:relative;overflow:hidden}
.meter b{position:absolute;inset:0 auto 0 0;background:var(--ok);border-radius:3px;transition:width .3s var(--ease)}
.meter s{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.35}
.avs{display:flex}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--sunk);color:var(--ink);border:2px solid var(--surface);flex:none;overflow:hidden}
.avs .av+.av{margin-left:-8px}
.av.lg{width:44px;height:44px}
.av.xs{width:20px;height:20px;border-width:1px}.av.sm{width:28px;height:28px}.av.xl{width:76px;height:76px;border-width:2px}.av.xxl{width:116px;height:116px}
h1:focus,h2:focus{outline:none}
.flyav{position:fixed;z-index:65;pointer-events:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;min-height:48px;font-size:14px;background:var(--surface);text-align:left;min-width:0}
.tile .n{font-size:12px;font-weight:600;color:var(--muted);min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.tile .nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.tile .nm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .tl .tag{font-size:11px;padding:0 6px;margin:0}
.tile.me{border-color:var(--live);background:var(--live-soft)}
.tile.empty{border:1px dashed var(--line2);color:var(--muted);font-weight:500}
.tile.empty.next{border-style:solid;border-color:var(--live);color:var(--live-ink);font-weight:600}
.tile.empty[disabled]{cursor:default}
.tile.hold{background:var(--hold-soft);color:var(--hold);border-color:transparent;font-size:13px}
.tiles>div{min-width:0}
.tiles>div>.tile{width:100%;height:100%;box-sizing:border-box}
.tile .tag{margin:0;flex:none}
.tile.pop{animation:fillpop .3s var(--ease)}
@keyframes fillpop{0%{transform:scale(.94)}100%{transform:none}}
.cdots{display:inline-flex;gap:6px}
.cdots span{display:inline-grid;grid-template-columns:repeat(2,7px);gap:2px}
.cdots i{width:7px;height:7px;border-radius:2px;background:var(--ok)}
.cdots i.e{background:var(--line)}
.cdots i.h{background:var(--yel)}
.steps{display:flex;align-items:flex-start}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;font-size:12px;color:var(--muted);text-align:center;position:relative}
.step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);background:var(--surface);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;z-index:1}
.step.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.step.cur i{border-color:var(--hold);color:var(--hold)}
.step.bad i{background:var(--bad);border-color:var(--bad);color:#fff}
.step.done,.step.cur,.step.bad{color:var(--ink)}
.step+.step::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:var(--line)}
.step.done+.step::before{background:var(--ok)}
.steps.mini .step{font-size:11.5px}
.lvbar{display:inline-flex;gap:2px;vertical-align:middle}
.lvbar i{width:6px;height:10px;border-radius:2px;background:var(--line);display:block}
.lvbar i.on{background:var(--ink2)}

/* ---------- feedback ---------- */
.toast{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--surface);border-radius:12px;padding:12px 16px;font-size:14px;display:flex;gap:14px;align-items:center;width:max-content;max-width:min(92vw,480px);box-shadow:var(--shadow-lg);animation:toast .2s var(--ease)}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}
.toast button{color:var(--live);font-weight:600}
.cbar{display:flex;gap:8px;align-items:flex-start;background:var(--hold-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:14px;color:var(--ink)}
.cbar.block{background:var(--bad-soft)}
.cbar b{font-weight:600}
.loadbar{height:4px;border-radius:2px;background:var(--sunk);overflow:hidden;position:relative}
.loadbar::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:var(--live);border-radius:2px;animation:lb 1.1s ease-in-out infinite}
@keyframes lb{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.ticker{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:13px}
.ticker .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ticker .demo{margin-left:auto;font-size:11px;color:var(--muted)}
.ptr{height:0;overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:12px}
.ptr.settle{transition:height .25s var(--ease)}
.enter-k{animation:kin .25s var(--ease)}
@keyframes kin{from{opacity:0;transform:translateY(6px)}}
.plusone{position:fixed;pointer-events:none;font-weight:700;color:var(--live-ink);font-size:20px;z-index:66}
.speed{display:none}
/* group-formed moment: calm card, not a comic panel */
.kcard{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:80;pointer-events:none;background:var(--surface);color:var(--ink);padding:18px 28px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);text-align:center;min-width:220px}
.kcard b{display:block;font-size:20px;font-weight:700}
.kcard{border-bottom:4px solid var(--live);animation:kpop .2s var(--ease)}
.kcard b{font-size:24px;font-weight:800}
.kcard b::before{content:"✓";display:grid;place-items:center;width:44px;height:44px;margin:0 auto 8px;border-radius:50%;background:var(--live);color:#fff;font-size:22px}
@keyframes kpop{from{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1)}}
.kcard span{display:block;color:var(--muted);font-size:14px;margin-top:2px}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;animation:fade .18s}
.scrim.out{opacity:0;transition:opacity .16s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:560px;margin:0 auto;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:88vh;overflow-y:auto;padding-block:4px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:up .26s var(--ease);box-shadow:var(--shadow-lg);box-sizing:border-box}
.sheet.out{transform:translateY(100%)!important;transition:transform .16s ease-in!important}
@keyframes up{from{transform:translateY(100%)}}
.grab{align-self:stretch;height:24px;display:grid;place-items:center;touch-action:none;cursor:grab}
.grab::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--line2)}

/* ---------- waitlist / check-in ---------- */
.ringwrap{position:relative;width:54px;height:54px;flex:none}
.ringwrap svg{transform:rotate(-90deg)}
.ringwrap b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.slide{position:relative;height:52px;border-radius:26px;background:var(--sunk);overflow:hidden;user-select:none;touch-action:none;width:100%}
.slide .knob{position:absolute;top:4px;left:4px;width:44px;height:44px;border-radius:50%;background:var(--live);color:#fff;display:grid;place-items:center;font-weight:600}
.slide .txt{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink2);font-weight:600;font-size:14px}
.slide.done{background:var(--ok-soft)} .slide.done .txt{color:var(--ok)}

/* ---------- messages (LINE-familiar) ---------- */
.chatwrap{display:flex;flex-direction:column;gap:12px}
.pin{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13px}
.msg{max-width:80%;align-self:flex-start;display:flex;flex-direction:column;gap:3px}
.msg.me{align-self:flex-end;align-items:flex-end}
.bub{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:9px 13px;font-size:15px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.msg.me .bub{background:var(--live);color:#fff;border-color:var(--live);border-radius:18px 18px 6px 18px}
.mtime{font-size:11px;color:var(--muted)}
.sys{align-self:center;font-size:12px;color:var(--muted);background:var(--sunk);padding:3px 12px;border-radius:999px;text-align:center}
.reacts{display:flex;gap:4px;flex-wrap:wrap}
.react{font-size:12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:1px 8px;min-height:26px}
.react[aria-pressed="true"]{border-color:var(--live);background:var(--live-soft)}
.rbar{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 8px;box-shadow:var(--shadow-lg)}
.rbar button{font-size:20px;padding:0 4px}
.composer{position:fixed;left:0;right:0;bottom:calc(57px + env(safe-area-inset-bottom,0px));z-index:22;background:var(--surface);border-top:1px solid var(--line)}
.composer form{max-width:560px;margin:0 auto;display:flex;gap:8px;padding-block:8px}
.composer input{border-radius:999px}
.typing{align-self:flex-start;font-size:12px;color:var(--muted)}
.chatrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.chatrow .cmain{flex:1;min-width:0}
.chatrow .cprev{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow .cmeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--muted)}
.unread{min-width:20px;height:20px;border-radius:10px;background:var(--live);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.chatic{width:48px;height:48px;border-radius:14px;background:var(--sunk);display:grid;place-items:center;color:var(--ink2);flex:none}

/* ---------- discovery ---------- */
.hello{display:flex;flex-direction:column;gap:2px}
.hello h1{font-size:26px}
.search{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px 6px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.search input{border:0;padding:0;min-height:44px;background:transparent;outline:none}
.search input:focus{outline:none}
.search .sbtn{width:44px;height:44px;border-radius:50%;background:var(--cta);color:var(--on-cta);display:grid;place-items:center;flex:none}
.sect{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.sect h2{font-size:19px}
.gcard{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}
.thumb{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;color:var(--ink2);background:var(--sunk)}
.thumb svg{width:30px;height:30px}
.gtitle{font-size:16px;font-weight:700;line-height:1.35;margin:0}
.gmeta{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.gfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.glist{display:flex;flex-direction:column;gap:12px}
.nextup{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-align:left;width:100%}
.frow{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.frow::-webkit-scrollbar{display:none}
.frow>.tiny{white-space:nowrap;flex:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:4px 12px 4px 4px;font-size:13px;min-height:44px}
.fchip b{font-weight:600}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.radar{display:flex;align-items:center;gap:8px;border-radius:var(--r-sm);padding:8px 12px;background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:600}

/* ---------- profile ---------- */
.streak{display:flex;align-items:center;gap:12px}
.streak .wk{font-size:30px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pts{display:flex;gap:2px;align-items:baseline}
.pts .dg{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.pts .u{margin-left:4px;font-size:14px;color:var(--muted)}
.ledger .ri{font-size:14px}
.ledger .p{font-weight:600;color:var(--ok);font-variant-numeric:tabular-nums}
.ledger .p.cap{color:var(--muted)}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.statrow>div{background:var(--sunk);border-radius:12px;padding:10px 12px}
.statrow b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.statrow span{font-size:12px;color:var(--muted)}
.spcards{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.spcard{flex:none;width:150px;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface);text-align:left;font-size:13px}
.pent{display:block;width:100%;max-width:260px;height:auto;margin:0 auto;overflow:visible}
.pent .axbtn{cursor:pointer}
.pent .axbtn:focus{outline:none}
.pent .axbtn:focus-visible rect{stroke:var(--live);stroke-width:2}
.pent text{font-family:var(--body);font-weight:600;font-size:12px;fill:var(--ink2)}
.pent .v{font-weight:700;font-size:13px;fill:var(--ink)}
.axrow{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;font-size:13px}
.hist .ri{font-size:14px}

/* ---------- calendar ---------- */
.wk{display:flex;flex-direction:column;gap:6px}
.wrow{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}
.wrow .dl{font-size:11.5px;line-height:1.15;text-align:center;color:var(--muted)}
.wrow .dl b{display:block;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.wrow.today .dl,.wrow.today .dl b{color:var(--live-ink)}
.track{position:relative;height:36px;background:var(--sunk);border-radius:10px;overflow:hidden;background-image:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--line) calc(12.5% - 1px) 12.5%)}
.track.tall{height:44px}
.blk{position:absolute;top:4px;bottom:4px;font-size:10.5px;font-weight:600;padding:0 4px;overflow:hidden;white-space:nowrap;display:flex;align-items:center;min-width:6px;box-sizing:border-box;border-radius:6px}
.blk.me{background:var(--live);color:#fff}
.blk.soft{background:var(--live-soft);color:var(--live-ink);border:1px dashed var(--live)}
.blk.gg{background:var(--blue-soft);border:1px solid var(--blue);top:auto;height:8px;bottom:2px;font-size:0}
.blk.x{outline:2px solid var(--bad);outline-offset:0;z-index:2}
.blk.l0{top:3px;bottom:auto;height:16px;font-size:9.5px}.blk.l1{top:auto;bottom:3px;height:16px;font-size:9.5px}
.track.tall .blk.gg{top:1px;bottom:auto;height:6px}.track.tall .blk.l0{top:9px}
.hours{display:grid;grid-template-columns:44px 1fr;font-size:10px;color:var(--muted);gap:8px}
.hours div:last-child{display:flex;justify-content:space-between}
.gcal{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-weight:600;font-size:13px;color:var(--blue);text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:4px 12px;background:var(--surface)}

/* ---------- reviews ---------- */
.stars{display:inline-flex;gap:1px;color:var(--ink)}
.stars .off{color:#9CA3AF}
.starpick{display:flex;gap:4px}
.starpick button{font-size:30px;line-height:1;color:var(--line2);padding:2px;min-width:40px;min-height:40px}
.starpick button[aria-pressed="true"]{color:var(--ink)}
.dist{display:grid;grid-template-columns:14px 1fr;gap:4px 8px;align-items:center;font-size:11.5px}
.dist i{height:6px;border-radius:3px;background:var(--sunk);position:relative;display:block;overflow:hidden}
.dist i b{position:absolute;inset:0 auto 0 0;background:var(--ink2)}
.rev{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--line)}
.rev:last-child{border-bottom:0}
.reply{margin-left:12px;border-left:2px solid var(--line2);padding-left:10px;font-size:13px}

/* ---------- onboarding ---------- */
.spgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sptile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-weight:600;font-size:14px;position:relative;min-height:88px}
.sptile svg{width:28px;height:28px}
.sptile[aria-pressed="true"]{border:2px solid var(--ink);background:var(--sunk)}
.sptile .ord{position:absolute;top:6px;right:6px;font-size:10px;background:var(--ink);color:var(--surface);padding:0 6px;border-radius:999px;font-weight:600}
.lvpick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lvpick button{min-height:52px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);font-weight:600;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.15;padding:2px}
.lvpick button small{font-size:11px;color:var(--muted);font-weight:500}
.lvpick button.on{background:var(--sunk);border-color:var(--ink2)}
.lvpick button.cur{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lvpick button.cur small{color:var(--surface);opacity:.8}
.tgrid{display:grid;grid-template-columns:24px repeat(7,1fr);gap:4px;font-size:11px;text-align:center;align-items:center;color:var(--muted)}
.tgrid button{height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tgrid button[aria-pressed="true"]{background:var(--live);border-color:var(--live)}
.dots4{display:flex;gap:6px;justify-content:center}
.dots4 i{width:24px;height:4px;border-radius:2px;background:var(--line);display:block}
.dots4 i.on{background:var(--ink)}

/* ---------- organizer / venue ---------- */
.todo{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.todo:last-child{border-bottom:0}
.todo .ti{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--sunk);color:var(--ink2)}
.todo .ti.hot{background:var(--live-soft);color:var(--live-ink)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpis>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.kpis b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.kpis span{font-size:11.5px;color:var(--muted)}
.slot-grid{display:grid;grid-template-columns:52px repeat(3,1fr);gap:6px;font-size:12px;min-width:300px}
.slot-grid div,.slot-grid button{padding:10px 4px;border-radius:10px;text-align:center;min-height:40px}
.slot-grid .h{color:var(--muted);font-weight:600}
.sl-free{background:var(--sunk);color:var(--muted)} .sl-open{background:var(--ok-soft);color:var(--ok);font-weight:600;outline:1px dashed var(--ok);outline-offset:-1px}
.sl-conf{background:var(--ink);color:var(--surface);font-weight:600} .sl-req{background:var(--hold-soft);color:var(--hold);font-weight:600}
.board .court2{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px}
.board .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.board .vs>b{font-size:13px;color:var(--muted)}
.board .side{display:flex;flex-direction:column;gap:6px}
.board .pchip{background:var(--sunk);color:var(--ink);border-radius:10px;padding:8px 10px;font-weight:600;display:flex;justify-content:space-between;gap:6px}
.board .pchip small{font-weight:500;color:var(--muted)}
.board.big .pchip{font-size:22px;padding:14px}
.board.big h2{font-size:22px}
.queue{display:flex;flex-wrap:wrap;gap:6px}
.queue .q{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--surface);font-size:13px}
.lineprev{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lineprev .img{background:var(--sunk);color:var(--ink);padding:14px;display:flex;flex-direction:column;gap:2px}
.lineprev .img b{font-size:16px}
.lineprev .meta{padding:8px 12px;font-size:12px;color:var(--muted)}
.vote{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);min-height:48px}
.vote[aria-pressed="true"]{border-color:var(--live);background:var(--live-soft)}
.vote .bar{height:4px;border-radius:2px;background:var(--live);margin-top:4px}
.imgout{width:100%;border-radius:var(--r)}

/* ---------- shareable recap: the one expressive brand moment ---------- */
.recap{border-radius:var(--r-lg);padding:22px;color:#fff;display:flex;flex-direction:column;gap:10px;min-height:280px;position:relative;overflow:hidden}
.recap .k{font-size:12px;opacity:.85;letter-spacing:.06em}
.recap .bigv{font-size:44px;font-weight:700;line-height:1}
.recap .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.recap .foot{margin-top:auto;font-size:11px;opacity:.8}
.th-ink{background:#202124} .th-orange{background:#F26522} .th-paper{background:#F7F7F7;color:#222222}
.th-orange .av,.th-paper .av{border-color:transparent}
.flip{animation:flipin .45s var(--ease)}
@keyframes flipin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ===== Airbnb 式:白底、區塊用分隔線、照片式團卡、浮起的搜尋 ===== */
main>.card:not(.game):not(.offer):not(.rescue):not(.wx):not(.flash):not(.guide):not(.ai):not(.empty):not(.pcard){border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 0;background:transparent}
main>.card.pcard{background:transparent;border:0;box-shadow:none;padding:8px 0 16px;border-bottom:1px solid var(--line);border-radius:0}
.offer,.rescue,.wx,.flash,.guide,.ai{box-shadow:none}
.search{box-shadow:0 3px 12px rgba(0,0,0,.1);border-color:#DDDDDD}
.gwrap{position:relative}
.gwrap>.game{display:flex;flex-direction:column;gap:8px;padding:0;border:0;box-shadow:none;background:transparent;border-radius:0}
.gwrap>.game:hover{box-shadow:none}
.gimg{position:relative;height:150px;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.gimg svg{width:56px;height:56px;opacity:.9}
.gimg.thumb.c1{background:color-mix(in srgb,var(--live) 20%,var(--surface))}
.gimg.thumb.c2{background:color-mix(in srgb,var(--ok) 18%,var(--surface))}
.gimg.thumb.c3{background:color-mix(in srgb,var(--blue) 18%,var(--surface))}
.gimg.thumb.c4{background:color-mix(in srgb,var(--ink) 9%,var(--surface))}
.gimg .gbadge{position:absolute;top:12px;left:12px;background:#fff;color:#222;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gimg .gwhen{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:#222;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.gimg .avs{position:absolute;right:12px;bottom:10px}
.heart{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;z-index:2;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.heart svg{width:24px;height:24px}
.heart[aria-pressed="true"] svg{fill:var(--cta);stroke:#fff}
.gtext{display:flex;flex-direction:column;gap:1px;font-size:14px}
.gtext .gt{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.gtext .gt b{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtext .gr{font-size:13px;color:var(--ink);white-space:nowrap}
.gtext .gs{color:var(--muted)}
.gtext .gp{margin-top:2px;color:var(--ink)}
.gtext .gp b{font-weight:600}
.dhead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:4px}
.dhead .infoline{justify-content:center}
.ctap{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ctap b{font-size:17px}
.cta .in{border-top:1px solid var(--line);box-shadow:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));align-items:center}
.cta .btn.go.main{flex:none;padding:0 28px;border-radius:12px}
.tab[aria-current="page"]{color:var(--cta)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gimg .gbadge,:root:not([data-theme="light"]) .gimg .gwhen{background:#222;color:#eee}}
:root[data-theme="dark"] .gimg .gbadge,:root[data-theme="dark"] .gimg .gwhen{background:#222;color:#eee}


/* ===== 球場燈地圖(Google 地圖風格)+ 常用篩選列 ===== */
:root{--m-land:#F1F3F4;--m-park:#CEEAD6;--m-water:#AECBFA;--m-road:#FFFFFF;--m-major:#FDE293;--m-edge:#DADCE0;--m-lbl:#5F6368}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--m-land:#242629;--m-park:#1E3A2B;--m-water:#1F3557;--m-road:#3A3D42;--m-major:#5A4A1E;--m-edge:#3A3D42;--m-lbl:#B0B3B8}}
:root[data-theme="dark"]{--m-land:#242629;--m-park:#1E3A2B;--m-water:#1F3557;--m-road:#3A3D42;--m-major:#5A4A1E;--m-edge:#3A3D42;--m-lbl:#B0B3B8}
.nmap{display:flex;flex-direction:column;gap:10px}
.mapbox{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--m-edge);background:var(--m-land)}
.mapbox>svg{display:block;width:100%;height:clamp(240px,46vw,420px)}
.gbtn svg{width:14px;height:14px}
.m-land{fill:var(--m-land)}.m-park{fill:var(--m-park)}
.m-water{fill:none;stroke:var(--m-water);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.m-road{fill:none;stroke:var(--m-road);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.m-major{fill:none;stroke:var(--m-major);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.m-lbl{font-size:11px;fill:var(--m-lbl);font-weight:600;paint-order:stroke;stroke:var(--m-land);stroke-width:3}
.m-lbl.on{fill:var(--cta)}
.lamp:focus-visible path{stroke:var(--ink);stroke-width:2.5}
.gbtn{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.15);min-height:36px}
.mlist{display:grid;gap:2px}
@media (min-width:760px){.mlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}}
.mrow{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);min-height:44px}
.mrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;background:none;border:0;padding:8px 0;color:var(--ink);font:inherit;cursor:pointer;flex-wrap:wrap}
.mrow-main i{width:10px;height:10px;border-radius:50%;flex:none}
.mrow .link{font-size:13px;white-space:nowrap;margin:0;align-self:center;padding:8px 0}
.mrow a.link{display:inline-flex;align-items:center}
.habrow{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.habrow::-webkit-scrollbar{display:none}
.habrow .hl{font-size:13px;color:var(--muted);white-space:nowrap;flex:none}
.habrow .pill{flex:none}
.habrow .pill.hab{border-style:dashed}
.habrow .pill.hab[aria-pressed="true"]{border-style:solid}
.habrow .defbtn{flex:none;font-size:13px;white-space:nowrap}
@media (min-width:1100px){body[data-page="find"] .habrow{justify-content:safe center}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- responsive: tablet & desktop ---------- */
@media (min-width:760px){
  .app,nav.tabs .in,.cta .in,.composer form,.sheet{max-width:720px}
  .glist{display:grid;grid-template-columns:1fr 1fr;gap:14px!important}
  .hello h1{font-size:30px}
}
@media (min-width:1100px){
  .app,nav.tabs .in,.cta .in,.composer form{max-width:1040px}
  nav.tabs{top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line)}
  nav.tabs .in{justify-content:flex-end;gap:4px;padding-left:200px}
  .tab{flex:none;flex-direction:row;gap:8px;min-height:56px;padding:0 16px;font-size:14px}
  .tab .badge{top:10px;left:auto;right:2px}
  .app{padding-top:57px}
  .top{top:57px}
  .cta,.composer{bottom:0}
  main{padding-bottom:110px}
  .glist{grid-template-columns:1fr 1fr 1fr}
  .sheet{max-width:560px;border-radius:var(--r-lg);bottom:auto;top:50%;transform:translateY(-50%);max-height:84vh}
  @keyframes up{from{opacity:0;transform:translateY(-46%)}}
}

/* ===== 網頁版(≥1100px):像 Airbnb 網站 — 一條頂列、寬格狀團卡、詳情頁右側固定報名卡、頁尾 ===== */
.wfoot,.wlogo{display:none}
@media (min-width:1100px){
  .top:has(.brand){position:fixed;top:0!important;left:max(24px,calc(50% - 620px));z-index:31;height:57px;padding:0!important;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;gap:16px;justify-content:flex-start;width:auto}
  .top:has(.brand) .brand{display:none}
  .wlogo{display:flex;align-items:center;gap:10px;margin-right:auto;background:none;border:0;font:inherit;font-size:20px;font-weight:800;color:var(--live);cursor:pointer;min-height:44px}
  .wlogo .logo{width:34px;height:34px}
  nav.tabs .in{max-width:none!important;padding-left:max(16px,calc(50% - 604px))!important;padding-right:calc(max(16px,calc(50% - 604px)) + 96px)!important}
  .top:has(.brand)>.row:last-child{position:fixed;top:6px;right:calc(max(16px,calc(50% - 604px)) - 10px);gap:2px}
  nav.tabs .in{max-width:1240px;padding-left:220px;padding-right:110px}
  .app{max-width:1240px;padding-inline:0}
  body[data-page="find"] .app,body[data-page="me"] .app,body[data-page="mine"] .app,body[data-page="chat"] .app,body[data-page="odash"] .app{padding-top:57px}
  .top:not(:has(.brand)){max-width:1240px;margin:0 auto;padding-inline:16px!important}
  .top:not(:has(.brand))>.icon-btn:first-child{margin-left:-12px}.top:not(:has(.brand))>.icon-btn:last-child{margin-right:-12px}
  body:not(:has(.top .brand)) nav.tabs .in{padding-right:max(16px,calc(50% - 604px))!important}
  body:not([data-page="find"]):not([data-page="detail"]) main{max-width:760px;margin:0 auto;width:100%}
  body[data-page="find"] .hello{text-align:center;padding-top:24px}
  body[data-page="find"] .hello h1{font-size:34px}
  body[data-page="find"] .search{max-width:760px;width:100%;margin:0 auto;min-height:64px;border-radius:999px}
  body[data-page="find"] .hello{padding-top:40px;text-align:left!important}
  body[data-page="find"] main>*{box-sizing:border-box}
  body[data-page="find"] .spchips{justify-content:flex-start}
  body[data-page="find"] .toolbar,body[data-page="find"] .frow,body[data-page="find"] .friends,body[data-page="find"] .dates{justify-content:flex-start;margin-inline:0}
  body[data-page="find"] main>*{margin-inline:0}
  body[data-page="find"] main>.search{margin-inline:0}
  .glist{grid-template-columns:repeat(3,1fr);gap:28px 20px!important}
  .gimg{height:210px}
  body[data-page="find"] main>.card:not(.game),body[data-page="find"] .nextup,body[data-page="find"] .guide,body[data-page="find"] .ai{width:100%;max-width:none}
  body[data-page="find"] main>.pill{align-self:flex-start!important}
  body[data-page="detail"] .app{max-width:1120px}
  body[data-page="detail"] main{padding-right:420px}
  body[data-page="detail"] main>.gimg{height:380px!important}
  body[data-page="detail"] .dhead h1{font-size:32px}
  body[data-page="detail"] .cta{left:calc(50% + 160px);right:auto;width:380px;top:150px;bottom:auto}
  body[data-page="detail"] .cta .in{max-width:none;flex-wrap:wrap;gap:12px;padding:24px!important;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
  body[data-page="detail"] .cta .ctap{flex:1 0 100%}
  body[data-page="detail"] .cta .ctap b{font-size:22px}
  body[data-page="detail"] .cta .btn.go.main{flex:1;min-height:52px}
  .wfoot{display:block;background:var(--sunk);border-top:1px solid var(--line);margin-top:24px;padding:40px max(16px,calc(50% - 604px)) 28px}
  .wfoot .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
  .wfoot h3{font-size:14px;margin:0 0 10px}
  .wfoot .cols button,.wfoot .cols span{display:block;background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--ink2);text-align:left;cursor:pointer}
  .wfoot .cols button:hover{text-decoration:underline}
  .wfoot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;font-size:13px;color:var(--muted)}
  main{padding-bottom:40px}
  body[data-page="find"] main{padding-bottom:24px}
}
@media (min-width:1280px){.glist{grid-template-columns:repeat(4,1fr)}}

/* ===== 團詳情 rA:內容區塊 ===== */
.dsec{display:flex;flex-direction:column;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.dsec h2{margin:0}.dsec .ovw{font-size:18px}
.dleft,.dgrid{display:flex;flex-direction:column;gap:0}
.dleft>.card:not(.wx):not(.flash):not(.offer){border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 0;background:transparent}
.dside{display:none}
.dact{display:inline-flex;gap:12px;margin-left:auto}
.dhero{display:flex;flex-direction:column;gap:8px}
.dhero .gimg{height:190px;width:auto!important}
.dfullsec>.card{border:0;box-shadow:none;padding:0;background:transparent}
.dhs{display:none}
.rep{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.rep>div{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-left:1px solid var(--line);text-align:center}
.rep>div:first-child{border-left:0}.rep b{font-size:16px}.rep span{font-size:12px;color:var(--muted)}
.hls{display:flex;flex-direction:column;gap:18px}
.hl{display:flex;gap:16px;align-items:flex-start}.hl svg{flex:none;margin-top:2px}
.desc{margin:0;line-height:1.7}
.lvdist{display:flex;gap:6px;align-items:flex-end;height:132px;margin-top:4px}
.lvdist>div>i{flex:none}
.lvdist>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;font-size:11px;color:var(--muted)}
.lvdist i{display:block;width:100%;max-width:44px;background:var(--line2);border-radius:6px 6px 0 0;min-height:2px;max-height:80px}
.lvdist .in i{background:var(--ok)}.lvdist b{font-size:12px;color:var(--ink)}.lvdist span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.amens{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.amen{display:flex;gap:12px;align-items:center;font-size:15px}.amen.off{color:var(--muted)}
details.more>summary{list-style:none;align-self:flex-start;display:inline-flex;margin-top:8px}details.more>summary::-webkit-details-marker{display:none}
.prep{display:flex;flex-wrap:wrap;gap:6px}
.sdates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.sdate{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px}
.cost{display:flex;flex-direction:column;gap:8px;font-size:14px}.cost>div{display:flex;justify-content:space-between;gap:12px}
.cost .tot{border-top:1px solid var(--line);padding-top:8px;font-weight:700}.cost>.tiny{display:block}
.know{display:grid;grid-template-columns:1fr;gap:20px}.know h3{margin:0 0 6px;font-size:15px}.know p{margin:4px 0;font-size:14px;color:var(--ink2)}
.nearby{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow-x:auto;padding-bottom:6px}
.hostbig{display:flex;flex-direction:column;gap:16px}
.hcard{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:24px;background:var(--surface)}
.hstat{display:flex;gap:20px;margin-top:8px}.hstat>div{display:flex;flex-direction:column;align-items:center}.hstat b{font-size:18px}.hstat span{font-size:12px;color:var(--muted)}
.hinfo{display:flex;flex-direction:column;gap:10px}.hinfo p{margin:0;line-height:1.7}
.book{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.12);padding:24px;background:var(--surface)}
.book .bp{font-size:22px}
.cells{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.cells>*{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line2);min-width:0}
.cells>*:nth-child(odd):not(.wide){border-right:1px solid var(--line2)}.cells .wide{grid-column:1/-1}.cells>*:last-child{border-bottom:0}
.cells span{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--ink)}.cells b{font-size:14px;font-weight:500}
.cells select{font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);padding:0;min-height:24px}
.bbtns{display:flex;gap:8px}.bbtns .btn{flex:1;min-height:50px}
.bcost summary{cursor:pointer;font-size:14px;text-decoration:underline;margin-bottom:8px}
.blinks{display:flex;justify-content:center;gap:16px;margin-top:14px}.blinks .link{color:var(--muted);font-weight:500}
@media (min-width:760px){.know{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){
  body[data-page="detail"] .app{max-width:1240px}
  body[data-page="detail"] main{padding-right:0}
  body[data-page="detail"] .cta{display:none}
  body[data-page="detail"] .dhead{order:0;align-items:flex-start;text-align:left}
  body[data-page="detail"] .dhead .dtags{justify-content:flex-start!important}
  body[data-page="detail"] .dhead .infoline{justify-content:flex-start;width:100%}
  .dhero{display:grid;grid-template-columns:2fr 1fr;gap:8px;height:340px}
  .dhero .gimg{height:100%!important;border-radius:16px 0 0 16px}
  .dhs{display:grid;grid-template-rows:1fr 1fr;gap:8px}
  .dmini{background:var(--sunk);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 20px}
  .dmini:first-child{border-top-right-radius:16px}.dmini:last-child{border-bottom-right-radius:16px}
  .courts{display:flex;gap:12px}.courts>div{display:flex;flex-direction:column;gap:4px;font-size:12px}
  .courts i{display:grid;grid-template-columns:repeat(2,18px);gap:4px}.courts em{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2)}.courts em.on{background:var(--ok);border-color:var(--ok)}
  .dgrid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0 80px;align-items:start}
  .dside{display:block;position:sticky;top:88px;padding-top:24px}
  .mobonly{display:none!important}
  .hostbig{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:start}
  .nearby{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}
}

/* ===== rB:篩選列、日曆、問答、報名卡補強 ===== */
.fbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.fbar::-webkit-scrollbar{display:none}.fbar .pill{flex:none;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px}
.seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;padding:0 14px;min-height:38px;border-radius:999px;cursor:pointer;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.fsec{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);scroll-margin-top:12px}.fsec h3{margin:0;font-size:16px}
.calwrap{display:flex;flex-direction:column;gap:12px}
.cal{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cwk{display:grid;grid-template-columns:repeat(7,1fr);background:var(--sunk);font-size:12px;color:var(--muted);text-align:center}.cwk span{padding:8px 0}
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ccell{min-height:68px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.ccell:nth-child(7n+1){border-left:0}
.ccell.past{background:var(--sunk);color:var(--muted);cursor:default}
.ccell.today .cd span{background:var(--ink);color:var(--bg);border-radius:999px;padding:0 7px}
.ccell.sel{box-shadow:inset 0 0 0 2px var(--cta)}
.ccell:focus-visible{outline:2px solid var(--cta);outline-offset:-2px}
.cd{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700}
@media (max-width:759px){.cd{flex-wrap:wrap;gap:2px}.cd .dm,.cd .df{width:6px;height:6px}.ccell{padding:4px}}
.dm,.df{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}.dm{background:var(--cta)}.df{background:var(--ok)}
.calleg{display:flex;gap:12px}.calleg span{display:inline-flex;gap:5px;align-items:center}
.cevs{display:none;flex-direction:column;gap:3px}
.cev{display:flex;align-items:center;gap:4px;font:inherit;font-size:12px;border:0;border-radius:6px;padding:3px 6px;background:var(--sunk);color:var(--ink);text-align:left;cursor:pointer;min-width:0;min-height:26px}
.cev b{font-weight:700}.cev span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cev em{font-style:normal;font-size:11px;color:var(--muted);flex:none}
.cev.mine{background:color-mix(in srgb,var(--cta) 16%,var(--surface))}.cev.off{opacity:.6}
.cmore{font-size:11px;color:var(--muted)}
.cdots{font-size:11px;color:var(--muted)}.cdots b{color:var(--ink);font-size:13px}
@media (min-width:760px){.ccell{min-height:128px}.cevs{display:flex}.cdots{display:none}}
.lvfit{display:flex;gap:8px;align-items:center;font-weight:600;margin-top:6px}.lvfit svg{color:var(--ok);flex:none}
.qas{display:flex;flex-direction:column;gap:12px}.qa{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.nwrap{display:flex;flex-direction:column;gap:6px;min-width:0}
button.sdate{font:inherit;text-align:left;background:var(--surface);color:var(--ink);cursor:pointer}button.sdate:hover{border-color:var(--ink)}
button.ctap{border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0}
@media (min-width:1100px){.nearby{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}}

/* ===== rC:場地插畫 ===== */
.gimg .art{position:absolute;inset:10% 8%;width:84%;height:80%}
.gimg .gsp{position:absolute;right:12px;top:12px;display:none}
.dhero .gimg .art{inset:12% 10%;width:80%;height:76%}
.dhero .gimg .gsp{display:inline-flex;left:12px;right:auto;top:auto;bottom:12px;background:rgba(255,255,255,.9);color:#222;font-size:12px;padding:3px 10px;border-radius:999px}
.dhero .gimg{position:relative}

/* ===== ui-mobile 審查修正 ===== */
/* ===== UI 手機修正 (ui-mobile):對齊、底部列、色彩對比 ===== */
/* 1. 瀏覽器預設 body 8px 邊界:內容比頂列/底列/報名列多縮 8px,三條左緣對不齊 */
body{margin:0}
/* 2. 數字徽章 / 未讀:白字在 #F26522 只有 3:1,改用 CTA 深橘(AA) */
.dot,.tab .badge,.unread,.pill .cnt{background:var(--cta);color:var(--on-cta)}
/* 3. 開關「開」不再用橘色(橘只給主要動作);改墨色 */
.sw[aria-checked="true"]{background:var(--mat)}
.sw[aria-checked="true"]::after{background:var(--surface)}
/* 4. 排點板「這局結束」原本行內寫死亮橘(對比 3:1),改 CTA 深橘 */
.board .btn[data-a="roundEnd"]{background:var(--cta)!important;color:var(--on-cta)!important}
/* 5. 「加到 Google 日曆」藍字跳色,改回墨色;保留外框 */
.gcal{color:var(--ink);min-height:44px}
/* 6. 次要「拒絕/請假」灰字看起來像停用,改深灰 */
.btn.ghost{color:var(--ink2);border-color:var(--line2)}
/* 7. 分段切換文字置中(我的團 清單/週曆 原本靠左) */
.seg button{justify-content:center}
/* 8. 場館時段格:「包場/申請中」文字貼頂、「空」置中 → 全部置中;時間標籤也置中 */
.slot-grid>div,.slot-grid>button{display:grid;place-items:center;padding:4px}
/* 9. 首頁地圖:燈號標籤「差 7」被 svg 邊界切掉 */
svg[aria-label="今晚的團地圖"]{overflow:visible;margin-bottom:8px!important}
/* 10. 排點板:名字一字一行 → 名字與「已打 N 局」上下排、不斷字 */
.board .pchip{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0}
.board .pchip>.row{min-width:0;max-width:100%;flex-wrap:nowrap}
.board .pchip>.row>*:not(.av){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .pchip>small{white-space:nowrap;padding-left:37px;font-size:12px;line-height:1.3}
.board .pchip>small .tag{margin:0}
/* 10b. 排點板兩面場的卡片上下黏在一起(0 間距) */
.board{display:flex;flex-direction:column;gap:12px}
.board>.small{margin-top:-8px}
/* 11. 團詳情總覽句:「・」會掛在行尾或行首 → 每段不斷行,行首的「・」藏到左緣外(patch 產生 .ovl/.ovp/.ovs) */
.ovw:has(.ovl){overflow:hidden}
.ovw .ovl{display:flex;flex-wrap:wrap;margin-left:-1.4em}
.ovw .ovp{white-space:nowrap}
.ovw .ovs{display:inline-block;width:1.4em;text-align:center;font-style:normal;font-weight:400;color:var(--muted)}
/* 12. 訊息列表:最後一列底線 + 卡片底線 = 兩條線 */
.chatrow:last-child{border-bottom:0}

@media (max-width:759px){
  /* 13. 全站左右邊界統一 20px(頂列、內容、報名列、輸入列同一條線) */
  .pad{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .cta .in{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  /* 14. 頂列返回鍵/選單鍵:圖示本身對齊內容左右緣(44px 點擊區往外推) */
  .top>.icon-btn:first-child{margin-left:-12px}
  .top>.icon-btn:last-child,.top>.row:last-child>.icon-btn:last-child{margin-right:-12px}
  .top .dot{box-sizing:border-box;top:5px;left:23px;right:auto;min-width:20px;height:20px;border-radius:10px;font-size:11px;line-height:1;padding:0 5px}
  /* 15. 橫向捲動列一律貼齊螢幕邊緣捲動(原本在內容框內被硬切) */
  .spchips,.fbar,.dates,.frow,.spcards,body[data-page="find"] .toolbar{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .fbar>*:last-child,.dates>*:last-child,.frow>*:last-child,.spcards>*:last-child{margin-right:20px}
  /* 16. 找團工具列:清單/日曆/有空位/今晚有空/重新整理 原本折成兩行、重整鍵孤零零在右邊 → 一行橫捲 */
  body[data-page="find"] .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body[data-page="find"] .toolbar::-webkit-scrollbar{display:none}
  body[data-page="find"] .toolbar>*{flex:none}
  /* 17. 拿掉框線後的區塊卡,行內 padding 讓內容縮進 14–16px(地圖、訊息列表)→ 對齊左緣 */
  main>.card:not(.game):not(.offer):not(.rescue):not(.wx):not(.flash):not(.guide):not(.ai):not(.empty):not(.pcard){padding-left:0!important;padding-right:0!important}
  /* 18. 團詳情標題區:置中改靠左,和下面所有區塊同一條左緣;分享/收藏留在右側 */
  .dhead{align-items:flex-start;text-align:left}
  .dhead .dtags{justify-content:flex-start!important}
  .dhead .infoline{justify-content:flex-start;width:100%;row-gap:0}
  .dhead .dact{margin-right:-4px}
  .dsec .ovw{font-size:17px;line-height:1.45}
  /* 19. 「常客多 4 位常來」單格大框,和下方亮點第二列重複 → 只有一格時不顯示 */
  .rep:has(>div:only-child){display:none}
  /* 20. 團詳情、聊天室:報名列/輸入列 疊在 底部分頁列 上面,兩條列吃掉 ~130px → 這兩頁隱藏分頁列(有返回鍵) */
  body[data-page="detail"] nav.tabs,body[data-page="room"] nav.tabs{display:none}
  body[data-page="detail"] .cta,body[data-page="room"] .composer{bottom:0}
  body[data-page="detail"] .cta .in{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  body[data-page="room"] .composer form{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
  body[data-page="detail"] main,body[data-page="room"] main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* 21. 日曆格:點點有時跟日期同排、有時掉下一行 → 固定放日期下方一排 */
  .cd{display:grid;grid-template-columns:repeat(2,6px);gap:3px;justify-content:start;align-items:center}
  .cd>span{grid-column:1/-1;justify-self:start}
  .ccell.today .cd span{padding:0 6px}
  /* 22. 團主名單:收款/點名/✕ 掉到下一行且貼最左(和名字不對齊)→ 與名字同一排靠右 */
  .ri:has(>.row){flex-wrap:nowrap}
  .ri:has(>.row)>.nm{min-width:0;flex:1}
  .ri>.row{flex:none;flex-wrap:nowrap;gap:6px;margin-left:auto}
  .ri>.row>button{min-width:44px;padding-inline:10px}
  /* 23. 團主總覽 4 格數字:字小又擠 */
  .kpis{gap:6px}.kpis>div{padding:10px 8px}
  /* 24. 團詳情日期時間不要從「19:00–」中間斷開 */
  .dsec .ovw+.small{text-wrap:pretty}
}


/* ===== ui-desktop 審查修正 ===== */
/* ===== UI desktop pass (≥1100px):一條內容格線、聊天雙欄、我的頁左右欄、懸停/焦點 ===== */
.chatside,.chatempty{display:none}
@media (min-width:1100px){
  /* 1. One content grid: these pages used a 760px centred column that did not line up with the logo.
        Now they use the same 1208px grid as the logo, find page and footer. */
  /* :root raises specificity above the older body:not(find):not(detail) main{max-width:760px} rule */
  :root body[data-page="mine"] main,:root body[data-page="chat"] main,:root body[data-page="room"] main,:root body[data-page="me"] main,
  :root body[data-page="vreq"] main,:root body[data-page="vslots"] main{max-width:1240px;box-sizing:border-box}
  :root body[data-page="vhow"] main,:root body[data-page="vlist"] main,:root body[data-page="vcontact"] main{max-width:1240px;margin-inline:auto;box-sizing:border-box}
  :is(body[data-page="mine"],body[data-page="chat"],body[data-page="vreq"],body[data-page="vslots"],body[data-page="vhow"],body[data-page="vlist"],body[data-page="vcontact"]) main>h1{font-size:28px}
  body[data-page="vhow"] main>.card.row{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:16px}

  /* 2. Header: hover pill on tabs (Airbnb style), pointer, clear focus */
  .tab{min-height:40px;margin-block:8px;border-radius:999px;transition:background .15s,color .15s}
  .tab:hover{background:var(--sunk);color:var(--ink)}
  .tab .badge{top:0}
  .wlogo:hover{opacity:.85}
  .icon-btn,.tab,.wlogo,[data-go],[data-a]{cursor:pointer}
  *:focus-visible{outline-offset:3px}

  /* 3. Hover states that were missing on desktop */
  .pill:hover,.tgl:hover{border-color:var(--ink)}
  .ccell:not(.past):hover{background:var(--sunk)}
  .cev:hover{filter:brightness(.96)}
  .nextup:hover{box-shadow:var(--shadow-lg)}
  .chatrow{border-radius:12px;padding-inline:12px;margin-inline:-12px;width:calc(100% + 24px);transition:background .15s}
  .chatrow:hover,.chatrow[aria-current="true"]{background:var(--sunk)}

  /* 4. 我的團 (list): two columns of cards instead of one long phone column */
  body[data-page="mine"] main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;align-items:start}
  body[data-page="mine"] main>*{grid-column:1/-1;margin:0}
  body[data-page="mine"] main>.card{grid-column:auto;border:1px solid var(--line)!important;border-radius:16px!important;padding:20px!important;box-shadow:none;background:var(--surface)!important}
  body[data-page="mine"] main>.card:hover{box-shadow:var(--shadow-lg)}
  body[data-page="mine"] main>.seg{justify-self:start;width:auto}
  body[data-page="mine"] main:has(.seg [data-v="week"][aria-pressed="true"]){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  body[data-page="mine"] main>.seg button{flex:none;padding:0 22px}

  /* 5. 訊息: two panes. List page = list left + "pick a conversation" right; room page = list left + room right */
  body[data-page="chat"] main,body[data-page="room"] main{display:grid;grid-template-columns:360px minmax(0,1fr);gap:0 40px;align-items:start}
  body[data-page="chat"] main{grid-template-rows:auto 1fr}
  body[data-page="chat"] main>*{grid-column:1}
  body[data-page="chat"] main>.chatempty{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:calc(100vh - 160px);border:1px solid var(--line);border-radius:16px;color:var(--muted)}
  body[data-page="chat"] main>.chatempty b{color:var(--ink);font-size:17px}
  body[data-page="chat"] main>h1{margin-bottom:16px}
  body[data-page="chat"] main>.card,.chatside>.card{border:0;box-shadow:none;padding:0!important;background:transparent}
  body[data-page="room"] main>*{grid-column:2;margin-bottom:16px}
  body[data-page="room"] main>.chatside{grid-column:1;grid-row:1/span 40;display:block;position:sticky;top:132px;max-height:calc(100vh - 220px);overflow-y:auto;padding:0 12px 0 12px;border-right:1px solid var(--line);margin:0}
  .chatside .chathead{font-size:28px;font-weight:700;margin:0 0 16px}
  .chatside .chatempty{display:none}
  /* composer sits under the room pane, aligned to it, not across the whole window */
  body[data-page="room"] .composer{left:calc(max(16px,50% - 604px) + 400px);right:max(16px,calc(50% - 604px));border-top:1px solid var(--line);background:var(--surface)}
  body[data-page="room"] .composer form{max-width:none;padding-inline:0}
  body[data-page="room"] .chatwrap .msg{max-width:60%}

  /* 6. 我: profile card on the left (sticky), content on the right — like an Airbnb profile */
  body[data-page="me"] main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0 64px;align-items:start}
  body[data-page="me"] main>*{grid-column:2;margin:0}
  body[data-page="me"] main>.pcard{grid-column:1;grid-row:1/span 40;position:sticky;top:89px;margin-top:20px;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:var(--shadow-lg)!important;padding:28px 24px!important;background:var(--surface)!important;gap:18px}
  body[data-page="me"] main>.pcard>.row:first-child{flex-direction:column;align-items:center;text-align:center}
  body[data-page="me"] main>.pcard>.row:last-child{flex-direction:column;align-items:stretch}
  body[data-page="me"] main>.pcard>.row:last-child .btn{width:100%;min-height:44px}

  /* 7. 場館 預約請求: requests as a two-column card grid with compact actions */
  body[data-page="vreq"] main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;align-items:start}
  body[data-page="vreq"] main>*{grid-column:1/-1;margin:0}
  body[data-page="vreq"] main>.card{grid-column:auto;border:1px solid var(--line)!important;border-radius:16px!important;padding:20px!important;box-shadow:none}

  /* 8. 場館 時段: slot grid left, venue-info form right (sticky) */
  body[data-page="vslots"] main{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 48px;align-items:start}
  body[data-page="vslots"] main>*{grid-column:1;margin-bottom:12px}
  body[data-page="vslots"] main>[data-k="veninfo"]{grid-column:2;grid-row:1/span 6;position:sticky;top:89px;border:1px solid var(--line)!important;border-radius:16px!important;padding:24px!important;box-shadow:var(--shadow-lg)!important;margin-top:20px}

  /* 9. Sheets: centred modal with a fixed footer button that does not let content peek below it */
  .sheet{width:min(640px,calc(100vw - 64px));max-width:640px;max-height:min(86vh,860px);padding-bottom:12px}
  .sheet [style*="position:sticky;bottom:0"]{bottom:12px!important;box-shadow:0 0 0 12px var(--surface)}
  .sheet::-webkit-scrollbar{width:8px}.sheet::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
}

/* ---------- delight: 打光 floodlight pass + 空場 empty-court rally (patch_delight.py) ---------- */
:root{--sweep:rgba(255,255,255,.75)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sweep:rgba(255,255,255,.16)}}
:root[data-theme="dark"]{--sweep:rgba(255,255,255,.16)}
.gimg>span{z-index:1}
.gimg::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 0%,var(--sweep) 50%,transparent 100%);opacity:0;transform:translateX(-170%) skewX(-14deg);will-change:transform}
@keyframes pcSweep{0%{opacity:0;transform:translateX(-170%) skewX(-14deg)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-14deg)}}
@media (hover:hover) and (pointer:fine){
  .gwrap>.game:hover .gimg::after,.gwrap>.game:focus-visible .gimg::after{animation:pcSweep .85s cubic-bezier(.45,0,.25,1) 1 both}
  .gwrap>.game .gimg .art{transition:transform .45s var(--ease)}
  .gwrap>.game:hover .gimg .art,.gwrap>.game:focus-visible .gimg .art{transform:scale(1.035)}
}
.dhero .gimg.pclit::after{animation:pcSweep 1.1s cubic-bezier(.45,0,.25,1) .25s 1 both}
.eart{display:block;margin:2px auto 8px;width:132px;height:80px;overflow:visible}
.eart .ec{fill:none;stroke:var(--line2);stroke-width:1.5}
.eart .en{stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.eart .eb{fill:var(--live)}
.eart .es{fill:var(--ink);opacity:.12}
.eart .ebg,.eart .esg{transform-box:fill-box;transform-origin:50% 50%}
.eart.go .ebg{animation:eBall 1.25s cubic-bezier(.3,.1,.4,1) .15s 1 both}
.eart.go .esg{animation:eShadow 1.25s cubic-bezier(.3,.1,.4,1) .15s 1 both}
@keyframes eBall{0%{transform:translate(-77px,-46px);opacity:0}8%{opacity:1}
  38%{transform:translate(-19px,0)}56%{transform:translate(-11px,-14px)}72%{transform:translate(-5px,0)}84%{transform:translate(-2px,-4px)}100%{transform:none}}
@keyframes eShadow{0%{transform:translate(-77px,0) scale(.4);opacity:0}38%{transform:translate(-19px,0) scale(1);opacity:1}
  56%{transform:translate(-11px,0) scale(.6)}72%{transform:translate(-5px,0) scale(1)}84%{transform:translate(-2px,0) scale(.85)}100%{transform:none;opacity:1}}
/* ===== 團主 oA：總覽三欄、開團精靈、場地四態（patch_org.py） ===== */
.ohead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.odash{display:flex;flex-direction:column;gap:16px}
.ocol{display:contents}
.od-today{order:1;display:flex;flex-direction:column;gap:12px}.od-todo{order:2}.od-nums{order:3}.od-track{order:4}.od-games{order:5;display:flex;flex-direction:column;gap:12px}.od-week{order:6}
.todo.ohide{display:none}
.otall{align-self:flex-start}
.otoday{border-left:4px solid var(--live)}
.otstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.otstats>div{background:var(--sunk);border-radius:10px;padding:8px;display:flex;flex-direction:column;min-width:0}
.otstats b{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.otstats span{font-size:12px;color:var(--muted)}
.ochk{display:flex;flex-wrap:wrap;gap:6px}
.ochip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px 4px 6px;border:1px solid var(--line2);border-radius:999px;font-size:13px;background:var(--surface)}
.ochip[aria-pressed="true"]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);font-weight:600}
.olate{display:flex;flex-direction:column;gap:0;background:var(--sunk);border-radius:12px;padding:4px 12px}
.olate .ri{border-color:var(--line2)}.olate .ri:last-child{border-bottom:0}
.ogrp{display:flex;flex-direction:column}
.ogrp>.kick,details.ogrp>summary{padding:8px 0 2px}
details.ogrp>summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.orow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.orow.cancelled{opacity:.6}
.odate{display:flex;flex-direction:column;align-items:center;background:var(--sunk);border-radius:10px;padding:6px 0;line-height:1.25}
.odate b{font-size:15px}.odate span{font-size:11.5px;color:var(--muted)}
.otitle{font-weight:700;text-align:left;min-height:44px;display:flex;align-items:center;font-size:15px;line-height:1.35}
.ometa{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--ink2);margin-top:2px}
.oacts{display:flex;align-items:center;gap:2px}
.wkgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wkc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:10px;font-size:11.5px;color:var(--muted)}
.wkc b{font-size:15px;color:var(--ink)}.wkc.today{background:var(--sunk)}
.wkc i{display:flex;gap:2px;min-height:8px;flex-wrap:wrap;justify-content:center}
.wkc em,.legend i.dk{width:8px;height:8px;border-radius:50%;display:inline-block}
.d-venue{background:var(--ok)}.d-self{background:var(--blue)}.d-afterfill,.d-requested,.d-proposed,.d-expired{background:var(--hold)}.d-none,.d-flash{background:var(--line2)}
.trk{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--line)}
.trk .row{margin-top:4px}
.onums{grid-template-columns:repeat(3,1fr)}
.ofacts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ofacts>div{background:var(--sunk);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;min-width:0}
.ofacts b{font-size:16px;font-variant-numeric:tabular-nums}.ofacts span{font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.cline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.cbar.okbar{background:var(--ok-soft)}
.csopts{display:flex;flex-direction:column;gap:8px}
.csopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;min-height:44px;background:var(--surface);width:100%}
.csopt b{font-size:15px;color:var(--ink)}.csopt span{font-size:12.5px;color:var(--muted);line-height:1.5}
.csopt[aria-pressed="true"]{border:2px solid var(--ink);padding:11px 13px;background:var(--sunk)}
.cshelp{font-size:13px;color:var(--ink2);background:var(--sunk);border-radius:10px;padding:10px 12px;line-height:1.6}
.note .nfacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nfacts>div{display:flex;flex-direction:column;font-size:13px;min-width:0}.nfacts span{font-size:12px;color:var(--muted)}.nfacts b{font-weight:600}
.scr{background:var(--sunk);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);white-space:pre-wrap}
.pill.okp{border-color:var(--ok);color:var(--ok)}
.wzbar{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.wzbar::-webkit-scrollbar{display:none}
.wzbar li{flex:1 0 auto}
.wzbar button{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 10px 4px 6px;border-radius:999px;font-size:13px;color:var(--muted);white-space:nowrap;width:100%}
.wzbar i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;border:2px solid var(--line2);flex:none}
.wzbar button[aria-current="step"]{color:var(--ink);font-weight:700;background:var(--sunk)}
.wzbar button[aria-current="step"] i{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.wzbar button.done i{border-color:var(--ok);background:var(--ok);color:#fff}
.wzbar button.warn i{border-color:var(--bad);background:var(--bad);color:#fff}
@media (max-width:759px){.wzbar button span{display:none}.wzbar button[aria-current="step"] span{display:inline}}
.wzprog{height:4px;background:var(--sunk);border-radius:2px;overflow:hidden}.wzprog b{display:block;height:100%;background:var(--cta);transition:width .3s var(--ease)}
.wzhead{display:flex;flex-direction:column;gap:10px}
.wz{display:flex;flex-direction:column;gap:16px}
.wzform{display:flex;flex-direction:column;gap:14px;min-width:0}
.wzsec{display:flex;flex-direction:column;gap:14px;min-width:0}
.wznav{position:sticky;bottom:calc(57px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;background:var(--bg);padding:10px 0;border-top:1px solid var(--line);z-index:5}
.wznav .btn{flex:1;padding-inline:10px}
.wzside{display:none}
.wzprev{display:flex;flex-direction:column;gap:12px}
.pvcard{pointer-events:none}.pvcard .heart{display:none}
.chk3{display:flex;flex-direction:column}
.chk{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);text-align:left;min-height:44px;width:100%}
.chk .ti{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--ok-soft);color:var(--ok)}
.chk.warn .ti{background:var(--hold-soft);color:var(--hold)}
.rollpre{white-space:pre-wrap;background:var(--sunk);border-radius:10px;padding:12px;font-size:13px;margin:0;font-family:inherit;max-height:240px;overflow:auto;color:var(--ink)}
.oseg{flex-wrap:wrap}.oseg button{min-height:44px}
.bcs{justify-content:center;color:var(--ink2)}
.osteps{display:flex;gap:6px;flex-wrap:wrap}
label.switch input[type=checkbox]{width:22px;height:22px;accent-color:var(--ink);flex:none}
@media (min-width:1100px){
  body[data-page="odash"] main,body[data-page="ocreate"] main{max-width:1240px!important}
  .odash{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:28px;align-items:start}
  .ocol{display:flex;flex-direction:column;gap:16px;min-width:0}
  .oleft{position:sticky;top:76px}
  .todo.ohide{display:flex}.otall{display:none}
  .wz{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
  .wzside{display:block;position:sticky;top:76px}
  .wznav{bottom:0}
}
/* sport chip micro-interaction (patch_sport_anim.py) */
.spchip .spi{position:relative;display:block;width:24px;height:24px;flex:none;pointer-events:none}
.spchip .spi svg{position:absolute;inset:0;width:24px;height:24px}
.spchip .spl{transition:opacity .16s ease}
.spchip .spa{overflow:visible;opacity:0;transition:opacity .16s ease}
.spchip.sp-art:focus-visible .spa,.spchip.sp-art.play .spa,.spchip.sp-art[aria-pressed="true"] .spa{opacity:1}
.spchip.sp-art:focus-visible .spl,.spchip.sp-art.play .spl,.spchip.sp-art[aria-pressed="true"] .spl{opacity:0}
.spa .m{transform-box:view-box;transform-origin:var(--o,12px 12px)}
.spchip.sp-art:focus-visible .spa .m,.spchip.sp-art.play .spa .m{animation:var(--k) var(--d,820ms) cubic-bezier(.3,.7,.3,1) var(--dl,0ms) 1 both}
.spchip:not(.sp-art)>svg{transition:transform .18s ease,color .18s ease}
@media (hover:hover){
.spchip.sp-art:hover .spa{opacity:1}.spchip.sp-art:hover .spl{opacity:0}
.spchip.sp-art:hover .spa .m{animation:var(--k) var(--d,820ms) cubic-bezier(.3,.7,.3,1) var(--dl,0ms) 1 both}
.spchip:hover{color:var(--ink)}.spchip:not(.sp-art):hover>svg{transform:translateY(-1.5px)}
}
@media (prefers-reduced-motion: reduce){.spa .m{animation:none!important}.spchip .spa,.spchip .spl,.spchip>svg{transition:none!important;transform:none!important}}
@keyframes sa-bdR{0%{transform:rotate(-30deg)}30%{transform:rotate(-44deg)}52%{transform:rotate(20deg)}72%{transform:rotate(7deg)}100%{transform:none}}
@keyframes sa-bdS{0%,40%{transform:translate(-7px,5px) rotate(-30deg) scale(.85)}52%{transform:translate(-5px,3px) rotate(-10deg)}76%{transform:translate(1.6px,-2.6px) rotate(8deg)}88%{transform:translate(.4px,-.6px)}100%{transform:none}}
@keyframes sa-bdT{0%,48%{opacity:0;transform:none}62%{opacity:.95;transform:translate(2px,-1.6px)}100%{opacity:0;transform:translate(4px,-3.4px)}}
@keyframes sa-vbB{0%{transform:translate(4px,-7px) rotate(-140deg) scale(.82)}40%{transform:translate(0,1.6px) rotate(0) scale(1.1,.86)}55%{transform:translate(0,-1.6px) rotate(30deg) scale(.96,1.04)}76%{transform:translate(0,.3px) rotate(8deg)}100%{transform:none}}
@keyframes sa-vbX{0%,36%{opacity:0;transform:scale(.6)}46%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.35)}}
@keyframes sa-vbS{0%{opacity:0}12%{opacity:1}38%,100%{opacity:0;transform:translate(-2px,3px)}}
@keyframes sa-bkB{0%{transform:translateY(-3px)}36%{transform:translateY(4px) scale(1,1)}44%{transform:translateY(4px) scale(1.15,.82)}58%{transform:translateY(-2px) scale(.9,1.12)}76%{transform:translateY(-3px) scale(1)}100%{transform:none}}
@keyframes sa-bkS{0%{transform:scale(.7);opacity:.6}44%{transform:scale(1.15);opacity:1}76%{transform:scale(.75)}100%{transform:none;opacity:1}}
@keyframes sa-tnR{0%{transform:translateX(-2px) rotate(-24deg)}38%{transform:translateX(1.4px) rotate(9deg)}58%{transform:rotate(5deg)}100%{transform:none}}
@keyframes sa-tnB{0%,28%{transform:translate(-5px,1px)}38%{transform:translate(-4.4px,1px) scale(.78,1.1)}58%{transform:translate(3px,-3px) rotate(140deg) scale(1.04,.96)}78%{transform:translate(.8px,-.8px) rotate(250deg)}100%{transform:rotate(360deg)}}
@keyframes sa-tnT{0%,40%{opacity:0;transform:none}55%{opacity:1}85%,100%{opacity:0;transform:translateX(-2px)}}
@keyframes sa-pkP{0%{transform:none}28%{transform:rotate(-12deg)}44%{transform:rotate(10deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes sa-pkB{0%{transform:translate(-6.5px,5px)}38%{transform:translate(-6.5px,5px)}44%{transform:translate(-6.5px,5.6px) scale(1.16,.84)}62%{transform:translate(-1px,-2.6px) scale(.92,1.08)}82%{transform:translate(.2px,.5px)}100%{transform:none}}
@keyframes sa-pkX{0%,40%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}75%,100%{opacity:0;transform:scale(1.3)}}
@keyframes sa-ttP{0%{transform:rotate(-10deg)}36%{transform:rotate(-14deg)}46%{transform:rotate(8deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes sa-ttB{0%{transform:translate(3.5px,-4px)}40%{transform:translate(-4.8px,3px)}46%{transform:translate(-4.4px,3px) scale(.78,1.12)}72%{transform:translate(1.4px,-1.6px)}100%{transform:none}}
@keyframes sa-ttX{0%,40%{opacity:0;transform:translate(-4px,2px) scale(.6)}48%{opacity:1;transform:translate(-4px,2px) scale(1)}70%,100%{opacity:0;transform:translate(-4px,2px) scale(1.3)}}
@keyframes sa-scB{0%{transform:translateX(-7px) rotate(-240deg)}62%{transform:translateX(1.4px) rotate(18deg)}82%{transform:translateX(-.4px) rotate(-4deg)}100%{transform:none}}
@keyframes sa-scS{0%{opacity:0;transform:none}20%{opacity:1}60%,100%{opacity:0;transform:translateX(-1.5px)}}
@keyframes sa-rnL1{0%,50%,100%{transform:none}25%,75%{transform:rotate(-58deg)}}
@keyframes sa-rnL2{0%,50%,100%{transform:none}25%,75%{transform:rotate(62deg)}}
@keyframes sa-rnA1{0%,50%,100%{transform:none}25%,75%{transform:rotate(80deg)}}
@keyframes sa-rnA2{0%,50%,100%{transform:none}25%,75%{transform:rotate(-70deg)}}
@keyframes sa-rnY{0%,25%,50%,75%,100%{transform:none}12%,37%,62%,87%{transform:translateY(-1px)}}
@keyframes sa-rnS{0%{opacity:0;transform:none}20%,70%{opacity:1}100%{opacity:0;transform:translateX(-2px)}}
@keyframes sa-hkU{0%{opacity:0;transform:translateY(4px)}60%,100%{opacity:1;transform:none}}
@keyframes sa-hkP{0%{transform:scaleY(0)}30%{transform:scaleY(1.06)}38%,100%{transform:none}}
@keyframes sa-hkF{0%,24%{transform:scale(0,1)}40%{transform:scale(1.08,1)}54%{transform:scaleX(.86) skewY(9deg)}70%{transform:skewY(-7deg)}86%{transform:skewY(3deg)}100%{transform:none}}
@keyframes sa-fdD{0%{transform:translate(-9px,5px) rotate(-20deg) scale(.6)}62%{transform:translate(1.6px,-1.6px) rotate(6deg) scale(1.04)}82%{transform:translate(0,.5px) rotate(-2deg)}100%{transform:none}}
@keyframes sa-fdR{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-17}}
@keyframes sa-fdT{0%{opacity:0;transform:translate(-2px,1px)}25%{opacity:1}70%,100%{opacity:0;transform:translate(2px,-1px)}}
@keyframes sa-clH{0%{transform:none}45%{transform:scale(1.55)}100%{transform:none}}
@keyframes sa-byW{0%{transform:none}100%{transform:rotate(540deg)}}
@keyframes sa-byB{0%{transform:translateX(-3.5px)}70%{transform:translateX(.8px)}100%{transform:none}}
@keyframes sa-bySp{0%{opacity:0;transform:none}20%{opacity:1}70%,100%{opacity:0;transform:translateX(-1.5px)}}
@keyframes sa-sbT{0%,32%{transform:rotate(-72deg)}52%{transform:rotate(16deg)}74%{transform:rotate(5deg)}100%{transform:none}}
@keyframes sa-sbB{0%{transform:translate(6px,5px) scale(.8)}48%{transform:translate(-4.2px,2.6px)}52%{transform:translate(-4px,2.6px) scale(.84,1.1)}76%{transform:translate(1.6px,-2.2px) rotate(220deg)}100%{transform:rotate(360deg)}}
@keyframes sa-sbX{0%,46%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1)}76%,100%{opacity:0;transform:scale(1.3)}}
@keyframes sa-swA{0%{transform:rotate(-150deg)}30%{transform:rotate(-95deg)}62%{transform:rotate(14deg)}80%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes sa-swW{0%{transform:translateX(1.5px)}50%{transform:translateX(-1.5px)}100%{transform:none}}
@keyframes sa-swW2{0%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}100%{transform:none}}
@keyframes sa-swX{0%,52%{opacity:0;transform:none}64%{opacity:1;transform:translateY(-1.5px)}100%{opacity:0;transform:translateY(-3px)}}
@keyframes sa-sqR{0%{transform:rotate(-34deg)}30%{transform:rotate(12deg)}55%{transform:rotate(14deg)}100%{transform:none}}
@keyframes sa-sqB{0%,26%{transform:translate(-7px,-2px)}52%{transform:translate(2.4px,0)}56%{transform:translate(2.5px,0) scale(.72,1.18)}76%{transform:translate(-1.4px,1px)}100%{transform:none}}
@keyframes sa-sqX{0%,50%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.3)}}
@keyframes sa-ygL{0%{transform:rotate(-155deg)}68%{transform:rotate(6deg)}100%{transform:none}}
@keyframes sa-ygR{0%{transform:rotate(155deg)}68%{transform:rotate(-6deg)}100%{transform:none}}
@keyframes sa-ygK{0%,15%{transform:rotate(-40deg)}65%{transform:rotate(4deg)}100%{transform:none}}
@keyframes sa-ygB{0%{transform:translateY(.6px)}60%{transform:translateY(-.6px)}100%{transform:none}}
@keyframes sa-ygG{0%,55%{opacity:0;transform:scale(.7)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
/* ---------- delight 2 (patch_delight2.py): lights-on, offer urgency, ptr shuttle, streak ignite, recap foil, selection travel ---------- */
/* 3 lights-on */
.lamps{position:absolute;inset:0;z-index:2;pointer-events:none}
.lamps .wash{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,244,214,.55),rgba(255,244,214,0) 70%);opacity:0}
.lamps i{position:absolute;width:44%;height:70%;opacity:0;background:radial-gradient(ellipse 60% 50% at 0 0,rgba(255,206,120,.75),rgba(255,214,140,.28) 38%,rgba(255,214,140,0) 72%)}
.lamps i::before{content:"";position:absolute;left:6px;top:6px;width:9px;height:9px;border-radius:50%;background:#FFE3A3;box-shadow:0 0 0 3px rgba(242,101,34,.22),0 0 10px 2px rgba(255,200,110,.8)}
.lamps i:nth-child(2){left:0;top:0}
.lamps i:nth-child(3){right:0;top:0;transform:scaleX(-1)}
.lamps i:nth-child(4){left:0;bottom:0;transform:scaleY(-1)}
.lamps i:nth-child(5){right:0;bottom:0;transform:scale(-1,-1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lamps .wash{background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,236,190,.28),rgba(255,236,190,0) 70%)} :root:not([data-theme="light"]) .lamps i{background:radial-gradient(ellipse 60% 50% at 0 0,rgba(255,246,220,.95),rgba(255,246,220,.35) 35%,rgba(255,246,220,0) 72%)} :root:not([data-theme="light"]) .lamps i::before{background:#FFF8E6;box-shadow:0 0 0 3px rgba(255,248,230,.35)}}
:root[data-theme="dark"] .lamps .wash{background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,236,190,.28),rgba(255,236,190,0) 70%)} :root[data-theme="dark"] .lamps i{background:radial-gradient(ellipse 60% 50% at 0 0,rgba(255,246,220,.95),rgba(255,246,220,.35) 35%,rgba(255,246,220,0) 72%)} :root[data-theme="dark"] .lamps i::before{background:#FFF8E6;box-shadow:0 0 0 3px rgba(255,248,230,.35)}
/* 4 offer urgency */
.ringwrap .rhot{opacity:0}
.ringwrap.urg .rhot{animation:rHot .6s ease-out var(--rd,0ms) 1 both}
.ringwrap.hot .rhot{opacity:1}
.ringwrap::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 45%,transparent);opacity:0;pointer-events:none}
.ringwrap.urg::after{animation:rHalo 2s cubic-bezier(.2,.8,.2,1) var(--rd,0ms) infinite}
@keyframes rHot{from{opacity:0}to{opacity:1}}
@keyframes rHalo{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.28)}}
/* 5 pull-to-refresh shuttle */
.ptr{grid-auto-flow:column;justify-content:center;gap:6px}
.ptr .ptrs{display:inline-grid;color:var(--live-ink);transform:rotate(180deg);will-change:transform}
/* 6 streak ignite (driven by WAAPI in streakIgnite) */
.streak .sflame{transform-origin:50% 92%}
/* 7 recap foil + tilt */
.recap.foil::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38) 50%,transparent);opacity:0;transform:translateX(-170%) skewX(-14deg);animation:pcSweep 1.2s cubic-bezier(.45,0,.25,1) .4s 1 both}
.recap.foil::before{content:"";position:absolute;left:-30%;top:-30%;width:60%;height:60%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 65%);opacity:0;transform:translate(var(--gx,80%),var(--gy,80%));transition:opacity .25s}
.th-paper.foil::before{background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 65%)}
@media (hover:hover) and (pointer:fine){.recap.foil{transition:transform .35s cubic-bezier(.2,.8,.2,1)}.recap.foil.tilt{transition:transform .08s linear}.recap.foil.tilt::before{opacity:1}}
/* 8 selection travel */
.seltrav{position:fixed;z-index:30;pointer-events:none;border:2px solid var(--ink);border-radius:15px;box-sizing:border-box}
.seltrav.cal{border-color:var(--cta);border-radius:0}
/* persona fixes: 0 團提示、帶朋友、場館時段 */
.relax{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.relax>.tiny{flex-basis:100%}
.nbsug{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.nbsug b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2sum{box-shadow:none!important;gap:2px}
.slot-grid button.sl-free,.slot-grid button.sl-open{cursor:pointer}
.slot-grid button.sl-free{outline:1px dashed var(--line);outline-offset:-1px}
.slot-grid>div.sl-busy{display:flex;gap:3px;align-items:center;justify-content:center;cursor:not-allowed;opacity:.82;background-image:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,currentColor 16%,transparent) 7px 9px)}
.slot-grid .sl-open small{display:block;font-size:10px;font-weight:500}
.vdays{margin:6px 0 4px}
.lvopt{display:inline-flex;align-items:center;gap:6px}
/* ===== 團主 oB(patch_org2.py) ===== */
.od-track{order:3}.od-nums{order:4}
@media (max-width:1099px){.od-track.oquiet{display:none}}
.tsel{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.tsel select{min-height:44px;width:100%}
.tsel .dur{min-height:44px;display:flex;align-items:center;font-size:13px;color:var(--ink2);font-weight:600;white-space:nowrap}
.csopt:disabled{opacity:.55;cursor:not-allowed}
.dep3{display:flex;flex-direction:column;gap:2px;font-size:13px;background:var(--sunk);border-radius:10px;padding:10px 12px}
/* persona2: 場館時段 */
.slot-grid .sl-req,.vleg .k-req{background:var(--sunk);color:var(--hold);box-shadow:inset 3px 0 0 var(--warn)}
.vbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end}
.vbar .f{min-width:0;flex:1 1 90px}
.vbar .f:first-child{flex-basis:100%}
.vleg{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.vleg span{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 10px;border-radius:999px}
.vleg .k-free{background:var(--sunk);color:var(--muted);outline:1px dashed var(--line);outline-offset:-1px}
.vleg .k-open{background:var(--ok-soft);color:var(--ok);outline:1px dashed var(--ok);outline-offset:-1px}
.vleg .k-conf{background:var(--ink);color:var(--surface)}
/* ===== 團主 oC(patch_org3.py) ===== */
@media (min-width:1100px){.oright>*{order:0!important}}
.oseg button{white-space:nowrap;padding-inline:12px}
@media (min-width:1100px){body[data-page="odash"] main,body[data-page="ocreate"] main,body[data-page="oroster"] main,body[data-page="osettle"] main,body[data-page="board"] main{max-width:1240px!important;box-sizing:border-box;margin-inline:auto!important;width:100%}}
.oflow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;color:var(--ink2);background:var(--sunk);border-radius:10px;padding:10px 12px}
.oflow .icw{white-space:nowrap}.oflow .ar{color:var(--muted)}
.ochips{display:flex;flex-wrap:wrap;gap:6px}.ochips .tag{margin:0}
.board .side.team{display:grid;grid-template-columns:1fr;gap:6px}
.thumb.c1{background:var(--live-soft);color:var(--live-ink)}.thumb.c2{background:var(--ok-soft);color:var(--ok)}.thumb.c3{background:var(--blue-soft);color:var(--blue)}.thumb.c4{background:var(--sunk);color:var(--ink2)}

/* ===== 頭像 v10(測試版):插畫圖 + 背號文字層 ===== */
.av{position:relative;container-type:size;overflow:hidden}
.av .avi{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.av .avn{position:absolute;left:50%;bottom:1%;transform:translateX(-50%) skewX(-6deg);font-family:var(--num);font-weight:900;font-size:19cqw;line-height:1;color:#f5efe3;-webkit-text-stroke:1px #16130f;paint-order:stroke fill;text-shadow:0 1.5px 0 #16130f;pointer-events:none}


/* 頭像 v10c-pre:主運動徽章(只在大頭像) */
.avw{position:relative;display:inline-block;flex:none;line-height:0}
.avb{position:absolute;right:-3px;bottom:-3px;width:36%;height:36%;border-radius:50%;background:#16130f;color:#f26b1d;border:2px solid #f5efe3;display:grid;place-items:center;z-index:2}
.avb svg{width:62%;height:62%}

/* ===== 頭像 v12:捏角改成標準底部抽屜(成熟外框;角色插畫保留) ===== */
.sheet:has(.avx){padding:0;gap:0;max-height:92vh;background:var(--surface,#fff);border:1px solid var(--line,#E8E6E1);border-bottom:0;border-radius:var(--r,14px) var(--r,14px) 0 0}
.avx{display:flex;flex-direction:column;min-height:0;color:var(--ink,#202124);font-family:"Noto Sans TC",system-ui,sans-serif}
.avx-top{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px}
.avx-top h2{margin:0;font-size:18px;font-weight:700;font-style:normal;transform:none;letter-spacing:0}
.avx-x{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;border-radius:50%;color:var(--muted,#6B7280)}
.avx-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:0 16px;padding:3px;background:var(--bg,#FAF9F6);border:1px solid var(--line,#E8E6E1);border-radius:999px}
.avx-tabs button{height:34px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted,#6B7280)}
.avx-tabs button[aria-selected="true"]{background:var(--surface,#fff);color:var(--ink,#202124);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.avx-body{padding:4px 16px 16px;display:flex;flex-direction:column}
.avx-prev{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0 8px}
.avx .av{border:1px solid var(--line,#E8E6E1);background:var(--bg,#FAF9F6)}
.avx-big{width:152px;height:152px}
.avx-mid{width:88px;height:88px;flex:none}
.avx-sec{padding:14px 0;border-bottom:1px solid var(--line,#E8E6E1)}
.avx-h{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink,#202124)}
.avx-note{margin:8px 0 0;font-size:12px;color:var(--muted,#6B7280)}
.avx-sw{display:flex;flex-wrap:wrap;gap:10px}
.avx-sw button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.avx-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--live,#F26522)}
.avx-sw button.soon{opacity:.3;cursor:not-allowed;background-image:linear-gradient(135deg,transparent 46%,rgba(0,0,0,.55) 47% 53%,transparent 54%)}
.avx-chips{display:flex;flex-wrap:wrap;gap:8px}
.avx-chips button{min-height:36px;padding:0 14px;border:1px solid var(--line,#E8E6E1);border-radius:999px;background:var(--surface,#fff);font-size:14px;color:var(--ink,#202124)}
.avx-chips button[aria-pressed="true"]{border-color:var(--live,#F26522);background:rgba(242,101,34,.08);color:var(--live,#F26522);font-weight:600}
.avx-chips button[disabled]{color:var(--muted,#6B7280);opacity:.55;cursor:not-allowed;text-decoration:line-through}
.avx-sec .avx-chips+.avx-note,.avx-thumbs+.avx-chips{margin-top:10px}
.avx-thumbs{display:flex;gap:10px}
.avx-thumbs button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted,#6B7280)}
.avx-thumbs span{width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--line,#E8E6E1);background:var(--bg,#FAF9F6)}
.avx-thumbs .avi{display:block;width:100%;height:100%;object-fit:cover}
.avx-thumbs button[aria-pressed="true"] span{border:2px solid var(--live,#F26522)}
.avx-thumbs button[aria-pressed="true"] small{color:var(--live,#F26522);font-weight:600}
.avx-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avx-two .avx-sec{border-bottom:0}
.avx-stepper{display:flex;align-items:center;height:44px;border:1px solid var(--line,#E8E6E1);border-radius:10px;overflow:hidden;background:var(--surface,#fff)}
.avx-stepper button{width:44px;height:44px;font-size:18px;color:var(--ink,#202124)}
.avx-stepper output{flex:1;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.avx-sel{width:100%;height:44px;border:1px solid var(--line,#E8E6E1);border-radius:10px;background:var(--surface,#fff);font-size:15px;padding:0 10px}
.avx-card{display:flex;gap:14px;align-items:center;margin-top:16px;padding:16px;border:1px solid var(--line,#E8E6E1);border-radius:var(--r,14px);background:var(--surface,#fff)}
.avx-name{font-size:18px;font-weight:700}
.avx-meta{font-size:13px;color:var(--muted,#6B7280);margin-top:2px}
.avx-foot{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface,#fff);border-top:1px solid var(--line,#E8E6E1)}
.avx-btn1,.avx-btn2{flex:1;min-height:48px;border-radius:10px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.avx-btn1{background:var(--live,#F26522);color:#fff}
.avx-btn2{border:1px solid var(--line,#E8E6E1);background:var(--surface,#fff);color:var(--ink,#202124)}
.avx-prev .avx-btn2{flex:none;min-height:40px;padding:0 16px}
.avx button:focus-visible{outline:2px solid var(--live,#F26522);outline-offset:2px}
.avb{background:var(--surface,#fff);color:var(--live,#F26522);border:1px solid var(--line,#E8E6E1);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* 頭像 v12b:主運動徽章放右上,不壓背號 */
.avb{top:-3px;right:-3px;bottom:auto;width:32%;height:32%}

/* ===== a11y 修正 ===== */
/* ==========================================================================
   a11y.css — WCAG 2.2 AA fixes for Orai (append after the main <style>)
   Only contrast, focus, target size, hover/disabled states. No layout or palette
   redesign: page background stays #FFFFFF, primary stays #C2410C (--cta).
   Measured ratios are in a11y-findings.md.
   ========================================================================== */

/* ---- tokens: one control-border token (≥3:1 vs surface), light error ink ---- */
:root{--ctl:#8C8C8C}                                   /* 3.36:1 on #FFF */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ctl:#6B6E75}} /* 3.26:1 on #1C1D20 */
:root[data-theme="dark"]{--ctl:#6B6E75}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bad:#B23A32}} /* 5.1:1 on --bad-soft, 5.9:1 on #FFF */
:root[data-theme="light"]{--bad:#B23A32}

/* ---- 1.4.3 text on orange: white numbers / badges / my chat bubble (3.15 light, 2.73 dark) ----
   --cta/--on-cta are #C2410C/#FFF in light (5.18:1) and #F47A3F/#141517 in dark (6.3:1). */
.dot,.tab .badge,.pill .cnt,.unread{background:var(--cta);color:var(--on-cta)}
.msg.me .bub{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.msg.me .bub a{color:inherit}

/* ---- white glyphs on light-in-dark fills ---- */
.step.done i,.step.bad i{color:var(--on-cta)}          /* dark: 2.44 / 2.86 → ≥6:1; light unchanged (white) */
.btn.blue{color:var(--on-cta)}                          /* dark blue button 2.43 → 7.6:1; light stays white 5.2:1 */

/* ---- toast 「復原」 in dark: orange on light toast was 2.33:1 ---- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast button{color:#A8390B}}
:root[data-theme="dark"] .toast button{color:#A8390B}  /* 5.5:1 on #ECEDEE */

/* ---- 1.4.11 non-text contrast ---- */
input,select,textarea{border-color:var(--ctl)}         /* was #DDDDDD 1.36:1 */
.search input,.cells select{border-color:transparent} /* these sit inside their own bordered wrapper */
.search,.cells{border-color:var(--ctl)}
.sw{background:var(--ctl)}                              /* switch "off" track was 1.36:1 */
.sw[aria-checked="true"]{background:var(--live)}
.stars .off{color:#8A8F98}                              /* empty star 2.54 → 3.24:1 */
::placeholder{color:var(--muted);opacity:1}            /* UA default grey ≈2.3:1 */

/* ---- 2.4.7 / 2.4.11 focus visible and not obscured ---- */
*:focus-visible{outline-color:var(--cta)}               /* --live ring was 2.95:1 on --sunk; --cta 4.9:1 */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.search:focus-within{outline:2px solid var(--cta);outline-offset:2px}  /* search input had outline:none and nothing else */
.cells select:focus-visible{outline-offset:4px}
.pent .axbtn:focus-visible rect{stroke:var(--cta)}
html{scroll-padding-top:72px;scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))} /* fixed tab bar + CTA hid focused items */
@media (min-width:1100px){html{scroll-padding-top:96px;scroll-padding-bottom:24px}}
.sheet{scroll-padding-bottom:76px}                      /* sticky 「顯示 N 團」 button covered focused pills */

/* ---- 2.5.8 target size (AA ≥24; we aim for 44 where it costs no layout) ---- */
button.link,a.link{min-width:44px;min-height:44px}
.cells .wide select{min-height:44px;margin-block:-4px -10px}  /* booking-card selects were 24px tall */
.react{min-height:32px}
.cev{min-height:28px}

/* ---- hover states (dark button, pills, segmented control, switch) ---- */
@media (hover:hover){
  .btn:not(.go):not(.sec):not(.ghost):not(.blue):not(:disabled):hover{background:color-mix(in srgb,var(--ink) 86%,var(--surface))}
  .btn.ghost:not(:disabled):hover{background:var(--sunk);color:var(--ink)}
  .btn.blue:not(:disabled):hover{background:color-mix(in srgb,var(--blue) 88%,#000)}
  .pill:not(:disabled):not([aria-pressed="true"]):hover{border-color:var(--ink);background:var(--sunk)}
  .pill[aria-pressed="true"]:not(:disabled):hover{background:color-mix(in srgb,var(--ink) 86%,var(--surface))}
  .seg button:not([aria-pressed="true"]):not(:disabled):hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .switch:not(:disabled):hover .sw{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
  .sw:not(:disabled):hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
}

/* ---- disabled states (pills, switch, segmented, buttons) ---- */
.pill:disabled,.pill[aria-disabled="true"],
.seg button:disabled,
.switch:disabled,.switch[aria-disabled="true"],.sw:disabled,.sw[aria-disabled="true"],
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.switch:disabled .sw,.switch[aria-disabled="true"] .sw{background:var(--line2)}

/* ---- 1.4.1 calendar dots: shape as well as colour ---- */
.df{border-radius:2px}                                  /* 「適合你的時段」 = square, 「你已報名」 = round */

/* ---- 2.3.3 / reduced motion: also stop smooth scroll ---- */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}


/* ===== Mia 10-25:主畫面置中(不要靠左) ===== */
body[data-page="find"] .hello{text-align:center!important;align-items:center}
body[data-page="find"] main>.search{margin-inline:auto!important;width:100%;max-width:760px;box-sizing:border-box}
@media (min-width:1100px){
  body[data-page="find"] .spchips,body[data-page="find"] .fbar,body[data-page="find"] .dates,body[data-page="find"] .frow,body[data-page="find"] .toolbar{justify-content:safe center!important}
  body[data-page="find"] .toolbar>.icon-btn[data-a="refresh"]{margin-left:0!important}
  body[data-page="find"] .sect{justify-content:center;gap:12px}
  body[data-page="find"] .calwrap>.row.between{justify-content:center;gap:24px}
  body[data-page="find"] .glist{grid-template-columns:repeat(auto-fit,minmax(260px,290px))!important;justify-content:center}
  body[data-page="find"] main>.nextup,body[data-page="find"] main>.card.ai,body[data-page="find"] main>.card[data-k="nightmap"]{max-width:880px!important;margin-inline:auto!important}
}
.fbar .pill.hab{border-style:dashed}
/* ===== principles fix (app-other):P5/P6 找團頁所有區塊同一條邊線、通知 pill 置中 ===== */
.vlgrid{display:grid;gap:12px}
@media (min-width:760px){.vlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  body[data-page="find"] main>.search,body[data-page="find"] main>.nextup,body[data-page="find"] main>.card,body[data-page="find"] main>.guide,body[data-page="find"] main>.calwrap,body[data-page="find"] main>.glist{max-width:none!important;width:100%;margin-inline:0!important}
  body[data-page="find"] .glist{grid-template-columns:repeat(4,minmax(0,1fr))!important;justify-content:stretch}
  body[data-page="find"] main>.pill{align-self:center!important}
  body[data-page="find"] main>.card.ai,body[data-page="find"] main>.card[data-k="nightmap"]{max-width:none!important;margin-inline:0!important}
  :root body[data-page="detail"] main#view{padding-right:16px!important}
  .vlgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px) and (max-width:1279px){body[data-page="find"] .glist{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.wfoot .cols a{display:block;padding:6px 0;font-size:14px;color:var(--ink2);text-decoration:none}.wfoot .cols a:hover{text-decoration:underline}

/* ===== UI round 2 (2026-10-25) ===== */
/* A. 文字連結不用橘色(分享/收藏/清除/看全部…):Airbnb 式墨色底線;橘色只留給主要動作 */
.link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
/* B. 團主今天卡:左側 4px 橘條 → 一般卡片邊框 */
.otoday{border-left:1px solid var(--line)}
/* C. 「我訂到了」是清單裡的次要動作 → 墨色 */
.btn.go[data-a="oBooked"],.btn.go[data-a="oRebooked"]{background:var(--ink);color:var(--surface)}
/* D. 幫我挑團:整條橘色大按鈕和找團主動作搶 → 墨色 */
.btn.go[data-a="aiGo"]{background:var(--ink);color:var(--surface)}
/* E. 遲到/不來列:名字被擠成兩行、「收到」單獨掉到下一行最左 → 名字一行,按鈕一起靠右 */
.olate .ri .nm{flex:1 1 55%;min-width:0}
.olate .ri .tgl:first-of-type{margin-left:auto}
/* F. 加到 Google 日曆:每張卡一顆大外框按鈕 → 文字連結(保留 44px 觸控) */
.gcal{border:0!important;background:none!important;padding:0 2px!important;text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--ink)}
/* G. 球場燈圖例 */
.mlegend{display:inline-flex;gap:12px;font-size:12px;color:var(--muted);align-items:center}
.mlegend span{display:inline-flex;gap:5px;align-items:center}
.mlegend i{width:8px;height:8px;border-radius:50%;display:inline-block}
/* H. 視窗底部固定按鈕:下面的內容會從按鈕四周露出來 → 用底色遮住 */
.sheet [style*="position:sticky;bottom:0"]{bottom:12px;z-index:2;box-shadow:0 0 0 14px var(--surface),0 22px 0 14px var(--surface)!important}
@media (min-width:760px){
  /* I. 精靈步驟條:每格寬度隨字數變 → 六格等寬 */
  .wzbar li{flex:1 1 0;min-width:0}
}
@media (min-width:1100px){
  /* J. 桌機視窗是置中對話框,不該有手機的拖曳把手 */
  .sheet .grab{display:none}
  .sheet{padding-top:20px}
  /* K. 團主頁標題貼著導覽列 → 和找團一樣留白 */
  body[data-page="odash"] main,body[data-page="ocreate"] main,body[data-page="oroster"] main{padding-top:28px}
}