/* FIELD — shared styles for the Mini App and admin.
   Palette is fixed blue-gray; every other color is derived from these tokens.
   Depth comes in three steps (card, raised, overlay): a light top edge and a soft shadow below, never flat slabs.
   Gradients and glows mark points and actions. */
:root{
  color-scheme:dark;
  --bg:#192D38;
  --surface:#213845;
  --raised:#2A4453;
  --accent:#76AAFF;
  --secondary:#8ACEDC;
  --ink:#F0F5F8;
  --muted:#A9BDC9;
  --subtle:#8DA1AD;
  --line:#385261;
  --on-accent:#142631;
  --success:#74DCA8;
  --failure:#FFAD98;
  --violet:#C3A6FF;
  --line-soft:color-mix(in srgb,var(--line) 65%,var(--surface));
  --raised-hover:color-mix(in srgb,var(--raised) 78%,var(--line));
  --accent-soft:color-mix(in srgb,var(--accent) 14%,var(--surface));
  --secondary-soft:color-mix(in srgb,var(--secondary) 14%,var(--surface));
  --surface-hi:color-mix(in srgb,var(--surface) 93%,#fff);
  --raised-hi:color-mix(in srgb,var(--raised) 91%,#fff);
  --grad-card:linear-gradient(180deg,var(--surface-hi),var(--surface) 72px);
  --grad-raised:linear-gradient(180deg,var(--raised-hi),var(--raised));
  --grad-accent:linear-gradient(135deg,color-mix(in srgb,var(--accent) 78%,#fff) 0%,var(--accent) 48%,var(--secondary) 100%);
  /* Featured cards: an edge lit blue at one corner and violet at the other. */
  --grad-edge:linear-gradient(140deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--line-soft) 34%,var(--line-soft) 66%,color-mix(in srgb,var(--violet) 50%,transparent));
  --edge:inset 0 1px 0 rgb(255 255 255 / .06);
  --shadow-1:var(--edge),0 1px 2px rgb(3 10 15 / .28),0 12px 28px -16px rgb(3 10 15 / .7);
  --shadow-2:inset 0 1px 0 rgb(255 255 255 / .08),0 1px 0 rgb(3 10 15 / .35),0 6px 14px -8px rgb(3 10 15 / .6);
  --shadow-3:0 28px 70px rgb(0 0 0 / .5),0 2px 10px rgb(0 0 0 / .3);
  --recess:inset 0 2px 5px rgb(3 10 15 / .3);
  --glow-accent:0 8px 22px -8px color-mix(in srgb,var(--accent) 75%,transparent);
  --ring-accent:0 0 0 1px var(--accent),0 0 20px -4px color-mix(in srgb,var(--accent) 80%,transparent);
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --gutter:32px;
  --header-h:64px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --tg-safe-top:0px;
  --tg-content-top:0px;
  --tg-safe-bottom:0px;
  --tg-content-bottom:0px;
  /* Telegram's content inset (its close/menu buttons in fullscreen) sits inside the device safe area, so they add up. */
  --inset-top:calc(var(--tg-safe-top) + var(--tg-content-top));
  --inset-bottom:calc(max(var(--safe-bottom),var(--tg-safe-bottom)) + var(--tg-content-bottom));
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(640px 380px at 12% 26%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),radial-gradient(560px 360px at 92% 64%,color-mix(in srgb,var(--violet) 7%,transparent),transparent 70%),var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{margin:0;padding:0;border:0;background:none;cursor:pointer;text-align:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
svg{flex-shrink:0}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
/* The content area takes focus after each tab change (for screen readers); it needs no visible ring. */
#main:focus,#admin-main:focus{outline:none}
::selection{background:var(--accent);color:var(--on-accent)}
h1{font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-.025em}
.small-label{font-size:13px;color:var(--subtle)}
.mt-18{margin-top:18px}

/* Shell */
.app-shell{position:relative;max-width:1120px;margin:0 auto;padding:0 var(--gutter) 40px}
.header{position:relative;height:calc(var(--header-h) + var(--inset-top));padding-top:var(--inset-top);display:flex;align-items:center;justify-content:space-between}
.header::after,.admin-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--line-soft) 28%,var(--line-soft) 72%,color-mix(in srgb,var(--violet) 45%,transparent))}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:28px;height:28px;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 50%,transparent))}
.brand-mark rect{fill:var(--accent)}
.brand-mark path{fill:var(--on-accent)}
.brand-name{font-size:19px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,var(--ink) 40%,color-mix(in srgb,var(--accent) 45%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.header-actions{display:flex;align-items:center;gap:8px}
.point-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:999px;background:var(--grad-raised);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-soft));box-shadow:var(--shadow-2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;transition:border-color .15s}
.point-pill .icon{width:18px;height:18px;color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}
.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:9px 14px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line-soft));box-shadow:var(--edge);font-size:13px;color:var(--muted)}
.demo-banner span{display:flex;align-items:center;gap:8px}
.demo-banner i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.demo-banner a{color:var(--accent);font-weight:600;white-space:nowrap}
main{min-height:480px}
/* Plain web visits to the real service: only the bot link, centered (see app.js). */
.gate-screen{display:none}
body.gate .app-shell{display:none}
body.gate .gate-screen{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px;text-align:center}
.gate-screen a{font-size:20px;font-weight:700;color:var(--accent);word-break:break-all}
.gate-screen p{font-size:16px;color:var(--muted)}
.live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}
.live-bar h1{font-size:22px}
.live-bar p{margin-top:2px;font-size:13px;color:var(--muted)}
.live-hint{display:none}
.live-bar [data-live-fullscreen]{flex-shrink:0;white-space:nowrap}
.live-bar.narrow .live-help{display:none}
.live-bar.narrow .live-hint{display:block;font-weight:600;color:var(--accent)}
.live-bar.narrow [data-live-fullscreen]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.live-stage{max-width:100%;margin:0 auto;overflow:hidden;border-radius:var(--r-lg);background:#000;box-shadow:var(--shadow-1)}
.live-frame{display:block;width:100%;height:600px;border:0;transform-origin:0 0;background:#000}
.page-footer{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--subtle)}

/* Navigation: header tabs on wide screens, bottom tab bar on phones. */
.bottom-nav{position:absolute;top:var(--inset-top);left:calc(var(--gutter) + 132px);height:var(--header-h);display:flex;gap:4px;z-index:5}
.bottom-nav a{position:relative;display:flex;align-items:center;padding:0 14px;font-size:15px;font-weight:600;color:var(--muted);transition:color .15s}
.bottom-nav svg{display:none}
.bottom-nav a.active{color:var(--ink)}
.bottom-nav a.active::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--grad-accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}

