:root{
    color-scheme:light;

    --soa-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    --soa-radius-xs:7px;
    --soa-radius-sm:10px;
    --soa-radius-md:14px;
    --soa-radius-lg:18px;
    --soa-radius-xl:24px;

    --soa-space-1:4px;
    --soa-space-2:8px;
    --soa-space-3:12px;
    --soa-space-4:16px;
    --soa-space-5:20px;
    --soa-space-6:24px;
    --soa-space-7:32px;

    --soa-text:#17243a;
    --soa-heading:#111827;
    --soa-text-muted:#5f6f83;
    --soa-text-soft:#7d8a9c;
    --soa-link:var(--soa-primary,#7357d8);

    --soa-border:rgba(255,255,255,.46);
    --soa-border-strong:rgba(255,255,255,.66);
    --soa-divider:rgba(27,42,65,.10);

    --soa-glass:rgba(255,255,255,.24);
    --soa-glass-strong:rgba(255,255,255,.34);
    --soa-glass-soft:rgba(255,255,255,.14);
    --soa-glass-hover:rgba(255,255,255,.42);
    --soa-input:rgba(255,255,255,.70);
    --soa-table-head:rgba(255,255,255,.34);
    --soa-table-row:rgba(255,255,255,.12);
    --soa-modal-backdrop:rgba(6,12,24,.34);

    --soa-sidebar-text:#f5f8ff;
    --soa-sidebar-muted:#b9c9e1;
    --soa-sidebar-icon:#e6eefb;

    --soa-success:#16845b;
    --soa-warning:#b26b00;
    --soa-danger:#c43d4b;
    --soa-info:#2563eb;

    --soa-shadow-sm:0 7px 20px rgba(17,35,60,.08);
    --soa-shadow-md:0 14px 38px rgba(17,35,60,.13);
    --soa-shadow-lg:0 24px 64px rgba(17,35,60,.18);

    --soa-backdrop:blur(14px) saturate(132%);
    --soa-transition:.18s ease;
}

html[data-theme="dark"]{
    color-scheme:dark;

    --soa-text:#f7f9fc;
    --soa-heading:#ffffff;
    --soa-text-muted:#d1d8e5;
    --soa-text-soft:#aeb9c9;
    --soa-link:#b6a7ff;

    --soa-border:rgba(255,255,255,.14);
    --soa-border-strong:rgba(255,255,255,.24);
    --soa-divider:rgba(255,255,255,.10);

    --soa-glass:rgba(8,16,30,.28);
    --soa-glass-strong:rgba(8,16,30,.42);
    --soa-glass-soft:rgba(8,16,30,.16);
    --soa-glass-hover:rgba(18,30,50,.58);
    --soa-input:rgba(10,19,34,.72);
    --soa-table-head:rgba(9,18,33,.44);
    --soa-table-row:rgba(9,18,33,.18);
    --soa-modal-backdrop:rgba(0,0,0,.46);

    --soa-sidebar-text:#ffffff;
    --soa-sidebar-muted:#d7e1f1;
    --soa-sidebar-icon:#ffffff;

    --soa-success:#45d19c;
    --soa-warning:#f8bd58;
    --soa-danger:#ff7e8a;
    --soa-info:#7fb0ff;

    --soa-shadow-sm:0 8px 22px rgba(0,0,0,.20);
    --soa-shadow-md:0 16px 42px rgba(0,0,0,.28);
    --soa-shadow-lg:0 28px 70px rgba(0,0,0,.36);
}

*{box-sizing:border-box}
html{font-family:var(--soa-font)}
.soa-layout{color:var(--soa-text)!important}
body,button,input,select,textarea{font-family:var(--soa-font)}
.soa-layout a{color:var(--soa-link)}
.soa-layout a,.soa-layout button,.soa-layout input,.soa-layout select,.soa-layout textarea{transition:var(--soa-transition)}

.soa-page-banner h1,
.soa-page-banner h2,
.soa-page-banner h3,
.soa-page-banner h4,
.soa-page-banner h5,
.soa-page-banner h6,
.soa-page-body h1,
.soa-page-body h2,
.soa-page-body h3,
.soa-page-body h4,
.soa-page-body h5,
.soa-page-body h6,
.soa-page-body strong,
.soa-page-body b{
    color:var(--soa-heading)!important;
}

.soa-page-banner p,
.soa-page-banner small,
.soa-page-body p,
.soa-page-body small,
.soa-page-body label,
.soa-page-body legend,
.soa-page-body .muted,
.soa-page-body .text-muted,
.soa-page-body .help-text,
.soa-page-body .description{
    color:var(--soa-text-muted)!important;
}

.soa-glass,
.soa-card,
.soa-panel,
.soa-modal-content{
    border:1px solid var(--soa-border)!important;
    background:var(--soa-glass)!important;
    color:var(--soa-text)!important;
    -webkit-backdrop-filter:var(--soa-backdrop)!important;
    backdrop-filter:var(--soa-backdrop)!important;
    box-shadow:var(--soa-shadow-sm)!important;
}

.soa-card,.soa-panel{border-radius:var(--soa-radius-md)!important}

.soa-btn,
.soa-page-body .btn,
.soa-page-body button:not(.soa-menu-button):not(.soa-theme-toggle),
.soa-page-body input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:9px 14px;
    border:1px solid var(--soa-border-strong)!important;
    border-radius:var(--soa-radius-sm)!important;
    background:var(--soa-glass-strong)!important;
    color:var(--soa-text)!important;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(18,37,63,.06);
}

