/* ═══════════════════════════════════════════
           DESIGN TOKENS
        ═══════════════════════════════════════════ */
        :root {
            --brand-dark:   #0a1628;
            --brand-navy:   #0d2149;
            --brand-blue:   #1a3a6e;
            --brand-mid:    #1e4db7;
            --brand-accent: #f0b429;   /* Gold */
            --brand-green:  #059669;
            --brand-red:    #dc2626;
            --surface:      #f4f6fb;
            --card-bg:      #ffffff;
            --border:       #e2e8f0;
            --text-main:    #1e293b;
            --text-muted:   #64748b;
            --radius-card:  .875rem;
            --radius-btn:   .5rem;
            --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
            --shadow-md:    0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
            --shadow-lg:    0 10px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
        }

        /* ═══════════════════════════════════════════
           BASE
        ═══════════════════════════════════════════ */
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: var(--surface);
            color: var(--text-main);
            padding-top: 66px;
            font-size: 0.9375rem;
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════
           NAVBAR
        ═══════════════════════════════════════════ */
        .navbar-main {
            background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-navy) 60%, var(--brand-blue) 100%);
            border-bottom: 1px solid rgba(255,255,255,.07);
            box-shadow: 0 2px 20px rgba(0,0,0,.35);
            min-height: 66px;
        }
        .navbar-brand-wrap {
            display: flex;
            align-items: center;
            gap: .6rem;
            text-decoration: none;
        }
        .navbar-brand-icon {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--brand-accent), #f59e0b);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
            color: var(--brand-dark);
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(240,180,41,.4);
        }
        .navbar-brand-text { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
        .navbar-brand-sub  { color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 400; }

        .nav-link-main {
            color: rgba(255,255,255,.75) !important;
            font-weight: 500;
            font-size: .875rem;
            padding: .45rem .8rem !important;
            border-radius: .4rem;
            transition: color .15s, background .15s;
            display: flex; align-items: center; gap: .4rem;
        }
        .nav-link-main:hover  { color: #fff !important; background: rgba(255,255,255,.1); }
        .nav-link-main.active { color: var(--brand-accent) !important; background: rgba(240,180,41,.12); }
        .nav-link-main i { font-size: 1rem; }

        .nav-user-btn {
            display: flex; align-items: center; gap: .5rem;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            color: #fff !important;
            border-radius: 2rem;
            padding: .35rem .9rem .35rem .5rem !important;
            font-weight: 500; font-size: .875rem;
            transition: background .15s;
        }
        .nav-user-btn:hover { background: rgba(255,255,255,.18) !important; }
        .nav-user-avatar {
            width: 26px; height: 26px;
            background: linear-gradient(135deg, var(--brand-accent), #f59e0b);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .75rem; font-weight: 700;
            color: var(--brand-dark);
        }
        .dropdown-menu-main {
            border: 1px solid var(--border);
            border-radius: .75rem;
            box-shadow: var(--shadow-lg);
            padding: .4rem;
            min-width: 210px;
        }
        .dropdown-item-main {
            border-radius: .45rem;
            padding: .55rem .85rem;
            font-size: .875rem;
            font-weight: 500;
            color: var(--text-main);
            display: flex; align-items: center; gap: .6rem;
            transition: background .12s;
        }
        .dropdown-item-main:hover { background: var(--surface); color: var(--text-main); }
        .dropdown-item-main.danger { color: var(--brand-red); }
        .dropdown-item-main.danger:hover { background: #fef2f2; }

        .btn-nav-login {
            background: linear-gradient(135deg, var(--brand-accent), #f59e0b);
            color: var(--brand-dark) !important;
            border: none;
            border-radius: 2rem;
            padding: .4rem 1.1rem !important;
            font-weight: 700; font-size: .875rem;
            transition: opacity .15s, transform .1s;
        }
        .btn-nav-login:hover { opacity: .9; transform: translateY(-1px); }

        /* ═══════════════════════════════════════════
           CARDS
        ═══════════════════════════════════════════ */
        .card {
            background: var(--card-bg);
            border: 1px solid var(--border) !important;
            border-radius: var(--radius-card) !important;
            box-shadow: var(--shadow-sm);
            transition: box-shadow .2s;
        }
        .card:hover { box-shadow: var(--shadow-md); }
        .card-header {
            background: transparent !important;
            border-bottom: 1px solid var(--border) !important;
            padding: .875rem 1.25rem !important;
            font-weight: 600;
            border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
            display: flex; align-items: center; gap: .5rem;
        }
        .card-header.accent-header {
            background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%) !important;
            color: #fff;
            border-bottom: none !important;
        }
        .card-header.accent-header .text-muted { color: rgba(255,255,255,.6) !important; }

        /* ═══════════════════════════════════════════
           HERO BANNER
        ═══════════════════════════════════════════ */
        .hero-banner {
            background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 50%, var(--brand-mid) 100%);
            border-radius: var(--radius-card);
            color: #fff;
            padding: 2rem 2rem;
            position: relative;
            overflow: hidden;
            border: none !important;
            box-shadow: var(--shadow-lg) !important;
        }
        .hero-banner::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 85% 20%, rgba(240,180,41,.18) 0%, transparent 60%),
                radial-gradient(ellipse at 10% 80%, rgba(30,77,183,.4) 0%, transparent 50%);
            pointer-events: none;
        }
        .hero-banner::after {
            content: '⚽';
            position: absolute;
            right: -10px; bottom: -30px;
            font-size: 9rem;
            opacity: .06;
            line-height: 1;
        }
        .hero-banner > * { position: relative; z-index: 1; }

        /* ═══════════════════════════════════════════
           QUICK-ACCESS TILES
        ═══════════════════════════════════════════ */
        .tile-btn {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: .4rem;
            padding: 1.1rem .5rem;
            border-radius: var(--radius-card);
            border: 1px solid var(--border);
            background: var(--card-bg);
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600; font-size: .875rem;
            transition: all .2s;
            box-shadow: var(--shadow-sm);
            min-height: 90px;
        }
        .tile-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--text-main); }
        .tile-btn .tile-icon {
            width: 44px; height: 44px;
            border-radius: .65rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
        }
        .tile-btn.tile-primary { background: var(--brand-mid); color: #fff; border-color: var(--brand-mid); }
        .tile-btn.tile-primary:hover { background: #1a3a6e; color: #fff; }
        .tile-btn.tile-primary .tile-icon { background: rgba(255,255,255,.15); color: #fff; }
        .tile-btn.tile-success { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
        .tile-btn.tile-success:hover { background: #047857; color: #fff; }
        .tile-btn.tile-success .tile-icon { background: rgba(255,255,255,.15); color: #fff; }
        .tile-btn .tile-icon { background: #f0f4ff; color: var(--brand-mid); }
        .tile-sub { font-size: .72rem; font-weight: 400; opacity: .7; }

        /* ═══════════════════════════════════════════
           TABLES
        ═══════════════════════════════════════════ */
        .table { color: var(--text-main); }
        .table th {
            background: #f8fafc !important;
            color: var(--text-muted);
            font-weight: 600;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            border-bottom: 1px solid var(--border) !important;
        }
        .table td { border-color: var(--border); vertical-align: middle; }
        .table-hover > tbody > tr:hover > td { background: #f8fafc; }
        .table-group-divider {
            background: #f1f5f9 !important;
            border-top: 2px solid var(--border) !important;
        }

        /* ═══════════════════════════════════════════
           BADGES
        ═══════════════════════════════════════════ */
        .badge { font-weight: 600; letter-spacing: .02em; border-radius: .35rem; }
        .badge-score {
            background: var(--brand-navy);
            color: #fff;
            font-size: .9rem;
            padding: .35rem .7rem;
            border-radius: .4rem;
            font-weight: 700;
            letter-spacing: .05em;
        }
        .badge-score.live {
            background: linear-gradient(135deg, var(--brand-red), #ef4444);
            animation: pulse-live 1.5s infinite;
        }
        @keyframes pulse-live {
            0%,100% { opacity: 1; } 50% { opacity: .7; }
        }
        .badge-group {
            background: #e0e7ff; color: #3730a3;
            font-size: .72rem; padding: .2rem .5rem;
            border-radius: .3rem; font-weight: 700;
        }

        /* ═══════════════════════════════════════════
           BUTTONS
        ═══════════════════════════════════════════ */
        .btn {
            border-radius: var(--radius-btn);
            font-weight: 600;
            transition: all .15s;
        }
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .btn-brand {
            background: linear-gradient(135deg, var(--brand-mid), var(--brand-blue));
            color: #fff; border: none;
        }
        .btn-brand:hover { color: #fff; opacity: .92; }
        .btn-gold {
            background: linear-gradient(135deg, var(--brand-accent), #f59e0b);
            color: var(--brand-dark); border: none; font-weight: 700;
        }
        .btn-gold:hover { color: var(--brand-dark); opacity: .92; }

        /* ═══════════════════════════════════════════
           SECTION HEADERS
        ═══════════════════════════════════════════ */
        .section-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex; align-items: center; gap: .6rem;
            margin-bottom: 1rem;
        }
        .section-title .section-icon {
            width: 32px; height: 32px;
            border-radius: .5rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }
        .section-hint { font-size: .82rem; color: var(--text-muted); }

        /* ═══════════════════════════════════════════
           ALERTS
        ═══════════════════════════════════════════ */
        .alert {
            border-radius: var(--radius-card);
            border: 1px solid transparent;
            font-weight: 500;
        }
        .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
        .alert-danger, .alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
        .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
        .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

        /* ═══════════════════════════════════════════
           MOBILE BOTTOM-NAV
        ═══════════════════════════════════════════ */
        @media (max-width: 991.98px) {
            body { padding-bottom: 74px; }
            .bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0; left: 0; right: 0;
                background: #fff;
                border-top: 1px solid var(--border);
                z-index: 1040;
                box-shadow: 0 -4px 20px rgba(0,0,0,.10);
            }
            .bottom-nav a {
                flex: 1;
                display: flex; flex-direction: column;
                align-items: center; justify-content: center;
                padding: 8px 2px 6px;
                font-size: .68rem;
                font-weight: 600;
                color: var(--text-muted);
                text-decoration: none;
                gap: 2px;
                transition: color .15s;
                border-top: 2px solid transparent;
            }
            .bottom-nav a i { font-size: 1.45rem; }
            .bottom-nav a.active {
                color: var(--brand-accent);
                border-top-color: var(--brand-accent);
            }
            .bottom-nav a.nav-cta {
                color: var(--text-muted);
                background: transparent;
                border-top: 2px solid transparent;
            }
            .bottom-nav a.nav-cta.active { 
                color: var(--brand-accent);
                background: transparent;
                border-top-color: var(--brand-accent);
            }
        }
        @media (min-width: 992px) { .bottom-nav { display: none; } }

        /* ═══════════════════════════════════════════
           TOUCH INPUT
        ═══════════════════════════════════════════ */
        @media (max-width: 767.98px) {
            input[type="number"] { font-size: 1.1rem !important; min-height: 48px; }
            .btn { min-height: 44px; }
            select.form-select { font-size: 1rem; min-height: 46px; }
            /* Scroll-Indikator Tabellen */
            .table-responsive {
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: none;
            }
            .table-responsive::after {
                content: '';
                position: sticky;
                right: 0;
                top: 0;
                width: 24px;
                background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
                pointer-events: none;
                flex-shrink: 0;
            }
            /* Compact hero on xs */
            .hero-banner { padding: 1.2rem 1rem; }
            .hero-banner .btn-lg { font-size: .95rem; padding: .5rem 1rem !important; }
            /* Section titles smaller */
            .section-title { font-size: 1rem; }
            /* Cards less padding */
            .card-header { padding: .7rem 1rem !important; }
        }

        /* ═══════════════════════════════════════════
           UTILS
        ═══════════════════════════════════════════ */
        @media (min-width: 576px) {
            .border-sm-end { border-right: 1px solid var(--border) !important; }
        }
        footer {
            margin-top: 3rem; padding: 1.5rem 0;
            border-top: 1px solid var(--border); color: var(--text-muted);
            font-size: .82rem;
        }