/* Headings */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:36px 0 24px}
.subtitle{margin-top:6px;font-size:15px;color:var(--muted)}
.date-mark{font-size:14px;color:var(--subtle);white-space:nowrap;font-variant-numeric:tabular-nums}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:36px 0 14px}
.two-col>section>.section-heading:first-child{margin-top:0}
.section-heading h2{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.section-heading h2::before,.admin-section-heading h2::before{content:'';flex-shrink:0;width:4px;height:16px;border-radius:2px;background:var(--grad-accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 65%,transparent)}
.section-heading>span{font-size:13px;color:var(--subtle)}
.count-badge{padding:1px 8px;border-radius:999px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}

/* Tabs and chips */
.tabs{display:flex;gap:22px;margin-bottom:16px;border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex-shrink:0;padding:10px 0 12px;font-size:15px;font-weight:600;color:var(--subtle);white-space:nowrap;transition:color .15s}
.tabs button.active{color:var(--ink)}
.tabs button.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--grad-accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.filter-row{display:flex;gap:8px;margin:-4px -4px 4px;padding:4px 4px 12px;overflow-x:auto;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex-shrink:0;height:34px;padding:0 15px;border-radius:999px;background:var(--grad-raised);border:1px solid var(--line-soft);box-shadow:var(--shadow-2);font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:border-color .15s,color .15s}
.filter-chip.active{background:var(--grad-accent);border-color:transparent;color:var(--on-accent);font-weight:700;box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),var(--glow-accent)}
.status-chip{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;height:22px;padding:0 8px;border-radius:var(--r-sm);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent);color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap}
/* Live states carry a lit dot. */
.status-chip.open::before,.status-chip.pending::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.status-chip.closed,.status-chip.settled,.status-chip.cancelled{background:var(--raised);color:var(--muted)}
.status-chip.won{background:#14372B;color:var(--success)}
.status-chip.lost{background:#3A2526;color:var(--failure)}
.category-tag{color:var(--accent);font-weight:600}

/* Layout */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--grad-card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
/* Featured surfaces: the same card with a lit edge. */
.lead-story,.bigmatch,.profile-summary,.balance-card{border-color:transparent;background:var(--grad-card) padding-box,var(--grad-edge) border-box;box-shadow:var(--shadow-1)}

/* Fixtures and odds */
.fixture-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:12px;margin-bottom:-18px;padding-bottom:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.fixture-strip::-webkit-scrollbar{display:none}
.fixture{min-width:0;padding:14px;scroll-snap-align:start;background:var(--grad-card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.fixture-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:12px;color:var(--subtle);white-space:nowrap}
.fixture-meta span{overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--muted)}
.fixture-meta time{font-variant-numeric:tabular-nums}
.fixture-teams{display:grid;gap:6px;margin-bottom:12px}
.fixture-team{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:600}
.fixture-team span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixture .odds-grid{gap:6px}
.fixture .odds-button{height:46px}
.fixture .odds-button span{font-size:11px}
.fixture .odds-button strong{font-size:15px}
.crest{width:24px;height:24px;display:inline-grid;place-items:center;flex-shrink:0;border-radius:var(--r-sm);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),color-mix(in srgb,var(--accent) 9%,var(--surface)));box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent);color:var(--accent);font-size:12px;font-weight:700;line-height:1}
.crest.away{background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 26%,var(--surface)),color-mix(in srgb,var(--secondary) 8%,var(--surface)));box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 0 0 1px color-mix(in srgb,var(--secondary) 22%,transparent);color:var(--secondary)}
.odds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.odds-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.odds-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:56px;padding:0 6px;border-radius:var(--r-md);background:var(--grad-raised);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);box-shadow:var(--shadow-2);transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s}
.odds-button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.odds-button strong{font-size:17px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;transition:color .15s}
.odds-button.selected{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--raised)),var(--accent-soft));border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow-2)}
.odds-button.selected span,.odds-button.selected strong{color:var(--accent)}
.odds-button.held span::after{content:' · 참여';color:var(--success)}

/* News */
.lead-story{position:relative;display:block;width:100%;margin-bottom:4px;padding:20px;text-align:left;border:1px solid transparent;border-radius:var(--r-lg);transition:border-color .15s}
.lead-story h3{margin:8px 0 6px;font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.025em;transition:color .15s}
.lead-story p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;color:var(--muted)}
.article-list{display:flex;flex-direction:column}
.article{display:flex;align-items:center;gap:16px;width:100%;padding:16px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.article:last-child{border-bottom:0}
.article-copy{flex:1;min-width:0}
.article h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0 3px;font-size:16px;line-height:1.45;font-weight:600;letter-spacing:-.02em;transition:color .15s}
.article p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--muted)}
.article-thumb{width:64px;height:64px;display:grid;place-items:center;flex-shrink:0;border-radius:var(--r-md);background:linear-gradient(150deg,var(--raised-hi),var(--surface));border:1px solid var(--line-soft);box-shadow:var(--shadow-2);color:var(--secondary)}
.article-thumb .icon{width:28px;height:28px;stroke-width:1.5}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}
.article-meta>*+*:not(.status-chip)::before{content:'';display:inline-block;width:3px;height:3px;margin:0 7px;border-radius:50%;background:var(--line);vertical-align:middle}

