/* Stats highlights - Król Strzelców */
.stats-highlight-king {
    margin-top: 16px;
}
.stats-highlight-card-king {
    grid-column: span 2;
}
@import url('https://fonts.cdnfonts.com/css/ds-digital');

.btn-stats-quick {
    background: #f3f4f6;
    color: var(--men-group-B);
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background 0.15s;
    box-shadow: 0 1px 4px rgba(43,108,176,0.08);
    position: relative;
    padding: 0;
}
.btn-stats-quick:hover, .btn-stats-quick:focus {
    background: #e0e7ef;
    color: #174a7c;
}
.btn-stats-quick .stats-label {
    display: none;
}
.btn-stats-quick:focus .stats-label, .btn-stats-quick:hover .stats-label {
    display: inline;
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--men-group-B);
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(43,108,176,0.10);
    white-space: nowrap;
    z-index: 10;
}
.stats-icon-img {
    width: 22px;
    height: 22px;
    display: block;
}
:root {
    --groups-scroll-distance: -40px;
    --header: #5E0F14;
    --bg: #f6f7fb;
    --card: #fff;
    --second-stage: #6436b9;
    --accent: #2b6cb0;
    --muted: #666;
    --pad: 14px;
    --top-offset: 130px;
    font-family: Inter, Roboto, Arial, sans-serif;
    /* men group colors */
    --men-group-A: #000277;
    --men-group-B: #0d59cc;
    --men-group-C: #3690da;
    /* women group colors */
    --women-group-A: #8b2e2e;
    --women-group-B: #e74c3c;
    --women-group-C: #f5a5a5;
}* { box-sizing: border-box }
html, body { margin: 0; padding: 0; height: 100% }
body { background: var(--bg); color: #111; font-size: 0.95rem; height: 100%; }
#appContainer { display: flex; flex-direction: column; min-height: 100vh }
button { box-shadow: 1px 2px 5px #212033d6, 0 2px 7px rgba(0, 0, 0, 0.15); background: var(--accent); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer }
button#clearBtn { background: #6b7280 }
/* Sticky Navigation */
.sticky-nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); z-index: 1000 }
.topbar {
    display: flex;
    justify-content: center;
    padding: 10px 20px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
}

.topbar-center { width: 100%; display: flex; align-items: center; gap: 12px; justify-content: center }
.nav-group { display: none; gap: 4px;}
#adsRow {
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: center;
    height: 100px;
    padding: 6px 12px;
    width: 100%;
    position: relative;
    justify-content: space-evenly;
    box-sizing: border-box;
    min-width: 0
}.nav-btn {display: none;}

/* Minimal, clear navigation buttons */
.topbar button {
    background: floralwhite;
    color: #111827;
    border: 1px solid rgba(15,23,42,0.06);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease, box-shadow 160ms ease, transform 120ms ease;
    min-height: 36px;
}
.topbar button:hover {
    background: rgba(59,130,246,0.06);
    color: var(--accent);
    transform: translateY(-1px);
}
.topbar button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.28);
}
.topbar button.active {
    background: var(--accent);
    color: #ffffff;
    border-color: rgba(39,83,163,0.95);
    box-shadow: 1px 2px 5px #212033, 0 2px 7px rgba(0, 0, 0, 0.15)
}
/* Auth controls aligned to right */
#authControls { display: none; align-items: center; gap: 8px }
#currentUserDisplay { margin-right: 8px; font-weight: 600; color: #1f2937 }

/* Topbar ads placeholder - show sponsor images evenly across the topbar */
#adsRow-transition {
.sponsor-img{
    flex: 1 1 0;
    width: 100%;
    max-width: 33%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin: 0;
    min-width: 0;
    display: block;
}
    will-change: transform, opacity;
}

#adsRow {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 100px;
    width: auto;
    position: relative;
    justify-content: space-evenly;
    box-sizing: border-box;
    background: transparent;
}.ads-collapsed{opacity:0;transform:translateY(-60%);pointer-events:none}

/* Transition for the entire sticky nav/topbar */
.sticky-nav.topbar-transition { background: transparent; transition: transform 0.9s cubic-bezier(.2,.9,.2,1), opacity 0.45s cubic-bezier(.2,.9,.2,1); will-change: transform, opacity }
.sticky-nav.topbar-collapsed { transform: translateY(-85%); opacity: 0; pointer-events: none }
.sponsor{flex:0 1 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 6px;overflow:hidden}
.ads-close{position:absolute;top:4px;right:6px;background:rgba(0,0,0,0.08);border:none;border-radius:50%;width:24px;height:24px;font-size:16px;font-weight:700;color:#374151;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ads-close:hover{background:rgba(0,0,0,0.15)}

/* Sponsor images in topbar */
.sponsor-img{height:100px;object-fit:contain;margin:0;flex:0 1 auto;max-width:100%;width:auto;display:block}

/* Poster modal styles */
#posterModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:1000}
#posterModal.open{display:flex}
#posterModal img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
#posterModal .pm-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.6);color:#fff;border:0;padding:10px 14px;border-radius:6px;font-size:16px;cursor:pointer}

/* Login modal styles */
.modal { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; z-index:2000 }
.modal-content { background:white; padding:20px; border-radius:8px; margin:80px auto; position:relative; min-width:360px }
.modal-content input { padding:10px; font-size:16px; height:40px; width:100%; box-sizing:border-box }
/* Main Container */
.main-container { display: grid; margin-top: var(--top-offset) }
/* Header */
.page-header { width: 100%; background: var(--header); color: #fff; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center }
.page-header h1 { margin: 0; font-size: 1.5rem }

/* Unlock first stage button (initially hidden; visibility controlled by JS) */
#unlockFirstStageBtn, .btn-unlock-first-stage {
    display: none;
}

/* Locked match action appearance */
.match-action-locked { opacity: 0.9; cursor: default; }
.match-action-locked .action-icon { font-size: 0.95rem }
.header-btn { background: #fff; color: var(--header); border: none; padding: 8px 14px; border-radius: 6px; font-weight: 700; cursor: pointer }
.header-btn:hover { opacity: .9 }
/* Content Wrapper */
.content-wrapper { flex: 1; padding: 20px; max-width: 2400px; margin: 0 auto; width: 100% }
.home-dashboard { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start }
.home-left, .home-right { display: flex; flex-direction: column; gap: 22px }
.dashboard-card { background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); padding: 18px; border-radius: 18px; box-shadow: 0 12px 38px rgba(10, 30, 70, .12); border: 1px solid #e3e8ef }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.section-header .section-title { margin: 0; letter-spacing: .5px }
.section-meta { color: #5b6470; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px }

@media (min-width: 1400px) {
    .home-dashboard { grid-template-columns: minmax(820px, 1.5fr) minmax(520px, 0.8fr); gap: 26px }
    .content-wrapper { padding: 26px }
}
/* Sections */
section { display: none }
/* In fullscreen we keep sponsors visible: hide nav controls but show adsRow as a fixed sponsor strip */
body.in-fullscreen { font-size: 0.9rem; height: 100vh; }
.in-fullscreen .content-wrapper { padding-top: 26px; padding-bottom: 0; overflow: hidden; }
.in-fullscreen .site-footer { height: auto;}  
.in-fullscreen .home-dashboard { height: 100%; grid-template-columns: minmax(1120px,) minmax(520px, 0.8fr); gap: 26px;}
.in-fullscreen .home-left { max-height: calc(100vh - 280px); min-height: 0; }
.in-fullscreen .home-right { max-height: calc(100vh - 280px); min-height: 0; }
.in-fullscreen .dashboard-card { height: 95%; }
.in-fullscreen .groups-block {height: 98%; overflow: hidden;}
.in-fullscreen .group-locked { display: none; }
.in-fullscreen .standings-legend { display: none; }
/* .in-fullscreen .groups-container-dashboard { height: 95%; } */
.in-fullscreen .live-game { height: 170px; }
.in-fullscreen .matches-block { display: grid; height: calc(98% - 274px); overflow: hidden; }
/* scrolling inside matches table*/
.in-fullscreen .matches-container-dashboard { height: 98%; overflow: auto; padding-bottom: 30px}
/* with autoscrolling overflow needs to be hidden */
/* .in-fullscreen .matches-container-dashboard { height: 98%; overflow: hidden;} */
.in-fullscreen .game-info {position: relative; z-index: 10005;}
.in-fullscreen .sticky-nav { display: block; background: transparent; box-shadow: none; position: fixed; top: 0; left: 0; right: 0; z-index: 10006 }
.in-fullscreen .topbar { background: transparent; padding: 6px 8px }
.in-fullscreen .topbar .nav-group, .in-fullscreen #authControls, .in-fullscreen .topbar button:not(#fullscreenToggle) { display: none !important }
.in-fullscreen #adsRow { display: flex !important; position: fixed; gap: 100px; top: 0; left: 0; right: 0; height: 110px; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); z-index: 10004 }
.in-fullscreen .main-container { margin-top: 110px; height: calc(100vh - 110px); }

/* Fullscreen top-right overlay logo */
#mcupOverlayLogo {
    display: none;
    position: fixed;
    top: 5px;
    right: 60px;
    width: auto;
    max-width: 22vw;
    height: 90px;
    z-index: 10008; /* above other fullscreen UI layers */
    pointer-events: none; /* allow clicks through */
    opacity: 0.98;
}
.in-fullscreen #mcupOverlayLogo { display: block; }

.in-fullscreen .feedback-invite { display: none}


/* Auto-scroll animation for groups list (CSS-only). The inner wrapper
   `.groups-scroll` is animated when in fullscreen to scroll content upward.
   Hovering will pause the animation. Duration is conservative; adjust as needed. */
.groups-scroll { display: block; overflow: hidden; }
.in-fullscreen .groups-container { height: 95%; overflow: hidden; will-change: transform; animation: groups-scroll-up 15s linear infinite; animation-duration: 15s; animation-direction: alternate; animation-timing-function: ease-in-out;}
.in-fullscreen .groups-scroll .groups-container:hover { animation-play-state: paused; }

@keyframes groups-scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--groups-scroll-distance)); }
}

