/* ============================================================
   BadmintonPro+ — Design system stylesheet
   Themeable tokens (dark/light) + all component styles
   ============================================================ */

/* ---- Theme tokens ------------------------------------------ */
.cc-app.dark {
  --bg:#050814; --bg2:#0b1528;
  --surface:rgba(18,27,49,0.72); --surface-solid:#0e1832; --surface-2:#091128;
  --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.05);
  --text:#e9eefa; --dim:#9aa6bd; --dimmer:#647089;
  --nav-bg:#0b1528;
  --card-shadow:0 12px 32px rgba(0,0,0,0.45);
  --glow:0 0 32px color-mix(in srgb, var(--accent) 14%, transparent);
}
.cc-app.light {
  --bg:#eaeef6; --bg2:#ffffff;
  --surface:rgba(255,255,255,0.9); --surface-solid:#ffffff; --surface-2:#f1f4fb;
  --border:rgba(15,23,42,0.09); --border-2:rgba(15,23,42,0.05);
  --text:#161b2e; --dim:#586079; --dimmer:#9099b0;
  --nav-bg:#ffffff;
  --card-shadow:0 10px 28px rgba(30,41,80,0.10);
  --glow:0 0 30px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ---- Stage + app shell ------------------------------------- */
/* Branded "cinema" backdrop shown AROUND the mobile app column on any viewport
   wider than the column (desktop / laptop / tablet). One shared recipe exposed
   as --cc-backdrop so the panel (mouse) and the >=560px touch-tablet path reuse
   it. Kept dark in both themes on purpose — a calm stage the app sits on. */
.cc-stage {
  --cc-backdrop:
    radial-gradient(1100px 720px at 84% -8%, color-mix(in srgb, #ff7a1a 13%, transparent) 0%, transparent 56%),
    radial-gradient(920px 680px at 10% 112%, #0a2233 0%, transparent 52%),
    radial-gradient(760px 560px at 50% 46%, #0e1a33 0%, transparent 72%),
    #06080f;
  width:100%; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:var(--cc-backdrop);
  padding:clamp(16px, 5vh, 44px) 20px;
}
.cc-app {
  position:relative; height:100%; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text); overflow:hidden;
  font-family:'Prompt','Outfit',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
/* Full-bleed on real PHONES (< 560px, incl. large phones in portrait): no bezel,
   fill the viewport, respect safe areas. */
.cc-stage-bare{ padding:0; background:#06080f; align-items:stretch; justify-content:stretch; min-height:100dvh; }
.cc-fullbleed{ width:100%; height:100dvh; }
.cc-stage-bare .cc-header{ padding-top:calc(env(safe-area-inset-top) + 14px); }
.cc-stage-bare .cc-nav{ padding-bottom:calc(env(safe-area-inset-bottom) + 8px); }
/* Desktop / laptop / portrait-tablet with a MOUSE -> the same mobile column, now a
   rounded, shadowed card floating on the backdrop (not a full-height strip / not a
   fake device bezel). Design language is 100% the mobile app; only the framing
   changes. Overlays (sheet/toast/alert/FAB) are position:absolute to .cc-app, so
   the card's overflow:hidden + border-radius contains + clips them. */
.cc-stage-panel{ padding:clamp(16px, 5vh, 44px) 20px; align-items:center; justify-content:center; }
.cc-panel{ position:relative; width:100%; max-width:460px; margin:0 auto;
  /* reserve exactly 2x the stage's clamp() gutter or the page scrolls by the difference */
  height:min(940px, calc(100dvh - clamp(32px, 10vh, 88px)));
  /* literal colors: theme tokens live on the DESCENDANT .cc-app and custom
     properties only inherit downward, so var(--bg)/var(--border) can't resolve
     here. The backdrop is dark in both themes, so one hairline works for both. */
  overflow:hidden; background:#050814;
  border:1px solid rgba(255,255,255,.10); border-radius:30px;
  box-shadow:0 42px 90px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.03); }
/* Floating card -> no notch, so drop the safe-area top/bottom padding. */
.cc-stage-panel .cc-header{ padding-top:14px; }
.cc-stage-panel .cc-nav{ padding-bottom:10px; }
/* ?frame=1 bezel preview (stage with no modifier class): FitScaler budgets
   exactly 40px of total margin, so pin the gutter at 20px — the clamp()
   gutter above would push the scaled bezel past the viewport and scroll. */
.cc-stage:not(.cc-stage-bare):not(.cc-stage-panel):not(.cc-stage-auth):not(.cc-stage-wide){ padding:20px; }

/* Touch TABLETS (>=560px wide AND >=600px tall) also float the mobile column on
   the backdrop instead of stretching one column edge-to-edge across an iPad. The
   min-height guard keeps PHONES IN LANDSCAPE (wide but short) full-bleed — a short
   floating card would waste their screen. So nothing about the phone build (either
   orientation) changes; only real tablets get the framed column. */
@media (min-width:560px) and (min-height:600px){
  .cc-stage-bare{
    padding:clamp(16px, 5vh, 44px) 20px;
    background:var(--cc-backdrop, #06080f);
    align-items:center; justify-content:center;
  }
  .cc-stage-bare .cc-fullbleed{
    width:100%; max-width:460px; margin:0 auto;
    height:min(940px, calc(100dvh - clamp(32px, 10vh, 88px)));
    overflow:hidden; background:#050814; /* literal — see .cc-panel note */
    border:1px solid rgba(255,255,255,.10); border-radius:30px;
    box-shadow:0 42px 90px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.03);
  }
  .cc-stage-bare .cc-header{ padding-top:14px; }
  .cc-stage-bare .cc-nav{ padding-bottom:10px; }
  /* The manual iPad rail profile (TweaksPanel device=iPad) lays out a 116px
     rail + wide board — built for full tablet width, so exempt it from the
     460px floating card entirely. */
  .cc-stage-bare:has(.cc-app.ipad){ padding:0; background:var(--cc-backdrop, #06080f); }
  .cc-stage-bare:has(.cc-app.ipad) .cc-fullbleed{ max-width:none; margin:0; height:100dvh;
    background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
}

/* Very small phones (<=360px, e.g. iPhone SE / older Androids): trim the outer
   gutters a touch so dense rows (money tiles, chip rows, court board) never force
   a horizontal scroll. The mobile design is authored at 375px; this is a safety
   net for the narrow tail. */
@media (max-width:360px){
  .cc-screen{ padding-left:11px; padding-right:11px; }
  .cc-header{ padding-left:13px; padding-right:13px; gap:10px; }
  /* Drop the wordmark on the feed header so the centered screen title has room
     (the logo MARK still shows). Prevents logo+title crowding on 320px devices. */
  .cc-logo-txt{ display:none; }
}
.cc-text{color:var(--text)!important;} .cc-dim{color:var(--dim);} .cc-dimmer{color:var(--dimmer);}
.cc-scroll::-webkit-scrollbar{width:0;height:0;display:none;}
.cc-scroll{scrollbar-width:none; -ms-overflow-style:none;}
.cc-main::-webkit-scrollbar{width:0;height:0;display:none;}
.cc-main{scrollbar-width:none;}
.cc-scroll-x{scrollbar-width:none;} .cc-scroll-x::-webkit-scrollbar{display:none;}

/* ---- Header ------------------------------------------------ */
.cc-header {
  /* 3-column grid → minmax(0, 1fr) lets the outer columns shrink below
     their content size (so the logo/bell truncate gracefully) while the
     center "auto" column takes the title's natural width and stays
     perfectly centered. */
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding:52px 16px 10px; position:relative; z-index:10;
  background:linear-gradient(var(--bg), color-mix(in srgb,var(--bg) 70%, transparent));
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border-2);
}
.cc-header > :first-child{justify-self:start; min-width:0;}
.cc-header > .cc-bell{justify-self:end;}
.cc-logo{display:flex; align-items:center; gap:5px; min-width:0;}
.cc-logo-mark{width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--accent) 28%, transparent)); flex-shrink:0;}
.cc-logo-txt{font-size:14.5px; font-weight:800; color:var(--text); letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; transform:translateY(2px);}
.cc-logo-txt b{color:var(--accent);}
.cc-hdr-title{font-size:15px; font-weight:800; color:var(--text); text-align:center; white-space:nowrap; line-height:1; transform:translateY(2px);}
.cc-hdr-back, .cc-bell{
  width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:15px;
  position:relative; transition:transform .12s, background .2s;
}
.cc-hdr-back:active,.cc-bell:active{transform:scale(.9);}
.cc-bell-dot{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:800; border-radius:9px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);
}

/* ---- Main scroll ------------------------------------------- */
.cc-main{flex:1; overflow-y:auto; overflow-x:hidden;}
.cc-main.noheader{padding-top:0;}
.cc-screen{padding:14px 14px 104px;}

/* ---- Bottom nav (BadmintonPro signature) ------------------- */
.cc-nav{
  height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:space-around;
  padding:0 8px 18px; background:var(--nav-bg);
  border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  position:relative; z-index:20;
}
.cc-tab{
  flex:1; height:46px; margin:0 3px; border-radius:15px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; background:transparent;
  color:var(--dimmer); transition:all .25s cubic-bezier(.4,0,.2,1);
}
.cc-tab i{font-size:17px; transition:transform .2s;}
.cc-tab-label{font-size:9px; font-weight:700; white-space:nowrap;}
.cc-tab.active{
  background:var(--accent-soft); color:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 22%, transparent);
}
.cc-tab.active i{transform:scale(1.12);}
.cc-tab.active .cc-tab-label{font-weight:800;}

/* ============ iPad layout (ผู้จัดก๊วน · landscape) =========== */
.cc-app.ipad{
  display:grid;
  grid-template-columns:116px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:"rail header" "rail main";
}
.cc-app.ipad .cc-header{grid-area:header; padding:18px 30px 14px;}
.cc-app.ipad .cc-hdr-title{font-size:17px;}
.cc-app.ipad .cc-logo-mark{width:44px; height:44px;}
.cc-app.ipad .cc-logo-txt{font-size:17px;}
.cc-app.ipad .cc-main{grid-area:main; overflow-y:auto;}

/* left rail */
.cc-app.ipad .cc-nav{
  grid-area:rail; flex-direction:column; height:100%; width:116px;
  justify-content:flex-start; align-items:stretch; gap:6px; padding:16px 14px;
  border-top:none; border-right:1px solid var(--border); box-shadow:6px 0 24px rgba(0,0,0,0.18);
}
.cc-app.ipad .cc-tab{flex:0 0 auto; height:66px; margin:0; border-radius:16px; gap:5px;}
.cc-app.ipad .cc-tab i{font-size:21px;}
.cc-app.ipad .cc-tab-label{font-size:11px;}

/* centered reading width for standard screens */
.cc-app.ipad .cc-screen{max-width:700px; margin:0 auto; padding:24px 26px 56px;}
.cc-app.ipad .cc-fab{bottom:26px; right:26px; padding:15px 22px; font-size:15px;}

/* Court Manager — wide board with courts side-by-side */
.cc-app.ipad .cc-cm-screen{max-width:1020px;}
.cc-app.ipad .cc-cm-courts{display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:20px; align-items:start;}
.cc-app.ipad .cc-cm-queue{display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;}
.cc-app.ipad .cc-court-half{min-height:96px;}
.cc-app.ipad .cc-cm-slot-av{width:52px; height:52px; font-size:27px;}
.cc-app.ipad .cc-cm-toolbar{max-width:540px;}

/* ============ Auto WIDE desktop layout (>=900px + fine pointer) ============
   Fills a large centered shell instead of the 460px phone card, reusing every
   .cc-app.ipad rule above (left rail + wide content grid). Toggled by shell.jsx
   detectWide(); auth stays a centered card (it never receives .ipad/.wide). */
.cc-stage-wide{ padding:0; align-items:stretch; }
/* Full-bleed: the app shell fills the whole window (no 1440px island on a dark
   backdrop). Reading width is enforced per-screen (.cc-screen 700 / .cc-dash),
   so content stays centered and readable while the chrome goes edge-to-edge. */
.cc-stage-wide > .cc-app{ width:100%; max-width:none; height:100dvh; margin:0; }

/* Bottom-sheet modals: cap + horizontally center as a dialog on wide, else
   .cc-sheet{width:100%} would stretch a single sheet across the whole desktop. */
.cc-app.ipad .cc-sheet-scrim{ justify-content:center; }
.cc-app.ipad .cc-sheet{ max-width:520px; margin:0 auto; }

/* The sticky submit bar's -14px bleed was tuned to the phone .cc-screen's 14px
   padding; the ipad .cc-screen uses 26px, so re-match the bleed to it. */
.cc-app.ipad .cc-submit-bar{ margin-left:-26px; margin-right:-26px; padding-left:26px; padding-right:26px; }

/* Chat 2-pane (list | thread) — wide desktop only. Chat is inherently two-level, so
   the wide layout shows the group list and the open thread side-by-side inside the
   scrollable .cc-main; each pane scrolls on its own instead of the whole screen.
   Rendered ONLY when wide (chat.jsx useWideLayout) → mobile keeps the single pane. */
.cc-app.ipad .cc-chat-2pane{
  display:grid; grid-template-columns:328px minmax(0,1fr);
  height:100%; min-height:0; overflow:hidden;
}
.cc-app.ipad .cc-chat-2pane .cc-chat-pane-list{ min-height:0; overflow-y:auto; border-right:1px solid var(--border); background:var(--surface-2); }
.cc-app.ipad .cc-chat-2pane .cc-chat-pane-room{ min-width:0; min-height:0; display:flex; flex-direction:column; }
/* the panes' own screens must not re-cap/re-center inside their columns */
.cc-app.ipad .cc-chat-2pane .cc-chat-screen{ max-width:none; margin:0; padding:16px 12px 24px; }
.cc-app.ipad .cc-chat-2pane .cc-chat-room{ height:100%; max-width:none; margin:0; }
/* the room header's 48px top padding clears a PHONE status bar — dead gap in the pane. */
.cc-app.ipad .cc-chat-2pane .cc-chat-top{ padding-top:14px; }
.cc-app.ipad .cc-chat-2pane .cc-chat-listhead{ padding:4px 6px 10px; }
.cc-app.ipad .cc-chat-2pane .cc-chat-row.active{ background:color-mix(in srgb, var(--accent) 14%, transparent); }
/* the embedded thread has no "back" arrow — the list is right beside it */
.cc-app.ipad .cc-chat-2pane .cc-chat-top > .cc-chat-back:first-child{ display:none; }
/* Full-bleed room pane can exceed 1500px — 80%-wide bubbles become unreadable
   ribbons, so cap them at a fixed reading width (Discord/LINE-PC behavior). */
.cc-app.ipad .cc-chat-2pane .cc-msg-col{ max-width:min(80%, 560px); }
.cc-app.ipad .cc-chat-2pane .cc-msg-sys span{ max-width:min(86%, 640px); }
/* nothing selected yet */
.cc-app.ipad .cc-chat-2pane .cc-chat-empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:24px; text-align:center; color:var(--dimmer);
}
.cc-app.ipad .cc-chat-2pane .cc-chat-empty i{ font-size:40px; opacity:.45; }
.cc-app.ipad .cc-chat-2pane .cc-chat-empty p{ margin:0; font-size:14px; }

/* ---- B: wide-desktop dashboards ---------------------------------
   Grid the card lists so a wide screen uses the width instead of one sparse
   700px column. ALL scoped to .cc-app.ipad → the phone layout is untouched.
   .cc-dash widens a screen past the 700px reading cap for gridded content. */
.cc-app.ipad .cc-screen.cc-dash{ max-width:1280px; }
/* any card list wrapped in a *-grid tiles responsively; child margins zeroed
   because the grid gap owns the spacing (else rows double-space). */
.cc-app.ipad .cc-orx-grid, .cc-app.ipad .cc-group-grid,
.cc-app.ipad .cc-bill-grid, .cc-app.ipad .cc-vrow-grid{ display:grid; gap:13px; align-items:start; }
.cc-app.ipad .cc-orx-grid > *, .cc-app.ipad .cc-group-grid > *,
.cc-app.ipad .cc-bill-grid > *, .cc-app.ipad .cc-vrow-grid > *{ margin-top:0; margin-bottom:0; }
.cc-app.ipad .cc-orx-grid{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }
.cc-app.ipad .cc-group-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.cc-app.ipad .cc-bill-grid{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.cc-app.ipad .cc-vrow-grid{ grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:10px; }
/* venue area chips flow to 3-up; badges fill the width instead of ballooning 3-col */
.cc-app.ipad .cc-area-grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.cc-app.ipad .cc-badge-grid{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
/* Non-grid heroes/toggles inside a .cc-dash screen shouldn't stretch the full
   ~1108px — cap them to a composed width; the *-grid card rows keep full width. */
.cc-app.ipad .cc-dash > .cc-balance,
.cc-app.ipad .cc-dash > .cc-segment{ max-width:640px; margin-left:auto; margin-right:auto; }
/* Venue map is a fixed 236px-tall block; cap its width so it isn't a distorted
   ultrawide letterbox on desktop (pins are %-positioned, the roads SVG stretches). */
.cc-app.ipad .cc-map{ max-width:560px; margin-left:auto; margin-right:auto; }

/* ---- Cards / buttons / chips ------------------------------- */
.cc-card{
  background:var(--surface); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--card-shadow);
}
.cc-card-glow{box-shadow:var(--card-shadow), var(--glow);}
.cc-tap{cursor:pointer; transition:transform .14s ease, border-color .2s;}
.cc-tap:active{transform:scale(.985);}

.cc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:13px; font-weight:800; transition:transform .12s, filter .2s; white-space:nowrap;
}
.cc-btn:active{transform:scale(.95);}
.cc-btn-primary{background:var(--accent-grad); color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%, transparent);}
.cc-btn-primary:hover{filter:brightness(1.06);}
.cc-btn-ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.cc-btn-disabled{opacity:.45; pointer-events:none;}
.cc-chiprow{display:flex; gap:8px; overflow-x:auto; padding:2px 1px 4px; margin-bottom:14px; scrollbar-width:none;}
.cc-chiprow::-webkit-scrollbar{display:none;}
.cc-chip{
  flex-shrink:0; white-space:nowrap; padding:7px 14px; border-radius:11px; font-size:12px; font-weight:700;
  background:var(--surface-2); color:var(--dim); border:1px solid var(--border); transition:all .18s;
}
.cc-chip-on{background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-chip-count{margin-left:5px; opacity:.8;}

.cc-tag{
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:8px;
  font-size:11px; font-weight:700; color:var(--dim); background:var(--surface-2);
  border:1px solid var(--border); white-space:nowrap;
}

.cc-section-label{font-size:13px; font-weight:800; color:var(--text); letter-spacing:-.2px; white-space:nowrap;}
.cc-link{font-size:11.5px; font-weight:700; color:var(--accent); white-space:nowrap;}

.cc-progress{width:100%; background:color-mix(in srgb,var(--text) 11%, transparent); border-radius:99px; overflow:hidden;}
.cc-progress-fill{height:100%; border-radius:99px; transition:width .45s cubic-bezier(.22,1,.36,1);}

.cc-star-on{color:#f59e0b;} .cc-star-off{color:color-mix(in srgb,var(--text) 18%, transparent);}

/* ---- Google-style rating pill ------------------------------ */
.cc-rating{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border-2); white-space:nowrap; line-height:1;}
.cc-rating.bare{padding:0; background:transparent; border:none;}
.cc-rating b{font-size:11.5px; font-weight:900; color:var(--text);}
.cc-rating .cc-rating-n{font-size:10.5px; font-weight:600; color:var(--dimmer);}

/* ---- Role markers (ผู้จัด / ผู้จัด·ผู้เล่น / ผู้เล่น) -------- */
.cc-rolebadge{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:900; padding:3px 9px; border-radius:8px; white-space:nowrap; letter-spacing:.2px; line-height:1;}
.cc-rolebadge i{font-size:9px;}
.cc-rolebadge.both{color:#fff; background:var(--accent-grad); box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-rolebadge.organizer{color:#f59e0b; background:rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.34);}
.cc-rolebadge.player{color:var(--dim); background:var(--surface-2); border:1px solid var(--border);}
.cc-rolebadge.player i{color:var(--dimmer);}
.cc-rolebadge.sm{font-size:9px; padding:2px 7px; gap:4px;}
.cc-rolebadge.sm i{font-size:8px;}

/* role legend (hub) */
.cc-role-legend{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 13px; margin-bottom:14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-role-legend .lhead{font-size:11px; font-weight:800; color:var(--dimmer);}

/* ---- Withdraw (ถอนตัว) buttons ----------------------------- */
.cc-orx-btn.withdraw{background:rgba(244,63,94,.12); color:#f43f5e; border:1px solid rgba(244,63,94,.3);}
.cc-orx-btn.withdraw:hover{background:rgba(244,63,94,.18);}
.cc-orx-status{flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:42px; padding:0 9px; border-radius:13px; font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden;}
.cc-orx-status.in{color:#22c55e; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28);}
.cc-orx-status.sm{height:34px; font-size:11.5px; border-radius:11px; padding:0 11px; flex:0 0 auto;}

.cc-withdraw-cta{display:flex; align-items:center; gap:12px; width:100%; padding:14px; margin-bottom:14px; border-radius:16px; text-align:left;
  background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.26); transition:transform .12s, background .2s;}
.cc-withdraw-cta:active{transform:scale(.99);}
.cc-withdraw-cta:hover{background:rgba(244,63,94,.13);}
.cc-withdraw-cta .wic{width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; background:linear-gradient(135deg,#fb7185,#f43f5e); box-shadow:0 4px 11px rgba(244,63,94,.34);}
.cc-withdraw-cta .wtx{min-width:0; flex:1;}
.cc-withdraw-cta .wtx b{display:block; font-size:13px; font-weight:800; color:#f43f5e;}
.cc-withdraw-cta .wtx span{font-size:11px; color:var(--dim); line-height:1.35;}
.cc-withdraw-cta .warr{flex-shrink:0; color:#f43f5e; font-size:13px;}
.cc-withdraw-done{display:flex; align-items:center; gap:10px; padding:13px 14px; margin-bottom:14px; border-radius:15px; background:var(--surface-2); border:1px solid var(--border-2); font-size:12.5px; font-weight:700; color:var(--dim);}
.cc-withdraw-done i{color:#f59e0b; font-size:15px;}

/* ---- Avatar ------------------------------------------------- */
.cc-avatar{border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cc-avatar-extra{
  border-radius:50%; background:var(--surface-2); border:2px solid var(--surface-solid);
  color:var(--dim); font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* ---- Photo placeholder ------------------------------------- */
.cc-photo{position:relative; overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center;}
.cc-photo-stripes{position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--text) 5%, transparent) 0 10px, transparent 10px 20px);}
.cc-photo-cap{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--dimmer);}
.cc-photo-cap i{font-size:20px;}
.cc-photo-cap span{font-family:ui-monospace,'SF Mono',monospace; font-size:10px; letter-spacing:.3px;}

/* ---- Sheet / modal ----------------------------------------- */
.cc-sheet-scrim{position:absolute; inset:0; z-index:80; background:rgba(0,0,0,0);
  display:flex; align-items:flex-end; transition:background .28s;}
.cc-sheet-scrim.on{background:rgba(2,4,12,0.55);}
.cc-sheet{
  width:100%; background:var(--surface-solid); border-top:1px solid var(--border);
  border-radius:26px 26px 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); max-height:90%;
  display:flex; flex-direction:column;
  transform:translateY(110%); transition:transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -20px 50px rgba(0,0,0,.45);
}
.cc-sheet.on{transform:translateY(0);}
.cc-sheet-handle{width:38px; height:4px; border-radius:99px; background:var(--border); margin:2px auto 14px; opacity:.8;}
.cc-icon-btn{width:30px; height:30px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); color:var(--dim); display:flex; align-items:center; justify-content:center;}

/* ---- Centered alert modal (persistent, dismissible) -------- */
.cc-alert-scrim{position:absolute; inset:0; z-index:130; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(2,4,12,.62); animation:ccAlertFade .2s ease;}
.cc-alert-box{position:relative; width:100%; max-width:300px; box-sizing:border-box;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:22px;
  padding:26px 20px 18px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:ccAlertPop .26s cubic-bezier(.22,1,.36,1);}
.cc-alert-x{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px;}
.cc-alert-x:active{transform:scale(.92);}
.cc-alert-ic{width:54px; height:54px; border-radius:16px; margin:2px auto 14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--at,#f43f5e); background:color-mix(in srgb, var(--at,#f43f5e) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--at,#f43f5e) 30%, transparent);}
.cc-alert-title{font-size:16px; font-weight:900; color:var(--text); margin-bottom:7px; line-height:1.3;}
.cc-alert-body{font-size:13px; font-weight:500; color:var(--dim); line-height:1.65; margin-bottom:18px; white-space:pre-line;}
.cc-alert-acts{display:flex; flex-direction:column; gap:8px;}
.cc-alert-go{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; cursor:pointer;
  background:var(--at,var(--accent)); color:#fff; border:none; border-radius:13px; padding:13px;
  font-size:13.5px; font-weight:800;}
.cc-alert-go i{font-size:11px; color:#fff;}
.cc-alert-go:active{transform:scale(.98);}
.cc-alert-dismiss{width:100%; background:transparent; border:none; color:var(--dim); font-size:12.5px; font-weight:700; padding:7px; cursor:pointer;}
@keyframes ccAlertFade{from{opacity:0;} to{opacity:1;}}
@keyframes ccAlertPop{from{opacity:0; transform:scale(.92) translateY(8px);} to{opacity:1; transform:scale(1) translateY(0);}}

/* ---- Toast ------------------------------------------------- */
.cc-toast{
  position:absolute; left:50%; bottom:90px; transform:translateX(-50%);
  z-index:95; display:flex; align-items:center; gap:9px;
  max-width:calc(100% - 28px); box-sizing:border-box;
  background:#171f33; color:#fff; padding:11px 18px; border-radius:13px; font-size:12.5px; font-weight:700;
  box-shadow:0 12px 30px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
  animation:bpToast .3s cubic-bezier(.22,1,.36,1);
}
.cc-toast i{color:var(--accent);}
.cc-toast span{min-width:0;}
.cc-toast-act{
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px; margin-left:2px;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  padding:6px 11px; border-radius:9px; font-size:11.5px; font-weight:800; white-space:nowrap;
}
.cc-toast-act i{color:#fff; font-size:10px;}
.cc-toast-act:active{transform:scale(.95);}
/* "ค้างจ่าย ฿X" alert pill — surfaced on group cards + chat list rows */
.cc-debt-pill{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800;
  color:#f43f5e; background:rgba(244,63,94,.12); border:1px solid rgba(244,63,94,.32);
  padding:2px 8px; border-radius:999px; white-space:nowrap;}
.cc-debt-pill i{font-size:9px; color:#f43f5e;}
@keyframes bpToast{from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translate(-50%,0);}}

/* ---- Empty / dividers -------------------------------------- */
.cc-empty{text-align:center; padding:40px 20px; color:var(--dimmer);}
.cc-empty i{font-size:30px; margin-bottom:10px;}
.cc-empty p{font-size:12.5px;}
.cc-empty-tt{font-size:14px; font-weight:800; color:var(--text); margin-top:2px;}
.cc-empty-sub{font-size:12px; font-weight:600; color:var(--dimmer); margin-top:4px;}
.cc-day-divider{display:flex; align-items:center; gap:10px; margin:4px 2px 10px;}
.cc-day-divider span{font-size:11px; font-weight:800; color:var(--dimmer); text-transform:uppercase; letter-spacing:.5px;}
.cc-day-divider::after{content:''; flex:1; height:1px; background:var(--border);}

/* ============ FEATURE 1 — Activity & notifications ========== */
.cc-feed-ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:15px; border:1px solid;}
.cc-feed-meta{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--dim);
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:9px; padding:6px 9px;}
.cc-react{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--dimmer); transition:color .15s, transform .1s;}
.cc-react:active{transform:scale(.92);}
.cc-react.on{color:#f43f5e;}
.cc-unread-pill{font-size:10px; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:8px; margin-left:6px; vertical-align:middle; white-space:nowrap;}
.cc-notif{display:flex; gap:11px; padding:12px; border-radius:15px; background:var(--surface-2); border:1px solid var(--border-2); transition:background .15s; cursor:pointer;}
.cc-notif.unread{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 25%, transparent);}
.cc-notif-ic{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
.cc-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;}
.cc-clamp1{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.cc-timeline{position:relative;}
.cc-tl-item{position:relative; display:flex; gap:12px; padding-bottom:14px;}
.cc-tl-item::before{content:''; position:absolute; left:17px; top:40px; bottom:-2px; width:2px; background:var(--border); border-radius:2px;}
.cc-tl-item:last-child::before{display:none;}

/* ============ FEATURE 2 — Venue discovery =================== */
.cc-search{display:flex; align-items:center; gap:10px; padding:0 12px; height:46px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;}
.cc-search i{color:var(--dimmer); font-size:14px;}
.cc-search input{flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:13px; font-family:inherit;}
.cc-search input::placeholder{color:var(--dimmer);}
.cc-search-filter{width:32px; height:32px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; position:relative; transition:transform .15s, background .2s;}
.cc-search-filter:active{transform:scale(.92);}
.cc-search-filter.on{background:var(--accent); color:#fff;}
.cc-filter-dot{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; background:#f43f5e; color:#fff; font-size:9.5px; font-weight:900; border-radius:9px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg);}

/* ---- Venue filter sheet (กรองสนาม) ------------------------- */
.cc-vf-section{padding:14px 0; border-bottom:1px solid var(--border-2);}
.cc-vf-section:last-of-type{border-bottom:none;}
.cc-vf-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.cc-vf-lbl{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--text); white-space:nowrap;}
.cc-vf-lbl > i{color:var(--accent); font-size:13px;}
.cc-vf-val{font-size:12px; font-weight:800; color:var(--accent); white-space:nowrap;}
.cc-vf-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--p,50%), var(--surface-2) var(--p,50%));
  background:var(--surface-2); outline:none;}
.cc-vf-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid var(--bg);
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%, transparent); cursor:pointer;}
.cc-vf-range::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%, transparent); cursor:pointer;}
.cc-vf-scale{display:flex; justify-content:space-between; margin-top:6px; font-size:10px; font-weight:700; color:var(--dimmer);}
.cc-vf-segrow{display:flex; gap:6px;}
.cc-vf-seg{flex:1; padding:9px 8px; border-radius:11px; font-size:11.5px; font-weight:800; color:var(--dim); background:var(--surface-2); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:all .18s;}
.cc-vf-seg > i{font-size:10px; color:#f59e0b;}
.cc-vf-seg.on{background:var(--accent); color:#fff; border-color:var(--accent);}
.cc-vf-seg.on > i{color:#fff;}
.cc-vf-chips{display:flex; flex-wrap:wrap; gap:6px;}
.cc-vf-cta{display:flex; gap:8px; padding-top:14px; margin-top:6px; border-top:1px solid var(--border-2);}
.cc-vf-cta .cc-btn-ghost:disabled{opacity:.4;}
.cc-segment{display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px;}
.cc-segment button{flex:1; padding:8px; border-radius:10px; font-size:12px; font-weight:700; color:var(--dim); display:flex; align-items:center; justify-content:center; gap:6px; transition:all .18s;}
.cc-segment button.on{background:var(--accent-grad); color:#fff; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-segment-3 button{font-size:11.5px;}

.cc-map{position:relative; height:236px; border-radius:18px; overflow:hidden; border:1px solid var(--border);
  background:radial-gradient(circle at 70% 25%, color-mix(in srgb,var(--accent) 7%, var(--surface-2)), var(--surface-2));}
.cc-map-grid{position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:30px 30px;}
.cc-map-roads{position:absolute; inset:0; width:100%; height:100%;}
.cc-map-roads path{fill:none; stroke:color-mix(in srgb,var(--text) 13%, transparent); stroke-width:5; stroke-linecap:round;}
.cc-map-river{position:absolute; width:150%; height:34px; top:46%; left:-25%; transform:rotate(-7deg); filter:blur(3px);
  background:color-mix(in srgb,#3b82f6 20%, transparent);}
.cc-pin{position:absolute; transform:translate(-50%,-100%); transition:transform .2s;}
.cc-pin-body{width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pin);
  display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.5);}
.cc-pin-body i{transform:rotate(45deg); color:#fff; font-size:12px;}
.cc-pin-rating{position:absolute; top:-9px; right:-12px; background:#fff; color:#111; font-size:9px; font-weight:800; border-radius:7px; padding:1px 4px; box-shadow:0 2px 6px rgba(0,0,0,.3);}
.cc-pin.on{transform:translate(-50%,-100%) scale(1.25); z-index:6;}
.cc-map-me{position:absolute; transform:translate(-50%,-50%);}
.cc-map-me span{display:block; width:14px; height:14px; border-radius:50%; background:#3b82f6; border:3px solid #fff; box-shadow:0 0 0 6px rgba(59,130,246,.22);}
.cc-map-chip{flex-shrink:0; display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:10px; font-size:11px; font-weight:700;
  background:var(--surface-2); border:1px solid var(--border); color:var(--dim);}
.cc-map-chip i{color:var(--pin);}
.cc-map-chip.on{border-color:var(--pin); color:var(--text); background:color-mix(in srgb,var(--pin) 12%, var(--surface-2));}

/* ---- Venue cinema-finder (near-me rows · area picker · place hub) ---- */
.cc-vrow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 14px; margin-bottom:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); transition:transform .15s, border-color .2s;}
.cc-vrow:active{transform:scale(.985);}
.cc-vrow-main{flex:1; min-width:0;}
.cc-vrow-top{display:flex; align-items:center; gap:8px;}
.cc-vrow-name{flex:1; min-width:0; font-size:14.5px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-vrow-rate{flex-shrink:0; display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; color:var(--dim);}
.cc-vrow-rate i{color:#f5b301; font-size:10px;}
.cc-vrow-loc{display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11.5px; font-weight:600; color:var(--dim);}
.cc-vrow-loc > i{flex-shrink:0; color:var(--vtone,var(--accent)); font-size:11px;}
.cc-vrow-loc b{margin-left:auto; padding-left:8px; color:var(--text); font-weight:800; white-space:nowrap;}
.cc-vrow-show{display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:4px 9px; border-radius:9px;
  font-size:11.5px; font-weight:800; color:var(--dimmer); background:var(--surface-2);}
.cc-vrow-show.on{color:#16a34a; background:rgba(34,197,94,.13);}
.cc-vrow-show i{font-size:11px;}
.cc-vrow-foot{margin-top:7px; font-size:11px; font-weight:700; color:var(--dimmer);}
.cc-vrow-chev{flex-shrink:0; color:var(--dimmer); font-size:14px;}

.cc-geo-chip{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--dim);}
.cc-geo-chip > i{flex-shrink:0; font-size:13px; color:var(--dimmer);}
.cc-geo-chip > i.cc-geo-live{color:#22c55e;}
.cc-geo-act{flex-shrink:0; font-size:11.5px; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:8px;}

.cc-vlist-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px; margin:14px 0 8px;
  font-size:12px; font-weight:800; color:var(--dim);}
.cc-icon-toggle{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--dim);
  padding:5px 10px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2);}
.cc-icon-toggle.on{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%, transparent); background:var(--accent-soft);}
.cc-icon-toggle i{font-size:11px;}

.cc-area-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cc-area-card{position:relative; text-align:left; padding:15px 14px; border-radius:15px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--card-shadow); transition:transform .15s;}
.cc-area-card:active{transform:scale(.97);}
.cc-area-name{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--text);}
.cc-area-name i{color:var(--accent); font-size:12px;}
.cc-area-count{margin-top:5px; font-size:11.5px; font-weight:700; color:var(--dim);}
.cc-area-chev{position:absolute; top:15px; right:13px; color:var(--dimmer); font-size:12px;}
.cc-area-back{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--text);}
.cc-area-back i{color:var(--accent); font-size:12px;}

.cc-vround{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; transition:transform .15s;}
.cc-vround:active{transform:scale(.985);}
.cc-vround-emoji{flex-shrink:0; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px;}
.cc-vround-name{font-size:13px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-vround-meta{display:flex; align-items:center; gap:5px; margin-top:2px; font-size:11px; font-weight:600; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-vround-meta i{flex-shrink:0; font-size:10px; color:var(--dimmer);}
.cc-vround-slots{flex-shrink:0; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:8px;}
.cc-vround-slots.open{color:#16a34a; background:rgba(34,197,94,.14);}
.cc-vround-slots.full{color:var(--dimmer); background:var(--surface-2);}
.cc-vround-chev{flex-shrink:0; color:var(--dimmer); font-size:12px;}
.cc-vempty{display:flex; align-items:center; gap:8px; padding:14px; border-radius:13px; border:1px dashed var(--border);
  font-size:12px; font-weight:700; color:var(--dim); background:var(--surface-2);}
.cc-vempty i{flex-shrink:0; color:var(--dimmer);}
.cc-osm-tag{flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:.3px; color:#1d9e75; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); border-radius:6px; padding:1px 5px;}
.cc-osm-banner{display:flex; align-items:center; gap:9px; width:100%; text-align:left; margin-bottom:14px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface-2); font-size:12px; font-weight:700; color:var(--dim);}
.cc-osm-banner > i:first-child{color:#22c55e; font-size:15px; flex-shrink:0;}
.cc-osm-banner span{flex:1; min-width:0;}
.cc-osm-banner > i:last-child{font-size:11px; color:var(--dimmer); flex-shrink:0;}

.cc-fade-key{animation:bpFade .3s ease;}
@keyframes bpFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.cc-venue-fav{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;}
.cc-venue-rate{position:absolute; bottom:10px; left:10px; display:flex; align-items:center; gap:4px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); color:#fff; font-size:11px; padding:4px 9px; border-radius:9px;}
.cc-venue-rate span{opacity:.7;}
.cc-mini-rate{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; color:var(--text);}
.cc-price{font-size:14px; font-weight:900; color:var(--accent);}
.cc-price small{font-size:10px; font-weight:600; color:var(--dim);}

.cc-detail-back, .cc-detail-fav{position:absolute; top:52px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.42); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:5;}
.cc-detail-back{left:14px;} .cc-detail-fav{right:14px;}
.cc-detail-hero-grad{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 60%);}
.cc-detail-hero-info{position:absolute; left:16px; right:16px; bottom:14px;}
.cc-stat-tile{background:var(--surface-2); border:1px solid var(--border-2); border-radius:14px; padding:11px 6px; text-align:center;}
.cc-stat-tile>i{font-size:16px; margin-bottom:5px;}
.cc-stat-val{font-size:14px; font-weight:900; color:var(--text); line-height:1.1;}
.cc-stat-cap{font-size:10px; color:var(--dimmer); margin-top:2px;}
.cc-detail-cta{display:flex; gap:10px; padding:6px 16px 104px;}
.cc-star-pick{font-size:30px; transition:transform .12s;} .cc-star-pick:active{transform:scale(1.2);}
.cc-textarea{width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; resize:none;}
.cc-textarea::placeholder{color:var(--dimmer);}
.cc-add-photo{display:flex; align-items:center; gap:7px; padding:0 16px; border-radius:13px; background:var(--surface-2); border:1px dashed var(--border); color:var(--dim); font-size:12px; font-weight:700; white-space:nowrap;}
.cc-back-row{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--dim); margin-bottom:12px;}

/* ============ FEATURE 3 — Split & settle ==================== */
.cc-balance{background:linear-gradient(150deg, color-mix(in srgb,var(--bal) 14%, var(--surface)), var(--surface));}
.cc-balance-num{font-size:38px; font-weight:900; color:var(--bal); line-height:1.05; margin:2px 0;}
.cc-bal-tile{background:var(--surface-2); border:1px solid var(--border-2); border-radius:13px; padding:11px 13px;}
.cc-bal-tile span{display:block; font-size:11px; font-weight:700; margin-bottom:3px;}
.cc-bal-tile b{font-size:16px; font-weight:900; color:var(--text);}
/* action-oriented balance: separate "ต้องจ่าย" / "รอรับ" rows (never netted) */
.cc-bal-act{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:11px 13px; border-radius:13px; margin-bottom:8px;
  background:color-mix(in srgb, var(--c) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 30%, var(--border-2));}
.cc-bal-act:last-of-type{margin-bottom:0;}
.cc-bal-act:active{transform:scale(.985);}
.cc-bal-act.pay{--c:#f43f5e;}
.cc-bal-act.receive{--c:#22c55e;}
.cc-bal-act-l span{display:block; font-size:11px; font-weight:800; color:var(--c); margin-bottom:2px;}
.cc-bal-act-l b{font-size:21px; font-weight:900; color:var(--c); line-height:1;}
.cc-bal-act-cta{flex-shrink:0; font-size:11.5px; font-weight:800; color:var(--c); padding:6px 12px; border-radius:10px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--c) 42%, transparent); white-space:nowrap;}
.cc-bal-cta{display:block; width:100%; text-align:center; font-size:13px; font-weight:800; padding:10px; border-radius:12px;
  color:var(--c); background:color-mix(in srgb, var(--c) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 34%, transparent);}
.cc-bal-cta.pay{--c:#f43f5e;}
.cc-bal-cta.receive{--c:#22c55e;}
.cc-bal-cta:active{transform:scale(.985);}
.cc-bal-clear{display:flex; align-items:center; gap:13px;}
.cc-bal-clear-ic{width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#22c55e; background:color-mix(in srgb, #22c55e 15%, var(--surface));}
.cc-status{font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:8px; white-space:nowrap;}
.cc-status.ok{color:#22c55e; background:rgba(34,197,94,.14);}
.cc-status.mine{color:var(--accent); background:var(--accent-soft);}
.cc-status.wait{color:#f43f5e; background:rgba(244,63,94,.13);}
.cc-cost-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; font-size:12.5px; color:var(--dim); border-bottom:1px solid var(--border-2);}
.cc-cost-row>span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-cost-row b, .cc-cost-total b{white-space:nowrap; flex-shrink:0;}
.cc-cost-row b{color:var(--text); font-weight:800;}
.cc-cost-total{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:11px; margin-top:3px; font-size:14px; font-weight:800; color:var(--text); white-space:nowrap;}
.cc-cost-total b{font-size:18px; font-weight:900;}
.cc-cost-est{padding-bottom:5px;}
.cc-cost-firm{display:flex; align-items:flex-start; gap:8px; margin-top:9px; padding:9px 11px; border-radius:11px;
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.26);
  font-size:11px; font-weight:600; color:var(--dim); line-height:1.45; text-wrap:pretty; white-space:normal;}
.cc-cost-firm > i{color:#f59e0b; font-size:11px; margin-top:2px; flex-shrink:0;}
.cc-calc-note{display:flex; align-items:flex-start; gap:7px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--border-2);
  font-size:11px; font-weight:600; color:var(--dim); line-height:1.45; text-wrap:pretty;}
.cc-calc-note > i{color:var(--accent); font-size:11px; margin-top:2px; flex-shrink:0;}
.cc-remaining{margin-top:8px; text-align:center; font-size:12px; font-weight:700; color:#f59e0b; background:rgba(245,158,11,.12); border-radius:11px; padding:8px;}
.cc-remaining.ok{color:#22c55e; background:rgba(34,197,94,.12);}
.cc-pay-row{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:15px; background:var(--surface); border:1px solid var(--border-2);}
.cc-pay-row.me{border-color:color-mix(in srgb,var(--accent) 45%, transparent); background:var(--accent-soft); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%, transparent);}
.cc-you{font-size:9px; font-weight:800; color:#fff; background:var(--accent); padding:1px 6px; border-radius:6px;}
.cc-stepper{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px;}
.cc-stepper button{width:24px; height:24px; border-radius:7px; background:var(--surface-solid); border:1px solid var(--border); color:var(--text); font-size:10px; display:flex; align-items:center; justify-content:center;}
.cc-stepper span{font-size:12px; font-weight:800; color:var(--text); min-width:48px; text-align:center;}
.cc-paytoggle{font-size:22px; color:var(--dimmer); transition:transform .15s, color .2s;}
.cc-paytoggle:active{transform:scale(.85);}
.cc-paytoggle.on{color:#22c55e;}
.cc-settle-row{display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:12px;}
.cc-settle-done{text-align:center; padding:14px; font-size:12.5px; font-weight:700; color:#22c55e; background:rgba(34,197,94,.1); border-radius:13px;}
.cc-settle-note{display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); border-radius:12px; padding:10px 12px;}
.cc-settle-note i{color:var(--accent); margin-top:2px; flex:none;}
.cc-settle-note b{color:var(--text); font-weight:800;}
.cc-promptpay{display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:14px;}
.cc-qr{width:48px; height:48px; border-radius:11px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--text);}
.cc-copy{margin-left:auto; width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}

/* ============ FEATURE 4 — Badges & gamification ============= */
.cc-ring{border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:5px;}
.cc-ring-inner{width:100%; height:100%; border-radius:50%; background:var(--surface-solid); display:flex; align-items:center; justify-content:center;}
.cc-level-card{background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 12%, var(--surface)), var(--surface));}
.cc-level-title{font-size:16px; font-weight:900; color:var(--text); background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cc-chal-emoji{width:42px; height:42px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.cc-claim{font-size:11px; font-weight:800; color:#fff; background:var(--accent-grad); padding:7px 13px; border-radius:10px; white-space:nowrap; box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-claim.done{background:var(--surface-2); color:var(--dimmer); box-shadow:none;}
.cc-reward-tag{font-size:10px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:4px 9px; border-radius:8px; white-space:nowrap; text-align:center; line-height:1.3;}
.cc-badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.cc-badge{position:relative; padding:14px 8px; border-radius:16px; text-align:center; background:var(--surface); border:1px solid var(--border-2); transition:transform .14s;
  box-shadow:0 6px 16px color-mix(in srgb,var(--bt) 14%, transparent);}
.cc-badge:active{transform:scale(.95);}
.cc-badge.locked{box-shadow:none; background:var(--surface-2);}
.cc-badge.locked .cc-badge-emoji{filter:grayscale(1); opacity:.4;}
.cc-badge-emoji{position:relative; font-size:34px; line-height:1; margin-bottom:7px; filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--bt) 40%, transparent));}
.cc-badge-lock{position:absolute; bottom:-3px; right:50%; transform:translateX(18px); width:20px; height:20px; border-radius:50%; background:var(--surface-2); border:2px solid var(--surface-solid); color:var(--dimmer); font-size:9px; display:flex; align-items:center; justify-content:center; filter:none; opacity:1;}
.cc-badge-lock.big{width:30px; height:30px; font-size:13px; transform:translateX(28px);}
.cc-badge-name{font-size:11px; font-weight:800; color:var(--text); line-height:1.2;}
.cc-badge-rar{font-size:9.5px; color:var(--dimmer); margin-top:3px;}
.cc-badge-prog{font-size:10px; font-weight:800; color:var(--bt); margin-top:3px;}
.cc-badge-big{position:relative; width:96px; height:96px; margin:0 auto; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:52px;
  background:color-mix(in srgb,var(--bt) 14%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--bt) 30%, transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--bt) 30%, transparent);}
.cc-badge-big.locked{filter:grayscale(.7);}
.cc-badge-earned{margin-top:16px; font-size:12.5px; font-weight:800; color:#22c55e; background:rgba(34,197,94,.12); border-radius:12px; padding:11px;}
.cc-lb-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:13px;}
.cc-lb-row.me{background:var(--accent-soft);}
.cc-rank{width:22px; text-align:center; font-size:13px; font-weight:900; color:var(--dimmer);}
.cc-rank.r1{color:#f59e0b;} .cc-rank.r2{color:#94a3b8;} .cc-rank.r3{color:#c2855a;}
.cc-social{width:38px; height:38px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px;}
.cc-recent-badge{flex:1; aspect-ratio:1; border-radius:15px; background:color-mix(in srgb,var(--bt) 13%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--bt) 25%, transparent); display:flex; align-items:center; justify-content:center; font-size:26px;}
.cc-setting-row{display:flex; align-items:center; gap:13px; padding:13px 14px; color:var(--text); font-size:13px; font-weight:600;}
.cc-setting-row.bordered{border-bottom:1px solid var(--border-2);}
.cc-setting-row>i:first-child{color:var(--accent); width:18px; text-align:center;}
.cc-logout{width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; border-radius:15px; font-size:13px; font-weight:800;
  color:#f43f5e; background:rgba(244,63,94,.06); border:1px solid rgba(244,63,94,.2);}

/* ============ FEATURE 5 — Groups (ก๊วน) + Rounds (เปิดรอบ) ==== */
/* ---- Floating create-group button (feed) ------------------- */
.cc-fab{position:absolute; right:14px; bottom:86px; z-index:30; display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:13px 18px 13px 16px; border-radius:17px; background:var(--accent-grad); color:#fff; font-size:14px; font-weight:800;
  box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 45%, transparent), 0 2px 6px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18); transition:transform .14s, filter .2s;}
.cc-fab:hover{filter:brightness(1.06);} .cc-fab:active{transform:scale(.93);}
.cc-fab i{font-size:15px;}

/* ---- 'ก๊วนของฉัน' rail on feed ----------------------------- */
.cc-grail{display:flex; gap:10px; overflow-x:auto; padding:1px 1px 6px; scrollbar-width:none;
  scroll-snap-type:x proximity; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
.cc-grail::-webkit-scrollbar{display:none;}
/* swipeable rail: grab cursor + right-edge fade that hides once scrolled to the end */
.cc-grail.scrollable{cursor:grab;}
.cc-grail.scrollable:not(.at-end){
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);}
.cc-grail.dragging{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none;}
.cc-grail-card{flex-shrink:0; width:150px; padding:12px; border-radius:16px; background:var(--surface); border:1px solid var(--border-2);
  box-shadow:var(--card-shadow); transition:transform .14s; scroll-snap-align:start;}
.cc-grail-card:active{transform:scale(.97);}

/* ---- Form kit ---------------------------------------------- */
.cc-field{margin-bottom:16px;}
.cc-field-label{font-size:12.5px; font-weight:800; color:var(--text); margin-bottom:8px; line-height:1.35;}
.cc-field-label>i{color:var(--accent); font-size:12px; margin-right:7px;}
.cc-req{color:#f43f5e; font-style:normal; margin-left:2px;}
.cc-opt{float:right; white-space:nowrap; font-style:normal; font-weight:700; font-size:10px; color:var(--dimmer); background:var(--surface-2); border:1px solid var(--border-2); padding:2px 7px; border-radius:6px; margin-left:7px;}
.cc-field-hint{font-size:11px; color:var(--dimmer); margin-top:6px; line-height:1.45;}

.cc-input{display:flex; align-items:center; gap:9px; min-height:46px; padding:0 13px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:13px; transition:border-color .18s, background .18s;}
.cc-input:focus-within{border-color:color-mix(in srgb,var(--accent) 55%, transparent); background:var(--surface-solid);}
.cc-input>i{color:var(--dimmer); font-size:14px; width:17px; text-align:center; flex-shrink:0;}
.cc-input .cc-prefix{font-size:13px; font-weight:800; color:var(--dim); white-space:nowrap; flex-shrink:0;}
.cc-input input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-size:13.5px; font-family:inherit; padding:12px 0;}
.cc-input input::placeholder{color:var(--dimmer);}
.cc-input.mono input{font-family:ui-monospace,'SF Mono',monospace; letter-spacing:.4px;}
.cc-input.off{opacity:.45;}

.cc-switch{width:46px; height:27px; border-radius:99px; background:var(--surface-solid); border:1px solid var(--border); position:relative; transition:background .2s, border-color .2s; flex-shrink:0; cursor:pointer;}
.cc-switch::after{content:''; position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.35); transition:transform .22s cubic-bezier(.4,0,.2,1);}
.cc-switch.on{background:var(--accent-grad); border-color:transparent;}
.cc-switch.on::after{transform:translateX(19px);}
.cc-toggle-row{display:flex; align-items:center; gap:12px; padding:12px 13px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:14px;}
.cc-toggle-row .cc-tr-txt{min-width:0; flex:1;}
.cc-toggle-row .cc-tr-txt b{display:block; font-size:12.5px; font-weight:800; color:var(--text);}
.cc-toggle-row .cc-tr-txt span{font-size:11px; color:var(--dimmer); line-height:1.35;}

.cc-chipset{display:flex; flex-wrap:wrap; gap:8px;}
.cc-chip-pick{padding:9px 14px; border-radius:11px; font-size:12.5px; font-weight:700; white-space:nowrap; background:var(--surface-2); color:var(--dim); border:1px solid var(--border); transition:all .16s; display:inline-flex; align-items:center; gap:6px;}
.cc-chip-pick.on{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%, transparent); font-weight:800;}
.cc-chip-pick.on i{color:var(--accent);}

