/* ==========================================================================
   MODERN DESIGN SYSTEM (v73)  -  Part 4 of the UI cleanup
   Loaded LAST (after polish.css). App UI only:
   NEVER touches banner / export classes (.pub-*, .mvp-*, banner-*), so every
   exported PNG / PDF stays pixel-identical.
   Rules of this system:
   1. Nothing may leave a big empty side on a wide screen (desktop mode on a phone included):
      forms use 2 columns from 900px up, 1 column below.
   2. One accent (orange), calm neutral surfaces, depth from soft borders + shadow, not from colour.
   3. Long explanations hide behind a small "?" so a page reads in one glance.
   4. Every control is >= 44px tall and has a clear focus + hover state.
   ========================================================================== */

/* ---------- 1. TOKENS (dark only; light theme keeps its own values) ---------- */
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-base: #0b0d14;
    --bg-surface: #10131c;
    --bg-elevated: #171b29;
    --bg-card: #141826;
    --bg-hover: #1d2233;
    --bg-active: #262c42;
    --text-secondary: #aab0c5;
    --text-muted: #7a8198;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.17);
    --gradient-glow:
        radial-gradient(900px 420px at 12% -6%, rgba(255, 107, 0, 0.13), transparent 62%),
        radial-gradient(800px 400px at 96% 0%, rgba(99, 102, 241, 0.11), transparent 62%);
}
:root {
    --radius-lg: 18px;
    --radius-xl: 24px;
    --field-bg: color-mix(in srgb, var(--bg-base) 72%, transparent);
    --section-pad: 22px;
}
[data-theme="light"] { --field-bg: #f6f7fb; }

/* ---------- 2. PAGE HEADER ---------- */
.dashboard-header { margin-bottom: var(--space-6); }
.dashboard-title {
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.dashboard-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }

/* ---------- 3. CARDS ---------- */
.card { border-radius: var(--radius-lg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 36px -22px rgba(0, 0, 0, 0.75); }
[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 30px -20px rgba(20, 20, 40, 0.25); }

/* ---------- 4. FORM CONTROLS ---------- */
.form-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); margin-bottom: 6px; }
.form-label-note { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.form-input, .form-select, .form-textarea {
    min-height: 46px;
    border-radius: 12px;
    background: var(--field-bg);
    border: 1px solid var(--border-default);
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--border-strong); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
input[type="date"].form-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: left; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; }
.form-hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }

