:root {
    --navy:#102b49;
    --navy-dark:#081d34;
    --navy-light:#173c63;
    --gold:#d89a27;
    --gold-light:#f0bd57;
    --bg:#f4f6f9;
    --text:#172333;
    --text-soft:#687586;
    --border:#e5e9ef;
    --border-dark:#d9e0e8;
    --success:#198754;
    color-scheme:light;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.5
}

h1,h2,h3,p {
    margin:0
}

button,input {
    font:inherit
}

button,a,input,summary {
    -webkit-tap-highlight-color:transparent
}

button,summary {
    cursor:pointer
}

a {
    color:inherit;
    text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px
}

[hidden] {
    display:none!important
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.skip-link {
    position:fixed;
    top:10px;
    left:10px;
    z-index:1000;
    padding:12px;
    background:#fff;
    color:var(--navy);
    transform:translateY(-160%);
    border:2px solid var(--gold);
    border-radius:8px
}

.skip-link:focus {
    transform:none
}

.security-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--success);
    flex:none
}

/* Original Merito login composition, with accessible controls. */
.login-page {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 20px;
    background:radial-gradient(circle at top right,rgba(216,154,39,.08),transparent 32%),linear-gradient(135deg,#f4f6f9,#eef2f6)
}

.login-card {
    width:100%;
    max-width:440px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:42px 42px 30px;
    box-shadow:0 20px 60px rgba(16,43,73,.12)
}

.login-logo {
    width:82px;
    height:82px;
    margin:0 auto 22px
}

.login-logo img {
    width:100%;
    height:100%;
    object-fit:contain
}

.login-heading {
    text-align:center;
    margin-bottom:30px
}

.login-heading h1 {
    color:var(--navy);
    font-size:30px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:5px
}

.login-heading p {
    color:var(--text-soft);
    font-size:13px
}

.form-group {
    margin-bottom:18px
}

.form-group label {
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600
}

.form-group input {
    width:100%;
    height:48px;
    border:1px solid var(--border-dark);
    border-radius:10px;
    padding:0 14px;
    background:#fff;
    color:var(--text);
    font-size:16px
}

.form-group input:focus {
    border-color:var(--gold)
}

.form-group input[aria-invalid=true] {
    border-color:#b42318
}

.password-field {
    position:relative
}

.password-field:has(.password-toggle:not([hidden])) input {
    padding-right:72px
}

.password-toggle {
    position:absolute;
    right:4px;
    top:4px;
    min-height:40px;
    width:60px;
    border:0;
    background:transparent;
    border-radius:7px;
    color:var(--navy);
    font-size:12px;
    font-weight:700
}

.password-toggle:hover {
    background:var(--bg)
}

.login-options {
    display:flex;
    align-items:center;
    gap:10px;
    margin:4px 0 20px
}

.remember {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-soft);
    min-height:32px;
    cursor:pointer;
    font-size:13px
}

.remember input {
    width:17px;
    height:17px;
    accent-color:var(--navy)
}

.login-btn {
    width:100%;
    min-height:48px;
    padding:12px;
    border:0;
    border-radius:10px;
    background:var(--navy);
    color:#fff;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px
}

.login-btn:hover {
    background:var(--navy-light)
}

.login-btn span {
    color:var(--gold-light);
    font-size:20px
}

.login-help {
    margin-top:18px;
    font-size:12px;
    color:var(--text-soft)
}

.login-help summary {
    padding:5px 0;
    color:var(--navy);
    font-weight:600
}

.login-help p {
    margin-top:8px
}

.demo-notice {
    padding:11px 13px;
    border:1px solid #efdfbb;
    background:#fff9ec;
    border-radius:9px;
    margin-top:20px;
    color:#77500e;
    font-size:12px
}

.demo-notice strong,.demo-notice span {
    display:block
}

.demo-notice span {
    margin-top:2px
}

.login-footer {
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    color:var(--text-soft);
    font-size:11px
}

.field-error {
    color:#b42318;
    font-size:13px;
    margin-top:8px;
    overflow-wrap:anywhere
}

/* Shared authority shell. All assets are hosted locally. */
.sidebar {
    width:260px;
    position:fixed;
    inset:0 auto 0 0;
    background:var(--navy-dark);
    overflow-y:auto;
    z-index:20;
    color:#c6d0db
}

.brand {
    height:82px;
    padding:17px 20px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #ffffff12
}

.brand-logo {
    object-fit:contain;
    border-radius:10px;
    background:#fff;
    padding:4px
}

.brand-text {
    color:#fff;
    font-size:17px;
    font-weight:800;
    letter-spacing:1.5px;
    line-height:1.1
}