/* Schedule */
.schedule-block:first-child>.section-heading{margin-top:0}
.match-list{overflow:hidden}
.match-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);transition:background-color .15s}
.match-row:last-child{border-bottom:0}
.match-row-time{display:flex;flex-direction:column;line-height:1.3}
.match-row-time strong{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.match-row-time span{margin-top:3px;font-size:12px;color:var(--subtle);white-space:nowrap}
.match-row-teams{display:grid;gap:6px;min-width:0}
.match-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;max-width:128px}
.match-row-side .status-chip{display:inline-block;max-width:100%;overflow:hidden;line-height:22px;text-overflow:ellipsis}
.match-row-league{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--subtle)}
.mini-tag{margin-right:5px;font-weight:700;color:var(--accent)}
.match-list-divider{padding:9px 16px;border-bottom:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface) 55%,var(--bg));font-size:12px;font-weight:700;color:var(--subtle)}
.bigmatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.bigmatch{display:block;width:100%;padding:16px 18px;text-align:left;border:1px solid transparent;border-radius:var(--r-lg);transition:box-shadow .15s}
.bigmatch-top{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--subtle);white-space:nowrap}
.bigmatch-tag{display:inline-flex;align-items:center;flex-shrink:0;height:20px;padding:0 7px;border-radius:var(--r-sm);background:var(--grad-accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 0 14px -3px color-mix(in srgb,var(--accent) 80%,transparent);font-size:11px;font-weight:800;letter-spacing:0}
.bigmatch-league{overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--muted)}
.bigmatch-top time{margin-left:auto;font-variant-numeric:tabular-nums}
.matchup{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:18px 0 16px}
.matchup-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.matchup-team .crest{width:44px;height:44px;border-radius:12px;font-size:18px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent),0 8px 18px -10px currentColor}
.matchup-team strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;letter-spacing:-.02em}
.matchup-team small{font-size:12px;color:var(--subtle)}
.matchup-vs{font-size:13px;font-weight:800;letter-spacing:.04em;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.bigmatch-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.match-detail-meta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.rules-list.detail-list{margin:0 0 20px;border-top:1px solid var(--line-soft)}
.rules-list.detail-list li:last-child{padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.detail-odds-label{margin-bottom:8px;font-size:14px;font-weight:600;color:var(--muted)}
.admin-row .bigmatch-tag{height:22px}
.admin-form{padding:20px}
.broadcast-compose{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.broadcast-compose .bot-preview{margin-top:8px}
.broadcast-target{margin-top:18px}
.broadcast-target .segmented{grid-template-columns:repeat(3,1fr);margin:0 0 10px}
.broadcast-target input[name=user_id]{margin-bottom:10px}
.bot-preview .preview-empty{color:var(--subtle)}
.recipient-panel{padding:14px 16px}
.recipient-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.recipient-tools input{flex:1;min-width:220px}
.recipient-actions{display:flex;gap:6px}
#recipient-list{max-height:420px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.recipient-row{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 4px;border-bottom:1px solid var(--line-soft);color:var(--ink);cursor:pointer}
.recipient-row:last-child{border-bottom:0}
.recipient-row input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.recipient-row.unreachable{opacity:.55;cursor:default}
.recipient-mark{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--accent)}
.recipient-mark .icon{width:16px;height:16px}
.recipient-main{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.recipient-name{font-size:15px;font-weight:600}
.recipient-meta{font-size:12px;font-weight:500;color:var(--subtle)}
.recipient-memo{margin-top:4px;padding:5px 9px;border-radius:8px;background:var(--raised);font-size:13px;font-weight:500;color:var(--muted);white-space:pre-wrap}
.recipient-state{flex-shrink:0;font-size:12px;font-weight:600;color:var(--subtle)}
.recipient-state.yes{color:var(--success)}
.recipient-state.blocked{color:var(--failure)}
.undo-plan{display:grid;gap:6px;margin:0 0 12px;padding-left:18px;font-size:14px;line-height:1.55;color:var(--muted)}
.undo-plan strong{color:var(--ink)}
.recipient-empty{padding:18px 4px;font-size:14px;color:var(--subtle)}
.admin-row h3.broadcast-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;font-size:15px;font-weight:600}
.notify-card{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--grad-card);border:1px solid var(--line-soft);box-shadow:var(--shadow-1)}
.notify-card>.icon{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.notify-card.on>.icon{color:var(--success)}
.notify-card div{flex:1;min-width:0}
.notify-card strong{display:block;font-size:15px}
.notify-card p{font-size:13px;color:var(--muted)}
.notify-card .primary-button{flex-shrink:0;height:38px;padding:0 14px;font-size:14px}
.member-tools{display:flex;gap:8px;margin-bottom:12px}
.member-tools input{flex:1;min-width:0}
.member-tools select{flex-shrink:0;width:150px}
.league-tools{flex-wrap:wrap}
.league-tools input{flex:1 1 240px}
.league-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.league-bulk .small-label{margin-right:auto}
.member-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.member-side strong{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-row .member-memo{max-width:560px;margin-top:8px;padding:6px 10px;border-radius:8px;background:var(--raised);color:var(--muted);white-space:nowrap}
.member-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.member-head .profile-avatar{width:52px;height:52px;font-size:20px}
.member-head h3{font-size:18px;font-weight:700}
.member-head p{font-size:13px;color:var(--subtle)}
.member-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:14px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 55%,var(--surface));box-shadow:var(--recess)}
.member-stats div{padding:10px 6px;text-align:center}
.member-stats div+div{border-left:1px solid var(--line-soft)}
.member-stats span{display:block;font-size:12px;color:var(--subtle)}
.member-stats strong{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.member-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.member-actions button{flex:1;height:40px;padding:0 10px;font-size:14px}
.member-subheading{margin:24px 0 2px;font-size:15px;font-weight:700}
.member-list .ledger-row{padding:10px 0}
.member-list .ledger-row p{font-size:14px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;padding:4px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 70%,#000);box-shadow:var(--recess)}
.segmented label{margin:0}
.segmented input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.segmented span{display:grid;place-items:center;height:38px;border-radius:8px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
.segmented input:checked+span{background:var(--grad-raised);color:var(--ink);box-shadow:var(--shadow-2)}
.segmented input:focus-visible+span{outline:2px solid var(--secondary)}
.bot-preview{max-width:360px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft)}
.bot-preview img{display:block;width:100%;border-radius:12px}
.bot-preview-empty{padding:28px 16px;border-radius:12px;background:var(--raised);font-size:13px;text-align:center;color:var(--muted)}
.bot-preview p{padding:10px 8px 4px;font-size:14px;line-height:1.6;white-space:pre-wrap}
.bot-preview-button{display:grid;place-items:center;height:40px;margin-top:6px;border-radius:10px;background:var(--grad-accent);color:var(--on-accent);font-size:14px;font-weight:700}
.bot-preview-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.bot-preview-button.secondary{position:relative;padding:0 18px;background:var(--raised);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-preview-button .icon{position:absolute;top:6px;right:6px;width:11px;height:11px;color:var(--muted)}
.start-button-fields{min-width:0;margin:0 0 14px;padding:0;border:0}
.start-button-fields legend{margin-bottom:8px;padding:0;font-size:13px;font-weight:700;color:var(--muted)}
input[type=file]{height:auto;padding:10px 12px;font-size:14px;color:var(--muted)}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:0;border-radius:8px;background:var(--raised);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}

/* Sidebar */
.side-card{padding:20px}
.side-title{margin-bottom:6px;font-size:14px;font-weight:600;color:var(--muted)}
.balance-number{font-size:30px;line-height:1.25;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.balance-number small{margin-left:4px;font-size:16px;font-weight:600;color:var(--muted)}
.side-note{margin-top:6px;font-size:13px;color:var(--subtle)}
.side-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:42px;margin-top:16px;padding:0 12px 0 14px;border-radius:var(--r-md);background:var(--grad-raised);box-shadow:var(--shadow-2);font-size:14px;font-weight:600;transition:background-color .15s}
.side-button .icon{width:18px;height:18px;color:var(--muted)}
.notice-card{padding:18px 20px;background:transparent;box-shadow:none}
.notice-card h3{margin-bottom:6px;font-size:14px;font-weight:600}
.notice-card p{font-size:13px;line-height:1.7;color:var(--muted)}
.rules-list{margin:0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.rules-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.rules-list li:last-child{padding-bottom:0;border-bottom:0}
.rules-list strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Betting */
.info-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-soft));box-shadow:var(--edge);font-size:14px;color:var(--muted)}
.info-bar .icon{width:18px;height:18px;flex-shrink:0;color:var(--accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 60%,transparent))}
.match-card{margin-bottom:12px;padding:16px 18px;transition:border-color .15s}
.match-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.league{display:flex;align-items:center;min-width:0;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.match-time{font-weight:500;color:var(--subtle);font-variant-numeric:tabular-nums}
.match-time::before{content:'';display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:var(--line);vertical-align:middle}
.match-body{display:grid;gap:14px}
.match-teams{display:grid;gap:8px;min-width:0}
.team-row{display:flex;align-items:center;gap:10px;min-width:0}
.team-row .crest{width:28px;height:28px;font-size:13px}
.team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;letter-spacing:-.02em}
.team-side{flex-shrink:0;font-size:12px;color:var(--subtle)}
.match-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--subtle);font-variant-numeric:tabular-nums}
.match-bottom .is-open{color:var(--accent)}
.pending-note{margin-top:20px;font-size:13px;line-height:1.7;color:var(--subtle)}
.versus{margin:0 2px;font-size:13px;font-weight:500;color:var(--subtle)}