.soa-btn:hover,
.soa-page-body .btn:hover,
.soa-page-body button:not(.soa-menu-button):not(.soa-theme-toggle):hover{
    transform:translateY(-1px);
    background:var(--soa-glass-hover)!important;
    border-color:var(--soa-primary)!important;
}

.soa-btn-primary,
.soa-page-body .btn.primary,
.soa-page-body button.primary,
.soa-page-body .primary-btn{
    border-color:var(--soa-primary)!important;
    background:var(--soa-primary)!important;
    color:#fff!important;
}

.soa-badge,
.soa-page-body .badge,
.soa-page-body .status{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:5px 9px;
    border:1px solid var(--soa-border);
    border-radius:999px;
    background:var(--soa-glass-strong)!important;
    color:var(--soa-text)!important;
    font-size:10px;
    font-weight:900;
}

.soa-alert,
.soa-page-body .alert,
.soa-page-body .flash{
    padding:12px 14px;
    border:1px solid var(--soa-border-strong);
    border-left:5px solid var(--soa-primary);
    border-radius:var(--soa-radius-sm);
    background:var(--soa-glass-strong)!important;
    color:var(--soa-text)!important;
    -webkit-backdrop-filter:var(--soa-backdrop);
    backdrop-filter:var(--soa-backdrop);
}

.soa-page-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.soa-page-body select,
.soa-page-body textarea{
    width:100%;
    min-height:42px;
    border:1px solid var(--soa-border-strong)!important;
    border-radius:var(--soa-radius-sm)!important;
    background:var(--soa-input)!important;
    color:var(--soa-text)!important;
    padding:9px 11px!important;
    outline:none;
}

.soa-page-body input::placeholder,
.soa-page-body textarea::placeholder{
    color:var(--soa-text-soft)!important;
    opacity:1;
}

.soa-page-body select option{
    background:#ffffff;
    color:#17243a;
}
html[data-theme="dark"] .soa-page-body select option{
    background:#111827;
    color:#ffffff;
}

.soa-page-body textarea{min-height:105px}
.soa-page-body input:focus,
.soa-page-body select:focus,
.soa-page-body textarea:focus{
    border-color:var(--soa-primary)!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--soa-primary) 18%,transparent)!important;
}

.soa-page-body table{
    width:100%;
    border-collapse:separate!important;
    border-spacing:0!important;
    overflow:hidden;
    border:1px solid var(--soa-border)!important;
    border-radius:var(--soa-radius-md)!important;
    background:var(--soa-glass-soft)!important;
    color:var(--soa-text)!important;
    -webkit-backdrop-filter:var(--soa-backdrop);
    backdrop-filter:var(--soa-backdrop);
}

.soa-page-body thead,
.soa-page-body th{
    background:var(--soa-table-head)!important;
    color:var(--soa-heading)!important;
}

.soa-page-body th{
    font-size:10px!important;
    letter-spacing:.035em;
    text-transform:uppercase;
}

.soa-page-body td,
.soa-page-body th{
    padding:11px 12px!important;
    border-bottom:1px solid var(--soa-divider)!important;
}

.soa-page-body td{color:var(--soa-text)!important}
.soa-page-body tbody tr{background:var(--soa-table-row)!important}
.soa-page-body tbody tr:hover{
    background:color-mix(in srgb,var(--soa-primary) 10%,transparent)!important;
}
.soa-page-body tbody tr:last-child td{border-bottom:0!important}

.soa-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
    place-items:center;
    padding:20px;
    background:var(--soa-modal-backdrop);
}
.soa-modal.open{display:grid}
.soa-modal-content{
    width:min(620px,100%);
    max-height:90vh;
    overflow:auto;
    border-radius:var(--soa-radius-lg)!important;
    padding:22px;
}

/* Dark-mode hardcoded color override safety net */
html[data-theme="dark"] .soa-page-body,
html[data-theme="dark"] .soa-page-body div,
html[data-theme="dark"] .soa-page-body span,
html[data-theme="dark"] .soa-page-body li,
html[data-theme="dark"] .soa-page-body td,
html[data-theme="dark"] .soa-page-body label{
    color:var(--soa-text);
}
html[data-theme="dark"] .soa-page-body h1,
html[data-theme="dark"] .soa-page-body h2,
html[data-theme="dark"] .soa-page-body h3,
html[data-theme="dark"] .soa-page-body h4,
html[data-theme="dark"] .soa-page-body h5,
html[data-theme="dark"] .soa-page-body h6{
    color:var(--soa-heading)!important;
}