:root {
            --bg: #F4F5F7;
            --surface: #FFFFFF;
            --surface-2: #F8F9FA;
            --border: #E5E7EB;
            --border-2: #D1D5DB;
            --text-1: #111827;
            --text-2: #374151;
            --text-3: #6B7280;
            --text-4: #9CA3AF;
            --accent: #1D4ED8;
            --accent-dim: #EFF6FF;
            --accent-2: #1E40AF;
            --success: #059669;
            --success-dim: #ECFDF5;
            --warn: #D97706;
            --warn-dim: #FFFBEB;
            --danger: #DC2626;
            --danger-dim: #FEF2F2;
            --info: #0891B2;
            --info-dim: #ECFEFF;
            --radius-sm: 6px;
            --radius: 8px;
            --radius-lg: 12px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        [data-theme="dark"] {
            --bg: #0F1117;
            --surface: #1A1D27;
            --surface-2: #22263A;
            --border: #2D3148;
            --border-2: #3D4166;
            --text-1: #F1F5F9;
            --text-2: #CBD5E1;
            --text-3: #94A3B8;
            --text-4: #64748B;
            --accent: #3B82F6;
            --accent-dim: #1E3A5F;
            --accent-2: #60A5FA;
            --success: #10B981;
            --success-dim: #064E3B;
            --warn: #F59E0B;
            --warn-dim: #451A03;
            --danger: #EF4444;
            --danger-dim: #450A0A;
            --info: #22D3EE;
            --info-dim: #0C3844;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        body {
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            background: var(--bg);
            color: var(--text-2);
            line-height: 1.6;
            transition: background .2s, color .2s;
            margin: 0
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Syne', sans-serif;
            color: var(--text-1)
        }

        a {
            color: var(--accent);
            text-decoration: none
        }

        a:hover {
            color: var(--accent-2)
        }

        /* Layout */
        .app-layout {
            display: flex;
            min-height: 100vh
        }

        /* Sidebar */
        .sidebar {
            width: 220px;
            flex-shrink: 0;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            transition: width .25s ease, background .2s, border-color .2s;
            overflow-x: hidden
        }

        .sidebar.collapsed {
            width: 0;
            border-right: none
        }

        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--border)
        }

        .brand-icon {
            width: 30px;
            height: 30px;
            background: var(--accent);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .brand-icon svg {
            width: 16px;
            height: 16px
        }

        .brand-name {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-1);
            letter-spacing: -.3px
        }

        .sidebar-nav {
            padding: 12px 10px;
            flex: 1
        }

        .nav-section-label {
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .8px;
            color: var(--text-4);
            padding: 8px 10px 4px
        }

        .nav-item-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--radius);
            color: var(--text-3);
            font-size: 13.5px;
            font-weight: 400;
            transition: background .15s, color .15s;
            margin-bottom: 2px
        }

        .nav-item-link:hover {
            background: var(--surface-2);
            color: var(--text-1)
        }

        .nav-item-link.active {
            background: var(--accent-dim);
            color: var(--accent);
            font-weight: 500
        }

        .nav-item-link .nav-icon {
            width: 16px;
            text-align: center;
            font-size: 13px
        }

        .sidebar-footer {
            padding: 12px 10px;
            border-top: 1px solid var(--border)
        }

        .user-chip {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: var(--radius);
            background: var(--surface-2)
        }

        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--accent-dim);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            flex-shrink: 0
        }

        .user-info .user-name {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-1);
            line-height: 1.2
        }

        .user-info .user-role {
            font-size: 11px;
            color: var(--text-4)
        }

        /* Main */
        .main-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column
        }

        /* Topbar */
        .topbar {
            height: 52px;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 90;
            transition: background .2s
        }

        .topbar-title {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-1);
            flex: 1
        }

        .sidebar-toggle {
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: transparent;
            color: var(--text-3);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            transition: all .15s;
            flex-shrink: 0
        }

        .sidebar-toggle:hover {
            background: var(--surface-2);
            color: var(--text-1);
            border-color: var(--border-2)
        }

        .topbar-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 20px;
            background: var(--success-dim);
            color: var(--success)
        }

        .topbar-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success)
        }

        .btn-primary-sm {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background .15s
        }

        .btn-primary-sm:hover {
            background: var(--accent-2);
            color: #fff
        }

        .btn-outline-sm {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: transparent;
            color: var(--text-2);
            border: 1px solid var(--border-2);
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all .15s;
            text-decoration: none
        }

        .btn-outline-sm:hover {
            background: var(--surface-2);
            color: var(--text-1)
        }

        /* Page body */
        .page-body {
            padding: 24px;
            flex: 1
        }

        /* Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin-bottom: 20px
        }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: box-shadow .15s
        }

        .stat-card:hover {
            box-shadow: var(--shadow)
        }

        .stat-label {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--text-4)
        }

        .stat-value {
            font-family: 'DM Mono', monospace;
            font-size: 26px;
            font-weight: 500;
            color: var(--text-1);
            line-height: 1
        }

        .stat-sub {
            font-size: 11.5px;
            color: var(--text-3)
        }

        .stat-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            margin-bottom: 4px
        }

        .stat-icon.blue {
            background: var(--accent-dim);
            color: var(--accent)
        }

        .stat-icon.green {
            background: var(--success-dim);
            color: var(--success)
        }

        .stat-icon.amber {
            background: var(--warn-dim);
            color: var(--warn)
        }

        .stat-icon.info {
            background: var(--info-dim);
            color: var(--info)
        }



        /* Table card */
        .table-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden
        }

        .table-card-header {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap
        }

        .table-card-title {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-1);
            flex: 1
        }

        .table-card-footer {
            padding: 10px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            background: var(--surface-2)
        }

        .footer-meta {
            font-size: 11.5px;
            color: var(--text-4)
        }

        .footer-meta b {
            color: var(--text-3);
            font-weight: 500
        }

        /* DataTables */
        div.dataTables_wrapper {
            padding: 0
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            padding: 14px 20px 0
        }

        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            color: var(--text-3);
            font-size: 13px
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid var(--border-2);
            border-radius: var(--radius);
            background: var(--bg);
            color: var(--text-1);
            padding: 5px 10px;
            font-size: 13px;
            outline: none
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(29, 78, 216, .12)
        }

        .dataTables_wrapper .dataTables_length select {
            border: 1px solid var(--border-2);
            border-radius: var(--radius);
            background: var(--bg);
            color: var(--text-1);
            padding: 4px 8px;
            font-size: 13px
        }

        .dataTables_wrapper .dataTables_info {
            padding: 10px 20px;
            font-size: 12px;
            color: var(--text-4)
        }

        .dataTables_wrapper .dataTables_paginate {
            padding: 10px 20px
        }

        .dataTables_wrapper .paginate_button {
            border-radius: var(--radius-sm) !important;
            font-size: 12px !important;
            color: var(--text-3) !important;
            border: 1px solid transparent !important;
            padding: 4px 9px !important
        }

        .dataTables_wrapper .paginate_button:hover {
            background: var(--surface-2) !important;
            border-color: var(--border) !important;
            color: var(--text-1) !important
        }

        .dataTables_wrapper .paginate_button.current,
        .dataTables_wrapper .paginate_button.current:hover {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
            color: #fff !important
        }

        .dataTables_wrapper .paginate_button.disabled,
        .dataTables_wrapper .paginate_button.disabled:hover {
            color: var(--text-4) !important
        }

        table.dataTable {
            border-collapse: collapse !important;
            width: 100% !important
        }

        table.dataTable thead th {
            background: var(--surface-2);
            color: var(--text-4);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .5px;
            padding: 10px 14px !important;
            border-bottom: 1px solid var(--border) !important;
            border-top: none !important;
            white-space: nowrap
        }

        table.dataTable tbody td {
            padding: 9px 14px !important;
            font-size: 13px;
            border-bottom: 1px solid var(--border) !important;
            color: var(--text-2);
            vertical-align: middle
        }

        table.dataTable tbody tr:last-child td {
            border-bottom: none !important
        }

        table.dataTable {
            --bs-table-bg: transparent;
            --bs-table-striped-bg: transparent;
            --bs-table-hover-bg: transparent;
            --bs-table-border-color: var(--border)
        }

        table.dataTable tbody tr td {
            background: #ffffff !important
        }

        table.dataTable tbody tr.odd td {
            background: #ffffff !important
        }

        table.dataTable tbody tr.even td {
            background: #eef1f8 !important
        }

        table.dataTable tbody tr:hover td {
            background: #e8edf7 !important
        }

        table.dataTable tbody tr.watchlist-row td {
            background: var(--warn-dim) !important
        }

        .hps-cell,
        .mono-cell {
            font-family: 'DM Mono', monospace;
            font-size: 12.5px;
            font-weight: 500;
            color: var(--accent);
            text-align: right;
            white-space: nowrap
        }

        .badge-stage {
            display: inline-block;
            font-size: 11px;
            font-weight: 500;
            padding: 2px 7px;
            border-radius: 4px;
            background: var(--surface-2);
            color: var(--text-3);
            border: 1px solid var(--border)
        }

        /* ── DARK MODE: tabel ────────────────────────────────────── */
        [data-theme="dark"] .table-card {
            background: var(--bg);
            border-color: var(--border)
        }

        [data-theme="dark"] #tendersTable {
            --bs-table-bg: transparent;
            --bs-table-color: var(--text-2);
            --bs-table-striped-bg: transparent;
            --bs-table-hover-bg: transparent;
            --bs-table-border-color: var(--border)
        }

        [data-theme="dark"] .table-card-header {
            background: var(--bg);
            border-color: var(--border)
        }

        [data-theme="dark"] .table-card-footer {
            background: var(--bg);
            border-color: var(--border)
        }

        [data-theme="dark"] table.dataTable thead th {
            background: var(--bg);
            color: var(--text-4);
            border-bottom: 1px solid var(--border) !important;
            letter-spacing: .6px
        }

        [data-theme="dark"] table.dataTable tbody td {
            color: var(--text-2) !important;
            border-bottom: 1px solid var(--border) !important
        }

        [data-theme="dark"] table.dataTable tbody tr td {
            background: var(--surface) !important
        }

        [data-theme="dark"] table.dataTable tbody tr.odd td {
            background: var(--surface) !important
        }

        [data-theme="dark"] table.dataTable tbody tr.even td {
            background: var(--surface-2) !important
        }

        [data-theme="dark"] table.dataTable tbody tr:hover td {
            background: var(--border) !important
        }

        [data-theme="dark"] .hps-cell,
        [data-theme="dark"] .mono-cell {
            color: var(--accent-2);
            font-weight: 600
        }

        [data-theme="dark"] .badge-stage {
            background: transparent;
            color: var(--text-3);
            border: none;
            padding: 0;
            font-size: 13px;
            border-radius: 0
        }

        [data-theme="dark"] table.dataTable tbody tr.watchlist-row td {
            background: var(--warn-dim)
        }

        [data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
            background: var(--surface);
            border-color: var(--border);
            color: var(--text-1)
        }

        [data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
            color: var(--text-4)
        }

        [data-theme="dark"] .dataTables_wrapper .dataTables_length select {
            background: var(--surface);
            border-color: var(--border);
            color: var(--text-1)
        }

        [data-theme="dark"] .dataTables_wrapper .dataTables_info {
            color: var(--text-4)
        }

        [data-theme="dark"] .dataTables_wrapper .dataTables_length label,
        [data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
            color: var(--text-3)
        }

        [data-theme="dark"] .dataTables_wrapper .paginate_button {
            color: var(--text-4) !important
        }

        [data-theme="dark"] .dataTables_wrapper .paginate_button:hover {
            background: var(--surface) !important;
            color: var(--text-1) !important;
            border-color: var(--border) !important
        }

        [data-theme="dark"] table.dataTable tbody td a {
            color: var(--accent-2)
        }

        [data-theme="dark"] table.dataTable tbody td a:hover {
            color: var(--accent)
        }

        [data-theme="dark"] .footer-meta {
            color: var(--text-4)
        }

        [data-theme="dark"] .footer-meta b {
            color: var(--text-3)
        }

        /* Offcanvas */
        .offcanvas {
            background: var(--surface);
            border-left: 1px solid var(--border);
            width: 340px !important
        }

        .offcanvas-header {
            border-bottom: 1px solid var(--border);
            padding: 16px 20px
        }

        .offcanvas-title {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-1)
        }

        .offcanvas-body {
            padding: 20px
        }

        .filter-group {
            margin-bottom: 20px
        }

        .filter-label {
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--text-4);
            margin-bottom: 8px;
            display: block
        }

        .filter-scroll {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 8px;
            background: var(--bg);
            scrollbar-width: thin;
            scrollbar-color: var(--border-2) transparent
        }

        .form-check-input {
            border-color: var(--border-2);
            background-color: var(--bg)
        }

        .form-check-input:checked {
            background-color: var(--accent);
            border-color: var(--accent)
        }

        .form-check-label {
            font-size: 13px;
            color: var(--text-2)
        }

        .form-control,
        .form-select {
            background: var(--bg);
            border: 1px solid var(--border-2);
            border-radius: var(--radius);
            color: var(--text-1);
            font-size: 13px;
            padding: 7px 10px
        }

        .form-control:focus,
        .form-select:focus {
            background: var(--bg);
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(29, 78, 216, .12);
            color: var(--text-1)
        }

        .input-group-text {
            background: var(--surface-2);
            border-color: var(--border-2);
            color: var(--text-3);
            font-size: 13px
        }

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
            border: 1px solid var(--border-2);
            border-radius: var(--radius);
            padding: 6px 8px;
            min-height: 38px;
            background: var(--bg);
            cursor: text
        }

        .tag-container:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(29, 78, 216, .12)
        }

        .tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--accent-dim);
            color: var(--accent);
            border-radius: 4px;
            font-size: 12px;
            padding: 2px 7px
        }

        .tag-remove {
            cursor: pointer;
            opacity: .6;
            font-size: 10px
        }

        .tag-remove:hover {
            opacity: 1
        }

        .tag-input {
            border: none;
            outline: none;
            font-size: 13px;
            background: transparent;
            color: var(--text-1);
            min-width: 120px;
            flex: 1
        }

        .filter-actions {
            display: flex;
            gap: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
            margin-top: 4px
        }

        .btn-danger-outline {
            flex: 1;
            padding: 8px;
            border: 1px solid var(--danger);
            border-radius: var(--radius);
            background: transparent;
            color: var(--danger);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background .15s;
            text-align: center;
            text-decoration: none;
            display: inline-block
        }

        .btn-danger-outline:hover {
            background: var(--danger-dim);
            color: var(--danger)
        }

        .btn-save {
            flex: 2;
            padding: 8px;
            border: none;
            border-radius: var(--radius);
            background: var(--accent);
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background .15s
        }

        .btn-save:hover {
            background: var(--accent-2)
        }

        /* Dark mode toggle */
        .theme-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            background: var(--border-2);
            border-radius: 10px;
            cursor: pointer;
            border: none;
            transition: background .2s;
            flex-shrink: 0
        }

        .theme-toggle::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            transition: transform .2s
        }

        [data-theme="dark"] .theme-toggle {
            background: var(--accent)
        }

        [data-theme="dark"] .theme-toggle::after {
            transform: translateX(16px)
        }

        /* ── MOBILE RESPONSIVE ────────────────────────────────── */
        @media (max-width: 768px) {

            /* Sidebar: slide-in overlay */
            .sidebar {
                position: fixed;
                left: 0;
                top: 0;
                height: 100vh;
                width: 260px;
                transform: translateX(-100%);
                transition: transform .25s ease;
                z-index: 200;
                box-shadow: 4px 0 20px rgba(0,0,0,.15);
                display: flex
            }
            .sidebar.mobile-open {
                transform: translateX(0)
            }
            .sidebar.collapsed {
                width: 260px;
                border-right: 1px solid var(--border)
            }

            /* Overlay backdrop */
            .sidebar-backdrop {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.4);
                z-index: 199
            }
            .sidebar-backdrop.active {
                display: block
            }

            /* Topbar */
            .topbar {
                padding: 0 12px;
                gap: 8px;
                height: 48px
            }
            .topbar-title {
                font-size: 13px
            }
            .topbar-badge {
                display: none
            }
            .btn-primary-sm,
            .btn-outline-sm {
                padding: 5px 10px;
                font-size: 12px;
                gap: 4px
            }
            .btn-outline-sm .fa-trophy {
                display: none
            }

            /* Page body */
            .page-body {
                padding: 12px
            }

            /* Stats grid */
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 12px
            }
            .stat-card {
                padding: 12px 14px;
                gap: 4px
            }
            .stat-value {
                font-size: 20px
            }
            .stat-label {
                font-size: 10px
            }
            .stat-sub {
                font-size: 10px
            }
            .stat-icon {
                width: 26px;
                height: 26px;
                font-size: 12px;
                margin-bottom: 2px
            }

            /* Table card: horizontal scroll */
            .table-card {
                border-radius: var(--radius);
                overflow: hidden
            }
            .table-card-header {
                padding: 10px 14px
            }
            .table-card-title {
                font-size: 13px
            }
            .table-card > table,
            .table-card > div:has(table) {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch
            }
            table.dataTable thead th {
                font-size: 10px;
                padding: 8px 10px !important;
                white-space: nowrap
            }
            table.dataTable tbody td {
                font-size: 12px;
                padding: 7px 10px !important;
                white-space: nowrap
            }
            .hps-cell,
            .mono-cell {
                font-size: 11.5px
            }

            /* DataTables controls */
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                padding: 8px 12px 0
            }
            .dataTables_wrapper .dataTables_filter input {
                font-size: 12px;
                padding: 5px 8px;
                width: 120px !important
            }
            .dataTables_wrapper .dataTables_info {
                padding: 8px 12px;
                font-size: 11px
            }
            .dataTables_wrapper .dataTables_paginate {
                padding: 8px 12px
            }
            .dataTables_wrapper .paginate_button {
                padding: 3px 7px !important;
                font-size: 11px !important
            }

            /* Footer */
            .table-card-footer {
                padding: 8px 12px;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px
            }
            .footer-meta {
                font-size: 10px
            }

            /* Offcanvas filter */
            .offcanvas {
                width: 85vw !important;
                max-width: 340px;
                z-index: 1055 !important
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 6px
            }
            .stat-card {
                padding: 10px 12px
            }
            .stat-value {
                font-size: 18px
            }
            .topbar-title {
                font-size: 12px
            }
            /* Hide "Pemenang" text on very small screens */
            .btn-outline-sm span {
                display: none
            }
        }