/* Partners */
.partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.partner-grid .empty-state{grid-column:1/-1}
.partner-card{display:flex;flex-direction:column;padding:20px;text-align:left;transition:border-color .15s}
.partner-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.partner-logo{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--secondary) 22%,var(--raised)),var(--raised));box-shadow:var(--shadow-2),0 8px 18px -10px var(--secondary);color:var(--secondary)}
.partner-logo .icon{width:24px;height:24px}
.partner-card .category-tag{font-size:12px}
.partner-card h3{margin-top:2px;font-size:17px;line-height:1.4;font-weight:700;letter-spacing:-.02em}
.partner-card p{flex:1;margin-bottom:16px;font-size:14px;line-height:1.65;color:var(--muted)}
.partner-cta{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line-soft);font-size:14px;font-weight:600}
.partner-cta .icon{width:18px;height:18px;color:var(--muted)}

/* Profile */
.profile-head{display:flex;align-items:center;gap:14px;margin:36px 0 24px}
.profile-avatar{width:56px;height:56px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--grad-raised);box-shadow:0 0 0 2px var(--bg),0 0 0 3px color-mix(in srgb,var(--accent) 65%,transparent),var(--glow-accent);font-size:22px;font-weight:700}
.profile-head h1{font-size:24px}
.profile-head p{margin-top:2px;font-size:14px;color:var(--subtle)}
.profile-summary{overflow:hidden}
.balance-block{padding:22px 22px 20px}
.balance-block .small-label{margin-bottom:4px;font-size:14px;font-weight:600;color:var(--muted)}
.balance-block .balance-number{font-size:36px}
/* Community point balances. */
:is(.balance-block,.balance-card) .balance-number{width:fit-content;background:linear-gradient(180deg,var(--ink) 35%,color-mix(in srgb,var(--accent) 60%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.balance-block .balance-number small,.balance-card .balance-number small{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft)}
.stat{padding:14px 12px;text-align:center}
.stat+.stat{border-left:1px solid var(--line-soft)}
.stat span{display:block;margin-bottom:2px;font-size:13px;color:var(--subtle)}
.stat strong{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat strong small{margin-left:2px;font-size:13px;font-weight:500;color:var(--muted)}
.history-item{margin-bottom:10px;padding:16px 18px}
.history-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}
.history-item h3{margin-bottom:4px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.history-details,.history-result{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.history-details strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.history-result{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.history-result strong{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 14px color-mix(in srgb,currentColor 35%,transparent)}
.history-result strong.zero{color:var(--subtle)}
/* Events: one button per event, each opening its own page. */
.event-list{display:flex;flex-direction:column;gap:10px}
.event-button{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:left}
.event-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent)}
.event-icon .icon{width:24px;height:24px}
.event-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.event-text strong{font-size:16px;font-weight:700}
.event-text small{font-size:13px;color:var(--muted)}
.event-button>.icon{width:18px;height:18px;color:var(--subtle)}
.back-link{display:inline-flex;align-items:center;gap:4px;margin:-4px 0 14px;font-size:14px;font-weight:600;color:var(--muted)}
.back-link .icon{width:16px;height:16px;transform:rotate(180deg)}
.attendance-card{margin-bottom:20px;padding:20px}
.attendance-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.attendance-stats div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-md);background:var(--raised)}
.attendance-stats span{font-size:12px;color:var(--muted)}
.attendance-stats strong{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.attendance-stats small{margin-left:2px;font-size:13px;font-weight:600;color:var(--muted)}
#attendance-form input{margin:6px 0 12px}
.attendance-done{padding:14px 16px;border-radius:var(--r-md);background:var(--accent-soft)}
.attendance-done strong{display:block;margin-bottom:4px;color:var(--accent)}
.attendance-done p{margin-bottom:6px;overflow-wrap:anywhere}
.attendance-done small{font-size:12px;color:var(--muted)}
.attendance-board{display:flex;flex-direction:column;margin:0;padding:6px 18px;list-style:none}
.attendance-board li{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.attendance-board li:last-child{border-bottom:0}
.attendance-board div{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;font-size:14px}
.attendance-board span{font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}
.attendance-board p{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
/* Bet cart: a side card on wide screens, a bar above the tab bar that opens a sheet on phones. */
.cart-card .side-title{display:flex;align-items:center;gap:8px}
.cart-empty{font-size:14px;color:var(--muted)}
.cart-legs{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px;padding:0;list-style:none}
.cart-card .cart-legs{max-height:min(320px,40vh);overflow-y:auto}
.cart-leg{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 6px 10px 12px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line-soft)}
.cart-leg div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-leg span{overflow:hidden;font-size:11px;color:var(--subtle);text-overflow:ellipsis;white-space:nowrap}
.cart-leg strong{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.cart-leg em{font-size:12px;font-style:normal;color:var(--muted)}
.cart-leg b{font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.cart-leg.closed{opacity:.65}
.cart-leg.closed em{color:var(--failure)}
.cart-remove{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--muted)}
.cart-remove .icon{width:16px;height:16px}
.cart-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:14px;color:var(--muted)}
.cart-total b{margin-left:4px;color:var(--success)}
.cart-total strong{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-actions{display:grid;grid-template-columns:auto 1fr;gap:8px}
.cart-actions .secondary-button{padding:0 16px}
.cart-bar{position:sticky;bottom:8px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:12px;padding:12px 16px;border-radius:var(--r-md);background:var(--grad-accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),var(--glow-accent);font-size:14px;font-weight:700}
.cart-bar span:first-child{display:flex;align-items:center;gap:6px}
.cart-bar span:nth-child(2){margin-left:auto}
.cart-bar .count-badge{background:rgb(255 255 255 / .25);box-shadow:none;color:inherit}
.cart-bar strong{font-variant-numeric:tabular-nums}
.cart-bar .icon{width:18px;height:18px}
.parlay-legs{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.parlay-legs li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.parlay-legs li span{display:flex;flex-direction:column;min-width:0;font-weight:600}
.parlay-legs li small{font-size:12px;font-weight:400;color:var(--muted)}
.parlay-legs li b{flex-shrink:0;font-size:12px;font-weight:600;color:var(--subtle)}
.parlay-legs li.won b{color:var(--success)}
.parlay-legs li.lost b{color:var(--failure)}
.ledger-list{padding:0 18px}
.ledger-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.ledger-row:last-child{border-bottom:0}
.ledger-row p{font-size:15px;font-weight:500}
.ledger-row small{font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}
.ledger-row strong{font-size:15px;font-weight:700;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.ledger-row strong.negative{color:var(--muted)}

/* Feedback */
.empty-state{padding:40px 20px;text-align:center;background:var(--grad-card);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-1);color:var(--muted)}
.empty-icon{width:44px;height:44px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;background:var(--grad-raised);box-shadow:var(--shadow-2),0 0 0 6px color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)}
.empty-icon .icon{width:22px;height:22px}
.empty-state h3{margin-bottom:4px;font-size:16px;font-weight:700;color:var(--ink)}
.empty-state p{font-size:14px}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:320px;font-size:14px;color:var(--muted)}
.loader{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-text{margin:12px 0;padding:10px 12px;border-radius:8px;background:#382326;border:1px solid #63403D;color:var(--failure);font-size:14px}
#toast{position:fixed;left:50%;bottom:32px;z-index:100;width:max-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:999px;background:color-mix(in srgb,var(--raised) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow-3),var(--edge);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Buttons */
.primary-button,.secondary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-md);font-size:15px;font-weight:700;white-space:nowrap;transition:background-color .15s,border-color .15s,filter .15s,box-shadow .15s,transform .1s}
.primary-button{background:var(--grad-accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .38),var(--glow-accent)}
.secondary-button{background:var(--grad-raised);border-color:color-mix(in srgb,var(--line) 60%,transparent);box-shadow:var(--shadow-2);color:var(--ink)}
.danger-button{background:linear-gradient(180deg,#42282B,#382326);border-color:#63403D;box-shadow:var(--shadow-2);color:var(--failure)}
:is(.primary-button,.secondary-button,.danger-button):not(:disabled):active{transform:translateY(1px)}
:is(.primary-button,.secondary-button,.danger-button) .icon{width:18px;height:18px;stroke-width:2}
.full-width{width:100%}
.quiet-button{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border:1px solid var(--line-soft);border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);transition:border-color .15s,color .15s}
.quiet-button .icon{width:16px;height:16px}
.text-link{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s}

/* Forms */
label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--muted)}
input,textarea,select{display:block;width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 82%,#000);box-shadow:var(--recess);color:var(--ink);font-size:15px;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:140px;padding:12px 14px;line-height:1.6;resize:vertical}
select{appearance:none;padding-right:40px;background:color-mix(in srgb,var(--bg) 82%,#000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BDC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px}
input::placeholder,textarea::placeholder{color:var(--subtle)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--recess),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 18px -6px var(--accent)}
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row.three{grid-template-columns:repeat(3,1fr)}
.form-checkbox{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.form-checkbox input{width:18px;height:18px;margin:0;accent-color:var(--accent);box-shadow:none}
.form-checkbox+.form-row{margin-top:16px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.hint{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--subtle)}

/* Dialog */
dialog{width:min(460px,calc(100% - 32px));max-width:none;max-height:min(86dvh,760px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--surface-hi),var(--surface) 140px);color:var(--ink);box-shadow:var(--shadow-3),var(--edge)}
dialog[open]{animation:dialog-in .2s ease-out}
dialog::backdrop{background:rgb(4 10 14 / .58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}}
.modal-body{padding:24px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.modal-header h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.close-button{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--grad-raised);box-shadow:var(--shadow-2);color:var(--muted);transition:color .15s}
.close-button .icon{width:18px;height:18px}
.modal-note{margin-top:12px;font-size:12px;text-align:center;color:var(--subtle)}
.article-detail-title{margin-top:8px;font-size:21px;line-height:1.45;font-weight:700;letter-spacing:-.025em}
.article-body{margin:16px 0 24px;font-size:15px;line-height:1.85;color:var(--muted);white-space:pre-wrap}
.bet-summary{margin-bottom:20px;padding:14px 16px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--accent-soft),var(--raised) 60%);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line-soft));box-shadow:var(--edge)}
.bet-summary-match,.bet-summary strong{display:block;margin-bottom:4px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.bet-summary-pick{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.bet-summary-pick b{color:var(--accent);font-variant-numeric:tabular-nums}
.bet-summary p{font-size:14px;color:var(--muted)}
.input-wrapper{position:relative}
.input-wrapper span{position:absolute;top:50%;right:16px;transform:translateY(-50%);font-size:16px;font-weight:600;color:var(--muted)}
.stake-input{height:56px;padding-right:44px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stake-input::-webkit-inner-spin-button,.stake-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.quick-stakes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.quick-stakes button{height:38px;border-radius:999px;background:var(--grad-raised);box-shadow:var(--shadow-2);font-size:14px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s}
.payout-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 16px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--muted)}
.payout-row strong{font-size:24px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 18px color-mix(in srgb,currentColor 40%,transparent)}

/* Admin */
.admin-body{padding:0 var(--gutter) 64px}
.admin-header{position:relative;max-width:1160px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.brand-badge{margin-left:2px;padding:2px 8px;border-radius:var(--r-sm);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:0}
.admin-header-actions{display:flex;align-items:center;gap:12px}
#admin-main{max-width:1160px;margin:0 auto}
.admin-login{max-width:400px;margin:80px auto;padding:32px}
.admin-login h1{font-size:24px}
.admin-login .subtitle{margin:6px 0 24px;font-size:14px}
.admin-login .primary-button{margin-top:20px}
.admin-notice{margin-bottom:24px;padding:12px 16px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 60%);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line-soft));box-shadow:var(--edge);font-size:14px;color:var(--muted)}
.demo-login-note{margin-top:16px;font-size:13px;line-height:1.7;color:var(--subtle)}
.admin-top{margin:36px 0 24px}
.admin-top h1{font-size:26px}
.admin-top .subtitle{font-size:14px}
.admin-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
.admin-sidebar{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px}
.admin-sidebar button{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);transition:background-color .15s,color .15s}
.admin-sidebar button span:first-child{display:flex}
.admin-sidebar .icon{width:18px;height:18px}
.admin-sidebar button.active{background:linear-gradient(90deg,var(--accent-soft),transparent);box-shadow:inset 2px 0 0 var(--accent);color:var(--accent)}
.admin-content{min-width:0}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.admin-stat{position:relative;overflow:hidden;padding:18px 20px}
.admin-stat::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--grad-accent);opacity:.85}
.admin-stat p{margin-bottom:6px;font-size:13px;color:var(--muted)}
.admin-stat strong{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.admin-stat small{font-size:14px;font-weight:500;color:var(--muted)}
.admin-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.admin-section-heading:not(:first-child){margin-top:32px}
.admin-section-heading h2{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.sync-panel{padding:16px 18px;margin-bottom:20px}
.sync-panel .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.sync-panel h2{font-size:17px}
.sync-panel>p{font-size:13px;color:var(--muted)}
.sync-panel details{margin-top:10px;font-size:13px}
.sync-panel summary{cursor:pointer;color:var(--secondary)}
.admin-section-heading .primary-button{height:38px;padding:0 14px;font-size:14px}
.form-subheading{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;font-weight:700;color:var(--muted)}
.form-subheading:not(:first-child){margin-top:8px}
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px;padding:16px 18px}
.admin-row>div:first-child{min-width:0}
.admin-row h3{margin:4px 0 2px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.admin-row p{overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--subtle)}
.admin-row>strong{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-row .article-meta{gap:8px}
.admin-row .article-meta>*+*::before{display:none}
.row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex-shrink:0}
.row-actions button{height:34px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:var(--grad-raised);box-shadow:var(--shadow-2);font-size:13px;font-weight:600;transition:background-color .15s}
.row-actions .action-green{background:var(--grad-accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),var(--glow-accent)}
.row-actions .action-red{background:transparent;border-color:var(--line);box-shadow:none;color:var(--failure)}

/* Mouse drag-scrolling of horizontal rows (see app.js). */
@media(hover:hover) and (pointer:fine){.fixture-strip,.filter-row{cursor:grab}}
.dragging,.dragging *{cursor:grabbing!important;user-select:none}
.dragging{scroll-snap-type:none}

/* Hover only where a pointer can hover, so taps don't leave sticky states. */
@media(hover:hover){
  .primary-button:not(:disabled):hover,.row-actions .action-green:not(:disabled):hover{filter:brightness(1.07)}
  .point-pill:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .gate-screen a:hover{text-decoration:underline}
  .demo-banner a:hover{text-decoration:underline}
  .bottom-nav a:hover,.tabs button:hover{color:var(--ink)}
  .text-link:hover,.close-button:hover{color:var(--ink)}
  .filter-chip:not(.active):hover{border-color:var(--line);color:var(--ink)}
  .odds-button:not(:disabled):hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--raised)),color-mix(in srgb,var(--accent) 10%,var(--raised)));border-color:var(--accent);box-shadow:var(--shadow-2),var(--glow-accent)}
  .odds-button:not(:disabled):hover strong{color:var(--accent)}
  .match-card:hover,.partner-card:hover{border-color:var(--line)}
  .bigmatch:hover,.lead-story:hover{box-shadow:var(--shadow-1),var(--glow-accent)}
  .match-row:hover{background:color-mix(in srgb,var(--surface) 55%,var(--raised))}
  .lead-story:hover h3,.article:hover h3{color:var(--accent)}
  .side-button:hover,.secondary-button:not(:disabled):hover,.row-actions button:not(:disabled):hover{background:linear-gradient(180deg,color-mix(in srgb,var(--raised-hover) 90%,#fff),var(--raised-hover))}
  .row-actions .action-red:not(:disabled):hover{background:#382326}
  .quiet-button:hover{border-color:var(--line);color:var(--ink)}
  .quick-stakes button:not(:disabled):hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
  .admin-sidebar button:not(.active):hover{background:var(--surface);color:var(--ink)}
}
.odds-button:not(:disabled):active,.quick-stakes button:not(:disabled):active{transform:scale(.98)}

@media(min-width:1000px){
  .match-body{grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px}
}
@media(max-width:900px){
  :root{--gutter:24px}
  .two-col{grid-template-columns:minmax(0,1fr) 260px;gap:24px}
  .admin-layout{grid-template-columns:168px minmax(0,1fr);gap:24px}
  .admin-row{flex-direction:column;align-items:stretch;gap:12px}
  .member-side{flex-direction:row;align-items:center;justify-content:space-between}
  .broadcast-compose{grid-template-columns:1fr}
  .row-actions{justify-content:flex-start}
  .bottom-nav a{padding:0 8px}
  .bottom-nav a.active::after{left:8px;right:8px}
}
@media(max-width:640px){
  :root{--gutter:16px;--header-h:56px}
  h1{font-size:24px}
  .brand{gap:8px}
  .brand-mark{width:26px;height:26px}
  .brand-name{font-size:18px}
  .point-pill{height:32px;padding:0 11px 0 8px;font-size:13px}
  .demo-banner{margin-top:8px;padding:8px 12px;font-size:12px}
  .page-heading{margin:20px 0}
  .subtitle{font-size:14px}
  .date-mark{font-size:13px}
  .two-col{display:block}
  .aside{display:none}
  .section-heading{margin:32px 0 12px}
  .section-heading h2{font-size:17px}
  /* A lone fixture fills the row; several keep 246px and scroll with the next card peeking. */
  .fixture-strip{grid-auto-columns:minmax(246px,1fr);margin:0 calc(var(--gutter) * -1) -18px;padding:0 var(--gutter) 18px;scroll-padding:0 var(--gutter)}
  .tabs{gap:20px}
  .lead-story{padding:18px}
  .lead-story h3{font-size:19px}
  .article{gap:14px}
  .article-thumb{width:56px;height:56px}
  .article-thumb .icon{width:24px;height:24px}
  .match-card{padding:16px}
  .partner-grid{grid-template-columns:1fr;gap:12px}
  .partner-card{padding:18px}
  .profile-head{margin:20px 0}
  .balance-block{padding:20px 18px 18px}
  .balance-block .balance-number{font-size:32px}
  .stat{padding:12px 8px}
  .stat strong{font-size:18px}
  #toast{bottom:calc(74px + var(--inset-bottom))}
  /* Dialogs become bottom sheets on phones. */
  dialog{width:100%;max-width:100%;max-height:90dvh;margin:auto 0 0;border-width:1px 0 0;border-radius:22px 22px 0 0}
  .modal-body{padding:8px 20px calc(24px + var(--inset-bottom))}
  .modal-body::before{content:'';display:block;width:40px;height:4px;margin:0 auto 16px;border-radius:2px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--accent) 50%,var(--line)),var(--line))}
  .modal-header{margin-bottom:16px}
  .admin-body{padding:0 var(--gutter) 40px}
  .admin-header{height:56px}
  .admin-header .brand-name{font-size:17px}
  .admin-header-actions{gap:8px}
  .admin-header .text-link{font-size:13px}
  .admin-top{margin:20px 0 16px}
  .admin-top h1{font-size:22px}
  .admin-layout{display:block}
  .admin-sidebar{position:static;flex-direction:row;gap:6px;margin:-4px calc(var(--gutter) * -1) 8px;padding:4px var(--gutter) 12px;overflow-x:auto;scrollbar-width:none}
  .admin-sidebar::-webkit-scrollbar{display:none}
  .admin-sidebar button{flex-shrink:0;height:36px;padding:0 13px;border:1px solid var(--line-soft);border-radius:999px;background:var(--grad-raised);box-shadow:var(--shadow-2);font-size:13px;white-space:nowrap}
  .admin-sidebar button.active{border-color:transparent;background:var(--grad-accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),var(--glow-accent);color:var(--on-accent)}
  .admin-sidebar button span:first-child{display:none}
  .admin-stats{gap:8px}
  .admin-stat{padding:14px 12px}
  .admin-stat p{font-size:12px}
  .admin-stat strong{font-size:20px}
  .admin-row{padding:14px 16px}
  .member-tools select{width:124px}
  .admin-login{margin-top:40px;padding:24px}
  .admin-body #toast{bottom:24px}

  /* The Mini App is one viewport: only its content scrolls above the tab bar. */
  body.mini-app{height:100dvh;overflow:hidden}
  .app-shell{height:100dvh;display:flex;flex-direction:column;padding:0;overflow:hidden}
  .app-shell .header{flex-shrink:0;margin:0 var(--gutter)}
  .app-shell .demo-banner{flex-shrink:0;margin:8px var(--gutter)}
  .app-shell #main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:0 var(--gutter) 28px;scrollbar-width:none}
  .app-shell #main::-webkit-scrollbar{display:none}
  .app-shell .page-footer{display:none}
  .live-bar{margin:14px 0 10px}
  .live-bar h1{font-size:19px}
  .live-stage{border-radius:var(--r-md)}
  .bottom-nav{position:relative;top:auto;left:auto;flex-shrink:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;width:100%;height:calc(58px + var(--inset-bottom));padding:0 4px var(--inset-bottom);background:linear-gradient(180deg,var(--surface-hi),color-mix(in srgb,var(--surface) 70%,var(--bg)));border-top:1px solid var(--line-soft);box-shadow:inset 0 1px 0 rgb(255 255 255 / .05),0 -12px 28px -14px rgb(0 0 0 / .6)}
  .bottom-nav a{flex-direction:column;justify-content:center;gap:3px;padding:0 0 6px;font-size:11px;font-weight:600;color:var(--subtle)}
  .bottom-nav svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .bottom-nav a.active{color:var(--accent)}
  .bottom-nav a.active svg{stroke-width:2;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 60%,transparent))}
  .bottom-nav a.active::after{display:none}
  /* 중계·베팅·제휴 are the featured tabs: each has its own glow colour, a 30% larger icon and a slight tilt. */
  .bottom-nav a[data-tab="live"]{--glow:#FF6B81;--tilt:-12deg}
  .bottom-nav a[data-tab="betting"]{--glow:#FFC94D;--tilt:10deg}
  .bottom-nav a[data-tab="partners"]{--glow:#5EE6C4;--tilt:-8deg}
  .bottom-nav a.nav-feature{color:color-mix(in srgb,var(--glow) 70%,var(--muted))}
  .bottom-nav a.nav-feature svg{width:31px;height:31px;margin-top:-6px;stroke:var(--glow);stroke-width:1.9;transform:rotate(var(--tilt));filter:drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 9px color-mix(in srgb,var(--glow) 55%,transparent))}
  .bottom-nav a.nav-feature svg>:first-child{fill:color-mix(in srgb,var(--glow) 18%,transparent)}
  .bottom-nav a.nav-feature.active{color:var(--glow)}
  .bottom-nav a.nav-feature.active svg{stroke-width:2.1;filter:drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 16px var(--glow))}
  .bottom-nav a.nav-feature.active svg>:first-child{fill:color-mix(in srgb,var(--glow) 32%,transparent)}
  /* The featured tabs are always coloured, so the selected tab also gets a bar under its label in its own colour (blue for the rest). */
  .bottom-nav a.active::before{content:'';position:absolute;bottom:2px;left:50%;width:26px;height:3px;border-radius:3px;background:var(--glow,var(--accent));box-shadow:0 0 8px var(--glow,var(--accent));transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}