/**
 * Lottologia - Internal Pages CSS
 * WCAG 2.0 AA compliant - minimum 16px (1rem) font size
 */

/* Breadcrumb */
.breadcrumb {
    background: var(--gray-100);
    padding: 0.75rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.breadcrumb a {
    color: var(--primary);
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .separator {
    margin: 0 0.5rem;
    color: var(--gray-600);
}
.breadcrumb .current {
    color: var(--gray-700);
}
.breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.breadcrumb-links {
    flex: 1;
    min-width: 0;
}
.intraday-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 1rem;
}
.intraday-countdown-label {
    color: var(--gray-600);
}
.intraday-countdown-timer {
    font-weight: 700;
    font-size: 1.25rem;
    font-family: monospace;
    color: var(--primary);
    min-width: 3.5em;
    text-align: center;
}
.intraday-countdown-timer.updating {
    animation: pulse-update 1s ease-in-out infinite;
}
@keyframes pulse-update {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@media (max-width: 600px) {
    .intraday-countdown-label { display: none; }
}

/* Hide DynamicTable internal title when card-header already provides it */
#lastExtractionsTable .dt-title {
    display: none;
}

/* Page Layout */
.page-layout {
    display: flex;
    flex: 1;
    position: relative;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--white);
    border-right: 1px solid var(--gray-200);
    flex-shrink: 0;
    position: relative;
}

.sidebar-toggle {
    display: none;
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}
.sidebar-toggle .toggle-icon {
    margin-right: 0.5rem;
}