.cc-pin-row{display:flex; gap:10px;}
.cc-pin-box{flex:1; height:56px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; color:var(--text); transition:all .15s;}
.cc-pin-box.filled{border-color:color-mix(in srgb,var(--accent) 55%, transparent); background:var(--accent-soft); color:var(--accent);}
.cc-pin-box.cursor{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.cc-pin-box.err{border-color:#f43f5e; background:rgba(244,63,94,.1); color:#f43f5e;}

/* ---- Logo picker ------------------------------------------- */
.cc-logo-tile{width:80px; height:80px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:42px; flex-shrink:0; position:relative;
  border:1px solid color-mix(in srgb,var(--lt) 38%, transparent); background:color-mix(in srgb,var(--lt) 18%, var(--surface-2));
  box-shadow:0 8px 22px color-mix(in srgb,var(--lt) 30%, transparent);}
.cc-logo-cam{position:absolute; bottom:-5px; right:-5px; width:28px; height:28px; border-radius:50%; background:var(--lt); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; border:2px solid var(--surface-solid);}
.cc-emoji-chip{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--surface-2); border:1px solid var(--border); transition:transform .12s, border-color .15s;}
.cc-emoji-chip:active{transform:scale(.9);}
.cc-emoji-chip.on{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.05);}
.cc-swatch{width:30px; height:30px; border-radius:9px; border:2px solid transparent; transition:transform .12s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.cc-swatch.on{transform:scale(1.12); box-shadow:0 0 0 2px var(--surface-solid), 0 0 0 4px var(--sw);}

/* ---- Payment method rows ----------------------------------- */
.cc-pay-method{padding:12px; border-radius:15px; background:var(--surface-2); border:1px solid var(--border-2); margin-bottom:10px; transition:border-color .2s;}
.cc-pay-method.on{border-color:color-mix(in srgb,var(--accent) 35%, transparent); background:color-mix(in srgb,var(--accent) 7%, var(--surface-2));}
.cc-pay-ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; color:#fff;}

/* ---- Group cards / hub ------------------------------------- */
.cc-glogo{border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--gt) 38%, transparent); background:color-mix(in srgb,var(--gt) 18%, var(--surface-2));}
.cc-role{font-size:9.5px; font-weight:900; padding:3px 9px; border-radius:7px; white-space:nowrap; letter-spacing:.2px;}
.cc-role.owner{color:#fff; background:var(--accent-grad); box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-role.member{color:var(--dim); background:var(--surface-2); border:1px solid var(--border);}
.cc-priv{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--dimmer); white-space:nowrap;}
.cc-priv i{font-size:9.5px;}
.cc-gstat{display:flex; align-items:baseline; gap:4px;}
.cc-gstat b{font-size:18px; font-weight:900; color:var(--text); line-height:1;}
.cc-gstat span{font-size:10.5px; color:var(--dimmer);}

