:root {
    --r-ink: #102331;
    --r-muted: #5d7484;
    --r-blue: #087ca7;
    --r-blue-bright: #26b9e7;
    --r-blue-pale: #dff4fb;
    --r-line: rgba(90, 145, 170, .22);
    --r-glass: rgba(255, 255, 255, .82);
    --r-shadow: 0 18px 48px rgba(34, 82, 107, .09), 0 2px 8px rgba(34, 82, 107, .05);
    color: var(--r-ink);
    background: #edf5f9;
}

html { min-width: 320px; background: #edf5f9; }
body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    color: var(--r-ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(63, 195, 232, .18), transparent 26rem),
        radial-gradient(circle at 94% 24%, rgba(109, 177, 207, .13), transparent 30rem),
        linear-gradient(145deg, #f9fcfd 0%, #edf5f9 48%, #f6fafc 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .36;
    background-image: linear-gradient(rgba(67, 132, 159, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 132, 159, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 76px;
    color: var(--r-ink);
    background: rgba(248, 252, 254, .86);
    border-bottom: 1px solid rgba(93, 151, 176, .2);
    box-shadow: 0 8px 30px rgba(27, 75, 99, .06);
    backdrop-filter: blur(18px) saturate(140%);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #102b3c;
    letter-spacing: -.025em;
}
.brand::before {
    content: "";
    width: 25px;
    height: 25px;
    border: 1px solid rgba(10, 126, 169, .5);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fff 0 12%, #7ee1f7 15%, #159bc6 35%, #0b5278 66%, #062f4d 100%);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.7), 0 0 18px rgba(38,185,231,.35);
}
.topbar nav a, .account a { color: #38586b; transition: color .16s, background .16s; }
.topbar nav a:hover, .account > a:not(.link-button):hover { color: #057ba8; }
.topbar nav a { position: relative; padding: 28px 0 25px; }
.topbar nav a::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 17px; height: 2px;
    border-radius: 2px; background: var(--r-blue-bright); transition: left .16s, right .16s;
}
.topbar nav a:hover::after { left: 0; right: 0; }
.link-button {
    border-color: rgba(20, 126, 165, .26);
    color: #155c79 !important;
    background: rgba(218, 244, 251, .58);
}
.link-button:hover { background: #d8f3fa; }

.page { width: min(1240px, calc(100% - 48px)); padding-top: 44px; }
.page-heading { position: relative; align-items: center; gap: 20px; }
.page-heading::before {
    content: ""; position: absolute; left: -18px; top: 9px; bottom: 8px; width: 3px;
    border-radius: 3px; background: linear-gradient(transparent, #28b9e4 22%, #087ca7 78%, transparent);
    box-shadow: 0 0 15px rgba(38,185,231,.42);
}
.page-heading h1, .detail-heading h1 { color: #102b3c; font-weight: 650; letter-spacing: -.04em; }
.page-heading p, .detail-heading p, .muted { color: var(--r-muted); }
.eyebrow { color: #087ca7 !important; font-size: 10px; letter-spacing: .19em; }

.card {
    background: var(--r-glass);
    border: 1px solid var(--r-line);
    border-radius: 20px;
    box-shadow: var(--r-shadow);
    backdrop-filter: blur(13px) saturate(120%);
}
.dashboard-card, .content-card, .workspace-card, .form-card, .settings-card { position: relative; overflow: hidden; }
.dashboard-card::after, .workspace-card::after {
    content: ""; position: absolute; inset: 0 auto auto 0; width: 86px; height: 2px;
    background: linear-gradient(90deg, #20b5df, transparent); pointer-events: none;
}
.workspace-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.workspace-card:hover { transform: translateY(-3px); border-color: rgba(28, 166, 207, .42); box-shadow: 0 24px 55px rgba(28, 91, 119, .13); }

.button, .primary, .primary-button {
    border: 1px solid rgba(5, 102, 143, .22);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #149ec8, #076e99);
    box-shadow: 0 8px 20px rgba(8, 124, 167, .19), inset 0 1px rgba(255,255,255,.26);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.button:hover, .primary:hover, .primary-button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 11px 24px rgba(8,124,167,.27); }
.secondary, .secondary-button, .secondary-link, .copy-button {
    border: 1px solid rgba(65, 131, 158, .28);
    border-radius: 999px;
    color: #285f78;
    background: rgba(246, 251, 253, .8);
    box-shadow: 0 3px 10px rgba(45, 91, 113, .05);
}
.admin-heading-actions { gap: 7px; }
.admin-heading-actions .secondary-link,
.admin-heading-actions .button {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}
.danger-button { border-radius: 999px; }

input, select, textarea, .filter-panel input, .filter-panel select, .compact-filters input, .compact-filters select,
.form-card input, .form-card select, .form-card textarea {
    border-color: rgba(75, 130, 153, .3) !important;
    border-radius: 12px !important;
    color: var(--r-ink);
    background: rgba(251, 254, 255, .88) !important;
    box-shadow: inset 0 1px 2px rgba(30, 81, 105, .04);
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(38, 185, 231, .18) !important;
    border-color: #36aeca !important;
}

table { color: #183243; }
th { color: #527184; background: rgba(228, 242, 247, .62); }
th, td { border-bottom-color: rgba(92, 145, 166, .15); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(221, 244, 250, .38); }
.badge, .status { border: 1px solid rgba(75, 131, 158, .15); }
.status-ready { background: #e2f7ef; color: #126543; }
.status-working { background: #ddf2fb; color: #075f87; box-shadow: 0 0 14px rgba(38,185,231,.12); }
.status-queued { background: #edf3f6; color: #4d6878; }
.status-failed { background: #fff0ef; color: #9d3028; }

.metric { border-top: 2px solid rgba(30, 177, 218, .42); }
.metric strong { color: #0b3a51; font-weight: 620; }
.progress, .quality-progress, .coverage-bar > i { background: #e4eef2; }
.progress i, .quality-progress i, .coverage-bar > i > em { background: linear-gradient(90deg, #087ca7, #39c6e8); }
.chart-bars { background-color: transparent; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), rgba(85,139,161,.13) 50%, transparent calc(50% + 1px), transparent 100%); }
.chart-bars i { background: linear-gradient(#43d0eb, #087ca7); box-shadow: 0 0 12px rgba(38,185,231,.18); }
.call-row:hover, .mini-call-list > a:hover, .search-results section > a:hover { background: rgba(224, 245, 251, .42); }
.file-icon, .processing-symbol { background: linear-gradient(145deg, #e6f8fc, #ceeaf3); color: #057da8; box-shadow: inset 0 0 0 1px rgba(47,169,205,.18); }

.login-shell { background: #f5fafc; }
.login-intro {
    position: relative; overflow: hidden;
    background: radial-gradient(circle at 35% 35%, rgba(72,205,236,.23), transparent 18rem), linear-gradient(145deg, #e8f6fa, #cfe6ef 58%, #eef8fa);
    color: #102f42;
}
.login-intro::before {
    content: ""; position: absolute; width: min(48vw, 620px); aspect-ratio: 1; right: -17%; bottom: -20%;
    border: 1px solid rgba(31,155,196,.25); border-radius: 50%;
    box-shadow: inset 0 0 0 35px rgba(255,255,255,.12), inset 0 0 0 72px rgba(31,155,196,.055), 0 0 80px rgba(41,164,205,.12);
}
.login-intro > div { position: relative; z-index: 1; }
.login-intro h1 { color: #0f3247; font-weight: 620; }
.login-intro p:not(.eyebrow) { color: #4f7183; }
.login-panel { background: rgba(250,253,254,.78); }
.login-card { border-radius: 28px; }

.notice { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.validation-summary-valid,
.notice.validation-summary-valid { display: none; }
.notification-badge { background: linear-gradient(135deg, #ef655a, #bc332d); box-shadow: 0 0 12px rgba(207,73,62,.25); }
.back-link { color: #397087; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eaf2f5; }
::-webkit-scrollbar-thumb { border: 2px solid #eaf2f5; border-radius: 10px; background: #9dbbc8; }
::selection { color: #082b3d; background: #aee7f4; }

@media (max-width: 980px) {
    .topbar { padding-inline: 18px; }
    .page { width: min(100% - 32px, 1240px); }
}
@media (max-width: 760px) {
    .topbar { position: relative; min-height: 72px; }
    .topbar nav { padding-top: 2px; border-top: 1px solid rgba(80,140,163,.15); }
    .topbar nav a { padding: 7px 0; }
    .topbar nav a::after { bottom: 1px; }
    .account { flex-wrap: wrap; }
    .page-heading::before { left: -10px; }
    .card { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}