/* small "?" that opens a long explanation only when someone wants it */
.fhelp > summary {
    list-style: none; cursor: pointer; user-select: none;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
    border: 1px solid var(--border-default); background: var(--field-bg);
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.fhelp > summary::-webkit-details-marker { display: none; }
.fhelp > summary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.fhelp[open] > summary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.fhelp > p {
    margin: 10px 0 0; padding: 12px 14px; border-radius: 12px;
    font-size: 0.82rem; line-height: 1.65; color: var(--text-secondary);
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    animation: fhelpIn 200ms var(--ease-out);
}
@keyframes fhelpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 5. SECTIONS (numbered blocks used by long forms) ---------- */
.tf-form { counter-reset: fsec; }
.fsec {
    counter-increment: fsec;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, #fff 7%) 0%, var(--bg-card) 40%);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--section-pad);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 36px -22px rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .fsec { background: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 30px -20px rgba(20, 20, 40, 0.25); }
.fsec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.fsec-num::before {
    content: counter(fsec);
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px;
    font-size: 0.82rem; font-weight: 800; color: #fff;
    background: linear-gradient(180deg, #ff7d1f 0%, #f26200 100%);
    box-shadow: 0 6px 14px -6px rgba(255, 107, 0, 0.7);
}
.fsec-title { margin: 0; font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; color: var(--text-primary); }
.fhelp-head { margin-left: auto; }
.fhelp-head[open] { flex: 1 0 100%; order: 3; margin-left: 0; }
.fsec .form-group:last-child { margin-bottom: 0; }

/* ---------- 6. TOURNAMENT FORM LAYOUT ---------- */
.tf-page { width: 100%; }
.tf-page > .card { background: none; border: 0; box-shadow: none; padding: 0; }
.tf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.tf-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.tf-fields .form-group { margin-bottom: 0; min-width: 0; }
.tf-fields + .form-group { margin-top: 14px; }
.tf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tf-narrow { max-width: 200px; }
.tf-switch {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 13px 15px; margin: 0; border-radius: 12px;
    border: 1px solid var(--border-default); background: var(--field-bg);
    font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.tf-switch:hover { border-color: var(--border-strong); }
.tf-switch:has(input:checked) { border-color: color-mix(in srgb, var(--color-primary) 60%, transparent); background: color-mix(in srgb, var(--color-primary) 9%, transparent); }
#t-cr-fields { margin-top: 14px; }
#t-cr-fields .form-hint { margin-top: 10px; }

/* position points: compact, several per row on wide screens */
#tf-placement-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 12px; margin-bottom: 12px; }
#tf-placement-rows .form-row { margin-bottom: 0 !important; grid-template-columns: 78px minmax(0, 1fr) 40px !important; }
#tf-placement-rows .form-input { min-height: 42px; }
#tf-placement-rows .btn { min-height: 42px; padding: 0; }

.tf-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.tf-actions .btn { min-height: 48px; min-width: 140px; justify-content: center; }
.tf-actions .btn-primary { min-width: 220px; }
.tf-actions .btn-ghost { border: 1px solid var(--border-default); }

@media (min-width: 900px) {
    .tf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 768px) {
    :root { --section-pad: 16px; }
    .tf-fields { grid-template-columns: 1fr 1fr; }
    #tf-placement-rows { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
    #tf-placement-rows .form-row { grid-template-columns: 54px minmax(0, 1fr) 36px !important; gap: 6px !important; }
    .tf-actions {
        position: sticky; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px); z-index: 20;
        padding: 10px; margin: 18px -4px 0; border-radius: 16px; gap: 10px;
        background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border: 1px solid var(--border-subtle); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    }
    .tf-actions .btn { flex: 1 1 0; min-width: 0; }
    .tf-actions .btn-primary { flex: 1.6 1 0; }
}
@media (max-width: 480px) {
    .tf-pair { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STEP GUIDE (v74)  -  "what to do now / what comes next" strip + 5-step tracker
   Built by js/step-guide.js. Motion: card slides in, steps pop one after another,
   the orange line fills up to the current step, the current step pulses softly,
   the big button breathes. All of it is switched off for "reduce motion".
   ========================================================================== */
.sg {
    position: relative; overflow: hidden;
    margin: 0 0 var(--space-6); padding: 18px 22px 18px 26px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, #fff 7%) 0%, var(--bg-card) 45%);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 36px -22px rgba(0, 0, 0, 0.75);
    animation: sgIn 460ms var(--ease-out) both;
}
[data-theme="light"] .sg { background: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 30px -20px rgba(20, 20, 40, 0.25); }
.sg::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #ff8a35, #f26200); }

.sg-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.sg-hero-text { flex: 1 1 320px; min-width: 0; }
.sg-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary); }
.sg-head { margin: 4px 0 6px; font-family: var(--font-body); font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); font-weight: 800; line-height: 1.25; color: var(--text-primary); }
.sg-sub { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-secondary); }
.sg-next { font-size: 0.8rem; color: var(--text-muted); }
.sg-next b, .sg-line b { color: var(--text-primary); font-weight: 700; }
.sg-cta { flex: 0 0 auto; min-width: 220px; justify-content: center; animation: sgBreathe 2.6s ease-in-out infinite; }
.sg-cta svg, .sg-go svg { width: 17px; height: 17px; transition: transform 160ms var(--ease-out); }
.sg-cta:hover svg, .sg-go:hover svg { transform: translateX(3px); }

.sg-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; font-size: 0.88rem; color: var(--text-secondary); }
.sg-compact { padding: 14px 18px 14px 22px; margin-bottom: var(--space-5); }

