:root {
            --bg-body: #0f0f10;
            --panel-bg: #161618;
            --panel-border: rgba(255,255,255,0.08);
            --panel-radius: 14px;
            --input-bg: rgba(0,0,0,0.25);
            --summary-bg: rgba(0,0,0,0.28);
        }

        .header-top {
            flex-wrap: wrap;
            gap: 15px;
        }
        .menu-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .pill-nav-container {
            position: relative;
            width: 100%;
        }
        .mobile-menu-toggle {
            display: none;
            width: 100%;
            background: var(--bg-card, #1a1a1a);
            color: var(--text-primary, #fff);
            border: 1px solid var(--border-1, #333);
            padding: 12px 16px;
            border-radius: var(--radius-sm, 6px);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            text-align: left;
            margin-bottom: 8px;
        }
        
        .pill-nav {
            display: flex;
            flex-wrap: wrap !important;
            gap: 10px !important;
            overflow: visible !important;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }
        
        /* Base UI Panels */
        .ui-panel {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: var(--panel-radius);
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        .ui-panel-title {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--text-primary, #fff);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ui-hint {
            font-size: 0.85rem;
            color: var(--text-secondary, #aaa);
            line-height: 1.6;
        }
        .ui-field {
            margin-bottom: 15px;
        }
        .ui-field label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-secondary, #888);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .ui-input {
            width: 100%;
            padding: 12px;
            background: var(--bg-input, rgba(0,0,0,0.25));
            border: 1px solid var(--border-2, rgba(255,255,255,0.1));
            border-radius: 10px;
            color: var(--text-1);
            font-size: 0.95rem;
        }

        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }
            .pill-nav {
                display: none !important;
                flex-direction: column !important;
                position: fixed;
                top: 135px;
                left: 0;
                width: 100%;
                max-height: 70vh;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                background: var(--bg-card, #1a1a1a);
                border-bottom: 2px solid var(--border-1, #333);
                border-top: 2px solid var(--border-1, #333);
                padding: 16px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.9);
                z-index: 9999;
            }
            .pill-nav.show-mobile {
                display: flex !important;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: var(--bg-nav);
                z-index: 10000;
                flex-direction: column;
                padding: 80px 20px;
                overflow-y: auto;
                backdrop-filter: blur(20px);
                gap: 12px;
                align-items: center;
            }

            .pill-nav.show-mobile .nav-pill {
                width: 100%;
                max-width: 320px;
                text-align: center;
                justify-content: center;
                padding: 14px;
                font-size: 1rem;
                margin: 0;
            }

            .pill-nav.show-mobile .mobile-only-header,
            .pill-nav.show-mobile .mobile-extra-header {
                width: 100%;
                max-width: 320px;
                text-align: left;
            }
            .top-section {
                flex-direction: column;
                gap: 12px;
            }
            .grid-container, .horizontal-grid {
                grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
                gap: 8px !important;
            }
        }
    
/* Keep the first paint stable without a late web-font substitution. */
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }