/* ── Designtokens ("Matchday", 2026-09-24) ──────────────────────────────
           Inne i appen är ytorna ljusa: vit/kall ljusgrå botten, vita kort med
           mjuka skuggor i två lager (en hårfin kontaktskugga + en bred, svag
           spridning). Marinblått (header, hjältekort) och guld är varumärket.
           Guld som TEXT på vitt blir för blekt – därför --gold-ink (mörkare
           guld) för text, och --gold för ytor/knappar. Samma tanke för rött,
           grönt och lila: *-ink för text, *-soft för tonade bakgrunder.
           JS-genererad markup använder samma variabler i sina style="..."-attribut. */
        :root {
            --page:        #eef2f7;
            --surface:     #ffffff;
            --tint-1:      #f5f7fb;
            --tint-2:      #eceff5;
            --field:       #f3f5f9;
            --line:        #e4e9f1;
            --line-2:      #d3dbe6;

            --ink:         #152033;
            --ink-2:       #3b475c;
            --ink-3:       #66748b;
            --ink-4:       #a6b0c0;

            --navy:        #141c2e;
            --navy-2:      #1f2a42;
            --gold:        #f0b429;
            --gold-2:      #f7c84a;
            --gold-deep:   #d4930a;
            --gold-ink:    #a36a00;
            --gold-soft:   #fff5da;
            --gold-line:   #f3d58a;

            --green-ink:   #0e8a4f;
            --green-soft:  #e4f6ec;
            --red-ink:     #c93a3a;
            --red-soft:    #fdeceb;
            --violet-ink:  #6a46d6;
            --violet-soft: #f0ebff;
            --amber-ink:   #a55a00;
            --amber-soft:  #fff1dc;
            --pink-ink:    #bf2f78;
            --pink-soft:   #fdebf4;

            --shadow-1: 0 1px 2px rgba(20,28,46,.05), 0 2px 10px rgba(20,28,46,.05);
            --shadow-2: 0 1px 2px rgba(20,28,46,.06), 0 10px 28px rgba(20,28,46,.09);
            --shadow-3: 0 2px 6px rgba(20,28,46,.08), 0 28px 64px rgba(20,28,46,.22);
            --shadow-gold: 0 6px 18px rgba(212,147,10,.28);

            --r-sm: 10px;
            --r-md: 14px;
            --r-lg: 18px;
            --r-xl: 24px;
            --ease: cubic-bezier(.22,1,.36,1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        button, a { touch-action: manipulation; }

        /* ── Bas – mörk "Matchnight"-bakgrund (landningssida) ── */
        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #0a0c10;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 24px 16px 60px;
            position: relative;
            overflow-x: hidden;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(240,180,41,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(240,180,41,.03) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: fixed;
            width: 700px;
            height: 700px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            background: radial-gradient(circle, rgba(240,180,41,.06) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .page-wrap {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            animation: rise .55s cubic-bezier(.22,1,.36,1) both;
        }

        @keyframes rise {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes inviteModalIn {
            from { opacity: 0; transform: scale(.94) translateY(12px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* ── Logotyp ── */
        .logo-block { text-align: center; padding: 20px 0 8px; }

        .logo-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 4.2em;
            color: #e8edf5;
            letter-spacing: .06em;
            line-height: 1;
        }

        .logo-title span { color: #f0b429; }

        .logo-sub {
            font-size: .82em;
            color: #4a5568;
            margin-top: 6px;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        /* ── Kort ── */
        .card {
            width: 100%;
            background: #12161f;
            border: 1px solid #1e2535;
            border-radius: 16px;
            padding: 28px 26px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .card-label {
            font-size: .7em;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #b0bec5;
            font-weight: 500;
            text-align: center;
        }

        /* ── Fält ── */
        .field { display: flex; flex-direction: column; gap: 6px; }

        .field label {
            font-size: .78em;
            font-weight: 500;
            color: #8896aa;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .field input,
        .field select {
            background: #0a0c10;
            border: 1px solid #1e2535;
            border-radius: 10px;
            padding: 13px 16px;
            color: #e8edf5;
            font-family: 'DM Sans', sans-serif;
            font-size: 1em;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
            width: 100%;
        }

        .field input:focus,
        .field select:focus {
            border-color: #f0b429;
            box-shadow: 0 0 0 3px rgba(240,180,41,.12);
        }

        .field input::placeholder { color: #2d3748; }

        /* ── Password toggle ── */
        .pw-wrap { position: relative; }
        .pw-wrap input { padding-right: 44px !important; }
        .pw-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            color: #8896aa;
            display: flex;
            align-items: center;
        }
        .pw-toggle:hover { color: #f0b429; }

        .field select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238896aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
            cursor: pointer;
        }

        .field select option { background: #1a1f2e; }

        .code-input {
            font-size: 1.6em !important;
            font-weight: 700 !important;
            letter-spacing: 6px !important;
            text-align: center !important;
            text-transform: uppercase;
            color: #f0b429 !important;
            font-family: monospace !important;
        }

        .field-hint { font-size: .76em; color: #8896aa; margin-top: -4px; }

        /* ── Knappar ── */
        .btn-gold {
            width: 100%;
            padding: 14px;
            background: #f0b429;
            color: #0a0c10;
            border: none;
            border-radius: 10px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1em;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform .15s, box-shadow .15s, background .15s;
        }
        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
            transition: left .4s ease;
            pointer-events: none;
        }
        .btn-gold:hover:not(:disabled)::after { left: 160%; }

        .btn-gold:hover:not(:disabled) {
            background: #f7c84a;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(240,180,41,.32);
        }

        .btn-gold:active { transform: translateY(0); box-shadow: none; }

        .btn-ghost {
            width: 100%;
            padding: 13px;
            background: transparent;
            color: #8896aa;
            border: 1px solid #1e2535;
            border-radius: 10px;
            font-family: 'DM Sans', sans-serif;
            font-size: .95em;
            font-weight: 500;
            cursor: pointer;
            transition: border-color .2s, color .2s;
        }

        .btn-ghost:hover:not(:disabled) { border-color: #3a4a5c; color: #e8edf5; }

        .google-divider {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .8em;
            color: #4a5568;
            margin: 4px 0;
        }
        .google-divider::before,
        .google-divider::after { content: ''; flex: 1; height: 1px; background: #1e2535; }

        .btn-google {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px;
            background: #12161f;
            color: #e8edf5;
            border: 1px solid #2d3a4a;
            border-radius: 4px;
            font-family: 'DM Sans', sans-serif;
            font-size: .95em;
            font-weight: 500;
            cursor: pointer;
            transition: border-color .2s, background .2s, box-shadow .2s;
        }
        .btn-google:hover {
            border-color: #f0b429;
            background: #181d28;
            box-shadow: 0 0 0 2px rgba(240,180,41,.15);
        }

        .btn-green {
            width: 100%;
            padding: 14px;
            background: #16a34a;
            color: white;
            border: none;
            border-radius: 10px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1em;
            font-weight: 700;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s;
        }

        .btn-green:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(22,163,74,.3);
        }

        button:disabled { opacity: .45; cursor: not-allowed !important; transform: none !important; }

        /* ── Statusmeddelanden (mörkt tema) ── */
        .status { padding: 11px 14px; border-radius: 9px; font-size: .88em; font-weight: 500; line-height: 1.4; }
        .status-error   { background: rgba(220,38,38,.15);  color: #f87171; border: 1px solid rgba(220,38,38,.25); }
        .status-success { background: rgba(22,163,74,.15);  color: #4ade80; border: 1px solid rgba(22,163,74,.25); }
        .status-info    { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.2); }

        /* ── Kryssrutor ── */
        .check-group { display: flex; flex-direction: column; gap: 8px; }

        .check-label {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 11px 14px;
            border: 1px solid #1e2535;
            border-radius: 10px;
            color: #c9d4e3;
            font-size: .93em;
            transition: border-color .2s, background .2s;
        }

        .check-label:hover { border-color: #2d3748; background: rgba(240,180,41,.03); }

        .check-label:has(input:checked) {
            border-color: rgba(240,180,41,.4);
            background: rgba(240,180,41,.06);
            color: #f0b429;
        }

        .check-label input[type="checkbox"] { width: 17px; height: 17px; accent-color: #f0b429; flex-shrink: 0; }

        /* ── Tävlings-logotyper ── */
        .comp-logo {
            width: 36px; height: 36px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .comp-logo-bg { background: #fff; border-radius: 50%; padding: 1px; }

        /* ── Radioknappar ── */
        .radio-group { display: flex; flex-direction: column; gap: 8px; }

        .radio-label {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            padding: 13px 14px;
            border: 1px solid #1e2535;
            border-radius: 10px;
            color: #c9d4e3;
            transition: border-color .2s, background .2s;
        }

        .radio-label:hover { border-color: #2d3748; background: rgba(240,180,41,.03); }
        .radio-label:has(input:checked) { border-color: rgba(240,180,41,.4); background: rgba(240,180,41,.06); }
        .radio-label input[type="radio"] { width: 17px; height: 17px; accent-color: #f0b429; flex-shrink: 0; margin-top: 2px; }
        .radio-title { font-weight: 600; font-size: .93em; color: #e8edf5; }
        .radio-desc  { font-size: .8em; color: #4a5568; margin-top: 2px; }
        .radio-label:has(input:checked) .radio-title { color: #f0b429; }
        .radio-label:has(input:checked) .radio-desc  { color: #8896aa; }

        /* ── Delningsruta ── */
        .share-box {
            background: rgba(240,180,41,.06);
            border: 1px solid rgba(240,180,41,.2);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }

        .share-box-label { font-size: .7em; letter-spacing: .15em; text-transform: uppercase; color: #8896aa; margin-bottom: 6px; }

        .share-code {
            font-size: 3em;
            font-weight: 800;
            letter-spacing: 8px;
            color: #f0b429;
            font-family: monospace;
            margin: 4px 0 14px;
        }

        .share-url {
            background: #0a0c10;
            border: 1px solid #1e2535;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: .8em;
            color: #8896aa;
            word-break: break-all;
        }

        /* ── Tävlingsbrickor ── */
        .comp-badges { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
        .comp-badge { padding: 4px 12px 4px 8px; border-radius: 20px; font-size: .78em; font-weight: 600; display:inline-flex; align-items:center; }
        .comp-badge-pl { background: rgba(59,130,246,.15);  color: #93c5fd; }
        .comp-badge-cl { background: rgba(139,92,246,.15);  color: #c4b5fd; }
        .comp-badge-wc { background: rgba(240,180,41,.15);  color: #f0b429; }
        .comp-badge-allsvenskan { background: rgba(0,100,30,.15); color: #4ade80; }

        /* ── Liga-header (i login-vyn) ── */
        .league-header {
            text-align: center;
            padding: 10px 0 18px;
            border-bottom: 1px solid #1e2535;
            margin-bottom: 18px;
        }

        .league-header .fish { font-size: 2em; margin-bottom: 6px; }

        .league-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2em;
            color: #e8edf5;
            letter-spacing: .05em;
        }

        .league-code-badge {
            display: inline-block;
            background: rgba(240,180,41,.1);
            color: #f0b429;
            padding: 3px 14px;
            border-radius: 20px;
            font-size: .82em;
            font-weight: 700;
            margin-top: 6px;
            letter-spacing: 4px;
            font-family: monospace;
            border: 1px solid rgba(240,180,41,.2);
        }

        /* ── Hittades inte ── */
        .not-found-box { text-align: center; padding: 20px 0; }
        .not-found-box .emoji { font-size: 2.8em; margin-bottom: 12px; }
        .not-found-box h2 { color: #e8edf5; font-size: 1.3em; margin-bottom: 8px; }
        .not-found-box p  { color: #4a5568; font-size: .92em; margin-bottom: 20px; line-height: 1.5; }

        /* ── Laddar ── */
        .loading-box { text-align: center; padding: 30px 0; color: #4a5568; }

        .spinner {
            display: inline-block;
            width: 28px;
            height: 28px;
            border: 2px solid #1e2535;
            border-top-color: #f0b429;
            border-radius: 50%;
            animation: spin .75s linear infinite;
            margin-bottom: 10px;
        }

        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fishCast {
            0%, 100%  { transform: rotate(0deg) translateY(0); }
            10%       { transform: rotate(-20deg) translateY(-5px); }
            28%       { transform: rotate(14deg) translateY(3px); }
            42%, 55%  { transform: rotate(0deg) translateY(0); }
            48%       { transform: rotate(-4deg) translateY(-2px); }
            68%, 80%  { transform: rotate(0deg) translateY(0); }
            74%       { transform: rotate(4deg) translateY(2px); }
        }
        @keyframes bobberDip {
            0%, 100% { transform: translateY(0); opacity: .85; }
            50%      { transform: translateY(5px); opacity: .4; }
        }

        /* ── Admin-inloggad-badge ── */
        .admin-badge {
            background: rgba(22,163,74,.12);
            border: 1px solid rgba(22,163,74,.25);
            border-radius: 9px;
            padding: 10px 14px;
            font-size: .85em;
            color: #4ade80;
            font-weight: 600;
        }

        /* ── Avdelare ── */
        .or-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #4a5568;
            font-size: .8em;
            letter-spacing: .1em;
            text-transform: uppercase;
            width: 100%;
        }

        .or-divider::before,
        .or-divider::after { content: ''; flex: 1; height: 1px; background: #2a3347; }

        /* ── Hub: inloggad-chip ── */
        .hub-user-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 10px;
            padding: 9px 14px;
            box-sizing: border-box;
        }

        .hub-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f0b429 0%, #d4930a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75em;
            font-weight: 700;
            color: #0a0c10;
            letter-spacing: 0;
            flex-shrink: 0;
            font-family: 'DM Sans', sans-serif;
        }

        .hub-user-email {
            flex: 1;
            font-size: .78em;
            color: #8896aa;
            font-family: 'DM Sans', sans-serif;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .hub-user-logout {
            background: none;
            border: 1px solid rgba(248,113,113,.25);
            border-radius: 6px;
            color: #f87171;
            font-size: .72em;
            font-family: 'DM Sans', sans-serif;
            cursor: pointer;
            padding: 4px 9px;
            white-space: nowrap;
            transition: background .15s, border-color .15s;
            flex-shrink: 0;
        }

        .hub-user-logout:hover {
            background: rgba(248,113,113,.12);
            border-color: rgba(248,113,113,.5);
        }

        /* ── Signatur ── */
        .signature { position: relative; z-index: 1; text-align: center; padding-top: 16px; font-size: .7em; color: rgba(255,255,255,.15); }

        /* ── Mobile tweaks (mörkt tema) ── */
        @media (max-width: 440px) {
            .logo-title { font-size: 3.6em; }
            .share-code { font-size: 2.4em; letter-spacing: 6px; }
        }

        /* ════════════════════════════════════════════════════════════
           HUVUD-APP (ljust tema efter inloggning)
           ════════════════════════════════════════════════════════════ */

        #viewApp {
            position: fixed;
            inset: 0;
            background: #2a2d37;
            display: flex;
            flex-direction: column;
            z-index: 50;
        }

        /* ── App-header (kompakt mörk) ── */
        .app-header {
            background: #1e2535;
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 52px;
            flex-shrink: 0;
            z-index: 20;
            box-shadow: 0 2px 8px rgba(0,0,0,.2);
        }

        .app-header-left { flex: 1; display: flex; align-items: center; gap: 8px; }

        .app-header-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.35em;
            color: #e8edf5;
            letter-spacing: .05em;
            line-height: 1;
        }

        .app-header-title span { color: #f0b429; }

        .app-header-center { display: flex; align-items: center; justify-content: center; padding: 0 8px; position: relative; }

        .app-league-chip {
            background: rgba(240,180,41,.12);
            color: #f0b429;
            font-size: .8em;
            font-weight: 600;
            padding: 4px 10px 4px 12px;
            border-radius: 12px;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            transition: background .15s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .app-league-chip:hover { background: rgba(240,180,41,.22); }
        .app-league-chip .chip-arrow {
            font-size: .75em;
            opacity: .7;
            flex-shrink: 0;
            transition: transform .2s;
        }
        .app-league-chip.open .chip-arrow { transform: rotate(180deg); }

        /* Pulse-ring runt chipet – visas första gången per session */
        @keyframes chip-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(240,180,41,.55); }
            70%  { box-shadow: 0 0 0 8px rgba(240,180,41,0); }
            100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
        }
        .app-league-chip.pulsing {
            animation: chip-pulse 1.4s ease-out 10;
        }
        .league-switcher-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #1e2535;
            border: 1px solid rgba(240,180,41,.3);
            border-radius: 10px;
            padding: 6px;
            min-width: 220px;
            max-width: 300px;
            box-shadow: 0 8px 24px rgba(0,0,0,.4);
            z-index: 200;
        }
        .league-switcher-dropdown button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: transparent;
            border: none;
            border-radius: 7px;
            padding: 9px 12px;
            color: #e8edf5;
            font-family: 'DM Sans', sans-serif;
            font-size: .9em;
            cursor: pointer;
            text-align: left;
            transition: background .15s;
            gap: 10px;
        }
        .league-switcher-dropdown button:hover { background: rgba(240,180,41,.12); }
        .league-switcher-dropdown button.active { background: rgba(240,180,41,.18); color: #f0b429; }
        .league-switcher-dropdown .ls-code { font-family: monospace; font-size: .8em; color: #f0b429; letter-spacing: 2px; flex-shrink: 0; }

        /* ─── Liga-switcher coach mark ─────────────────────────────────────── */
        .lcm-overlay {
            position: fixed;
            inset: 0;
            z-index: 9000;
            pointer-events: auto;
        }
        .lcm-backdrop {
            display: none;
        }
        @keyframes lcm-fade-in {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Spotlight – hål i bakgrunden runt chipet */
        .lcm-spotlight {
            position: absolute;
            z-index: 9050;
            border-radius: 14px;
            box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
            border: 2px solid rgba(240,180,41,.9);
            animation: lcm-spotlight-in .3s cubic-bezier(.34,1.56,.64,1) both;
            pointer-events: none;
        }
        @keyframes lcm-spotlight-in {
            from { transform: scale(.7); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }

        /* Tooltip-bubbla – eget position:fixed, utanför overlay-stacking context */
        .lcm-tooltip {
            position: fixed;
            z-index: 9100;
            background: #ffffff;
            border: 1.5px solid rgba(240,180,41,.6);
            border-radius: 14px;
            padding: 18px 20px 16px;
            width: min(280px, calc(100vw - 32px));
            box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 4px rgba(240,180,41,.12);
            animation: lcm-tooltip-in .35s cubic-bezier(.34,1.4,.64,1) .1s both;
            text-align: center;
        }
        @keyframes lcm-tooltip-in {
            from { transform: translateY(-10px) scale(.94); opacity: 0; }
            to   { transform: translateY(0)     scale(1);   opacity: 1; }
        }

        /* Pil uppåt mot chipet */
        .lcm-arrow {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid rgba(240,180,41,.35);
        }
        .lcm-arrow::after {
            content: '';
            position: absolute;
            top: 2px;
            left: -7px;
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ffffff;
        }

        .lcm-icon {
            font-size: 1.6em;
            margin-bottom: 8px;
            color: #f0b429;
            line-height: 1;
        }
        .lcm-title {
            font-family: 'DM Sans', sans-serif;
            font-size: 1em;
            font-weight: 700;
            color: #111827;
            margin-bottom: 6px;
        }
        .lcm-body {
            font-family: 'DM Sans', sans-serif;
            font-size: .83em;
            color: #4b5563;
            line-height: 1.45;
            margin-bottom: 14px;
        }
        .lcm-btn {
            background: #f0b429;
            color: #0a0c10;
            border: none;
            border-radius: 8px;
            padding: 9px 22px;
            font-family: 'DM Sans', sans-serif;
            font-size: .88em;
            font-weight: 700;
            cursor: pointer;
            transition: background .15s, transform .1s;
        }
        .lcm-btn:active { transform: scale(.96); background: #d4930a; }

        .app-header-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; }

        .user-pill {
            display: flex;
            align-items: center;
            gap: 7px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 20px;
            padding: 4px 10px 4px 4px;
            cursor: pointer;
            transition: background .2s, border-color .2s, color .2s;
            color: #c4cdd8;
            font-size: .8em;
            font-family: 'DM Sans', sans-serif;
        }

        .user-pill:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #e8edf5; }
        .user-pill.menu-open { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #e8edf5; }

        .user-avatar {
            width: 24px;
            height: 24px;
            background: #f0b429;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .78em;
            font-weight: 700;
            color: #1e2535;
            flex-shrink: 0;
            transition: box-shadow .2s;
        }
        .user-avatar.is-superadmin {
            box-shadow: 0 0 0 2px #f0b429, 0 0 0 4px rgba(240,180,41,.25);
        }

        .user-pill-exit {
            font-size: .72em;
            opacity: .45;
            margin-left: 2px;
            padding: 2px 4px;
            border-radius: 4px;
            transition: opacity .15s, background .15s;
        }
        .user-pill-exit:hover { opacity: 1; background: rgba(220,38,38,.25); }

        /* User menu dropdown */
        .user-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: #1e2535;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 12px;
            padding: 6px;
            min-width: 200px;
            box-shadow: 0 12px 32px rgba(0,0,0,.5);
            z-index: 300;
            display: none;
        }
        .user-menu.open { display: block; animation: menuFadeIn .15s ease; }
        @keyframes menuFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
        .user-menu-mode {
            padding: 8px 12px 6px;
            font-size: .72em;
            color: #8899aa;
            font-family: 'DM Sans', sans-serif;
            letter-spacing: .03em;
            border-bottom: 1px solid rgba(255,255,255,.07);
            margin-bottom: 4px;
        }
        .user-menu-mode strong { color: #f0b429; display: block; font-size: 1.1em; margin-top: 2px; }
        .user-menu-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 10px 12px;
            color: #c4cdd8;
            font-family: 'DM Sans', sans-serif;
            font-size: .88em;
            cursor: pointer;
            text-align: left;
            transition: background .15s, color .15s;
        }
        .user-menu-btn:hover { background: rgba(255,255,255,.08); color: #e8edf5; }
        .user-menu-btn.danger:hover { background: rgba(220,38,38,.15); color: #fca5a5; }
        .user-menu-btn .btn-icon { font-size: 1em; width: 18px; text-align: center; flex-shrink: 0; }

        /* ── Tabs ── */
        .app-tabs-wrap {
            background: #23262f;
            border-bottom: 1px solid rgba(255,255,255,.08);
            flex-shrink: 0;
            z-index: 15;
        }

        .app-tabs {
            display: flex;
            overflow-x: auto;
            scrollbar-width: none;
            max-width: 700px;
            margin: 0 auto;
        }

        .app-tabs::-webkit-scrollbar { display: none; }

        .app-tab {
            padding: 12px 16px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: #6b7280;
            font-family: 'DM Sans', sans-serif;
            font-size: .88em;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: color .2s, border-color .2s;
            -webkit-tap-highlight-color: transparent;
        }

        .app-tab:hover { color: #d4930a; }

        .app-tab.active { color: #d4930a; border-bottom-color: #d4930a; font-weight: 600; }

        /* ── Tippa-badge ── */
        @keyframes badge-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,.7); }
            50%       { box-shadow: 0 0 0 6px rgba(229,62,62,0); }
        }

        @keyframes tab-pulse {
            0%, 100% { color: #d4930a; }
            50%       { color: #e53e3e; }
        }

        .app-tab.has-badge { animation: tab-pulse 1.6s ease-in-out infinite; }

        .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #e53e3e;
            color: #fff;
            font-size: .78em;
            font-weight: 700;
            line-height: 1;
            min-width: 20px;
            height: 20px;
            border-radius: 10px;
            padding: 0 5px;
            margin-left: 6px;
            vertical-align: middle;
            position: relative;
            top: -1px;
            animation: badge-pulse 1.6s ease-in-out infinite;
        }

        .tab-badge.tab-badge-yellow { background: #f0b429; color: #1e2535; }

        /* ── Content-area ── */
        .app-content { max-width: 700px; width: 100%; margin: 0 auto; padding: 16px; padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px)); }

        /* ── App-bakgrund (ljust tema) ── */
        #viewApp { background: #d8e0eb; }
        #appScrollArea { flex: 1; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #d8e0eb; position: relative; }
        #appScrollArea::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: var(--team-crest-bg, none);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 85vw;
            opacity: 0.6;
            pointer-events: none;
            z-index: 0;
        }
        .app-content { position: relative; z-index: 1; }

        /* ── App-kort ── */
        .app-card {
            background: #333743;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 12px;
        }

        .app-card-title { font-size: .92em; font-weight: 600; color: #d0d6e0; margin-bottom: 14px; }

        /* ── Push-notis widget ── */

        /* Tippa-fliken: samma kort som pred-group */
        #notifToggleRow {
            background: #333743;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 10px;
            margin-bottom: 10px;
            padding: 12px 14px;
        }

        /* Widget-layout: vertikal stack */
        .notif-widget {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* Rad 1: ikon+label till vänster, pill-knapp till höger */
        .notif-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .notif-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .88em;
            font-weight: 600;
            color: #c8d0dc;
            min-width: 0;
        }
        .notif-icon { font-size: 1em; flex-shrink: 0; }
        .notif-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


        /* Pill-knapp */
        .notif-pill {
            flex-shrink: 0;
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.07);
            color: #8896aa;
            font-family: 'DM Sans', sans-serif;
            font-size: .78em;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            letter-spacing: .02em;
            transition: background .15s, color .15s, border-color .15s;
        }
        .notif-pill.active {
            background: rgba(240,180,41,.15);
            border-color: rgba(240,180,41,.35);
            color: #f0b429;
        }
        .notif-pill:hover:not(:disabled) { opacity: .8; }
        .notif-pill:disabled { opacity: .4; cursor: default; }

        /* Rad 2: beskrivningstext + testnotis-knapp */
        .notif-desc-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 6px;
        }
        .notif-desc {
            font-size: .76em;
            color: #5a6475;
            margin: 0;
            line-height: 1.4;
        }
        .notif-test-btn {
            flex-shrink: 0;
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.05);
            color: #6b7a91;
            font-family: 'DM Sans', sans-serif;
            font-size: .76em;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s, color .15s;
        }
        .notif-test-btn:hover:not(:disabled) { background: rgba(255,255,255,.09); color: #9aa3b0; }
        .notif-test-btn:disabled { opacity: .4; cursor: default; }
        .notif-test-status {
            font-size: .76em;
            color: #5a6475;
            transition: color .2s;
        }
        .notif-test-status.ok  { color: #4ade80; }
        .notif-test-status.err { color: #f87171; }

        /* ── Statusmeddelanden (mörkt tema) ── */
        .app-msg { border-radius: 8px; padding: 10px 14px; font-size: .88em; font-weight: 500; margin-bottom: 12px; }
        .app-msg-success { background: rgba(5,150,105,.18); color: #34d399; }
        .app-msg-error   { background: rgba(220,38,38,.15);  color: #f87171; }
        .app-msg-info    { background: rgba(217,119,6,.15);  color: #fbbf24; }

        /* ── Tipp-counter (Design 4) ── */
        #tippCountLabel { margin-bottom: 10px; }
        .tipp-counter-wrap {
            display: flex;
            align-items: stretch;
            background: #333743;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 12px;
            overflow: hidden;
        }
        .tipp-counter-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            flex: 1;
        }
        .tipp-counter-divider {
            width: 1px;
            background: rgba(255,255,255,.08);
            flex-shrink: 0;
        }
        .tipp-counter-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px 14px;
            flex: 1;
            min-width: 0;
        }
        .tipp-counter-nums { display: flex; align-items: baseline; gap: 2px; }
        .tipp-counter-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.8em; line-height: 1; color: #d4930a; }
        .tipp-counter-slash { font-family: 'Bebas Neue', sans-serif; font-size: 1.8em; line-height: 1; color: #4a5260; font-weight: 400; }
        .tipp-counter-total { font-family: 'Bebas Neue', sans-serif; font-size: 1.8em; line-height: 1; color: #6b7585; }
        .tipp-counter-label { font-size: .68em; color: #6b7280; line-height: 1.3; margin-top: 1px; }
        .tipp-counter-team-crest {
            width: 52px; height: 52px;
            object-fit: contain;
            opacity: 1;
            flex-shrink: 0;
            margin-left: auto;
            padding: 4px;
        }
        .next-deadline-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
        .next-deadline-dot-sm {
            width: 5px; height: 5px; border-radius: 50%; background: #34d399; flex-shrink: 0;
            animation: dotPulse 2s ease-in-out infinite;
        }
        .next-deadline-title { font-size: .63em; font-weight: 700; color: #34d399; text-transform: uppercase; letter-spacing: .04em; }
        .next-deadline-time {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.1em;
            line-height: 1;
            color: #e8edf5;
            white-space: normal;
            word-break: break-word;
        }
        .next-deadline-sub-sm { font-size: .63em; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .follow-team-banner {
            font-size: .72em;
            color: #4a5260;
            margin-bottom: 10px;
            padding: 0 2px;
            letter-spacing: .01em;
        }

        /* ── Admin-meddelandebanners ── */
        #adminMessagesBanner {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 12px;
        }
        #adminMessagesBanner:empty { display: none; }
        .admin-msg-banner {
            background: #fff8e1;
            border: 1px solid #f0b429;
            border-radius: 10px;
            overflow: hidden;
        }
        .admin-msg-banner-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .admin-msg-banner-icon {
            font-size: .9em;
            flex-shrink: 0;
        }
        .admin-msg-banner-title {
            flex: 1;
            font-size: .88em;
            font-weight: 600;
            color: #78350f;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-msg-banner-badge {
            font-size: .68em;
            font-weight: 700;
            background: #f0b429;
            color: #fff;
            border-radius: 20px;
            padding: 1px 7px;
            flex-shrink: 0;
            letter-spacing: .02em;
        }
        .admin-msg-banner-chevron {
            font-size: .65em;
            color: #b45309;
            transition: transform .2s;
            flex-shrink: 0;
        }
        .admin-msg-banner.expanded .admin-msg-banner-chevron { transform: rotate(180deg); }
        .admin-msg-banner-body {
            display: none;
            padding: 0 14px 12px;
            font-size: .86em;
            color: #92400e;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .admin-msg-banner.expanded .admin-msg-banner-body { display: block; }
        .admin-msg-banner-meta {
            font-size: .74em;
            color: #b45309;
            margin-top: 6px;
            opacity: .7;
        }

        /* ── FAQ Bottom Sheet (landningssida) ── */
        .faq-sheet-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,.55);
            z-index: 1000; backdrop-filter: blur(2px);
            display: flex; align-items: flex-end; justify-content: center;
        }
        .faq-sheet {
            width: 100%; max-width: 480px; max-height: 85vh;
            background: #10131a; border-top: 1px solid rgba(240,180,41,.2);
            border-radius: 20px 20px 0 0;
            display: flex; flex-direction: column;
            animation: sheetUp .3s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes sheetUp {
            from { transform: translateY(100%); }
            to   { transform: translateY(0); }
        }
        .faq-sheet-handle {
            width: 36px; height: 4px; background: rgba(255,255,255,.15);
            border-radius: 2px; margin: 10px auto 0; flex-shrink: 0;
            cursor: grab; position: relative;
        }
        .faq-sheet-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 20px 10px; font-family: 'Bebas Neue', sans-serif;
            font-size: 1.15em; letter-spacing: .05em; color: #f0b429; flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,.07);
        }
        .faq-sheet-close {
            background: rgba(255,255,255,.08); border: none; color: #8896aa;
            width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
            font-size: .8em; display: flex; align-items: center; justify-content: center;
        }
        .faq-sheet-body { overflow-y: auto; padding: 18px 20px 32px; flex: 1; }
        .faq-sheet-section-title {
            font-weight: 700; color: #d0d6e0; font-size: .88em;
            margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em;
        }
        .faq-sheet-text { font-size: .86em; color: #8896aa; line-height: 1.55; }
        .faq-sheet-rule-box {
            border-radius: 8px; padding: 9px 12px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
        }
        .faq-sheet-rule-gold { background: rgba(212,147,10,.1); border-color: rgba(212,147,10,.2); }
        .faq-sheet-rule-purple { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); }
        .faq-sheet-rule-example { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.2); }
        .faq-sheet-rule-label { font-size: .74em; font-weight: 700; color: #f0b429; margin-bottom: 3px; letter-spacing: .04em; }
        .faq-sheet-rule-purple .faq-sheet-rule-label { color: #a78bfa; }
        .faq-sheet-rule-example .faq-sheet-rule-label { color: #fbbf24; }
        .faq-sheet-rule-desc { font-size: .83em; color: #b8c4d4; line-height: 1.5; }
        .faq-sheet-title-row {
            display: flex; gap: 10px; align-items: flex-start;
            font-size: .86em; color: #8896aa; line-height: 1.5; padding: 4px 0;
        }
        .faq-sheet-title-icon { font-size: 1.1em; flex-shrink: 0; margin-top: 1px; }
        .faq-sheet-item .faq-q { font-size: .86em; padding: 11px 2px; }
        .faq-sheet-item .faq-a { font-size: .83em; }
        .faq-sheet-rules-toggle {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07);
            font-size: .82em; font-weight: 600; color: #6b7280;
            cursor: pointer; user-select: none; letter-spacing: .02em;
            transition: color .15s;
        }
        .faq-sheet-rules-toggle:hover { color: #9ca3af; }
        .faq-sheet-rules-arrow { transition: transform .2s; font-size: .8em; }
        .faq-sheet-rules-toggle.open .faq-sheet-rules-arrow { transform: rotate(180deg); }
        .faq-sheet-rules-body {
            display: none; padding-bottom: 8px;
        }
        .faq-sheet-rules-toggle.open + .faq-sheet-rules-body { display: block; }

        /* ── FAQ ── */
        .faq-item { border-bottom: 1px solid rgba(255,255,255,.06); }
        .faq-q {
            width: 100%; display: flex; justify-content: space-between; align-items: center;
            background: none; border: none; padding: 13px 2px; color: #d0d6e0;
            font-family: 'DM Sans', sans-serif; font-size: .9em; font-weight: 600;
            cursor: pointer; text-align: left; gap: 10px; transition: color .15s;
        }
        .faq-q:hover { color: #f0b429; }
        .faq-arrow { font-size: .85em; color: #6b7280; flex-shrink: 0; transition: transform .2s; }
        .faq-item.open .faq-arrow { transform: rotate(180deg); }
        .faq-a {
            display: none; font-size: .86em; color: #8896aa; line-height: 1.65;
            padding: 0 2px 13px;
        }
        .faq-item.open .faq-a { display: block; }

        /* ── Matchgrupper ── */
        .round-group { background: #333743; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }

        .round-header {
            background: #1e2535;
            color: white;
            padding: 11px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 600;
            font-size: .88em;
            user-select: none;
            flex-wrap: nowrap;
            gap: 6px;
        }

        .round-header > span:first-child {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: nowrap;
            min-width: 0;
        }

        .round-header:hover { background: #253147; }

        .round-meta { font-weight: 400; color: #8896aa; font-size: .88em; white-space: nowrap; flex-shrink: 0; }

        .round-toggle { font-size: .9em; transition: transform .25s; }
        .round-toggle.collapsed { transform: rotate(-90deg); }

        .round-body { overflow: hidden; max-height: 9000px; transition: max-height .3s ease; }
        .round-body.collapsed { max-height: 0; }

        /* ── Match-kort (Matcher-flik) ── */
        .match-item { border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1em; }
        .match-item:last-child { border-bottom: none; }
        .match-header { padding: 12px 14px; cursor: pointer; user-select: none; display: flex; align-items: flex-start; gap: 6px; }
        .match-header:hover { background: rgba(255,255,255,.03); }
        .match-header-left { flex: 1; min-width: 0; overflow: hidden; }
        .match-teams { font-weight: 700; color: #d0d6e0; font-size: 1.15em; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
        .match-teams-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
        .match-own-tip { font-size: .78em; color: #9ca3af; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .match-toggle { color: #6b7280; font-size: .75em; flex-shrink: 0; transition: transform .2s; margin-top: 22px; }
        .match-toggle.collapsed { transform: rotate(-90deg); }
        .match-body { overflow: hidden; max-height: 2000px; transition: max-height .3s ease; padding: 4px 14px 12px; border-top: 1px solid rgba(255,255,255,.06); }
        .match-body.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; border-top: none; }
        .match-header:has(+ .match-body:not(.collapsed)) .own-tip-header { display: none; }
        .match-flag-note { font-size: .75em; color: #fbbf24; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
        .match-score-inline { color: #f0b429; font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-left: 8px; }
        .match-date-line { color: #6b7280; font-size: .78em; margin-bottom: 3px; }
        .own-tip-header { border-top: 1px solid rgba(255,255,255,.06); margin-top: 6px; padding-top: 4px; background: none !important; font-weight: 600; }
        .match-meta  { color: #6b7280; font-size: .82em; margin-bottom: 8px; }

        .pred-row           { padding: 2px 6px; font-size: .80em; color: #d0d6e0; display: flex; align-items: center; gap: 6px; }
        .pred-row-correct   { color: #d0d6e0; font-weight: 600; }
        .pred-row-wrong     { color: #d0d6e0; }
        .pred-row-pending   { color: #94a3b8; }
        .pred-row-waiting   { color: #6b7280; }
        .pred-row-postponed { color: #fbbf24; }

        .pred-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .pred-row-me { background: rgba(240,180,41,.13); border-radius: 5px; font-weight: 600; }
        .leaderboard-row-me { background: rgba(240,180,41,.13); }
        .pred-dot-correct   { background: #4ade80; }
        .pred-dot-partial   { background: #fb923c; }
        .pred-dot-wrong     { background: #f87171; }
        .pred-dot-missing   { background: #374151; }
        .pred-dot-pending   { background: #fbbf24; }
        .pred-dot-postponed { background: #fbbf24; }

        .pts-badge           { padding: 2px 7px; border-radius: 10px; font-size: .85em; font-weight: 600; margin-left: 4px; }
        .pts-badge-correct   { background: rgba(5,150,105,.2); color: #34d399; }
        .pts-badge-partial   { background: rgba(251,146,60,.15); color: #fb923c; }
        .pts-badge-wrong     { background: rgba(248,113,113,.15); color: #f87171; }
        .pred-dot-flagged    { background: #fbbf24; }
        .pred-row-flagged    { color: #b8c4d4; }
        .pts-badge-flagged   { background: rgba(251,191,36,.15); color: #fbbf24; }

        .pred-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
        .pred-row-rest { white-space: nowrap; flex-shrink: 0; }
        @media (max-width: 440px) {
            .pred-row-name { max-width: 6.5em; }
        }
@keyframes sniper-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
        .sniper-pulse           { display: inline-block; animation: sniper-pulse 1.4s ease-in-out infinite; }
@keyframes nostradamus-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
        .nostradamus-pulse      { display: inline-block; animation: nostradamus-pulse 1.4s ease-in-out infinite; }
@keyframes unicorn-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
        .unicorn-pulse          { display: inline-block; animation: unicorn-pulse 1.4s ease-in-out infinite; }

        /* ── Prediction-kort – Mörkt Matcher-tema ── */

        /* Round-grupp container */
        .pred-group {
            background: #333743;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .pred-group-header {
            background: #1e2535;
            color: white;
            padding: 11px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: .88em;
            cursor: pointer;
            user-select: none;
        }
        .pred-group-header:hover { background: #253147; }
        .pred-group-header.locked-group { background: #1a1424; }
        .pred-group-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
        .pred-group-header img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 50%; padding: 1px; }
        .pred-group-round { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pred-group-meta { font-weight: 400; color: #8896aa; font-size: .88em; flex-shrink: 0; }
        .pred-group-toggle { font-size: .9em; flex-shrink: 0; }

        /* Match-rad inuti grupp */
        .pred-match {
            padding: 8px 14px;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .pred-match:last-child { border-bottom: none; }
        .pred-match.locked .pred-team-name { color: #6b7280; }

        /* ── VM-multiplier-badge (Tippa-flik) ── */
        .pred-match.has-multiplier {
            background: linear-gradient(135deg, rgba(251,191,36,.04) 0%, rgba(245,158,11,.02) 100%);
            border-left: 3px solid #f59e0b;
            padding-left: 11px;
        }
        .wc-multiplier-badge {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0 0 5px 0;
            padding: 4px 10px 4px 8px;
            border-radius: 6px;
            font-size: .72em;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            width: fit-content;
            animation: multiplierPulse 3s ease-in-out infinite;
        }
        /* Färgvarianter per multiplikator */
        .wc-multiplier-125 { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
        .wc-multiplier-150 { background: rgba(251,146,60,.18); color: #fb923c; border: 1px solid rgba(251,146,60,.30); }
        .wc-multiplier-175 { background: rgba(239,68,68,.18); color: #f87171; border: 1px solid rgba(239,68,68,.28); }
        .wc-multiplier-200 { background: linear-gradient(90deg, rgba(168,85,247,.22), rgba(236,72,153,.22)); color: #e879f9; border: 1px solid rgba(168,85,247,.35); }
        .wc-multiplier-icon { font-style: normal; }

        @keyframes multiplierPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .75; }
        }

        /* ── VM-multiplier inline-badge (Matcher-flik) ── */
        .wc-multiplier-badge-inline {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 1px 7px;
            border-radius: 10px;
            font-size: .72em;
            font-weight: 700;
            letter-spacing: .03em;
            margin-left: 6px;
            vertical-align: middle;
            background: rgba(245,158,11,.18);
            color: #fbbf24;
            border: 1px solid rgba(245,158,11,.28);
            animation: multiplierPulse 3s ease-in-out infinite;
        }

        /* Match-item highlight (Matcher-flik) */
        .match-item.match-item-multiplier {
            border-left: 3px solid #f59e0b;
        }
        .match-item.match-item-multiplier .match-header {
            padding-left: 11px;
        }

        .pred-date-label {
            font-size: .7em;
            color: #d4930a;
            line-height: 1;
            white-space: nowrap;
            margin-bottom: 0;
        }

        .pred-sort-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding: 0 2px;
        }
        .pred-sort-label {
            font-size: .82em;
            color: #6b7280;
            flex-shrink: 0;
        }
        .pred-sort-select {
            font-size: .82em;
            padding: 4px 8px;
            border: 1px solid #dde3ec;
            border-radius: 4px;
            background: #fff;
            color: #1e2535;
            cursor: pointer;
        }
        .pred-sort-select:focus { outline: none; border-color: #d4930a; }

        .pred-pitch {
            display: grid;
            grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
            gap: 10px;
            align-items: center;
            touch-action: pan-y;
        }
        .pred-team-home { display: flex; align-items: center; justify-content: flex-end; text-align: right; align-self: center; min-width: 0; overflow: hidden; }
        .pred-team-away { display: flex; align-items: center; justify-content: flex-start; text-align: left; align-self: center; min-width: 0; overflow: hidden; }
        .pred-team-name {
            display: block;
            width: 100%;
            font-weight: 700;
            color: #d0d6e0;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Lagloggor i tippa-fliken */
        .pred-team-crest {
            width: 22px;
            height: 22px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .pred-team-crest-home { margin-left: 6px; order: 1; }
        .pred-team-crest-away { margin-right: 6px; order: -1; }

        /* Score-zon */
        .score-inputs { display: flex; align-items: center; gap: 4px; flex-shrink: 0; align-self: center; min-width: 0; }
        .score-dash { font-weight: 800; color: rgba(255,255,255,.12); font-size: 1em; }

        /* Score-celler: klickbara div:ar, värdet i span */
        .score-cell {
            width: 44px;
            height: 44px;
            background: #2a3040;
            border: 1.5px solid rgba(255,255,255,.1);
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: text;
            transition: border-color .15s, background .15s, box-shadow .15s;
            user-select: none;
            -webkit-user-select: none;
        }
        .score-cell-val {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1em;
            font-weight: 700;
            color: #e8edf5;
            pointer-events: none;
        }
        .score-cell.has-val { border-color: #d4930a; background: rgba(212,147,10,.1); box-shadow: inset 0 0 0 1px rgba(240,180,41,.2), 0 0 10px rgba(240,180,41,.14); }
        .score-cell.has-val .score-cell-val { color: #f0b429; }
        .score-cell.active  {
            border: 2px solid #f0b429 !important;
            background: rgba(240,180,41,.22) !important;
            outline: 3px solid rgba(240,180,41,.5);
            outline-offset: 1px;
        }
        .score-cell.active .score-cell-val { color: #f0b429; }
        .score-cell.active:not(.has-val) .score-cell-val::after { content: '|'; animation: score-blink .8s step-end infinite; color: #f0b429; font-weight: 300; }
        @keyframes score-blink { 0%,100%{opacity:1} 50%{opacity:0} }
        .score-cell.locked { opacity: .55; cursor: default; }

        /* Fast input som håller tangentbordet öppet – helt osynlig */
        #scoreInputBar,
        #scoreInputBar.visible {
            position: fixed;
            bottom: 0; left: 0;
            width: 1px !important; height: 1px !important;
            overflow: hidden;
            opacity: 0 !important;
            pointer-events: none;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            z-index: 200;
        }
        #scoreBarInput {
            position: absolute;
            width: 1px; height: 1px;
            opacity: 0;
            border: none;
            padding: 0; margin: 0;
            font-size: 16px; /* hindrar iOS zoom */
        }

        /* Behåll gamla .score-input för låsta fält (disabled) */
        .score-input {
            width: 44px;
            height: 44px;
            background: #2a3040;
            border: 1.5px solid rgba(255,255,255,.1);
            border-radius: 8px;
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1em;
            font-weight: 700;
            color: #e8edf5;
            flex-shrink: 0;
            -moz-appearance: textfield;
            appearance: textfield;
            transition: border-color .2s, background .2s;
        }
        .score-input::-webkit-outer-spin-button,
        .score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        #adminCompRows input[type=number]::-webkit-outer-spin-button,
        #adminCompRows input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .score-input.has-val { border-color: #d4930a; color: #f0b429; background: rgba(212,147,10,.1); box-shadow: inset 0 0 0 1px rgba(240,180,41,.2), 0 0 10px rgba(240,180,41,.14); }
        .score-input:disabled { opacity: .55; cursor: default; }

        /* Statisk poäng (låst – visas i mitten) */
        .score-static {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.8em;
            font-weight: 700;
            color: #d4930a;
            min-width: 28px;
            text-align: center;
        }

        /* Låst-sektion under match-korten */
        .pred-locked-section {
            padding: 8px 14px 10px;
            border-top: 1px solid rgba(255,255,255,.06);
        }
        .pred-locked-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            gap: 8px;
        }
        .pred-locked-chip {
            font-size: .68em;
            font-weight: 700;
            letter-spacing: .08em;
            padding: 3px 8px;
            background: rgba(248,113,113,.15);
            color: #f87171;
            border-radius: 4px;
            flex-shrink: 0;
        }
        .pred-locked-tipp { font-size: .82em; color: #6b7280; }
        .pred-locked-tipp strong { color: #f0b429; font-family: 'JetBrains Mono', monospace; }

        .predictions-revealed { display: flex; flex-direction: column; gap: 3px; }
        .predictions-revealed h4 { display: none; }
        .prediction-row {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255,255,255,.06);
            font-size: .82em;
            color: #94a3b8;
        }
        .prediction-row:last-child { border-bottom: none; }
        .prediction-row span:last-child { color: #f0b429; font-family: 'JetBrains Mono', monospace; font-weight: 700; }

        /* ── Resultat-rad (tippa-fliken) ── */
        .pred-result-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-top: 10px;
            padding: 8px 14px;
            border-top: 1px solid rgba(255,255,255,.06);
        }
        .pred-result-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .pred-result-label {
            font-size: .62em;
            font-weight: 700;
            letter-spacing: .1em;
            color: #4a5568;
            text-transform: uppercase;
        }
        .pred-result-score {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.15em;
            font-weight: 700;
            color: #6b7280;
        }
        .pred-result-score.correct { color: #4ade80; border-radius: 5px; padding: 1px 5px; animation: pred-pulse-exact 2s ease-in-out infinite; }
        .pred-result-score.partial { color: #4ade80; }
        .pred-result-score.wrong   { color: #f87171; }
        @keyframes pred-pulse-exact {
            0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,.0); }
            50%       { box-shadow: 0 0 8px 3px rgba(167,139,250,.5); }
        }
        .pred-result-divider {
            width: 1px;
            height: 32px;
            background: rgba(255,255,255,.08);
        }
        .pred-result-actual-label { color: #94a3b8; }
        .pred-result-actual-score {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.15em;
            font-weight: 700;
            color: #f0b429;
        }

        /* ── Deadline-chips ── */
        .deadlines-row { margin-bottom: 10px; }
        .pred-group-chip-wrap { padding: 10px 12px 0; }
        .pred-group-chip-wrap .deadlines-row { margin-bottom: 0; }
        .pred-group-chip-wrap .deadline-chip { margin-bottom: 0; border-radius: 8px; }
        .round-group-header {
            font-size: .75em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #9ca3af;
            padding: 16px 4px 6px;
            border-top: 1px solid rgba(255,255,255,.06);
            margin-top: 4px;
        }
        .round-group-header:first-child { border-top: none; padding-top: 4px; }

        /* ── Scraper sync status bar ─────────────────────────────── */
        .scraper-status-bar {
            display: flex;
            justify-content: center;
            padding: 8px 16px 14px;
        }
        .scraper-status-bar:empty { display: none; }
        .scraper-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0;
            background: #1e2535;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .scraper-status-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 13px;
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            font-size: 0.66em;
        }
        .scraper-status-label {
            color: #b0bace;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            font-size: 0.9em;
        }
        .scraper-status-value {
            color: #e8edf5;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        .scraper-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #3a4255;
            flex-shrink: 0;
            transition: background 0.4s, box-shadow 0.4s;
        }
        .scraper-status-dot.fresh {
            background: #22c55e;
            box-shadow: 0 0 5px #22c55e99;
            animation: pulse-dot 2.5s ease-in-out infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { box-shadow: 0 0 4px #22c55e88; }
            50%       { box-shadow: 0 0 9px #22c55ecc; }
        }
        .scraper-status-sep {
            width: 1px;
            height: 20px;
            background: #2c3347;
            flex-shrink: 0;
        }
        .scraper-refresh-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin: 0 4px 0 6px;
            padding: 0;
            background: rgba(255,255,255,0.07);
            border: none;
            border-radius: 50%;
            color: #b0bace;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, transform 0.15s;
            flex-shrink: 0;
            line-height: 1;
        }
        .scraper-refresh-btn:hover {
            background: rgba(255,255,255,0.14);
            color: #e8edf5;
        }
        .scraper-refresh-btn.spinning {
            animation: spin-refresh 0.7s linear infinite;
            pointer-events: none;
            color: #f0b429;
        }
        @keyframes spin-refresh {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        /* ── end scraper status ──────────────────────────────────── */

        .deadline-chip {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: .8em;
            font-weight: 600;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }
        .deadline-chip-open {
            background: linear-gradient(135deg, #0b1e13 0%, #0f2318 100%);
            border: 1px solid rgba(52,211,153,.28);
            color: #34d399;
            box-shadow: 0 2px 12px rgba(52,211,153,.08), inset 0 1px 0 rgba(52,211,153,.06);
        }
        .deadline-chip-locked {
            background: linear-gradient(135deg, #1a0d0e 0%, #200f10 100%);
            border: 1px solid rgba(248,113,113,.22);
            color: #f87171;
            box-shadow: 0 2px 8px rgba(248,113,113,.06);
        }

        .deadline-chip-top { display: contents; }
        .deadline-chip-sub { font-weight: 400; font-size: .86em; opacity: .65; }

        @keyframes dotPulse {
            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
            50%       { opacity: .85; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(52,211,153,0); }
        }
        .deadline-dot {
            width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
        }
        .deadline-chip-open   .deadline-dot {
            background: #34d399;
            animation: dotPulse 2s ease-in-out infinite;
        }
        .deadline-chip-locked .deadline-dot { background: #f87171; }

        .deadline-countdown {
            margin-left: auto;
            font-weight: 800;
            font-size: 1.08em;
            flex-shrink: 0;
            letter-spacing: .01em;
        }
        .deadline-chip-open .deadline-countdown {
            color: #6ee7b7;
            text-shadow: 0 0 10px rgba(52,211,153,.25);
        }

        /* ── Spara-animation ── */
        @keyframes saveFlash {
            0%   { box-shadow: none; }
            25%  { box-shadow: 0 0 0 3px rgba(16,185,129,.4); }
            60%  { box-shadow: 0 0 0 3px rgba(16,185,129,.4); }
            100% { box-shadow: none; }
        }
        .pred-save-flash { animation: saveFlash .9s ease forwards; }

        /* ── Tab fade-in (#1) ── */
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .tab-content-visible {
            animation: tabFadeIn .22s cubic-bezier(.22,1,.36,1) both;
        }

        /* ── Stagger-listor (#2) ── */
        @keyframes itemSlideIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .stagger-item {
            animation: itemSlideIn .3s cubic-bezier(.22,1,.36,1) backwards;
        }

        /* ── Poängbricka pop-in (#3) ── */
        @keyframes badgePop {
            0%   { transform: scale(.5); opacity: 0; }
            55%  { transform: scale(1.18); opacity: 1; }
            100% { transform: scale(1); }
        }
        .pts-badge { animation: badgePop 2.2s cubic-bezier(.22,1,.36,1) both; }

        /* ── Deadline färgskifte (#4) ── */
        .deadline-countdown { transition: color .6s ease; }
        .deadline-chip-open .deadline-countdown.dl-warm {
            color: #fbbf24;
            text-shadow: 0 0 10px rgba(251,191,36,.3);
        }
        .deadline-chip-open .deadline-countdown.dl-hot {
            color: #f87171;
            text-shadow: 0 0 12px rgba(248,113,113,.35);
        }

        /* ── Pred-group toggle med max-height (#6) ── */
        .pred-group-body {
            overflow: hidden;
            max-height: 9000px;
            transition: max-height .3s cubic-bezier(.22,1,.36,1);
        }
        .pred-group-body.collapsed {
            max-height: 0;
        }

        /* ── Modal/overlay fade-in (#7) ── */
        @keyframes overlayFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes modalSlideIn {
            from { opacity: 0; transform: translateY(16px) scale(.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .result-modal-overlay {
            animation: overlayFadeIn .18s ease both;
        }
        .result-modal {
            animation: modalSlideIn .22s cubic-bezier(.22,1,.36,1) both;
        }

        /* ── Topplista stagger-rader (#8) ── */
        .leaderboard-table tbody:not(.lb-rendered) tr {
            animation: itemSlideIn .3s cubic-bezier(.22,1,.36,1) backwards;
        }

        /* ── prefers-reduced-motion – stäng av allt ── */
        @media (prefers-reduced-motion: reduce) {
            .tab-content-visible,
            .stagger-item,
            .pts-badge,
            .result-modal-overlay,
            .result-modal,
            .leaderboard-table tbody tr {
                animation: none !important;
                transition: none !important;
            }
            .pred-group-body { transition: none !important; }
        }

        /* ── Tom-state ── */
        .empty-state { text-align: center; padding: 32px 16px; color: #9ca3af; font-size: .9em; line-height: 1.5; }

        /* ── Alla-tippade-toast ── */
        @keyframes allTippedSlideUp {
            from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
            to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes allTippedFadeOut {
            from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            to   { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
        }
        @keyframes checkDraw {
            from { stroke-dashoffset: 60; }
            to   { stroke-dashoffset: 0; }
        }
        @keyframes checkCircle {
            from { stroke-dashoffset: 200; opacity: 0; }
            to   { stroke-dashoffset: 0; opacity: 1; }
        }
        @keyframes checkGlow {
            0%   { box-shadow: 0 0 0 0 rgba(240,180,41,.5); }
            70%  { box-shadow: 0 0 0 18px rgba(240,180,41,0); }
            100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
        }
        .all-tipped-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            pointer-events: auto;
            animation: allTippedSlideUp .4s cubic-bezier(.22,1,.36,1) both;
            filter: drop-shadow(0 8px 32px rgba(0,0,0,.55));
            width: calc(100vw - 48px);
            max-width: 340px;
        }
        .all-tipped-toast.fade-out {
            animation: allTippedFadeOut .35s cubic-bezier(.55,0,1,.45) both;
            pointer-events: none;
        }
        .all-tipped-inner {
            background: linear-gradient(135deg, #1a1f2e 0%, #0f1420 100%);
            border: 1px solid rgba(240,180,41,.35);
            border-radius: 20px;
            padding: 18px 22px 18px 18px;
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        .all-tipped-inner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(240,180,41,.06) 0%, rgba(240,180,41,0) 60%);
            border-radius: inherit;
            pointer-events: none;
        }
        .all-tipped-check-wrap {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(240,180,41,.12);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: checkGlow .6s ease .3s both;
        }
        .all-tipped-check-svg {
            width: 48px;
            height: 48px;
        }
        .all-tipped-check-svg .at-circle {
            fill: none;
            stroke: #f0b429;
            stroke-width: 2;
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
            stroke-linecap: round;
            animation: checkCircle .5s cubic-bezier(.22,1,.36,1) .15s both;
        }
        .all-tipped-check-svg .at-check {
            fill: none;
            stroke: #f0b429;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 60;
            stroke-dashoffset: 60;
            animation: checkDraw .4s cubic-bezier(.22,1,.36,1) .45s both;
        }
        .all-tipped-text {
            flex: 1;
            min-width: 0;
        }
        .all-tipped-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.35em;
            letter-spacing: .04em;
            color: #f0b429;
            line-height: 1;
            margin-bottom: 3px;
        }
        .all-tipped-sub {
            font-size: .78em;
            color: #8896aa;
            line-height: 1.35;
        }
        .all-tipped-close {
            position: absolute;
            top: 10px;
            right: 12px;
            background: none;
            border: none;
            color: #4a5260;
            font-size: 1.1em;
            cursor: pointer;
            padding: 2px 4px;
            line-height: 1;
            transition: color .15s;
        }
        .all-tipped-close:hover { color: #8896aa; }
        @media (prefers-reduced-motion: reduce) {
            .all-tipped-toast, .all-tipped-toast.fade-out,
            .all-tipped-check-svg .at-circle, .all-tipped-check-svg .at-check,
            .all-tipped-check-wrap {
                animation: none !important;
            }
        }

        @media (max-width: 480px) {
            .app-tab { padding: 11px 11px; font-size: .82em; }
            .leaderboard-table { font-size: .82em; }
            .leaderboard-table th { padding: 8px 3px !important; }
            .leaderboard-table td { padding: 8px 3px !important; }
            th.lb-col-sniper, td.lb-col-sniper,
            th.lb-col-unicorn, td.lb-col-unicorn { display: none; } /* dölj på portrait-mobil */
            .leaderboard-table td:nth-child(2) { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .score-input { width: 44px; height: 44px; font-size: 1em; }
            .score-cell  { width: 44px; height: 44px; }
            .score-cell-val { font-size: 1em; }
            /* #scoreInputBar är osynlig – ingen padding-bottom behövs */
            .app-content { padding: 12px; }
            .app-card { padding: 14px; }
            .card { padding: 22px 18px; }
            .result-modal { padding: 20px 16px; }
            .result-modal-input { width: 52px; font-size: 1.4em; }
        }

        /* ── Topplista-tabell ── */
        .leaderboard-table { width: 100%; border-collapse: collapse; font-size: .88em; }
        .leaderboard-table th { background: #d4930a; color: white; padding: 9px 10px; text-align: center; font-weight: 600; font-size: .82em; text-transform: uppercase; letter-spacing: .05em; }
        .leaderboard-table th:nth-child(2) { text-align: left; }
        .leaderboard-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; text-align: center; color: #d0d6e0; }
        .leaderboard-table td:nth-child(2) { text-align: left; }
        .leaderboard-table tr:last-child td { border-bottom: none; }
        .leaderboard-table tr:hover td { background: rgba(255,255,255,.04); }
        /* ── Bet-level filter ── */
        .blf-btn { display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;padding:0 8px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(255,255,255,.05);color:#8896aa;font-size:.78em;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s; }
        .blf-btn:hover { background:rgba(255,255,255,.1); }
        .blf-btn.blf-active { background:rgba(240,180,41,.15);border-color:rgba(240,180,41,.4);color:#f0b429; }
        .blf-dot { display:inline-block;width:10px;height:10px;border-radius:50%; }
        .blf-dot-silver { background:#a0aec0; }
        .blf-dot-gold { background:#f0b429; }

        .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .82em; background: rgba(255,255,255,.08); color: #8896aa; }
        .rank-badge-1 { background: #f0b429; color: #0a0c10; box-shadow: 0 0 10px rgba(240,180,41,.4); }
        .rank-badge-2 { background: rgba(255,255,255,.15); color: #b8c4d4; }
        .rank-badge-3 { background: rgba(180,83,9,.25); color: #fb923c; }

        /* ── Top-3 radlyft ── */
        .lb-rank-1 td { background: rgba(240,180,41,.07); border-bottom: 1px solid rgba(240,180,41,.12); }
        .lb-rank-1 td:nth-child(2) { color: #f0b429; }
        .lb-rank-2 td { background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.06); }
        .lb-rank-3 td { background: rgba(180,83,9,.06); border-bottom: 1px solid rgba(180,83,9,.1); }
        .lb-rank-1:hover td, .lb-rank-2:hover td, .lb-rank-3:hover td { filter: brightness(1.08); }

        /* ── Titel-chips (Sniper/Nostradamus/Unicorn) ── */
        .title-chip { border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; }
        .title-chip-header { font-size: .7em; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 3px; }
        .title-chip-name { font-size: 1em; font-weight: 700; }
        .title-chip-detail { font-size: .8em; margin-top: 2px; }
        .title-chip-sniper { background: rgba(245,158,11,.22); color: #fbbf24; border: 1px solid rgba(245,158,11,.45); }
        .title-chip-sniper .title-chip-header { color: #fcd34d; }
        .title-chip-nostradamus { background: rgba(139,92,246,.22); color: #c4b5fd; border: 1px solid rgba(139,92,246,.45); }
        .title-chip-nostradamus .title-chip-header { color: #ddd6fe; }
        .title-chip-unicorn { background: rgba(236,72,153,.22); color: #f9a8d4; border: 1px solid rgba(236,72,153,.45); }
        .title-chip-unicorn .title-chip-header { color: #fbcfe8; }

        /* ── Admin-panel ── */
        .admin-section { background: #333743; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
        .admin-section-header { background: #1e2535; color: white; padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .88em; user-select: none; }
        .admin-section-header:hover { background: #253147; }
        .admin-section-body { padding: 16px; display: none; }
        .admin-section-body.open { display: block; }
        .admin-backup-body.open { display: flex; flex-direction: column; gap: 12px; }
        .admin-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; align-items: flex-end; }
        .admin-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
        .admin-field label { font-size: .75em; font-weight: 600; color: #8896aa; text-transform: uppercase; letter-spacing: .05em; }
        .admin-field input, .admin-field select { padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 1em; color: #d0d6e0; background: #2a2d37; width: 100%; }
        .admin-field input:focus, .admin-field select:focus { outline: none; border-color: #d4930a; }
        .btn-admin { padding: 11px 14px; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: .85em; font-weight: 600; cursor: pointer; border: none; transition: background .15s, transform .1s; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
        .btn-admin:hover { transform: translateY(-1px); }
        .btn-admin:active { transform: none; }
        .btn-admin-primary { background: #f0b429; color: #0a0c10; }
        .btn-admin-primary:hover { background: #f7c84a; }
        .btn-admin-secondary { background: rgba(255,255,255,.1); color: #d0d6e0; }
        .btn-admin-secondary:hover { background: rgba(255,255,255,.15); }
        .btn-admin-danger { background: rgba(220,38,38,.15); color: #f87171; }
        .btn-admin-danger:hover { background: rgba(220,38,38,.25); }
        .btn-admin-green { background: rgba(5,150,105,.15); color: #34d399; }
        .btn-admin-green:hover { background: rgba(5,150,105,.25); }
        .admin-log { background: #0a0c10; color: #4ade80; font-family: monospace; font-size: .75em; padding: 12px; border-radius: 8px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; margin-top: 10px; display: none; }
        /* Datumfält (admin-panelen, mörkt tema): utan detta ritas webbläsarens
           inbyggda kalenderikon i mörk färg och syns knappt mot mörk bakgrund –
           den finns och går att klicka, men ser "trasig"/osynlig ut. color-scheme
           gör att webbläsaren ritar en ljus ikon istället, cursor gör klickbarheten tydlig. */
        input[type="date"] { color-scheme: dark; cursor: pointer; }
        input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .9; }
        .player-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
        .player-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: .88em; }
        .player-item-name { font-weight: 600; color: #d0d6e0; }
        .deadline-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
        .deadline-row:last-child { border-bottom: none; }
        .deadline-label { font-size: .85em; font-weight: 700; color: #d0d6e0; letter-spacing: .01em; }
        .deadline-row-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
        .deadline-row-controls input[type="datetime-local"] { width: 160px; flex-shrink: 0; }
        .deadline-current { font-size: .78em; color: #6b7280; }
        .deadline-auto-hint { display: flex; align-items: center; gap: 6px; font-size: .74em; color: #6b7280; margin-top: 2px; }
        .deadline-auto-hint-icon { font-size: .9em; }
        .deadline-auto-btn { background: rgba(212,147,10,.12); border: 1px solid rgba(212,147,10,.25); color: #d4930a; font-size: .82em; font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: 4px; font-family: inherit; transition: background .15s, border-color .15s; white-space: nowrap; }
        .deadline-auto-btn:hover { background: rgba(212,147,10,.22); border-color: rgba(212,147,10,.5); }
        .deadline-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74em; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
        .deadline-status-badge.open { background: rgba(5,150,105,.12); color: #34d399; border: 1px solid rgba(5,150,105,.2); }
        .deadline-status-badge.locked { background: rgba(220,38,38,.1); color: #f87171; border: 1px solid rgba(220,38,38,.2); }
        .deadline-status-badge.unset { background: rgba(156,163,175,.08); color: #6b7280; border: 1px solid rgba(156,163,175,.12); }
        .activity-log-box { max-height: 300px; overflow-y: auto; font-size: .88em; font-family: monospace; background: #0a0c10; border: 1px solid #2d3748; border-radius: 8px; padding: 10px; }
        .admin-share-box { background: rgba(240,180,41,.06); border: 1px solid rgba(240,180,41,.2); border-radius: 10px; padding: 14px; text-align: center; margin-bottom: 10px; }
        .admin-share-code { font-size: 2em; font-weight: 800; letter-spacing: 6px; color: #d4930a; font-family: monospace; }
        .admin-share-url { font-size: .78em; color: #6b7280; word-break: break-all; margin-top: 4px; }
        .fetch-last-status { font-size: .78em; color: #6b7280; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
        .fetch-last-status::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 6px #4ade80; flex-shrink: 0; }
        .btn-fetch-now { background: linear-gradient(135deg, #f0b429, #e09010); color: #0a0c10; border: none; border-radius: 8px; padding: 11px 20px; font-family: 'DM Sans', sans-serif; font-size: .88em; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(240,180,41,.25); transition: all .15s; }
        .btn-fetch-now:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(240,180,41,.35); }
        .btn-fetch-now:active { transform: none; }

        /* ── Resultat-modal ── */
        .result-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
        .result-modal { background: #333743; border-radius: 16px; padding: 24px; width: 100%; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); }

        /* ── Trofé-modal (Sniper/Nostradamus/Unicorn) – återanvänder .ps-match-card-utseendet
           från spelarvyn, som är byggt för en nästan-svart bakgrund (#10131a). Den vanliga
           .result-modal-bakgrunden (#333743) är för ljus för den textfärgen – därför egen bakgrund. */
        .trophy-modal { background: #10131a; }
        .result-modal-title { font-weight: 700; font-size: 1.05em; color: #d0d6e0; margin-bottom: 4px; text-align: center; }
        .result-modal-match { text-align: center; color: #6b7280; font-size: .85em; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
        .result-modal-score { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
        .result-modal-team { font-weight: 600; font-size: .85em; flex: 1; color: #b8c4d4; }
        .result-modal-team-home { text-align: right; }
        .result-modal-team-away { text-align: left; }
        .result-modal-input { width: 48px; padding: 8px 4px; text-align: center; font-size: 1.3em; font-weight: 700; border: 2px solid rgba(255,255,255,.15); border-radius: 8px; -moz-appearance: textfield; appearance: textfield; font-family: 'DM Sans', sans-serif; color: #d0d6e0; background: #2a2d37; }
        .result-modal-input::-webkit-outer-spin-button, .result-modal-input::-webkit-inner-spin-button { -webkit-appearance: none; }
        .result-modal-input:focus { outline: none; border-color: #d4930a; }
        .result-modal-special { font-size: .82em; color: #fbbf24; text-align: center; min-height: 18px; margin-bottom: 12px; }
        .result-modal-btns { display: flex; gap: 8px; }
        .result-set-btn { display: block; width: 100%; padding: 6px 10px; margin-top: 6px; background: rgba(255,255,255,.07); color: #d0d6e0; border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: .82em; font-weight: 600; cursor: pointer; text-align: left; }
        .result-set-btn:hover { background: rgba(255,255,255,.12); }
        .flag-btn { display: inline; background: none; border: none; padding: 0; margin-left: 14px; font-size: .9em; cursor: pointer; opacity: .7; vertical-align: middle; }
        .flag-btn:hover { opacity: 1; }
        .flag-btn.flag-btn-done { opacity: .35; cursor: default; }

        /* ── Superadmin: Underhållsläge-modal ── */
        .maint-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10000;align-items:center;justify-content:center;padding:20px; }
        /* Avskalad som Radera liga-dialogen: vänsterställd rubrik som säger vad som händer,
           vanliga etiketter (inga versaler), hjälptext under fältet i stället för platshållare. */
        .maint-box { background:#10141d;border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;max-width:400px;padding:24px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.6); }
        .maint-title { font-size:1.1em;font-weight:700;color:#e8edf5;margin-bottom:8px; }
        .maint-desc { font-size:.88em;line-height:1.55;color:#aab4c5;margin-bottom:18px; }
        .maint-field-group { display:flex;flex-direction:column;margin-bottom:12px; }
        .maint-label { font-size:.8em;font-weight:600;color:#aab4c5;margin-bottom:5px; }
        .maint-input { background:#0a0d14;border:1px solid #232c3d;border-radius:10px;padding:10px 12px;color:#e8edf5;font-family:'DM Sans',sans-serif;font-size:.95em;outline:none;transition:border-color .2s, box-shadow .2s; }
        .maint-input:focus { border-color:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.16); }
        .maint-textarea { resize:none; }
        .maint-hint { font-size:.76em;color:#7d8aa0;margin-top:6px;line-height:1.45; }
        .maint-status { font-size:.82em;color:#f87171;min-height:18px;margin-bottom:10px; }
        .maint-btns { display:flex;gap:8px; }
        .maint-btn-confirm { flex:1;padding:11px;background:linear-gradient(135deg,#f7c84a,#f0b429);border:none;color:#1a1405;font-family:'DM Sans',sans-serif;font-size:.88em;font-weight:700;cursor:pointer;border-radius:10px; }
        .maint-btn-confirm:disabled { opacity:.6;cursor:default; }
        .maint-btn-cancel { flex:1;padding:11px;background:rgba(255,255,255,.07);border:none;color:#e8edf5;font-family:'DM Sans',sans-serif;font-size:.88em;font-weight:600;cursor:pointer;border-radius:10px; }
        .maint-btn-cancel:hover { background:rgba(255,255,255,.11); }

        /* ── Spelarvy Bottom Sheet ── */
        .ps-overlay { z-index: 1100; backdrop-filter: none; }
        .ps-sheet { max-height: 88vh; position: relative; top: 100vh; transition: top .28s cubic-bezier(.32,1,.32,1); will-change: top; animation: none; overflow-x: hidden; }
        .ps-body { padding: 0 0 32px; overflow-x: hidden; }

        /* Klickbart spelarnamn i topplistan */
        .leaderboard-player-link { cursor: pointer; color: inherit; }
        .leaderboard-player-link:hover { color: #d4930a; text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════════
   MATCHDAY-TEMA (2026-09-24) – designlagret för appen inne i en liga
   ════════════════════════════════════════════════════════════════════════════
   Ljusa, mjuka ytor med marinblått + guld som varumärke. Ligger sist i filen och
   skriver över färg/yta/form på reglerna ovan – layoutreglerna ovan (storlekar,
   flex, animationer) gäller fortfarande. Klasser som även används i de mörka
   vyerna (landning/hub/skapa liga) avgränsas med #viewApp så de inte påverkas.
   Tokens: se :root högst upp i filen. */

/* ── Skal: bakgrund, header ─────────────────────────────────────────────── */
#viewApp {
    background:
        radial-gradient(900px 380px at 50% -140px, rgba(240,180,41,.13), transparent 70%),
        radial-gradient(700px 520px at 105% 105%, rgba(70,100,170,.08), transparent 60%),
        var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
#appScrollArea { background: transparent; overflow-y: auto; }
/* Laglogga som vattenstämpel (följ-ett-lag-ligor) – svagare mot ljus botten */
#appScrollArea::before { opacity: .13; }

.app-header {
    height: 56px;
    background: linear-gradient(180deg, #1a2440 0%, var(--navy) 100%);
    box-shadow: 0 8px 24px rgba(20,28,46,.16);
    position: relative;
}
/* Tunn guldglimt i underkanten – headerns enda dekor */
.app-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(240,180,41,.55) 50%, transparent 100%);
    pointer-events: none;
}
.app-header-title { font-size: 1.45em; }
.app-league-chip {
    background: rgba(240,180,41,.13);
    border: 1px solid rgba(240,180,41,.3);
    color: var(--gold-2);
    border-radius: 999px;
    padding: 5px 11px 5px 13px;
}
.app-league-chip:hover { background: rgba(240,180,41,.22); }
.user-pill { border-radius: 999px; }
.league-switcher-dropdown, .user-menu {
    border-radius: var(--r-md);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.league-switcher-dropdown button, .user-menu-btn { border-radius: 10px; }

/* ── Flikar: mjuk "pill"-rad under headern (dator/surfplatta) ─────────── */
.app-tabs-wrap {
    background: transparent;
    border-bottom: none;
    padding: 12px 16px 2px;
}
.app-tabs {
    gap: 2px;
    padding: 5px;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.app-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 auto;
    padding: 9px 14px;
    border: none;
    border-radius: 999px;
    color: var(--ink-3);
    font-weight: 600;
    font-size: .88em;
    transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.app-tab:hover { color: var(--ink); background: var(--tint-1); }
.app-tab.active {
    color: #fff;
    background: var(--navy);
    border-bottom-color: transparent;
    box-shadow: 0 4px 12px rgba(20,28,46,.22);
}
.app-tab.active:hover { color: #fff; background: var(--navy-2); }
.app-tab-icon {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
    transition: stroke .2s, background .2s var(--ease);
}
.app-tab.active .app-tab-icon { stroke: var(--gold); }
.app-tab-more { display: none; }

/* Brickan på Tippa/Admin: fortfarande röd och pulserande, men mjukare – ingen
   blinkande flikfärg längre, bara en lugn ring runt brickan. */
.app-tab.has-badge { animation: none; }
@keyframes badge-soft {
    0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px rgba(229,72,77,.45); }
    50%      { box-shadow: 0 0 0 2px var(--surface), 0 0 0 7px rgba(229,72,77,0); }
}
.tab-badge {
    background: #e5484d;
    min-width: 18px; height: 18px;
    font-size: .7em;
    margin-left: 2px;
    top: 0;
    animation: badge-soft 2.4s ease-in-out infinite;
}
.tab-badge.tab-badge-yellow { background: var(--gold); color: var(--navy); }

/* ── Bottenmeny på mobil ───────────────────────────────────────────────────
   Samma knappar som ovan, flyttade till botten med flex-order (#viewApp är en
   flex-kolumn: header → flikar → scrollyta). Regler/Admin/Om döljs och nås via
   "Mer". Aktiv flik = marinblå "pill" bakom ikonen. */
@media (max-width: 720px) {
    #viewApp .app-tabs-wrap {
        order: 3;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.94);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(20,28,46,.07);
    }
    #viewApp .app-tabs {
        background: none; border: none; box-shadow: none;
        padding: 0; border-radius: 0; gap: 0;
        overflow: visible;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    #viewApp .app-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
        padding: 4px 2px 2px;
        font-size: .7em;
        font-weight: 600;
        letter-spacing: .01em;
        background: none;
        box-shadow: none;
        color: var(--ink-3);
    }
    #viewApp .app-tab .app-tab-icon {
        width: 52px; height: 30px;
        padding: 5px 15px;
        border-radius: 999px;
        stroke-width: 1.9;
    }
    #viewApp .app-tab.active { color: var(--ink); background: none; box-shadow: none; }
    #viewApp .app-tab.active .app-tab-icon { background: var(--navy); stroke: var(--gold); }
    #viewApp .app-tab-secondary { display: none !important; }
    #viewApp .app-tab-more { display: inline-flex; }
    /* "Mer" ser aktiv ut när Regler/Admin/Om är öppen */
    #viewApp .app-tabs:has(.app-tab-secondary.active) .app-tab-more { color: var(--ink); }
    #viewApp .app-tabs:has(.app-tab-secondary.active) .app-tab-more .app-tab-icon { background: var(--navy); stroke: var(--gold); }
    /* Admin-flikens flaggbricka syns som en prick på "Mer" */
    #viewApp .app-tabs:has(#adminTab.has-badge) .app-tab-more::after {
        content: ''; position: absolute; top: 4px; left: calc(50% + 12px);
        width: 9px; height: 9px; border-radius: 50%;
        background: #e5484d; box-shadow: 0 0 0 2px var(--surface);
    }
    #viewApp .app-tab .tab-badge {
        position: absolute; top: 0; left: calc(50% + 8px);
        margin: 0;
    }
    /* Göm menyn medan tangentbordet är uppe (tippning, formulär) – annars
       lägger sig menyn ovanpå tangentbordet på Android och äter höjd. */
    body:has(#scoreBarInput:focus) #viewApp .app-tabs-wrap,
    #viewApp:has(input:focus, textarea:focus) .app-tabs-wrap { display: none; }

    .app-content { padding: 14px 12px 24px; }
}

/* ── "Mer"-arket ───────────────────────────────────────────────────────── */
.more-sheet-overlay {
    position: fixed; inset: 0; z-index: 1050;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15,22,38,0);
    transition: background .22s var(--ease);
}
.more-sheet-overlay.open { background: rgba(15,22,38,.42); }
.more-sheet {
    width: 100%; max-width: 480px;
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    padding: 6px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(20,28,46,.22);
    transform: translateY(100%);
    transition: transform .26s var(--ease);
}
.more-sheet-overlay.open .more-sheet { transform: none; }
.more-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 6px auto 10px; }
.more-sheet-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 13px 12px;
    background: none; border: none; border-radius: var(--r-md);
    font-family: 'DM Sans', sans-serif; font-size: 1em; font-weight: 600;
    color: var(--ink); text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.more-sheet-item:hover, .more-sheet-item:active { background: var(--tint-1); }
.more-sheet-item .app-tab-icon { width: 22px; height: 22px; stroke: var(--ink-2); }
.more-sheet-item.active { background: var(--gold-soft); color: var(--gold-ink); }
.more-sheet-item.active .app-tab-icon { stroke: var(--gold-ink); }
.more-sheet-item .tab-badge { margin-left: auto; position: static; }

/* ── Innehållsyta, kort, rubriker ─────────────────────────────────────── */
.app-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.app-card-title { color: var(--ink); font-weight: 700; font-size: .95em; display: flex; align-items: center; gap: 8px; }
/* Linjeikoner i rubriker (sprite #i-* överst i app.html) */
.ic {
    width: 1.15em; height: 1.15em;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0; vertical-align: -.2em;
}
.ic-gold { stroke: var(--gold-deep); }
.empty-state { color: var(--ink-3); }

.app-msg { border-radius: var(--r-sm); }
.app-msg-success { background: var(--green-soft); color: var(--green-ink); }
.app-msg-error   { background: var(--red-soft);   color: var(--red-ink); }
.app-msg-info    { background: var(--amber-soft); color: var(--amber-ink); }

/* Admin-meddelanden till spelarna */
.admin-msg-banner { background: var(--gold-soft); border-color: var(--gold-line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.admin-msg-banner-badge { background: var(--gold-deep); }

/* ── Påminnelser (push) ─────────────────────────────────────────────────── */
#notifToggleRow {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: 11px 14px;
}
.notif-label { color: var(--ink); }
.notif-desc, .notif-test-status { color: var(--ink-3); }
.notif-pill { background: var(--tint-2); border-color: var(--line); color: var(--ink-2); }
.notif-pill.active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
.notif-test-btn { background: var(--tint-1); border-color: var(--line); color: var(--ink-3); }
.notif-test-btn:hover:not(:disabled) { background: var(--tint-2); color: var(--ink-2); }
.notif-test-status.ok  { color: var(--green-ink); }
.notif-test-status.err { color: var(--red-ink); }

/* ── Tippa: hjältekortet (x/y tippade + nästa deadline) ──────────────────
   Appens enda mörka yta inne i ligan – en "resultattavla" med guldsken som
   ger sidan en tydlig startpunkt. Hög kontrast (vitt/guld på marin). */
.tipp-counter-wrap {
    position: relative;
    background:
        radial-gradient(360px 160px at 0% 0%, rgba(240,180,41,.24), transparent 65%),
        linear-gradient(135deg, #1d2945 0%, var(--navy) 100%);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 30px rgba(20,28,46,.22);
}
.tipp-counter-left, .tipp-counter-right { padding: 14px 18px; }
.tipp-counter-num { color: var(--gold); font-size: 2.5em; text-shadow: 0 0 22px rgba(240,180,41,.35); }
.tipp-counter-slash { color: rgba(255,255,255,.22); font-size: 2.1em; }
.tipp-counter-total { color: rgba(255,255,255,.72); font-size: 2.1em; }
.tipp-counter-label { color: rgba(255,255,255,.6); font-size: .74em; margin-top: 3px; }
.tipp-counter-divider { background: rgba(255,255,255,.1); margin: 12px 0; }
.next-deadline-title { color: #5fe0a6; font-size: .66em; letter-spacing: .08em; }
.next-deadline-dot-sm { background: #5fe0a6; }
.next-deadline-time { color: #fff; font-size: 1.4em; letter-spacing: .03em; margin-top: 2px; }
.next-deadline-sub-sm { color: rgba(255,255,255,.55); font-size: .7em; }
.follow-team-banner { color: var(--ink-3); }

/* Sortering */
.pred-sort-bar { margin: 14px 2px 10px; }
.pred-sort-label { color: var(--ink-3); font-weight: 600; }
.pred-sort-select {
    -webkit-appearance: none; appearance: none;
    padding: 6px 30px 6px 13px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2366748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    box-shadow: var(--shadow-1);
}
.pred-sort-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.2); }

/* ── Tippa: grupper och matcher ─────────────────────────────────────────── */
.pred-group, .round-group {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 12px;
}
.pred-group-header, .round-header {
    background: var(--surface);
    color: var(--ink);
    padding: 13px 16px;
    font-weight: 700;
    font-size: .92em;
    transition: background .15s;
}
.pred-group-header:hover, .round-header:hover { background: var(--tint-1); }
.pred-group-header.locked-group { background: var(--tint-1); color: var(--ink-2); }
.pred-group-header-left { gap: 9px; }
.pred-group-header img { width: 22px; height: 22px; box-shadow: 0 0 0 1px var(--line); }
.pred-group-meta, .round-meta { color: var(--ink-3); font-weight: 500; }
/* "🔒 Stängd" – lugnt grått chip i stället för röd text (JS sätter röd inline-färg) */
.locked-group .pred-group-meta {
    color: var(--ink-3) !important;
    background: var(--tint-2);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .78em;
}
.pred-group-toggle, .round-toggle { color: var(--ink-4); }
.pred-group-body:not(.collapsed), .round-body:not(.collapsed) { border-top: 1px solid var(--line); }
.pred-group-chip-wrap { padding: 12px 14px 4px; }

.pred-match { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
.pred-date-label { color: var(--gold-ink); font-size: .72em; font-weight: 600; margin-bottom: 8px; letter-spacing: .01em; }
.pred-team-name { color: var(--ink); font-size: .95em; }
.pred-match.locked .pred-team-name { color: var(--ink-3); }
.pred-team-crest { width: 24px; height: 24px; }
.pred-team-crest-home { margin-left: 8px; }
.pred-team-crest-away { margin-right: 8px; }
.score-inputs { gap: 6px; }
.score-dash { color: var(--ink-4); }

/* Poängrutor: insänkta när tomma, varmt guld när ifyllda, guldring när aktiv */
.score-cell, .score-input {
    width: 46px; height: 48px;
    background: var(--field);
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(20,28,46,.06);
}
.score-cell-val, .score-input { color: var(--ink); font-size: 1.15em; }
.score-cell.has-val, .score-input.has-val {
    background: var(--gold-soft);
    border-color: var(--gold);
    box-shadow: 0 2px 8px rgba(240,180,41,.22);
}
.score-cell.has-val .score-cell-val, .score-input.has-val { color: var(--ink); }
.score-cell.active {
    border: 2px solid var(--gold) !important;
    background: #fff !important;
    outline: none;
    box-shadow: 0 0 0 4px rgba(240,180,41,.3), 0 4px 12px rgba(240,180,41,.2);
}
.score-cell.active .score-cell-val { color: var(--gold-ink); }
.score-cell.active:not(.has-val) .score-cell-val::after { color: var(--gold-deep); }
.score-cell.locked, .score-input:disabled { opacity: .6; }
.score-static { color: var(--gold-ink); }
@media (max-width: 480px) {
    .score-cell, .score-input { width: 44px; height: 46px; }
}

/* Låsta matcher och resultat */
.pred-locked-section { border-top-color: var(--line); }
.pred-locked-chip { background: var(--red-soft); color: var(--red-ink); border-radius: 999px; }
.pred-locked-tipp { color: var(--ink-3); }
.pred-locked-tipp strong, .prediction-row span:last-child { color: var(--gold-ink); }
.prediction-row { border-bottom-color: var(--line); color: var(--ink-2); }
.pred-result-row { border-top: 1px dashed var(--line-2); margin-top: 12px; padding-top: 10px; }
.pred-result-label { color: var(--ink-3); }
.pred-result-actual-label { color: var(--ink-2); }
.pred-result-score { color: var(--ink-3); }
.pred-result-score.correct { color: var(--green-ink); background: var(--green-soft); }
.pred-result-score.partial { color: var(--green-ink); }
.pred-result-score.wrong   { color: var(--red-ink); }
.pred-result-divider { background: var(--line); }
.pred-result-actual-score {
    color: var(--gold);
    background: var(--navy);
    padding: 2px 9px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(20,28,46,.18);
}

/* VM-multiplikator */
.pred-match.has-multiplier { background: linear-gradient(90deg, var(--amber-soft) 0%, rgba(255,241,220,0) 70%); border-left-color: #f5a524; }
.wc-multiplier-125 { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--gold-line); }
.wc-multiplier-150 { background: #ffe8d2; color: #b04a00; border-color: #fbc99a; }
.wc-multiplier-175 { background: var(--red-soft); color: var(--red-ink); border-color: #f6c3c0; }
.wc-multiplier-200 { background: linear-gradient(90deg, var(--violet-soft), var(--pink-soft)); color: var(--violet-ink); border-color: #d9cdfb; }
.wc-multiplier-badge-inline { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--gold-line); }
.match-item.match-item-multiplier { border-left-color: #f5a524; }

/* ── Deadline-chips ─────────────────────────────────────────────────────── */
.deadline-chip { border-radius: 12px; padding: 10px 12px 10px 14px; }
.deadline-chip-open {
    background: linear-gradient(135deg, #e7f7ef 0%, #f3fbf7 100%);
    border: 1px solid #c3e9d4;
    color: var(--green-ink);
    box-shadow: none;
}
.deadline-chip-locked {
    background: var(--tint-1);
    border: 1px solid var(--line);
    color: var(--ink-3);
    box-shadow: none;
}
.deadline-chip-open .deadline-dot { background: #12b76a; }
.deadline-chip-locked .deadline-dot { background: var(--ink-4); }
.deadline-chip-sub { opacity: .8; }
.deadline-chip-open .deadline-countdown {
    color: #0b6b3d;
    text-shadow: none;
    background: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(14,138,79,.16);
    font-variant-numeric: tabular-nums;
}
.deadline-chip-open .deadline-countdown.dl-warm { color: var(--amber-ink); text-shadow: none; }
.deadline-chip-open .deadline-countdown.dl-hot  { color: var(--red-ink);   text-shadow: none; }
.round-group-header { color: var(--ink-3); border-top-color: var(--line); }

/* ── Resultat-fliken ────────────────────────────────────────────────────── */
.scraper-status-pill {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
}
.scraper-status-label { color: var(--ink-3); }
.scraper-status-value { color: var(--ink); }
.scraper-status-sep { background: var(--line); }
.scraper-status-dot { background: var(--ink-4); }
.scraper-refresh-btn { background: var(--tint-2); color: var(--ink-2); }
.scraper-refresh-btn:hover { background: var(--gold-soft); color: var(--gold-ink); }
.scraper-refresh-btn.spinning { color: var(--gold-deep); }

.match-item { border-bottom-color: var(--line); }
.match-header { padding: 12px 16px; }
.match-header:hover { background: var(--tint-1); }
.match-teams { color: var(--ink); font-size: 1.05em; }
.match-date-line, .match-meta { color: var(--ink-3); }
.match-toggle { color: var(--ink-4); }
/* Slutresultatet som en liten resultattavla */
.match-score-inline {
    color: var(--gold);
    background: var(--navy);
    padding: 2px 9px;
    border-radius: 8px;
    font-size: .88em;
    box-shadow: 0 2px 6px rgba(20,28,46,.18);
}
.match-body { background: var(--tint-1); border-top-color: var(--line); padding: 8px 14px 14px; }
.own-tip-header { border-top-color: var(--line); }
.match-flag-note { color: var(--amber-ink); }

.pred-row { color: var(--ink-2); padding: 4px 8px; border-radius: 8px; font-size: .82em; }
.pred-row-correct { color: var(--ink); }
.pred-row-wrong   { color: var(--ink-2); }
.pred-row-pending, .pred-row-waiting { color: var(--ink-3); }
.pred-row-postponed { color: var(--amber-ink); }
.pred-row-flagged   { color: var(--ink-2); }
.pred-row-me { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.own-tip-header.pred-row { box-shadow: none; }
.pred-dot-correct   { background: #12b76a; }
.pred-dot-partial   { background: #f79009; }
.pred-dot-wrong     { background: #f04438; }
.pred-dot-missing   { background: var(--ink-4); }
.pred-dot-pending, .pred-dot-postponed, .pred-dot-flagged { background: #fdb022; }
.pts-badge { border-radius: 999px; font-weight: 700; }
.pts-badge-correct  { background: var(--green-soft); color: var(--green-ink); }
.pts-badge-partial  { background: var(--amber-soft); color: var(--amber-ink); }
.pts-badge-wrong    { background: var(--red-soft);   color: var(--red-ink); }
.pts-badge-flagged  { background: var(--amber-soft); color: var(--amber-ink); }

.result-set-btn {
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    border-radius: 10px;
    padding: 9px 12px;
    margin-top: 10px;
    box-shadow: var(--shadow-1);
    transition: border-color .15s, color .15s;
}
.result-set-btn:hover { background: var(--surface); border-color: var(--gold); color: var(--gold-ink); }

/* ── Tabell ─────────────────────────────────────────────────────────────── */
.leaderboard-table { border-collapse: separate; border-spacing: 0; }
.leaderboard-table th {
    /* Lodrät toning: varje th är en egen cell, så en diagonal toning gav
       synliga skarvar mellan kolumnerna. Uppifrån-och-ner ser sammanhängande ut. */
    background: linear-gradient(180deg, #f7c64a 0%, #e3a41b 100%);
    color: #2b1d00;
    font-weight: 700;
    letter-spacing: .07em;
}
.leaderboard-table th:first-child { border-radius: 12px 0 0 12px; }
.leaderboard-table th:last-child  { border-radius: 0 12px 12px 0; }
.leaderboard-table td { color: var(--ink); border-bottom: 1px solid var(--line); padding-top: 11px; padding-bottom: 11px; }
.leaderboard-table tr:hover td { background: var(--tint-1); }
.leaderboard-row-me td, .leaderboard-table tr.leaderboard-row-me:hover td { background: var(--gold-soft); }
.lb-rank-1 td { background: linear-gradient(90deg, var(--gold-soft), #fffaf0); border-bottom-color: var(--gold-line); }
.lb-rank-1 td:nth-child(2) { color: var(--gold-ink); }
.lb-rank-2 td { background: var(--tint-1); border-bottom-color: var(--line); }
.lb-rank-3 td { background: #fdf5ee; border-bottom-color: #f3e2d3; }
.lb-rank-1:hover td, .lb-rank-2:hover td, .lb-rank-3:hover td { filter: none; background: var(--tint-2); }
.rank-badge { width: 28px; height: 28px; background: var(--tint-2); color: var(--ink-3); }
.rank-badge-1 { background: linear-gradient(135deg, #ffd66b, var(--gold-deep)); color: #2b1d00; box-shadow: var(--shadow-gold); }
.rank-badge-2 { background: linear-gradient(135deg, #f1f4f8, #c3ccd8); color: var(--ink-2); box-shadow: 0 3px 10px rgba(20,28,46,.12); }
.rank-badge-3 { background: linear-gradient(135deg, #f8dcc2, #d58f55); color: #4d2606; box-shadow: 0 3px 10px rgba(180,100,40,.2); }
.leaderboard-player-link:hover { color: var(--gold-ink); }

.blf-btn { background: var(--tint-1); border-color: var(--line); color: var(--ink-3); border-radius: 999px; }
.blf-btn:hover { background: var(--tint-2); }
.blf-btn.blf-active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }

/* Titlar – tonade kort med mörk text i samma ton (klickbara → trofé-modal) */
.title-chip {
    border-radius: var(--r-md);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.title-chip[onclick]:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.title-chip-sniper      { background: var(--amber-soft);  color: var(--amber-ink);  border: 1px solid #f6d7a4; }
.title-chip-sniper .title-chip-header { color: #b8740a; }
.title-chip-nostradamus { background: var(--violet-soft); color: var(--violet-ink); border: 1px solid #dcd1fc; }
.title-chip-nostradamus .title-chip-header { color: #7c5ce0; }
.title-chip-unicorn     { background: var(--pink-soft);   color: var(--pink-ink);   border: 1px solid #f6c8df; }
.title-chip-unicorn .title-chip-header { color: #cc4a8b; }
.title-chip-detail { opacity: .8; }

/* ── Regler & FAQ (inne i appen – landningens FAQ-ark förblir mörkt) ─── */
#viewApp .faq-item { border-bottom-color: var(--line); }
#viewApp .faq-q { color: var(--ink); }
#viewApp .faq-q:hover { color: var(--gold-ink); }
#viewApp .faq-arrow { color: var(--ink-4); }
#viewApp .faq-a { color: var(--ink-3); }
#viewApp code { background: var(--tint-2); padding: 1px 5px; border-radius: 5px; font-size: .95em; color: var(--ink-2); }

/* ── Admin ──────────────────────────────────────────────────────────────── */
.admin-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: 12px;
}
.admin-section-header {
    background: var(--surface);
    color: var(--ink);
    padding: 14px 16px;
    font-weight: 700;
    font-size: .92em;
    gap: 8px;
    justify-content: flex-start;
    transition: background .15s;
}
.admin-section-header .admin-toggle-icon { margin-left: auto; }
.admin-section-header:hover { background: var(--tint-1); }
.admin-toggle-icon { color: var(--ink-4); font-size: .72em; }
.admin-section-body.open { border-top: 1px solid var(--line); }
.admin-field label { color: var(--ink-3); }
.admin-field input, .admin-field select, .admin-field textarea {
    background: var(--field) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--ink) !important;
    border-radius: 10px !important;
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(240,180,41,.18);
    outline: none;
}
.btn-admin { border-radius: 10px; }
.btn-admin-primary { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1a1405; box-shadow: 0 3px 10px rgba(240,180,41,.25); }
.btn-admin-primary:hover { background: linear-gradient(135deg, #fbd468, var(--gold-2)); }
.btn-admin-secondary { background: var(--tint-2); color: var(--ink); }
.btn-admin-secondary:hover { background: var(--line); }
.btn-admin-danger { background: var(--red-soft); color: var(--red-ink); }
.btn-admin-danger:hover { background: #fbdcda; }
.btn-admin-green { background: var(--green-soft); color: var(--green-ink); }
.btn-admin-green:hover { background: #d3f0e0; }
.btn-fetch-now { color: #1a1405; box-shadow: 0 4px 12px rgba(240,180,41,.24); border-radius: 10px; }
.player-item { background: var(--tint-1); border-color: var(--line); border-radius: 12px; }
.player-item-name { color: var(--ink); }
.deadline-row { border-bottom-color: var(--line); }
.deadline-label { color: var(--ink); }
.deadline-current, .deadline-auto-hint { color: var(--ink-3); }
.deadline-auto-btn { color: var(--gold-ink); background: var(--gold-soft); border-color: var(--gold-line); }
.deadline-status-badge.open   { background: var(--green-soft); color: var(--green-ink); border-color: #c3e9d4; }
.deadline-status-badge.locked { background: var(--red-soft);   color: var(--red-ink);   border-color: #f6c3c0; }
.deadline-status-badge.unset  { background: var(--tint-2);     color: var(--ink-3);     border-color: var(--line); }
.activity-log-box { background: var(--tint-1); border-color: var(--line); color: var(--ink-2); }
.admin-share-box { background: var(--gold-soft); border-color: var(--gold-line); border-radius: var(--r-md); }
.admin-share-code { color: var(--gold-ink); }
.admin-share-url, .fetch-last-status { color: var(--ink-3); }
#viewApp input[type="date"], #viewApp input[type="datetime-local"],
.result-modal input[type="date"], .result-modal input[type="datetime-local"] { color-scheme: light; }
#viewApp .field-hint { color: var(--ink-3); }
#viewApp .radio-label, #viewApp .check-label { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
#viewApp .radio-label:hover, #viewApp .check-label:hover { background: var(--tint-1); border-color: var(--line-2); }
#viewApp .radio-label:has(input:checked), #viewApp .check-label:has(input:checked) { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
#viewApp .radio-title { color: var(--ink); }
#viewApp .radio-label:has(input:checked) .radio-title { color: var(--gold-ink); }
#viewApp .radio-desc, #viewApp .radio-label:has(input:checked) .radio-desc { color: var(--ink-3); }
#viewApp .radio-label input[type="radio"], #viewApp .check-label input[type="checkbox"] { accent-color: var(--gold-deep); }

/* ── Modaler (resultat, trofé, deadline, radera) ─────────────────────── */
.result-modal-overlay { background: rgba(15,22,38,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.result-modal, .trophy-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
}
.result-modal-title { color: var(--ink); font-size: 1.1em; }
.result-modal-match { color: var(--ink-3); border-bottom-color: var(--line); }
.result-modal-team { color: var(--ink-2); }
.result-modal-input {
    background: var(--field);
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    color: var(--ink);
}
.result-modal-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.2); }
.result-modal-special { color: var(--amber-ink); }

/* ── Spelarvyn (bottenark) ──────────────────────────────────────────────── */
.ps-overlay { background: rgba(15,22,38,.45); }
.ps-sheet {
    background: var(--surface);
    border-top: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -14px 44px rgba(20,28,46,.25);
}
.ps-sheet .faq-sheet-handle { background: var(--line-2); }

/* ── Tipsrutorna (coach marks, omgjorda v1.3.17) ──────────────────────────
   Visas en gång per enhet: "Byt liga här" (efter inloggning, om man har flera
   ligor) och "Tryck på ett namn" (första gången man öppnar Tabell).
   Det man ska trycka på ringas in och får en guldring som pulserar utåt, som en
   fingertryckning. Rutan har ikon i guldtonad bricka, vänsterställd text och
   knappen till höger. Färgerna är variabler → följer med i mörkt läge. */
.lcm-spotlight { border: 2px solid var(--gold); box-shadow: 0 0 0 9999px rgba(10,14,24,.58); }
.lcm-spotlight::after {
    content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    animation: lcmTap 1.7s cubic-bezier(.22,1,.36,1) .5s infinite;
}
@keyframes lcmTap {
    from { box-shadow: 0 0 0 0 rgba(240,180,41,.7); }
    to   { box-shadow: 0 0 0 16px rgba(240,180,41,0); }
}
.lcm-tooltip {
    padding: 16px 16px 14px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
}
.lcm-arrow { border-bottom-color: var(--line); }
.lcm-arrow::after { border-bottom-color: var(--surface); }
.lcm-head { display: flex; align-items: flex-start; gap: 12px; }
.lcm-icon {
    width: 36px; height: 36px; flex-shrink: 0; margin: 0; display: grid; place-items: center;
    border-radius: 11px; background: var(--gold-soft); color: var(--gold-ink); font-size: 1em;
}
.lcm-icon .ic { width: 18px; height: 18px; }
.lcm-title { margin: 1px 0 3px; color: var(--ink); }
.lcm-body { margin: 0; font-size: .86em; line-height: 1.5; color: var(--ink-2); }
.lcm-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.lcm-btn { padding: 8px 20px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1405; }
@media (prefers-reduced-motion: reduce) { .lcm-spotlight::after { animation: none; } }

/* ── Mobil: lagnamn under loggan så namnen får plats ──────────────────────
   Med logga bredvid namnet blev det bara "Sunde…" kvar på en smal telefon.
   Loggan ovanför och namnet centrerat ger hela kolumnbredden åt namnet. */
@media (max-width: 480px) {
    .pred-team-home, .pred-team-away {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 5px;
    }
    .pred-team-crest-home, .pred-team-crest-away { order: -1; margin: 0; }
    .pred-team-name { font-size: .88em; text-align: center; }
}

/* ── Deadline-chip som rutnät: status överst, datum under, nedräkning till höger ──
   Tidigare låg allt på en rad och bröts ojämnt på mobil. */
.deadline-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 9px;
    row-gap: 1px;
    align-items: center;
}
.deadline-chip > .deadline-dot { grid-column: 1; grid-row: 1 / span 2; }
.deadline-chip > span:nth-child(2) { grid-column: 2; grid-row: 1; }
.deadline-chip > .deadline-chip-sub { grid-column: 2; grid-row: 2; }
.deadline-chip > .deadline-countdown { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; }

/* ── Inloggning / hub / skapa liga (mörka vyerna) – putsning ───────────────
   Samma mörka "Matchnight"-känsla, men mjukare kort och bättre kontrast på
   den svagaste texten (flera gråtoner låg nära bakgrunden och var svåra att läsa). */
.card {
    background: linear-gradient(180deg, #141a26 0%, #10141d 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.field input, .field select, .check-label, .radio-label { border-radius: 12px; }
.field input::placeholder { color: #465267; }
.btn-gold {
    background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(240,180,41,.18);
}
.btn-gold:hover:not(:disabled) { background: linear-gradient(135deg, #fbd468 0%, var(--gold-2) 100%); }
.btn-ghost, .btn-green { border-radius: 12px; }
.btn-google { border-radius: 12px; }
.logo-sub { color: #6b7a90; }
.radio-desc { color: #7d8aa0; }
.or-divider, .google-divider { color: #5d6b82; }
.not-found-box p, .loading-box { color: #8896aa; }
.hub-user-chip { border-radius: 14px; }

/* ── Inga mörka småbrickor (2026-09-24, efter feedback) ────────────────────
   Små marinblå rutor (resultat, aktiv flik, facit) såg ut som fel snarare än
   avsiktliga på den ljusa ytan. De är nu ljusa och tonade i guld i stället.
   Aktiv flik = vit "platta" som lyfts ur en ljusgrå skena (segmenterad kontroll). */
.match-score-inline,
.pred-result-actual-score,
.ps-facit-score {
    background: var(--gold-soft);
    color: var(--gold-ink);
    border: 1px solid var(--gold-line);
    box-shadow: none;
}
.app-tabs { background: var(--tint-2); border-color: transparent; box-shadow: inset 0 1px 2px rgba(20,28,46,.05); }
.app-tab.active, .app-tab.active:hover {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 3px 10px rgba(20,28,46,.08);
}
.app-tab.active .app-tab-icon { stroke: var(--gold-deep); }
@media (max-width: 720px) {
    #viewApp .app-tab.active .app-tab-icon,
    #viewApp .app-tabs:has(.app-tab-secondary.active) .app-tab-more .app-tab-icon {
        background: var(--gold-soft);
        stroke: var(--gold-ink);
    }
}

/* ── Tippa-räknaren ljus (2026-09-24, efter feedback) ──────────────────────
   Var appens enda mörka kort. Nu ett vitt kort med ett svagt guldsken i
   hörnet – stora guldsiffror bär fortfarande blicken. */
.tipp-counter-wrap {
    background:
        radial-gradient(320px 150px at 0% 0%, rgba(240,180,41,.16), transparent 70%),
        var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
}
.tipp-counter-num { color: var(--gold-deep); text-shadow: none; }
.tipp-counter-slash { color: var(--ink-4); }
.tipp-counter-total { color: var(--ink-2); }
.tipp-counter-label { color: var(--ink-3); }
.tipp-counter-empty { font-size: .9em; font-weight: 600; color: var(--ink-3); }
.tipp-counter-divider { background: var(--line); }
.next-deadline-title { color: var(--green-ink); }
.next-deadline-dot-sm { background: #12b76a; }
.next-deadline-time { color: var(--ink); }
.next-deadline-sub-sm { color: var(--ink-3); }

/* ── Tabellens topp-3-rader: jämna färger (2026-09-24, efter feedback) ─────
   Rad 1 hade en toning per cell (varje kolumn började om) och blev grå-blå
   vid hovring. Nu en jämn färg per rad, och hovring gör bara samma ton
   en aning djupare i stället för att byta färg. */
.lb-rank-1 td { background: #fff7e3; border-bottom-color: var(--gold-line); }
.lb-rank-2 td { background: #f6f8fb; }
.lb-rank-3 td { background: #fdf5ee; }
.lb-rank-1:hover td { background: #fff0cc; }
.lb-rank-2:hover td { background: #eef2f7; }
.lb-rank-3:hover td { background: #fbece0; }

/* ── Troféikoner: sikte (Sniper), kristallkula (Nostradamus), diamant (Unicorn) ──
   Ersätter 🎯🔮🦄. Egen färg i resultatlistor/spelarvyn; i titelkort och
   tabellhuvud följer de omgivande textfärg (currentColor). */
.ic-sniper, .ic-nostradamus, .ic-unicorn { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.sniper-pulse .ic, .ps-badge .ic-sniper           { color: #b8740a; }
.nostradamus-pulse .ic, .ps-badge .ic-nostradamus { color: var(--violet-ink); }
.unicorn-pulse .ic, .ps-badge .ic-unicorn         { color: var(--pink-ink); }
/* Mjukare puls – en lätt andning i stället för att blåsa upp 40 % */
@keyframes trophy-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.sniper-pulse, .nostradamus-pulse, .unicorn-pulse, .ps-badge { animation: trophy-breathe 2s ease-in-out infinite; }
.ps-badge .ic { width: 1.25em; height: 1.25em; }
.title-chip-header { display: flex; align-items: center; gap: 6px; }
.title-chip-header .ic { width: 1.35em; height: 1.35em; }
.leaderboard-table th .ic { width: 1.5em; height: 1.5em; vertical-align: -.35em; }
/* Landningens FAQ-ark är mörkt – ljusare toner där */
.faq-sheet-title-icon .ic-sniper      { color: #fbbf24; }
.faq-sheet-title-icon .ic-nostradamus { color: #a78bfa; }
.faq-sheet-title-icon .ic-unicorn     { color: #f472b6; }
@media (prefers-reduced-motion: reduce) {
    .sniper-pulse, .nostradamus-pulse, .unicorn-pulse, .ps-badge { animation: none; }
}

/* ── Om-fliken: varumärkeskortet ────────────────────────────────────────────
   Guldsken ovanifrån + en svag mittcirkel som på en fotbollsplan i bakgrunden.
   "COPA" i guldtoning (background-clip: text) i stället för platt mörkguld. */
.om-brand {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 30px 18px;
    background:
        radial-gradient(420px 200px at 50% -40px, rgba(240,180,41,.22), transparent 70%),
        var(--surface);
}
.om-brand::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 170px; height: 170px;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(212,147,10,.10);
    border-radius: 50%;
    pointer-events: none;
}
.om-brand > * { position: relative; z-index: 1; }
.om-brand-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.4em;
    line-height: .95;
    letter-spacing: .05em;
    color: var(--ink);
}
.om-brand-title span {
    background: linear-gradient(180deg, #f7c64a 0%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Synk-pillret i Resultat: luft runt uppdatera-knappen ───────────────────
   Knappen låg klämd mot pillrets högerkant. Nu har pillret lite inre marginal
   och knappen är en rund, centrerad platta med luft åt båda håll. */
.scraper-status-pill { align-items: center; padding: 3px 4px 3px 0; }
.scraper-refresh-btn { width: 28px; height: 28px; margin: 0 0 0 8px; font-size: 14px; }

/* ── Dela-knappar (visas bara där navigator.share finns → .can-share på <html>) ── */
.share-btn { display: none !important; }
.can-share .share-btn { display: inline-flex !important; align-items: center; justify-content: center; }
.can-share .btn-gold.share-btn { display: block !important; }
/* När Dela finns blir "Kopiera länk" en sekundär knapp, så det inte blir två guldknappar */
.can-share #copyUrlBtn { background: transparent; color: #c9d4e3; border: 1px solid #2a3347; box-shadow: none; }
.can-share #adminCopyUrlBtn { background: var(--tint-2); color: var(--ink); box-shadow: none; }

/* ── Tippa: påminnelse-raden ─────────────────────────────────────────────── */
.tipp-reminder {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    padding: 11px 14px;
    background: var(--gold-soft);
    border: 1px solid var(--gold-line);
    border-radius: var(--r-md);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-size: .86em;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.tipp-reminder:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.tipp-reminder:active { transform: none; }
.tipp-reminder-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-deep);
    flex-shrink: 0;
    animation: reminder-pulse 2s ease-in-out infinite;
}
@keyframes reminder-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,147,10,.45); }
    50%      { box-shadow: 0 0 0 6px rgba(212,147,10,0); }
}
.tipp-reminder-text { flex: 1; min-width: 0; color: var(--ink-2); }
.tipp-reminder-text strong { color: var(--ink); }
.tipp-reminder-go { flex-shrink: 0; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tipp-reminder-dot { animation: none; } }

/* ── Tabell: placeringspilar ─────────────────────────────────────────────── */
.lb-move {
    margin-left: 6px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.lb-move-up   { color: var(--green-ink); }
.lb-move-down { color: var(--red-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   INLOGGNING (#viewLanding) – 2026-09-30
   Samma stil som startsidan index.html: planlinjer + strålkastare, guldglänsande
   titel, segmenterade flikar med glidande guldplatta. Mobil först.
   Bakgrunden (.login-bg = fotbollsplanen) ligger direkt under <body> och är
   bakgrund för ALLA mörka vyer (laddning, inloggning, hub, skapa liga, gå med
   i liga, liga saknas). Det gamla rutnätet (body::before) är avstängt.
   Inne i appen (#viewApp, helskärm med egen ljus botten) göms planen helt så
   strålkastar-animationen inte snurrar i onödan bakom.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
    animation: kcFade .8s ease both;
}
body::before { display: none; }   /* rutnätet → ersatt av planen */
body:has(#viewApp:not([style*="none"])) .login-bg { display: none; }
.login-bg svg {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000 15%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000 15%, transparent 75%);
}
.login-flood {
    position: absolute; top: -25%; width: 90vmax; height: 90vmax;
    background: radial-gradient(circle, rgba(240,180,41,.14) 0%, transparent 60%);
    animation: loginSweep 9s ease-in-out infinite alternate;
}
.login-flood.l { left: -55vmax; }
.login-flood.r { right: -55vmax; animation-delay: -4.5s; background: radial-gradient(circle, rgba(120,160,255,.09) 0%, transparent 60%); }
@keyframes loginSweep { to { transform: translate(6%, 10%); } }

.login-view { gap: 18px; padding-top: max(2vh, env(safe-area-inset-top)); }
@media (min-width: 721px) { .login-view { padding-top: 6vh; } }

/* Logga + titel */
.login-logo { padding: 8px 0 0; }
.login-logo .logo-title { font-size: clamp(3.3em, 17vw, 4.6em); letter-spacing: .03em; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.login-logo .logo-title span {
    background: linear-gradient(100deg, #c8921a 0%, #f0b429 30%, #fff3c4 50%, #f0b429 70%, #c8921a 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: loginShine 5s linear infinite;
}
@keyframes loginShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.login-tagline { margin-top: 8px; color: #9aa4b8; font-size: .95em; }
.login-comps { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.login-comps img { width: 24px; height: 24px; object-fit: contain; opacity: .75; }

/* Kortet */
.login-card {
    padding: 20px 18px 24px;
    gap: 14px;
    background: linear-gradient(180deg, rgba(20,26,38,.9) 0%, rgba(16,20,29,.94) 100%);
    border: 1px solid rgba(240,180,41,.12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 420px) { .login-card { padding: 24px 24px 28px; } }

/* Segmenterade flikar: guldplattan (.login-tab-glider) glider till aktiv flik */
.login-tabs {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    padding: 4px; margin-bottom: 4px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
}
.login-tab {
    position: relative; z-index: 1;
    min-height: 44px; padding: 10px 8px;
    background: none; border: 0; border-radius: 10px; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .92em; font-weight: 600; color: #8896aa;
    transition: color .25s;
    -webkit-tap-highlight-color: transparent;
}
.login-tab.active { color: #1a1204; }
.login-tab-glider {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 10px;
    background: linear-gradient(180deg, #f7c84a, #f0b429);
    box-shadow: 0 4px 14px rgba(240,180,41,.3);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.login-tabs:has(#landingTabRegister.active) .login-tab-glider { transform: translateX(100%); }

/* Formulär – tonar in när man byter flik (animationen körs om när display går från none) */
.login-form { flex-direction: column; gap: 14px; animation: loginFade .35s cubic-bezier(.22,1,.36,1); }
@keyframes loginFade { from { opacity: 0; transform: translateY(8px); } }
.login-view .field input { font-size: 16px; }   /* 16px = iPhone zoomar inte in vid fokus */
.login-view .btn-gold { padding: 15px; font-size: 1.02em; }
.login-view .btn-google { padding: 13px; }

.login-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.login-link {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .78em; font-weight: 500; color: #f0b429;
}
.login-link:hover { text-decoration: underline; }

.login-forgot {
    flex-direction: column; gap: 10px; padding: 14px;
    background: rgba(240,180,41,.06); border: 1px solid rgba(240,180,41,.18); border-radius: 12px;
    animation: loginFade .3s cubic-bezier(.22,1,.36,1);
}
.login-forgot-text { font-size: .84em; color: #b0bac9; }
.login-note { font-size: .8em; color: #7d8aa0; text-align: center; margin-top: -4px; }

/* Underhållsskärmen ("Planen vattnas") – ersätter formuläret i inloggningskortet när
   inloggningen är pausad (applyMaintenanceToLanding() i auth.js). Scenen är en liten SVG:
   en tom plan (mittcirkel + mittpunkt) som vattnas av två spridare. Vattnet är streckade
   bågar vars streck "rinner" (stroke-dashoffset) – står still vid "minska rörelse".
   Samma block används, med annan rubrik, när bara registreringen är pausad. */
.login-maint { flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 12px; text-align: center; animation: loginFade .35s cubic-bezier(.22,1,.36,1); }
.login-maint-scene { width: 300px; max-width: 100%; height: auto; margin: 10px 0 8px; overflow: visible; }
.login-maint-scene .mt-water {
    fill: none; stroke: #a9d4ff; stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 1.5 6.5; opacity: .9;
    animation: maintWater .75s linear infinite;
}
.login-maint-scene .mt-water.far { opacity: .5; animation-duration: .95s; }
@keyframes maintWater { to { stroke-dashoffset: -16; } }
.login-maint-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.1em; letter-spacing: .05em; line-height: 1; color: #e8edf5; }
.login-maint-msg { max-width: 290px; font-size: .9em; color: #9aa4b8; line-height: 1.5; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .login-maint, .login-maint-scene .mt-water { animation: none; } }

/* Länkar under kortet */
.login-footer-links { display: flex; justify-content: center; gap: 22px; }
.login-footer-links button,
.login-footer-links a {
    background: none; border: 0; padding: 10px 4px; cursor: pointer; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: .85em; color: #8896aa;
    transition: color .2s;
}
.login-footer-links button:hover,
.login-footer-links a:hover { color: #f0b429; }
/* Installerad app: startsidan skickar ändå direkt tillbaka hit, så länken göms */
@media (display-mode: standalone) { .login-home-link { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .login-flood, .login-logo .logo-title span, .login-form, .login-forgot { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HUB (#viewHub) – 2026-09-30. Samma stil som inloggningen.
   Ligorna/inbjudningarna byggs av renderHub() i auth.js med klasserna nedan.
   ═══════════════════════════════════════════════════════════════════════════ */
.hub-view { gap: 14px; padding-top: max(1vh, env(safe-area-inset-top)); }
@media (min-width: 721px) { .hub-view { padding-top: 4vh; } }
.hub-logo { padding-top: 4px; }
.hub-logo .logo-title { font-size: clamp(2.8em, 14vw, 3.8em); }
.hub-section { width: 100%; }

.hub-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Användarchip */
.hub-view .hub-user-chip {
    padding: 10px 10px 10px 12px; gap: 10px;
    background: rgba(20,26,38,.8); border: 1px solid rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hub-view .hub-user-avatar { width: 34px; height: 34px; font-size: .9em; background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204; }
.hub-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hub-user-hello { font-size: .68em; color: #6b7a90; letter-spacing: .06em; text-transform: uppercase; }
.hub-view .hub-user-email { color: #e8edf5; font-size: .88em; font-weight: 500; }
.hub-view .hub-user-logout { padding: 8px 12px; border-radius: 10px; font-size: .78em; }

/* Kort */
.hub-card {
    padding: 18px 16px; gap: 12px;
    background: linear-gradient(180deg, rgba(20,26,38,.9) 0%, rgba(16,20,29,.94) 100%);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 420px) { .hub-card { padding: 20px 20px; } }
.hub-card-head {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.35em; letter-spacing: .05em; color: #e8edf5; line-height: 1;
}
.hub-card-head .hub-ic { color: #f0b429; width: 20px; height: 20px; }
.hub-card-invite { border: 1px solid rgba(240,180,41,.45); box-shadow: 0 0 0 4px rgba(240,180,41,.06), 0 24px 60px rgba(0,0,0,.35); }
.hub-list { display: flex; flex-direction: column; gap: 8px; }

/* En liga i listan */
.hub-league {
    width: 100%; display: flex; align-items: center; gap: 12px;
    min-height: 60px; padding: 12px 12px 12px 16px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
    color: #e8edf5; font-family: 'DM Sans', sans-serif; text-align: left; cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.hub-league:hover { border-color: rgba(240,180,41,.5); background: rgba(240,180,41,.06); }
.hub-league:active { transform: scale(.985); }
.hub-league.is-done { opacity: .6; }
.hub-league-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hub-league-name { font-weight: 600; font-size: 1em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-league-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.hub-league-code { font-family: 'JetBrains Mono', monospace; font-size: .78em; letter-spacing: .14em; color: #f0b429; flex-shrink: 0; }
.hub-league.is-done .hub-league-code { color: #8896aa; }
.hub-league-arrow { color: #5d6b82; font-size: 1.4em; line-height: 1; transition: transform .2s, color .2s; }
.hub-league:hover .hub-league-arrow { color: #f0b429; transform: translateX(3px); }

.hub-chip {
    display: inline-flex; align-items: center;
    font-size: .68em; font-weight: 600; letter-spacing: .03em;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,.07); color: #9aa4b8;
}
.hub-chip-gold  { background: rgba(240,180,41,.14); color: #f0b429; }
.hub-chip-alert { background: #ef4444; color: #fff; animation: badge-pulse 1.6s ease-in-out infinite; }

/* Inbjudan */
.hub-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; background: rgba(240,180,41,.06); border-radius: 12px; }
.hub-invite-text { min-width: 0; }
.hub-invite-name { font-weight: 600; font-size: .95em; color: #e8edf5; }
.hub-invite-code { font-family: 'JetBrains Mono', monospace; font-size: .74em; color: #f0b429; letter-spacing: .14em; }
.hub-invite-btn {
    flex-shrink: 0; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204;
    font-family: 'DM Sans', sans-serif; font-size: .84em; font-weight: 700; white-space: nowrap;
}

/* Ligakod + knapp på samma rad */
.hub-code-row { display: flex; gap: 8px; }
.hub-view .hub-code-input {
    flex: 1; min-width: 0;
    background: rgba(10,12,16,.8); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
    padding: 12px 14px; outline: none;
    font-family: 'Bebas Neue', sans-serif !important; font-size: 1.7em !important; font-weight: 400 !important;
    letter-spacing: .22em !important; text-align: center !important; color: #f0b429 !important;
    transition: border-color .2s, box-shadow .2s;
}
.hub-view .hub-code-input:focus { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,.12); }
.hub-view .hub-code-input::placeholder { color: #3a4558; letter-spacing: .12em; }
.hub-view .hub-code-btn { width: auto; padding: 0 20px; flex-shrink: 0; font-size: 1.02em; }

/* Skapa liga – stor knapp */
.hub-create {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 16px 16px; min-height: 72px;
    background: transparent; border: 1.5px dashed rgba(240,180,41,.45); border-radius: 20px;
    color: #e8edf5; font-family: 'DM Sans', sans-serif; text-align: left; cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.hub-create:hover { background: rgba(240,180,41,.07); border-color: #f0b429; border-style: solid; }
.hub-create:active { transform: scale(.985); }
.hub-create-plus {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204;
    font-size: 1.6em; font-weight: 500; line-height: 1;
    box-shadow: 0 6px 18px rgba(240,180,41,.25);
}
.hub-create-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hub-create-text b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.4em; letter-spacing: .05em; line-height: 1; }
.hub-create-text small { font-size: .8em; color: #8896aa; }
.hub-create-arrow { color: #f0b429; font-size: 1.2em; transition: transform .2s; }
.hub-create:hover .hub-create-arrow { transform: translateX(4px); }


/* ═══════════════════════════════════════════════════════════════════════════
   SUPERADMIN-PANEL (#superAdminOverlay) – 2026-09-30
   Mobil: helskärm med scrollande lista. Dator (≥560px): centrerad panel.
   Innehållet byggs i main.js (handleSuperAdminLogin, renderSaUserList,
   renderSaSystemTab) med klasserna nedan.
   ═══════════════════════════════════════════════════════════════════════════ */
.sa-overlay {
    position: fixed; inset: 0; z-index: 9999;
    align-items: stretch; justify-content: center;
    background: rgba(5,7,11,.82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-family: 'DM Sans', sans-serif;
}
.sa-panel {
    position: relative; width: 100%; height: 100%; height: 100dvh;
    display: flex; flex-direction: column; overflow: hidden;
    background:
        radial-gradient(ellipse 90% 40% at 50% 0%, rgba(240,180,41,.10), transparent 70%),
        linear-gradient(180deg, #121826 0%, #0b0e15 100%);
    color: #e8edf5;
    padding-bottom: env(safe-area-inset-bottom);
    animation: saIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes saIn { from { opacity: 0; transform: translateY(16px); } }
@media (min-width: 560px) {
    .sa-overlay { align-items: center; padding: 24px; }
    .sa-panel {
        max-width: 480px; height: auto; max-height: 88vh;
        border: 1px solid rgba(240,180,41,.14); border-radius: 22px;
        box-shadow: 0 30px 80px rgba(0,0,0,.6);
    }
}

/* Header */
.sa-header {
    display: flex; align-items: center; gap: 10px;
    padding: calc(14px + env(safe-area-inset-top)) 14px 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (min-width: 560px) { .sa-header { padding-top: 14px; } }
.sa-brand { font-family: 'Bebas Neue', sans-serif; font-size: 1.45em; letter-spacing: .05em; line-height: 1; }
.sa-brand span { color: #f0b429; }
.sa-badge {
    font-size: .62em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #f0b429; background: rgba(240,180,41,.12); border: 1px solid rgba(240,180,41,.3);
    padding: 4px 10px; border-radius: 999px;
}
.sa-close {
    margin-left: auto; width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
    color: #9aa4b8; font-size: 1.5em; line-height: 1; cursor: pointer;
}
.sa-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Steg 1 – inloggning */
.sa-step1 { flex-direction: column; gap: 14px; padding: 28px 20px; overflow-y: auto; }
@media (max-width: 559px) { .sa-step1 { margin: auto 0; } }
.sa-hero { text-align: center; margin-bottom: 6px; }
.sa-hero-icon {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204;
    box-shadow: 0 10px 30px rgba(240,180,41,.3);
}
.sa-hero-icon .hub-ic { width: 26px; height: 26px; stroke-width: 2; }
.sa-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.9em; letter-spacing: .04em; line-height: 1; }
.sa-hero-sub { font-size: .85em; color: #8896aa; margin-top: 6px; }
.sa-overlay .field input { font-size: 16px; }
.sa-status { font-size: .84em; color: #f87171; min-height: 18px; }
.sa-link {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    background: none; border: 0; padding: 8px 6px; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .84em; color: #8896aa;
}
.sa-link:hover { color: #f0b429; }
.sa-link .hub-ic { width: 15px; height: 15px; }

/* Steg 2 – panel */
.sa-step2 { flex-direction: column; flex: 1; min-height: 0; }
.sa-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    margin: 12px 14px 0; padding: 4px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
}
.sa-tab {
    min-height: 40px; padding: 8px 4px; border: 0; border-radius: 10px; cursor: pointer;
    background: none; color: #8896aa;
    font-family: 'DM Sans', sans-serif; font-size: .8em; font-weight: 600;
    transition: background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
}
.sa-tab:hover { color: #e8edf5; }
.sa-tab.active { background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204; box-shadow: 0 4px 14px rgba(240,180,41,.25); }

.sa-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 0; }
.sa-stats[style*="block"] { display: grid !important; }   /* JS sätter display:block – vi vill ha rutnät */
.sa-stat { text-align: center; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.sa-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2em; line-height: 1; color: #f0b429; }
.sa-stat-label { font-size: .64em; color: #8896aa; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }

.sa-list { flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
@media (min-width: 560px) { .sa-list { max-height: 52vh; } }
.sa-empty { color: #8896aa; font-size: .9em; text-align: center; padding: 24px 0; }
.sa-section-label { font-size: .7em; font-weight: 700; color: #8896aa; letter-spacing: .12em; text-transform: uppercase; }

/* Kort */
.sa-card {
    display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
    padding: 14px; border-radius: 16px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.sa-card-warn { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.04); }
.sa-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sa-card-title { font-weight: 600; font-size: .98em; line-height: 1.3; color: #e8edf5; }
.sa-card-meta { font-size: .78em; color: #8896aa; line-height: 1.45; }
.sa-card-meta b { color: #c8d0dc; font-weight: 500; }
.sa-code { font-family: 'JetBrains Mono', monospace; font-size: .78em; letter-spacing: .14em; color: #f0b429; background: rgba(240,180,41,.1); padding: 3px 8px; border-radius: 8px; flex-shrink: 0; }
.sa-pill { display: inline-flex; align-items: center; font-size: .9em; font-weight: 600; padding: 1px 8px; margin-right: 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: #c8d0dc; white-space: nowrap; }
.sa-card-head .sa-pill, .sa-flag-summary .sa-pill, .sa-user-league .sa-pill { font-size: .72em; margin-right: 0; flex-shrink: 0; }
.sa-pill-gold { background: rgba(240,180,41,.14); color: #f0b429; }
.sa-pill-warn { background: rgba(251,191,36,.14); color: #fbbf24; }
.sa-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Knappar */
.sa-row-btns { display: flex; gap: 8px; }
.sa-btn {
    flex: 1; min-height: 42px; padding: 9px 14px; border-radius: 11px; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .86em; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; transition: filter .15s, background .15s, transform .1s;
}
.sa-btn:active { transform: scale(.97); }
.sa-btn-gold   { background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204; }
.sa-btn-gold:hover { filter: brightness(1.06); }
.sa-btn-ghost  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #c8d0dc; font-weight: 600; }
.sa-btn-ghost:hover { background: rgba(255,255,255,.09); }
.sa-btn-danger { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.35); color: #f87171; font-weight: 600; }
.sa-btn-danger:hover { background: rgba(248,113,113,.16); }
.sa-btn-red    { background: #ef4444; color: #fff; }
.sa-btn-icon   { flex: 0 0 46px; padding: 0; }
.sa-btn-sm     { flex: 0 0 auto; min-height: 32px; padding: 4px 10px; font-size: .74em; border-radius: 9px; }
.sa-sys .sa-btn { flex: 0 0 auto; min-width: 104px; }

.sa-confirm { flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); }
.sa-confirm-text { font-size: .82em; color: #fca5a5; text-align: center; }

/* Väntande inbjudningar */
.sa-pending { border-radius: 12px; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.22); overflow: hidden; }
.sa-pending-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; background: none; border: 0; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .78em; font-weight: 600; color: #fbbf24; text-align: left;
}
.sa-pending-list { display: none; flex-direction: column; gap: 3px; padding: 0 12px 10px; font-size: .78em; color: #a0aec0; }
.sa-pending.open .sa-pending-list { display: flex; }
.sa-pending.open .sa-chevron { transform: rotate(180deg); }
.sa-chevron { color: #8896aa; font-size: .9em; transition: transform .2s; flex-shrink: 0; }

/* Flaggor */
.sa-flag-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; flex-shrink: 0; }
.sa-flag-row { display: flex; align-items: center; gap: 6px; font-size: .76em; color: #9aa4b8; }
.sa-flag-row .hub-ic { width: 13px; height: 13px; color: #fbbf24; }

/* Spelare */
.sa-user { padding: 0; gap: 0; overflow: hidden; }
.sa-user-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.sa-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(240,180,41,.14); color: #f0b429; font-weight: 700; font-size: .9em; }
.sa-user-main { flex: 1; min-width: 0; }
.sa-user-body { flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.15); }
.sa-email-row { align-items: center; gap: 8px; }
.sa-email-row .sa-card-meta { flex: 1; }
.sa-email-edit { flex-direction: column; gap: 8px; }
.sa-user-leagues { display: flex; flex-direction: column; gap: 6px; }
.sa-user-league { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.sa-ul-name { font-size: .86em; font-weight: 500; color: #e8edf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-ul-name span { color: #7a8899; font-weight: 400; margin-left: 6px; font-size: .9em; }

/* System */
.sa-sys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sa-sys-state { display: flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 600; margin-top: 2px; }
.sa-sys-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sa-sys-state.ok  { color: #4ade80; }
.sa-sys-state.ok i { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
.sa-sys-state.off { color: #f87171; }
.sa-sys-msg { font-size: .78em; color: #8896aa; }

/* Footer + lösenordsbyte */
.sa-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.sa-pw-panel { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25); }
.sa-pw-panel[style*="none"] { display: none; }

/* Underhålls-modalen öppnas ovanpå panelen – samma ljus/mörker-känsla */
#maintenanceModal .maint-box { border-radius: 20px; border: 1px solid rgba(240,180,41,.18); }


/* ═══════════════════════════════════════════════════════════════════════════
   RÖRELSE – mjuka övergångar (2026-09-30)
   Två kurvor används genomgående:
     --ease-out  snabb start, mjuk inbromsning (inglidningar, höjdändringar)
     --spring    lätt "studs" förbi målet (glidande flikplattor, ikoner som poppar)
   Riktningsklasserna (.slide-from-left/right, .tab-in-left/right) sätts av JS
   utifrån vilket håll man byter flik åt. Allt stängs av vid "minska rörelse".
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --ease-out: cubic-bezier(.22,1,.36,1);
    --spring:   cubic-bezier(.34,1.3,.64,1);
}

@keyframes kcRise       { from { opacity: 0; transform: translateY(18px); } }
@keyframes kcFromRight  { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes kcFromLeft   { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes kcPop        { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes kcIconPop    { 0% { transform: scale(.72); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes kcFade       { from { opacity: 0; } }
@keyframes kcFadeOut    { to { opacity: 0; } }
@keyframes kcSheetOut   { to { opacity: 0; transform: translateY(14px) scale(.98); } }

.slide-from-right { animation: kcFromRight .45s var(--ease-out) both; }
.slide-from-left  { animation: kcFromLeft  .45s var(--ease-out) both; }
.pop-in           { animation: kcPop .35s var(--spring) both; }

/* ── App-flikar: innehållet glider in från flikens håll ── */
#viewApp { overflow-x: clip; }   /* ingen sidoscroll medan innehållet glider */
.tab-content-visible { animation: tabFadeIn .42s var(--ease-out) backwards; }
.tab-content-visible.tab-in-right { animation-name: kcFromRight; }
.tab-content-visible.tab-in-left  { animation-name: kcFromLeft; }

/* Dator: vit platta som glider mellan flikarna (placeras av moveTabIndicator() i ui.js) */
.app-tabs { position: relative; }
.app-tab  { position: relative; z-index: 1; }
.app-tab-indicator {
    position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0;
    border-radius: 999px; pointer-events: none; opacity: 0;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 3px 10px rgba(20,28,46,.08);
}
.app-tab-indicator.ready { transition: transform .5s var(--spring), width .5s var(--spring), opacity .2s; }
.app-tabs.has-indicator .app-tab.active,
.app-tabs.has-indicator .app-tab.active:hover { background: transparent; box-shadow: none; }
.app-tab:active { transform: scale(.96); }
.app-tab { transition: color .25s var(--ease-out), background .2s var(--ease-out), transform .2s var(--spring); }

/* Mobil: ingen platta – ikonen i bottenmenyn "poppar" när fliken blir aktiv */
@media (max-width: 720px) {
    #viewApp .app-tab-indicator { display: none; }
    #viewApp .app-tab.active .app-tab-icon { animation: kcIconPop .5s var(--spring); }
    #viewApp .app-tab:active { transform: none; }
    #viewApp .app-tab:active .app-tab-icon { transform: scale(.88); }
    #viewApp .app-tab .app-tab-icon { transition: background .3s var(--ease-out), stroke .3s, transform .2s var(--spring); }
}

/* ── Inloggning + hub: delarna kommer in en i taget ── */
.login-view, .hub-view { animation: none; }
.login-view > *, .hub-view > * { animation: kcRise .6s var(--ease-out) backwards; }
.login-view > :nth-child(2), .hub-view > :nth-child(2) { animation-delay: .07s; }
.login-view > :nth-child(3), .hub-view > :nth-child(3) { animation-delay: .14s; }
.login-view > :nth-child(4), .hub-view > :nth-child(4) { animation-delay: .21s; }
.hub-view > :nth-child(5) { animation-delay: .28s; }
.hub-view > :nth-child(6) { animation-delay: .35s; }
.login-comps img { animation: kcPop .5s var(--spring) backwards; }
.login-comps img:nth-child(1) { animation-delay: .25s; }
.login-comps img:nth-child(2) { animation-delay: .32s; }
.login-comps img:nth-child(3) { animation-delay: .39s; }
.login-comps img:nth-child(4) { animation-delay: .46s; }

/* Flikplattan i inloggningen – lite studs */
.login-tab-glider { transition: transform .5s var(--spring); }
.login-tab { transition: color .3s var(--ease-out), transform .2s var(--spring); }
.login-tab:active { transform: scale(.95); }

/* Knapptryck: mjuk "tryck in" */
.login-view .btn-gold, .hub-view .btn-gold, .sa-overlay .btn-gold,
.btn-google, .hub-invite-btn { transition: transform .2s var(--spring), box-shadow .2s, background .2s, filter .2s; }
.login-view .btn-gold:active:not(:disabled),
.hub-view .btn-gold:active:not(:disabled),
.sa-overlay .btn-gold:active:not(:disabled),
.btn-google:active, .hub-invite-btn:active { transform: scale(.97); }

/* Hub-listor: ligorna glider in en efter en */
.hub-list > * { animation: kcRise .5s var(--ease-out) backwards; }
.hub-list > :nth-child(2) { animation-delay: .05s; }
.hub-list > :nth-child(3) { animation-delay: .10s; }
.hub-list > :nth-child(4) { animation-delay: .15s; }
.hub-list > :nth-child(5) { animation-delay: .20s; }
.hub-list > :nth-child(n+6) { animation-delay: .25s; }
.hub-league { transition: border-color .25s, background .25s, transform .25s var(--spring); }
.hub-league:hover { transform: translateY(-1px); }
.hub-create { transition: background .25s, border-color .25s, transform .25s var(--spring); }
.hub-create:hover { transform: translateY(-1px); }
.hub-create-plus { transition: transform .35s var(--spring); }
.hub-create:hover .hub-create-plus { transform: rotate(90deg) scale(1.05); }

/* ── Superadmin ── */
.sa-overlay { animation: kcFade .3s ease both; }
.sa-panel   { animation: kcPop .45s var(--spring) both; }
@media (max-width: 559px) { .sa-panel { animation: kcRise .45s var(--ease-out) both; } }
.sa-overlay.closing            { animation: kcFadeOut .22s ease forwards; }
.sa-overlay.closing .sa-panel  { animation: kcSheetOut .22s ease forwards; }

.sa-tabs { position: relative; gap: 0; }
.sa-tab  { position: relative; z-index: 1; transition: color .3s var(--ease-out), transform .2s var(--spring); }
.sa-tab:active { transform: scale(.94); }
.sa-tab.active { background: none; box-shadow: none; color: #1a1204; }
.sa-tab-glider {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4);
    border-radius: 10px; pointer-events: none;
    background: linear-gradient(180deg, #f7c84a, #f0b429);
    box-shadow: 0 4px 14px rgba(240,180,41,.25);
    transition: transform .5s var(--spring);
}
.sa-tabs:has(#saTabUsers.active)  .sa-tab-glider { transform: translateX(100%); }
.sa-tabs:has(#saTabFlags.active)  .sa-tab-glider { transform: translateX(200%); }
.sa-tabs:has(#saTabSystem.active) .sa-tab-glider { transform: translateX(300%); }

.sa-list > * { animation: kcRise .45s var(--ease-out) backwards; }
.sa-list > :nth-child(2) { animation-delay: .04s; }
.sa-list > :nth-child(3) { animation-delay: .08s; }
.sa-list > :nth-child(4) { animation-delay: .12s; }
.sa-list > :nth-child(5) { animation-delay: .16s; }
.sa-list > :nth-child(n+6) { animation-delay: .2s; }
.sa-stat { animation: kcPop .5s var(--spring) backwards; }
.sa-stat:nth-child(2) { animation-delay: .06s; }
.sa-stat:nth-child(3) { animation-delay: .12s; }
.sa-btn { transition: filter .15s, background .2s, transform .2s var(--spring); }
.sa-card { transition: border-color .25s, background .25s; }
.sa-user-head .sa-chevron, .sa-pending .sa-chevron { transition: transform .35s var(--spring); }

/* ── Minska rörelse: allt ovan av ── */
@media (prefers-reduced-motion: reduce) {
    .slide-from-right, .slide-from-left, .pop-in,
    .tab-content-visible, .tab-content-visible.tab-in-right, .tab-content-visible.tab-in-left,
    .login-view > *, .hub-view > *, .login-comps img, .hub-list > *,
    .sa-overlay, .sa-panel, .sa-list > *, .sa-stat,
    #viewApp .app-tab.active .app-tab-icon { animation: none !important; }
    .app-tab-indicator.ready, .login-tab-glider, .sa-tab-glider { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SKAPA LIGA (#viewCreate) + LIGAN ÄR SKAPAD (#viewCreated) + HITTADES INTE
   – 2026-09-30. Samma stil som inloggning/hub. Tre steg-kort, logokort för
   tävlingarna, egna radio/kryss-kort. Sektioner som visas/döljs av admin.js
   glider in (kcRise) och steg-2-kortet ändrar höjd mjukt (animateHeight i main.js).
   ═══════════════════════════════════════════════════════════════════════════ */
.create-view { gap: 14px; padding-top: max(1vh, env(safe-area-inset-top)); }
@media (min-width: 721px) { .create-view { padding-top: 4vh; } }
.create-view { animation: none; }
.create-view > * { animation: kcRise .6s var(--ease-out) backwards; }
.create-view > :nth-child(2) { animation-delay: .06s; }
.create-view > :nth-child(3) { animation-delay: .12s; }
.create-view > :nth-child(4) { animation-delay: .18s; }
.create-view > :nth-child(5) { animation-delay: .24s; }
.create-view > :nth-child(n+6) { animation-delay: .3s; }

.create-head { text-align: center; }
.create-head h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.2em; letter-spacing: .04em; color: #e8edf5; line-height: 1; }
.create-head p { color: #8896aa; font-size: .9em; margin-top: 4px; }

.create-card {
    padding: 18px 16px 20px; gap: 16px;
    background: linear-gradient(180deg, rgba(20,26,38,.9) 0%, rgba(16,20,29,.94) 100%);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 420px) { .create-card { padding: 20px 20px 22px; } }
.create-step-head { display: flex; align-items: center; gap: 12px; }
.create-step-head b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.45em; letter-spacing: .05em; color: #e8edf5; line-height: 1; }
.create-step-head small { display: block; font-size: .78em; color: #8896aa; margin-top: 2px; }
.create-step-num {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.25em; line-height: 1;
    box-shadow: 0 4px 14px rgba(240,180,41,.3);
}
.create-view .field input { font-size: 16px; }
.create-label-note { text-transform: none; letter-spacing: 0; color: #5d6b82; font-weight: 400; margin-left: 4px; }

/* Två stora val: Tävlingar / Följ ett lag */
.create-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.create-tile {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 14px 12px; border-radius: 14px; cursor: pointer;
    background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.08);
    transition: border-color .25s, background .25s, transform .25s var(--spring);
    -webkit-tap-highlight-color: transparent;
}
.create-tile input { position: absolute; opacity: 0; pointer-events: none; }
.create-tile .hub-ic { width: 24px; height: 24px; color: #8896aa; margin-bottom: 4px; transition: color .25s, transform .35s var(--spring); }
.create-tile-title { font-weight: 700; font-size: .95em; color: #e8edf5; }
.create-tile-desc { font-size: .75em; color: #7d8aa0; line-height: 1.35; }
.create-tile:hover { border-color: rgba(240,180,41,.35); }
.create-tile:active { transform: scale(.97); }
.create-tile:has(input:checked) { border-color: #f0b429; background: rgba(240,180,41,.09); box-shadow: 0 0 0 4px rgba(240,180,41,.08); }
.create-tile:has(input:checked) .hub-ic { color: #f0b429; transform: scale(1.12); }
.create-tile:has(input:checked) .create-tile-title { color: #f0b429; }
.create-tile:has(input:focus-visible) { outline: 2px solid #f0b429; outline-offset: 2px; }

/* Tävlingar som logokort (2×2) med bock i hörnet */
.create-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.create-comp {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 104px; padding: 14px 8px; border-radius: 14px; cursor: pointer; text-align: center;
    background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.08);
    transition: border-color .25s, background .25s, transform .25s var(--spring);
    -webkit-tap-highlight-color: transparent;
}
.create-comp input { position: absolute; opacity: 0; pointer-events: none; }
.create-comp img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(.6) brightness(.85); transition: filter .3s, transform .35s var(--spring); }
.create-comp span { font-size: .82em; font-weight: 600; color: #9aa4b8; transition: color .25s; }
.create-comp::after {
    content: '✓'; position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .72em; font-weight: 800; color: #1a1204;
    background: linear-gradient(180deg, #f7c84a, #f0b429);
    transform: scale(0); transition: transform .35s var(--spring);
}
.create-comp:hover { border-color: rgba(240,180,41,.35); }
.create-comp:active { transform: scale(.96); }
.create-comp:has(input:checked) { border-color: #f0b429; background: rgba(240,180,41,.09); }
.create-comp:has(input:checked) img { filter: none; transform: scale(1.08); }
.create-comp:has(input:checked) span { color: #f0b429; }
.create-comp:has(input:checked)::after { transform: scale(1); }
.create-comp:has(input:focus-visible) { outline: 2px solid #f0b429; outline-offset: 2px; }

/* Delsektioner som visas/döljs – glider in */
.create-sub, #followTeamField, #followRoundsField, .create-comp-block, .create-phases {
    animation: kcRise .4s var(--ease-out) backwards;
}
#createFollowSection { display: flex; flex-direction: column; gap: 16px; }
#createFollowSection[style*="none"] { display: none; }

/* Fält */
.create-input {
    width: 100%; padding: 12px 14px; border-radius: 12px; outline: none;
    background: #0a0c10; border: 1px solid #1e2535; color: #e8edf5;
    font-family: 'DM Sans', sans-serif; font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.create-input:focus { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,.12); }
select.create-input {
    padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f0b429' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
select.create-input option { background: #1a1f2e; }
.create-num { width: 88px; text-align: center; font-weight: 700; }
input[type="date"].create-input { color-scheme: dark; }
.create-select-wrap { position: relative; display: flex; align-items: center; }
.create-select-logo { position: absolute; left: 10px; width: 24px; height: 24px; object-fit: contain; pointer-events: none; z-index: 1; animation: kcPop .35s var(--spring) both; }
.create-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Segmentväljare: Antal omgångar / Tidsperiod */
.create-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.create-segment label { position: relative; cursor: pointer; }
.create-segment input { position: absolute; opacity: 0; pointer-events: none; }
.create-segment span {
    display: block; text-align: center; padding: 9px 6px; border-radius: 9px;
    font-size: .85em; font-weight: 600; color: #8896aa;
    transition: background .3s var(--ease-out), color .3s, box-shadow .3s;
}
.create-segment input:checked + span { background: linear-gradient(180deg, #f7c84a, #f0b429); color: #1a1204; box-shadow: 0 4px 12px rgba(240,180,41,.25); }
.create-segment input:focus-visible + span { outline: 2px solid #f0b429; outline-offset: 2px; }

.create-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.create-dates label { display: flex; flex-direction: column; gap: 4px; }
.create-dates label > span { font-size: .72em; color: #8896aa; text-transform: uppercase; letter-spacing: .08em; }
#createDateRangePickerMode { flex-direction: column; gap: 8px; }

/* Omgångar/faser per tävling */
.create-rounds { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.create-comp-block { flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.create-sublabel { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9em; color: #e8edf5; }
.create-sublabel img { width: 22px; height: 22px; object-fit: contain; }
.create-phases { flex-direction: column; gap: 8px; }
.create-phase-label { font-size: .7em; color: #8896aa; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.create-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#wcPhaseDetails.create-chips { flex-direction: row; }
.create-chips .check-label { padding: 7px 11px; font-size: .8em; gap: 6px; border-radius: 999px; }
.create-chips .check-label input { width: 14px; height: 14px; }
.create-check-sm { padding: 9px 12px; font-size: .85em; }

/* Radio-listor (registrering/spelstopp): egen prick i stället för systemets */
.create-view .radio-label { position: relative; padding: 13px 14px 13px 44px; border-radius: 14px; transition: border-color .25s, background .25s, transform .25s var(--spring); }
.create-view .radio-label:active { transform: scale(.985); }
.create-view .radio-label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.create-view .radio-label::before {
    content: ''; position: absolute; left: 15px; top: 15px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #3a4558; transition: border-color .25s, border-width .3s var(--spring);
}
.create-view .radio-label:has(input:checked)::before { border-color: #f0b429; border-width: 6px; }
.create-view .radio-label:has(input:focus-visible) { outline: 2px solid #f0b429; outline-offset: 2px; }
.create-view .radio-desc { color: #6b7a90; }

/* Knappar längst ner */
.create-status { width: 100%; }
.create-status:empty { display: none; }
.create-submit { font-size: 1.08em; padding: 16px; box-shadow: 0 10px 30px -8px rgba(240,180,41,.55); }
.create-cancel {
    background: none; border: 0; cursor: pointer; padding: 8px 12px;
    font-family: 'DM Sans', sans-serif; font-size: .88em; color: #8896aa; transition: color .2s;
}
.create-cancel:hover { color: #f0b429; }

/* ── Ligan är skapad ── */
.created-card { position: relative; overflow: hidden; text-align: center; }
.created-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.created-check { width: 68px; height: 68px; margin-bottom: 8px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.created-check circle { stroke: #4ade80; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; animation: kcDraw .7s var(--ease-out) .15s forwards; fill: rgba(74,222,128,.08); }
.created-check path   { stroke: #4ade80; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: kcDraw .45s var(--ease-out) .7s forwards; }
@keyframes kcDraw { to { stroke-dashoffset: 0; } }
.created-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.1em; letter-spacing: .05em; color: #e8edf5; line-height: 1; animation: kcPop .5s var(--spring) .5s backwards; }
.created-name { color: #8896aa; font-size: .92em; }
.created-view .share-box { background: rgba(240,180,41,.07); border: 1px solid rgba(240,180,41,.25); border-radius: 16px; animation: kcPop .5s var(--spring) .8s backwards; }
.created-view .share-code { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 3.4em; letter-spacing: .18em; margin: 0 0 10px; text-shadow: 0 0 30px rgba(240,180,41,.35); }
.created-view .share-url { border-radius: 10px; }
.created-actions { display: flex; flex-direction: column; gap: 8px; }
.created-go { border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px; }

/* Konfetti: 18 bitar skjuts ut från mitten och faller (lägen i style-attributen) */
.created-confetti { position: absolute; left: 50%; top: 58px; width: 0; height: 0; pointer-events: none; z-index: 2; }
.created-confetti i {
    position: absolute; width: 7px; height: 11px; border-radius: 2px; background: var(--c);
    opacity: 0; animation: kcConfetti 1.5s cubic-bezier(.2,.7,.3,1) calc(.55s + var(--d)) forwards;
}
.created-confetti i:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
@keyframes kcConfetti {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
    60%  { opacity: 1; transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .6)); }
    100% { opacity: 0; transform: translate(calc(var(--x) * 1.15), calc(var(--y) + 170px)) rotate(var(--r)); }
}

/* Hittades inte – "skottet gick utanför": ett mål, en streckad bollbana och bollen
   bredvid stolpen (SVG i app.html). Rubriken i samma typsnitt som loggan. */
.create-view .not-found-box p { color: #8896aa; }
.create-view .not-found-box h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.1em; letter-spacing: .05em; line-height: 1; }
.nf-scene { display: block; width: 210px; max-width: 100%; height: auto; margin: 0 auto 16px; --ball: #f4f6fa; --patch: #151924; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .create-view > *, .create-sub, #followTeamField, #followRoundsField, .create-comp-block, .create-phases,
    .created-title, .created-view .share-box, .create-select-logo { animation: none !important; }
    .created-check circle, .created-check path { animation: none !important; stroke-dashoffset: 0; }
    .created-confetti { display: none; }
}

/* ── Levande ligabricka (Skapa liga) ── följer med överst när man scrollar */
.create-preview {
    position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 5;
    width: 100%; overflow: hidden;
    padding: 14px 16px; border-radius: 18px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(240,180,41,.22), transparent 55%),
        linear-gradient(135deg, #1c2640 0%, #10141d 70%);
    border: 1px solid rgba(240,180,41,.35);
    box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
/* mittcirkel från planen som vattenstämpel */
.create-preview::before {
    content: ''; position: absolute; right: -38px; top: 50%; width: 120px; height: 120px; margin-top: -60px;
    border: 1.5px solid rgba(240,180,41,.18); border-radius: 50%; pointer-events: none;
}
/* blänk som sveper över vid ändring */
.create-preview::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.create-preview.cp-flash::after { animation: cpShine .7s var(--ease-out); }
.create-preview.cp-flash { animation: cpBump .45s var(--spring); }
@keyframes cpShine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes cpBump  { 40% { transform: scale(1.02); } }

.cp-top { display: flex; justify-content: space-between; align-items: center; }
.cp-label { font-size: .64em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #f0b429; }
.cp-code { font-family: 'JetBrains Mono', monospace; font-size: .74em; letter-spacing: .14em; color: #8896aa; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 6px; min-width: 76px; text-align: center; }
.cp-name {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.9em; letter-spacing: .04em; line-height: 1.05;
    color: #e8edf5; margin: 6px 0 8px; position: relative;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-name.empty { color: #3a4558; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; position: relative; }
.cp-logos { display: flex; gap: 6px; }
.cp-logos img { width: 28px; height: 28px; object-fit: contain; animation: cpLogoIn .45s var(--spring) both; }
.cp-logos img.out { animation: cpLogoOut .25s ease forwards; }
@keyframes cpLogoIn  { from { opacity: 0; transform: translateY(8px) scale(.4) rotate(-20deg); } }
@keyframes cpLogoOut { to   { opacity: 0; transform: scale(.4); } }
.cp-mode { font-size: .76em; font-weight: 600; color: #9aa4b8; background: rgba(255,255,255,.06); padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

@media (prefers-reduced-motion: reduce) {
    .create-preview.cp-flash, .create-preview.cp-flash::after, .cp-logos img { animation: none !important; }
}

/* Kort/val som ligger i .field ska inte ärva fältrubrikernas VERSALER */
.create-view .field label.create-tile,
.create-view .field label.create-comp,
.create-view .field label.radio-label,
.create-view .field label.check-label,
.create-view .create-segment label,
.create-view .create-dates label {
    text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: inherit;
}
.create-view .field label.check-label { font-size: .9rem; color: #c9d4e3; }
.create-view .create-chips label.check-label { font-size: .8rem; }
.create-view .radio-label::before { box-sizing: border-box; }
.create-view .field .create-num { width: 88px; flex: 0 0 auto; padding: 10px 8px; }
.created-card { overflow: visible; }   /* konfettin får flyga utanför kortet */

/* ── Hub: tävlingsmärken på varje liga ─────────────────────────────────────
   En 44×44-"klunga" till vänster så att liganamnen linjerar oavsett antal.
   1 = stort märke, 2 = diagonalt överlappande, 3 = triangel, 4 = 2×2.
   Vid hover fläktar märkena ut en aning (--i = märkets ordning, sätts i auth.js). */
.hub-league-logos { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.hub-league-logos img {
    position: absolute; object-fit: contain; border-radius: 50%;
    background: #0f131c; padding: 2px; box-shadow: 0 0 0 2px #171d2a, 0 3px 8px rgba(0,0,0,.35);
    transition: transform .4s var(--spring);
    animation: kcPop .45s var(--spring) backwards; animation-delay: calc(.15s + var(--i) * .07s);
}
.hub-league-logos.n1 img { width: 40px; height: 40px; left: 2px; top: 2px; }
.hub-league-logos.n2 img { width: 29px; height: 29px; }
.hub-league-logos.n2 img:nth-child(1) { left: 0; top: 0; }
.hub-league-logos.n2 img:nth-child(2) { right: 0; bottom: 0; }
.hub-league-logos.n3 img { width: 23px; height: 23px; }
.hub-league-logos.n3 img:nth-child(1) { left: 10.5px; top: 0; }
.hub-league-logos.n3 img:nth-child(2) { left: 0; bottom: 1px; }
.hub-league-logos.n3 img:nth-child(3) { right: 0; bottom: 1px; }
.hub-league-logos.n4 img { width: 21px; height: 21px; }
.hub-league-logos.n4 img:nth-child(1) { left: 0; top: 0; }
.hub-league-logos.n4 img:nth-child(2) { right: 0; top: 0; }
.hub-league-logos.n4 img:nth-child(3) { left: 0; bottom: 0; }
.hub-league-logos.n4 img:nth-child(4) { right: 0; bottom: 0; }
/* Hover: fläkta ut */
.hub-league:hover .hub-league-logos.n1 img { transform: scale(1.08) rotate(-6deg); }
.hub-league:hover .hub-league-logos.n2 img:nth-child(1),
.hub-league:hover .hub-league-logos.n4 img:nth-child(1) { transform: translate(-3px, -3px); }
.hub-league:hover .hub-league-logos.n2 img:nth-child(2),
.hub-league:hover .hub-league-logos.n4 img:nth-child(4) { transform: translate(3px, 3px); }
.hub-league:hover .hub-league-logos.n4 img:nth-child(2) { transform: translate(3px, -3px); }
.hub-league:hover .hub-league-logos.n4 img:nth-child(3) { transform: translate(-3px, 3px); }
.hub-league:hover .hub-league-logos.n3 img:nth-child(1) { transform: translateY(-3px); }
.hub-league:hover .hub-league-logos.n3 img:nth-child(2) { transform: translate(-3px, 2px); }
.hub-league:hover .hub-league-logos.n3 img:nth-child(3) { transform: translate(3px, 2px); }
.hub-league.is-done .hub-league-logos img { filter: grayscale(.8); }
.hub-league { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { .hub-league-logos img { animation: none; transition: none; } }

/* Ligakortets egen färg (tävlingarnas färger, --lc1/--lc2 sätts i auth.js):
   tunn färgad kant till vänster + mjukt sken bakom märkena. */
.hub-league { position: relative; overflow: hidden; isolation: isolate; }
.hub-league::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--lc1, #f0b429), var(--lc2, #f0b429));
}
.hub-league::after {
    content: ''; position: absolute; left: -30px; top: 50%; width: 130px; height: 130px; margin-top: -65px; z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--lc1, #f0b429) 22%, transparent), transparent 65%);
    opacity: .8; transition: opacity .3s, transform .5s var(--spring);
}
.hub-league:hover::after { opacity: 1; transform: scale(1.25); }
.hub-league.is-done::before, .hub-league.is-done::after { filter: grayscale(1); opacity: .4; }

/* Vattenstämpel: tävlingens logga (eller klubbmärket i följ-ett-lag-ligor) stor, svag och
   lätt vriden bakom kortets högra del. Kortet har overflow: hidden, så bara ett utsnitt syns.
   Tonas ut i kanterna med en mask så att den smälter in istället för att kapas tvärt. */
.hub-league-wm {
    position: absolute; right: 18px; top: 50%; width: 200px; height: 200px; z-index: -1;
    object-fit: contain; pointer-events: none; user-select: none;
    opacity: .1; transform: translateY(-50%) rotate(var(--wrot, -14deg));
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
    transition: opacity .3s, transform .6s var(--ease-out);
}
.hub-league:hover .hub-league-wm { opacity: .16; transform: translateY(-50%) rotate(calc(var(--wrot, -14deg) + 4deg)) scale(1.06); }
/* Flera tävlingar: något mindre stämplar i rad från höger (--wi/--wgap/--wrot sätts i auth.js) */
.hub-league-wm.wm-multi { width: 160px; height: 160px; right: calc(-14px + var(--wi, 0) * var(--wgap, 120px)); }
.hub-league.is-done .hub-league-wm { filter: grayscale(1); opacity: .06; }
@media (prefers-reduced-motion: reduce) { .hub-league-wm { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   APPEN – MATCHDAGS-HERO, FIRANDE, LEVANDE TABELL (2026-09-30)
   Ljust tema (samma tokens som resten av appen). Planens mittcirkel återkommer
   som vattenstämpel i heron.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Matchdags-hero (predictions.js → buildMatchdayHero) ── */
.md-hero {
    position: relative; overflow: hidden; isolation: isolate;
    margin-bottom: 12px; padding: 14px 16px 16px;
    background: linear-gradient(180deg, #fffaf0 0%, var(--surface) 60%);
    border: 1px solid var(--gold-line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    animation: kcRise .5s var(--ease-out) backwards;
}
.md-hero::before {   /* mittcirkel + mittlinje från planen */
    content: ''; position: absolute; left: 50%; top: 58%; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: -1;
    border: 1.5px solid rgba(240,180,41,.22); border-radius: 50%;
}
.md-hero::after {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(240,180,41,.18) 30%, rgba(240,180,41,.18) 70%, transparent);
}
.md-top { display: flex; align-items: center; gap: 8px; font-size: .74em; }
.md-comp { width: 18px; height: 18px; object-fit: contain; }
.md-label { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.md-when { margin-left: auto; color: var(--ink-3); font-weight: 600; text-transform: capitalize; }

.md-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0 14px; }
.md-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.md-team span { font-weight: 700; font-size: .92em; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.md-crest { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(20,28,46,.15)); animation: kcPop .55s var(--spring) .1s backwards; }
.md-team:last-child .md-crest { animation-delay: .18s; }
.md-crest-fallback { display: grid; place-items: center; border-radius: 50%; background: var(--tint-2); color: var(--ink-3); font-weight: 800; font-size: 1.3em; }
.md-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.md-kick { font-size: .64em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.md-count {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.5em; letter-spacing: .03em; line-height: 1;
    color: var(--ink); background: var(--gold-soft); border: 1px solid var(--gold-line);
    padding: 5px 10px 3px; border-radius: 10px; white-space: nowrap;
}

.md-bottom { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.md-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.md-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.md-ring circle { fill: none; stroke-width: 4.5; }
.md-ring-bg { stroke: var(--tint-2); }
.md-ring-fg {
    stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 125.66;
    stroke-dashoffset: var(--to); animation: mdRing 1.1s var(--ease-out) .2s backwards;
}
@keyframes mdRing { from { stroke-dashoffset: var(--from); } }
.md-ring-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; font-size: .85em; }
.md-ring-text b { color: var(--ink); }
.md-ring-text small { color: var(--ink-3); }
.md-mytip {
    display: flex; flex-direction: column; align-items: center; line-height: 1.1;
    padding: 6px 12px; border-radius: 12px; border: 1px solid var(--gold-line);
    background: var(--gold-soft); color: var(--gold-ink); font-family: inherit; cursor: pointer;
}
.md-mytip span { font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.md-mytip b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.45em; color: var(--ink); letter-spacing: .04em; }
.md-mytip:disabled, .md-locked { cursor: default; background: var(--tint-1); border-color: var(--line); }
.md-tipbtn {
    padding: 10px 16px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1204;
    font-family: inherit; font-weight: 800; font-size: .88em; box-shadow: var(--shadow-gold);
    transition: transform .2s var(--spring);
}
.md-tipbtn:active, .md-mytip:active:not(:disabled) { transform: scale(.95); }
.md-quick {
    width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px; border-radius: 12px; cursor: pointer;
    border: 1.5px dashed var(--gold-line); background: transparent;
    color: var(--gold-ink); font-family: inherit; font-weight: 800; font-size: .9em;
    transition: background .2s, border-color .2s, transform .2s var(--spring);
}
.md-quick:hover { background: var(--gold-soft); border-style: solid; }
.md-quick:active { transform: scale(.97); }
.md-quick svg { width: 17px; height: 17px; fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.2; stroke-linejoin: round; }
.md-quick span { background: var(--gold); color: #1a1204; border-radius: 999px; padding: 1px 8px; font-size: .85em; }

/* ── Firande (celebrate.js) ── */
.cel-overlay {
    position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px;
    background: rgba(12,17,28,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: kcFade .3s ease both;
}
.cel-overlay.closing { animation: kcFadeOut .26s ease forwards; }
.cel-overlay.closing .cel-card { animation: kcSheetOut .26s ease forwards; }
.cel-card {
    --cc: var(--gold); --cc-soft: var(--gold-soft); --cc-ink: var(--gold-ink);
    position: relative; overflow: hidden; width: 100%; max-width: 340px; text-align: center;
    padding: 26px 22px 20px; border-radius: 24px; background: var(--surface);
    box-shadow: var(--shadow-3); animation: celIn .6s var(--spring) both;
}
.cel-unicorn { --cc: #a855f7; --cc-soft: var(--violet-soft); --cc-ink: var(--violet-ink); }
.cel-sniper  { --cc: #ef4444; --cc-soft: var(--red-soft);    --cc-ink: var(--red-ink); }
.cel-correct { --cc: #22c55e; --cc-soft: var(--green-soft);  --cc-ink: var(--green-ink); }
@keyframes celIn { from { opacity: 0; transform: scale(.7) translateY(30px) rotate(-3deg); } }
.cel-rays {   /* roterande solstrålar bakom ikonen */
    position: absolute; left: 50%; top: 58px; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: 0;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 16%, transparent) 0 10deg, transparent 10deg 24deg);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%); mask-image: radial-gradient(circle, #000 20%, transparent 65%);
    animation: celSpin 14s linear infinite;
}
@keyframes celSpin { to { transform: rotate(360deg); } }
.cel-card > *:not(.cel-rays) { position: relative; z-index: 1; }
.cel-icon {
    width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%;
    display: grid; place-items: center; color: var(--cc);
    background: var(--cc-soft); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cc) 12%, transparent), 0 10px 30px color-mix(in srgb, var(--cc) 35%, transparent);
    animation: celIcon .8s var(--spring) .15s backwards;
}
@keyframes celIcon { from { transform: scale(0) rotate(-120deg); } }
.cel-icon .ic { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cel-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.3em; letter-spacing: .05em; line-height: 1; color: var(--cc-ink); animation: kcPop .5s var(--spring) .3s backwards; }
.cel-unicorn .cel-title {
    background: linear-gradient(90deg, #a855f7, #ec4899, #f0b429, #38bdf8, #a855f7); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: kcPop .5s var(--spring) .3s backwards, celRainbow 3s linear infinite;
}
@keyframes celRainbow { to { background-position: -300% 0; } }
.cel-sub { color: var(--ink-3); font-size: .86em; margin-top: 2px; }
.cel-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 16px 0 6px; }
.cel-team { font-weight: 700; font-size: .88em; color: var(--ink-2); }
.cel-match .cel-team:first-child { text-align: right; }
.cel-match .cel-team:last-child { text-align: left; }
.cel-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.9em; color: var(--ink); background: var(--tint-1); border-radius: 10px; padding: 2px 10px 0; }
.cel-tip { font-size: .82em; color: var(--ink-3); }
.cel-tip b { color: var(--cc-ink); }
.cel-pts { font-family: 'Bebas Neue', sans-serif; font-size: 3.2em; line-height: 1; margin: 10px 0 4px; color: var(--cc-ink); animation: kcPop .5s var(--spring) .45s backwards; }
.cel-extra { font-size: .8em; color: var(--ink-3); margin-bottom: 4px; }
.cel-btn {
    width: 100%; margin-top: 12px; padding: 13px; border: 0; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1204;
    font-family: inherit; font-weight: 800; font-size: .95em; box-shadow: var(--shadow-gold);
    transition: transform .2s var(--spring);
}
.cel-btn:active { transform: scale(.97); }
.cel-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10060; }
.cel-confetti i { position: fixed; display: block; }

/* ── Levande tabell (leaderboard.js → playLeaderboardChanges) ── */
.leaderboard-table tbody tr.lb-gain td { animation: lbGain 2.4s ease .3s; }
@keyframes lbGain { 0%, 100% { background: transparent; } 20%, 60% { background: color-mix(in srgb, var(--gold) 16%, transparent); } }
.leaderboard-table tbody tr td:nth-child(3) { position: relative; }
.lb-plus {
    position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
    font-size: .72em; font-weight: 800; color: var(--green-ink); pointer-events: none;
    animation: lbPlus 2.2s var(--ease-out) .5s both;
}
@keyframes lbPlus { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; transform: translate(-50%, -8px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }
.lb-rocket {
    width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; flex-shrink: 0;
    fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    animation: lbRocket 1.4s var(--spring) .9s backwards;
}
@keyframes lbRocket { 0% { opacity: 0; transform: translate(-6px, 14px) rotate(20deg); } 60% { opacity: 1; transform: translate(2px, -4px); } }
tr.lb-climber td:first-child .rank-badge { animation: kcIconPop .6s var(--spring) 1.1s; }

@media (prefers-reduced-motion: reduce) {
    .md-hero, .md-crest, .md-ring-fg, .cel-overlay, .cel-card, .cel-rays, .cel-icon, .cel-title, .cel-pts,
    .lb-plus, .lb-rocket { animation: none !important; }
}
.md-count { font-family: inherit; font-weight: 800; font-size: .92em; letter-spacing: 0; padding: 6px 10px; }

/* "▲4 sedan sist"-bubbla i levande tabellen (leaderboard.js) – poppar upp när raden
   landat, ligger kvar en stund och tonar bort */
.lb-bubble {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px;
    border-radius: 999px; font-size: .68em; font-weight: 800; white-space: nowrap;
    animation: lbBubble 5s var(--ease-out) both;
}
.lb-bubble.up   { background: var(--green-soft); color: var(--green-ink); box-shadow: 0 0 0 1px rgba(14,138,79,.18); }
.lb-bubble.down { background: var(--red-soft);   color: var(--red-ink);   box-shadow: 0 0 0 1px rgba(201,58,58,.16); }
@keyframes lbBubble {
    0%, 18% { opacity: 0; transform: scale(.4) translateY(6px); }
    26%     { opacity: 1; transform: scale(1.12); }
    32%     { transform: scale(1); }
    85%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) { .lb-bubble { animation: none; } }

/* ── Hero v2: ren ring (bara siffran / bock), avatarer, "Tippa N otippade" ── */
.md-ring { width: 50px; height: 50px; }
.md-ring-num {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.55em; line-height: 1; color: var(--ink); padding-top: 2px;
}
.md-ring.done .md-ring-fg { stroke: var(--green-ink); }
.md-ring-check {
    position: absolute; inset: 0; margin: auto; width: 24px; height: 24px;
    fill: none; stroke: var(--green-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 22; stroke-dashoffset: 22; animation: kcDraw .5s var(--ease-out) .9s forwards;
}
.md-ring-text { gap: 5px; min-width: 0; }
.md-ring-line { font-size: .9em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ring-line b { color: var(--ink); }
.md-ring-hint { font-size: .78em; color: var(--gold-ink); font-weight: 700; }

.md-avatars { display: flex; padding-left: 4px; }
.md-av {
    width: 22px; height: 22px; margin-left: -5px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: .64em; font-weight: 800; color: #fff;
    background: hsl(var(--h) 55% 48%); box-shadow: 0 0 0 2px var(--surface);
    animation: kcPop .4s var(--spring) backwards; animation-delay: calc(.3s + var(--i) * 60ms);
}
.md-av.me { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1204; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold-deep); z-index: 1; }
.md-av-more { background: var(--tint-2); color: var(--ink-3); font-size: .6em; }

.md-quick { justify-content: center; gap: 8px; }
.md-quick-arrow { background: none !important; padding: 0 !important; color: var(--gold-ink) !important; font-size: 1.1em !important; transition: transform .25s var(--spring); }
.md-quick:hover .md-quick-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) { .md-av, .md-ring-check { animation: none; stroke-dashoffset: 0; } }
/* Bocken ska inte ärva ringens -90°-vridning och 100%-storlek */
.md-ring .md-ring-check { width: 24px; height: 24px; transform: none; }
/* Heron ritad om under tippning (renderTipSummary(true)): inga intro-animationer –
   bara ringen fylls från förra värdet */
.md-hero.md-live, .md-hero.md-live .md-crest, .md-hero.md-live .md-av, .md-hero.md-live .md-ring-check { animation: none; }
.md-hero.md-live .md-ring-check { stroke-dashoffset: 0; }


/* ═══ Hero v3: karusell över otippade (tippa direkt i kortet) + "Väntar på avspark" ═══ */
.md-tippers { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.md-tippers.small { padding-top: 10px; }
.md-tippers.small .md-ring { width: 40px; height: 40px; }
.md-tippers.small .md-ring-num { font-size: 1.3em; }
.md-tippers.small .md-ring-check { width: 20px; height: 20px; }
/* Raden är tryckbar → ark med vilka som tippat / inte tippat (openTippersSheet) */
.md-tippers { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.md-tippers-go {
    margin-left: auto; flex-shrink: 0; width: 18px; height: 18px;
    fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s var(--spring);
}
.md-tippers:hover .md-tippers-go { transform: translateX(3px); }

.tps-sheet { display: flex; flex-direction: column; max-height: 78vh; }
.tps-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 4px; }
.tps-match { font-size: 1.05em; font-weight: 700; color: var(--ink); padding: 2px 0 4px; }
.tps-title { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: .86em; font-weight: 700; color: var(--ink-2); }
.tps-title span { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tps-list { list-style: none; margin: 0; padding: 4px 0 0; }
.tps-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.tps-row .md-av { width: 28px; height: 28px; margin-left: 0; font-size: .78em; animation: none; }
.tps-row.off .md-av { background: var(--tint-2); color: var(--ink-3); }
.tps-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.tps-row.off .tps-name { color: var(--ink-3); }
.tps-you { font-size: .78em; color: var(--ink-3); }

/* Karusell */
.md-carousel { padding: 12px 0 14px; }
.md-carousel::before, .md-carousel::after { display: none; }
.mdc-head { display: flex; align-items: baseline; gap: 8px; padding: 0 16px; font-size: .78em; }
.mdc-left { color: var(--ink-3); }
.mdc-left b { color: var(--ink); font-size: 1.1em; }
.mdc-pos { margin-left: auto; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mdc-pos-i { color: var(--ink); }
.mdc-bar { height: 5px; margin: 8px 16px 2px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.mdc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .6s var(--spring); }

.mdc-wrap { position: relative; }
.mdc-track {
    position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 10px 6% 4px;
}
.mdc-track::-webkit-scrollbar { display: none; }
.mdc-slide {
    position: relative; overflow: hidden; isolation: isolate;
    flex: 0 0 88%; scroll-snap-align: center; scroll-snap-stop: always;
    padding: 12px 14px 14px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    transform: scale(.95); opacity: .7;
    transition: transform .4s var(--spring), opacity .3s, border-color .3s, box-shadow .3s;
}
.mdc-slide.current { transform: none; opacity: 1; border-color: var(--gold-line); box-shadow: var(--shadow-2); }
.mdc-slide::before {   /* planens mittcirkel */
    content: ''; position: absolute; left: 50%; top: 48%; width: 130px; height: 130px; margin: -65px 0 0 -65px; z-index: -1;
    border: 1.5px solid rgba(240,180,41,.18); border-radius: 50%;
}
.mdc-meta { display: flex; align-items: center; gap: 6px; font-size: .72em; }
.mdc-when { color: var(--ink-3); font-weight: 600; text-transform: capitalize; }
.mdc-dl {
    margin-left: auto; font-weight: 700; color: var(--amber-ink); background: var(--amber-soft);
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.mdc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 12px 0 12px; }
.mdc-teams .md-crest { width: 44px; height: 44px; }
.mdc-teams .md-team span { font-size: .84em; }
.mdc-score { gap: 6px; }
.mdc-score .score-cell { width: 44px; height: 50px; }
.mdc-score .score-cell-val { font-size: 1.5em; }

/* "Tippat!"-bocken som dyker upp i kortet när båda siffrorna är ifyllda */
.mdc-done {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: color-mix(in srgb, var(--green-soft) 88%, transparent);
    color: var(--green-ink); font-weight: 800; font-size: 1.05em;
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mdc-done svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.mdc-slide.tipped .mdc-done { opacity: 1; }
.mdc-slide.tipped .mdc-done svg { animation: kcDraw .4s var(--ease-out) .05s forwards; }
.mdc-slide.tipped { border-color: #86efac; }

.mdc-arrow {
    position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1);
    color: var(--ink-2); font-size: 1.3em; line-height: 1; cursor: pointer; display: none;
}
.mdc-arrow.prev { left: 6px; } .mdc-arrow.next { right: 6px; }
@media (hover: hover) and (min-width: 721px) { .mdc-arrow { display: grid; place-items: center; } }

/* Väntar på avspark */
.md-waiting .md-top { justify-content: space-between; }
.md-alldone { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.md-alldone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.md-kickline { margin-top: 6px; display: flex; align-items: center; gap: 8px; font-size: .78em; font-weight: 700; color: var(--ink-3); }
.md-waiting .md-mytip { flex-direction: column-reverse; padding: 6px 14px; }
.md-waiting .md-mytip b { font-size: 1.9em; }

@media (prefers-reduced-motion: reduce) {
    .mdc-slide, .mdc-bar i { transition: none; }
    .mdc-slide.tipped .mdc-done svg { animation: none; stroke-dashoffset: 0; }
}
/* Kortets rubrikrad: datum på en rad, spelstopp-brickan bryts till egen rad vid behov */
.mdc-meta { flex-wrap: wrap; row-gap: 6px; }
.mdc-when { white-space: nowrap; }
.mdc-dl { margin-left: auto; font-size: .95em; }
/* Karusellkort: lagen på egen rad (hela bredden) och resultatrutorna under –
   annars fick namnen bara ~59px och "Hammarby"/"Djurgårdens IF" klipptes.
   Långa namn får bryta till två rader i stället för att kapas. */
.mdc-teams { grid-template-columns: 1fr auto 1fr; margin: 12px 0 8px; align-items: start; }
.mdc-vs { font-family: 'Bebas Neue', sans-serif; font-size: 1.15em; color: var(--ink-4); align-self: center; margin-top: -18px; }
.mdc-teams .md-team span {
    white-space: normal; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-height: 1.2; overflow-wrap: normal; word-break: normal;
}
.mdc-score { display: flex; justify-content: center; align-items: center; margin: 0 0 12px; }
.md-waiting .md-team span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; }

/* ── Matchup-banderoll (hero-korten): lagets logga stor och nedtonad bakom namnet ──
   Två halvor; namnen står mot ytterkanterna, resultatrutorna/ditt tips på skarven. */
.mu {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    min-height: 86px; margin: 10px 0 12px; border-radius: 14px; overflow: hidden;
}
.mu-side {
    position: relative; overflow: hidden; display: flex; align-items: center; min-width: 0;
    background: linear-gradient(180deg, var(--tint-1), var(--tint-2));
}
.mu-home { padding: 10px 54px 10px 12px; justify-content: flex-start; text-align: left; }
.mu-away { padding: 10px 12px 10px 54px; justify-content: flex-end; text-align: right; }
.mu-crest {
    position: absolute; top: 50%; width: 118px; height: 118px; object-fit: contain; pointer-events: none;
    opacity: .16; filter: saturate(1.3);
    transition: opacity .4s, transform .6s var(--spring);
}
.mu-home .mu-crest { left: -26px;  transform: translateY(-50%) rotate(-8deg); }
.mu-away .mu-crest { right: -26px; transform: translateY(-50%) rotate(8deg); }
.mdc-slide.current .mu-crest { opacity: .22; }
.mdc-slide.current .mu-home .mu-crest { transform: translateY(-50%) rotate(-4deg) scale(1.05); }
.mdc-slide.current .mu-away .mu-crest { transform: translateY(-50%) rotate(4deg) scale(1.05); }
.mu-name {
    position: relative; z-index: 1; font-weight: 800; font-size: .92em; line-height: 1.15; color: var(--ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    overflow-wrap: normal; word-break: normal; hyphens: auto;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.mu-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: flex; align-items: center;
}
.mu-center .mdc-score { margin: 0; gap: 4px; padding: 5px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2); }
.mu-center .mdc-score .score-cell { width: 40px; height: 46px; }
.mu-center .score-dash { color: var(--ink-4); }
.mu-center .md-mytip { background: var(--surface); box-shadow: var(--shadow-2); }

/* ── Planhalvor i matchup-banderollen ──────────────────────────────────────
   Varje lag står på "sin" planhalva: skarven mellan halvorna = mittlinjen,
   en halv mittcirkel på varje sida (möts runt resultatrutorna) och ett
   straffområde + målområde vid ytterkanten. Allt ritat med tunna guldlinjer. */
.mu {
    --pl: rgba(212,147,10,.38);          /* linjefärg */
    gap: 1.5px; background: var(--pl);   /* 1.5px glipa = mittlinjen */
    border: 1.5px solid var(--pl);
}
.mu-side { background: linear-gradient(180deg, #fbfcf7, #f1f5ec); }   /* ljus, svagt grön "gräs"-ton */
/* halv mittcirkel vid skarven */
.mu-side::after {
    content: ''; position: absolute; top: 50%; width: 76px; height: 76px; margin-top: -38px;
    border: 1.5px solid var(--pl); border-radius: 50%; pointer-events: none;
}
.mu-home::after { right: -38px; }
.mu-away::after { left: -38px; }
/* straffområde + målområde vid ytterkanten */
.mu-side::before {
    content: ''; position: absolute; top: 18%; bottom: 18%; width: 22px; pointer-events: none;
    border: 1.5px solid var(--pl);
    box-shadow: inset 0 0 0 0 transparent;
}
.mu-home::before { left: -1.5px; border-left: 0; }
.mu-away::before { right: -1.5px; border-right: 0; }
.mu-home .mu-name { margin-left: 22px; }
.mu-away .mu-name { margin-right: 22px; }
/* mittpunkt bakom resultatrutorna */
.mu-center::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: var(--pl); z-index: -1;
}
.mdc-slide::before { display: none; }   /* kortets egen mittcirkel behövs inte längre */
.md-waiting::before, .md-waiting::after { display: none; }
/* Namnen överst på planhalvan, resultatrutorna nere i mitten (i mittcirkeln) –
   annars skulle rutorna + straffområdet bara lämna ~30px till namnet */
.mu { min-height: 108px; }
.mu-side { align-items: flex-start; }
.mu-home { padding: 12px 8px 60px 28px; }
.mu-away { padding: 12px 28px 60px 8px; }
.mu-home .mu-name, .mu-away .mu-name { margin: 0; font-size: .9em; }
.mu-center { top: auto; bottom: 8px; transform: translateX(-50%); }
.mu-side::after { top: auto; bottom: -3px; margin-top: 0; }   /* mittcirkeln runt rutorna */
.mu-crest { top: 42%; }
/* Loggorna kraftigt nedtonade + lite mer plats för namnen */
.mu-crest { opacity: .08; filter: grayscale(.2); }
.mdc-slide.current .mu-crest { opacity: .11; }
.mu-home { padding-left: 20px; padding-right: 6px; }
.mu-away { padding-right: 20px; padding-left: 6px; }
.mu-home .mu-name, .mu-away .mu-name { font-size: .86em; }
/* Loggorna centrerade i sin planhalva (inte vridna/ute vid kanten) */
.mu-crest,
.mu-home .mu-crest, .mu-away .mu-crest,
.mdc-slide.current .mu-home .mu-crest, .mdc-slide.current .mu-away .mu-crest {
    left: 50%; right: auto; top: 50%; width: 96px; height: 96px;
    transform: translate(-50%, -50%);
}
/* Ingen vit platta bakom resultatrutorna / ditt tips – de ligger direkt på planen */
.mu-center .mdc-score { background: transparent; box-shadow: none; padding: 0; }
.mu-center .md-mytip { background: transparent; box-shadow: none; border-color: transparent; }
/* Bara mittlinje + mittcirkel – inga straffområden eller ram (såg ut som en innebandyplan) */
.mu-side::before { display: none; }
.mu { border: 0; }
.mu-home { padding-left: 12px; }
.mu-away { padding-right: 12px; }
/* Större mittcirkel, centrerad kring resultatrutorna (rutornas mitt ≈ 31px från botten) */
.mu-side::after { width: 124px; height: 124px; bottom: -31px; }
.mu-home::after { right: -62px; }
.mu-away::after { left: -62px; }
/* Tydligare mittlinje + mittcirkel (låg för svagt mot loggorna) */
.mu { --pl: rgba(212,147,10,.55); gap: 2px; }
.mu-side::after { border-width: 2px; z-index: 1; }
/* Diskretare linjer – mitt emellan för svagt och för tydligt */
.mu { --pl: rgba(212,147,10,.28); gap: 1.5px; }
.mu-side::after { border-width: 1.5px; }
/* Loggorna ska synas mer än linjerna: loggor starkare och ovanpå, linjerna svagare under */
.mu { --pl: rgba(212,147,10,.2); }
.mu-side::after { z-index: 0; }
.mu-crest { z-index: 1; opacity: .2; filter: none; }
.mdc-slide.current .mu-crest { opacity: .26; }
.mu-name { z-index: 2; }
/* Grönare plan med diskreta klippränder; vita (svaga) linjer som på en riktig plan */
.mu { --pl: rgba(255,255,255,.75); background: rgba(255,255,255,.75); }
.mu-side {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 18px, transparent 18px 36px),
        linear-gradient(180deg, #e2f1dc 0%, #d2e8ca 100%);
}
.mu-name { text-shadow: 0 1px 0 rgba(255,255,255,.7); }
/* Resultatrutorna mitt på planen (inte nere vid botten); mittcirkeln följer med */
.mu { min-height: 118px; }
.mu-home { padding: 10px 6px 64px 12px; }
.mu-away { padding: 10px 12px 64px 6px; }
.mu-center { top: 56%; bottom: auto; transform: translate(-50%, -50%); }
.mu-side::after { top: 56%; bottom: auto; margin-top: -62px; }
.mu-crest,
.mu-home .mu-crest, .mu-away .mu-crest,
.mdc-slide.current .mu-home .mu-crest, .mdc-slide.current .mu-away .mu-crest { top: 56%; }

/* CL-märket är en svart boll där stjärnorna är genomskinliga hål → mot mörk bakgrund
   syns varken bollen eller stjärnorna. I de mörka vyerna får märket en vit rund platta
   bakom sig, så stjärnorna blir vita i den svarta bollen – precis som i ljusa appen. */
:is(.login-view, .hub-view, .create-view) img[src*="logos/cl."] { background: #fff; border-radius: 50%; }
.hub-league-logos img[src*="logos/cl."] { background: #fff; padding: 0; }
/* Vattenstämpeln får samma vita platta via regeln ovan (vit boll, mörka stjärnor) – inget färgfilter */

/* ═══════════════════════════════════════════════════════════════════════════
   LADDNINGSSKÄRMAR – studsande boll (2026-10-01)
   .kc-loader = bollen. Används i #viewLoading (app.html, mörk) och i appens
   laddningslägen (loadingFishHTML / buildMatchInitializingHTML i admin.js, ljus).
   Bollen studsar (kcBounce: trycks ihop mot marken, sträcks i luften) och snurrar,
   skuggan krymper när bollen är högt upp. Färgerna styrs av --ball/--patch.
   ═══════════════════════════════════════════════════════════════════════════ */
.kc-loader { --ball: #fff; --patch: var(--ink); --shadow: rgba(20,28,46,.3); position: relative; width: 130px; height: 100px; margin: 0 auto; }
.kc-loader::before {   /* skuggan på marken */
    content: ''; position: absolute; left: 50%; bottom: 4px; width: 40px; height: 9px; margin-left: -20px;
    border-radius: 50%; background: var(--shadow); filter: blur(2px); animation: kcShadow .95s infinite;
}
.kc-loader::after {    /* marklinjen – guld, tonar ut i ändarna */
    content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: .55;
}
.kc-ball { position: absolute; z-index: 1; left: 50%; bottom: 10px; width: 46px; height: 46px; margin-left: -23px; transform-origin: 50% 100%; animation: kcBounce .95s infinite; }
.kc-ball svg { display: block; width: 100%; height: 100%; animation: spin 1.9s linear infinite; }
@keyframes kcBounce {
    0%   { transform: translateY(0) scale(1.14, .86); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
    50%  { transform: translateY(-48px) scale(.97, 1.03); animation-timing-function: cubic-bezier(.6,0,.8,.2); }
    92%  { transform: translateY(-2px) scale(1, 1); animation-timing-function: linear; }
    100% { transform: translateY(0) scale(1.14, .86); }
}
@keyframes kcShadow { 0%, 100% { transform: scaleX(1.15); opacity: 1; } 50% { transform: scaleX(.5); opacity: .3; } }

/* Startskärmen (mörk): loggan som på inloggningen, bollen under, inget kort */
.load-view .loading-box { padding: 26px 0 0; animation: kcFade .5s ease both; }
.load-view .kc-loader { --ball: #f4f6fa; --patch: #151924; --shadow: rgba(0,0,0,.7); }
.load-view .loading-box p { margin-top: 14px; color: #9aa4b8; font-size: .78em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* Inne i appen (ljus): boll + rubrik + växlande texter, och spökkort under */
.kc-loading { text-align: center; padding: 26px 16px 6px; }
.kc-loading-tall { min-height: 56vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kc-loading-title { margin-top: 14px; font-family: 'Bebas Neue', sans-serif; font-size: 1.7em; letter-spacing: .05em; line-height: 1.1; color: var(--ink); }
.kc-loading-text { margin: 6px auto 0; max-width: 300px; font-size: .9em; line-height: 1.55; color: var(--ink-3); }
.kc-loading-pill { display: inline-block; margin-top: 16px; padding: 6px 16px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-size: .8em; font-weight: 600; }
.kc-loading-tips { position: relative; height: 1.5em; margin-top: 6px; font-size: .86em; color: var(--ink-3); }
.kc-loading-tall .kc-loading-tips { width: 100%; margin-top: 14px; }
.kc-loading-tips span { position: absolute; left: 0; right: 0; opacity: 0; animation: kcTip 7.5s infinite; }
.kc-loading-tips span:nth-child(2) { animation-delay: 2.5s; }
.kc-loading-tips span:nth-child(3) { animation-delay: 5s; }
@keyframes kcTip {
    0%        { opacity: 0; transform: translateY(6px); }
    5%, 29%   { opacity: 1; transform: none; }
    34%, 100% { opacity: 0; transform: translateY(-6px); }
}

.kc-skel { display: grid; gap: 10px; margin-top: 18px; }
.kc-skel-card {
    position: relative; overflow: hidden; height: 76px; padding: 0 18px;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-1);
}
.kc-skel-card:nth-child(2) { opacity: .7; }
.kc-skel-card:nth-child(3) { opacity: .4; }
.kc-skel-card .sk { width: 27%; height: 12px; border-radius: 6px; background: var(--tint-2); }
.kc-skel-card .sk-score { display: flex; gap: 6px; }
.kc-skel-card .sk-score i { width: 32px; height: 38px; border-radius: 9px; background: var(--tint-2); }
.kc-skel-card::after {   /* ljusstrimma som sveper över kortet */
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
    animation: kcShimmer 1.5s infinite;
}
@keyframes kcShimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .kc-loader::before, .kc-ball, .kc-ball svg, .kc-skel-card::after { animation: none; }
    .kc-loading-tips span { animation: none; }
    .kc-loading-tips span:first-child { opacity: 1; }
}

/* ── Tabell: vattenstämplar (2026-10-01) ─────────────────────────────────────
   Samma idé som hubbens ligakort: en stor, svag, lätt vriden bild bakom kortets
   högra del. "Tabellen baseras på tips från"-korten får tävlingens logga (eller
   klubbmärket i följ-ett-lag-ligor), trofékorten får sin egen ikon i kortets färg. */
.lb-wm-host { position: relative; overflow: hidden; isolation: isolate; }
.lb-wm {
    position: absolute; right: 26px; top: 50%; width: 150px; height: 150px; z-index: -1;
    object-fit: contain; pointer-events: none; user-select: none;
    opacity: .1; transform: translateY(-50%) rotate(-14deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
    transition: opacity .3s, transform .6s var(--ease-out);
}
svg.lb-wm { width: 130px; height: 130px; right: 56px; opacity: .1; stroke-width: 1.3; -webkit-mask-image: none; mask-image: none; }
.title-chip:hover .lb-wm { opacity: .2; transform: translateY(-50%) rotate(-9deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .lb-wm { transition: none; } }


/* ── Radera liga-dialogen (2026-10-01) ── avskalad: vänsterställd text, vanliga fält,
   en röd knapp. Färgerna är variabler, så den fungerar i både ljust och mörkt läge. */
.del-modal .result-modal-title { text-align: left; margin-bottom: 8px; overflow-wrap: anywhere; }
.del-text { margin: 0 0 18px; font-size: .88em; line-height: 1.55; color: var(--ink-2); }
.del-label { display: block; margin: 0 0 5px; font-size: .8em; font-weight: 600; color: var(--ink-2); }
.del-input {
    display: block; width: 100%; margin-bottom: 12px; padding: 10px 12px;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--field); color: var(--ink);
    font-family: 'DM Sans', sans-serif; font-size: .95em;
}
.del-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); }
.del-hint { margin: -6px 0 12px; font-size: .76em; color: var(--ink-3); }
.del-error { min-height: 18px; margin-bottom: 10px; font-size: .82em; color: var(--red-ink); }
.del-confirm { background: #c93a3a; color: #fff; }
.del-confirm:hover:not(:disabled) { background: #b53030; }


/* ═══════════════════════════════════════════════════════════════════════════
   MATCHTAVLA + RESULTAT-FLIKEN (v1.3.16)
   .sb  = matchtavlan: klubbmärke över lagnamn på var sida, mitten visar resultat,
          avsparkstid eller tipsrutor. Delas av Resultat-fliken och Tippa-listan
          (markup: teamSideHTML() i matches.js).
   .rs-* = Resultat-fliken (renderMatches() i ui.js): väljaren Spelade/Kommande,
          "Din form", matchkort med utfällbar spelarlista.
   Allt använder variablerna → följer med i mörkt läge utan egna regler.
   ═══════════════════════════════════════════════════════════════════════════ */
.sb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; max-width: 520px; margin-inline: auto; }
.sb-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
/* Vattenstämpel: lagets märke stort och svagt bakom sin sida, beskuret av kortets kant.
   Kortet (.rs-head / .pred-match) är ett eget lager (isolation) så att z-index:-1
   hamnar bakom kortets innehåll men ovanför dess bakgrund. */
.sb { position: relative; }
.rs-head, .pred-match { position: relative; isolation: isolate; }
.pred-match { overflow: hidden; }
.sb-wm {
    position: absolute; top: 50%; z-index: -1; width: 150px; height: 150px; object-fit: contain;
    opacity: .07; pointer-events: none; user-select: none;
}
.sb-home .sb-wm { left: -48px;  transform: translateY(-50%) rotate(-8deg); }
.sb-away .sb-wm { right: -48px; transform: translateY(-50%) rotate(8deg); }
[data-theme="dark"] .sb-wm { opacity: .1; }
.sb-crest { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.sb-crest-none { border-radius: 50%; background: var(--tint-2); }
.sb-name {
    font-size: .86em; font-weight: 700; line-height: 1.2; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
}
.sb-center { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 80px; }
.sb-score {
    font-family: 'Bebas Neue', sans-serif; font-size: 2.2em; line-height: 1; letter-spacing: .05em; color: var(--ink);
    padding: 7px 14px 3px; border-radius: 12px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line);
    white-space: nowrap;
}
.sb-wait { background: var(--tint-2); box-shadow: none; color: var(--ink-4); }
.sb-time { font-family: 'Bebas Neue', sans-serif; font-size: 1.9em; line-height: 1; letter-spacing: .03em; color: var(--ink); padding-top: 3px; }
.sb-sub { display: inline-flex; align-items: center; gap: 5px; font-size: .7em; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.sb-sub .dl-warm { color: var(--amber-ink); }
.sb-sub .dl-hot  { color: var(--red-ink); }
.sb-word { padding: 5px 11px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-size: .8em; font-weight: 700; }

/* Synk-raden överst (updateScraperStatus i ui.js) – ersätter den gamla pillern */
#tab-matcher .scraper-status-bar { display: block; padding: 0; }
.rs-sync { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px 0; font-size: .76em; color: var(--ink-3); }
.rs-sync-text { flex: 1; min-width: 0; padding-top: 6px; line-height: 1.4; }
.rs-sync-text > span { display: block; }
.rs-sync .scraper-status-dot { margin-top: 12px; }
.rs-sync-text b { font-weight: 600; color: var(--ink-2); }
.rs-sync-btn { width: 30px; height: 30px; margin: 0; }
.rs-sync-btn .ic { width: 15px; height: 15px; }

/* Väljaren Spelade / Kommande (+ ev. gruppering) */
.rs-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.rs-seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--tint-2); border-radius: 999px; }
.rs-seg-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .86em; font-weight: 600; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.rs-seg-btn span { font-size: .86em; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.rs-seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 3px 10px rgba(20,28,46,.08); }
.rs-seg-btn.active span { color: var(--gold-ink); }

/* "Din form" */
.rs-form {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.rs-form-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rs-form-k { font-size: .8em; font-weight: 700; color: var(--ink-2); }
.rs-form-marks { display: flex; gap: 6px; }
.rs-form-marks i { width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; }
.rs-form-marks i.f-right { background: #12b76a; }
.rs-form-marks i.f-exact { background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold-deep); }
.rs-form-marks i.f-wrong { border: 2px solid var(--red-ink); opacity: .55; }
.rs-form-marks i.f-none  { border: 2px dashed var(--ink-4); }
.rs-form-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.rs-form-stat b { font-family: 'Bebas Neue', sans-serif; font-size: 1.7em; font-weight: 400; line-height: 1; color: var(--ink); }
.rs-form-stat span { font-size: .68em; color: var(--ink-3); white-space: nowrap; }

/* Dags-/omgångsrubrik (bara när gruppen har flera matcher) */
.rs-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 4px 8px; }
.rs-sec-label { font-size: .92em; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rs-sec-label::first-letter { text-transform: uppercase; }
.rs-sec-best { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76em; color: var(--ink-3); }
.rs-sec-best b { color: var(--ink-2); }

/* Matchkort */
.rs-card {
    margin-bottom: 10px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.rs-head { padding: 12px 14px 0; }
.rs-card.can-open .rs-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rs-card.can-open .rs-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--r-lg); }
.rs-meta { display: flex; justify-content: space-between; gap: 8px; min-width: 0; min-height: 1.3em; margin-bottom: 10px; font-size: .74em; font-weight: 600; color: var(--ink-3); }
.rs-meta > span:first-child::first-letter { text-transform: uppercase; }
.rs-meta-r { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-meta .dl-warm { color: var(--amber-ink); }
.rs-meta .dl-hot  { color: var(--red-ink); }
.rs-chip { padding: 1px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; }

/* Ligans tips: "2 hemma · 4 oavgjort · 3 borta" */
.rs-dist { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-top: 14px; font-size: .76em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rs-dist-k { font-weight: 600; white-space: nowrap; }
.rs-dist .is-win { font-weight: 700; color: var(--green-ink); }

/* Raden "Ditt tips" */
.rs-mine {
    display: flex; align-items: center; gap: 8px; min-height: 44px;
    margin: 12px -14px 0; padding: 8px 14px; border-top: 1px solid var(--line);
    font-size: .86em; color: var(--ink-2);
}
.rs-card.is-right .rs-mine { background: var(--green-soft); border-top-color: transparent; }
/* Utmärkelse på ditt tips: raden får utmärkelsens färg i stället för grönt.
   Sniper = bärnsten, Nostradamus = lila, Unicorn = långsamt glidande regnbågston. */
.rs-trophy-word { font-weight: 700; }
.rs-card.tr-sniper .rs-mine { background: var(--amber-soft); }
.rs-card.tr-sniper .rs-trophy-word, .rs-card.tr-sniper .rs-pts.plus { color: var(--amber-ink); }
.rs-card.tr-nostradamus .rs-mine { background: var(--violet-soft); }
.rs-card.tr-nostradamus .rs-trophy-word, .rs-card.tr-nostradamus .rs-pts.plus { color: var(--violet-ink); }
.rs-card.tr-unicorn .rs-mine {
    background: linear-gradient(90deg, var(--violet-soft), var(--pink-soft), var(--gold-soft), var(--violet-soft));
    background-size: 300% 100%; animation: rsUnicorn 9s linear infinite;
}
.rs-card.tr-unicorn .rs-trophy-word, .rs-card.tr-unicorn .rs-pts.plus { color: var(--pink-ink); }
@keyframes rsUnicorn { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .rs-card.tr-unicorn .rs-mine { animation: none; } }
.rs-mine-label { flex-shrink: 0; color: var(--ink-3); white-space: nowrap; }
.rs-mine-tip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-mine > svg, .rs-mine > span[class$="-pulse"], .rs-trophy-word { flex-shrink: 0; white-space: nowrap; }
.rs-mine-r { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 380px) { .rs-mine { gap: 6px; } .rs-trophy-word { font-size: .92em; } }
.rs-pts { font-family: 'Bebas Neue', sans-serif; font-size: 1.55em; line-height: 1; color: var(--ink-4); padding-top: 2px; }
.rs-pts.plus { color: var(--green-ink); }
.rs-pts small { margin-left: 2px; font-family: 'DM Sans', sans-serif; font-size: .5em; font-weight: 700; }
.rs-chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.rs-card.expanded .rs-chev:not(.side) { transform: rotate(180deg); }
.rs-tippers {
    display: inline-flex; align-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 1em; font-weight: 600; color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
}
.rs-tippers:hover { color: var(--ink); }

/* Utfällt: alla spelares tips */
.rs-body { display: none; padding: 4px 10px 14px; background: var(--tint-1); border-top: 1px solid var(--line); }
.rs-card.expanded .rs-body { display: block; }
.rs-card.is-right.expanded .rs-body { border-top-color: transparent; }
.rs-plist { list-style: none; margin: 0; padding: 6px 0 0; }
.rs-p { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: .88em; }
.rs-p .md-av { width: 24px; height: 24px; margin-left: 0; font-size: .72em; animation: none; box-shadow: none; }
.rs-p-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.rs-p-ic { display: inline-flex; align-items: center; gap: 3px; }
.rs-p-tip { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.rs-p-pts { width: 42px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-4); }
.rs-p.is-right .rs-p-tip, .rs-p.is-right .rs-p-pts { color: var(--green-ink); }
.rs-p.is-wrong .rs-p-tip { color: var(--ink-3); font-weight: 600; }
.rs-p.is-none .rs-p-name, .rs-p.is-none .rs-p-tip { color: var(--ink-4); font-weight: 500; }
.rs-p.is-none .md-av { background: var(--tint-2); color: var(--ink-4); }
.rs-p.is-me { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px 0; }
.rs-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink);
    font-family: 'DM Sans', sans-serif; font-size: .84em; font-weight: 600;
    transition: border-color .15s, color .15s;
}
.rs-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-ink); }
.rs-btn-quiet { background: none; color: var(--ink-3); }
.rs-btn:disabled { opacity: .6; cursor: default; }
.rs-note { margin: 10px 6px 0; font-size: .76em; line-height: 1.5; color: var(--ink-3); }
.rs-more {
    display: block; width: 100%; margin: 6px 0 4px; padding: 11px; cursor: pointer;
    border: 1px dashed var(--line-2); border-radius: var(--r-md); background: none; color: var(--ink-2);
    font-family: 'DM Sans', sans-serif; font-size: .88em; font-weight: 600;
}
.rs-more:hover { border-color: var(--gold); color: var(--gold-ink); }
.rs-empty { padding: 28px 0; text-align: center; font-size: .9em; color: var(--ink-3); }
/* ── Tippa-listan: grupprubrik med spelstoppet till höger + matchkort med tavla ──
   (buildGroupHeader / renderPredCard i predictions.js) */
.pred-group-header { gap: 10px; }
.pred-group-header-left { flex: 1; }
.pred-group-round::first-letter { text-transform: uppercase; }
.pred-group-toggle { display: inline-flex; }
.pred-group-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-state {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
    background: var(--green-soft); color: var(--green-ink);
    font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pg-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pg-state:has(.dl-warm) { background: var(--amber-soft); color: var(--amber-ink); }
.pg-state:has(.dl-hot)  { background: var(--red-soft); color: var(--red-ink); }
.pg-state.closed { background: var(--tint-2); color: var(--ink-3); }
/* Stängd grupp: "Stängd" räcker – antalet matcher skulle bara tränga undan namnet */
.pred-group-header.locked-group:has(.pg-state) .pred-group-meta { display: none; }
.pg-deadline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 0; font-size: .78em; color: var(--ink-3); }
.pm-meta .pg-state, .pg-deadline .pg-state { font-size: 1em; }
.pg-deadline b { font-weight: 600; color: var(--ink-2); }
.pm-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 1.3em; margin-bottom: 8px; font-size: .74em; font-weight: 600; color: var(--ink-3); }
.pm-meta > span:first-child::first-letter { text-transform: uppercase; }
.pm-meta-r { display: inline-flex; align-items: center; gap: 6px; }
.pm-chip { padding: 1px 8px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; }
.pm-chip-quiet { background: var(--tint-2); color: var(--ink-3); }
.pred-match .sb-center { min-width: 0; }
.pred-match.locked .sb-name { color: var(--ink-2); }
.pm-result { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 10px; font-size: .84em; color: var(--ink-3); }
.pm-result b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pm-result.is-exact b, .pm-result.is-right b { color: var(--green-ink); }
.pm-result.is-wrong b { color: var(--red-ink); }
.pm-pts { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-4); }
.pm-result.is-exact .pm-pts, .pm-result.is-right .pm-pts { color: var(--green-ink); }

.rs-pulse { width: 6px; height: 6px; border-radius: 50%; background: #fdb022; animation: rsPulse 1.4s ease-in-out infinite; }
@keyframes rsPulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rs-pulse { animation: none; } .rs-chev { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN-FLIKEN (v1.3.16) – markup i app.html (#tab-admin) + admin.js
   Överst en översikt (.adm-hero): ligans namn, kod/länk att dela och fyra
   nyckeltal som också är genvägar. Därunder sektionerna, grupperade under
   rubriker (.adm-group); varje sektionsrubrik har ikon i en guldtonad bricka,
   titel + förklaring och en pil som vrids när sektionen är öppen.
   Spelarlistan (.adm-player) är kompakt: ett tryck fäller ut e-post, insats
   och knappar. Allt använder variablerna → följer med i mörkt läge.
   ═══════════════════════════════════════════════════════════════════════════ */
.adm-hero {
    position: relative; overflow: hidden; padding: 18px 16px 0; margin-bottom: 4px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.adm-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.adm-hero-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.8em; line-height: 1.05; letter-spacing: .03em; color: var(--ink); overflow-wrap: anywhere; }
.adm-hero-sub { margin-top: 2px; font-size: .82em; color: var(--ink-3); }
.adm-code {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px 8px 16px;
    background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--r-md);
}
.adm-code-main { flex: 1; min-width: 0; }
.adm-code-label { font-size: .72em; font-weight: 600; color: var(--gold-ink); }
.adm-hero .admin-share-code { font-family: 'Bebas Neue', sans-serif; font-size: 2.1em; font-weight: 400; line-height: 1.1; letter-spacing: .2em; color: var(--ink); }
.adm-hero .admin-share-url { margin: 8px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; text-align: left; font-size: .76em; }
.adm-hero-actions { display: flex; gap: 8px; margin-top: 12px; }
.adm-hero-actions > * { flex: 1; }
.adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px -16px 0; border-top: 1px dashed var(--line-2); }
.adm-stat {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 4px 14px;
    border: 0; border-left: 1px solid var(--line); background: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; color: var(--ink); -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.adm-stat:first-child { border-left: 0; }
.adm-stat:hover { background: var(--tint-1); }
.adm-stat b { font-family: 'Bebas Neue', sans-serif; font-size: 1.75em; font-weight: 400; line-height: 1; }
.adm-stat b small { margin-left: 2px; font-family: 'DM Sans', sans-serif; font-size: .46em; font-weight: 700; color: var(--ink-3); }
.adm-stat span { font-size: .66em; line-height: 1.25; text-align: center; color: var(--ink-3); }
.adm-stat.warn b { color: var(--red-ink); }

.adm-group { margin: 22px 4px 8px; font-size: .82em; font-weight: 700; color: var(--ink-3); }

/* Sektionsrubriker */
#tab-admin .admin-section { margin-bottom: 8px; }
#tab-admin .admin-section-header { gap: 12px; padding: 12px 14px; }
.adm-ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--gold-soft); color: var(--gold-ink); }
.adm-ic .ic { width: 18px; height: 18px; }
.adm-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-head b { font-weight: 700; color: var(--ink); }
.adm-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82em; font-weight: 500; color: var(--ink-3); }
.adm-count { flex-shrink: 0; min-width: 20px; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: .78em; font-weight: 800; text-align: center; }
#tab-admin .admin-toggle-icon { display: inline-flex; margin-left: 0; color: var(--ink-4); transition: transform .25s var(--ease); }
#tab-admin .admin-toggle-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#tab-admin .admin-section-header.open .admin-toggle-icon { transform: rotate(180deg); }
.adm-danger .adm-ic { background: var(--red-soft); color: var(--red-ink); }
.adm-danger .adm-head b { color: var(--red-ink); }

/* Byggstenar inne i sektionerna */
.adm-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-block-title { margin-bottom: 8px; font-size: .86em; font-weight: 700; color: var(--ink); }
.adm-block-text { margin: 0 0 12px; font-size: .84em; line-height: 1.5; color: var(--ink-3); }
.adm-hint { display: block; margin-top: 3px; font-size: .76em; color: var(--ink-3); }
.adm-input {
    min-width: 0; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px;
    background: var(--field); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: .9em;
}
textarea.adm-input { width: 100%; resize: vertical; }
.adm-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,180,41,.18); }
.adm-btn-sm { padding: 7px 12px; font-size: .8em; }
.adm-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-btn-row > * { flex: 1 1 auto; }
#tab-admin .admin-field label { font-size: .8em; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.adm-date-range { display: flex; gap: 8px; margin-bottom: 10px; }
.adm-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }
.adm-dot-silver { background: #a0aec0; }
.adm-dot-gold   { background: var(--gold); }
.adm-bet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-bet { display: flex; align-items: center; gap: 6px; }
.adm-bet .adm-input { width: 96px; }
.adm-access { display: flex; align-items: center; gap: 10px; font-size: .86em; }
.adm-access-label { flex: 1; min-width: 0; color: var(--ink-2); }
.adm-access-dot { font-size: .8em; }
.adm-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-item:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-item-main { flex: 1; min-width: 0; }
.adm-item-title { font-size: .88em; font-weight: 600; color: var(--ink); }
.adm-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spelarlistan */
#tab-admin .player-list { gap: 0; margin: -16px -16px 0; }
.adm-player { border-bottom: 1px solid var(--line); }
.adm-player-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.adm-player-head:hover { background: var(--tint-1); }
.adm-player .md-av { width: 32px; height: 32px; margin-left: 0; font-size: .82em; animation: none; box-shadow: none; }
.adm-player-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-player-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .92em; }
.adm-player-name .player-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.adm-role { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-size: .74em; font-weight: 700; }
.adm-player-seen { font-size: .76em; color: var(--ink-3); }
.adm-player-seen .lastseen-span { text-transform: lowercase; }
.adm-player-chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.adm-player.open { background: var(--tint-1); }
.adm-player.open .adm-player-chev { transform: rotate(180deg); }
.adm-player-body { display: none; padding: 2px 16px 14px 60px; }
.adm-player.open .adm-player-body { display: block; }
.adm-player-mail { margin-bottom: 10px; font-size: .82em; color: var(--ink-2); word-break: break-all; }
.adm-player-label { margin-bottom: 5px; font-size: .76em; font-weight: 600; color: var(--ink-3); }
.adm-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tint-2); }
.adm-seg-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: .8em; font-weight: 600; color: var(--ink-3);
}
.adm-seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 3px 10px rgba(20,28,46,.08); }
.adm-player-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.adm-rename { margin-top: 10px; }
.adm-rename-row { display: flex; gap: 6px; }
.adm-rename-row .adm-input { flex: 1; }

/* Admin-guiden */
.adm-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: admstep; font-size: .86em; line-height: 1.5; color: var(--ink-2); }
.adm-steps li { position: relative; padding-left: 34px; counter-increment: admstep; }
.adm-steps li::before {
    content: counter(admstep); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-size: .85em; font-weight: 800;
}
.adm-qa { margin: 0; font-size: .86em; line-height: 1.5; }
.adm-qa dt { margin-top: 12px; font-weight: 700; color: var(--ink); }
.adm-qa dt:first-child { margin-top: 0; }
.adm-qa dd { margin: 2px 0 0; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { #tab-admin .admin-toggle-icon, .adm-player-chev { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   SPELARVYN (v1.3.18) – bottenarket från tabellen, byggs i js/playersheet.js
   Uppifrån: topp (.ps-hero), nyckeltal (.ps-tiles), form/utmärkelser (.ps-ins),
   placeringskurvan (.ps-chart) och tipsen match för match (.ps-card – används
   även av trofé-dialogen). Allt går på variablerna → mörkt läge följer med.
   ═══════════════════════════════════════════════════════════════════════════ */
.ps-sheet { max-height: 92vh; overflow: hidden; }
.ps-sheet .faq-sheet-handle { position: absolute; top: 8px; left: 50%; z-index: 3; margin: 0 0 0 -18px; }
.ps-body { padding: 0 16px 32px; scrollbar-width: thin; }
.trophy-modal .ps-t { font-size: .8em; }
.ps-close {
    position: absolute; top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--surface); color: var(--ink-3); box-shadow: var(--shadow-1);
}
.ps-close:hover { color: var(--ink); }
.ps-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 60px; box-sizing: border-box; padding: 22px 58px 0 20px;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.45em; line-height: 1.3; letter-spacing: .03em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--surface); border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.ps-sheet.is-stuck .ps-topbar { opacity: 1; transform: none; }
.ps-sheet.is-stuck .ps-close { box-shadow: none; background: var(--tint-2); }
.ps-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ps-k { font-size: .8em; font-weight: 700; color: var(--ink-2); }

/* Topp: avatar med placeringsmedalj + namn. Guldton som tonar ut, märke som vattenstämpel */
.ps-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    margin: 0 -16px; padding: 34px 58px 20px 22px;
    background: linear-gradient(180deg, var(--gold-soft), var(--surface));
}
/* Vattenstämplar: ett märke (klubben eller ligans enda tävling) stort, eller en logga
   per tävling bredvid varandra – mindre ju fler de är */
.ps-hero-wms {
    position: absolute; right: -30px; top: 50%; z-index: -1; display: flex; align-items: center; gap: 4px;
    transform: translateY(-50%) rotate(10deg); opacity: .08; pointer-events: none; user-select: none;
}
.ps-hero-wms img { width: 190px; height: 190px; object-fit: contain; }
.ps-hero-wms.n2 { right: -24px; }
.ps-hero-wms.n2 img { width: 124px; height: 124px; }
.ps-hero-wms.n3 { right: -18px; }
.ps-hero-wms.n3 img { width: 92px; height: 92px; }
.ps-hero-wms.n4 { right: -14px; }
.ps-hero-wms.n4 img { width: 74px; height: 74px; }
[data-theme="dark"] .ps-hero-wms { opacity: .1; }
.ps-avatar {
    position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 2em; line-height: 1; padding-top: 3px; box-sizing: border-box; color: #fff;
    background: hsl(var(--h) 55% 48%); box-shadow: 0 0 0 3px var(--surface), 0 6px 16px rgba(20,28,46,.16);
    animation: kcPop .45s var(--spring) .08s backwards;
}
.ps-avatar.me { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1204; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--gold-deep); }
.ps-medal {
    position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 24px; padding: 2px 5px 0; box-sizing: border-box;
    display: grid; place-items: center; border-radius: 999px; font-style: normal;
    font-family: 'Bebas Neue', sans-serif; font-size: .5em; line-height: 1;
    background: var(--tint-2); color: var(--ink-2); box-shadow: 0 0 0 2.5px var(--surface);
    animation: kcPop .4s var(--spring) .35s backwards;
}
.ps-medal.m1 { background: linear-gradient(180deg, #f9d566, #f0b429); color: #3d2a00; }
.ps-medal.m2 { background: linear-gradient(180deg, #eef1f6, #c3ccd9); color: #333c4d; }
.ps-medal.m3 { background: linear-gradient(180deg, #edc19c, #cf8f5b); color: #40230c; }
.ps-hero-main { min-width: 0; }
.ps-name {
    margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 2.1em; font-weight: 400; line-height: 1; letter-spacing: .03em;
    color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-sub { margin: 5px 0 0; font-size: .88em; color: var(--ink-3); }
.ps-sub b { color: var(--ink); }
.ps-move { margin-left: 8px; font-size: .86em; font-weight: 700; }
.ps-move.up   { color: var(--green-ink); }
.ps-move.down { color: var(--red-ink); }

/* Nyckeltal: poäng + två ringar som fylls */
.ps-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
    padding: 12px 4px 10px; border-radius: var(--r-md); background: var(--tint-1); text-align: center;
}
.ps-tile > span { font-size: .78em; font-weight: 600; color: var(--ink-2); }
.ps-tile > small { font-size: .7em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ps-tile-pts > b {
    height: 58px; margin-bottom: 4px; display: grid; place-items: center; padding-top: 4px; box-sizing: border-box;
    font-family: 'Bebas Neue', sans-serif; font-size: 3em; font-weight: 400; line-height: 1; letter-spacing: .02em; color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
}
.ps-ring { position: relative; width: 58px; height: 58px; margin-bottom: 4px; display: grid; place-items: center; }
.ps-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring circle { fill: none; stroke-width: 3.4; }
.ps-ring-bg { stroke: var(--line-2); }
.ps-ring-fg { stroke: var(--c); stroke-linecap: round; animation: psRing 1s var(--ease) .15s backwards; }
.ps-ring.green  { --c: var(--green-ink); }
.ps-ring.violet { --c: var(--violet-ink); }
.ps-ring > b { font-family: 'Bebas Neue', sans-serif; font-size: 1.35em; font-weight: 400; line-height: 1; padding-top: 3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-ring > b small { margin-left: 1px; font-size: .6em; color: var(--ink-3); }
@keyframes psRing { from { stroke-dasharray: 0 100; } }

/* Form, utmärkelser, inbördes */
.ps-ins { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ps-ins-row { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 14px; box-sizing: border-box; font-size: .86em; color: var(--ink-2); }
.ps-ins-row + .ps-ins-row { border-top: 1px solid var(--line); }
.ps-ins-row .ps-k { font-size: .93em; }
.ps-ins-r { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--ink-3); }
.ps-ins-r.s-right { color: var(--green-ink); }
.ps-ins-r.s-wrong { color: var(--red-ink); }
.ps-tros { justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.ps-tro { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ps-tro .ic { width: 1.25em; height: 1.25em; }
.ps-tro b { font-family: 'Bebas Neue', sans-serif; font-size: 1.35em; font-weight: 400; line-height: 1; padding-top: 2px; color: var(--ink); }
.ps-tro.is-zero { opacity: .45; }
.t-unicorn .ic, .tr-unicorn .ps-card-tro         { color: var(--pink-ink); }
.t-sniper .ic, .tr-sniper .ps-card-tro           { color: var(--amber-ink); }
.t-nostradamus .ic, .tr-nostradamus .ps-card-tro { color: var(--violet-ink); }
.ps-vs { display: block; padding-block: 11px; line-height: 1.45; color: var(--ink-3); }
.ps-vs b { color: var(--ink); }

/* Placeringskurvan */
.ps-chart { margin-top: 10px; padding: 12px 14px 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ps-chart-read { margin-top: 2px; font-size: .76em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ps-chart-read.is-scrub { color: var(--gold-ink); font-weight: 600; }
.ps-chart-plot { position: relative; height: 112px; margin-top: 6px; touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; user-select: none; }
.ps-chart-in { position: absolute; inset: 10px 10px 10px 26px; }
.ps-chart-in::before, .ps-chart-in::after { content: ''; position: absolute; left: -4px; right: -4px; border-top: 1px dashed var(--line-2); }
.ps-chart-in::before { top: 0; border-top-color: var(--gold-line); }
.ps-chart-in::after  { bottom: 0; }
.ps-chart-in svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: psReveal 1.1s var(--ease) .1s backwards; }
.ps-chart-line { fill: none; stroke: var(--gold-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ps-chart-y { position: absolute; left: 0; width: 18px; text-align: right; font-size: .68em; font-weight: 700; line-height: 1; color: var(--ink-4); transform: translateY(-50%); }
.ps-chart-y.top { top: 10px; color: var(--gold-ink); }
.ps-chart-y.bot { top: calc(100% - 10px); }
.ps-chart-dot {
    position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--gold-deep);
    animation: kcPop .4s var(--spring) 1s backwards;
}
.ps-chart-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: psDot 2.2s ease-out 1.4s infinite; }
@keyframes psDot { from { box-shadow: 0 0 0 4px rgba(240,180,41,.55); } to { box-shadow: 0 0 0 15px rgba(240,180,41,0); } }
.ps-chart-dot.is-scrub { transition: left .1s linear, top .1s linear; }
.ps-chart-dot.is-scrub::after { animation: none; }
@keyframes psReveal { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } }

/* Listan: väljare + matchkort */
.ps-list-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 2px 10px; }
.ps-list-bar .ps-k { font-size: .92em; color: var(--ink); }
.ps-card {
    margin-bottom: 8px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1);
    animation: kcRise .4s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 8) * 35ms);
}
.ps-card-meta { padding: 9px 12px 0; text-align: center; font-size: .72em; font-weight: 600; color: var(--ink-3); }
.ps-card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 12px 10px; }
.ps-t { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .86em; font-weight: 700; color: var(--ink); }
.ps-t.home { justify-content: flex-end; text-align: right; }
/* Långa lagnamn bryts på två rader i stället för att klippas ("Djurgårdens / IF") */
.ps-t span { min-width: 0; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.ps-crest { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.ps-crest-none { border-radius: 50%; background: var(--tint-2); }
.ps-res {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.55em; line-height: 1; letter-spacing: .05em; white-space: nowrap; color: var(--ink);
    padding: 6px 10px 2px; border-radius: 10px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line);
}
.ps-res.wait { background: var(--tint-2); box-shadow: none; color: var(--ink-4); }
.ps-card-tip {
    display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 5px 12px; box-sizing: border-box;
    border-top: 1px solid var(--line); font-size: .84em; color: var(--ink-2);
}
.ps-card-k { color: var(--ink-3); }
.ps-card-tip > b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-card-tro { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ps-card-tro .ic { width: 1.2em; height: 1.2em; }
.ps-card-pts { margin-left: auto; font-family: 'Bebas Neue', sans-serif; font-size: 1.5em; line-height: 1; padding-top: 2px; color: var(--ink-4); }
.ps-card-pts small { margin-left: 2px; font-family: 'DM Sans', sans-serif; font-size: .5em; font-weight: 700; }
.ps-card-pts.plus { color: var(--green-ink); }
.ps-card-wait { margin-left: auto; font-size: .9em; color: var(--ink-3); white-space: nowrap; }
.ps-card.is-right .ps-card-tip { background: var(--green-soft); border-top-color: transparent; }
.ps-card.tr-sniper .ps-card-tip { background: var(--amber-soft); }
.ps-card.tr-sniper .ps-card-pts.plus { color: var(--amber-ink); }
.ps-card.tr-nostradamus .ps-card-tip { background: var(--violet-soft); }
.ps-card.tr-nostradamus .ps-card-pts.plus { color: var(--violet-ink); }
.ps-card.tr-unicorn .ps-card-tip {
    background: linear-gradient(90deg, var(--violet-soft), var(--pink-soft), var(--gold-soft), var(--violet-soft));
    background-size: 300% 100%; animation: rsUnicorn 9s linear infinite;
}
.ps-card.tr-unicorn .ps-card-pts.plus { color: var(--pink-ink); }
.ps-empty { padding: 28px 12px; text-align: center; font-size: .9em; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
    .ps-avatar, .ps-medal, .ps-ring-fg, .ps-chart-in svg, .ps-chart-dot, .ps-chart-dot::after, .ps-card, .ps-card.tr-unicorn .ps-card-tip { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÖRKT LÄGE (2026-10-01) – hela appen inne i en liga (flikar, admin, dialoger, spelarvy)
   Slås på med data-theme="dark" på <html> (sätts av js/theme.js; valet
   Automatiskt / Ljust / Mörkt sparas i localStorage under "kcTheme").
   Samma palett som de mörka vyerna (inloggning/hub): nästan svart botten,
   mörkgrå kort, guld som accent.
   Grundidén: appens färger är variabler (:root högst upp i filen) – här får
   samma variabler mörka värden, och då följer det mesta med av sig självt.
   I mörkt läge är *-ink LJUSA toner (text på mörk yta) och *-soft MÖRKA tonade
   ytor. Skuggor syns knappt mot mörkt, så korten skiljs åt med en något ljusare
   yta + tunn kant i stället. Efter variablerna följer de ställen där färgen var
   hårdkodad i det ljusa temat.
   De mörka vyerna (inloggning/hub/skapa liga) använder inte de här variablerna
   och påverkas därför inte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Väljaren Automatiskt / Ljust / Mörkt (Om-fliken + "Mer"-arket) – båda teman ── */
.theme-seg { display: flex; gap: 2px; padding: 4px; background: var(--tint-2); border-radius: 999px; }
.theme-seg-btn {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 6px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    color: var(--ink-3); font-family: 'DM Sans', sans-serif; font-size: .84em; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-seg-btn:hover { color: var(--ink); }
.theme-seg-btn.active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(20,28,46,.06), 0 3px 10px rgba(20,28,46,.08);
}
.theme-seg-btn.active .ic { stroke: var(--gold-deep); }
.more-sheet-theme { margin-top: 8px; padding: 12px 4px 2px; border-top: 1px solid var(--line); }
.more-sheet-theme-label {
    margin: 0 8px 8px; font-size: .7em; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
}

/* ── Variablerna i mörk tappning ── */
:root[data-theme="dark"] {
    --page:        #0a0c10;
    --surface:     #131824;
    --tint-1:      #181e2c;
    --tint-2:      #1f2636;
    --field:       #0d1119;
    --line:        #212939;
    --line-2:      #2e384c;

    --ink:         #e8edf5;
    --ink-2:       #c2cbd9;
    --ink-3:       #8c98ad;
    --ink-4:       #6b788f;

    /* --navy/--gold/--gold-2 är oförändrade: marin används som mörk text på guld */
    --gold-deep:   #f0b429;
    --gold-ink:    #f3c350;
    --gold-soft:   #2a2210;
    --gold-line:   #5a4716;

    --green-ink:   #4fd18b;
    --green-soft:  #10271c;
    --red-ink:     #f47c7c;
    --red-soft:    #2d1618;
    --violet-ink:  #a993fb;
    --violet-soft: #1f1a38;
    --amber-ink:   #f6ad4b;
    --amber-soft:  #2b1f0e;
    --pink-ink:    #f27fb8;
    --pink-soft:   #2c1423;

    --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
    --shadow-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
    --shadow-3: 0 2px 6px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.6);
    --shadow-gold: 0 6px 18px rgba(240,180,41,.18);
}

/* ── Skal: bakgrund, header, flikar ── */
[data-theme="dark"] #viewApp {
    background:
        radial-gradient(900px 380px at 50% -140px, rgba(240,180,41,.08), transparent 70%),
        radial-gradient(700px 520px at 105% 105%, rgba(70,100,170,.07), transparent 60%),
        var(--page);
    color-scheme: dark;   /* webbläsarens egna delar (rullningslist, datumväljare) blir mörka */
}
[data-theme="dark"] .app-header {
    background: linear-gradient(180deg, #151b28 0%, #0e121b 100%);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
/* Flikraden: i ljust läge lyfts en vit platta ur en grå skena. I mörkt läge är det
   tvärtom – skenan är nedsänkt (mörkare än sidan) och plattan ljusare. */
[data-theme="dark"] .app-tabs { background: var(--field); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .app-tab-indicator,
[data-theme="dark"] .app-tabs:not(.has-indicator) .app-tab.active {
    background: var(--tint-2);
    box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .theme-seg { background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .theme-seg-btn.active {
    background: var(--tint-2);
    box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
@media (max-width: 720px) {
    [data-theme="dark"] #viewApp .app-tabs-wrap {
        background: rgba(13,17,25,.92);
        box-shadow: 0 -6px 24px rgba(0,0,0,.35);
    }
}
[data-theme="dark"] .more-sheet-overlay.open,
[data-theme="dark"] .result-modal-overlay,
[data-theme="dark"] .ps-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .more-sheet { box-shadow: 0 -12px 40px rgba(0,0,0,.5); }

/* ── Tippa ── */
[data-theme="dark"] .score-cell.active { background: var(--surface) !important; }
[data-theme="dark"] .wc-multiplier-150 { background: #2e1c0c; color: #fb9a4b; border-color: #5c3414; }
[data-theme="dark"] .wc-multiplier-175 { border-color: #5c2626; }
[data-theme="dark"] .wc-multiplier-200 { border-color: #3d3270; }
[data-theme="dark"] .deadline-chip-open {
    background: linear-gradient(135deg, #10271c 0%, #0e1f18 100%);
    border-color: #1f4a35;
}
[data-theme="dark"] .deadline-chip-open .deadline-countdown { background: rgba(79,209,139,.12); box-shadow: none; }
/* :not(...) så att varm/het nedräkning (gul/röd) behåller sin färg */
[data-theme="dark"] .deadline-chip-open .deadline-countdown:not(.dl-warm):not(.dl-hot) { color: var(--green-ink); }
[data-theme="dark"] .md-hero { background: linear-gradient(180deg, #1f1a0e 0%, var(--surface) 60%); }
[data-theme="dark"] .mdc-slide.tipped { border-color: #2f7a51; }
/* Planen i matchup-banderollen: mörkgrön med svaga klippränder och svaga vita linjer */
[data-theme="dark"] .mu { --pl: rgba(255,255,255,.14); background: rgba(255,255,255,.14); }
[data-theme="dark"] .mu-side {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 18px, transparent 18px 36px),
        linear-gradient(180deg, #15281c 0%, #101f16 100%);
}
[data-theme="dark"] .mu-name { text-shadow: 0 1px 2px rgba(0,0,0,.7); }
[data-theme="dark"] .mu-crest { opacity: .3; }
[data-theme="dark"] .mdc-slide.current .mu-crest { opacity: .38; }

/* ── Tabell ── */
[data-theme="dark"] .lb-rank-1 td { background: #2a2210; border-bottom-color: var(--gold-line); }
[data-theme="dark"] .lb-rank-2 td { background: #1c2331; }
[data-theme="dark"] .lb-rank-3 td { background: #261a12; border-bottom-color: #3d2a1c; }
[data-theme="dark"] .lb-rank-1:hover td { background: #33290f; }
[data-theme="dark"] .lb-rank-2:hover td { background: #232b3b; }
[data-theme="dark"] .lb-rank-3:hover td { background: #2f2016; }
[data-theme="dark"] .rank-badge-2 { color: #26303f; }   /* mörk siffra på silverbrickan */
[data-theme="dark"] .title-chip-sniper      { border-color: #5a4116; }
[data-theme="dark"] .title-chip-nostradamus { border-color: #3d3270; }
[data-theme="dark"] .title-chip-unicorn     { border-color: #5c2848; }
[data-theme="dark"] .title-chip-sniper .title-chip-header      { color: var(--amber-ink); }
[data-theme="dark"] .title-chip-nostradamus .title-chip-header { color: var(--violet-ink); }
[data-theme="dark"] .title-chip-unicorn .title-chip-header     { color: var(--pink-ink); }
[data-theme="dark"] .sniper-pulse .ic,

/* ── Om, laddningslägen ── */
[data-theme="dark"] .om-brand {
    background:
        radial-gradient(420px 200px at 50% -40px, rgba(240,180,41,.14), transparent 70%),
        var(--surface);
}
[data-theme="dark"] #viewApp .kc-loader { --ball: #f4f6fa; --patch: #151924; --shadow: rgba(0,0,0,.7); }
[data-theme="dark"] .kc-skel-card::after {
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
}

/* ── Admin, dialogrutor, spelarvy, tipsrutor (steg 2) ──
   Det mesta här följer med via variablerna; nedan bara det som var hårdkodat. */
/* Webbläsarens egna delar (radioknappar, kryssrutor, rullningslist) i ark och dialoger
   som ligger utanför #viewApp */
[data-theme="dark"] .result-modal,
[data-theme="dark"] .ps-sheet,
[data-theme="dark"] .more-sheet { color-scheme: dark; }
/* Tipsrutorna ("Du har flera ligor", "Visste du?") – var vita med mörk text */
[data-theme="dark"] .btn-admin-danger:hover { background: #3a1c1e; }
[data-theme="dark"] .btn-admin-green:hover  { background: #163524; }
[data-theme="dark"] .deadline-status-badge.open   { border-color: #1f4a35; }
[data-theme="dark"] .deadline-status-badge.locked { border-color: #5c2626; }
[data-theme="dark"] #viewApp input[type="date"],
[data-theme="dark"] #viewApp input[type="datetime-local"],
[data-theme="dark"] .result-modal input[type="date"],
[data-theme="dark"] .result-modal input[type="datetime-local"] { color-scheme: dark; }

/* ── Tabell: tävlingskort + utmärkelser (2026-10-01) ──────────────────────────
   Gemensamt: rund vit "medaljong" med märke/ikon till vänster, text i mitten och en
   stor siffra (Bebas) till höger. --cc = tävlingens färg, --tc* = trofékortets ton. */
.lb-section-label { font-size: .72em; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.lb-stat { flex-shrink: 0; display: grid; justify-items: end; text-align: right; }
.lb-stat b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.3em; line-height: .9; letter-spacing: .02em; color: var(--ink); }
.lb-stat span { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.lb-comps { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lb-comp { padding: 14px 16px 13px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.lb-comp::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc); }
.lb-comp-top { display: flex; align-items: center; gap: 12px; }
.lb-comp-logo { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc) 16%, transparent), var(--shadow-1); }
.lb-comp-logo img { width: 28px; height: 28px; object-fit: contain; }
.lb-comp-main { flex: 1; min-width: 0; }
.lb-comp-name { font-weight: 700; font-size: 1.02em; line-height: 1.25; color: var(--ink); }
.lb-comp-sub { font-size: .78em; color: var(--ink-3); }
.lb-comp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lb-chip { background: var(--tint-1); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: .72em; color: var(--ink-3); white-space: nowrap; }
.lb-comp-prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .74em; color: var(--ink-3); white-space: nowrap; }
.lb-comp-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--tint-2); overflow: hidden; }
.lb-comp-bar i { display: block; height: 100%; min-width: 6px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 55%, #fff), var(--cc)); animation: lbBar .9s var(--ease-out) backwards; }
@keyframes lbBar { from { width: 0; } }

.lb-trophies { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lb-trophies:not(:has(.title-chip:not([style*="none"]))) { display: none; }
.lb-trophies .lb-section-label { grid-column: 1 / -1; margin-bottom: 0; }
.lb-trophies .title-chip {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(115deg, var(--tc-soft), color-mix(in srgb, var(--tc-soft) 30%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--tc) 28%, var(--surface)); color: var(--tc-ink); box-shadow: var(--shadow-1);
}
.lb-trophies .title-chip-sniper      { --tc: #f59e0b; --tc-soft: var(--amber-soft);  --tc-ink: var(--amber-ink); }
.lb-trophies .title-chip-nostradamus { --tc: #8b5cf6; --tc-soft: var(--violet-soft); --tc-ink: var(--violet-ink); }
.lb-trophies .title-chip-unicorn     { --tc: #ec4899; --tc-soft: var(--pink-soft);   --tc-ink: var(--pink-ink); }
.title-chip-medal { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--tc-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent), var(--shadow-1); transition: transform .45s var(--spring); }
.title-chip-medal .ic { width: 24px; height: 24px; }
.title-chip:hover .title-chip-medal { transform: rotate(-10deg) scale(1.08); }
.title-chip-main { flex: 1; min-width: 0; }
.lb-trophies .title-chip-header { display: block; margin-bottom: 2px; font-size: .68em; color: var(--tc-ink); opacity: .75; }
.lb-trophies .title-chip-name { font-size: 1.05em; line-height: 1.25; color: var(--tc-ink); overflow-wrap: break-word; }
.lb-trophies .lb-stat b, .lb-trophies .lb-stat span { color: var(--tc-ink); }
.lb-trophies .title-chip-detail { margin: 0; font-size: .66em; opacity: .75; }
/* Smal skärm: mindre medaljong och tätare kort, etiketten under siffran får radbrytas */
@media (max-width: 480px) {
    .lb-trophies .title-chip { gap: 10px; padding: 12px 14px; }
    .title-chip-medal { width: 40px; height: 40px; }
    .title-chip-medal .ic { width: 21px; height: 21px; }
    .lb-trophies .lb-stat span { max-width: 76px; line-height: 1.25; }
    .lb-comp-logo { width: 40px; height: 40px; }
    .lb-comp-logo img { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .lb-comp-bar i { animation: none; } .title-chip-medal { transition: none; } }