*,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* ══ LIGHT MODE ══ */
    :root {
        --red: #C0392B;
        --red2: #E74C3C;
        --green: #27AE60;
        --bg: #f7f7f7;
        --white: #FFFFFF;
        --text: #1A1A2E;
        --muted: #8590A6;
        --border: #E8ECF0;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        --radius: 16px;
        --skel-a: #eee;
        --skel-b: #f5f5f5;
        --clear-hover: #f0f0f0;
    }

    /* ══ DARK MODE ══ */
    html[data-theme="dark"] {
        --bg: #0F1117;
        --white: #1A1D27;
        --text: #EAEDF5;
        --muted: #5A6478;
        --border: #252938;
        --shadow: 0 4px 28px rgba(0, 0, 0, 0.4);
        --skel-a: #1C2030;
        --skel-b: #232640;
        --clear-hover: #252938;
    }

    *,
    *::before,
    *::after {
        transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    }

    .skel-line,
    .live-pill-dot,
    .badge-dot,
    #toast {
        transition: none !important;
    }

    html,
    body {
        min-height: 100vh;
        font-family: 'Inter', sans-serif;
        background: var(--bg);
        color: var(--text);
        -webkit-font-smoothing: antialiased;
    }

    html[lang="ne"],
    html[lang="ne"] body {
        font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
    }

    .page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 16px 48px;
    }

    /* ── TOP BAR ── */
    .topbar {
        width: 100%;
        max-width: 560px;
        padding: 22px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        cursor: default;
    }

    .logo-card {
        position: relative;
        width: 46px;
        height: 30px;
        background: linear-gradient(135deg, #C0392B 0%, #96281B 100%);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
        overflow: hidden;
    }

    .logo-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 9px;
        background: rgba(0, 0, 0, 0.18);
    }

    .logo-card-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .logo-text {
        line-height: 1.2;
    }

    .logo-name {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
    }

    .logo-name .r {
        color: var(--red);
    }

    .logo-tagline {
        font-size: 9.5px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-top: 1px;
    }

    .topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* ── LANG TOGGLE ── */
    .lang-toggle {
        height: 34px;
        border-radius: 17px;
        background: var(--white);
        border: 1.5px solid var(--border);
        cursor: pointer;
        padding: 0 12px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--muted);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: border-color 0.18s, color 0.18s !important;
    }

    .lang-toggle:hover {
        border-color: var(--red);
        color: var(--red);
    }

    html[lang="ne"] .lang-toggle {
        font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
    }

    /* ── DARK TOGGLE ── */
    .dark-toggle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--white);
        border: 1.5px solid var(--border);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        flex-shrink: 0;
        transition: border-color 0.18s, color 0.18s, transform 0.25s !important;
    }

    .dark-toggle:hover {
        border-color: var(--red);
        color: var(--red);
        transform: rotate(22deg);
    }

    .dark-toggle .icon-sun {
        display: none;
    }

    .dark-toggle .icon-moon {
        display: block;
    }

    html[data-theme="dark"] .dark-toggle .icon-sun {
        display: block;
    }

    html[data-theme="dark"] .dark-toggle .icon-moon {
        display: none;
    }

    /* ── LIVE PILL ── */
    .live-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(39, 174, 96, 0.08);
        border: 1px solid rgba(39, 174, 96, 0.2);
        border-radius: 100px;
        padding: 5px 11px;
        font-size: 11px;
        font-weight: 600;
        color: var(--green);
    }

    .live-pill.offline {
        background: rgba(192, 57, 43, 0.08);
        border-color: rgba(192, 57, 43, 0.25);
        color: var(--red);
    }

    .live-pill-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: blink 2s infinite;
    }

    .live-pill.offline .live-pill-dot {
        background: var(--red);
    }

    /* ── INSTALL BANNER ── */
    .install-banner {
        width: 100%;
        max-width: 560px;
        display: none;
        align-items: center;
        gap: 12px;
        background: var(--white);
        border: 1px solid rgba(192, 57, 43, 0.2);
        border-radius: 14px;
        padding: 14px 16px;
        margin-top: 16px;
        animation: up 0.4s ease;
    }

    .install-banner.show {
        display: flex;
    }

    .install-banner-icon {
        width: 40px;
        height: 40px;
        background: var(--red);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
    }

    .install-banner-text {
        flex: 1;
    }

    .install-banner-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 2px;
    }

    .install-banner-sub {
        font-size: 11px;
        color: var(--muted);
    }

    .install-banner-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-shrink: 0;
    }

    .install-btn {
        background: var(--red);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 7px 14px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }

    .install-btn:hover {
        background: var(--red2);
    }

    .install-dismiss {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 4px;
    }

    .install-dismiss:hover {
        color: var(--text);
    }

    /* ── OFFLINE BANNER ── */
    .offline-banner {
        width: 100%;
        max-width: 560px;
        display: none;
        align-items: center;
        gap: 10px;
        background: #FEF3CD;
        border: 1px solid #F5C518;
        border-radius: 12px;
        padding: 12px 16px;
        margin-top: 16px;
        font-size: 13px;
        font-weight: 500;
        color: #7A5800;
        animation: up 0.3s ease;
    }

    html[data-theme="dark"] .offline-banner {
        background: #221E0A;
        border-color: #6B5400;
        color: #D4A017;
    }

    .offline-banner.show {
        display: flex;
    }

    .offline-icon {
        font-size: 16px;
        flex-shrink: 0;
    }

    /* ── HERO ── */
    .hero {
        width: 100%;
        max-width: 560px;
        text-align: center;
        padding: 52px 0 36px;
        animation: up 0.6s ease both;
    }

    .hero h1 {
        font-size: clamp(26px, 7vw, 42px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.03em;
        color: var(--text);
        margin-bottom: 12px;
    }

    .hero h1 span {
        color: var(--red);
    }

    .hero p {
        font-size: clamp(14px, 3.5vw, 16px);
        color: var(--muted);
        line-height: 1.65;
    }

    /* ── SEARCH ── */
    .search-wrap {
        width: 100%;
        max-width: 560px;
        animation: up 0.6s 0.07s ease both;
    }

    .search-card {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1.5px solid var(--border);
    }

    .search-card:focus-within {
        border-color: var(--red);
        box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.1), var(--shadow);
    }

    .search-icon {
        padding: 0 4px 0 10px;
        color: var(--muted);
        flex-shrink: 0;
    }

    #inp {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'Inter', sans-serif;
        font-size: clamp(15px, 4vw, 17px);
        font-weight: 500;
        color: var(--text);
        background: transparent;
        padding: 10px 4px;
        min-width: 0;
    }

    #inp::placeholder {
        color: var(--muted);
        opacity: 0.5;
        font-weight: 400;
    }

    .search-btn {
        flex-shrink: 0;
        background: var(--red);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 13px clamp(14px, 4vw, 24px);
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }

    .search-btn:hover {
        background: var(--red2);
    }

    .search-btn:active {
        transform: scale(0.97);
    }

    .search-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .inp-clear {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--muted);
        padding: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        line-height: 0;
    }

    .inp-clear:hover {
        background: var(--clear-hover);
        color: var(--text);
    }

    .inp-clear.visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hint {
        text-align: center;
        margin-top: 10px;
        font-size: 12px;
        color: var(--muted);
    }

    kbd {
        background: var(--border);
        border-radius: 4px;
        padding: 1px 5px;
        font-size: 11px;
        font-family: inherit;
    }

    /* ══════════════════════════════════════
       AVAILABILITY HINT
    ══════════════════════════════════════ */
    .avail-hint {
        width: 100%;
        max-width: 560px;
        background: var(--white);
        border: 1.5px solid rgba(192, 57, 43, 0.18);
        border-radius: 12px;
        padding: 12px 16px;
        margin-top: 10px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        animation: up 0.5s 0.12s ease both;
    }

    .avail-hint-left {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        background: rgba(192, 57, 43, 0.08);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    html[data-theme="dark"] .avail-hint-left {
        background: rgba(192, 57, 43, 0.18);
    }

    .avail-hint-body {
        flex: 1;
        min-width: 0;
    }

    .avail-hint-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--red);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .avail-hint-note {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .avail-hint-offices {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
    }

    .avail-hint-chip {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 100px;
        padding: 3px 10px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
    }

    .avail-hint-more {
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
    }

    .avail-hint-link {
        background: none;
        border: none;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: var(--red);
        text-decoration: underline;
        text-underline-offset: 2px;
        padding: 0;
        margin-left: 2px;
        white-space: nowrap;
    }

    .avail-hint-link:hover {
        opacity: 0.7;
    }

    html[lang="ne"] .avail-hint-label,
    html[lang="ne"] .avail-hint-note,
    html[lang="ne"] .avail-hint-chip {
        font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
    }

    /* ── HISTORY ── */
    .history-wrap {
        width: 100%;
        max-width: 560px;
        margin-top: 10px;
        display: none;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        animation: up 0.3s ease both;
    }

    .history-wrap.show {
        display: flex;
    }

    .history-label {
        font-size: 11px;
        color: var(--muted);
        font-weight: 600;
        flex-shrink: 0;
    }

    .history-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 100px;
        padding: 4px 10px 4px 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        font-family: 'Courier New', monospace;
    }

    .history-chip:hover {
        border-color: var(--red);
        color: var(--red);
    }

    .history-chip-del {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--muted);
        font-size: 14px;
        line-height: 1;
        padding: 0 0 0 2px;
    }

    .history-chip-del:hover {
        color: var(--red);
    }

    /* ── SHARE BTN ── */
    .share-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1.5px solid var(--border);
        border-radius: 100px;
        padding: 6px 14px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .share-btn:hover {
        border-color: var(--green);
        color: var(--green);
        background: rgba(39, 174, 96, 0.06);
    }

    /* ── RESULT ── */
    #result {
        width: 100%;
        max-width: 560px;
        margin-top: 22px;
    }

    .skeleton {
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px;
        box-shadow: var(--shadow);
        display: none;
    }

    .skeleton.show {
        display: block;
    }

    .skel-line {
        border-radius: 6px;
        background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
        margin-bottom: 12px;
    }

    .skel-line:nth-child(1) {
        height: 18px;
        width: 60%
    }

    .skel-line:nth-child(2) {
        height: 14px;
        width: 85%
    }

    .skel-line:nth-child(3) {
        height: 14px;
        width: 70%
    }

    .skel-line:nth-child(4) {
        height: 14px;
        width: 50%;
        margin-bottom: 0
    }

    .result-card {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        display: none;
        animation: up 0.35s ease;
    }

    .result-card.show {
        display: block;
    }

    .card-stripe {
        height: 3px;
    }

    .stripe-green {
        background: var(--green);
    }

    .stripe-red {
        background: var(--red);
    }

    .card-top {
        padding: 18px 22px 14px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 14px;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .badge-green {
        background: #E8F8EF;
        color: var(--green);
    }

    .badge-red {
        background: #FDEDEC;
        color: var(--red);
    }

    html[data-theme="dark"] .badge-green {
        background: rgba(39, 174, 96, 0.14);
    }

    html[data-theme="dark"] .badge-red {
        background: rgba(192, 57, 43, 0.14);
    }

    .badge-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    .badge-green .badge-dot {
        background: var(--green);
    }

    .badge-red .badge-dot {
        background: var(--red);
        animation: blink 1.5s infinite;
    }

    .card-time {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
    }

    .card-body {
        padding: 20px 22px;
    }

    .holder-name {
        font-size: clamp(18px, 5vw, 24px);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 4px;
    }

    .license-num {
        font-size: 13px;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 20px;
        font-family: 'Courier New', monospace;
    }

    .info-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .info-box {
        background: var(--bg);
        border-radius: 10px;
        padding: 12px 14px;
    }

    .info-box-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .info-box-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }

    .info-box.cat .info-box-value {
        font-size: 18px;
        font-weight: 800;
        color: var(--red);
    }

    .cache-notice {
        display: none;
        align-items: center;
        gap: 6px;
        background: #FEF3CD;
        border: 1px solid #F5C518;
        border-radius: 0 0 var(--radius) var(--radius);
        padding: 8px 22px;
        font-size: 11px;
        color: #7A5800;
        font-weight: 500;
    }

    html[data-theme="dark"] .cache-notice {
        background: #221E0A;
        border-color: #6B5400;
        color: #D4A017;
    }

    .cache-notice.show {
        display: flex;
    }

    .card-footer {
        padding: 12px 22px;
        border-top: 1px solid var(--border);
        font-size: 11px;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .footer-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        flex-shrink: 0;
    }

    .card-actions {
        margin-top: 18px;
        display: flex;
        justify-content: center;
    }

    .card-actions .retry-btn {
        width: 100%;
        max-width: 320px;
    }

    /* ══════════════════════════════════════
       NOT FOUND — ENHANCED
    ══════════════════════════════════════ */
    .not-found {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        display: none;
        animation: up 0.35s ease;
    }

    .not-found.show {
        display: block;
    }

    .nf-stripe {
        height: 3px;
        background: var(--red);
    }

    .nf-inner {
        padding: 28px 24px 24px;
    }

    .nf-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 18px;
    }

    .nf-icon {
        width: 48px;
        height: 48px;
        background: #FDEDEC;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    html[data-theme="dark"] .nf-icon {
        background: rgba(192, 57, 43, 0.18);
    }

    .nf-header-text h3 {
        font-size: 17px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -0.02em;
        margin-bottom: 3px;
    }

    .nf-header-text p {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
    }

    .nf-reasons {
        background: var(--bg);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .nf-reasons-title {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 12px;
    }

    .nf-reason-item {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        padding: 6px 0;
    }

    .nf-reason-item:not(:last-child) {
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
        margin-bottom: 2px;
    }

    .nf-reason-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--red);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .nf-reason-body strong {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 2px;
        line-height: 1.35;
    }

    .nf-reason-body span {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
    }

    .nf-offices-wrap {
        border: 1.5px solid rgba(39, 174, 96, 0.25);
        background: rgba(39, 174, 96, 0.04);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    html[data-theme="dark"] .nf-offices-wrap {
        background: rgba(39, 174, 96, 0.07);
        border-color: rgba(39, 174, 96, 0.2);
    }

    .nf-offices-title {
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--green);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nf-office-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .nf-office-chip {
        background: var(--white);
        border: 1.5px solid rgba(39, 174, 96, 0.25);
        border-radius: 100px;
        padding: 4px 11px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
    }

    .nf-office-chip.nf-chip-more {
        background: transparent;
        border-style: dashed;
        color: var(--muted);
        border-color: var(--border);
    }

    .nf-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .retry-btn {
        flex: 1;
        min-width: 120px;
        background: var(--red);
        border: none;
        color: #fff;
        padding: 12px 20px;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .retry-btn:hover {
        background: var(--red2);
    }

    .nf-scroll-btn {
        flex: 1;
        min-width: 120px;
        background: var(--bg);
        border: 1.5px solid var(--border);
        color: var(--text);
        padding: 12px 20px;
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
    }

    .nf-scroll-btn:hover {
        border-color: var(--red);
        color: var(--red);
        background: rgba(192, 57, 43, 0.04);
    }

    .card-actions .retry-btn {
        background: var(--bg);
        border: 1.5px solid var(--border);
        color: var(--text);
    }

    .card-actions .retry-btn:hover {
        border-color: var(--red);
        color: var(--red);
        background: rgba(192, 57, 43, 0.04);
    }

    /* ── STATS ── */
    .stats {
        width: 100%;
        max-width: 560px;
        margin-top: 20px;
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        animation: up 0.6s 0.14s ease both;
    }

    .stat {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 100px;
        padding: 7px 14px;
        font-size: 12px;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .stat strong {
        color: var(--text);
        font-weight: 700;
    }

    /* ══════════════════════════════════════
       OFFICES — with SLIDER
    ══════════════════════════════════════ */
    .offices {
        width: 100%;
        max-width: 560px;
        margin-top: 60px;
        animation: up 0.6s 0.18s ease both;
    }

    .offices-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 0 4px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .offices-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text);
    }

    .offices-total {
        font-size: 11px;
        color: var(--muted);
        font-weight: 600;
    }

    .office-search-trigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: 100px;
        padding: 5px 12px 5px 9px;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        flex-shrink: 0;
    }

    .office-search-trigger:hover,
    .office-search-trigger.active {
        border-color: var(--red);
        color: var(--red);
        background: rgba(192, 57, 43, 0.06);
    }

    .office-search-wrap {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin-bottom 0.28s ease !important;
    }

    .office-search-wrap.open {
        max-height: 60px;
        opacity: 1;
        margin-bottom: 12px;
    }

    .office-search-inner {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .office-search-inner:focus-within {
        border-color: var(--red);
    }

    .office-search-icon {
        color: var(--muted);
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    #office-inp {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        background: transparent;
        padding: 11px 4px;
        min-width: 0;
    }

    #office-inp::placeholder {
        color: var(--muted);
        opacity: 0.5;
        font-weight: 400;
    }

    .office-search-clear {
        display: none;
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .office-search-clear:hover {
        background: var(--clear-hover);
        color: var(--text);
    }

    .office-search-clear.visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .office-no-results {
        display: none;
        text-align: center;
        padding: 18px 16px;
        color: var(--muted);
        font-size: 13px;
        background: var(--white);
        border: 1px dashed var(--border);
        border-radius: 12px;
    }

    .office-no-results.show {
        display: block;
    }

    /* ── SLIDER WRAPPER ── */
    .office-slider-outer {
        position: relative;
        /* Side padding to allow arrow buttons space */
        padding: 0 18px;
    }

    /* Clipping mask so cards don't show under arrows */
    .office-slider-clip {
        overflow: hidden;
        border-radius: 12px;
    }

    .office-slider-track {
        display: flex;
        gap: 10px;
        /* overflow hidden handled by clip wrapper */
        padding-bottom: 4px;
        padding-top: 4px;
        /* We'll drive scroll manually via transform for infinite loop */
        will-change: transform;
        transition: none;
    }

    .office-slider-track .office-card {
        flex: 0 0 160px;
        min-width: 160px;
    }

    /* Arrow buttons */
    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-60%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--white);
        border: 1.5px solid var(--border);
        color: var(--text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
        transition: border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
        flex-shrink: 0;
    }

    .slider-arrow:hover {
        border-color: var(--red);
        color: var(--red);
        box-shadow: 0 4px 14px rgba(192, 57, 43, 0.18);
    }

    .slider-arrow.prev {
        left: 0;
    }

    .slider-arrow.next {
        right: 0;
    }

    /* Dots */
    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 12px;
    }

    .slider-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border);
        cursor: pointer;
        transition: background 0.2s, transform 0.2s !important;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }

    .slider-dot.active {
        background: var(--red);
        transform: scale(1.3);
    }

    /* Grid for non-slider (show more) fallback — hidden when slider active */
    .office-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .office-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
    }

    .office-card:hover {
        border-color: var(--red);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .office-card-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .office-card-district {
        font-size: 10.5px;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .office-card-count {
        font-size: 18px;
        font-weight: 800;
        color: var(--red);
        letter-spacing: -0.02em;
    }

    .office-card-count-label {
        font-size: 10px;
        color: var(--muted);
        font-weight: 600;
        margin-left: 4px;
    }

    .office-empty {
        grid-column: 1/-1;
        text-align: center;
        padding: 22px 16px;
        color: var(--muted);
        font-size: 13px;
        background: var(--white);
        border: 1px dashed var(--border);
        border-radius: 12px;
    }

    .show-more-wrap {
        text-align: center;
        margin-top: 12px;
    }

    .show-more-btn {
        background: var(--white);
        border: 1.5px solid var(--border);
        color: var(--text);
        padding: 9px 24px;
        border-radius: 100px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .show-more-btn:hover {
        border-color: var(--red);
        color: var(--red);
        background: rgba(192, 57, 43, 0.05);
    }

    /* ── MOBILE ── */
    @media (max-width: 600px) {
        .slider-arrow {
            display: none;
        }

        .office-slider-outer {
            padding: 0;
        }

        .nf-actions {
            flex-direction: column;
        }

        .retry-btn,
        .nf-scroll-btn {
            flex: unset;
            width: 100%;
        }

        .avail-hint {
            flex-direction: column;
            gap: 8px;
        }

        .avail-hint-left {
            display: none;
        }
    }

    /* ── FOOTER ── */
    footer {
        width: 100%;
        max-width: 560px;
        margin-top: 36px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        text-align: center;
        font-size: 11px;
        color: var(--muted);
        line-height: 2;
    }

    footer .footer-row {
        text-align: center;
        line-height: 1.6;
    }

    footer .sep {
        color: var(--border);
        font-size: 13px;
    }

    footer a {
        color: var(--muted);
        text-decoration: none;
        text-underline-offset: 3px;
    }

    footer a:hover {
        color: var(--red);
        text-decoration: underline;
    }

    footer .disclaimer {
        margin-top: 6px;
        font-size: 10.5px;
        color: var(--muted);
        opacity: 0.7;
    }

    .footer-visitors {
        margin-top: 8px;
        font-size: 11px;
        color: var(--muted);
    }

    .footer-visitors strong {
        color: var(--red);
        font-weight: 700;
    }

    /* ── TOAST ── */
    #toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(70px);
        background: var(--text);
        color: var(--bg);
        padding: 11px 20px;
        border-radius: 100px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        z-index: 999;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    #toast.show {
        transform: translateX(-50%) translateY(0);
    }

    /* ── ANIMATIONS ── */
    @keyframes up {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.2;
        }
    }

    /* ── MISC RESPONSIVE ── */
    @media (max-width: 420px) {
        .search-btn {
            padding: 13px 14px;
            font-size: 13px;
        }

        .info-row {
            grid-template-columns: 1fr;
        }

        .card-top {
            padding: 14px 16px 12px;
        }

        .logo-name {
            font-size: 13px;
        }
    }