:root {
    --navy: #111a26;
    --navy-2: #173b62;
    --blue: #16599f;
    --blue-2: #0e447c;
    --cyan: #c9e9ec;
    --red: #c64a3a;
    --night: #0a131e;
    --night-2: #10243a;
    --lime: #16599f;
    --lime-dark: #0e447c;
    --sport-blue: #16599f;
    --sport-paper: #f2f5f8;
    --sport-line: #cbd5df;
    --brand-blue: #16599f;
    --brand-blue-dark: #0e447c;
    --brand-red: #c64a3a;
    --brand-sky: #c9e9ec;
    --brand-black: #211e20;
}

.site-header {
    background: linear-gradient(100deg, rgba(12, 22, 34, .98), rgba(18, 71, 119, .97));
    border-bottom-color: rgba(201, 233, 236, .2);
}

.brand-logo {
    width: 58px;
    height: 62px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-logo-footer {
    width: 54px;
    height: 58px;
    flex-basis: 54px;
}

.brand-logo-admin {
    width: 50px;
    height: 54px;
    flex-basis: 50px;
}

.brand-logo-auth {
    width: 72px;
    height: 76px;
    flex-basis: 72px;
}

.site-nav a:after {
    background: var(--brand-red);
}

.site-nav .nav-admin {
    border-color: rgba(201, 233, 236, .42);
    background: rgba(255, 255, 255, .05);
}

.premium-hero:after {
    background: linear-gradient(110deg, transparent 0 70%, rgba(198, 74, 58, .14) 70% 71%, transparent 71%), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: auto, 100% 6px;
}

.premium-hero h1 em {
    color: var(--brand-sky);
}

.premium-hero .lead {
    border-left-color: var(--brand-red);
}

.premium-hero .button-primary,
.button-primary {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    box-shadow: 0 12px 28px rgba(22, 89, 159, .25);
}

.premium-hero .button-primary:hover,
.button-primary:hover {
    box-shadow: 0 15px 32px rgba(22, 89, 159, .36);
}

.premium-hero-content .status-pill.open span {
    background: #43c783;
    box-shadow: 0 0 12px #43c783;
}

.hero-crest {
    position: absolute;
    right: 40px;
    top: 74px;
    width: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .72);
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-align: center;
}

.hero-crest img {
    width: 146px;
    height: 151px;
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .36));
}

.hero-scoreboard strong sup,
.section-index.lime,
.page-hero .eyebrow {
    color: var(--brand-sky);
}

.hero-scoreboard .score-action,
.sport-ticker {
    background: var(--brand-blue);
    color: #fff;
}

.score-action a {
    color: #fff;
}

.sport-ticker i {
    color: var(--brand-red);
}

.premium-steps article:hover > b:after {
    background: var(--brand-red);
}

.program-visual {
    background: radial-gradient(circle at 45% 45%, #194f83 0, #102d4a 34%, #09121d 76%);
}

.program-visual:before {
    border-color: rgba(201, 233, 236, .3);
}

.program-visual > span {
    color: var(--brand-sky);
}

.age-bands span.active {
    background: var(--brand-blue);
    color: #fff;
}

.premium-status-cta {
    background: #e6edf3;
}

.premium-period,
.page-hero,
.sticky-card,
.code-card,
.help-card,
.age-chip {
    background: linear-gradient(135deg, #0b1724, #154a7b);
}

.sticky-card,
.lookup-form {
    border-top-color: var(--brand-blue);
}

.step-list li.active > span,
.progress-track span {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.form-heading > span,
.upload-icon,
.security-note > span,
.quick-panel > a > span {
    background: #e2eef8;
    color: var(--brand-blue-dark);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.filter-form input:focus,
.filter-form select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(22, 89, 159, .16);
}

.upload-card:hover {
    border-color: var(--brand-blue);
    background: #eef5fb;
}

.consent-box {
    border-left-color: var(--brand-blue);
    background: #edf4fa;
}

.timeline li > span {
    background: var(--brand-blue);
    box-shadow: 0 0 0 5px #dfeaf5;
}

.site-footer {
    background: linear-gradient(110deg, #070d14, #102943);
}

.footer-bottom strong {
    color: var(--brand-sky);
}

.sidebar {
    background: linear-gradient(180deg, #0a141f 0%, #113b62 100%);
    border-right-color: rgba(201, 233, 236, .18);
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: linear-gradient(90deg, rgba(201, 233, 236, .15), transparent);
    border-left-color: var(--brand-red);
}

.avatar {
    background: linear-gradient(145deg, var(--brand-blue), #2d7fc4);
}

.dashboard-intro {
    background: linear-gradient(100deg, #101a25, #154a7b);
    border-left-color: var(--brand-red);
}

.stat-card:hover:after {
    background: var(--brand-blue);
}

.table-wrap tr:hover td,
.quick-panel > a:hover {
    background: #edf4fa;
}

.auth-visual {
    background-color: #0b1724;
}

.auth-visual:after {
    background: linear-gradient(90deg, rgba(5, 14, 23, .97), rgba(14, 68, 124, .64));
}

.auth-quote > span {
    color: var(--brand-red);
}

.integration-banner {
    background: linear-gradient(135deg, #0b1724, #15599f);
}

@media (max-width: 1000px) {
    .hero-crest {
        display: none;
    }
}

@media (max-width: 760px) {
    .brand-logo {
        width: 48px;
        height: 52px;
        flex-basis: 48px;
    }

    .site-nav {
        background: #0d2134;
        border-color: rgba(201, 233, 236, .2);
    }
}

/* Perbaikan tombol keputusan: kartu riwayat tidak menimpa formulir saat scroll. */
.admin-detail-grid .detail-sidebar {
    min-width: 0;
}

.admin-detail-grid .detail-sidebar > .panel {
    flex-shrink: 0;
}

.admin-detail-grid .detail-sidebar > .decision-panel {
    position: static;
    top: auto;
}

/* Formulir dan riwayat langsung terlihat tanpa menunggu animasi reveal. */
.admin-detail-grid .detail-sidebar > .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}