.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-home-link {
    display: block;
    padding: 0.9rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    border-bottom: 2px solid var(--gray-200);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.sidebar-home-link:hover {
    background: var(--gray-50);
}
.sidebar-home-link.active {
    background: var(--primary);
    color: var(--white);
}

.sidebar-section {
    border-bottom: 1px solid var(--gray-100);
}

.sidebar-title {
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-800);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.sidebar-title:hover {
    background: var(--gray-50);
}
.sidebar-title::after {
    content: '\25BC';
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: transform 0.2s;
}
.sidebar-title.active::after {
    transform: rotate(180deg);
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.sidebar-menu.open {
    max-height: 500px;
}
.sidebar-menu li a {
    display: block;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    font-size: 1rem;
    color: var(--gray-700);
    transition: all 0.2s;
}
.sidebar-menu li a:hover {
    background: var(--primary);
    color: var(--white);
}
.sidebar-menu li.active > a {
    background: #e8eeff;
    color: var(--primary);
    font-weight: 600;
    padding-left: 1.5rem;
}

/* Left Sidebar Ad: sticky below the fixed header (52px + 8px gap) */
.sidebar > .dp-only {
    position: sticky;
    top: 60px;
}

/* Left Ad Sidebar — positioned in the left margin, outside the container */
.sidebar-left {
    width: 200px;
    flex-shrink: 0;
    margin-left: -200px;
    padding: 1rem 0.5rem;
    display: none;
    align-self: flex-start;
    position: sticky;
    top: 60px;
}
@media (min-width: 1700px) {
    .sidebar-left {
        display: block;
    }
}

/* Right Ad Sidebar — positioned in the right margin, outside the container */
.sidebar-right {
    width: 200px;
    flex-shrink: 0;
    margin-right: -200px;
    padding: 1rem 0.5rem;
    display: none;
    align-self: flex-start;
    position: sticky;
    top: 60px;
}
@media (min-width: 1700px) {
    .sidebar-right {
        display: block;
    }
}

/* Main Content Inner */
.main-content-inner {
    flex: 1;
    padding: 1.5rem;
    background: var(--gray-50);
    min-width: 0;
}

/* Page Header */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.page-subtitle {
    color: var(--gray-700);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 0;
}
.page-description {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
}

/* Content Cards */
.content-card {
    background: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.card-header {
    padding: 1rem 1.25rem;
    background: var(--primary);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.card-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}
.card-header.accent {
    background: var(--accent);
    color: var(--gray-800);
}
.card-header.green {
    background: var(--green);
}
.card-header.purple {
    background: var(--purple);
}
.card-header.cyan {
    background: var(--cyan);
}
.card-header.red {
    background: var(--red);
}
.card-header.light-blue {
    background: var(--light-blue);
    color: var(--gray-800);
}
.card-header.light-blue .stats-controls select {
    border-color: darkblue;
    background: darkblue;
    color: #fff;
}
.card-header.light-blue .stats-controls select:focus {
    border-color: navy;
    background: navy;
}
.card-header.light-blue .stats-controls select option {
    background: darkblue;
    color: #fff;
}
.card-header-selects {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.card-header-selects select {
    font: inherit;
    font-size: .85rem;
    padding: .25rem .5rem .25rem .4rem;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 5px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.card-header-selects select:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.7);
}

.card-header-selects select option {
    background: #333;
    color: #fff;
}

.extraction-info {
    font-size: 1rem;
    opacity: 0.9;
}
.section-caption {
    margin: 0;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    color: var(--gray-600);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.card-content {
    padding: 1.5rem;
    line-height: 1.8;
    color: var(--gray-700);
    font-size: 1rem;
}
.card-content p {
    margin: 0 0 1rem 0;
}
.card-content p:last-child {
    margin-bottom: 0;
}
.card-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 1.5rem 0 0.75rem 0;
}

/* Extraction Numbers */
.extraction-numbers {
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.number.oro {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.oro-section {
    padding: 0 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.oro-label {
    font-size: 1rem;
    color: var(--gray-700);
    font-weight: 500;
}

.next-extraction {
    padding: 1rem 1.5rem;
    background: var(--gray-100);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: var(--gray-700);
}
.countdown {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    font-family: monospace;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Bar Charts (old section-page style, scoped under .bar-item) */
.bar-chart {
    padding: 1.25rem 1.5rem;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.bar-item:last-child {
    margin-bottom: 0;
}
.bar-item .bar-label {
    width: 32px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-800);
    text-align: right;
    flex-shrink: 0;
}
.bar-item .bar-container {
    flex: 1;
    height: 28px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}
.bar-value {
    padding: 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Bar Colors */
.bar-red { background: linear-gradient(90deg, var(--bar-red-start) 0%, var(--bar-red-end) 100%); }
.bar-orange { background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); }
.bar-yellow { background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%); }
.bar-green { background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); }
.bar-blue { background: linear-gradient(90deg, var(--bar-blue-start) 0%, var(--bar-blue-end) 100%); }
.bar-purple { background: linear-gradient(90deg, #a855f7 0%, #9333ea 100%); }
.bar-pink { background: linear-gradient(90deg, #ec4899 0%, #db2777 100%); }
.bar-cyan { background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%); }
.bar-teal { background: linear-gradient(90deg, #14b8a6 0%, #0d9488 100%); }
.bar-indigo { background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%); }

/* ── Ranking Controls ─────────────────────────────────────── */

.ranking-controls {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.ranking-controls label {
    font-weight: 600;
    font-size: 1rem;
}
.ranking-controls select {
    padding: .4rem .6rem;
    font-size: 1rem;
    border: 1px solid var(--gray-200, #ccc);
    border-radius: 4px;
    background: #fff;
}

/* ── Summary Cards ────────────────────────────────────────── */

.summary-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}
.summary-number-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.summary-big-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    min-height: 4.5rem;
    padding: 0.5rem 1.2rem;
    border-radius: 0.75rem;
    color: #fff;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
}
.summary-numbers-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.summary-numbers-row .summary-big-number {
    font-size: 2.2rem;
    min-width: 3.2rem;
    min-height: 3.2rem;
    padding: 0.2rem 0.4rem;
}
.summary-number-sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: #999;
    line-height: 1;
}
.summary-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
}
.summary-date {
    font-size: 1rem;
    color: #888;
}
.delay-accent { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.delay-dark-accent { background: linear-gradient(135deg, #1e3a5f, #0a1628); }
.freq-accent { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.freq-light-accent { background: linear-gradient(135deg, #f87171, #e57373); }
.freq-dark-accent { background: linear-gradient(135deg, #7f1d1d, #450a0a); }
.history-accent { background: linear-gradient(135deg, #374151, #111827); }
.summary-wheel-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #00008b;
    letter-spacing: 0.03em;
}
.text-muted { color: #888; font-style: italic; }

/* ── Themed Card Headers ──────────────────────────────────── */

.delay-header { background: var(--blue-accent) !important; color: #fff !important; }
.delay-header h2 { color: #fff !important; }
.freq-header { background: var(--red) !important; color: #fff !important; }
.freq-header h2 { color: #fff !important; }
.freq-light-header { background: #f87171 !important; color: #fff !important; }
.freq-light-header h2 { color: #fff !important; }
.level-header { background: var(--blue-accent) !important; color: #fff !important; }
.level-header h2 { color: #fff !important; }
.history-header { background: var(--gray-800, #1f2937) !important; color: #fff !important; }
.history-header h2 { color: #fff !important; }
.trend-header { background: #000 !important; color: #fff !important; }
.trend-header h2 { color: #fff !important; }
.distribution-header { background: var(--green, #16a34a) !important; color: #fff !important; }
.distribution-header h2 { color: #fff !important; }

/* ── Utility Classes ─────────────────────────────────────── */

.initially-hidden { display: none; }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: .75rem; }
.text-hint { color: #64748b; margin-top: .5rem; }
.inline-row { display: flex; align-items: center; gap: .5rem; }
.info-list { margin: 1rem 0; padding-left: 1.5rem; }

/* ── Results Table (ranking tables with bar charts) ───────── */

.results-table-wrapper {
    overflow-x: auto;
    margin: 0;
}
.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.results-table th {
    padding: .6rem .75rem;
    text-align: left;
    font-weight: 700;
    border-bottom: 2px solid var(--gray-200, #ddd);
    white-space: nowrap;
    font-size: 1rem;
    background: var(--gray-100, #f1f5f9);
}
.results-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--gray-100, #eee);
    font-size: 1rem;
}
.results-table tr.odd {
    background: var(--table-odd-bg, #edf2fc);
}
.results-table .row-num {
    width: 2.5rem;
    text-align: center;
    color: #666;
    font-size: 1rem;
}
.results-table .series-cell {
    font-family: monospace;
    font-size: 1rem;
    white-space: nowrap;
    font-weight: 700;
}
.results-table .bar-cell {
    width: 50%;
}

/* Themed table headers */
.delay-table th { background: #e8f0fe; color: var(--accent-color, var(--blue-accent)); }
.freq-table th  { background: #fde8e8; color: var(--accent-color, var(--red)); }

/* ── Bar Charts (inside ranking tables) ───────────────────── */

.bar-cell .bar-container {
    display: flex;
    align-items: center;
    gap: .4rem;
    position: relative;
}
.bar-fill {
    height: 1.6rem;
    border-radius: 3px;
    min-width: 2px;
    transition: width .3s;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.delay-bar { background: var(--blue-accent); }
.freq-bar { background: var(--red); }
.bar-fill .bar-label {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 .5rem;
    white-space: nowrap;
}
.bar-label-outside {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    color: #333;
    padding-left: .3rem;
}

/* ── Freq Min/Max Table ──────────────────────────────────── */

.freq-minmax-table .col-rank {
    width: 2.5rem;
    text-align: center;
}
.freq-minmax-table .col-series {
    white-space: nowrap;
}
.results-table .series-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.results-table .series-badges .num-badge {
    font-size: 0.95rem;
    padding: 0.2rem 0.4rem;
    min-width: 1.8rem;
}
.freq-minmax-table .col-minmax-val,
.freq-minmax-table .col-freq-val {
    text-align: center;
    white-space: nowrap;
}
.freq-minmax-table .minmax-value {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
}
.freq-minmax-table .minmax-min .minmax-value {
    color: var(--blue-accent, #3b82f6);
}
.freq-minmax-table .minmax-max .minmax-value {
    color: var(--red, #ef4444);
}
.freq-minmax-table .freq-current {
    font-size: 1.1rem;
    font-weight: 700;
}
.freq-minmax-table .minmax-date {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    color: #888;
    line-height: 1.3;
}
.freq-minmax-table .col-range-bar {
    width: 30%;
    min-width: 120px;
}

/* Remove padding from card-content when it wraps a results table */
#delayResultsContent,
#freqResultsContent,
#rankingContent {
    padding: 0;
}
#delayResultsContent .table-date,
#freqResultsContent .table-date,
#rankingContent .table-date {
    padding: 0.5rem 1rem 1rem;
}

/* Range bar: shows [min...current...max] visually */
.range-bar-container {
    position: relative;
    height: 1.4rem;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: visible;
}
.range-bar-track {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--blue-accent, #3b82f6) 0%, #eee 50%, var(--red, #ef4444) 100%);
    opacity: 0.25;
    border-radius: 3px;
}
.range-bar-marker {
    position: absolute;
    top: -2px;
    width: 4px;
    height: calc(100% + 4px);
    background: #333;
    border-radius: 2px;
    transform: translateX(-50%);
}

/* ── Table Footer ─────────────────────────────────────────── */

.table-date {
    font-size: 1rem;
    color: #666;
    margin: .5rem 0 0;
}
.no-result {
    padding: 1rem;
    text-align: center;
    color: #666;
    font-size: 1rem;
}

/* ── In-page JS Tabs (MostDelayed + other pages) ─────────── */

.md-page-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.md-page-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .6rem 1.2rem;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    color: #666;
    margin-bottom: -1px;
}
.md-page-tab:hover { color: #333; }
.md-page-tab.active {
    border-bottom-color: var(--tab-active-color, var(--blue-accent));
    color: var(--tab-active-color, var(--blue-accent));
    font-weight: 600;
}
.md-page-tabs-extra {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
}
.md-page-tabs-extra select {
    font: inherit;
    font-size: .95rem;
    padding: .3rem .75rem .3rem .6rem;
    border: 1px solid var(--blue-accent);
    border-radius: 6px;
    background: #fff;
    color: var(--blue-accent);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(26,86,219,.15);
    appearance: auto;
}
.md-page-tabs-extra select:hover {
    background: #eef2ff;
}

/* ── Chart.js containers (trend + distribution) ───────────── */

.chart-canvas {
    width: 100% !important;
    max-height: 22rem;
    background: #fff;
    border-radius: 4px;
}

/* ── Hidden tab panels (shown/hidden via JS) ───────────────── */

.tab-panel-hidden { display: none; }

/* ── Synchro Tabs ─────────────────────────────────────────── */

.synchro-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--gray-200, #ddd);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.synchro-tab {
    padding: .6rem 1.2rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    color: #666;
}
.synchro-tab:hover { color: #333; }
.synchro-tab-active {
    border-bottom-color: var(--tab-active-color, var(--blue-accent));
    color: var(--tab-active-color, var(--blue-accent));
}

/* ── Color Context Classes ─────────────────────────────────── */
/* Set --accent-color on a container; children inherit it.     */
.delay-color   { --accent-color: var(--blue-accent); color: var(--accent-color); }
.freq-color    { --accent-color: var(--red);          color: var(--accent-color); }
.history-color { --accent-color: var(--gray-800);     color: var(--accent-color); }

/* ── Shared max-table (delays & frequencies) ──────────────── */
.max-table {
    width: 100%;
    border-collapse: collapse;
}
.max-table th {
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    padding: .5rem .75rem;
    text-align: center;
    border-bottom: 2px solid var(--accent-color, var(--blue-accent));
}
.max-table td {
    padding: .5rem .75rem;
    vertical-align: middle;
    text-align: center;
}
.max-table .col-rank {
    width: 3rem;
    font-weight: 700;
    color: #999;
}
.max-table .col-numbers {
    text-align: left;
}
.max-table .col-rc,
.max-table .col-rr,
.max-table .col-freq {
    width: 5rem;
    vertical-align: top;
    padding-top: .75rem;
}
.max-table .col-rc .val-big,
.max-table .col-freq .val-big {
    color: var(--accent-color, var(--blue-accent));
}
.max-table .col-rr .val-big {
    color: var(--green-accent);
}
.max-table .val-big {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}
.max-table .val-unit {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    color: #999;
    text-align: center;
    margin-top: .15rem;
}
.max-table tr.top-result .col-rank {
    color: var(--accent-color, var(--blue-accent));
}
.max-table .num-badge {
    font-size: 1.1rem;
    padding: .25rem .4rem;
    min-width: 2rem;
    margin: .1rem .15rem;
}
.max-table.freq-color .num-badge {
    background: var(--red);
}
.max-table .series-separator td {
    padding: .35rem 0;
    border-bottom: none;
}

/* ── Result Cards (MaxDelay/MaxFreq combinations) ─────────── */

.result-card {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: .75rem;
    background: #fff;
    position: relative;
}
.result-card:first-child {
    border: 2px solid var(--accent-color, var(--blue-accent));
}
.result-rank {
    position: absolute;
    top: .75rem;
    right: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #999;
}
.result-card:first-child .result-rank {
    color: var(--accent-color, var(--blue-accent));
}
.result-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}
.num-badge {
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
    padding: .4rem .6rem;
    background: var(--accent-color, var(--blue-accent));
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: monospace;
}
.num-sep {
    display: inline-block;
    margin: 0 .15rem;
    color: #bbb;
    font-weight: 400;
    font-size: 1.25rem;
}
.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    padding: .5rem 0;
}
.summary-badges .num-badge {
    font-size: 1.3rem;
    padding: .3rem .5rem;
    min-width: 2.2rem;
}
.num-badge.freq-bg,
.summary-badges .num-badge.freq-bg {
    background: var(--red);
}
#historicalMaxCard .num-badge {
    background: var(--gray-800);
}
.result-comb-label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--accent-color, var(--blue-accent));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: .25rem;
}
.result-params {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding-top: .75rem;
    border-top: 1px solid #f0f0f0;
}
.param-box {
    text-align: center;
    min-width: 5rem;
}
.param-label {
    font-size: 1rem;
    font-weight: 600;
    color: #888;
    margin-bottom: .15rem;
}
.param-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color, var(--blue-accent));
}
.param-rd .param-value {
    color: var(--green-accent);
}
.param-unit {
    font-size: .95rem;
    color: #999;
}


.param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: .75rem;
    margin-top: .5rem;
}

/* ── Ranking Controls Extras ──────────────────────────────── */

.ranking-controls-check {
    font-weight: 400 !important;
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}
.ranking-controls-check input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}
.ranking-controls input[type="number"] {
    padding: .4rem .6rem;
    font-size: 1rem;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: #fff;
    width: 4rem;
    text-align: center;
}


/* ── Forecast Ranking Table (HG) ─────────────────────────── */

.hg-summary {
    padding: .75rem 0;
    font-size: 1rem;
    color: #4b5563;
}
.hg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hg-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.hg-ranking-table th {
    padding: .75rem .5rem;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    color: var(--blue-accent);
    border-bottom: 2px solid #bfdbfe;
    white-space: nowrap;
}
.hg-ranking-table td {
    padding: .6rem .5rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: .95rem;
}
.hg-ranking-table tbody tr:nth-child(even) {
    background: #e4ecf9;
}
.hg-sortable {
    cursor: pointer;
    user-select: none;
}
.hg-sortable:hover {
    background: #eff6ff;
}
.hg-sort-arrow {
    font-size: .95rem;
    color: #3b82f6;
}
.hg-col-pos {
    width: 2.5rem;
    text-align: center;
    font-weight: 700;
    color: #999;
}
.hg-col-name {
    min-width: 9rem;
}
.hg-col-comb {
    width: 5.5rem;
    text-align: center;
    color: #6b7280;
}
.hg-col-series {
    white-space: nowrap;
}
.hg-col-dt {
    min-width: 5rem;
}
.hg-col-filter {
    min-width: 5rem;
}
.hg-col-val {
    width: 3.5rem;
    text-align: right;
    font-weight: 600;
    color: #1f2937;
}
.hg-ranking-table th.hg-col-val {
    text-align: right;
}
.hg-col-gain {
    width: 4rem;
    text-align: center;
    font-weight: 700;
    color: #059669;
    cursor: help;
}
.hg-col-rating {
    width: 6rem;
    text-align: center;
    white-space: nowrap;
}
.hg-series-row {
    margin-top: .45rem;
}
.hg-mtm-sub {
    display: block;
    font-size: .95rem;
    color: #ef4444;
    font-weight: 400;
    line-height: 1.2;
}
.hg-legend-mtm {
    color: #ef4444;
    font-size: .95rem;
}
.hg-row-top {
    background: #eff6ff;
}
.hg-row-top .hg-col-pos {
    color: var(--blue-accent);
}
.hg-row-top td {
    border-bottom: 2px solid #3b82f6;
}
.hg-stars {
    font-size: 1rem;
    letter-spacing: 1px;
}
.hg-star-full {
    color: #f59e0b;
}
.hg-star-empty {
    color: #d1d5db;
}
.hg-num-badge {
    display: inline-block;
    min-width: 1.8rem;
    text-align: center;
    padding: .2rem .35rem;
    background: var(--blue-accent);
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1rem;
    font-family: monospace;
}
.hg-num-sep {
    display: inline-block;
    margin: 0 .1rem;
    color: #bbb;
    font-weight: 400;
    font-size: 1rem;
}
.hg-legend {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 1rem;
    color: #4b5563;
}
.hg-legend-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--blue-accent);
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e5e7eb;
}
.hg-legend-item {
    display: block;
    padding: .2rem 0;
    line-height: 1.5;
}

/* ── Forecast Verification ───────────────────────────────── */

.verify-intro {
    font-size: 1rem;
    margin: 0 0 .75rem 0;
    color: var(--gray-600, #4b5563);
}
.verify-table { margin-bottom: .5rem; }
.verify-hit {
    background: #16a34a !important;
    color: #fff !important;
}
.verify-miss {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* ── Previous Extraction Alert ──────────────────────────── */

.previous-alert {
    background: #fee2e2;
    border: 2px solid #dc2626;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.previous-alert-title {
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}
.previous-alert-content {
    font-size: 1rem;
    color: #1f2937;
}
.previous-alert-numbers {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.previous-alert-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #dc2626;
}
.previous-alert-label {
    font-size: 1rem;
    color: #4b5563;
    margin-right: 0.5rem;
}

/* ── Yield Display ──────────────────────────────────────── */

.yield-header { background: var(--gold, #e6c200) !important; color: #1f2937 !important; }
.yield-header h2 { color: #1f2937 !important; }
.yield-display {
    text-align: center;
    padding: 0.5rem 0;
}
.yield-multiplier {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold, #e6c200);
}
.yield-award-name {
    font-size: 1rem;
    color: var(--gray-600, #4b5563);
    margin-top: 0.25rem;
}

/* ── Responsive for ranking components ────────────────────── */

@media (max-width: 768px) {
    .hg-ranking-table td,
    .hg-ranking-table th {
        padding: .5rem .3rem;
        font-size: .95rem;
    }
    .hg-num-badge {
        min-width: 1.5rem;
        padding: .15rem .25rem;
        font-size: .95rem;
    }
    .hg-col-name {
        min-width: 6rem;
    }
    .hg-legend-item {
        display: block;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .results-table .bar-cell { width: 35%; }
    .summary-big-number { font-size: 2.5rem; min-width: 3.75rem; min-height: 3.75rem; }
    .summary-numbers-row .summary-big-number { font-size: 1.8rem; min-width: 2.6rem; min-height: 2.6rem; }
    .summary-number-sep { font-size: 1.2rem; }
    .result-card { flex-direction: column; align-items: flex-start; }
    .result-params { margin-left: 0; }
    .param-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pre-extraction Table */
.pre-extraction-table {
    width: 100%;
    border-collapse: collapse;
}
.pre-extraction-table thead th {
    background: var(--gray-700);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}
.pre-extraction-table tbody td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.pre-extraction-table tbody tr:last-child td {
    border-bottom: none;
}

/* Stat Item (inline stats) */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 1rem;
}
.stat-row:last-child {
    border-bottom: none;
}
.stat-label {
    color: var(--gray-700);
}
.stat-value {
    font-weight: 700;
    color: var(--primary);
    text-align: right;
}
.stat-value.highlight {
    color: var(--accent);
}

/* Combination display */
.combination {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.combination .num {
    background: var(--primary);
    color: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    min-width: 32px;
    text-align: center;
}

/* Info List */
.info-list {
    padding: 0.25rem 0 0.25rem 1.5rem;
    list-style-type: disc;
}
.info-list li {
    padding: 0.2rem 0;
    font-size: 1rem;
    color: var(--gray-700);
}
.info-list li strong {
    color: var(--gray-800);
}

/* Quick Links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem;
}
.quick-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    color: var(--gray-700);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid var(--gray-200);
}
.quick-link:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}
.quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--primary);
}
.quick-link:hover .quick-link-icon {
    color: var(--white);
}

/* Responsive */
@media (max-width: 1024px) {
    /* Shift header logo to make room for sidebar toggle */
    .header .logo {
        margin-left: 170px;
    }

    .sidebar {
        position: fixed;
        left: -280px;
        top: 52px;
        bottom: 0;
        z-index: 200;
        transition: left 0.3s ease;
        box-shadow: 2px 0 12px rgba(0,0,0,0.1);
    }
    .sidebar.open {
        left: 0;
    }
    .sidebar-toggle {
        display: flex;
        position: fixed;
        left: 0;
        top: 8px;
        width: auto;
        max-width: 160px;
        padding: 0.5rem 0.75rem;
        border-radius: 0 0.5rem 0.5rem 0;
        z-index: 201;
        font-size: 1rem;
        overflow: hidden;
    }
    .sidebar-toggle .toggle-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sidebar-nav {
        padding-top: 0;
        height: 100%;
        overflow-y: auto;
    }
    .quick-links {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .page-header h1 {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .main-content-inner {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .main-content-inner {
        padding: 0.75rem;
    }
}
@media (max-width: 480px) {
    .main-content-inner {
        padding: 0.5rem;
    }
}

/* ── Win Verification Form ────────────────────────────────── */

.win-verification-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-row label {
    font-weight: 500;
    color: var(--gray-700);
    font-size: 1rem;
}
.form-input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 204, 0.1);
}
.form-actions {
    flex-direction: row;
    gap: 0.75rem;
}
.btn {
    padding: 0.625rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: #001a80;
}
.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-secondary:hover {
    background: var(--gray-200);
}
.verification-result {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
}
.verification-result p {
    margin-bottom: 0.5rem;
}
.verification-result p:last-child {
    margin-bottom: 0;
}
.text-success {
    color: var(--green);
}
.text-muted {
    color: var(--gray-600);
}
.font-bold {
    font-weight: 700;
}

/* ── Countdown in Card Header ─────────────────────────────── */

.next-draw-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}
.next-draw-countdown .countdown {
    font-weight: 700;
    font-size: 1.25rem;
    font-family: monospace;
}

/* ── Tag Cloud ────────────────────────────────────────────── */

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tag {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: 2rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
}
.tag:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* ── Loading Spinner ──────────────────────────────────────── */

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--gray-600);
    font-size: 1rem;
}
.loading-spinner .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Error Message ────────────────────────────────────────── */

.error-message {
    color: var(--red);
    font-weight: 500;
}
.text-center {
    text-align: center;
}

/* ── Filter Box (Collapsible) ────────────────────────────── */

.filter-box {
    margin-bottom: 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}

.filter-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--gold);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.filter-box-header:hover {
    background: var(--gold);
}

.filter-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.filter-box-title svg {
    width: 18px;
    height: 18px;
    color: #333;
}

.filter-box-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #555;
    font-size: 0.95rem;
}

.filter-box-toggle .icon {
    transition: transform 0.2s;
    font-size: 0.95rem;
}

.filter-box.open .filter-box-toggle .icon {
    transform: rotate(180deg);
}

.filter-box-content {
    display: none;
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
}

.filter-box.open .filter-box-content {
    display: block;
}

.selected-count {
    font-size: 0.95rem;
    color: var(--gray-600);
}

.selected-count strong {
    color: var(--primary);
}

/* ── Static Filters Grid ────────────────────────────────── */

.static-filter-count {
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 600;
}

.static-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem 1.5rem;
}

.static-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.static-filter-row label {
    min-width: 110px;
    font-weight: 500;
    font-size: 0.95rem;
}

.static-filter-row select,
.static-filter-row input[type="number"] {
    width: 80px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 0.95rem;
    background: var(--white);
}

.static-filter-row input[type="number"] {
    width: 90px;
}

.static-filters-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Number Selector Grid ────────────────────────────────── */

.number-selector-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.selector-action-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: all 0.2s;
}

.selector-action-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.number-selector-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 4px;
}

.selector-number {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: 2px solid var(--gray-200);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-600);
    transition: all 0.15s;
    user-select: none;
}

.selector-number:hover {
    background: var(--gray-200);
    border-color: var(--gray-400);
    transform: scale(1.05);
}

.selector-number.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* ── Archive Controls ────────────────────────────────────── */

.archive-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    align-items: center;
    justify-content: space-between;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-group label {
    font-weight: 500;
    color: var(--gray-600);
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

.filter-btn {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--gray-300);
    background: var(--gray-200);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.filter-btn.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.search-selects-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.search-selects-row select {
    font: inherit;
    font-size: .95rem;
    padding: .3rem .75rem .3rem .6rem;
    border: 1px solid var(--blue-accent);
    border-radius: 6px;
    background: #fff;
    color: var(--blue-accent);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(26,86,219,.15);
    appearance: auto;
}

.search-selects-row select:hover {
    background: #eef2ff;
}

.export-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--gray-300);
    background: var(--gray-200);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--gray-600);
    transition: all 0.2s;
}

.export-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.export-btn svg {
    width: 16px;
    height: 16px;
}

/* ── Date Navigator ──────────────────────────────────────── */

.date-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.date-navigator a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.date-navigator a:hover {
    background: var(--primary-dark);
}

.date-navigator a.nav-disabled {
    visibility: hidden;
    pointer-events: none;
}

.date-navigator .current-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-800);
    padding: 0.5rem 1.5rem;
    text-align: center;
}

/* ── Stats Controls (selects in card headers) ────────────── */

.stats-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.stats-controls select {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.stats-controls select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.25);
}
.stats-controls select option {
    background: var(--gray-800, #333);
    color: var(--white, #fff);
}

@media (max-width: 768px) {
    .stats-controls {
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
    }
    .stats-controls select {
        flex: 1;
        min-width: 0;
    }
}

/* ── FAQ Accordion ────────────────────────────────────────── */

.faq-item {
    border-bottom: 1px solid var(--gray-100);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-800);
    font-size: 1rem;
    gap: 1rem;
    transition: color 0.2s;
}
.faq-question:hover {
    color: var(--primary);
}
.faq-question .icon {
    font-size: 0.95rem;
    color: var(--gray-600);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.faq-question.active .icon {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--gray-700);
    line-height: 1.7;
    font-size: 1rem;
}
.faq-answer.open {
    max-height: 500px;
    padding-bottom: 1rem;
}

/* ── Shared Components Responsive ────────────────────────── */

@media (min-width: 1400px) {
    .number-selector-grid {
        gap: 6px;
    }
    .selector-number {
        font-size: 1.15rem;
        border-radius: 8px;
    }
}

@media (min-width: 1600px) {
    .number-selector-grid {
        gap: 8px;
    }
    .selector-number {
        font-size: 1.25rem;
    }
}

@media (min-width: 1920px) {
    .selector-number {
        font-size: 1.35rem;
        border-width: 3px;
    }
}

@media (max-width: 1024px) {
    .number-selector-grid {
        grid-template-columns: repeat(15, 1fr);
    }
    .selector-number {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .archive-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .date-navigator {
        gap: 0.5rem;
    }
    .date-navigator a {
        padding: 0.4rem 0.8rem;
        font-size: 0.95rem;
    }
    .date-navigator .current-date {
        width: 100%;
        text-align: center;
        order: -1;
    }
    .number-selector-grid {
        grid-template-columns: repeat(10, 1fr);
        gap: 3px;
    }
    .selector-number {
        font-size: 0.95rem;
        border-width: 1px;
    }
}

@media (max-width: 480px) {
    .number-selector-grid {
        grid-template-columns: repeat(10, 1fr);
    }
    .selector-number {
        font-size: 0.95rem;
    }
}

/* ── Alert Messages ──────────────────────────────────────── */

.alert {
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 500;
}
.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-bottom: 1px solid #fecaca;
}
.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-bottom: 1px solid #bbf7d0;
}
.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
}
.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
}

/* ── Sign Forms (Login, Registration, Reset, Change Pwd) ── */

.sign-form-section {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
.sign-form-card {
    width: 100%;
    max-width: 380px;
    background: var(--white);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}
.sign-form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 2rem 1rem;
}
.sign-form-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}
.sign-form-subtitle {
    text-align: center;
    color: var(--gray-600);
    font-size: 1rem;
    padding: 0 2rem 0.5rem;
    margin: 0;
    line-height: 1.5;
}
.sign-form-subtitle a {
    color: var(--primary);
    font-weight: 600;
}
.sign-form-subtitle a:hover {
    text-decoration: underline;
}
.sign-form {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sign-form .form-row label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 1rem;
}
.sign-form .form-hint {
    font-size: 0.95rem;
    color: var(--gray-400);
}
.sign-form .form-actions {
    margin-top: 0.5rem;
}
.sign-form .btn.w-full {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
}
.sign-form-links {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}
.sign-form-links p {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0.5rem 0;
}
.sign-form-links a {
    color: var(--primary);
    font-weight: 600;
}
.sign-form-links a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .sign-form-card {
        border-radius: 0;
        box-shadow: none;
    }
    .sign-form-header {
        padding: 1.5rem 1.25rem 0.75rem;
    }
    .sign-form {
        padding: 1.25rem;
    }
}

/* ── Homepage Layouts ────────────────────────────────────── */

/* Hero Grid: Extractions (left) + Game Params (right) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.hero-grid > .content-card {
    margin-bottom: 0;
}

/* Card Footer (link at bottom of card) */
.card-footer {
    padding: 0.75rem 1.25rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    text-align: right;
}
.card-footer-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}
.card-footer-link:hover {
    text-decoration: underline;
}

/* Card Footer with side-by-side actions */
.card-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.card-footer-actions .btn {
    text-decoration: none;
    text-align: center;
}

/* Gold Card Header (input forms) */
.card-header.gold {
    background: var(--gold);
    color: var(--gray-800);
}

/* Remove bottom margin from cards inside grids */
.stats-grid > .content-card {
    margin-bottom: 0;
}

/* Verify Form: 2 columns */
.verify-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Radio Button Group */
.radio-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    color: var(--gray-700);
}
.radio-label input[type="radio"] {
    accent-color: var(--primary);
}

/* Form Select */
.form-select {
    appearance: auto;
    width: auto;
    max-width: 300px;
}

/* Delay Search: 3 columns on desktop */
.search-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Forecast Preview: 3 columns */
.forecast-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
.forecast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}
.forecast-item .btn-sm {
    margin-top: auto;
}
.forecast-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.forecast-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--primary);
}
.forecast-item:hover .forecast-item-icon {
    color: var(--primary-light);
}
.forecast-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 0.5rem;
}
.forecast-item p {
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Small Button */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* FAQ Grid: 2 columns */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 2rem;
    align-items: start;
}

/* Game Disclaimer */
.game-disclaimer {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    margin: 0;
    border-radius: 0;
}

/* ── Homepage Responsive ─────────────────────────────────── */

@media (min-width: 768px) {
    .hero-grid {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
    .verify-grid {
        grid-template-columns: 1fr 1fr;
    }
    .search-form-grid {
        grid-template-columns: 1fr 1fr 1fr;
        align-items: end;
    }
    .forecast-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .faq-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Pre-Extraction Matrix (multi-wheel) ───────────────── */

.pre-matrix-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.25rem 0 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}
.pre-matrix-title:first-child {
    margin-top: 0;
}
.pre-matrix-delay-title {
    color: var(--blue-accent);
    background: #e8f0fe;
}
.pre-matrix-freq-title {
    color: var(--red);
    background: #fde8e8;
}
.pre-matrix-freq-title small {
    font-weight: 400;
    font-size: 1rem;
}
.pre-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pre-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05rem;
    text-align: center;
}
.pre-matrix-table th {
    padding: 0.5rem 0.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    background: var(--gray-100, #f1f5f9);
    border-bottom: 2px solid var(--gray-200, #ddd);
    white-space: nowrap;
}
.pre-matrix-table td {
    padding: 0.4rem 0.3rem;
    border-bottom: 1px solid var(--gray-100, #eee);
    vertical-align: middle;
}
.pre-matrix-table tr:nth-child(even) {
    background: var(--table-odd-bg, #edf2fc);
}
.pre-matrix-freq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pre-matrix-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 4px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-weight: 400;
}
.pre-matrix-pos {
    font-weight: 600;
    color: var(--gray-500, #64748b);
    white-space: nowrap;
}
.pre-matrix-wheel {
    font-weight: 600;
    text-align: left;
    padding-left: 0.5rem;
    white-space: nowrap;
    color: var(--gray-700, #334155);
}
.pre-matrix-nazionale {
    background: #fffbeb !important;
    border-top: 2px solid #f59e0b;
}
.pre-matrix-cell {
    min-width: 3rem;
}
.pre-matrix-num {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
}
.pre-matrix-val {
    display: block;
    font-size: 1rem;
    color: var(--gray-500, #64748b);
}
.pre-matrix-delays .pre-matrix-val {
    color: var(--blue-accent);
}
.pre-matrix-freq .pre-matrix-val {
    color: var(--red);
}

/* ── Archive Wheels Table (year view) ──────────────────── */

.archive-wheels-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.archive-wheels-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.archive-wheels-table th {
    padding: 0.5rem 0.3rem;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--gray-100, #f1f5f9);
    border-bottom: 2px solid var(--gray-200, #ddd);
    text-align: center;
    white-space: nowrap;
}
.archive-wheels-table td {
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid var(--gray-100, #eee);
    text-align: center;
    vertical-align: middle;
}
.archive-wheels-table tr:nth-child(even) {
    background: #dce6f7;
}
.archive-wheels-date {
    font-weight: 600;
    white-space: nowrap;
    text-align: left !important;
    padding-left: 0.5rem !important;
    min-width: 7rem;
    background: linear-gradient(135deg, #0033cc, #2563eb);
    color: #fff;
}
.archive-wheels-nums {
    white-space: nowrap;
}
.aw-num {
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin: 0 3px;
    color: #1e293b;
}

/* ── Lotto Wheels Table ──────────────────────────────────── */

.lotto-draw {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.lotto-draw:nth-child(even) {
    background: #f0f4ff;
    border-radius: 6px;
    padding: 0.75rem;
}
.lotto-draw:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.lotto-draw-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #2563eb;
    border-radius: 6px;
    color: #fff;
}
.lotto-draw-index {
    font-weight: 700;
    font-size: 1.1rem;
}
.lotto-draw-date {
    font-size: 1rem;
}
.lotto-wheels-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lotto-wheel-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    background: #ffffff;
}
.lotto-wheel-row:nth-child(even) {
    background: #eef2ff;
}
.lotto-wheel-row:nth-child(even) .lotto-num {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
}
.lotto-wheel-row.nazionale {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    margin-top: 2px;
}
.lotto-wheel-name {
    display: inline-block;
    width: 110px;
    min-width: 110px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1e293b;
}
.lotto-wheel-row.nazionale .lotto-wheel-name {
    color: #92400e;
    font-size: 1.15rem;
}
.lotto-wheel-numbers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lotto-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}
.lotto-wheel-row.nazionale .lotto-num {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

@media (max-width: 480px) {
    .lotto-wheel-name {
        width: 80px;
        min-width: 80px;
        font-size: 1rem;
    }
    .lotto-num {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .lotto-wheel-numbers {
        gap: 5px;
    }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

/* Admin bar (top strip, visible only to authorized users) */
.admin-bar {
    background: #1a1a2e;
    color: #e0e0e0;
    font-size: 0.95rem;
    padding: 6px 0;
}
.admin-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-bar-nav {
    display: flex;
    gap: 1.2rem;
    align-items: center;
}
.admin-bar a {
    color: #90caf9;
    text-decoration: none;
}
.admin-bar a:hover {
    color: #fff;
}

/* Admin dropdown */
.admin-dropdown {
    position: relative;
}
.admin-dropdown-toggle {
    background: none;
    border: none;
    color: #90caf9;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0;
    font-family: inherit;
}
.admin-dropdown-toggle:hover {
    color: #fff;
}
.admin-dropdown-toggle::after {
    content: ' \25BE';
    font-size: 0.8em;
}
.admin-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 4px;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 10000;
    padding: 4px 0;
    padding-top: 4px;
    margin-top: 0;
}
.admin-dropdown:hover .admin-dropdown-menu {
    display: block;
}
.admin-dropdown-menu a {
    display: block;
    padding: 5px 14px;
    color: #c0c0c0;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.95rem;
}
.admin-dropdown-menu a:hover {
    background: #2a2a4e;
    color: #fff;
}

/* Admin table grid (table selection page) */
.admin-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.admin-table-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    color: var(--text-color, #333);
    text-decoration: none;
    transition: background 0.15s;
}
.admin-table-link:hover {
    background: var(--hover-bg, #f0f4ff);
}
.admin-table-link svg {
    flex-shrink: 0;
    color: var(--accent-color, #1a73e8);
}

/* Admin data table */
.admin-table-wrap {
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.admin-table th,
.admin-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid var(--border-color, #e0e0e0);
    vertical-align: top;
}
.admin-table thead th {
    background: var(--table-header-bg, #f5f5f5);
    font-weight: 600;
    white-space: nowrap;
}
.admin-table tbody tr:nth-child(even) {
    background: var(--table-row-alt, #fafafa);
}
.admin-col-ops {
    width: 36px;
    text-align: center;
    white-space: nowrap;
}

/* Admin detail table (key-value pairs) */
.admin-detail-table th {
    width: 180px;
    background: var(--table-header-bg, #f5f5f5);
    font-weight: 600;
    white-space: nowrap;
}
.admin-detail-table td {
    word-break: break-word;
}

/* Admin buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.admin-btn:hover {
    opacity: 0.85;
}
.admin-btn-view {
    background: #e3f2fd;
    color: #1565c0;
}
.admin-btn-edit {
    background: #fff3e0;
    color: #e65100;
}
.admin-btn-delete {
    background: #ffebee;
    color: #c62828;
}
.admin-btn-list {
    background: #f5f5f5;
    color: #333;
}
.admin-btn-insert {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Admin detail action row */
.admin-detail-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Admin form actions */
.admin-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

/* Admin toolbar */
.admin-toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Admin form fields */
.admin-field {
    margin-bottom: 1.2rem;
}
.admin-field-label {
    display: block;
    font-weight: 600;
    color: #444;
    margin-bottom: 3px;
    font-size: 1rem;
}
.admin-field-help {
    display: block;
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 5px;
}
.admin-field-input {
    background: #f0f4ff;
    padding: 10px;
    border-radius: 4px;
}
.admin-field-input input[type="text"],
.admin-field-input input[type="email"],
.admin-field-input input[type="password"],
.admin-field-input input[type="number"],
.admin-field-input input[type="url"],
.admin-field-input input[type="tel"],
.admin-field-input input[type="date"],
.admin-field-input input[type="time"],
.admin-field-input input[type="datetime-local"],
.admin-field-input input[type="color"],
.admin-field-input textarea,
.admin-field-input select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}
.admin-field-input textarea {
    resize: vertical;
}
.admin-field-input select {
    cursor: pointer;
}
.admin-field-input input[type="color"] {
    width: 60px;
    height: 36px;
    padding: 2px;
}
.admin-field-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-field-check input[type="checkbox"],
.admin-field-check input[type="radio"] {
    width: auto;
}
.admin-field-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.admin-check-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.admin-check-item input {
    width: auto;
}
.admin-field-fixed {
    background: #e8e8e8;
    padding: 8px 10px;
    border-radius: 4px;
    color: #666;
    cursor: not-allowed;
}

/* Admin empty state */
.admin-empty-message {
    font-size: 1.1rem;
    color: #666;
    padding: 2rem;
    text-align: center;
}

/* Admin floating page actions (Edit/Delete on public pages for Editor) */
.admin-page-actions {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
}
.admin-page-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.admin-page-action-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}
.admin-page-action-edit {
    background: #ff851b;
}
.admin-page-action-delete {
    background: #dc3545;
}

@media (max-width: 768px) {
    .admin-table-grid {
        grid-template-columns: 1fr;
    }
    .admin-detail-table th {
        width: 120px;
    }
    .admin-page-actions {
        bottom: 1rem;
        right: 1rem;
    }
}

/* ── PWA Install Banner ────────────────────────────────────── */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1rem;
    transform: translateY(100%);
    transition: transform 0.35s ease;
}
.pwa-install-banner.visible {
    transform: translateY(0);
}
.pwa-install-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pwa-install-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
.pwa-install-banner-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
}
.pwa-install-banner-text strong {
    display: block;
    font-size: 1.05rem;
}
.pwa-install-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.pwa-install-btn {
    background: #fff;
    color: var(--primary);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-install-btn:hover {
    background: #e8ecf8;
}
.pwa-dismiss-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}
.pwa-dismiss-btn:hover {
    color: #fff;
}
@media (max-width: 480px) {
    .pwa-install-banner-inner {
        flex-wrap: wrap;
    }
    .pwa-install-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}