/* tracker */
.sg-steps { position: relative; display: grid; grid-template-columns: repeat(var(--sg-n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sg-track { position: absolute; top: 16px; left: calc(50% / var(--sg-n)); right: calc(50% / var(--sg-n)); height: 3px; border-radius: 3px; background: var(--border-default); }
.sg-fill { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff8a35, #f26200); animation: sgFill 900ms 260ms var(--ease-out) forwards; }
.sg-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: sgPop 420ms calc(var(--i) * 80ms + 120ms) var(--ease-spring) both; }
.sg-dot {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.85rem; font-weight: 800; text-decoration: none; cursor: pointer;
    color: var(--text-muted); background: var(--bg-surface); border: 2px solid var(--border-strong);
    transition: transform 140ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.sg-dot:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary); }
.sg-dot svg { width: 16px; height: 16px; }
.sg-step.is-done .sg-dot { color: #fff; border-color: transparent; background: linear-gradient(180deg, #ff8a35, #f26200); box-shadow: 0 6px 14px -6px rgba(255, 107, 0, 0.7); }
.sg-step.is-now .sg-dot { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--bg-surface)); animation: sgRing 2.2s ease-out infinite; }
.sg-label { max-width: 100%; font-size: 0.74rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-muted); overflow-wrap: anywhere; }
.sg-step.is-done .sg-label, .sg-step.is-now .sg-label { color: var(--text-primary); }
.sg-step.is-here .sg-label { color: var(--color-primary); font-weight: 800; }
.sg-step.is-here .sg-label::after { content: ""; display: block; width: 18px; height: 3px; margin: 4px auto 0; border-radius: 3px; background: var(--color-primary); }

@keyframes sgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sgPop { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes sgFill { to { width: var(--sg-progress); } }
@keyframes sgRing { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.55); } 70% { box-shadow: 0 0 0 11px rgba(255, 107, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); } }
@keyframes sgBreathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.35), 0 8px 18px -8px rgba(255, 107, 0, 0.55); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -6px rgba(255, 107, 0, 0.9); } }

@media (max-width: 768px) {
    .sg { padding: 14px 14px 14px 18px; }
    .sg-hero { margin-bottom: 18px; }
    .sg-cta { width: 100%; min-width: 0; }
    .sg-dot { width: 30px; height: 30px; font-size: 0.78rem; }
    .sg-track { top: 14px; }
    .sg-label { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sg, .sg-step, .sg-fill, .sg-step.is-now .sg-dot, .sg-cta, .fhelp > p { animation: none !important; }
    .sg-fill { width: var(--sg-progress); }
}

/* ==========================================================================
   PART 6 (v75)  -  Dashboard, Tournaments, Teams, Add team
   ========================================================================== */

/* ---------- toolbar (search + filter + main button) ---------- */
.section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.section-title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
#tournament-search, #team-search { flex: 1 1 240px; min-width: 200px; max-width: 380px !important; }
#tournament-filter, #team-filter { flex: 0 0 auto; min-width: 150px; }
.section-header > div:first-child { flex: 1 1 320px; }

/* ---------- list cards (tournaments, teams) ---------- */
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.list-card {
    position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-radius: var(--radius-lg); cursor: pointer; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, #fff 7%) 0%, var(--bg-card) 45%);
    border: 1px solid var(--border-default);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 36px -24px rgba(0, 0, 0, 0.8);
    transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
[data-theme="light"] .list-card { background: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 30px -22px rgba(20, 20, 40, 0.3); }
.list-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #ff8a35, #f26200); opacity: 0.55; transition: opacity 180ms var(--ease-out); }
.list-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent); }
.list-card:hover::before { opacity: 1; }
.list-card:active { transform: translateY(-1px); }
.list-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.list-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.list-card .team-tag { font-weight: 600; font-size: 0.82rem; color: var(--color-primary); }
.list-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.list-card-meta > span {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 500; color: var(--text-secondary);
    background: var(--field-bg); border: 1px solid var(--border-subtle);
}
.list-card-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.list-card-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--border-subtle); }
.list-card-organizer { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- stat cards + quick actions (dashboard) ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: var(--space-6); }
.stat-card {
    padding: 18px 20px; border-radius: var(--radius-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, #fff 7%) 0%, var(--bg-card) 45%);
    border: 1px solid var(--border-default);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 36px -24px rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .stat-card { background: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 20, 40, 0.06), 0 14px 30px -22px rgba(20, 20, 40, 0.3); }
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
.stat-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-value { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.stat-change { font-size: 0.75rem; }

.dashboard-section { margin-bottom: var(--space-7, 40px); }
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.quick-action-card {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-default);
    transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.quick-action-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.8); }
