:root {
            --bg: #f5f1e8;
            --surface: #fffdf8;
            --surface-soft: #f9f4ea;
            --ink: #1f2d3d;
            --ink-soft: #6d7682;
            --navy: #112e42;
            --teal: #1f6f65;
            --gold: #c08a3e;
            --line: #e4ddd1;
            --shadow-soft: 0 14px 30px rgba(20, 31, 44, .12);
            --radius-lg: 18px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Manrope', 'Segoe UI', sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at 8% -2%, rgba(192, 138, 62, .18), transparent 34%),
                radial-gradient(circle at 95% 2%, rgba(31, 111, 101, .16), transparent 28%),
                linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
            min-height: 100vh;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
            letter-spacing: -.01em;
        }

        .portal-shell {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .portal-nav-wrap {
            padding: 12px 12px 0;
        }

        .portal-nav {
            width: 100%;
            max-width: none;
            margin: 0;
            border: 1px solid #d8d0c4;
            background: rgba(255, 253, 248, .88);
            backdrop-filter: blur(8px);
            border-radius: 14px;
            box-shadow: var(--shadow-soft);
            padding: 12px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .portal-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .portal-brand-logo {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid #d6ccbe;
            box-shadow: 0 8px 15px rgba(17, 46, 66, .16);
            background: #fff;
        }

        .portal-brand-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient(130deg, var(--teal), #214b67);
            box-shadow: 0 10px 18px rgba(17, 46, 66, .2);
        }

        .portal-brand-title {
            font-size: 1.02rem;
            font-weight: 800;
            margin: 0;
            line-height: 1.2;
            color: var(--navy);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .portal-brand-tagline {
            margin: 0;
            color: var(--ink-soft);
            font-size: .82rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .portal-nav-actions {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .btn-nav {
            border-radius: 999px;
            font-weight: 700;
            letter-spacing: .01em;
            padding: .4rem .78rem;
            font-size: .82rem;
        }

        .btn-nav-primary {
            color: #fff;
            border: 0;
            background: linear-gradient(120deg, var(--navy), #214b67);
            box-shadow: 0 10px 18px rgba(17, 46, 66, .2);
        }

        .btn-nav-primary:hover,
        .btn-nav-primary:focus {
            color: #fff;
            background: linear-gradient(120deg, #17374e, #275575);
        }

        .btn-nav-ghost {
            color: var(--navy);
            border: 1px solid #c9c0b3;
            background: #fffdf8;
        }

        .btn-nav-ghost:hover,
        .btn-nav-ghost:focus {
            color: var(--navy);
            border-color: #b8ac99;
            background: #fff8ed;
        }

        .portal-main {
            width: 100%;
            max-width: none;
            margin: 12px 0 0;
            padding: 0 12px 28px;
            flex: 1;
        }

        .portal-footer {
            max-width: none;
            margin: 0;
            width: 100%;
            padding: 16px 12px 20px;
        }

        .portal-footer-surface {
            border: 1px solid #e0d8cc;
            background: linear-gradient(180deg, rgba(255, 253, 248, .95) 0%, rgba(245, 241, 232, .98) 100%);
            border-radius: 18px;
            box-shadow: 0 -8px 30px rgba(20, 31, 44, .08), inset 0 1px 0 rgba(255,255,255,.8);
            padding: 0;
            overflow: hidden;
        }

        .portal-footer-top {
            display: grid;
            grid-template-columns: 1.4fr .7fr .7fr .9fr;
            gap: 24px;
            padding: 28px 28px 24px;
        }

        .portal-footer-brand {
            min-width: 0;
        }

        .portal-footer-brand-title {
            margin: 0 0 4px;
            font-size: 1.1rem;
            font-weight: 800;
            color: #17344b;
            line-height: 1.3;
        }

        .portal-footer-brand-tagline {
            margin: 0 0 12px;
            color: #6d7682;
            font-size: .85rem;
            line-height: 1.5;
        }

        .portal-footer-social {
            display: flex;
            gap: 8px;
        }

        .portal-footer-social a {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #5a6674;
            background: rgba(0,0,0,.04);
            border: 1px solid rgba(0,0,0,.06);
            text-decoration: none;
            transition: all .15s;
        }

        .portal-footer-social a:hover {
            background: var(--teal);
            color: #fff;
            border-color: var(--teal);
            transform: translateY(-2px);
        }

        .portal-footer-col-title {
            margin: 0 0 10px;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            font-weight: 800;
            color: #17344b;
        }

        .portal-footer-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .portal-footer-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            font-size: .85rem;
            text-decoration: none;
            padding: 4px 0;
            transition: color .15s, padding-left .15s;
        }

        .portal-footer-link i {
            font-size: .9rem;
            width: 18px;
            text-align: center;
            color: #8a95a3;
            transition: color .15s;
        }

        .portal-footer-link:hover,
        .portal-footer-link:focus {
            color: var(--teal);
            padding-left: 4px;
            text-decoration: none;
        }

        .portal-footer-link:hover i {
            color: var(--teal);
        }

        .portal-footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
        }

        .portal-footer-contact-item i {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(31, 111, 101, .08);
            color: var(--teal);
            font-size: .85rem;
            flex-shrink: 0;
        }

        .portal-footer-contact-item .contact-text {
            font-size: .82rem;
            color: #4a5568;
            line-height: 1.4;
        }

        .portal-footer-contact-item .contact-label {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #8a95a3;
            font-weight: 600;
        }

        .portal-footer-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, #e0d8cc, transparent);
            margin: 0 28px;
        }

        .portal-footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 16px 28px;
            color: #8a95a3;
            font-size: .78rem;
            flex-wrap: wrap;
        }

        .portal-footer-bottom a {
            color: var(--teal);
            text-decoration: none;
            font-weight: 600;
        }

        .portal-footer-bottom a:hover {
            text-decoration: underline;
        }

        @media (max-width: 991.98px) {
            .portal-nav-wrap,
            .portal-main,
            .portal-footer {
                padding-left: 10px;
                padding-right: 10px;
            }

            .portal-nav {
                border-radius: 14px;
                padding: 10px;
                flex-wrap: wrap;
            }

            .portal-brand {
                width: 100%;
            }

            .portal-nav-actions {
                width: 100%;
                justify-content: flex-start;
            }

            .portal-footer-top {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 20px;
            }

            .portal-footer-divider {
                margin: 0 20px;
            }

            .portal-footer-bottom {
                padding: 14px 20px;
                flex-direction: column;
                text-align: center;
            }
        }

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ══════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .portal-nav { flex-wrap: wrap; gap: 8px; }
    .portal-nav-links { display: none !important; }
    .portal-nav-actions { width: 100%; justify-content: flex-end; }
    .portal-footer-top { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}

@media (max-width: 767.98px) {
    .public-hero-grid { grid-template-columns: 1fr !important; }
    .public-hero-stats { flex-direction: row; gap: .5rem; }
    .portal-footer-top { grid-template-columns: 1fr !important; }
    .portal-brand-title { font-size: .92rem !important; }
    .portal-brand-tagline { display: none; }
    .portal-nav { padding: 10px !important; border-radius: 10px !important; }
    .portal-nav-wrap { padding: 8px 8px 0; }
    .portal-main { padding: 0 8px; }
    .portal-footer-surface { border-radius: 14px !important; }
    .btn-nav { font-size: .78rem !important; padding: 6px 10px !important; }

    /* Tracking page */
    .tracking-hero { padding: 1.5rem 1rem !important; }
    .tracking-hero h1 { font-size: 1.2rem !important; }
    .tracking-box { padding: 1.2rem !important; }
    .tracking-input-group { flex-direction: column; }
    .result-grid { grid-template-columns: 1fr !important; }

    /* Layanan page */
    .layanan-hero { padding: 1.5rem 1rem !important; }
    .layanan-hero h1 { font-size: 1.2rem !important; }
    .layanan-hero .stat-row { gap: 1rem !important; }
    .layanan-hero .stat-num { font-size: 1.4rem !important; }
    .layanan-toolbar { flex-direction: column; }
    .layanan-grid { grid-template-columns: 1fr !important; }

    /* Wizard modal */
    .modal-dialog { margin: 8px !important; }
    .modal-body { padding: .8rem !important; }
    .wiz-ind small { display: none; }
    .wiz-ind span { width: 24px; height: 24px; font-size: .7rem; }
}

@media (max-width: 575.98px) {
    .public-hero h1 { font-size: 1.1rem !important; }
    .public-hero p { font-size: .82rem !important; }
    .portal-footer-bottom { flex-direction: column; gap: 4px; text-align: center; }
    .portal-footer-social { justify-content: center; }
    .layanan-card { padding: 1rem !important; }
    .layanan-card-title { font-size: .92rem !important; }
}

/* ══════════════════════════════════════════
   DARK MODE — Portal Publik
   ══════════════════════════════════════════ */
[data-theme="dark"] .portal-shell { color: #e2edf7; }
[data-theme="dark"] body.portal-body,
[data-theme="dark"] .portal-shell {
    background: radial-gradient(circle at 8% -2%, rgba(0,200,255,.08), transparent 34%),
        radial-gradient(circle at 95% 2%, rgba(0,229,160,.06), transparent 28%),
        linear-gradient(180deg, #0a1220 0%, #060d18 100%) !important;
}
[data-theme="dark"] .portal-nav {
    background: rgba(12,25,41,.88) !important;
    border-color: rgba(0,200,255,.15) !important;
}
[data-theme="dark"] .portal-brand-title,
[data-theme="dark"] .portal-brand-tagline { color: #e2edf7 !important; }
[data-theme="dark"] .btn-nav-ghost { color: #a8c0d4 !important; }
[data-theme="dark"] .btn-nav-ghost:hover { color: #00c8ff !important; background: rgba(0,200,255,.1) !important; }
[data-theme="dark"] .btn-nav-primary { background: linear-gradient(120deg, #00c8ff, #00e5a0) !important; color: #000 !important; }

[data-theme="dark"] .portal-panel,
[data-theme="dark"] .tracking-box,
[data-theme="dark"] .result-card,
[data-theme="dark"] .layanan-card {
    background: #0c1929 !important;
    border-color: rgba(0,200,255,.15) !important;
    color: #e2edf7;
}
[data-theme="dark"] .layanan-card:hover { border-color: #00c8ff !important; box-shadow: 0 8px 24px rgba(0,200,255,.15) !important; }
[data-theme="dark"] .layanan-card-title { color: #e2edf7 !important; }
[data-theme="dark"] .layanan-card-desc { color: #a8c0d4 !important; }
[data-theme="dark"] .layanan-card-code { background: rgba(0,200,255,.12) !important; color: #00c8ff !important; }
[data-theme="dark"] .layanan-sla { color: #6a8ba8 !important; }
[data-theme="dark"] .layanan-btn-ajukan { color: #00c8ff !important; }

[data-theme="dark"] .portal-footer-surface {
    background: #0c1929 !important;
    border-color: rgba(0,200,255,.12) !important;
}
[data-theme="dark"] .portal-footer-brand-title { color: #e2edf7 !important; }
[data-theme="dark"] .portal-footer-brand-tagline,
[data-theme="dark"] .portal-footer-link { color: #6a8ba8 !important; }
[data-theme="dark"] .portal-footer-link:hover { color: #00c8ff !important; }
[data-theme="dark"] .portal-footer-col-title { color: #a8c0d4 !important; }
[data-theme="dark"] .portal-footer-bottom { color: #3d5a72 !important; }

[data-theme="dark"] .form-control {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(0,200,255,.2) !important;
    color: #e2edf7 !important;
}
[data-theme="dark"] .form-control::placeholder { color: #3d5a72 !important; }

[data-theme="dark"] .panel-head h6 { color: #e2edf7 !important; }
[data-theme="dark"] .panel-sub { color: #6a8ba8 !important; }

[data-theme="dark"] .result-ticket { color: #00c8ff !important; }
[data-theme="dark"] .result-item label { color: #6a8ba8 !important; }
[data-theme="dark"] .result-item span { color: #e2edf7 !important; }
[data-theme="dark"] .timeline-dot { background: rgba(0,200,255,.2) !important; }
[data-theme="dark"] .timeline-dot.active { background: #00c8ff !important; }
[data-theme="dark"] .timeline-info .tl-title { color: #e2edf7 !important; }
[data-theme="dark"] .doc-item { background: rgba(255,255,255,.04) !important; color: #a8c0d4 !important; }
[data-theme="dark"] .doc-item a { color: #00c8ff !important; }

[data-theme="dark"] #mobileNav > div { background: #0c1929 !important; border-color: rgba(0,200,255,.15) !important; }
[data-theme="dark"] #mobileNav a { color: #a8c0d4 !important; }

/* Ocean theme portal overrides */
[data-theme="ocean"] .portal-nav { background: rgba(17,27,46,.92) !important; border-color: rgba(14,165,233,.15) !important; }
[data-theme="ocean"] .portal-panel, [data-theme="ocean"] .tracking-box, [data-theme="ocean"] .result-card, [data-theme="ocean"] .layanan-card {
    background: #111b2e !important; border-color: rgba(14,165,233,.15) !important; }
[data-theme="ocean"] .portal-footer-surface { background: #111b2e !important; }

/* ══════════════════════════════════════════
   DARK MODE — Portal components (complete)
   ══════════════════════════════════════════ */
[data-theme="dark"] .portal-panel {
    background: var(--surface, #0c1929) !important;
    border-color: var(--line, rgba(0,200,255,.15)) !important;
    color: var(--ink, #e2edf7) !important;
}
[data-theme="dark"] .panel-head { border-color: var(--line, rgba(0,200,255,.12)) !important; }
[data-theme="dark"] .panel-head h6 { color: var(--ink, #e2edf7) !important; }
[data-theme="dark"] .panel-sub { color: var(--ink-soft, #6a8ba8) !important; }
[data-theme="dark"] .panel-body { color: var(--ink, #e2edf7) !important; }
[data-theme="dark"] .public-hero {
    background: radial-gradient(circle at 92% 14%, rgba(0,200,255,.15), transparent 36%),
        linear-gradient(128deg, #0a1929 0%, #0c1f33 48%, #0f2840 100%) !important;
}
[data-theme="dark"] .how-step p { color: var(--ink-soft, #6a8ba8) !important; }
[data-theme="dark"] .how-step h6 { color: var(--ink, #e2edf7) !important; }
[data-theme="dark"] .faq-q { color: var(--ink, #e2edf7) !important; }
[data-theme="dark"] .faq-a { color: var(--ink-soft, #6a8ba8) !important; }
[data-theme="dark"] .text-secondary { color: var(--ink-soft, #6a8ba8) !important; }
[data-theme="dark"] .text-dark { color: var(--ink, #e2edf7) !important; }

/* Ocean theme portal components */
[data-theme="ocean"] .portal-panel {
    background: #111b2e !important;
    border-color: rgba(14,165,233,.15) !important;
    color: #e0f2fe !important;
}
[data-theme="ocean"] .panel-head h6 { color: #e0f2fe !important; }
[data-theme="ocean"] .panel-sub { color: #60a5fa !important; }
[data-theme="ocean"] .public-hero {
    background: radial-gradient(circle at 92% 14%, rgba(14,165,233,.15), transparent 36%),
        linear-gradient(128deg, #0c1222 0%, #111b2e 48%, #1c2840 100%) !important;
}