.brand-text span {
    display:block;
    margin-top:7px;
    color:#a9b8c9;
    font-size:9px;
    letter-spacing:1.2px
}

.menu {
    padding:18px 13px
}

.menu-title {
    color:#a0b2c7;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;
    padding:15px 12px 7px;
    text-transform:uppercase
}

.menu a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-radius:10px;
    color:#c6d0db;
    font-size:13px;
    font-weight:600;
    margin:4px 0;
    border:1px solid transparent
}

.menu a:hover {
    background:#162f4b;
    color:#fff
}

.menu a.active {
    background:#1b3856;
    color:#fff;
    border-color:#d89a2740;
    border-left:3px solid var(--gold);
    padding-left:11px
}

.menu a span {
    width:20px;
    text-align:center;
    font-size:18px;
    color:var(--gold-light)
}

.menu-roadmap {
    margin-top:20px;
    border-top:1px solid #ffffff12
}

.menu-hint {
    font-size:11px;
    padding:0 12px 10px;
    color:#bfcbda
}

.menu-roadmap ul {
    list-style:none;
    padding:0 12px;
    margin:0
}

.menu-roadmap li {
    padding:10px 0;
    color:#94a7bd;
    font-size:12px
}

.sidebar-note {
    display:flex;
    align-items:center;
    gap:9px;
    margin:15px 25px 25px;
    font-size:11px;
    color:#bfcbda
}

.main-shell {
    margin-left:260px;
    min-height:100vh
}

.topbar {
    min-height:82px;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.topbar-heading {
    display:flex;
    align-items:center;
    gap:12px
}

.page-title {
    font-weight:750;
    color:var(--navy);
    font-size:18px
}

.page-subtitle {
    color:var(--text-soft);
    font-size:12px;
    margin-top:2px
}

.account {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0
}

.admin-avatar {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:none;
    border-radius:12px;
    background:#fff6df;
    color:#815709;
    font-weight:800
}

.account-details {
    max-width:180px;
    overflow-wrap:anywhere
}

.account-details strong,.account-details span {
    display:block
}

.account-details strong {
    font-size:13px
}

.account-details span {
    font-size:11px;
    color:var(--text-soft)
}

.sign-out {
    background:#fff;
    border:1px solid var(--border-dark);
    border-radius:8px;
    min-height:42px;
    padding:8px 13px;
    color:var(--navy);
    font-size:12px;
    white-space:nowrap
}

.sign-out:hover {
    background:var(--bg)
}

.content {
    max-width:1600px;
    margin:auto;
    padding:28px 32px
}

.dashboard-welcome {
    background:var(--navy);
    border-radius:18px;
    padding:26px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 30px #102b491a
}

.dashboard-welcome:after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:1px solid #f0bd5733;
    border-radius:50%;
    right:90px;
    top:-100px;
    pointer-events:none
}

.eyebrow {
    color:#94620c;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:5px
}

.dashboard-welcome .eyebrow {
    color:var(--gold-light)
}

.dashboard-welcome h1 {
    color:#fff;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.5px
}

.dashboard-welcome p:not(.eyebrow) {
    color:#bfcbda;
    font-size:13px;
    margin-top:7px;
    max-width:500px
}

.welcome-date {
    flex:none;
    position:relative;
    z-index:1;
    padding:12px 16px;
    border:1px solid #ffffff25;
    border-radius:10px;
    color:#fff;
    background:#ffffff0d;
    font-size:13px;
    font-weight:650
}

.welcome-date span {
    display:block;
    color:#bfcbda;
    font-size:10px;
    margin-top:4px;
    font-weight:400
}

.workspace-notice {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:20px 0;
    color:var(--text-soft);
    font-size:12px
}

.badge {
    display:inline-block;
    white-space:nowrap;
    border:1px solid #efdfbb;
    padding:4px 9px;
    border-radius:6px;
    background:#fff6df;
    color:#77500e;
    font-size:11px;
    font-weight:650
}

.badge.neutral {
    background:#f4f6f9;
    color:#576677;
    border-color:var(--border)
}

.badge.ready {
    background:#eaf7f0;
    color:#14683e;
    border-color:#cbe7d7
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:22px 0
}

.stat-card {
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    border-top:3px solid var(--accent);
    border-radius:14px;
    padding:22px;
    box-shadow:0 2px 8px #102b4908
}

.stat-card:after {
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    right:-42px;
    bottom:-48px;
    background:#d89a2712
}

.blue {
    --accent:#2d73b9
}

.green {
    --accent:#198754
}

.gold {
    --accent:#d89a27
}

.purple {
    --accent:#7a5ca5
}

.stat-card h2 {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:1px;
    color:var(--text-soft);
    font-weight:750
}