.quick-action-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.quick-action-icon svg { width: 22px; height: 22px; }
.quick-action-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.quick-action-desc { margin-top: 2px; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }

/* ---------- empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-card) 60%, transparent); }
.empty-state-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; margin-bottom: 14px; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state-title { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.empty-state-desc { max-width: 420px; margin: 0 0 16px; font-size: 0.88rem; color: var(--text-muted); }
#activity-card .empty-state { border: 0; background: none; }

/* ---------- Add team ---------- */
.tc-tabs {
    display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; width: min(100%, 440px);
    margin-bottom: var(--space-5); border-radius: 14px; background: var(--field-bg); border: 1px solid var(--border-default);
}
.tc-tabs .btn { min-height: 42px; justify-content: center; border-radius: 10px; }
.tc-tabs .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); box-shadow: none; }
.tc-tabs .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.tc-panels { width: 100%; }
.tc-panels > .card { padding: var(--section-pad); }
.tc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.tc-cols .form-group:last-child { margin-bottom: 0; }
.tc-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tc-label-row .form-label { margin: 0; }
.tc-label-row .fhelp { position: relative; }
.tc-label-row .fhelp[open] { flex: 1 0 100%; order: 3; }
.tc-tip {
    margin: 0; padding: 14px 16px; border-radius: 14px; font-size: 0.85rem; line-height: 1.75; color: var(--text-secondary);
    background: color-mix(in srgb, var(--color-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.tc-smart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tc-ai-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
#sp-text { min-height: 300px; }
.tc-panels .table-container { border-radius: 14px; border: 1px solid var(--border-default); overflow: hidden; }

@media (min-width: 900px) {
    .tc-cols { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); gap: 28px; }
    .tc-cols.tc-cols-smart { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .card-list { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-card { padding: 14px 16px; }
    .quick-actions { grid-template-columns: 1fr; }
    .section-header > div:first-child { flex-basis: 100%; }
    #tournament-search, #team-search { max-width: none !important; }
}

/* ==========================================================================
   PART 7 (v77) - Matches, Leaderboard, MVP, Tournament/Team detail, Profile,
   Subscribe, Admin, AI settings, Login/Register.
   RULE: no big empty side. The old pages put every card in ONE narrow column
   (inline max-width 600-900px). From 900px we make it 2 columns and let the
   wide cards (tables) span both. Below 900px it stays 1 column.
   ========================================================================== */
.dashboard > .form-row[style*="max-width"] { max-width: none !important; width: 100%; }
@media (min-width: 900px) {
    .dashboard > .form-row[style*="max-width"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: start;
    }
    .dashboard > .form-row[style*="max-width"] > .card { margin: 0; min-width: 0; }
    /* Matches: tournament + upload side by side; review table + history full width */
    .form-row:has(> #mt-upload-card) > #mt-review-card,
    .form-row:has(> #mt-upload-card) > .card:last-child { grid-column: 1 / -1; }
    /* Team detail: info + players side by side, danger zone full width */
    .form-row:has(> #td-edit-actions-card) > .card:last-child { grid-column: 1 / -1; }
    /* Admin: first (stats) full width, long forms stay half width */
    .form-row:has(#platform-stats-body) > .card:first-child { grid-column: 1 / -1; }
    /* AI settings: API key + second card side by side, usage log full width */
    .form-row:has(#ai-log-body) > .card:last-child { grid-column: 1 / -1; }
    /* Profile: header card (avatar + stats) full width */
    .form-row:has(#support-card) > .card:first-child { grid-column: 1 / -1; }
}
/* Subscribe: wider page so it fills the screen on PC / desktop mode */
.sub-page { max-width: 1240px; }

/* ==========================================================================
   PART 9 (v79) - colourful header icons (phone), like the Free Fire top bar.
   Subscription (gold crown + badge), AI settings (colourful "AI" mark, subscribers only), Admin (rose shield, admins only),
   Profile = the avatar. Logout moves to the Profile page on phone. PC unchanged.
   ========================================================================== */
.hdr-ico {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .15s ease, filter .15s ease;
}
.hdr-ico:active { transform: scale(.92); }
.hdr-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hdr-ico-sub { background: linear-gradient(145deg, #ffd34d, #ff8a00); }
.hdr-ico-ai  { background: linear-gradient(135deg, #22d3ee 0%, #6366f1 50%, #d946ef 100%); }
.hdr-ico-admin { background: linear-gradient(145deg, #fb7185, #e11d48); }
.hdr-ai-mark { font: 900 15px/1 var(--font-display, var(--font-body)); letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hdr-ico-ai::after { content: "\2726"; position: absolute; top: 2px; right: 4px; font-size: 8px; line-height: 1; color: #fff; opacity: .9; }
.hdr-badge {
    position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; font: 800 10px/14px var(--font-body); text-align: center; color: #fff;
    background: #10b981; border: 2px solid var(--bg-surface); box-sizing: border-box;
}
.hdr-badge.warn { background: #f59e0b; }
.hdr-badge.danger { background: #ef4444; }
.hdr-badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -3px; right: -3px; background: #ef4444; animation: hdrPulse 1.6s ease-out infinite; }
.hdr-badge[hidden] { display: none; }
@keyframes hdrPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (min-width: 769px) { .hdr-ico { display: none !important; } }
@media (max-width: 768px) {
    .app-header [data-action="logout"] { display: none; }
    .header-actions { gap: 8px; }
    .header-actions .btn-icon#theme-toggle { width: 36px; min-height: 36px; }
}

/* Profile: live subscription countdown card */
.cd-card { margin: 0 0 var(--space-4); padding: 16px; border-radius: var(--radius-xl); max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--cd, #10b981) 40%, var(--border-default));
    background: linear-gradient(160deg, color-mix(in srgb, var(--cd, #10b981) 12%, var(--bg-card)), var(--bg-card)); }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cd-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--cd, #10b981) 18%, transparent); color: var(--cd, #10b981); }
.cd-plan { font-size: 12px; color: var(--text-muted); }
.cd-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.cd-box { padding: 10px 0 8px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border-default); }
.cd-box b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--cd, #10b981); font-variant-numeric: tabular-nums; }
.cd-box span { font-size: 11px; color: var(--text-muted); }
.cd-bar { height: 6px; border-radius: 99px; background: var(--bg-surface); margin: 14px 0 8px; overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 99px; background: var(--cd, #10b981); transition: width .6s; }
.cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.cd-renew { margin-top: 12px; width: 100%; }
.cd-off-text { margin: 0 0 4px; color: var(--text-secondary); font-size: var(--text-sm); }
@media (min-width: 900px) { .cd-card { max-width: 560px; } }

/* ==========================================================================
   PART 10 (v81) - day (light) mode: settings buttons that had white text on a white card.
   .pub-tpl-swatch is white-text by design (it sits on a coloured gradient). Buttons that carry NO
   colour of their own (Layout / Spot / Brush shape / Label font / logo position ...) now follow the theme.
   ========================================================================== */
.pub-tpl-swatch:not([style*="background"]) {
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-shadow: none;
    border-color: var(--border-default);
}
.pub-tpl-swatch:not([style*="background"]):hover { background: var(--bg-hover); }
.pub-tpl-swatch:not([style*="background"]).pub-tpl-swatch-active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 14%, var(--bg-card));
    color: var(--text-primary);
}
/* "selected" rings were white = invisible on a white card */
[data-theme="light"] .pub-ov-combo.pub-ov-active,
[data-theme="light"] .pub-hl-dot.pub-ov-active,
[data-theme="light"] .mvp-tpl-chip.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); }
[data-theme="light"] .pub-hl-dot { box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
[data-theme="light"] .pub-ov-section,
[data-theme="light"] .pub-ov-el { border-color: var(--border-default); }

/* Tournament picker (top of Publish / MVP) */
.tpick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--space-4); padding: 12px 14px;
    background: var(--bg-card); border: 1px solid var(--border-default); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); }
.tpick-label { font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); }
.tpick-select { flex: 1 1 220px; min-width: 0; }
.tpick-empty { display: block; color: var(--text-secondary); }

/* v81b: dashboard point-table banner is scaled to the phone screen (js/banner-bar.js fitBannerCard) */
.bn-fit { width: 100%; overflow: hidden; position: relative; }
.bn-fit > .pub-banner { transform-origin: top left; }