/* ---- Manage hero ------------------------------------------- */
.cc-ghero{padding:54px 16px 18px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb,var(--gt) 30%, var(--bg)) 0%, var(--bg) 62%);}
.cc-ghero-logo{width:66px; height:66px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0;
  background:color-mix(in srgb,var(--gt) 22%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--gt) 45%, transparent);
  box-shadow:0 10px 26px color-mix(in srgb,var(--gt) 34%, transparent);}
.cc-ghero-back{position:absolute; top:52px; left:14px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.32); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:5; border:1px solid rgba(255,255,255,.12);}
.cc-locked-pill{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:10px; font-weight:800; color:#f59e0b; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.3); padding:3px 9px; border-radius:8px;}

/* ---- Guest (browsing a public group I haven't joined) ------ */
.cc-guest-note{display:flex; align-items:flex-start; gap:7px; margin-top:9px; font-size:11px; line-height:1.5; color:var(--dim);}
.cc-guest-note i{color:var(--accent); margin-top:2px; flex-shrink:0;}
.cc-guest-pending{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:14px; font-size:13px; font-weight:800; color:#f59e0b; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.3);}
.cc-round-guestlock{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; font-size:10px; color:var(--dim); background:var(--surface-2); border:1px solid var(--border);}

/* ---- Inner tab bar ----------------------------------------- */
.cc-tabbar{display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px;}
.cc-tabbar button{flex:1; padding:9px 3px; border-radius:10px; font-size:11.5px; font-weight:700; color:var(--dim); transition:all .18s; display:flex; align-items:center; justify-content:center; gap:5px; position:relative;}
.cc-tabbar button.on{background:var(--accent-grad); color:#fff; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-tabbar-badge{position:absolute; top:2px; right:6px; min-width:15px; height:15px; padding:0 3px; font-size:9px; font-weight:900; background:#f43f5e; color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center;}

/* ---- Round cards ------------------------------------------- */
.cc-round-card{padding:14px; margin-bottom:10px;}
.cc-round-card:last-child{margin-bottom:0;}
.cc-round-status{font-size:10px; font-weight:800; padding:3px 9px; border-radius:7px; white-space:nowrap;}
.cc-round-status.open{color:#22c55e; background:rgba(34,197,94,.14);}
.cc-round-status.full{color:#f59e0b; background:rgba(245,158,11,.14);}
.cc-round-status.closed{color:var(--dimmer); background:var(--surface-2);}
.cc-round-status.playing{color:#0ea5e9; background:rgba(14,165,233,.14);}

/* ---- Round phase UI (open → playing → settled) -------------- */
.cc-phase-banner{display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:15px; margin-bottom:12px; font-size:12.5px;
  background:linear-gradient(150deg, rgba(14,165,233,.14), color-mix(in srgb, #0ea5e9 6%, var(--surface)));
  border:1px solid rgba(14,165,233,.34); color:var(--text);}
.cc-phase-banner > i{font-size:18px; color:#0ea5e9; flex-shrink:0; width:24px; text-align:center;}
.cc-phase-banner > div > b{display:block; font-size:12.5px; font-weight:900; color:var(--text);}
.cc-phase-banner > div > span{display:block; font-size:11px; color:var(--dim); font-weight:600; margin-top:2px; text-wrap:pretty;}
.cc-phase-undo{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:6px 10px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--dim); flex-shrink:0;}
.cc-phase-undo i{font-size:10px;}
.cc-phase-undo:active{transform:scale(.96);}
/* settled-phase recovery banner (green) — undo an accidental "สรุปยอด" */
.cc-phase-banner.settled{background:linear-gradient(150deg, rgba(34,197,94,.14), color-mix(in srgb, #22c55e 6%, var(--surface))); border-color:rgba(34,197,94,.34);}
.cc-phase-banner.settled > i{color:#22c55e;}
.cc-phase-banner.settled .cc-phase-undo{color:#22c55e; border-color:rgba(34,197,94,.42); background:color-mix(in srgb, #22c55e 14%, var(--surface-2));}

.cc-shuttle-edit{display:flex; flex-direction:column; gap:10px; padding:12px; margin-top:10px; margin-bottom:4px;
  background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 11%, var(--surface-2)), var(--surface-2));
  border:1px dashed color-mix(in srgb, var(--accent) 38%, transparent); border-radius:13px;}
.cc-shuttle-edit-l{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--text);}
.cc-shuttle-edit-l > i{color:var(--accent); font-size:13px;}
.cc-shuttle-edit-l > span{font-size:10.5px; font-weight:600; color:var(--dimmer); margin-left:auto;}

.cc-stage-cta{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.cc-stage-hint{display:flex; align-items:flex-start; gap:7px; font-size:11px; color:var(--dim); padding:9px 11px; line-height:1.55;
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:11px; font-weight:600; text-wrap:pretty;}
.cc-stage-hint > i{color:var(--accent); font-size:11px; margin-top:2px; flex-shrink:0;}
.cc-stage-hint b{font-weight:900; color:var(--text);}

/* PromptPay / QR card shown after settlement */
.cc-settle-qr{background:linear-gradient(150deg, color-mix(in srgb, var(--gt) 10%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--gt) 28%, var(--border));}
.cc-settle-pill{font-size:11px; font-weight:900; padding:4px 10px; border-radius:9px;
  color:var(--gt); background:color-mix(in srgb, var(--gt) 14%, transparent); border:1px solid color-mix(in srgb, var(--gt) 30%, transparent);}
.cc-settle-qr-body{display:flex; align-items:center; gap:13px;}
.cc-settle-qr-img{width:118px; height:118px; flex-shrink:0; border-radius:14px; background:#fff; padding:8px; position:relative;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--gt) 25%, transparent);}
/* the PromptPay QR SVG is emitted at a FIXED ~123px; scale it to fit the box so it
   never spills into the info column (it was covering the number + คัดลอก/แชร์ buttons) */
.cc-settle-qr-img > div{max-width:100%; max-height:100%;}
.cc-settle-qr-img svg{width:100%; height:auto; display:block;}
.cc-qrgrid{position:absolute; inset:9px; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr); gap:1px; border-radius:6px; overflow:hidden;}
.cc-qrgrid > span{width:100%; height:100%;}
.cc-qrlogo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:7px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 0 0 3px #fff;}
.cc-settle-foot{display:flex; align-items:flex-start; gap:7px; font-size:10.5px; font-weight:600; color:var(--dim); margin-top:11px; padding-top:11px; line-height:1.55;
  border-top:1px solid var(--border-2); text-wrap:pretty;}
.cc-settle-foot > i{color:var(--accent); font-size:11px; margin-top:1.5px; flex-shrink:0;}
.cc-round-meta{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim); font-weight:600; white-space:nowrap;}
.cc-round-meta i{color:var(--accent); font-size:11px; width:13px; text-align:center;}

/* ---- Member / signup rows ---------------------------------- */
.cc-pending-cta{display:flex; align-items:center; gap:11px; padding:12px 13px; margin-bottom:14px; border-radius:16px; cursor:pointer;
  background:color-mix(in srgb,#f59e0b 12%, var(--surface)); backdrop-filter:blur(20px);
  border:1px solid rgba(245,158,11,.32); box-shadow:var(--card-shadow); transition:transform .12s, box-shadow .2s;}
.cc-pending-cta:active{transform:scale(.985);}
.cc-pending-ic{width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 4px 10px rgba(245,158,11,.35);}
.cc-member-row{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2);}
/* Compact 2-column roster — "ผู้เล่นที่ลงรอบ". Halves the list height; each chip
   stays tappable (→ playerDetail). Name truncates; "คุณ" badge + crown never shrink. */
.cc-roster-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px;}
.cc-roster-chip{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2); min-width:0;}
.cc-roster-chip.me{border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 9%, var(--surface-2));}
.cc-roster-name{display:flex; align-items:center; gap:4px; min-width:0; font-size:12px; font-weight:800; color:var(--text); line-height:1.25;}
.cc-roster-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.cc-roster-name .cc-you, .cc-roster-name > i{flex-shrink:0;}
.cc-roster-rank{font-size:10px; color:var(--dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- Player profile page ----------------------------------- */
.cc-pp-info{display:flex; align-items:center; gap:12px; padding:12px 13px;}
.cc-pp-info.bordered{border-bottom:1px solid var(--border-2);}
.cc-pp-info > i{width:18px; text-align:center; color:var(--accent); font-size:14px; flex-shrink:0;}
.cc-pp-info-l{font-size:12.5px; font-weight:700; color:var(--dim); flex-shrink:0;}
.cc-pp-info-v{font-size:12.5px; font-weight:700; color:var(--text); margin-left:auto; text-align:right; text-wrap:pretty;}
.cc-pp-days{display:flex; gap:6px;}
.cc-pp-day{flex:1; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:var(--dimmer); background:var(--surface-2); border:1px solid var(--border-2);}
.cc-pp-day.on{color:#fff; background:var(--accent-grad); border-color:transparent; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-pp-round{display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border-2); transition:transform .12s;}
.cc-pp-round:active{transform:scale(.98);}
.cc-pp-report{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:6px;
  padding:12px; border-radius:14px; font-size:12.5px; font-weight:800; color:var(--dimmer);
  background:transparent; border:1px solid var(--border);}
.cc-pp-report:active{transform:scale(.98);}
.cc-msg-av{background:none; border:none; padding:0; display:flex; flex-shrink:0; cursor:pointer;}
.cc-msg-name.cc-tap{cursor:pointer;}

/* ---- Edit-group hero --------------------------------------- */
.cc-ge-hero{display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; margin-bottom:14px;
  background:linear-gradient(140deg, color-mix(in srgb,var(--gt) 18%, var(--surface)), color-mix(in srgb,var(--gt) 5%, var(--surface)));
  border:1px solid color-mix(in srgb,var(--gt) 30%, var(--border));}

/* ---- Round edit screen ------------------------------------- */
.cc-round-edit-btn{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:5px 10px; border-radius:9px; margin-left:auto;
  color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 32%, transparent); white-space:nowrap;}
.cc-round-edit-btn:active{transform:scale(.96);}
.cc-round-edit-btn i{font-size:10px;}

.cc-re-notify{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:14px; margin-bottom:14px; text-align:left;
  background:linear-gradient(140deg, rgba(14,165,233,.13), color-mix(in srgb, #0ea5e9 6%, var(--surface)));
  border:1px solid rgba(14,165,233,.32);}
.cc-re-notify > i{color:#0ea5e9; font-size:16px; margin-top:1px; flex-shrink:0;}
.cc-re-notify > div > b{display:block; font-size:12px; font-weight:900; color:var(--text); line-height:1.3;}
.cc-re-notify > div > span{display:block; font-size:11px; color:var(--dim); font-weight:600; margin-top:3px; line-height:1.4;}
.cc-re-notify > div > span b{font-weight:900; color:var(--text);}
.cc-re-draft{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:12px; margin:-4px 0 14px; font-size:11px; font-weight:700; color:#b45309; line-height:1.4;
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30);}
.cc-re-draft > i{color:#f59e0b; font-size:13px; flex-shrink:0;}
.cc-re-draft b{font-weight:900; color:var(--text);}

/* before/after cost preview */
.cc-re-cost-diff{display:flex; align-items:stretch; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-2);}
.cc-re-cost-diff > i{align-self:center; font-size:14px; opacity:.6;}
.cc-re-cost-side{flex:1; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2); text-align:left;}
.cc-re-cost-side > span{display:block; font-size:10px; font-weight:700; color:var(--dimmer); text-transform:uppercase; letter-spacing:.4px;}
.cc-re-cost-side > b{display:block; font-size:18px; font-weight:900; color:var(--text); margin-top:3px; line-height:1.1;}
.cc-re-cost-side > small{display:block; font-size:10.5px; font-weight:700; color:var(--dim); margin-top:2px;}
.cc-re-cost-side.after.changed{background:color-mix(in srgb,var(--gt) 11%, var(--surface-2)); border-color:color-mix(in srgb,var(--gt) 32%, transparent);}
.cc-re-cost-side.after.changed > b{color:var(--gt);}

/* live diff summary */
.cc-re-diff-head{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:var(--text); margin-bottom:9px;}
.cc-re-diff-head > i{color:var(--accent);}
.cc-re-diff-row{display:flex; align-items:center; gap:7px; font-size:11.5px; padding:4px 0; flex-wrap:wrap;}
.cc-re-diff-row > span:first-child{flex:0 0 86px; font-weight:700; color:var(--dim);}
.cc-re-diff-row .from{padding:2px 8px; border-radius:7px; background:var(--surface-2); color:var(--dimmer); font-weight:700; text-decoration:line-through; text-decoration-color:rgba(244,63,94,.55);}
.cc-re-diff-row > i{color:var(--accent); font-size:10px;}
.cc-re-diff-row .to{padding:2px 8px; border-radius:7px; color:#22c55e; background:rgba(34,197,94,.13); font-weight:900;}

/* "อัปเดตจากผู้จัด" timeline on round detail */
.cc-rupdates{background:linear-gradient(150deg, rgba(14,165,233,.09), var(--surface)); border-color:rgba(14,165,233,.30);}
.cc-rupdates-head{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:900; color:var(--text); margin-bottom:11px; white-space:nowrap;}
.cc-rupdates-head > i{color:#0ea5e9; font-size:13px;}
.cc-rupdates-head > span{margin-left:auto; font-size:10px; font-weight:800; padding:3px 8px; border-radius:7px; color:#0ea5e9; background:rgba(14,165,233,.13); white-space:nowrap;}
.cc-rupdates-item{position:relative; padding:8px 0 8px 18px; border-left:2px solid rgba(14,165,233,.32); margin-left:4px;}
.cc-rupdates-item:not(:last-child){border-bottom:1px dashed var(--border-2); padding-bottom:11px; margin-bottom:4px;}
.cc-rupdates-item::before{content:''; position:absolute; left:-5px; top:13px; width:8px; height:8px; border-radius:50%; background:#0ea5e9; box-shadow:0 0 0 3px color-mix(in srgb, #0ea5e9 30%, var(--surface));}
.cc-rupdates-time{display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--dimmer); margin-bottom:5px;}
.cc-rupdates-time > i{font-size:9.5px;}
.cc-rupdates-chg{display:flex; align-items:center; gap:6px; font-size:11.5px; padding:2px 0; flex-wrap:wrap;}
.cc-rupdates-chg .lbl{flex:0 0 auto; font-weight:700; color:var(--dim); white-space:nowrap; min-width:72px;}
.cc-rupdates-chg .from{padding:1.5px 7px; border-radius:6px; background:var(--surface-2); color:var(--dimmer); font-weight:700; text-decoration:line-through; text-decoration-color:rgba(244,63,94,.55); white-space:nowrap;}
.cc-rupdates-chg > i{color:#0ea5e9; font-size:9px;}
.cc-rupdates-chg .to{padding:1.5px 7px; border-radius:6px; color:#0ea5e9; background:rgba(14,165,233,.14); font-weight:900; white-space:nowrap;}
.cc-rupdates-note{display:flex; align-items:flex-start; gap:6px; margin-top:7px; padding:7px 10px; border-radius:9px; background:var(--surface-2); font-size:11.5px; font-weight:600; color:var(--text); line-height:1.45; text-wrap:pretty;}
.cc-rupdates-note > i{color:var(--accent); font-size:10px; margin-top:2px; flex-shrink:0;}

/* ---- Round extras: quick actions row + sheets -------------- */
.cc-rx-actions{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px;}
.cc-rx-act{flex:1 1 auto; min-width:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:11px 8px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); text-align:center; min-height:70px;}
.cc-rx-act:active{transform:scale(.96);}
.cc-rx-act > i{font-size:17px; flex-shrink:0;}
.cc-rx-act > span{font-size:10.5px; font-weight:800; line-height:1.2; white-space:nowrap;}

/* Bottom sheet inner shell (uses shared Sheet from ui.jsx). Body height is
   owned by the Sheet's flex scroll wrapper (sized to the app card, not the
   viewport); a vh cap here would overflow the wrapper on the floating-card
   desktop/tablet paths and bury the footer below the fold. */
.cc-rx-body{padding:4px 2px 6px;}
.cc-rx-foot{padding:12px 0 0; border-top:1px solid var(--border-2); margin-top:8px; flex-shrink:0;}
.cc-rx-desc{font-size:11.5px; color:var(--dim); font-weight:600; line-height:1.55; margin-bottom:12px; text-wrap:pretty;}

/* preset chip row */
.cc-rx-pillrow{display:flex; gap:7px; flex-wrap:wrap;}
.cc-rx-pillrow.wrap{flex-wrap:wrap;}
.cc-rx-pill{padding:8px 13px; border-radius:10px; font-size:12px; font-weight:800; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text);}
.cc-rx-pill.on{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 32%, transparent);}
.cc-rx-preset{padding:8px 12px; border-radius:10px; font-size:11.5px; font-weight:700; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text); text-align:left;}
.cc-rx-preset:active{transform:scale(.97);}

/* extend diff */
.cc-rx-diff{margin-top:14px; padding:11px 12px; border-radius:13px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-rx-diff-row{display:flex; align-items:center; gap:8px; font-size:12px; padding:4px 0;}
.cc-rx-diff-row > span{flex:0 0 80px; font-weight:700; color:var(--dim); font-size:11px;}
.cc-rx-diff-row > b{font-weight:900; color:var(--dimmer);}
.cc-rx-diff-row > i{color:var(--accent); font-size:10px;}
.cc-rx-diff-row > b.hi{color:#22c55e;}

/* Match rows */
.cc-match-list{display:flex; flex-direction:column; gap:10px;}
.cc-match-row{padding:11px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-match-head{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.cc-match-head > b{font-size:12px; font-weight:900; color:var(--text);}
.cc-match-win{font-size:10px; font-weight:800; padding:2px 8px; border-radius:7px; color:var(--gt); background:color-mix(in srgb,var(--gt) 14%, transparent); white-space:nowrap;}
.cc-match-del{margin-left:auto; width:26px; height:26px; border-radius:50%; background:var(--surface); color:var(--dimmer); display:flex; align-items:center; justify-content:center; font-size:11px; border:1px solid var(--border-2);}
.cc-match-del:active{background:#fee2e2; color:#dc2626;}
.cc-match-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center;}
.cc-match-team{display:flex; flex-direction:column; gap:5px; min-width:0;}
.cc-match-label{font-size:10px; font-weight:800; color:var(--dimmer); text-transform:uppercase; letter-spacing:.4px;}
.cc-match-slot{display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:10px; background:var(--surface); border:1px solid var(--border-2); font-size:11px; font-weight:700; color:var(--text); min-width:0;}
.cc-match-slot:active{background:var(--accent-soft);}
.cc-match-slot > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cc-match-score{display:flex; align-items:center; gap:4px; font-weight:900; font-size:16px;}
.cc-match-score > input{width:42px; padding:5px; border-radius:8px; background:var(--surface); border:1px solid var(--border-2); color:var(--text); font-weight:900; font-size:16px; text-align:center; font-family:ui-monospace,monospace;}
.cc-match-score > span{color:var(--dimmer);}
.cc-rx-add{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:12px; border:1.5px dashed var(--border); background:transparent; color:var(--dim); font-size:12px; font-weight:800;}
.cc-rx-add:active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}

/* Match recap (settled view) */
.cc-match-recap{display:flex; align-items:center; gap:7px; padding:7px 0; font-size:12px; border-bottom:1px dashed var(--border-2);}
.cc-match-recap:last-child{border-bottom:none;}
.cc-match-recap-n{flex:0 0 28px; font-size:10px; font-weight:900; color:var(--dimmer);}
.cc-match-recap-side{display:flex; align-items:center; gap:5px; flex:1; padding:5px 8px; border-radius:9px; background:var(--surface-2);}
.cc-match-recap-side > b{font-size:13.5px; font-weight:900; color:var(--text);}
.cc-match-recap-side.win{background:rgba(34,197,94,.13);}
.cc-match-recap-side.win > b{color:#22c55e;}
.cc-match-recap-vs{font-size:9px; font-weight:800; color:var(--dimmer); white-space:nowrap;}

/* MVP */
.cc-mvp-list{display:flex; flex-direction:column; gap:7px; margin-top:6px;}
.cc-mvp-row{display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2); text-align:left;}
.cc-mvp-row.on{background:rgba(139,92,246,.13); border-color:rgba(139,92,246,.36);}
.cc-mvp-row-n{font-size:12.5px; font-weight:800; color:var(--text);}
.cc-mvp-bar{height:5px; border-radius:3px; background:var(--surface); overflow:hidden; margin-top:5px;}
.cc-mvp-bar > span{display:block; height:100%; background:#8b5cf6; transition:width .3s;}
.cc-mvp-count{font-size:11px; font-weight:900; color:var(--dim); white-space:nowrap; padding:3px 8px; border-radius:7px; background:var(--surface);}
.cc-mvp-status{display:flex; align-items:center; gap:7px; margin-top:11px; padding:9px 11px; border-radius:11px; background:var(--surface-2); font-size:11.5px; font-weight:700; color:var(--dim);}
.cc-mvp-status > i{color:var(--accent);}
.cc-mvp-status > b{color:var(--text); font-weight:900;}
.cc-mvp-winner{display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 12px; border-radius:16px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--gt) 16%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb,var(--gt) 30%, var(--border));}
.cc-mvp-name{font-size:15px; font-weight:900; color:var(--text);}
.cc-mvp-sub{font-size:11.5px; color:var(--dim); font-weight:700;}
.cc-mvp-card{background:linear-gradient(150deg, color-mix(in srgb,var(--gt) 14%, var(--surface)), var(--surface));
  border-color:color-mix(in srgb,var(--gt) 30%, var(--border));}

/* ---- Cancel + refund ---------------------------------------- */
.cc-round-status.cancelled{color:#f43f5e; background:rgba(244,63,94,.14);}
.cc-rx-act.danger{background:rgba(244,63,94,.07); border-color:rgba(244,63,94,.32);}
.cc-rx-act.danger:active{background:rgba(244,63,94,.14);}

/* "we are not an intermediary" disclaimer */
.cc-cx-disclaim{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:13px; text-align:left;
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30);}
.cc-cx-disclaim > i{color:#f59e0b; font-size:14px; margin-top:1px; flex-shrink:0;}
.cc-cx-disclaim > div > b{display:block; font-size:12px; font-weight:900; color:var(--text); line-height:1.3;}
.cc-cx-disclaim > div > span{display:block; font-size:11px; color:var(--dim); font-weight:600; margin-top:3px; line-height:1.45; text-wrap:pretty;}
.cc-cx-disclaim > div > span b{font-weight:900; color:var(--text);}
.cc-cx-disclaim.small{padding:8px 11px; margin-bottom:9px;}
.cc-cx-disclaim.small > i{font-size:12px;}
.cc-cx-disclaim.small > span{font-size:11px; color:var(--dim); font-weight:600; line-height:1.45;}

/* reason chips */
.cc-cx-reasons{display:flex; flex-direction:column; gap:7px;}
.cc-cx-reason{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; text-align:left;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text);}
.cc-cx-reason > i:first-child{font-size:14px; color:var(--rt); width:18px; text-align:center; flex-shrink:0;}
.cc-cx-reason > span{font-size:12.5px; font-weight:800; flex:1;}
.cc-cx-reason.on{background:color-mix(in srgb,var(--rt) 12%, var(--surface-2)); border-color:color-mix(in srgb,var(--rt) 36%, transparent);}
.cc-cx-reason .check{color:var(--rt); font-size:14px;}

.cc-cx-rprev-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.cc-cx-rprev-head > i{font-size:14px;}
.cc-cx-rprev-head > b{font-size:12.5px; font-weight:900; color:var(--text);}
.cc-cx-payer-list{display:flex; flex-direction:column; gap:6px; margin-bottom:9px;}
.cc-cx-payer{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:10px; background:var(--surface);}
.cc-cx-payer > span{font-size:12px; font-weight:700; color:var(--text); flex:1;}
.cc-cx-payer > b{font-size:12.5px; font-weight:900; color:#f43f5e;}
.cc-cx-rprev-foot{display:flex; align-items:flex-start; gap:7px; font-size:10.5px; font-weight:600; color:var(--dim); line-height:1.45; padding-top:9px; border-top:1px dashed var(--border-2);}
.cc-cx-rprev-foot > i{color:var(--accent); font-size:11px; margin-top:2px; flex-shrink:0;}

/* Cancelled banner at top of detail */
.cc-cx-banner{padding:13px 14px; border-radius:15px; margin-bottom:12px;
  background:linear-gradient(140deg, rgba(244,63,94,.14), color-mix(in srgb, #f43f5e 6%, var(--surface)));
  border:1px solid rgba(244,63,94,.32);}
.cc-cx-banner-head{display:flex; align-items:flex-start; gap:11px;}
.cc-cx-banner-head > i{font-size:18px; color:#f43f5e; flex-shrink:0; width:24px; text-align:center; margin-top:1px;}
.cc-cx-banner-head > div > b{display:block; font-size:13.5px; font-weight:900; color:var(--text); line-height:1.3;}
.cc-cx-banner-head > div > span{display:block; font-size:11.5px; color:var(--dim); font-weight:700; margin-top:3px;}
.cc-cx-banner-note{display:flex; align-items:flex-start; gap:7px; margin-top:9px; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.04);
  font-size:11.5px; font-weight:600; color:var(--text); line-height:1.5; text-wrap:pretty;}
.cc-cx-banner-note > i{color:var(--accent); font-size:11px; margin-top:1.5px; flex-shrink:0;}

/* Refund checklist (owner) */
.cc-cx-checklist.done{background:linear-gradient(150deg, rgba(34,197,94,.08), var(--surface)); border-color:rgba(34,197,94,.30);}
.cc-cx-cl-head{display:flex; align-items:center; gap:8px; margin-bottom:11px;}
.cc-cx-cl-head > i{color:#f43f5e; font-size:13px;}
.cc-cx-checklist.done .cc-cx-cl-head > i{color:#22c55e;}
.cc-cx-cl-head > b{font-size:12.5px; font-weight:900; color:var(--text); flex:1; min-width:0;}
.cc-cx-cl-amt{font-size:11px; font-weight:900; padding:3px 9px; border-radius:8px; background:rgba(244,63,94,.13); color:#f43f5e;}
.cc-cx-cl-list{display:flex; flex-direction:column; gap:6px;}
.cc-cx-cl-row{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cx-cl-row.done{background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.24);}
.cc-cx-cl-name{font-size:12.5px; font-weight:800; color:var(--text);}
.cc-cx-cl-meta{display:flex; align-items:center; gap:7px; margin-top:3px;}
.cc-cx-cl-meta > b{font-size:12px; font-weight:900;}
.cc-cx-cl-tag{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px; white-space:nowrap;}
.cc-cx-cl-tag i{font-size:9px;}
.cc-cx-cl-tag.pending{color:#f59e0b; background:rgba(245,158,11,.14);}
.cc-cx-cl-tag.done{color:#22c55e; background:rgba(34,197,94,.14);}
.cc-cx-cl-msg, .cc-cx-cl-undo{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;
  background:var(--surface); border:1px solid var(--border-2); color:var(--dim); flex-shrink:0;}
.cc-cx-cl-msg:active, .cc-cx-cl-undo:active{transform:scale(.9);}
.cc-cx-cl-check{display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:10px; font-size:11.5px; font-weight:900; white-space:nowrap;
  background:#22c55e; color:#fff; border:none;}
.cc-cx-cl-check i{font-size:10px;}
.cc-cx-cl-check:active{transform:scale(.95);}

/* Await refund (paid player) */
.cc-cx-await{background:linear-gradient(150deg, color-mix(in srgb,var(--rt) 11%, var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--rt) 30%, var(--border));}
.cc-cx-await-head{display:flex; align-items:flex-start; gap:11px; margin-bottom:13px;}
.cc-cx-await-head > i{font-size:22px; color:var(--rt); flex-shrink:0; margin-top:1px;}
.cc-cx-await-head > div > b{display:block; font-size:13.5px; font-weight:900; color:var(--text);}
.cc-cx-await-head > div > span{display:block; font-size:11.5px; color:var(--dim); font-weight:600; margin-top:4px; line-height:1.45; text-wrap:pretty;}
.cc-cx-await-org{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cx-cnt{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
  background:var(--accent); border:none;}
.cc-cx-cnt:active{transform:scale(.92);}
.cc-cx-cnt:first-of-type{background:#06c755;}
.cc-cx-await-note{display:flex; align-items:center; gap:7px; margin-top:10px; padding:7px 10px; border-radius:9px; background:rgba(245,158,11,.10);
  font-size:11px; font-weight:600; color:var(--dim); line-height:1.45;}
.cc-cx-await-note > i{color:#f59e0b; font-size:11px;}

/* emoji used in an icon slot (e.g. 🏸 for badminton instead of a paddle glyph) */
.cc-ico-em{line-height:1; display:inline-block;}
.cc-pp-info > .cc-ico-em{width:18px; text-align:center; font-size:15px; flex-shrink:0;}
.cc-stat-tile > .cc-ico-em{font-size:18px; margin-bottom:5px;}
.cc-field-label > .cc-ico-em{font-size:13px; margin-right:7px;}
.cc-input > .cc-ico-em{font-size:14px; width:17px; text-align:center; flex-shrink:0;}
/* Custom SVG glyph wrapper (CcIcon) — behaves like an FA <i>: size follows the
   inherited font-size (svg is 1em), color follows currentColor, spacing follows
   the same margin/gap rules that target <i>. Drop-in for <i className="fa-solid">. */
.cc-svgi{display:inline-flex; align-items:center; justify-content:center; line-height:0; vertical-align:-0.125em;}
.cc-svgi > svg{width:1em; height:1em; display:block;}

/* ---- Player reliability / reputation (เครดิตผู้เล่น) -------- */
.cc-rep-pill{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:9px; white-space:nowrap; line-height:1;
  font-size:12.5px; font-weight:900; color:var(--rt); background:color-mix(in srgb,var(--rt) 14%, transparent); border:1px solid color-mix(in srgb,var(--rt) 34%, transparent);}
.cc-rep-pill i{font-size:11px;}
.cc-rep-pill small{font-size:9px; font-weight:700; opacity:.8; margin-left:1px;}
.cc-rep-pill.mini{padding:3px 7px; font-size:11.5px; border-radius:8px;}
.cc-rep-pill.mini i{font-size:10px;}

.cc-rep-card{background:linear-gradient(150deg, color-mix(in srgb,var(--rt) 13%, var(--surface)), var(--surface)); box-shadow:var(--card-shadow), 0 0 30px color-mix(in srgb,var(--rt) 14%, transparent);}
.cc-rep-tier{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:900; color:var(--rt); white-space:nowrap;
  background:color-mix(in srgb,var(--rt) 15%, transparent); border:1px solid color-mix(in srgb,var(--rt) 32%, transparent); padding:4px 11px; border-radius:9px;}
.cc-rep-tier i{font-size:12px;}
.cc-rep-mini{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--text); white-space:nowrap;}
.cc-rep-chip{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; white-space:nowrap; padding:4px 9px; border-radius:8px;
  color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2);}
.cc-rep-chip i{font-size:10px; color:var(--dimmer);}
.cc-rep-chip.good{color:#22c55e; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.26);}
.cc-rep-chip.good i{color:#22c55e;}
.cc-rep-chip.bad{color:#f43f5e; background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.26);}
.cc-rep-chip.bad i{color:#f43f5e;}

.cc-rep-head{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:var(--text); margin-bottom:9px; white-space:nowrap;}
.cc-rep-head i{color:var(--accent); font-size:12px;}
.cc-rep-metric{display:flex; align-items:center; gap:8px; padding:5px 0;}
.cc-rep-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.cc-rep-metric > i{font-size:11px; width:14px; text-align:center; flex-shrink:0;}
.cc-rep-metric-l{font-size:11.5px; font-weight:700; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-rep-metric-v{font-size:14px; font-weight:900; margin-left:auto;}

.cc-rep-tl{display:flex; flex-direction:column;}
.cc-rep-tl-item{position:relative; display:flex; gap:11px; padding:7px 4px;}
.cc-rep-tl-item::before{content:''; position:absolute; left:18px; top:38px; bottom:-3px; width:2px; background:var(--border); border-radius:2px;}
.cc-rep-tl-item:last-child::before{display:none;}
.cc-rep-tl-ic{width:30px; height:30px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; z-index:1;
  color:var(--et); background:color-mix(in srgb,var(--et) 16%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--et) 32%, transparent);}
.cc-rep-gtag{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; white-space:nowrap; padding:2px 7px; border-radius:7px;
  color:color-mix(in srgb,var(--gt) 80%, var(--text)); background:color-mix(in srgb,var(--gt) 14%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--gt) 28%, transparent);}

.cc-rep-howto{display:flex; align-items:flex-start; gap:9px; text-align:left; padding:12px 13px; border-radius:14px; margin-bottom:12px;
  background:var(--surface-2); border:1px solid var(--border-2); font-size:11.5px; font-weight:600; color:var(--dim); line-height:1.5;}
.cc-rep-howto i{color:var(--accent); margin-top:1px; flex-shrink:0;}

/* member row reliability strip */
.cc-member-row .cc-rep-pill, .cc-pay-row .cc-rep-pill{flex-shrink:0;}

/* ---- Help article / legal doc / feedback pages ------------- */
.cc-art-hero{text-align:center; padding:8px 6px 18px;}
.cc-art-hero-ic{width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-size:27px; color:#fff; background:linear-gradient(135deg, var(--ht), color-mix(in srgb,var(--ht) 65%, #000));
  box-shadow:0 10px 24px color-mix(in srgb,var(--ht) 36%, transparent);}
.cc-art-title{font-size:21px; font-weight:900; color:var(--text); letter-spacing:-.3px;}
.cc-art-intro{font-size:13px; color:var(--dim); line-height:1.65; margin-top:8px; text-wrap:pretty; max-width:34ch; margin-left:auto; margin-right:auto;}
.cc-art-p{font-size:13px; color:var(--dim); line-height:1.75; text-wrap:pretty;}
.cc-art-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.cc-art-step{display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--text); line-height:1.6; padding:3px 12px 3px 4px;}
.cc-art-num{flex-shrink:0; width:24px; height:24px; border-radius:50%; color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:1px;}
.cc-art-vote{display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:13px; font-size:12.5px; font-weight:800;
  color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%, transparent); transition:transform .12s;}
.cc-art-vote.no{color:var(--dim); background:var(--surface-2); border-color:var(--border);}
.cc-art-vote:active{transform:scale(.94);}
.cc-art-thanks{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:800; color:#22c55e; padding:4px;}
.cc-art-bullets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.cc-art-bullet{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--dim); line-height:1.7; text-wrap:pretty;}
.cc-art-bullet b{color:var(--text); font-weight:800;}
.cc-art-dot{flex-shrink:0; width:6px; height:6px; border-radius:50%; margin-top:8px;}

.cc-fb-cats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px;}
.cc-fb-cat{padding:9px 14px; border-radius:12px; font-size:12.5px; font-weight:700; color:var(--dim);
  background:var(--surface-2); border:1px solid var(--border-2); transition:transform .12s;}
.cc-fb-cat:active{transform:scale(.95);}
.cc-fb-cat.on{color:#fff; background:linear-gradient(135deg, var(--ht), color-mix(in srgb,var(--ht) 70%, #000)); border-color:transparent;}
.cc-fb-note{display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:11.5px; color:var(--dimmer); line-height:1.55;}
.cc-fb-note i{margin-top:2px; color:var(--accent);}

/* ---- Court Manager (จัดคิวคอร์ท) --------------------------- */
.cc-cm-live{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; color:#22c55e;}
.cc-cm-live i{font-size:7px; animation:cc-cmpulse 1.5s ease-in-out infinite;}
@keyframes cc-cmpulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.cc-cm-toolbar{display:flex; gap:8px; margin-bottom:11px;}
.cc-cm-setsummary{flex:1; min-width:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.cc-cm-setpill{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:6px 8px; white-space:nowrap;}
.cc-cm-setpill i{font-size:11px; color:var(--accent);}
.cc-cm-modeseg{flex:1; display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px;}
.cc-cm-modeseg button{flex:1; height:34px; border-radius:9px; font-size:12px; font-weight:800; color:var(--dim); display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:all .18s;}
.cc-cm-modeseg button.on{background:var(--accent-grad); color:#fff; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-cm-auto{padding:0 14px; border-radius:13px; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 30%, transparent); font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:transform .12s;}
.cc-cm-auto:active{transform:scale(.95);} .cc-cm-auto:disabled{opacity:.4;}
.cc-cm-rectoggle{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; border-radius:10px; padding:11px 10px; border:1px solid; white-space:nowrap; transition:all .16s;}
.cc-cm-rectoggle i{font-size:14px;}
.cc-cm-rectoggle.on{color:#16a34a; background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.32);}
.cc-cm-rectoggle.off{color:var(--dimmer); background:var(--surface-2); border-color:var(--border);}
.cc-cm-rectoggle:active{transform:scale(.95);}

.cc-cm-hint{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; font-size:11.5px; font-weight:600; line-height:1.45; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); margin-bottom:14px;}
.cc-cm-hint.active{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-cm-hint i{color:var(--accent); flex-shrink:0;}

.cc-cm-mybanner{display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; color:#fff; background:var(--accent-grad); margin-bottom:14px; box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 32%, transparent);}
.cc-cm-mybanner-ic{width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.cc-cm-mybanner-go{font-size:11px; font-weight:800; background:rgba(255,255,255,.22); padding:8px 11px; border-radius:11px; display:flex; align-items:center; gap:6px; white-space:nowrap;}

.cc-cm-courtwrap{margin-bottom:14px;}
.cc-cm-courthead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; padding:0 2px; min-height:32px;}
.cc-cm-courthead-l{display:flex; align-items:center; gap:8px; min-width:0;}
.cc-cm-courtname{font-size:13.5px; font-weight:900; color:var(--text); display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.cc-cm-courtname i{color:var(--accent);}
/* per-court action, in the header (replaces the old full-width button row) */
.cc-cm-hbtn{display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px; border-radius:12px; font-size:12.5px; font-weight:800; white-space:nowrap; flex-shrink:0; transition:transform .12s;}
.cc-cm-hbtn:active{transform:scale(.95);}
.cc-cm-hbtn i{font-size:11px;}
.cc-cm-hbtn.start{background:var(--accent-grad); color:#fff; box-shadow:0 4px 13px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-cm-hbtn.end{background:rgba(34,197,94,.14); color:#16a34a; border:1px solid rgba(34,197,94,.34);}
.cc-cm-hstat{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; padding:6px 12px; border-radius:9px; white-space:nowrap; flex-shrink:0;}
.cc-cm-hstat.picking{color:#d97706; background:rgba(245,158,11,.16); animation:cc-cmpulse 1.4s ease-in-out infinite;}
.cc-cm-cstatus{font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:8px;}
.cc-cm-cstatus.play{color:#fff; background:#22c55e;}
.cc-cm-cstatus.ready{color:#16a34a; background:rgba(34,197,94,.15);}
.cc-cm-cstatus.open{color:var(--dimmer); background:var(--surface-2);}
.cc-cm-cstatus.fill{color:#d97706; background:rgba(245,158,11,.16);}

.cc-court{position:relative; border-radius:14px; padding:18px 14px;
  background:linear-gradient(160deg,#2fa078,#22785b);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), 0 10px 26px rgba(20,80,60,.28);
  overflow:hidden;
  display:flex; flex-direction:row; align-items:stretch; gap:8px;
  min-height:180px;}
.cc-court.playing{box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 2px #22c55e, 0 10px 28px rgba(34,197,94,.38);}

/* Real-court line markings drawn as an SVG overlay so lines scale
   exactly with the court rectangle. Landscape: net is vertical. */
.cc-court-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}
.cc-court-svg line{stroke:rgba(255,255,255,.55); stroke-width:1.2; vector-effect:non-scaling-stroke;}
.cc-court-svg .cc-court-net-line{stroke:rgba(255,255,255,.95); stroke-width:2; stroke-dasharray:5 3;}

/* Each half is now a vertical column of player slots */
.cc-court-half{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:space-around; align-items:center; gap:10px; position:relative; z-index:2; min-height:140px;}
/* Net divider — vertical sliver in the middle holds the "NET" pill */
.cc-court-net{position:relative; width:0; align-self:stretch; display:flex; justify-content:center; align-items:center; z-index:3;}
.cc-court-net span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#1c6149; color:#fff; font-size:8px; font-weight:800; letter-spacing:1.5px; padding:2px 9px; border-radius:6px; white-space:nowrap;}
/* Side labels — left + right corners in landscape */
.cc-court-sidelbl{position:absolute; top:7px; font-size:8.5px; font-weight:800; letter-spacing:.4px; color:rgba(255,255,255,.9); background:rgba(0,0,0,.16); padding:2px 7px; border-radius:6px; z-index:3;}
.cc-court-sidelbl.top{left:9px;}
.cc-court-sidelbl.bottom{right:9px; bottom:auto;}

.cc-cm-slot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:58px; position:relative; z-index:2; transition:transform .14s;}
.cc-cm-slot.filled:not(.ro):active{transform:scale(.93);}
.cc-cm-slot-av{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px;
  background:radial-gradient(circle at 32% 26%, color-mix(in srgb,var(--pt) 55%, #fff), var(--pt));
  box-shadow:0 0 0 2.5px #fff, 0 4px 10px rgba(0,0,0,.28); transition:transform .14s, box-shadow .14s;}
.cc-cm-slot-nm{font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); white-space:nowrap;}
.cc-cm-slot.on .cc-cm-slot-av{box-shadow:0 0 0 3px var(--accent), 0 0 0 6px rgba(255,255,255,.65), 0 4px 12px rgba(0,0,0,.3); transform:scale(1.08);}
.cc-cm-slot.me .cc-cm-slot-av{box-shadow:0 0 0 3px #fde047, 0 0 0 5.5px #fff, 0 4px 10px rgba(0,0,0,.28);}
.cc-cm-slot.empty{width:50px; height:50px; min-width:50px; border-radius:50%; border:2px dashed rgba(255,255,255,.65);
  color:rgba(255,255,255,.85); font-size:15px; background:rgba(255,255,255,.09); transition:transform .12s, background .2s;}
.cc-cm-slot.empty:not(.ro):active{transform:scale(.9); background:rgba(255,255,255,.2);}
.cc-cm-slot.empty.ro{opacity:.35;}

/* "ใครชนะ?" overlay — sits on the court, tap the winning side (zero extra height) */
.cc-court.ending{box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 2px #f59e0b, 0 10px 28px rgba(245,158,11,.4);}
.cc-court-winoverlay{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; gap:8px; padding:11px;
  background:linear-gradient(160deg, rgba(15,60,45,.84), rgba(11,42,32,.92)); backdrop-filter:blur(2px); border-radius:14px;
  animation:cc-winfade .16s ease-out;}
@keyframes cc-winfade{from{opacity:0; transform:scale(.98);} to{opacity:1; transform:scale(1);}}
.cc-court-winq{display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45);}
.cc-court-winq i{color:#fde047;}
.cc-court-winrow{flex:1; display:flex; gap:10px;}
.cc-court-winhalf{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:12px;
  background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.5); color:#fff; transition:transform .12s, background .15s, border-color .15s;}
.cc-court-winhalf:active{transform:scale(.95); background:rgba(253,224,71,.32); border-color:#fde047;}
.cc-court-winside{font-size:16px; font-weight:900; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.cc-court-winlbl{font-size:11px; font-weight:800; opacity:.9; display:inline-flex; align-items:center; gap:5px;}
.cc-court-winlbl i{color:#fde047; font-size:10px;}
.cc-court-winx{position:absolute; top:8px; right:9px; width:26px; height:26px; border-radius:8px; background:rgba(0,0,0,.3); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; z-index:7;}

.cc-cm-queue{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.cc-cm-qitem{display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2); transition:transform .12s;}
.cc-cm-qitem:active{transform:scale(.985);}
.cc-cm-qitem.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.cc-cm-qitem.me{background:var(--accent-soft);}
.cc-cm-qnum{width:22px; height:22px; border-radius:7px; background:var(--surface); border:1px solid var(--border); font-size:11px; font-weight:900; color:var(--dim); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cc-cm-qname{font-size:13px; font-weight:800; color:var(--text); flex:1; text-align:left;}
.cc-cm-qrank{font-size:11px; color:var(--dimmer); font-weight:600; white-space:nowrap;}

/* assigned-to-court badge + fatigue chip on queue rows */
.cc-cm-qitem.assigned{background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border-color:color-mix(in srgb, var(--accent) 24%, var(--border-2));}
.cc-cm-qmeta{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.cc-cm-qfatigue{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; padding:3px 8px; border-radius:6px;
  color:#f59e0b; background:rgba(245,158,11,.14); white-space:nowrap;}
.cc-cm-qfatigue i{font-size:9px;}
.cc-cm-qcourt{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:900; padding:3px 9px; border-radius:7px; white-space:nowrap;
  color:var(--gt); background:color-mix(in srgb,var(--gt) 14%, transparent); border:1px solid color-mix(in srgb,var(--gt) 30%, transparent);}
.cc-cm-qcourt i{font-size:9px;}

/* ---- per-player history: trigger icons + popup ------------- */
.cc-cm-qinfo{flex-shrink:0; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--dim); background:var(--surface); border:1px solid var(--border); font-size:12px;}
.cc-cm-qinfo:active{transform:scale(.9); color:var(--accent);}
.cc-cm-slot-info{position:absolute; top:-6px; right:-6px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.5); z-index:4;}
.cc-cm-slot-info:active{transform:scale(.88);}
.cc-cmh-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.cc-cmh-name{font-size:16px; font-weight:900; color:var(--text);}
.cc-cmh-rank{font-size:12px; color:var(--dim); font-weight:600; margin-top:1px;}
.cc-cmh-stats{display:flex; gap:8px; margin-bottom:8px;}
.cc-cmh-stat{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:13px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cmh-stat b{font-size:19px; font-weight:900; color:var(--text); line-height:1;}
.cc-cmh-stat span{font-size:10px; color:var(--dimmer); font-weight:700;}
.cc-cmh-stat.win b{color:#22c55e;} .cc-cmh-stat.loss b{color:#f43f5e;}
.cc-cmh-note{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--dim); margin-bottom:2px;}
.cc-cmh-note i{color:var(--accent); font-size:10px;}
.cc-cmh-sec{font-size:11.5px; font-weight:900; color:var(--dim); margin:14px 0 7px;}
.cc-cmh-chips{display:flex; flex-wrap:wrap; gap:6px;}
.cc-cmh-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:9px; color:var(--gt); background:color-mix(in srgb,var(--gt) 13%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--gt) 28%, transparent);}
.cc-cmh-chip i{font-size:10px;}
.cc-cmh-ppl{display:flex; flex-wrap:wrap; gap:7px;}
.cc-cmh-pl{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text); padding:4px 10px 4px 4px; border-radius:20px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cmh-pl b{font-size:11px; font-weight:900; color:var(--accent);}
.cc-cmh-none{font-size:12px; color:var(--dimmer);}
.cc-cmh-log{display:flex; flex-direction:column; gap:6px;}
.cc-cmh-logrow{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cmh-logl{display:flex; flex-direction:column; gap:2px; flex-shrink:0; min-width:60px;}
.cc-cmh-logn{font-size:12px; font-weight:900; color:var(--text);}
.cc-cmh-logcourt{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--dim);}
.cc-cmh-logcourt i{font-size:8px;}
.cc-cmh-logmid{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.cc-cmh-logwith, .cc-cmh-logvs{font-size:11px; color:var(--dim); line-height:1.3; white-space:normal; word-break:break-word;}
.cc-cmh-logwith span, .cc-cmh-logvs span{display:inline-block; min-width:24px; font-size:9.5px; font-weight:900; color:var(--dimmer); margin-right:4px;}
.cc-cmh-logres{flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:900; padding:4px 9px; border-radius:8px;}
.cc-cmh-logres.win{color:#22c55e; background:rgba(34,197,94,.13);}
.cc-cmh-logres.loss{color:#f43f5e; background:rgba(244,63,94,.12);}
.cc-cmh-logres.none{color:var(--dimmer); background:var(--surface); font-weight:700; font-size:10px;}
.cc-cmh-logres i{font-size:9px;}

/* ---- "ถัดไป" (Next Up) strip under each court -------------- */
/* Compact one-glance strip: head row (label + team tag + action) then the pair.
   The court number, pairing rule and "who stays" explanation live once up top
   (rotinfo) instead of repeating per court — so each strip stays ~2 rows tall. */
.cc-cm-next{margin-top:7px; padding:8px 10px; border-radius:13px;
  background:color-mix(in srgb, var(--gt) 7%, var(--surface));
  border:1.5px dashed color-mix(in srgb, var(--gt) 30%, transparent);}
.cc-cm-next.empty{border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:color-mix(in srgb, var(--accent) 6%, var(--surface));}
.cc-cm-next-head{display:flex; align-items:center; gap:7px; margin-bottom:7px;}
.cc-cm-next-head > i{color:var(--gt); font-size:13px; flex-shrink:0;}
.cc-cm-next-head > b{font-size:12px; font-weight:900; color:var(--text); flex-shrink:0;}
.cc-cm-next-teamtag{display:inline-flex; align-items:center; gap:4px; margin-right:auto;
  font-size:9.5px; font-weight:800; color:var(--gt); padding:2px 7px; border-radius:8px;
  background:color-mix(in srgb, var(--gt) 13%, transparent);}
.cc-cm-next-teamtag > i{font-size:9px;}
.cc-cm-next-need{display:inline-flex; align-items:center; font-size:10px; font-weight:800; color:var(--accent);
  padding:3px 8px; border-radius:8px; background:var(--accent-soft); white-space:nowrap; flex-shrink:0;}
.cc-cm-next-auto{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:10px 12px; border-radius:10px; flex-shrink:0;
  background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-cm-next-auto i{font-size:10px;}
.cc-cm-next-auto:active{transform:scale(.94);}
.cc-cm-next-body{display:flex; gap:6px; align-items:center;}
.cc-cm-next-body.single > .cc-cm-nslot{flex:1 1 0; min-width:0;}
.cc-cm-next-amp{font-size:12px; font-weight:900; color:var(--gt); padding:0 1px; flex-shrink:0;}
.cc-cm-nslot{display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:10px; min-height:36px; text-align:left;
  background:var(--surface); border:1px dashed var(--border); color:var(--text); position:relative;}
.cc-cm-nslot.empty{justify-content:center; flex-direction:column; gap:2px; color:var(--dimmer); border-style:dashed;}
.cc-cm-nslot.empty i{font-size:13px;}
.cc-cm-nslot.empty span{font-size:9.5px; font-weight:700;}
.cc-cm-nslot.empty:active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
.cc-cm-nslot.filled{background:color-mix(in srgb, var(--pt) 12%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--pt) 36%, var(--border));}
.cc-cm-nslot.filled.me{background:linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 10%, var(--surface))); border-color:var(--accent);}
.cc-cm-nslot-av{font-size:15px; line-height:1; flex-shrink:0;}
.cc-cm-nslot-nm{font-size:11.5px; font-weight:800; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.cc-cm-nslot-x{font-size:9px; color:var(--dimmer); flex-shrink:0;}
.cc-cm-nslot.filled:active .cc-cm-nslot-x{color:#dc2626;}
.cc-cm-next-hint{display:flex; align-items:flex-start; gap:7px; margin-top:9px; padding:8px 10px; border-radius:9px;
  background:rgba(255,255,255,.04); font-size:10.5px; font-weight:600; color:var(--dim); line-height:1.45; text-wrap:pretty;}
.cc-cm-next-hint > i{color:var(--accent); font-size:10px; margin-top:2px; flex-shrink:0;}

/* "Next up" picker sheet rows */
.cc-cm-pick-list{display:flex; flex-direction:column; gap:7px;}
.cc-cm-pick-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:12px; text-align:left;
  background:var(--surface-2); border:1px solid var(--border-2); color:var(--text);}
.cc-cm-pick-row:active{background:var(--accent-soft); border-color:var(--accent);}
.cc-cm-pick-nm{font-size:13px; font-weight:900; color:var(--text);}
.cc-cm-pick-meta{display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap;}
.cc-cm-pick-rank{font-size:10.5px; font-weight:700; color:var(--dim);}
.cc-cm-pick-fresh{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px;
  color:#22c55e; background:rgba(34,197,94,.13);}
.cc-cm-pick-fresh i{font-size:9px;}
.cc-cm-pick-warn{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px;
  color:#f59e0b; background:rgba(245,158,11,.13);}
.cc-cm-pick-warn i{font-size:9px;}

/* ---- Rotation rule picker (กติกาหมุนคอร์ท) ----------------- */
.cc-cm-rotrow{padding:11px 12px; border-radius:13px; margin-bottom:12px;
  background:var(--surface-2); border:1px solid var(--border-2);}
.cc-cm-rotlbl{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--dim); margin-bottom:8px;}
.cc-cm-rotlbl > i{color:var(--accent); font-size:11px;}
.cc-cm-rotseg{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:2px; gap:2px;}
.cc-cm-rotseg > button{flex:1 1 0; min-width:0; padding:7px 8px; border-radius:9px; font-size:10.5px; font-weight:800; color:var(--dim); background:transparent; border:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-cm-rotseg > button.on{background:var(--accent); color:#fff; box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-cm-rotseg > button:not(.on):active{background:var(--accent-soft); color:var(--accent);}
.cc-cm-rotdesc{font-size:10.5px; font-weight:600; color:var(--dim); margin-top:8px; padding-left:2px; text-wrap:pretty; line-height:1.4;}

/* read-only rule chip for players (non-owners) */
.cc-cm-rotinfo{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px; margin-bottom:12px;
  background:color-mix(in srgb,var(--accent) 8%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 24%, var(--border-2));
  font-size:11.5px; line-height:1.4; color:var(--text); text-wrap:pretty;}
.cc-cm-rotinfo > i{color:var(--accent); font-size:13px; flex-shrink:0;}
.cc-cm-rotinfo > span > b{font-weight:900;}

/* "เกมที่ X/Y" indicator on court header (rotate-2 mode) */
.cc-cm-gamect{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; padding:3px 8px; border-radius:7px; white-space:nowrap;
  color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-cm-gamect > i{font-size:9px;}
.cc-cm-toqueue{font-size:11px; font-weight:800; color:var(--accent); display:inline-flex; align-items:center; gap:5px;}
.cc-cm-foot{display:flex; gap:9px; align-items:flex-start; margin-top:8px; font-size:11px; color:var(--dimmer); line-height:1.5; padding:0 2px;}
.cc-cm-foot i{color:var(--accent); margin-top:2px; flex-shrink:0;}

/* entry CTA on round detail */
.cc-cm-cta{display:flex; align-items:center; gap:13px; width:100%; padding:14px; border-radius:16px; margin-bottom:14px;
  background:linear-gradient(135deg,#2fa078,#22785b); color:#fff; box-shadow:0 10px 24px rgba(20,80,60,.3); transition:transform .12s;}
.cc-cm-cta:active{transform:scale(.985);}
.cc-cm-cta-ic{width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;}
.cc-cm-cta-tx{flex:1; min-width:0; text-align:left;}
.cc-cm-cta-tx b{font-size:14px; font-weight:900; display:block;}
.cc-cm-cta-tx span{font-size:11.5px; opacity:.85; line-height:1.4;}
.cc-member-row.pending{border-color:color-mix(in srgb,#f59e0b 35%, transparent); background:rgba(245,158,11,.07);}
.cc-mini-btn{height:33px; padding:0 13px; border-radius:10px; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; transition:transform .12s;}
.cc-mini-btn:active{transform:scale(.93);}
.cc-mini-btn.approve{background:var(--accent-grad); color:#fff; box-shadow:0 3px 9px color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-mini-btn.reject{background:var(--surface-solid); border:1px solid var(--border); color:var(--dim);}
.cc-mini-ic{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; border:1px solid var(--border);}

/* ---- Check-in toggle --------------------------------------- */
.cc-checkin{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:all .18s; color:var(--dimmer); background:var(--surface-solid); border:1px solid var(--border);}
.cc-checkin:active{transform:scale(.88);}
.cc-checkin.in{color:#22c55e; background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.42);}

/* ---- Day-of-week picker (recurring) ------------------------ */
.cc-daypick{display:flex; gap:6px;}
.cc-daypick button{flex:1; height:40px; border-radius:11px; font-size:12px; font-weight:800; background:var(--surface-2); border:1px solid var(--border); color:var(--dim); transition:all .16s;}
.cc-daypick button.on{background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:0 3px 9px color-mix(in srgb,var(--accent) 26%, transparent);}

/* ---- Cost calculator preview ------------------------------- */
.cc-calc{padding:15px; border-radius:18px; border:1px solid color-mix(in srgb,var(--accent) 24%, transparent);
  background:linear-gradient(155deg, color-mix(in srgb,var(--accent) 13%, var(--surface)), var(--surface));}
.cc-calc-big{font-size:30px; font-weight:900; color:var(--accent); line-height:1; letter-spacing:-.5px;}

/* ---- Stepper (large, for player count) --------------------- */
.cc-stepper-lg{display:flex; align-items:center; gap:10px;}
.cc-stepper-lg button{width:46px; height:46px; border-radius:13px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:15px; display:flex; align-items:center; justify-content:center; transition:transform .1s;}
.cc-stepper-lg button:active{transform:scale(.9);}
.cc-stepper-lg .cc-step-val{flex:1; text-align:center; font-size:22px; font-weight:900; color:var(--text); min-width:0;}
.cc-stepper-lg .cc-step-val small{display:block; font-size:10.5px; font-weight:600; color:var(--dimmer); margin-top:1px;}
/* the middle number is a real (type-able) input styled like the old static value */
.cc-stepper-lg .cc-step-input{display:block; width:100%; background:transparent; border:none; outline:none; padding:0 2px; margin:0; text-align:center; font-size:22px; font-weight:900; color:var(--text); font-family:inherit; line-height:1.2; border-radius:8px;}
.cc-stepper-lg .cc-step-input:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 7%, transparent);}

/* ---- Sticky submit bar ------------------------------------- */
.cc-submit-bar{position:sticky; bottom:0; margin:6px -14px 0; padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 62%, transparent); backdrop-filter:blur(4px);}

/* ---- Success banner ---------------------------------------- */
.cc-success{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:15px; margin-bottom:14px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3);}
.cc-success i{color:#22c55e; font-size:18px;}
.cc-success b{font-size:12.5px; font-weight:800; color:var(--text); display:block;}
.cc-success span{font-size:11px; color:var(--dim);}

/* ---- Open-rounds feed board (ก๊วนที่เปิดรับ) ---------------- */
.cc-orx-tally{font-size:11px; font-weight:700; color:var(--dimmer); white-space:nowrap;}

.cc-orx{padding:0; overflow:hidden; margin-bottom:13px; position:relative; border-radius:20px;}
.cc-orx .cc-orx-bar{height:4px; width:100%; background:linear-gradient(90deg, var(--gt), color-mix(in srgb,var(--gt) 30%, transparent));}
.cc-orx .cc-orx-bar.full{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.cc-orx-pad{padding:15px;}

.cc-orx-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:13px;}
.cc-orx-logo{box-shadow:0 6px 16px color-mix(in srgb,var(--gt) 28%, transparent);}
.cc-orx-name{font-size:15px; font-weight:900; color:var(--text); letter-spacing:-.2px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-orx-rep{display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:9.5px; font-weight:800; color:var(--gt); background:color-mix(in srgb,var(--gt) 14%, transparent); border:1px solid color-mix(in srgb,var(--gt) 30%, transparent); padding:2px 7px; border-radius:7px;}
.cc-orx-rep i{font-size:8.5px;}
.cc-orx-new{display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:9.5px; font-weight:800; color:#16a34a; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.32); padding:2px 7px; border-radius:7px;}
.cc-orx-new i{font-size:8.5px;}
.cc-orx-venue{display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11.5px; font-weight:600; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-orx-venue i{font-size:10px; color:var(--dimmer); flex-shrink:0;}

.cc-orx-slot{flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:52px; padding:6px 8px; border-radius:13px; text-align:center; line-height:1;}
.cc-orx-slot.open{color:#22c55e; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28);}
.cc-orx-slot.full{color:#f59e0b; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.28);}
.cc-orx-slot b{font-size:19px; font-weight:900;}
.cc-orx-slot small{font-size:8.5px; font-weight:700; margin-top:2px; opacity:.85;}
.cc-orx-slot.mini{flex-direction:row; min-width:0; padding:3px 8px; border-radius:8px; font-size:10px; font-weight:800;}
/* playing (in-progress) — de-emphasised grey; round is not joinable */
.cc-orx-slot.playing{color:#94a3b8; background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.3);}
.cc-orx-slot.playing b{font-size:15px;}
.cc-orx .cc-orx-bar.playing{background:linear-gradient(90deg,#94a3b8,#cbd5e1);}
.cc-orx-status.playing{color:#94a3b8; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.26);}
.cc-orx-dim{opacity:.66; filter:saturate(.72);}
/* feed joinability sub-sections (เปิดรับ / เต็ม·เปิดสำรอง / กำลังเล่น) */
.cc-feed-sec{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--st,var(--text)); letter-spacing:-.2px; white-space:nowrap;}
.cc-feed-sec-n{font-size:10.5px; font-weight:800; color:var(--dimmer); background:rgba(148,163,184,.16); border-radius:999px; padding:1px 7px;}

.cc-orx-when{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.cc-orx-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); padding:6px 10px; border-radius:10px; white-space:nowrap;}
.cc-orx-pill i{font-size:10.5px; color:var(--dimmer);}
.cc-orx-pill.price{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-orx-pill.price i{color:var(--accent);}

.cc-orx-levels{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:14px;}
.cc-orx-levels-lbl{font-size:10.5px; font-weight:700; color:var(--dimmer);}
.cc-orx-lvl{font-size:10.5px; font-weight:800; color:var(--dim); background:var(--surface-2); border:1px solid var(--border); padding:6px 9px; border-radius:8px; white-space:nowrap; line-height:1;}

.cc-orx-fill{margin-bottom:14px;}
.cc-orx-count{font-size:12px; font-weight:700; color:var(--dim); white-space:nowrap;}
.cc-orx-count b{font-size:14px; font-weight:900; color:var(--text);}

.cc-orx-reserve{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:13px; border-radius:14px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.22);}
.cc-orx-reserve-lbl{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#f59e0b; white-space:nowrap;}
.cc-orx-reserve-lbl i{font-size:11px;}
.cc-orx-reserve-n{margin-left:auto; font-size:12px; font-weight:900; color:#f59e0b; white-space:nowrap;}
.cc-seats{display:flex; gap:6px;}
.cc-seat{width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:9px;
  color:var(--dimmer); background:var(--surface-2); border:1px dashed color-mix(in srgb,#f59e0b 30%, var(--border));}
.cc-seat.on{border-style:solid; border-color:transparent; background:transparent; padding:0;}

.cc-orx-actions{display:flex; gap:8px;}
.cc-orx-btn{flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:42px; padding:0 9px; border-radius:13px;
  font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; transition:transform .12s, filter .2s; cursor:pointer;}
.cc-orx-btn:active{transform:scale(.97);}
.cc-orx-btn.sm{height:34px; font-size:11.5px; padding:0 13px; border-radius:11px; flex:0 0 auto;}
.cc-orx-btn.shrink{flex:0 0 auto; width:42px; padding:0;}
.cc-orx-btn.sm.shrink{width:34px;}
.cc-orx-btn.primary{background:var(--accent-grad); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.22); box-shadow:0 6px 15px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-orx-btn.primary:hover{filter:brightness(1.06);}
.cc-orx-btn.reserve{background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); box-shadow:0 6px 15px rgba(245,158,11,.3);}
.cc-orx-btn.joined{background:rgba(34,197,94,.14); color:#22c55e; border:1px solid rgba(34,197,94,.3); cursor:default;}
.cc-orx-btn.reserved{background:rgba(245,158,11,.14); color:#f59e0b; border:1px solid rgba(245,158,11,.3); cursor:default;}
.cc-orx-btn.ghost{background:var(--surface-2); color:var(--dim); border:1px solid var(--border);}
.cc-orx-btn.off{background:var(--surface-2); color:var(--dimmer); border:1px solid var(--border-2); cursor:default;}

/* ---- Compact round row ------------------------------------- */
.cc-orc{display:flex; align-items:center; gap:11px; padding:12px; border-radius:16px;}
.cc-orc-name{font-size:13px; font-weight:900; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px;}
.cc-orc-meta{display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; font-weight:600; color:var(--dim); white-space:nowrap;}
.cc-orc-meta i{font-size:9.5px; color:var(--dimmer);}
.cc-orc-count{font-size:11px; font-weight:800; color:var(--dim);}

/* ============ FEATURE — แชทก๊วน (group community chat) ====== */
/* ---- Chat list ---------------------------------------------- */
.cc-chat-screen{padding:50px 14px 104px;}
.cc-chat-listhead{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.cc-chat-h1{font-size:22px; font-weight:900; color:var(--text); letter-spacing:-.4px;}
.cc-chat-sub{font-size:11.5px; color:var(--dim); margin-top:2px; line-height:1.4;}
.cc-chat-head-ic{width:44px; height:44px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; background:var(--accent-grad); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%, transparent);}

.cc-chat-list{display:flex; flex-direction:column; gap:10px;}
.cc-chat-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px; border-radius:18px;
  background:var(--surface); backdrop-filter:blur(20px); border:1px solid var(--border); box-shadow:var(--card-shadow); transition:transform .14s, border-color .2s;}
.cc-chat-row:active{transform:scale(.985);}
.cc-chat-row.unread{border-color:color-mix(in srgb,var(--accent) 32%, transparent);}
.cc-chat-logo-wrap{position:relative; flex-shrink:0;}
.cc-online-dot{position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-radius:50%; background:#22c55e; border:2.5px solid var(--surface-solid);}
.cc-chat-name{font-size:14.5px; font-weight:900; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;}
.cc-chat-time{font-size:10.5px; font-weight:600; color:var(--dimmer); white-space:nowrap; flex-shrink:0;}
.cc-chat-last{font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;}
.cc-chat-row.unread .cc-chat-last{color:var(--text); font-weight:600;}
.cc-chat-unread{flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent-grad); color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 34%, transparent);}
.cc-chat-row-meta{display:flex; align-items:center; gap:9px; margin-top:7px;}
.cc-chat-mem,.cc-chat-on{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--dimmer);}
.cc-chat-on{color:#22c55e;}
.cc-chat-on i,.cc-chat-mem i{font-size:8px;}
.cc-chat-arrow{flex-shrink:0; color:var(--dimmer); font-size:13px;}
.cc-chat-tip{display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:12px 13px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2); font-size:11px; color:var(--dimmer); line-height:1.45;}
.cc-chat-tip i{color:var(--accent); font-size:13px; margin-top:1px;}

/* ---- Chat room ---------------------------------------------- */
.cc-chat-room{height:100%; display:flex; flex-direction:column; background:
  radial-gradient(420px 280px at 88% -6%, color-mix(in srgb,var(--gt) 12%, transparent), transparent 70%), var(--bg);}
.cc-chat-top{flex-shrink:0; display:flex; align-items:center; gap:11px; padding:48px 12px 12px; position:relative; z-index:5;
  background:color-mix(in srgb,var(--gt) 9%, var(--surface)); backdrop-filter:blur(16px); border-bottom:1px solid var(--border);}
.cc-chat-back{width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); transition:transform .12s;}
.cc-chat-back:active{transform:scale(.9);}
.cc-chat-top-name{font-size:15.5px; font-weight:900; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-chat-top-sub{display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--dim); margin-top:1px;}
.cc-chat-top-on i{font-size:7px; color:#22c55e;}

.cc-chat-body{flex:1; overflow-y:auto; padding:16px 13px 12px; scrollbar-width:none;}
.cc-chat-body::-webkit-scrollbar{display:none;}
.cc-chat-daychip{display:flex; justify-content:center; margin-bottom:16px;}
.cc-chat-daychip span{display:inline-flex; align-items:center; gap:6px; max-width:90%; text-align:center; font-size:10.5px; font-weight:600; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); padding:6px 12px; border-radius:12px; line-height:1.3;}
.cc-chat-daychip i{color:var(--accent); font-size:11px;}

.cc-msg{display:flex; gap:8px; align-items:flex-end; margin-bottom:4px;}
.cc-msg.run{margin-top:11px;}
.cc-msg.me{flex-direction:row-reverse;}
.cc-msg-spacer{width:30px; flex-shrink:0;}
.cc-msg-col{display:flex; flex-direction:column; min-width:0; max-width:80%;}
.cc-msg.me .cc-msg-col{align-items:flex-end;}
.cc-msg-name{font-size:10.5px; font-weight:800; color:var(--dim); margin:0 0 3px 4px;}
.cc-bubble{padding:9px 13px; border-radius:17px 17px 17px 6px; font-size:13px; line-height:1.42; color:var(--text);
  background:var(--surface-solid); border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.12); word-break:break-word;}
.cc-bubble.me{border-radius:17px 17px 6px 17px; color:#fff; border:none; background:var(--accent-grad); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%, transparent);}
.cc-msg-time{font-size:9px; color:var(--dimmer); margin:3px 5px 0;}
/* system / organiser announcement — centred chip (settle, edits, lock, welcome) */
.cc-msg-sys{display:flex; justify-content:center; margin:12px 0;}
.cc-msg-sys span{display:inline-flex; align-items:flex-start; gap:7px; max-width:86%; text-align:left; font-size:11.5px; font-weight:700; color:var(--dim); background:color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border-2)); padding:8px 14px; border-radius:13px; line-height:1.45; white-space:pre-wrap;}
.cc-msg-sys i{color:var(--accent); font-size:12px; margin-top:2px; flex:none;}

.cc-chat-input{flex-shrink:0; display:flex; align-items:center; gap:9px; padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:var(--nav-bg); border-top:1px solid var(--border);}
.cc-chat-attach{width:40px; height:40px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--dim); background:var(--surface-2); border:1px solid var(--border); transition:transform .12s;}
.cc-chat-attach:active{transform:scale(.9);}
.cc-chat-field{flex:1; min-width:0; height:42px; padding:0 16px; border-radius:21px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:13.5px; font-family:inherit; outline:none;}
.cc-chat-field::placeholder{color:var(--dimmer);}
.cc-chat-field:focus{border-color:color-mix(in srgb,var(--accent) 45%, transparent);}
.cc-chat-send{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--dimmer); background:var(--surface-2); border:1px solid var(--border); transition:all .18s;}
.cc-chat-send.on{color:#fff; background:var(--accent-grad); border-color:transparent; box-shadow:0 5px 13px color-mix(in srgb,var(--accent) 34%, transparent);}
.cc-chat-send.on:active{transform:scale(.9);}

/* ============ FEATURE — Settings detail screens ============= */
/* profile setting row → now tappable with chevron */
.cc-setting-row{transition:background .15s;}
.cc-setting-row.cc-tap{cursor:pointer;}
.cc-setting-row.cc-tap:active{background:var(--surface-2);}

/* group label above a settings card */
.cc-set-group{font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--dimmer); margin:18px 2px 9px;}
.cc-set-group:first-child{margin-top:2px;}
.cc-set-note{font-size:11px; color:var(--dimmer); line-height:1.5; margin:8px 4px 2px; display:flex; gap:7px; align-items:flex-start;}
.cc-set-note i{color:var(--accent); font-size:11px; margin-top:1px; flex-shrink:0;}

/* a card that groups rows with hairlines */
.cc-set-card{background:var(--surface); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow); overflow:hidden;}

/* one row inside a settings card */
.cc-row{display:flex; align-items:center; gap:13px; padding:13px 15px; min-height:54px;}
.cc-row + .cc-row{border-top:1px solid var(--border-2);}
.cc-row.tap{cursor:pointer; transition:background .14s;}
.cc-row.tap:active{background:var(--surface-2);}
.cc-row-ic{width:34px; height:34px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:14px;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--accent) 22%, transparent);}
.cc-row-ic[data-tone]{color:var(--rt); background:color-mix(in srgb,var(--rt) 13%, var(--surface-2)); border-color:color-mix(in srgb,var(--rt) 24%, transparent);}
.cc-row-tx{min-width:0; flex:1;}
.cc-row-tt{font-size:13px; font-weight:700; color:var(--text); line-height:1.3;}
.cc-row-sub{font-size:11px; color:var(--dimmer); margin-top:2px; line-height:1.4;}
.cc-row-val{font-size:12.5px; font-weight:700; color:var(--dim); white-space:nowrap;}
.cc-row-chev{color:var(--dimmer); font-size:12px; flex-shrink:0;}

/* iOS-style switch */
.cc-switch{position:relative; width:44px; height:26px; flex-shrink:0; border-radius:13px; background:var(--surface-2); border:1px solid var(--border);
  transition:background .22s, border-color .22s; cursor:pointer;}
.cc-switch::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .22s;}
.cc-switch.on{background:var(--accent-grad); border-color:transparent;}
.cc-switch.on::after{transform:translateX(18px);}

/* segmented choice (inline) */
.cc-seg{display:flex; gap:5px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:4px;}
.cc-seg button{flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 8px; border-radius:9px;
  font-size:12px; font-weight:700; color:var(--dim); white-space:nowrap; transition:all .16s; cursor:pointer;}
.cc-seg button i{font-size:11px;}
.cc-seg button.on{color:#fff; background:var(--accent-grad); box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 28%, transparent);}

/* editable field row */
.cc-fld{padding:12px 15px;}
.cc-fld + .cc-fld{border-top:1px solid var(--border-2);}
.cc-fld-lbl{font-size:11px; font-weight:700; color:var(--dimmer); margin-bottom:6px; display:flex; align-items:center; gap:7px; white-space:nowrap;}
.cc-fld-lbl i{color:var(--accent); width:14px; text-align:center;}
.cc-fld-inp{width:100%; height:40px; padding:0 13px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-size:13.5px; font-family:inherit; outline:none; transition:border-color .18s;}
.cc-fld-inp:focus{border-color:color-mix(in srgb,var(--accent) 45%, transparent);}
.cc-fld-inp::placeholder{color:var(--dimmer);}

/* edit-avatar block on account page */
.cc-edit-ava{position:relative; width:84px; height:84px; margin:0 auto;}
.cc-edit-ava-cam{position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border:3px solid var(--bg); cursor:pointer; font-size:11px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%, transparent);}
.cc-edit-ava-cam:active{transform:scale(.92);}

/* divider above the emoji grid in EditProfile — keeps "อัปโหลดรูป" and "เลือกอิโมจิ" visually distinct */
.cc-emoji-divider{display:flex; align-items:center; gap:8px; margin:14px 0 10px; font-size:10.5px; font-weight:800; color:var(--dimmer); letter-spacing:.3px;}
.cc-emoji-divider::before, .cc-emoji-divider::after{content:''; flex:1; height:1px; background:var(--border);}
.cc-emoji-divider > span{flex-shrink:0;}
  font-size:12px; color:#fff; background:var(--accent-grad); border:3px solid var(--surface-solid); box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 32%, transparent); cursor:pointer;}

/* FAQ accordion */
.cc-faq{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden;}
.cc-faq + .cc-faq{margin-top:9px;}
.cc-faq-q{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 15px; cursor:pointer;}
.cc-faq-q i.q{color:var(--accent); font-size:13px; width:16px; text-align:center; flex-shrink:0;}
.cc-faq-q span{flex:1; font-size:13px; font-weight:700; color:var(--text); line-height:1.4;}
.cc-faq-q i.chev{color:var(--dimmer); font-size:12px; transition:transform .25s;}
.cc-faq.open .cc-faq-q i.chev{transform:rotate(180deg);}
.cc-faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.cc-faq-a-in{padding:0 15px 15px 43px; font-size:12.5px; color:var(--dim); line-height:1.6;}

/* help quick-link grid */
.cc-help-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.cc-help-tile{display:flex; flex-direction:column; gap:9px; padding:15px; border-radius:16px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); transition:transform .14s, border-color .2s;}
.cc-help-tile:active{transform:scale(.97);}
.cc-help-tile-ic{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px;
  color:var(--ht); background:color-mix(in srgb,var(--ht) 14%, var(--surface-2)); border:1px solid color-mix(in srgb,var(--ht) 26%, transparent);}
.cc-help-tile-tt{font-size:13px; font-weight:800; color:var(--text);}
.cc-help-tile-sub{font-size:11px; color:var(--dimmer); line-height:1.4;}

/* contact channel row */
.cc-contact{display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; cursor:pointer; transition:background .14s;}
.cc-contact + .cc-contact{border-top:1px solid var(--border-2);}
.cc-contact:active{background:var(--surface-2);}
.cc-contact-ic{width:40px; height:40px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff;}

/* search box */
.cc-set-search{display:flex; align-items:center; gap:10px; height:46px; padding:0 15px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); margin-bottom:18px;}
.cc-set-search i{color:var(--dimmer); font-size:14px;}
.cc-set-search input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-size:13.5px; font-family:inherit;}
.cc-set-search input::placeholder{color:var(--dimmer);}

/* danger / link list */
.cc-text-link{display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:background .14s;}
.cc-text-link + .cc-text-link{border-top:1px solid var(--border-2);}
.cc-text-link:active{background:var(--surface-2);}
.cc-text-link > i:first-child{width:18px; text-align:center; color:var(--dim);}
.cc-text-link.danger{color:#f43f5e;}
.cc-text-link.danger > i:first-child{color:#f43f5e;}

/* version footer */
.cc-app-foot{text-align:center; padding:20px 0 4px; color:var(--dimmer);}
.cc-app-foot .mark{display:inline-flex; align-items:center; justify-content:center;}
.cc-app-foot .mark img{width:36px; height:36px; object-fit:contain;}
.cc-app-foot .v{font-size:11px; font-weight:700; margin-top:5px;}
.cc-app-foot .c{font-size:10px; margin-top:2px;}

/* ============================================================
   ChatGroupInfoSheet — group info opened from chat header ⋮
   ============================================================ */
.cc-cgi-hero{display:flex; align-items:center; gap:14px; padding:6px 0 16px; border-bottom:1px solid var(--border-2); margin-bottom:14px;}
.cc-cgi-h-info{flex:1; min-width:0;}
.cc-cgi-h-name{font-size:17px; font-weight:900; color:var(--text); letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-cgi-h-sub{display:flex; gap:10px; align-items:center; font-size:12px; font-weight:700; color:var(--dim); margin-top:4px;}
.cc-cgi-h-sub span{display:inline-flex; align-items:center; gap:5px;}
.cc-cgi-h-sub i{font-size:9px; color:var(--dimmer);}
.cc-cgi-on{color:#22c55e !important;}
.cc-cgi-on i{color:#22c55e !important; font-size:7px !important;}

/* quick action grid (3 buttons) */
.cc-cgi-quick{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:14px;}
.cc-cgi-q{display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 6px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); transition:transform .14s, background .2s;}
.cc-cgi-q:active{transform:scale(.96); background:var(--accent-soft);}
.cc-cgi-q > i{font-size:17px; color:var(--accent);}
.cc-cgi-q > span{font-size:11px; font-weight:800; white-space:nowrap;}

/* settings rows (mute / pin) */
.cc-cgi-row{display:flex; align-items:center; gap:13px; padding:13px 14px; width:100%; text-align:left; color:var(--text);}
.cc-cgi-row.bordered{border-bottom:1px solid var(--border-2);}
.cc-cgi-row > i:first-child{width:18px; text-align:center; font-size:14px;}
.cc-cgi-row-tx{flex:1; min-width:0;}
.cc-cgi-row-tt{font-size:13px; font-weight:800; white-space:nowrap;}
.cc-cgi-row-sub{font-size:11px; color:var(--dimmer); margin-top:1px;}

/* member rows */
.cc-cgi-mem{display:flex; align-items:center; gap:12px; padding:9px 13px; width:100%; text-align:left;}
.cc-cgi-mem.bordered{border-bottom:1px solid var(--border-2);}
.cc-cgi-mem-av{position:relative; flex-shrink:0;}
.cc-cgi-online{position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid var(--surface);}
.cc-cgi-mem-tx{flex:1; min-width:0;}
.cc-cgi-mem-nm{font-size:13px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cc-cgi-mem-sub{font-size:11px; color:var(--dimmer); margin-top:1px;}
.cc-cgi-me-tag{font-size:9.5px; font-weight:900; padding:2px 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent);}

/* leave (ออกจากก๊วน) button — confirm is handled by the shared ccConfirm modal */
.cc-cgi-leave{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:14px; border-radius:15px;
  font-size:13px; font-weight:800; color:#f43f5e; background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.24); cursor:pointer; transition:transform .12s, background .2s;}
.cc-cgi-leave:active{transform:scale(.98); background:rgba(244,63,94,.14);}

/* ---- Settle builder (round split: methods + add-ons + per-player) ---- */
.cc-settle-ctrl{margin-top:12px; padding-top:12px; border-top:1px solid var(--border-2);}
.cc-addon-row{display:flex; flex-wrap:wrap; gap:6px;}
.cc-addon-chip{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:7px 11px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--dim); cursor:pointer; transition:background .15s,color .15s,border-color .15s;}
.cc-addon-chip i{font-size:11px;}
.cc-addon-chip.on{background:color-mix(in srgb,var(--accent) 16%, transparent); border-color:var(--accent); color:var(--accent);}
.cc-extra-edit{display:flex; align-items:center; gap:8px; margin-top:9px;}
.cc-extra-name{flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:10px; padding:9px 11px;}
.cc-extra-name::placeholder{color:var(--dimmer);}
.cc-extra-del{width:30px; height:30px; flex-shrink:0; border-radius:9px; background:rgba(244,63,94,.12); color:#f43f5e; border:1px solid rgba(244,63,94,.28); font-size:12px;}
.cc-extra-add{margin-top:8px; font-size:11.5px; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:6px; padding:6px 2px;}
.cc-round-opt{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:12px; font-weight:700; color:var(--text);}
.cc-round-seg{display:inline-flex; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px;}
.cc-round-seg button{font-size:11px; font-weight:800; padding:5px 10px; border-radius:8px; color:var(--dim); min-width:34px;}
.cc-round-seg button.on{background:var(--accent); color:#fff;}
.cc-method-lbl{font-size:12px; font-weight:800; color:var(--text); margin:14px 0 7px;}
.cc-method-grid{display:flex; flex-wrap:wrap; gap:6px;}
.cc-method-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; color:var(--text); margin-bottom:10px;
  background:color-mix(in srgb,var(--accent) 12%, transparent); border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);
  padding:6px 12px; border-radius:999px;}
.cc-method-badge i{color:var(--accent); font-size:11px;}
.cc-method-badge b{font-weight:900; color:var(--accent);}
.cc-method-chip{flex:1 1 auto; min-width:90px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:11.5px; font-weight:800; padding:10px 8px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); cursor:pointer; transition:background .15s,color .15s,box-shadow .15s;}
.cc-method-chip i{font-size:11px;}
.cc-method-chip.on{background:var(--accent-grad); color:#fff; border-color:transparent; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%, transparent);}
.cc-pp-list{margin-top:10px; border-top:1px solid var(--border-2); padding-top:4px;}
.cc-pp-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border-2);}
.cc-pp-row:last-child{border-bottom:0;}
.cc-pp-row .nm{flex:1; min-width:0; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cc-pp-row.mini{padding:5px 0;}
.cc-pp-no{font-size:9px; font-weight:800; font-style:normal; color:#f59e0b; background:rgba(245,158,11,.14); padding:1px 6px; border-radius:6px; flex-shrink:0;}
.cc-pp-amt{font-size:13px; font-weight:800; flex-shrink:0;}
.cc-pp-foot{font-size:11px; font-weight:700; color:var(--dim); margin-top:8px; text-align:center;}
.cc-pp-foot.ok{color:#22c55e;}
.cc-pp-foot.warn{color:#f59e0b;}
.cc-pp-title{font-size:11px; font-weight:800; color:var(--dim); margin-bottom:4px;}

/* settle redesign — split the one big card into an EDIT zone (ผู้จัด) + RESULT zone (ผู้เล่นตรวจ) */
.cc-settle-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.cc-settle-head > .t{font-size:13.5px; font-weight:900; color:var(--text); display:flex; align-items:center; gap:8px;}
.cc-settle-head > .t > i{color:var(--accent); font-size:13px;}
.cc-role-badge{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.cc-role-badge > i{font-size:9px;}
.cc-role-badge.owner{color:var(--accent); background:color-mix(in srgb,var(--accent) 13%, transparent); border:1px solid color-mix(in srgb,var(--accent) 26%, transparent);}
.cc-role-badge.player{color:#22c55e; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28);}
.cc-settle-step{font-size:11px; font-weight:800; color:var(--dimmer); margin:16px 0 9px; letter-spacing:.01em;}
.cc-settle-step.first{margin-top:10px;}
.cc-shuttle-mini{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;}
.cc-shuttle-mini-l{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--text);}
.cc-shuttle-mini-l small{font-size:10.5px; font-weight:700; color:var(--dimmer);}

/* games method — auto-fill from court tracking + bulk edit (Phase 2) */
.cc-games-bulk{display:flex; flex-direction:column; gap:8px; margin:10px 0 2px;}
.cc-games-pull{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-size:12.5px; font-weight:800; padding:11px 10px; border-radius:12px;
  background:var(--accent-grad); color:#fff; border:1px solid transparent;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 26%, transparent); cursor:pointer;}
.cc-games-pull i{font-size:12px;}
.cc-games-nostat{display:flex; align-items:flex-start; gap:8px; font-size:11.5px; font-weight:600;
  color:var(--dim); padding:9px 11px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px;}
.cc-games-nostat i{color:var(--accent); margin-top:2px; flex-shrink:0;}
.cc-games-allrow{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; font-weight:700;}
.cc-games-allrow > span{color:var(--dim);}
.cc-games-allrow button{padding:5px 11px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); font-weight:800; font-size:11.5px; cursor:pointer;}
.cc-games-allrow button:active{background:var(--accent); color:#fff; border-color:transparent;}

/* match-method rate inputs (court/head + per-match) + per-player computed bill (Phase 3) */
.cc-match-rates{display:flex; flex-direction:column; gap:9px; margin:10px 0 4px; padding:11px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px;}
.cc-match-rate-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:800; color:var(--text);}
.cc-match-rate-row > span{display:inline-flex; align-items:center; gap:7px;}
.cc-match-rate-row i{color:var(--accent); font-size:12px;}
.cc-match-formula{font-size:10.5px; font-weight:600; color:var(--dim); line-height:1.5; display:flex; align-items:flex-start; gap:6px; border-top:1px solid var(--border-2); padding-top:8px;}
.cc-match-formula i{color:var(--accent); margin-top:2px; flex-shrink:0;}
.cc-match-formula b{color:var(--text); font-weight:800;}
/* Organizer P&L card (กำไร–ขาดทุนผู้จัด) */
.cc-pnl{margin:12px 0 2px; padding:13px 13px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px;}
.cc-pnl-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.cc-pnl-head > .t{font-size:13px; font-weight:900; color:var(--text); display:flex; align-items:center; gap:7px;}
.cc-pnl-head > .t > i{font-size:13px;}
.cc-pnl-mode{margin-left:auto; font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.cc-pnl-mode.proj{color:#b06a00; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.30);}
.cc-pnl-mode.real{color:#15803d; background:rgba(22,163,74,.13); border:1px solid rgba(22,163,74,.30);}
.cc-pnl-assume{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 10px; margin-bottom:11px; background:var(--surface-1); border:1px solid var(--border-2); border-radius:10px; font-size:11.5px; font-weight:700; color:var(--dim);}
.cc-pnl-assume > span{display:inline-flex; align-items:center; gap:6px;}
.cc-pnl-assume i{color:var(--accent); font-size:11px;}
.cc-pnl-assume b{color:var(--text); font-weight:800;}
.cc-pnl-line{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:800; margin-bottom:3px;}
.cc-pnl-line > span{display:inline-flex; align-items:center; gap:7px;}
.cc-pnl-line i{font-size:12px;}
.cc-pnl-line.in, .cc-pnl-line.in b{color:#16a34a;}
.cc-pnl-line.out, .cc-pnl-line.out b{color:#dc2626;}
.cc-pnl-sub{font-size:10.5px; font-weight:600; color:var(--dimmer); line-height:1.5; margin:0 0 9px 19px;}
.cc-pnl-result{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border-radius:12px; border:1.5px solid; margin:2px 0 11px;}
.cc-pnl-result > span{font-size:13px; font-weight:900; display:inline-flex; align-items:center; gap:7px;}
.cc-pnl-result > b{font-size:19px; font-weight:900;}
.cc-pnl-stats{display:flex; gap:8px; margin-bottom:9px;}
.cc-pnl-stats > div{flex:1; display:flex; flex-direction:column; gap:2px; padding:8px 6px; background:var(--surface-1); border:1px solid var(--border-2); border-radius:10px; text-align:center;}
.cc-pnl-stats > div > span{font-size:9.5px; font-weight:700; color:var(--dimmer);}
.cc-pnl-stats > div > b{font-size:13px; font-weight:900; color:var(--text);}
.cc-pnl-compare{display:flex; align-items:flex-start; gap:7px; font-size:10.5px; font-weight:600; color:var(--dim); line-height:1.5; padding:8px 10px; background:var(--surface-1); border:1px solid var(--border-2); border-radius:10px;}
.cc-pnl-compare i{margin-top:2px; flex-shrink:0;}
.cc-pnl-compare b{color:var(--text); font-weight:800;}
.cc-pnl-compare small{display:block; color:var(--dimmer); font-weight:600; margin-top:1px;}
.cc-pnl-warn{display:flex; align-items:flex-start; gap:7px; font-size:11px; font-weight:700; line-height:1.5; padding:9px 11px; border-radius:10px; margin-top:9px;}
.cc-pnl-warn i{margin-top:1px; flex-shrink:0;}
.cc-pnl-warn.loss{color:#b91c1c; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.22);}
.cc-pnl-warn.over{color:#b45309; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.26);}
.cc-pnl-helper{margin-top:11px; padding-top:10px; border-top:1px dashed var(--border-2);}
.cc-pnl-helper-t{font-size:11px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px; margin-bottom:8px;}
.cc-pnl-helper-row{display:flex; gap:7px;}
.cc-pnl-chip{flex:1; font-size:11px; font-weight:800; color:var(--text); background:var(--surface-1); border:1px solid var(--border); border-radius:9px; padding:7px 4px; cursor:pointer; white-space:nowrap; transition:all .12s;}
.cc-pnl-chip:hover{border-color:var(--accent); color:var(--accent);}
.cc-pnl-courtm{display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; color:var(--dim); line-height:1.45; padding:7px 10px; margin:0 0 9px; background:var(--surface-1); border:1px solid var(--border-2); border-radius:10px;}
.cc-pnl-courtm i, .cc-pnl-courtm svg{flex-shrink:0;}
.cc-pnl-courtm b{color:var(--text); font-weight:800;}
.cc-pnl-courtm small{color:var(--dimmer); font-weight:600;}
.cc-pnl-courtm.warn{color:#b91c1c; background:rgba(220,38,38,.07); border-color:rgba(220,38,38,.22);}
.cc-pnl-courtm.warn b{color:#b91c1c;}
.cc-pnl-courtm.ok{color:#15803d;}
.cc-pnl-courtm.ok b{color:var(--text);}
.cc-pp-calc{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; flex-shrink:0; margin-right:2px;}
.cc-pp-calc b{font-size:13px; font-weight:900; color:var(--text);}
.cc-pp-calc small{font-size:9.5px; font-weight:700; color:var(--dim);}

/* ── Group edit history (transparency / anti-scam) ───────────────── */
.cc-ghist{overflow:hidden;}
.cc-ghist-row{display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border-2);}
.cc-ghist-row:last-child{border-bottom:none;}
.cc-ghist-ic{width:30px; height:30px; flex-shrink:0; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border-2); color:var(--accent); font-size:12px;}
.cc-ghist-head{font-size:12px; color:var(--dim); font-weight:600;}
.cc-ghist-head b{font-weight:800;}
.cc-ghist-changes{display:flex; flex-direction:column; gap:5px; margin-top:6px;}
.cc-ghist-chg{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px;}
.cc-ghist-field{flex-shrink:0; font-weight:800; color:var(--text); background:var(--surface-2); border:1px solid var(--border-2); border-radius:7px; padding:2px 8px;}
.cc-ghist-fromto{display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--dim);}
.cc-ghist-fromto i{font-size:9px; color:var(--dimmer);}
.cc-ghist-from{text-decoration:line-through; opacity:.7; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cc-ghist-to{font-weight:800; color:var(--accent); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ── Owner "can't leave own group" note ──────────────────────────── */
.cc-owner-leavenote{display:flex; align-items:center; gap:11px; padding:13px 14px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-2); margin-top:8px;}
.cc-owner-leavenote > i{color:#f59e0b; font-size:16px; flex-shrink:0;}
.cc-owner-leavenote-tt{font-size:13px; font-weight:800; color:var(--text);}
.cc-owner-leavenote-sub{font-size:11.5px; color:var(--dim); line-height:1.5; margin-top:2px;}

/* ── Duplicate group-name inline warning ─────────────────────────── */
.cc-name-dup{display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11.5px; font-weight:700; color:#f43f5e; background:rgba(244,63,94,.10); border:1px solid rgba(244,63,94,.28); border-radius:10px; padding:8px 11px;}
.cc-name-dup i{flex-shrink:0;}