/* @media (max-height: 700px) {
    @keyframes groups-scroll-up {
        0% { transform: translateY(0); }
        100% { transform: translateY(-45%); }
    }
} */


section.active { display: block }
.fullscreen-exit {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10006;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(2,6,23,.28);
}
.fullscreen-exit:focus { outline: 2px solid rgba(255,255,255,.18) }
/* Non-blocking input prompt modal (used instead of window.prompt to avoid blocking the event loop) */
#inputPromptModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 11000;
}
#inputPromptModal.open { display: flex; }
#inputPromptModal .prompt-card {
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    width: 450px;
    max-width: calc(100% - 40px);
    box-shadow: 0 12px 36px rgba(12,30,60,0.28);
}
#inputPromptModal .prompt-message { margin-bottom: 10px; color: #111; font-weight: 600 }
#inputPromptModal .prompt-input { width: 100%; padding: 8px 10px; font-size: 1rem; border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: 12px }
#inputPromptModal .prompt-actions { display:flex; gap:8px; justify-content:flex-end }
#inputPromptModal .prompt-actions button { padding: 8px 12px; border-radius:6px; border:0; cursor:pointer }
#inputPromptModal .prompt-actions .cancel { background:#f3f4f6; color:#111 }
#inputPromptModal .prompt-actions .ok { background:var(--accent); color:#fff }

/* Non-blocking confirm modal (used instead of window.confirm) */
#confirmModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 11001;
}
#confirmModal.open { display: flex; }
#confirmModal .confirm-card {
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    width: 450px;
    max-width: calc(100% - 40px);
    box-shadow: 0 12px 36px rgba(12,30,60,0.28);
}
#confirmModal .confirm-message { margin-bottom: 12px; color: #111; font-weight: 600 }
#confirmModal .confirm-actions { display:flex; gap:8px; justify-content:flex-end }
#confirmModal .confirm-actions button { padding: 8px 12px; border-radius:6px; border:0; cursor:pointer }
#confirmModal .confirm-actions .cancel { background:#f3f4f6; color:#111 }
#confirmModal .confirm-actions .ok { background:var(--accent); color:#fff }

/* Color picker prompt (matches inputPromptModal layout) */
#colorPromptModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 11002;
}
#colorPromptModal.open { display: flex; }
#colorPromptModal .prompt-card {
    background: #fff;
    padding: 18px;
    border-radius: 10px;
    width: 420px;
    max-width: calc(100% - 40px);
    box-shadow: 0 12px 36px rgba(12,30,60,0.28);
}
#colorPromptModal .prompt-message { margin-bottom: 10px; color: #111; font-weight: 600 }
#colorPromptModal .prompt-input { padding: 8px 10px; font-size: 1rem; border: 1px solid #e5e7eb; border-radius: 6px }
#colorPromptModal .prompt-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
#colorPromptModal .prompt-actions button { padding: 8px 12px; border-radius:6px; border:0; cursor:pointer }
#colorPromptModal .prompt-actions .cancel { background:#f3f4f6; color:#111 }
#colorPromptModal .prompt-actions .ok { background:var(--accent); color:#fff }

/* Sponsors marquee styles (moved from inline <style> in index.html) */
.sponsors-marquee { width:100%; margin:0; }
.marquee-viewport { background: white; position:relative; overflow:hidden; width:100%; }
.marquee-track { display:flex; gap: 25px; align-items:center; white-space:nowrap; will-change: transform; }
.marquee-track img { max-height:100px; display:block; object-fit:contain; filter: saturate(0.95); }
.marquee-track-duplicate { position:absolute; top:0; left:100%; display:flex; gap:25px; align-items:center; }