.stat-value {
    font-size:32px;
    line-height:1.2;
    font-weight:800;
    color:var(--navy);
    margin:13px 0 9px;
    overflow-wrap:anywhere
}

.stat-note {
    font-size:11px;
    color:var(--text-soft)
}

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:20px
}

.panel {
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    min-width:0;
    box-shadow:0 2px 8px #102b4908;
    scroll-margin-top:20px
}

.panel-heading {
    padding:22px 24px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.panel h2 {
    font-size:17px;
    color:var(--navy)
}

.health-list {
    margin:0;
    padding:4px 24px
}

.health-list>div {
    display:grid;
    grid-template-columns:minmax(110px,1fr) minmax(0,1.2fr);
    gap:15px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
    font-size:12px
}

.health-list>div:last-child {
    border:0
}

.health-list dt {
    color:var(--text-soft)
}

.health-list dd {
    margin:0;
    font-weight:600;
    overflow-wrap:anywhere
}

.status-ok {
    color:#14683e
}

.status-error {
    color:#b42318
}

.panel-footnote {
    padding:14px 24px 20px;
    font-size:11px;
    color:var(--text-soft);
    border-top:1px solid var(--border)
}

.delivery-list {
    list-style:none;
    margin:0;
    padding:5px 24px
}

.delivery-list li {
    display:flex;
    gap:14px;
    padding:20px 0;
    border-bottom:1px solid var(--border)
}

.delivery-list li:last-child {
    border:0
}

.step-number {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:none;
    border:1px solid var(--border);
    border-radius:9px;
    color:#687586;
    font-size:11px;
    font-weight:700
}

.delivery-list h3 {
    font-size:13px;
    color:var(--navy)
}

.delivery-list p {
    font-size:12px;
    color:var(--text-soft);
    margin:5px 0 10px
}

.workspace-footer {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    padding:24px 0 0;
    color:var(--text-soft);
    font-size:11px
}

.menu-toggle {
    display:none;
    min-width:42px;
    min-height:42px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--navy);
    font-size:20px
}

.mobile-navigation {
    background:var(--navy-dark);
    color:#c6d0db;
    border:0;
    padding:0;
    margin:0;
    width:min(300px,88vw);
    max-width:none;
    height:100dvh;
    max-height:none;
    overflow-y:auto
}

.mobile-navigation::backdrop {
    background:#081d3499
}

.drawer-close {
    position:absolute;
    right:8px;
    top:18px;
    width:42px;
    height:42px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:28px;
    border-radius:8px
}

.mobile-navigation .brand {
    padding-right:50px
}

.menu-open {
    overflow:hidden
}

@media(min-width:901px) and (max-width:1200px) {
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .dashboard-grid {
        grid-template-columns:1fr
    }
    .account-details {
        max-width:120px
    }
}

@media(max-width:900px) {
    .sidebar {
        display:none
    }
    .main-shell {
        margin-left:0
    }
    .menu-toggle {
        display:block
    }
    .topbar {
        padding:16px 20px
    }
    .content {
        padding:24px 20px
    }
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .dashboard-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:600px) {
    .topbar {
        padding:12px 14px;
        gap:10px;
        flex-wrap:wrap
    }
    .topbar-heading {
        gap:8px
    }
    .page-title {
        font-size:15px
    }
    .page-subtitle {
        font-size:11px
    }
    .account {
        margin-left:auto;
        gap:8px
    }
    .account-details,.admin-avatar {
        display:none
    }
    .content {
        padding:20px 14px
    }
    .dashboard-welcome {
        padding:22px;
        align-items:flex-start;
        flex-direction:column;
        gap:18px
    }
    .dashboard-welcome h1 {
        font-size:24px
    }
    .welcome-date {
        padding:8px 12px
    }
    .welcome-date span {
        display:inline;
        margin-left:10px
    }
    .stat-card {
        padding:17px 14px
    }
    .stat-value {
        font-size:28px
    }
    .stats-grid {
        gap:12px
    }
    .panel-heading {
        padding:20px
    }
    .health-list {
        padding:4px 20px
    }
    .health-list>div {
        grid-template-columns:1fr;
        gap:4px
    }
    .delivery-list {
        padding:0 20px
    }
    .panel-footnote {
        padding:14px 20px
    }
    .login-page {
        padding:20px 14px
    }
    .login-card {
        padding:32px 22px 25px;
        border-radius:16px
    }
    .login-heading h1 {
        font-size:26px
    }
}

@media(max-width:350px) {
    .stats-grid {
        grid-template-columns:1fr
    }
    .welcome-date span {
        display:block;
        margin-left:0
    }
}