.site-header { background: var(--accent); color: #fff; padding: 20px }
.site-header h1 { margin: 0; font-size: 1.25rem }
.muted { opacity: .9; color: rgba(255, 255, 255, .9) }
.container { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1200px; margin: 20px auto; padding: 0 12px }
.panel { background: var(--card); padding: var(--pad); border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
label { display: block; margin-bottom: 8px; font-size: .95rem }
input[type="text"], input[type="datetime-local"], select, input[type="number"] { width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px; margin-bottom: 8px }

/* Make news table inputs expand to full column width */
.news-text-input, .news-suffix-input, .news-auto-generated {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
    min-width: 0;
}

/* Utility hidden class for toggling visibility without inline styles */
.hidden { display: none  }

/* News form layout moved from inline styles in index.html */
.form-row { display: flex; gap: 8px; align-items: center }
#newNewsText { flex: 1; min-width: auto; }
#newNewsStart { width: auto; }
#newNewsDuration { width: 140px }

/* Import players UI (moved from inline styles) */
.import-trigger-row { margin-bottom: 8px }
.import-trigger { margin-right: 8px }
.import-players-box { display: none; margin-bottom: 12px }
.import-players-textarea { width: 100%; height: 120px; margin-top: 6px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box }
.import-players-actions { margin-top: 8px; display: flex; gap: 8px }

/* Team logo preview styling moved from inline attributes */
#teamLogoPreview, #teamAddLogoPreview { max-height: 48px; display: inline-block; margin-left: 8px; vertical-align: middle }
.form-actions { display: flex; gap: 8px; margin-top: 8px }
.list { list-style: none; padding: 0; margin: 0 }
.list li { padding: 10px; border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; align-items: center }
.table { width: 100%; border-collapse: collapse }
.table th, .table td { padding: 8px; border-bottom: 1px solid #eef2f6; text-align: left }
.site-footer { max-width: 100%; margin-top: auto; color: var(--muted); padding: 20px; text-align: center; background: #f0f0f0; border-top: 1px solid #ddd }
.ai-footer-note { margin: 6px 0 0 0; font-size: .85rem; color: #7b8794 }
/* Live match */
.live-game { padding: 18px 18px 12px 18px; background: radial-gradient(circle at 10% 20%, rgba(43,108,176,.12), transparent 35%), radial-gradient(circle at 90% 20%, rgba(255,193,7,.16), transparent 35%), #eef5ff; border-radius: 18px; border: 1px solid #d6e6ff; box-shadow: inset 0 1px 0 #fff, 0 14px 38px rgba(43, 108, 176, .12) }
.live-game h2 { text-align: center; margin: 0 0 14px 0; color: var(--accent) }
.live-analog-clock { display: flex; justify-content: center; align-items: center; margin: 5px 0 15px 0 }
.clock-face { width: 190px; height: 105px; border-radius: 52px; background: #fff; border: 3px solid #d6dee8; position: relative; box-shadow: inset 0 0 8px rgba(0, 0, 0, .08) }
.clock-tick { position: absolute; background: var(--accent); opacity: .7 }
.tick-12 { width: 3px; height: 12px; top: 5px; left: 50%; transform: translateX(-50%) }
.tick-6 { width: 3px; height: 12px; bottom: 5px; left: 50%; transform: translateX(-50%) }
.tick-3 { width: 12px; height: 3px; right: 7px; top: 50%; transform: translateY(-50%) }
.tick-9 { width: 12px; height: 3px; left: 7px; top: 50%; transform: translateY(-50%) }
.clock-hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 4px }
.hour-hand { width: 6px; height: 28px; background: var(--men-group-A) }
.minute-hand { width: 4px; height: 38px; background: var(--men-group-B) }
.second-hand { width: 2px; height: 42px; background: #e74c3c }
.clock-center { position: absolute; width: 8px; height: 8px; background: var(--men-group-A); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.game-info { justify-content: center; align-items: stretch; gap: 16px; padding: 14px; background: radial-gradient(circle at 40% 0%, rgba(255,255,255,.08), rgba(17,24,39,.35)), linear-gradient(135deg, #0b1224 0%, #111827 100%); border-radius: 16px; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.28); color: #e5e7eb; width: 100%; grid-column: 1 / -1 }
.team { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08) }
.team-name { font-size: 2.5rem; font-weight: 900; margin: 6px 0 12px 0; min-height: 3.4rem; display: flex; align-items: center; justify-content: center; line-height: 1.2; color: #f8fafc; letter-spacing: .4px; text-shadow: 0 2px 6px rgba(0,0,0,.45) }
.score { font-size: 8.4rem; font-weight: 700; color: #facc15; line-height: .9; text-shadow: 0 8px 26px rgba(0, 0, 0, .48); letter-spacing: 3px; font-family: 'DS-Digital', monospace }
.vs { font-size: 1.4rem; font-weight: 800; padding: 0 16px; color: #cbd5e1; letter-spacing: 1px }
.live-match-grid {
    display: grid;
    grid-template-rows: auto minmax(200px, 1fr);
    gap: 16px;
    min-height: 320px;
}
.live-top { display: grid; grid-template-rows: auto auto; gap: 12px }

/* QR near clock */
.top { position: relative; display: flex; align-items: normal; gap: 16px; justify-content: center; flex-wrap: nowrap }
.qr-wrapper { position: absolute; left: 12px; top: 45%; transform: translateY(-50%); width: 110px; height: 110px; display: flex; align-items: center; justify-content: center }
.qr-wrapper img#siteQr { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 12px; padding: 0px; box-shadow: 0 6px 18px rgba(2,6,23,.12); border: 1px solid #e5e7eb }
.mcup-wrapper { position: absolute; left: 136px; top: 45%; transform: translateY(-50%); width: 110px; height: 110px; display: flex; align-items: center; justify-content: center }
.mcup-wrapper img#mcupLogo { width: 100%; height: 100%; object-fit: contain; background: transparent; border: none }
.host-wrapper { position: absolute; right: 12px; top: 45%; transform: translateY(-50%); width: auto; height: 110px; display: flex; align-items: center; justify-content: center }
.host-logos-container { display: flex; gap: 8px; align-items: center; justify-content: center }
.host-logos-container img { width: 100%; height: 100%; max-width: 110px; max-height: 110px; object-fit: contain; background: transparent; border-radius: 12px; box-shadow: none; border: none }

/* Floating fullscreen toggle (always visible above other layers) */
#fullscreenToggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10002;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(2,6,23,.28);
}
#fullscreenToggle:focus { outline: 2px solid rgba(255,255,255,.18) }

@media (max-width: 640px) {
    #fullscreenToggle { display: none }
}
.live-names-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.live-score-row { display: flex; gap: 12px; align-items: stretch; justify-content: space-between }
.live-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start }
.live-bottom > * { width: 100%; }
.live-team { display: contents }
.live-goals-team { padding: 12px 12px; background: linear-gradient(180deg, rgba(17,24,39,.82) 0%, rgba(11,18,36,.9) 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: stretch; border-radius: 12px; gap: 8px }
.live-goals-team.home-scorers { margin: 0 }
.live-goals-team.away-scorers { margin: 0 }
/* Live match score logos: logos live directly inside .live-score-row, outside .score-box */
.live-score-row .match-logo { width: 120px; max-height: 120px; border-radius: 4px; object-fit: contain; align-self: center; opacity: 0; transition: opacity .28s ease-in-out }
.live-score-row .home-logo { margin-left: auto }
.live-score-row .away-logo { margin-right: auto }
.team-info { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: #fff; position: relative; border-top: 2px solid #e5e7eb; border-bottom: 2px solid #e5e7eb; height: 100% }
.team-name-bar { background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 14px; font-size: 1.5rem; font-weight: 800; color: #f8fafc; text-align: center; letter-spacing: .4px; text-shadow: 0 2px 6px rgba(0,0,0,.35) }

/* Live match player box layout */
.live-goals-list { display: block; gap: 6px }
/* Use CSS multi-column layout: when the container is wide enough (approx >500px),
   items will flow into two columns. This avoids JS and adapts to the element width. */
.live-goals-list {
    column-width: 240px;
    column-gap: 12px;
}
.live-goal-item { break-inside: avoid-column; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; }
.live-goal-item { padding: 8px 10px; border-radius: 6px; background: transparent; display: block; font-size: .9rem; min-width: 0 }
.live-player-top { display: flex; align-items: center; gap: 8px; justify-content: space-between }
.live-player-top .live-goal-player { font-size: 1rem }
.live-player-bottom { margin-top: 6px; display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; font-size: .85rem; color: #dbeafe }
.live-player-bottom .live-goal-times { grid-row: 1 }
.live-player-bottom .live-penalties { grid-row: 2 }
.live-goal-times { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0 }

.live-goal-item > *:nth-child(2) { min-width: 0 }
.live-penalties { display: inline-flex; gap: 6px; align-items: center }
.live-penalty-item { display: inline-flex; gap: 4px; align-items: center; padding-left: 4px }
.live-penalty-time { font-size: 0.9rem; margin-left: 4px }


.score-box { background: linear-gradient(180deg, rgba(15,23,42,.9) 0%, rgba(11,18,36,.92) 100%); border-radius: 14px; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; padding: 10px; height: 100%; flex: 1 1 0 }
.score-box.home-score { margin-right: 5px; justify-content: center; text-align: center; max-width: 200px; margin-left: auto; }
.score-box.away-score { margin-left: 5px; justify-content: center; text-align: center; max-width: 200px; margin-right: auto;}
.team-info::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, #d1d5db 20%, #d1d5db 80%, transparent) }
.live-team.home-team .team-info::after { right: -1px }
.live-team.away-team .team-info::after { left: -1px }
.live-center { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(15,23,42,.35) 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); grid-area: timer; height: 100%; min-width: 160px; flex: 0 0 190px }
.live-clock-label { font-size: .85rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 1px }
.live-timer { text-align: center; font-size: 3.4rem; font-weight: 700; color: #e2e8f0; font-family: 'DS-Digital', 'JetBrains Mono', monospace; letter-spacing: 2px; background: rgba(15,23,42,.7); padding: 10px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08) }
.live-goal-time { display: flex; align-items: center; font-weight: 500; color: #facc15; font-size: 0.9rem; padding: 2px 6px; background: rgba(82,82,82, 0.12); border-radius: 4px }
.live-penalty-time { display: flex; align-items: center; font-weight: 500; color: #fcf8e7; font-size: 0.9rem; padding: 2px 6px; background: rgba(82, 82, 82, 0.12); border-radius: 6px }
.live-goals-empty { color: #cbd5e1; font-style: italic; font-size: .9rem; padding: 14px 0; text-align: center }

.players { text-align: left; margin-top: 10px; font-size: .9rem }
.player { margin: 5px 0 }
/* Matches */
.matches-container { overflow-x: auto; background: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(2, 6, 23, .12); border: 1px solid #f0e0c8 }
.matches-container-dashboard { overflow: auto; padding: 0; border: none; box-shadow: none }
.matches-container-dashboard .matches-main-table { border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.08); border: 1px solid #e5e7eb }
.matches-main-table-compact th, .matches-main-table-compact td { padding: 8px 10px; font-size: .96rem }
.matches-main-table-compact thead th { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, #f8f9fb 0%, #f1f5f9 100%); box-shadow: inset 0 -1px 0 #d7dee8 }
.matches-main-table-compact tbody tr:hover { background: #f8fbff }
.matches-main-table-compact th.col-km, .matches-main-table-compact td.col-km { width: 48px }
.matches-main-table-compact th.col-group, .matches-main-table-compact td.col-group { width: 62px }
table { width: 100%; border-collapse: collapse }
thead { background: #f0f0f0 }
th, td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left }
.matches-main-table .cell-center { text-align: center }
.matches-main-table .cell-bold { font-weight: bold }
.matches-main-table .teams-cell { white-space: nowrap }
.matches-main-table thead th { text-align: center }
.matches-main-table th,
.matches-main-table td {
    padding: 6px 8px;
    line-height: 1.1;
}
.matches-main-table th.col-km, .matches-main-table td.col-km { width: 30px }
.matches-main-table th.col-group, .matches-main-table td.col-group { width: 50px }
.matches-main-table th.col-score, .matches-main-table td.col-score { width: 100px }
.matches-main-table th.col-teams, .matches-main-table td.col-teams { width: auto }
.matches-table-compact th:nth-child(1), .matches-table-compact td:nth-child(1) { width: 30px; text-align: center }
.matches-table-compact th:nth-child(2), .matches-table-compact td:nth-child(2) { width: 50px; text-align: center }
.matches-table-compact th,
.matches-table-compact td {
    padding: 6px 8px;
    line-height: 1.1;
}
.matches-table-compact thead { background: #f0f0f0 }
.matches-table-compact th { text-align: center; font-weight: 700 }
.matches-table-compact td { border-bottom: 1px solid #ddd; font-size: .9rem }
.matches-table-compact td:nth-child(4) { text-align: center; white-space: nowrap }
.status-indicator { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; position: relative }
.status-upcoming { border: 2px solid #94a3b8; background: #f8fafc; box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .15) }
.status-finished { background: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, .18) }
.status-check { width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-top: -1px }
.status-live { background: #fee2e2; box-shadow: 0 0 0 2px rgba(239, 68, 68, .25) }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .7); display: inline-block; animation: status-blink 1s infinite }
@keyframes status-blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
tbody tr.match-row-men { background: rgba(43, 108, 176, .12) }
tbody tr.match-row-women { background: #fff5f5 }
tbody tr.match-row-men.match-group-A { background: rgba(26, 58, 82, .12) }
tbody tr.match-row-men.match-group-B { background: rgba(43, 108, 176, .12) }
tbody tr.match-row-men.match-group-C { background: rgba(90, 154, 214, .12) }
tbody tr.match-row-women.match-group-A { background: rgba(139, 46, 46, .12) }
tbody tr.match-row-women.match-group-B { background: rgba(231, 76, 60, .12) }
tbody tr.match-row-women.match-group-C { background: rgba(245, 165, 165, .25) }
tbody tr.live { background: #fff3cd }
tbody tr.past { opacity: .7 }
tbody tr:hover { background: #f9f9f9 }
tbody tr.match-row-men:hover, tbody tr.match-row-women:hover { background: #f8fbff }
tbody tr.draggable-row { cursor: grab }
tbody tr.draggable-row.dragging { opacity: .6; cursor: grabbing }
tbody tr.draggable-row.drag-over-top { border-top: 3px solid #3b82f6 }
tbody tr.draggable-row.drag-over-bottom { border-bottom: 3px solid #3b82f6 }
.match-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; vertical-align: middle }
.matches-main-table tbody tr.stage-group-row td {
    background: #f7f2e8;
    color: #5b4a2f;
    font-weight: 700;
    text-align: center;
    border-top: 2px solid #d3c3a3;
    border-bottom: 2px solid #d3c3a3;
}

@media (max-width: 720px) {
    .matches-container { padding: 10px; -webkit-overflow-scrolling: touch }
    .matches-main-table { min-width: 620px }
    .matches-main-table th, .matches-main-table td { padding: 6px 8px; font-size: .85rem }
}
.matches-main-table tbody tr.stage-group-row:hover td { background: #f7f2e8 }
.matches-main-table tbody tr.stage-group-start td { border-top: 2px solid #d3c3a3 }
.matches-main-table tbody tr.stage-group-end td { border-bottom: 2px solid #d3c3a3 }
.matches-main-table tbody tr.opening-break-row td {
    background: #eef3ff;
    color: #1f3b7a;
    font-weight: 700;
    text-align: center;
    border-top: 2px dashed #93a6d8;
    border-bottom: 2px dashed #93a6d8;
}
.matches-main-table tbody tr.opening-break-row:hover td { background: #eef3ff }
/* Add team form */
.add-team-form { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-team-form h3 { margin: 0 0 15px 0; color: var(--accent) }
.add-team-form input, .add-team-form select { margin: 0 }
/* Add match form */
.add-match-form { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-match-form h3 { margin: 0 0 15px 0; color: var(--accent) }
.add-match-form input, .add-match-form select { margin: 0 }
.matches-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 20px 0 }
.matches-column { display: flex; flex-direction: column; gap: 16px }
.matches-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 16px 0 }
.home-actions {  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-page-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.matches-action-btn { background: #ffffff; border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 14px; font-weight: 700; cursor: pointer; color: #1f2937; transition: all .15s ease; box-shadow: 0 1px 2px rgba(2, 6, 23, .06) }
.matches-action-btn:hover { border-color: #93c5fd; color: #1d4ed8; box-shadow: 0 4px 10px rgba(2, 6, 23, .1) }
.matches-action-btn.active { background: #e8f2ff; border-color: #60a5fa; color: #1d4ed8; box-shadow: 0 4px 12px rgba(29, 78, 216, .2) }
.stats-actions { margin-top: 0 }
.stats-toolbar { display: flex; justify-content: flex-start; margin: 0 0 12px 0 }
.stats-back-btn { padding: 10px 18px; font-size: .95rem }
.stats-quick-card { gap: 10px; display: flex; flex-direction: column }
.stats-quick-text { margin: 0; color: #4b5563; font-weight: 600 }
.match-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.match-action-btn { background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; height: 30px; width: 30px; padding: 0; font-weight: 800; cursor: pointer; color: #1f2937; transition: all .15s ease; box-shadow: 0 1px 2px rgba(2, 6, 23, .06) }
.match-action-btn:hover { box-shadow: 0 3px 8px rgba(2, 6, 23, .12) }
.match-action-icon { display: inline-flex; align-items: center; justify-content: center; position: relative }
.match-action-icon .action-icon { font-size: .85rem; letter-spacing: .4px }
.match-action-icon::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 2px);
    background: #111827;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}
.match-action-icon:hover::after,
.match-action-icon:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Tooltips for news action buttons (match-like) */
.news-action-icon::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 2px);
    background: #111827;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 30;
}
.news-action-icon:hover::after,
.news-action-icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.match-action-start { background: #facc15; color: #111; border-color: #f59e0b }
.match-action-resume { background: #38bdf8; color: #0f172a; border-color: #0ea5e9 }
.match-action-tag { background: #111827; color: #fff; border-color: #111827 }
.match-action-delete { background: #ef4444; color: #fff; border-color: #dc2626 }
.match-action-finish { background: #22c55e; color: #0f172a; border-color: #16a34a }
.match-action-edit { background: #3b82f6; color: #fff; border-color: #2563eb }
.match-action-swap { background: #7c3aed; color: #fff; border-color: #6d28d9 }

/* Start/Stop toggle for news rows */
.match-action-toggle.start { background: #10b981; color: #fff; border-color: #059669 }
.match-action-toggle.stop { background: #ef4444; color: #fff; border-color: #dc2626 }
/* News-specific action button styles (separate from match-action-btn) */
.news-action-btn { background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; height: 24px; width: 24px; padding: 0; font-weight: 800; cursor: pointer; color: #1f2937; transition: all .15s ease; box-shadow: 0 1px 2px rgba(2, 6, 23, .06) }
.news-action-btn:hover { box-shadow: 0 3px 8px rgba(2, 6, 23, .12) }
.news-action-icon { display: inline-flex; align-items: center; justify-content: center; position: relative }
.news-action-icon .action-icon { font-size: .7rem; letter-spacing: 0 }

/* Start/Stop toggle for news rows (news-specific) */
.news-action-toggle.start { background: #10b981; color: #fff; border-color: #059669 }
.news-action-toggle.stop { background: #ef4444; color: #fff; border-color: #dc2626 }

/* transient confirmation for news update */
.news-update-ok { display:inline-block; margin-left:6px; color: #16a34a; font-weight:700; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16,185,129,0.14); padding: 2px 6px; border-radius: 6px; font-size: .85rem; line-height:1; opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; }
.news-update-ok[aria-hidden="true"] { opacity:1; transform:translateY(0); }

/* style applied to the Update button while showing success (keeps same dimensions) */
.news-action-btn.news-update-success { background: rgba(16,185,129,0.12); color: #059669; border-color: rgba(16,185,129,0.25); }
.matches-table-compact td { vertical-align: middle }
.matches-table-compact .match-actions { gap: 4px; align-items: center }
.matches-table-compact .match-action-btn {
    height: 24px;
    width: 24px;
    border-radius: 6px;
    font-size: .75rem;
    line-height: 1;
}
.matches-table-compact .match-action-icon .action-icon { font-size: .7rem; letter-spacing: 0 }
.matches-panels { margin-bottom: 10px }
.matches-panel { display: none }
.matches-panel.active { display: block }
.match-card { background: var(--card); padding: 15px; border-radius: 10px; box-shadow: 0 2px 6px rgba(2, 6, 23, .08); border: 1px solid #e5e7eb }
.match-card p { margin: 6px 0 0 0; color: #555; font-size: .9rem }
.match-card-add { border-left: 4px solid #28a745 }
.match-card-info { background: #e8f4f8; border-left: 4px solid #17a2b8 }
.match-card-schedule { background: #f0f8ff; border-left: 4px solid #007bff }
.match-card-danger { background: #fff3cd; border-left: 4px solid #ffc107 }
.match-form-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; gap: 10px; align-items: end }
.match-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto }
.match-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) auto }
.match-form-grid-schedule { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 10px; align-items: end }
.match-form-grid-add { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: end }
.match-form-grid-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end }
.form-field { display: flex; flex-direction: column; gap: 6px }
.form-field label { font-size: .85rem; font-weight: 700; color: #333 }
.form-buttons { align-items: flex-end; margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap }
.form-buttons .btn-sm { padding: 8px 14px; height: 34px; line-height: 1 }
.match-card .btn-danger.btn-sm { padding: 8px 14px; height: 34px }
.btn-primary { background: #007bff; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.docs-public-list { list-style: disc; padding-left: 20px; margin: 0; }
.docs-public-list li { display: list-item; padding: 6px 0; }
.docs-public-list .doc-name { color: #111; display: inline; }
.doc-download { background: none; color: var(--men-group-B); padding: 0 4px; font-weight: 700; text-decoration: none; border-radius: 4px; box-shadow: none; height: auto; line-height: normal; display: inline-block; margin-left: 6px }
.doc-download:hover { background: rgba(13,89,204,0.06); text-decoration: none; }
.doc-download.icon-only { font-size: 1rem; vertical-align: text-bottom }
.btn-secondary { background: #6c757d; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.btn-info { background: #17a2b8; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer; height: 35px }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 12px 0 22px 0 }
.stats-kpi { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.stats-kpi-label { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #64748b }
.stats-kpi-value { font-size: 2.2rem; font-weight: 800; color: #1f2937 }
.stats-kpi-sub { font-size: .9rem; color: #4b5563; font-weight: 600 }
.stats-block { margin-top: 18px }
.stats-table th, .stats-table td { text-align: center }
.stats-table td:nth-child(2),
.stats-table td:nth-child(3) { text-align: left }
.stats-table td:nth-child(2) { font-weight: 700 }
.stats-sortable th { cursor: pointer; user-select: none }
.stats-sortable th.sort-asc::after { content: ' ^'; font-size: .8rem; color: #64748b }
.stats-sortable th.sort-desc::after { content: ' v'; font-size: .8rem; color: #64748b }
.stats-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.stats-highlight-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(2, 6, 23, .06) }
.stats-highlight-title { font-weight: 800; color: #1f2937; margin-bottom: 6px }
.stats-highlight-sub { color: #6b7280; font-size: .9rem }
.pdf-print-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 5px }
.pdf-print-buttons button { flex: 1; min-width: 120px; padding: 8px 12px; font-size: 14px }
@media (max-width: 768px) { .pdf-print-buttons { flex-direction: column } .pdf-print-buttons button { width: 100% } }
.settings-panel { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2,6,23,.06) }
.settings-table { width: 100%; border-collapse: collapse; margin-bottom: 12px }
.settings-table th, .settings-table td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left }
.settings-table th:last-child, .settings-table td:last-child { text-align: center; width: 200px }
.settings-table input { width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px }
.settings-actions { display: flex; gap: 10px; justify-content: flex-end }
.settings-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: #333; margin-right: auto }
.settings-status { margin-top: 10px; font-size: .9rem }
.settings-status.success { color: #1f7a3f }
.settings-status.error { color: #b42318 }
.players-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px }
.players-column { display: flex; flex-direction: column }
.players-list { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px; overflow-y: visible }
.player-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; cursor: pointer; transition: all .2s; border-bottom: none }
.player-item:last-child { border-bottom: 1px solid #e0e0e0 }
.player-item:hover { background: #e3f2fd; border-color: var(--accent); transform: translateX(2px) }
.player-item.player-item-disabled { opacity: .6; cursor: not-allowed }
.player-item.player-item-disabled:hover { background: #fff; border-color: #e0e0e0; transform: none }
.player-number { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; background: var(--accent); color: #fff; font-weight: 700; border-radius: 4px; font-size: .85rem }
.player-name { font-size: .85rem; color: #333; font-weight: 500; flex: 1 }
.player-suspension-label { display: none; margin-left: 6px; font-size: .75rem; font-weight: 700; color: #ff1100; text-transform: uppercase; letter-spacing: .2px }
.player-suspension-label.is-active { display: inline-flex; animation: penalty-blink 1s steps(2, start) infinite }
.player-penalties { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px }
.player-goals { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: #28a745; color: #fff; font-weight: 700; border-radius: 50%; font-size: .8rem }
.player-goals:empty::after { content: '0' }
.player-penalty-btn { background: #1e3a8a; color: #fff; border: none; border-radius: 6px; padding: 4px 6px; font-size: .75rem; cursor: pointer }
.player-penalty-btn:hover { filter: brightness(.95) }
.player-penalty-btn.player-penalty-btn-disabled { opacity: .5; cursor: not-allowed }
.player-penalty-btn.player-penalty-btn-disabled:hover { filter: none }
@keyframes penalty-blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }

.no-players, .error-msg { color: #666; font-style: italic; padding: 10px; text-align: center }
.btn-danger { background: #dc3545; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-weight: 700; cursor: pointer }

/* Helper utility classes moved from inline styles in index.html */
.login-modal-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 12px }
.login-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px }
.flex-grow { flex: 1 }
.admin-newuser-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px }
.mb-24 { margin-bottom: 24px }
.create-groups-category-wrapper { margin-right: 8px; display: inline-block }
.finish-first-stage-status { margin-top: 8px; color: #c05621 }
.timer-edit-column { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-direction: column }
.timer-edit-row { display: flex; flex-direction: column; gap: 8px; align-items: center }
.match-timer-input { width: 100px; padding: 8px; border-radius: 6px; border: 1px solid #d1d5db; text-align: center }
.btn-karne { background: #111827 }
@media (max-width: 1100px) { 
    .matches-controls { grid-template-columns: 1fr } 
    .matches-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) } 
    .home-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
    .match-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } 
    .match-form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } 
    .match-form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } 
    .match-form-grid-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)) } 
    .match-form-grid-add { grid-template-columns: 1fr } 
    .match-form-grid-compact { grid-template-columns: 1fr } 
}

/* Teams grid */
#teamsContainer { display: block; width: 100% }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin: 15px 0 }
.teams-category { margin-bottom: 30px; width: 100%; display: block }
.teams-category h3 { margin: 15px 0 15px 0; font-size: 1.3rem; color: var(--accent); padding-bottom: 10px; border-bottom: 2px solid var(--accent) }
.team-group-section { margin-bottom: 20px }
.team-group-title { margin: 10px 0; padding: 8px 12px; font-size: 1.1rem; border-radius: 6px; font-weight: bold; color: #fff; background: var(--accent) }
.team-group-section.women .team-group-title { background: #c0392b }
/* Group specific title colors for men */
.group-men { border-top-color: var(--accent) }
.team-group-section.men.group-A .team-group-title { background: var(--men-group-A) }
.team-group-section.men.group-B .team-group-title { background: var(--men-group-B) }
.team-group-section.men.group-C .team-group-title { background: var(--men-group-C) }
/* Group colors for men teams */
.team-card-men.team-group-A { border-left-color: var(--men-group-A) }
.team-card-men.team-group-B { border-left-color: var(--men-group-B) }
.team-card-men.team-group-C { border-left-color: var(--men-group-C) }
/* Group specific colors for men */
.group-men.group-A { border-top-color: var(--men-group-A) }
.group-men.group-B { border-top-color: var(--men-group-B) }
.group-men.group-C { border-top-color: var(--men-group-C) }
/* Group specific title colors for women */
.team-group-section.women.group-A .team-group-title { background: var(--women-group-A) }
.team-group-section.women.group-B .team-group-title { background: var(--women-group-B) }
.team-group-section.women.group-C .team-group-title { background: var(--women-group-C); color: #333 }
.teams-row { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; width: 100% }
.team-card { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06); border-left: 4px solid transparent; flex: 0 0 calc(25% - 12px); min-width: 280px }
.team-card-men { border-left-color: var(--accent) }
.team-card-women { background: #fff5f5; border-left-color: #e74c3c }
.group-women { background: #fff5f5; border-top-color: #e74c3c }
/* Group colors for women teams */
.team-card-women.team-group-A { border-left-color: var(--women-group-A); background: #fff5f5 }
.team-card-women.team-group-B { border-left-color: var(--women-group-B); background: #fff5f5 }
.team-card-women.team-group-C { border-left-color: var(--women-group-C); background: #fff5f5 }
/* Group specific colors for women */
.group-women.group-A { border-top-color: var(--women-group-A) }
.group-women.group-B { border-top-color: var(--women-group-B) }
.group-women.group-C { border-top-color: var(--women-group-C) }
.team-card h3 { margin: 0 0 10px; color: var(--accent); }
.team-card-women h3 { color: var(--women-group-C) }
.team-card p { margin: 5px 0; font-size: .95rem }
/* Team contact info */
.team-card .team-manager { font-size: .95rem; color: #2b3b4a; font-weight: 600; margin-top: 6px }
.team-card .team-contact { font-size: .9rem; color: #556; margin-top: 2px }
.team-actions { display: flex; gap: 10px; margin-top: 10px }
.team-actions button { flex: 1; padding: 8px; font-size: .9rem }
/* Admin panel */
.admin-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 15px 0 }
.admin-section { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.admin-section h3 { margin: 0 0 15px 0; color: var(--accent) }
.admin-section input, .admin-section select { width: 100%; margin-bottom: 10px; padding: 8px; border: 1px solid #d9d9d9; border-radius: 6px }
.admin-section button { width: 100%; padding: 10px }
/* Matches list */
.matches-list { margin: 15px 0 }
.match-item { background: var(--card); padding: 15px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.match-item.live { border-left: 5px solid #ffc107 }
.match-item.finished { opacity: .7 }
/* Section title */
.section-title { color: var(--accent); margin: 20px 0 15px 0 }
/* Team Detail */
.team-detail-header { margin-bottom: 20px; margin-top: 20px; }
.team-name-edit { margin-bottom: 15px }
.team-name-edit label { display: block; font-weight: bold; margin-bottom: 8px; color: var(--accent) }
.team-name-edit input { font-size: 1.3rem; padding: 10px; border: 2px solid #ddd; border-radius: 6px; font-weight: bold }
.team-name-edit input:focus { outline: none; border-color: var(--accent) }
.btn-back { background: #6b7280; color: #fff; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease }
.btn-back:hover { background: #5a6268 }
.btn-save { background: #28a745; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin-right: 10px }
.btn-save:hover { opacity: .9 }
.team-detail-info { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.team-detail-info p { margin: 5px 0 }
.players-table { width: 100%; border-collapse: collapse; background: var(--card); margin: 15px 0 }
.players-table th { background: var(--accent); color: #fff; padding: 10px; text-align: left }
.players-table td { padding: 8px; border-bottom: 1px solid #eee }
.players-table input { padding: 4px; border: 1px solid #ddd; border-radius: 4px }
.add-player-form { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.add-player-form h4 { margin-top: 0 }
.add-player-form input { margin: 0 }
.team-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd }
.groups-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 20px; margin-bottom: 15px; } /* top margin not needed */
.groups-container-dashboard { grid-template-columns: 1fr; gap: 18px; max-height: none; overflow: auto; padding-right: 6px; padding-left: 6px; }
.groups-container-dashboard .group-section { border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.08) }
.groups-category { margin-bottom: 2em; } /* Categories are separated by the main stage (first stage vs second stage), so no bottom margin needed */
.groups-category.second-stage h3 { margin: 15px 0 15px 0; font-size: 2rem; color: var(--second-stage); padding-bottom: 10px; border-bottom: 2px solid var(--accent) }
.groups-category h3 { margin: 15px 0 15px 0; font-size: 1.3rem; color: var(--accent); padding-bottom: 10px; border-bottom: 2px solid var(--accent) }
.groups-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 20px }

.group-section { background: var(--card); padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(2, 6, 23, .06); border-top: 4px solid transparent }

.group-second-stage { border-top-color: var(--second-stage); border-left-color: var(--second-stage) }
.group-second-stage .group-title{ background: var(--second-stage); }
.group-title { background: var(--accent); color: #fff; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-weight: bold; text-align: center }
.group-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px }
.group-title-row .group-title { margin-bottom: 0; flex: 1 }

/* Group title logos: small team logos on the left, title centered */
.group-title-row .group-logos { display: flex; align-items: center; gap: 6px; min-width: 1px }
.group-title-row .group-logos .group-logo { height: 36px; width: auto; border-radius: 4px; object-fit: contain; display: inline-block }
.group-title-row .group-title { text-align: center }

.group-recalc-btn { background: #17a2b8; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-weight: 700; cursor: pointer }
.group-recalc-btn:hover { opacity: .9 }
.team-standings-row { position: relative }
.team-name-cell { position: relative; cursor: pointer }
.team-matches-tooltip { position: absolute; left: 50%; top: 100%; transform: translateX(-30%); min-width: 400px; max-width: 700px; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20 }
.team-standings-row:hover .team-matches-tooltip { opacity: 1; pointer-events: auto }
.team-standings-row.tooltip-active .team-matches-tooltip { opacity: 1; pointer-events: auto }
.team-matches-title { font-weight: 700; margin-bottom: 6px; color: var(--accent) }
.team-match-row { display: grid; gap: 4px; padding: 4px 0; border-top: 1px dashed #e5e7eb; font-size: .85rem }
.team-match-row:first-of-type { border-top: none }
.team-match-time { color: #666; font-size: .8rem }
.team-match-teams { color: #222; display: flex; flex-direction: row; justify-content: center; }
.team-match-teams .team-match-home { text-align: right; width: 40%; }
.team-match-teams .team-match-away { text-align: left; width: 40%; }
.team-match-teams .team-match-score { text-align: center; margin: 0 6px; font-weight: 400; width: 20% }
.team-matches-empty { font-size: .85rem; color: #666 }
.group-women .group-title { background: #c0392b }
/* Group title colors for men */
.group-men.group-A .group-title { background: var(--men-group-A) }
.group-men.group-B .group-title { background: var(--men-group-B) }
.group-men.group-C .group-title { background: var(--men-group-C) }
/* Group title colors for women */
.group-women.group-A .group-title { background: var(--women-group-A) }
.group-women.group-B .group-title { background: var(--women-group-B) }
.group-women.group-C .group-title { background: var(--women-group-C); color: #333 }
.standings-table { width: 100%; border-collapse: collapse }
.standings-table th, .standings-table td { padding: 8px; border-bottom: 1px solid #eee; text-align: center }
.standings-table th { background: #f5f5f5; font-weight: bold }
.group-women .standings-table th { background: #ffe0e0 }
.standings-table td:nth-child(2) { text-align: left }
.team-row-men { background: #fafbfc }
.team-row-women { background: #fff0f0 }
.standings-table tbody tr:hover { background: #f0f0f0 }
.standings-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: -2em; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e5e7eb; border-radius: 6px; font-size: .9rem; color: #333; grid-column: 1 / -1; width: 100%; justify-self: stretch }
.standings-legend strong { color: var(--accent) }
@media(min-width:900px) { .container { grid-template-columns: 1fr 320px } #schedule { grid-column: 1 / -1 } }
/* Match Edit Page Styles */
.match-edit-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.match-info-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: end; color: white; }
.team-score { text-align: center; }
.team-score h3 { font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; }
.team-score .score { color: #ffc107; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.match-timer-display { text-align: center; }
.timer-text { font-size: 3rem; font-weight: 900; color: #fff; margin-bottom: 15px; font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; }
.timer-controls { display: flex; gap: 10px; justify-content: center; }
.btn-timer { padding: 10px 20px; font-size: 1rem; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; box-shadow: 2px 3px 7px #212033, 0 3px 8px rgba(0, 0, 0, 0.15); background: linear-gradient(180deg, #48c408 0%, #00b327 80%, #088100 100%); }
.btn-timer:disabled { opacity: 0.5; cursor: not-allowed; }
#timerStartBtn { color: white; }
#timerStartBtn:hover:not(:disabled) { background: #48c408; }
#timerStopBtn { background: #dc3545; color: white; }
#timerStopBtn:hover:not(:disabled) { background: #c82333; }
.match-controls { display: grid; gap: 25px; margin-bottom: 30px; }
.control-group { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.control-group h4 { margin: 0 0 15px 0; color: #333; font-size: 1.2rem; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-action {
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 600;
    border: 1.5px solid #0056b3;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(180deg, #2196f3 0%, #007bff 80%, #0056b3 100%);
    color: #fff;
    box-shadow: 2px 3px 7px #212033, 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.1s, transform 0.1s, background 0.2s;
    outline: none;
    user-select: none;
}
.btn-action:hover:not(:disabled) {
    background: linear-gradient(180deg, #42a5f5 0%, #007bff 80%, #0056b3 100%);
    box-shadow: 0 5px 12px rgba(0,0,0,0.18), 0 2px 0 #0056b3;
    transform: translateY(-2px);
}
.btn-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    background: #b0c4de;
    color: #fff;
    transform: none;
}

.btn-action:active:not(:disabled) {
    box-shadow: 0 1px 0 #0056b3, 0 1px 4px rgba(0,0,0,0.12) inset;
    background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
    transform: translateY(2px);
}
.btn-penalty { background: linear-gradient(180deg, #facc15 0%, #b2b500 80%, #9fa102 100%); color: #111; }
.btn-penalty:hover:not(:disabled) { background: linear-gradient(180deg, #e6b800 0%, #b58c13 80%, #9f7a02 100%); }

/* Stack score action buttons: main action (goal) on top, penalty below with small gap */
.score-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px }
.score-actions .btn-action { width: max-content; padding: 10px 14px; }
.score-actions .btn-penalty { margin-top: 4px; }
.match-edit-actions { display: flex; justify-content: center; margin-top: 30px; }
.match-goals-panel { background: var(--card); padding: 15px; border-radius: 8px; margin: 15px 0; box-shadow: 0 1px 4px rgba(2, 6, 23, .06) }
.match-goals-panel h4 { margin: 0 0 10px 0; color: var(--accent) }
.match-goals-list { display: grid; gap: 8px }
.match-goal-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 6px; background: #f7f9fc }
.match-goal-row .goal-home { text-align: right }
.match-goal-row .goal-away { text-align: left }
.match-goal-row .goal-center { display: flex; flex-direction: column; align-items: center; gap: 6px }
.match-goal-row .goal-time { font-weight: 700; color: var(--accent) }
.match-goal-row .goal-score { font-size: .85rem; color: #333; font-weight: 600 }
.match-goal-row .goal-actions { display: flex; gap: 6px; justify-content: center }
.match-goal-row .goal-edit { background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 4px 8px; font-size: .8rem; cursor: pointer }
.match-goal-row .goal-edit:hover { filter: brightness(.95) }
.match-penalty-row { background: #f8fafc }
.penalty-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: #111 }
.penalty-text { font-weight: 700 }
.penalty-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: .75rem; font-weight: 800; color: #fff }
.penalty-yellow, .penalty-żółta { background: #facc15; color: #111 }
.penalty-2min { background: #0ea5e9 }
.penalty-red, .penalty-czerwona { background: #ef4444 }

.penalty-div { display: inline-flex; align-items: center; gap: 6px }
.match-goal-row .goal-player { font-weight: 600; color: #222 }
.match-goal-row .goal-team { font-size: .85rem; color: #666 }
.match-goal-row .goal-delete { background: #dc3545; color: #fff; border: none; border-radius: 6px; padding: 4px 8px; font-size: .8rem; cursor: pointer }
.match-goal-row .goal-delete:hover { filter: brightness(.95) }
/* Group standings already styled above */
/* Responsive: Stack scorers below team cards on narrow screens */

/* Loading Spinner Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast notifications (non-blocking) */
#toastContainer {
    position: fixed;
    right: 16px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20000;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    width: auto;
    max-width: 500px;
    background: rgba(17,24,39,0.95);
    color: #fff;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.28);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    font-weight: 700;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #059669; }
.toast.error { background: #b91c1c; }
.toast.info { background: rgba(17,24,39,0.95); }


/* Inline styles converted to classes */
.text-center {
    text-align: center;
}

.form-grid-add-team {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto;
    gap: 10px;
    align-items: end;
}

.form-grid-add-player {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.btn-height-40 {
    height: 40px;
}

#teamDetailNameInput {
    font-size: 1.5rem;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 100%;
    max-width: 400px;
}

.team-name-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-host {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
}

.team-host-detail {
    margin-left: 8px;
}

#teamDetailGroupSelect {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.control-group-margin-top {
    margin-top: 12px;
}

/* Timer edit control */
.timer-edit input {
    font-size: 1rem;
}

.timer-edit .btn-action {
    padding: 8px 12px;
    height: auto;
}

/* Feedback invite (bottom-left) and modal */
.feedback-invite {
    position: fixed;
    right: 36px;
    bottom: 100px;
    z-index: 10050;
    cursor: pointer;
    display: none; /* hidden by default; made visible when `.visible` is added */
}
.feedback-invite.visible {
    display: flex;
    background: linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
    border: 1px solid rgba(17,24,39,0.06);
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(2,6,23,0.12);
    align-items: center;
    gap: 10px;
    min-width: 220px;
}
.feedback-invite .fi-icon{
    display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#ffefc2;color:#b45309;font-weight:700;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,0.06)
}
.feedback-invite .fi-text{font-weight:500;color:#0f172a;font-size:1.5rem; }
.in-fullscreen .feedback-invite { display: none;}

.modal-feedback{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:10060;padding:20px}
.modal-feedback.open{display:flex}
.modal-feedback-content{background:#fff;border-radius:12px;padding:18px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(2,6,23,0.3);position:relative;box-sizing:border-box;max-height:calc(100vh - 48px);overflow:auto;-webkit-overflow-scrolling:touch}
.modal-feedback-content h3{margin-top:0;margin-bottom:8px}
.modal-feedback-content label{display:block;margin-bottom:10px}
.modal-feedback-content select,.modal-feedback-content textarea,.modal-feedback-content input{width:100%;padding:8px;border:1px solid #e6eef8;border-radius:8px}
.modal-feedback .modal-close{position:absolute;top:10px;right:10px;background:transparent;border:0;font-size:20px;cursor:pointer}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* small responsive tweaks */
@media (max-width:520px){
    .feedback-invite{left:12px;bottom:12px;min-width:170px;padding:8px 10px}
    .modal-feedback-content{padding:14px}
}

/* Rating row (1-5 boxes) */
.rating-row{display:flex;gap:8px;margin-top:8px}
.rating-option{display:inline-block}
.rating-option input{display:none}
.rating-option span{display:inline-flex;align-items:center;justify-content:center; padding: 10px; min-width:44px;height:40px;border-radius:8px;background:#f3f4f6;border:1px solid #e6eef8;color:#0f172a;font-weight:700;cursor:pointer;transition:transform .08s ease,background .12s ease}
.rating-option span:hover{transform:translateY(-2px)}
.rating-option input:checked + span{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(43,108,176,0.18)}
.rating-question{margin-bottom:12px}
.rq-title{display:block;font-weight:700;margin-bottom:6px}

/* open question textareas */
.open-question textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #e6eef8;min-height:56px}

.feedback-status{margin-top:8px;font-size:0.95rem;color:#374151;min-height:20px}
.feedback-status.error{color:#b91c1c}