:root {
    --canvas: #08090b;
    --canvas-raised: #0d0f12;
    --surface: #15171b;
    --surface-soft: #1d2025;
    --surface-deep: #0b0c0f;
    --line: #343941;
    --line-soft: #252930;
    --text: #f4f5f6;
    --muted: #a1a5ab;
    --faint: #727780;
    --mint: #f0f1f2;
    --mint-deep: #30343a;
    --amber: #d5d7da;
    --red: #f08f96;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--canvas)
}

* { box-sizing: border-box }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: radial-gradient(circle at 82% -15%, #20242a 0, transparent 28%), var(--canvas);
    line-height: 1.45;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .06;
    background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px);
    background-size: 48px 48px;
}

* { scrollbar-width: thin; scrollbar-color: #4a5058 transparent }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb { background: #3b4149; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box }
*::-webkit-scrollbar-thumb:hover { background: #68707b; border-width: 1px }

.top-banner { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 12px clamp(18px, 4vw, 60px); background: #0b0d10ed; border-bottom: 1px solid #24282e; box-shadow: 0 8px 24px #0007; backdrop-filter: blur(22px) }
.top-banner-brand { color: var(--text); font-size: 16px; font-weight: 900; letter-spacing: 2.5px }
.top-banner-brand span { color: #ffffff }
.top-banner-brand small { margin-left: 10px; color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: 1.4px }
.shell { display: flex; min-height: calc(100vh - 64px); position: relative }

aside {
    width: 246px;
    flex: 0 0 246px;
    height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 15px 18px;
    background: #0d0f12e8;
    border-right: 1px solid #24282e;
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.brand { padding: 0 13px; color: var(--text); font-size: 20px; font-weight: 900; letter-spacing: 3px }
.brand span { color: var(--mint) }
nav { display: grid; gap: 3px }
nav button { width: 100%; min-height: 40px; text-align: left; color: var(--muted); background: transparent; border: 1px solid transparent; padding: 10px 13px; font-size: 13px }
nav button:hover, nav button:focus-visible { color: var(--text); background: var(--surface-soft); border-color: var(--line); transform: translateX(2px) }
nav button.active { position: relative; color: var(--text); background: #22262b; border-color: #444a52; box-shadow: inset 0 0 14px #ffffff06 }
nav button.active::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: #ffffff }
.ghost {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    color: var(--muted);
    background: #0d0f12f2;
    box-shadow: 0 -10px 18px #0d0f12f2;
}

button, input, textarea { font: inherit }
button { border: 1px solid var(--line); border-radius: 7px; padding: 10px 13px; color: var(--text); background: linear-gradient(145deg, #22262c, #181b20); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease }
button:hover { background: #30343a; border-color: #737983; transform: translateY(-1px) }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px }
button:active { transform: translateY(0); }
::selection { color: #111216; background: #ffffff; }

main { width: 100%; min-width: 0; max-width: 1540px; flex: 1; margin: 0 auto; padding: 18px clamp(18px, 2.2vw, 34px) 52px }
header { position: sticky; top: 64px; z-index: 8; display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: -18px 0 22px; padding: 18px 0 16px; background: #08090bf5; border-bottom: 1px solid #24282e; backdrop-filter: blur(18px) }
.refresh-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; color: var(--text); background: #1b1e23; border-color: #3a4048; font-size: 22px; line-height: 1 }
.refresh-button:hover { color: #ffffff; background: #30343a; transform: rotate(25deg) }
.eyebrow { margin: 0 0 8px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: 2.5px }
h1 { margin: 0; color: var(--text); font-size: clamp(28px, 3vw, 40px); letter-spacing: -.7px }
h2 { margin: 0 0 6px; color: var(--text); font-size: 16px; letter-spacing: .2px }
#clock { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }
.header-tools { display: flex; align-items: center; gap: 18px }
.profile-control { position: relative }
.profile-button { display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; background: #151e1f; border-color: var(--line); font-size: 12px; font-weight: 700 }
.profile-button:hover { transform: none; background: #202c2d }
.profile-button > span:first-child, #profile-menu-avatar { display: grid; place-items: center; width: 28px; height: 28px; color: #111216; background: #ffffff; border-radius: 7px; font-size: 12px; font-weight: 900 }
.profile-chevron { color: var(--muted); font-size: 14px; line-height: 1 }
.profile-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 10; width: 226px; padding: 8px; background: #172122; border: 1px solid #405454; border-radius: 9px; box-shadow: 0 22px 60px #0009; animation: menu-in .14s ease-out }
.profile-menu-head { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 5px; border-bottom: 1px solid var(--line-soft) }
.profile-menu-head b { display: block; color: var(--text); font-size: 12px }
.profile-menu-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; text-transform: capitalize }
.profile-menu-item { display: block; width: 100%; padding: 10px; color: var(--muted); background: transparent; border: 0; text-align: left; font-size: 12px }
.profile-menu-item:hover { color: var(--text); background: var(--surface-soft); transform: none }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

.command-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 13px 16px; background: #1a1d22cc; border: 1px solid #4b515b; border-radius: 8px; box-shadow: inset 0 1px #ffffff0a }
.command-strip > div, .profile-heading { display: flex; align-items: center; gap: 11px }
.command-strip small { display: inline; margin-left: 6px }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 5px #ffffff18, 0 0 15px #ffffffaa }
.subtle-button { padding: 7px 10px; color: var(--muted); font-size: 12px }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px }
.stat, .panel, .login-card { background: linear-gradient(145deg, #181b20e8, #111317f2); border: 1px solid #292e35; border-radius: 9px; box-shadow: 0 14px 34px #0006, inset 0 1px #ffffff08; backdrop-filter: blur(18px) }
.stat { position: relative; min-height: 126px; overflow: hidden; padding: 21px }
.stat::after { content: ""; position: absolute; right: -20px; bottom: -25px; width: 82px; height: 82px; border: 1px solid #ffffff24; border-radius: 50% }
.stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase }
.stat strong { display: block; margin-top: 18px; font-size: 34px; line-height: 1; letter-spacing: -.8px }
.stat i { position: absolute; right: 21px; bottom: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint) }
.stat-live strong { color: #ffffff }
.stat-live i { background: #ffffff; box-shadow: 0 0 0 5px #ffffff18, 0 0 14px #ffffffaa }
.stat-alert strong { color: #d9dce0 }
.stat-alert i { background: #b9bdc3; box-shadow: 0 0 0 5px #b9bdc318, 0 0 14px #b9bdc388 }

.panel { position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px; transition: border-color .18s ease, box-shadow .18s ease }
.panel:hover { border-color: #3a4048; box-shadow: 0 18px 42px #0007, inset 0 1px #ffffff08 }
.panel::before { content: ""; position: absolute; top: 0; left: 22px; width: 34px; height: 1px; background: #ffffffaa }
.panel-head, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 7px; padding-bottom: 13px; border-bottom: 1px solid #252a31 }
.panel-head small, .toolbar small { margin: 0; color: var(--faint) }
.dashboard-grid { align-items: stretch }
.dashboard-grid .panel { margin-bottom: 0 }
.pulse-panel { background: linear-gradient(150deg, #20242a, #15181c 70%); border-color: #3b4149 }
.status-mark { padding: 5px 9px; color: var(--mint); background: var(--mint-deep); border-radius: 999px; font-size: 11px; font-weight: 800 }
.pulse-list { display: grid; gap: 0; margin: 19px 0 }
.pulse-list div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft) }
.pulse-list span, small { color: var(--muted) }
.pulse-list b { color: var(--text); font-size: 13px }
.wide-button { width: 100% }

.table-wrap { margin: 0 -8px -8px; overflow: auto }
.audit-scroll { max-height: 520px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 7px; scrollbar-width: thin; scrollbar-color: var(--line) transparent }
.audit-scroll table { min-width: 760px }
table { width: 100%; border-collapse: collapse; min-width: 620px }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: 13px }
th { color: var(--faint); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase }
tbody tr { transition: background .16s ease }
tbody tr:hover { background: #ffffff05 }
tbody tr:last-child td { border-bottom: 0 }
.empty-state { padding: 34px 12px; color: var(--muted); text-align: center }
.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px }
.admin-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; width: 100%; min-height: 132px; padding: 12px; text-align: left; background: #15181ce8; border: 1px solid #292e35; border-radius: 7px; box-shadow: none }
.admin-card:hover { border-color: #626a75; background: #20242a; transform: translateY(-2px) }
.admin-card-disabled { opacity: .62; }
.admin-card-open { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; padding: 5px; border: 0; background: transparent; text-align: left }
.admin-card-open:hover { background: transparent; transform: none }
.admin-reset-button { flex: 0 0 auto; padding: 7px 8px; color: var(--muted); background: transparent; border-color: var(--line-soft); font-size: 10px }
.admin-reset-button:hover { color: var(--text); transform: none }
.admin-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.admin-delete-button { flex: 0 0 auto; padding: 7px 8px; color: #f08f96; background: transparent; border: 1px solid #5d353b; border-radius: 7px; font-size: 10px; }
.admin-delete-button:hover { color: #ffffff; background: #402126; border-color: #a74c5a; transform: none }
.admin-card-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #111216; background: #ffffff; border-radius: 8px; font-weight: 900 }
.admin-card-main { min-width: 0; flex: 1 }
.admin-card-main b, .admin-card-main small, .admin-card-main em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.admin-card-main b { color: var(--text); font-size: 13px }
.admin-card-main small { margin-top: 3px; color: var(--muted); font-size: 11px; text-transform: capitalize }
.admin-card-main em { margin-top: 5px; color: var(--faint); font-size: 10px; font-style: normal }
.admin-card-arrow { color: var(--muted); font-size: 21px }
.page-loading { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 190px; padding: 28px; color: var(--muted); text-align: left }
.page-loading b { display: block; color: var(--text); font-size: 13px }
.page-loading small { display: block; margin-top: 3px; color: var(--faint) }
.loading-orb { width: 13px; height: 13px; border: 2px solid #416454; border-top-color: var(--mint); border-radius: 50%; animation: spin .8s linear infinite }
.connection-error { display: flex; align-items: flex-start; gap: 14px; padding: 30px; border-color: #704047 }
.connection-error h2 { margin: 0 0 5px }
.connection-error p { margin: 0 0 15px; color: var(--muted) }
.error-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: #1b0a0d; background: var(--red); border-radius: 50%; font-weight: 900 }
@keyframes spin { to { transform: rotate(360deg) } }

.toolbar input { flex: 1 }
.search-group { display: flex; gap: 8px; min-width: min(430px, 100%) }
input, textarea, select { width: 100%; padding: 11px 12px; color: var(--text); background: var(--surface-deep); border: 1px solid var(--line); border-radius: 7px; outline: none }
input[readonly] { color: var(--muted); background: #131a1b; border-color: var(--line-soft); cursor: not-allowed }
input:focus, textarea:focus { border-color: #ffffff; box-shadow: 0 0 0 3px #ffffff18 }
input::placeholder, textarea::placeholder { color: #657572 }
pre { max-width: 380px; margin: 0; color: #adc0b9; font: 11px/1.5 Consolas, monospace; white-space: pre-wrap }
.bigpre { max-height: 380px; overflow: auto }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800 }
.ok { color: #f4f5f6; background: #343940 }
.bad { color: var(--red); background: #402126 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.profile-panel { min-height: 280px; background: linear-gradient(145deg, #25292f, #15181c) }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; color: #111216; background: #ffffff; border-radius: 11px; font-size: 20px; font-weight: 900 }
.detail-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 25px }
.detail-list div { padding: 11px; background: #0e1415; border: 1px solid var(--line-soft); border-radius: 7px }
.detail-list span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px }
.detail-list b { font-size: 12px; overflow-wrap: anywhere }

.login { display: grid; place-items: center; min-height: 100vh; padding: 20px }
.login-card { width: min(410px, 100%); display: grid; gap: 13px; padding: 34px }
.login-card h1 { margin-top: 8px; font-size: 30px }
.login-card p { margin: 0; color: var(--muted); line-height: 1.5 }
.login-card button { margin-top: 5px; color: #111216; background: #ffffff; border-color: #ffffff; font-weight: 900 }
.error { min-height: 20px; color: var(--red); font-size: 13px }

.danger-button { color: #ffdce0; background: #3a2026; border-color: #6d3039 }
.danger-button:hover { background: #512730; border-color: #a74c5a }
#toast { position: fixed; right: 25px; bottom: 25px; z-index: 5; padding: 12px 16px; color: var(--mint); background: #17231e; border: 1px solid #35664e; border-radius: 8px; opacity: 0; transform: translateY(10px); transition: .2s }
#toast.show { opacity: 1; transform: none }

#modal-root { position: relative; z-index: 20 }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: #020505c4; backdrop-filter: blur(8px); animation: modal-in .16s ease-out }
.modal { position: relative; width: min(500px, 100%); padding: 28px; background: linear-gradient(145deg, #1b2829, #101617); border: 1px solid #46615b; border-radius: 11px; box-shadow: 0 30px 100px #000b }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; color: var(--muted); background: transparent; border: 0; font-size: 24px; line-height: 1 }
.modal-close:hover { color: var(--text); background: #ffffff0d; transform: none }
.modal-eyebrow { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase }
.modal h2 { margin-top: 9px; font-size: 21px }
.modal-message { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55 }
.modal-rich-message { margin-top: 18px; color: var(--text); }
.account-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.account-detail-grid div { padding: 10px 11px; background: #0e1114; border: 1px solid var(--line-soft); border-radius: 7px; }
.account-detail-grid span { display: block; margin-bottom: 4px; color: var(--faint); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
.account-detail-grid b { display: block; color: var(--text); font-size: 12px; line-height: 1.35; }
.account-log-heading { margin: 22px 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.account-log-list { display: grid; gap: 6px; max-height: 190px; margin: 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; }
.account-log-list li { display: grid; grid-template-columns: 116px 1fr; gap: 2px 9px; padding: 9px 10px; background: #0e1114; border: 1px solid var(--line-soft); border-radius: 6px; }
.account-log-list time { grid-row: span 2; color: var(--faint); font-size: 10px; line-height: 1.35; }
.account-log-list b { color: var(--text); font-size: 11px; }
.account-log-list span { color: var(--muted); font-size: 11px; }
.account-log-empty { display: block !important; color: var(--muted); font-size: 12px; }
.modal-form { display: grid; gap: 14px }
.modal-form label { display: grid; gap: 7px; color: #c8d4ce; font-size: 12px; font-weight: 700 }
.modal-form textarea { min-height: 116px; resize: vertical; color: #bfe8d4; font: 12px/1.5 Consolas, monospace }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px }
.modal-cancel { background: transparent }
@keyframes modal-in { from { opacity: 0 } to { opacity: 1 } }

@media(max-width:850px) {
    aside { width: 205px; flex-basis: 205px }
    .stats { grid-template-columns: 1fr 1fr }
    .grid2 { grid-template-columns: 1fr }
}

@media(max-width:600px) {
    .shell { display: block }
    .top-banner { min-height: 62px; padding: 10px 14px }
    .top-banner-brand { font-size: 14px }
    .top-banner-brand small { display: none }
    .shell { min-height: calc(100vh - 62px) }
    aside { width: auto; height: auto; max-height: none; min-height: 0; padding: 20px 14px 14px; gap: 18px; position: static; overflow: visible }
    nav { grid-template-columns: repeat(2, 1fr) }
    .ghost { position: static; margin-top: 4px; box-shadow: none }
    main { padding: 24px 14px 40px }
    header { top: 62px; align-items: flex-start; flex-direction: column; gap: 12px; margin-top: -24px; padding-top: 24px }
    .header-tools { width: 100%; justify-content: space-between }
    .command-strip { align-items: flex-start; flex-direction: column }
    .command-strip small { display: block; margin: 4px 0 0 19px }
    .panel { padding: 20px 14px }
    .panel-head, .toolbar { align-items: stretch; flex-direction: column }
    .search-group { width: 100%; min-width: 0 }
    .detail-list { grid-template-columns: 1fr }
    .stat { min-height: 110px; padding: 16px }
    .stat strong { margin-top: 14px; font-size: 28px }
    .modal { padding: 24px 18px 18px }
    .account-detail-grid { grid-template-columns: 1fr }
    .account-log-list li { grid-template-columns: 1fr; gap: 3px }
    .account-log-list time { grid-row: auto }
}

/* Operations console refresh */
:root {
    --canvas: #08110e;
    --canvas-raised: #0d1813;
    --surface: #111e18;
    --surface-soft: #17271f;
    --surface-deep: #0a130f;
    --line: #294136;
    --line-soft: #1e3027;
    --text: #eff8f2;
    --muted: #9db2a5;
    --faint: #70877a;
    --mint: #8ff0b8;
    --mint-deep: #173f2a;
    --amber: #f3c779;
    --red: #ff8994;
    font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--canvas);
}

body {
    color: var(--text);
    background:
        radial-gradient(ellipse at 72% -28%, #17442c66 0, transparent 42%),
        radial-gradient(ellipse at 4% 28%, #0e302250 0, transparent 34%),
        var(--canvas);
}

body::before {
    opacity: .16;
    background-image: linear-gradient(#b8ffd00a 1px, transparent 1px), linear-gradient(90deg, #b8ffd00a 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000 0, transparent 68%);
}

::selection { color: #06120b; background: var(--mint) }
* { scrollbar-color: #365443 transparent }

.top-banner {
    min-height: 72px;
    padding-inline: clamp(20px, 3vw, 46px);
    background: #08120fee;
    border-bottom-color: #20372a;
    box-shadow: 0 10px 35px #0004;
}

.top-banner-brand { display: flex; align-items: center; gap: 11px; letter-spacing: 0 }
.brand-monogram { display: grid; place-items: center; width: 39px; height: 39px; color: #07140d; background: linear-gradient(145deg, #b4ffd0, #6fd69c); border-radius: 12px; font-size: 20px; font-weight: 950; box-shadow: 0 5px 18px #78e5a12c }
.brand-lockup { display: grid; gap: 1px; font-size: 15px; font-weight: 900; letter-spacing: 1.5px }
.brand-lockup small { margin: 0; color: #7f9988; font-size: 9px; letter-spacing: 1.6px }
.top-banner-brand small { color: #7f9988 }

.header-tools { gap: 24px }
#clock { padding: 8px 11px; color: #a9c2b1; background: #0e1b14; border: 1px solid #1e3528; border-radius: 9px; font-size: 11px; letter-spacing: .04em }
.profile-button { gap: 10px; padding: 5px 11px 5px 5px; background: #101d16; border-color: #294136; border-radius: 12px; text-align: left }
.profile-button > span:first-child, #profile-menu-avatar { width: 34px; height: 34px; color: #082013; background: linear-gradient(145deg, #b7f4c9, #6bc995); border-radius: 10px }
.profile-name-wrap { display: grid; gap: 1px }
#profile-name { max-width: 150px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap }
.profile-name-wrap small { color: var(--faint); font-size: 9px; letter-spacing: .1em }
.profile-menu { background: #102018; border-color: #294737; border-radius: 13px }

.shell { min-height: calc(100vh - 72px) }
aside {
    top: 0;
    width: 254px;
    flex-basis: 254px;
    height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    padding: 28px 16px 18px;
    gap: 13px;
    background: linear-gradient(180deg, #0c1711f5, #0a140ff2);
    border-right-color: #1e3327;
}
.nav-label { padding: 10px 12px 4px; color: #668071; font-size: 9px; font-weight: 900; letter-spacing: .18em }
nav { gap: 5px }
nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 9px 12px;
    color: #91a99a;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
}
nav button:hover, nav button:focus-visible { color: #e7f7ec; background: #13241a; border-color: #244330; transform: none }
nav button.active { color: #c7f6d7; background: linear-gradient(100deg, #1b3b28, #14281c); border-color: #2a5238; box-shadow: inset 3px 0 #8ff0b8, inset 0 1px #ffffff09 }
nav button.active::before { display: none }
.nav-icon { display: grid; place-items: center; flex: 0 0 22px; width: 22px; color: #728c7b; font-size: 18px; line-height: 1 }
nav button.active .nav-icon { color: var(--mint) }
.sidebar-spacer { flex: 1 }
.sidebar-status { display: flex; align-items: center; gap: 11px; padding: 13px 12px; background: #0d1a12; border: 1px solid #1c3424; border-radius: 12px }
.sidebar-status b, .sidebar-status small { display: block }
.sidebar-status b { color: #ccebd5; font-size: 11px; font-weight: 750 }
.sidebar-status small { margin-top: 3px; color: #708878; font-size: 10px }
.status-pulse, .connection-light { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #73e6a2; box-shadow: 0 0 0 4px #73e6a21c, 0 0 15px #73e6a266 }
.ghost { position: static; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; color: #a3b6a9; background: transparent; border: 1px solid transparent; border-radius: 10px; box-shadow: none; text-align: left; font-size: 12px }
.ghost:hover { color: #ffd5d8; background: #32191d; border-color: #4a252b; transform: none }

main { max-width: 1660px; padding: 24px clamp(20px, 3.1vw, 48px) 60px }
header { top: 72px; align-items: center; margin: -24px 0 26px; padding: 20px 0 18px; background: #08110ef2; border-bottom-color: #1d3226 }
.eyebrow { margin-bottom: 6px; color: #7fc998; font-size: 9px; letter-spacing: .18em }
.eyebrow-divider { margin: 0 5px; color: #3d624c }
h1 { font-size: clamp(27px, 3vw, 34px); font-weight: 760; letter-spacing: -.045em }
h2 { font-size: 16px; font-weight: 720; letter-spacing: -.015em }
.refresh-button { width: 39px; height: 39px; color: #a4c6ad; background: #102017; border-color: #264432; border-radius: 12px }
.refresh-button:hover { color: var(--mint); background: #173221; border-color: #447552 }

.dashboard-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 21px; padding: 22px 24px; background: linear-gradient(105deg, #12271a 0%, #102017 56%, #0d1912 100%); border: 1px solid #254833; border-radius: 16px; box-shadow: inset 0 1px #ffffff0a, 0 18px 45px #0002; overflow: hidden; position: relative }
.dashboard-intro::after { content: ""; position: absolute; right: 19%; top: -118px; width: 230px; height: 230px; border: 1px solid #78ce9220; border-radius: 50%; box-shadow: 0 0 0 28px #78ce9209, 0 0 0 58px #78ce9206; pointer-events: none }
.intro-kicker, .panel-kicker { display: block; color: #7fc998; font-size: 9px; font-weight: 850; letter-spacing: .16em }
.dashboard-intro h2 { margin: 7px 0 4px; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.04em }
.dashboard-intro p { margin: 0; color: #9bb4a2; font-size: 12px }
.connection-badge { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: #0b1910b8; border: 1px solid #264b32; border-radius: 12px }
.connection-badge b, .connection-badge small { display: block }
.connection-badge b { color: #d0efda; font-size: 11px }
.connection-badge small { margin-top: 3px; color: #7e9b87; font-size: 10px }

.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px }
.stat { min-height: 143px; padding: 18px 19px; background: linear-gradient(145deg, #132119, #0e1913); border-color: #22382a; border-radius: 14px; box-shadow: inset 0 1px #ffffff08, 0 12px 28px #0002; transition: transform .2s ease, border-color .2s ease, background .2s ease }
.stat:hover { transform: translateY(-3px); border-color: #3c6a4b; background: linear-gradient(145deg, #17291e, #101d15) }
.stat::after { right: -24px; bottom: -45px; width: 120px; height: 120px; border-color: #8ff0b815 }
.stat-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9ab0a0; font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase }
.stat-icon { display: grid; place-items: center; width: 31px; height: 31px; color: #8fe2aa; background: #1b3b27; border: 1px solid #2b5438; border-radius: 10px; font-size: 17px }
.stat strong { margin-top: 14px; color: #f1faf4; font-size: 34px; font-weight: 760; letter-spacing: -.06em; font-variant-numeric: tabular-nums }
.stat-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px }
.stat-foot i { position: static; display: block; width: 6px; height: 6px; background: #7f9a87 }
.stat-foot small { color: #688070; font-size: 8px; font-weight: 800; letter-spacing: .13em }
.stat-live .stat-icon { color: #9df1ba; background: #153b25; border-color: #27593a }
.stat-live .stat-foot i { background: #7ae6a0; box-shadow: 0 0 9px #7ae6a099 }
.stat-alert .stat-icon { color: #f1c77c; background: #392c17; border-color: #594324 }
.stat-alert .stat-foot i { background: #e5b85f }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .9fr); gap: 15px; align-items: stretch }
.dashboard-grid .panel { min-width: 0; margin-bottom: 0 }
.panel, .login-card { background: linear-gradient(150deg, #111e17, #0d1812); border-color: #21382a; border-radius: 14px; box-shadow: 0 16px 40px #0003, inset 0 1px #ffffff08; backdrop-filter: blur(18px) }
.panel { padding: 20px }
.panel:hover { border-color: #31533b; box-shadow: 0 18px 42px #0004, inset 0 1px #ffffff08 }
.panel::before { display: none }
.panel-head, .toolbar { gap: 13px; margin-bottom: 12px; padding-bottom: 14px; border-bottom-color: #20342a }
.panel-head h2 { margin: 4px 0 3px }
.panel-head small, .toolbar small { display: block; color: #82998a; font-size: 11px }
.subtle-button { padding: 9px 11px; color: #a9d9b6; background: #13251a; border: 1px solid #294b34; border-radius: 9px; font-size: 10px; font-weight: 750; white-space: nowrap }
.subtle-button:hover { color: #d9fbe2; background: #1a3624; border-color: #477052; transform: none }
.table-wrap { margin: 0; border-radius: 9px }
table { min-width: 560px }
th, td { padding: 12px 11px; border-bottom-color: #1b2c22; font-size: 11px }
th { color: #728b7b; font-size: 8px; font-weight: 850; letter-spacing: .13em }
tbody tr:hover { background: #b8ffd008 }
td { color: #b5c8bb }
td b { color: #e4f1e8 }
.time-cell { color: #859c8c; white-space: nowrap; font-variant-numeric: tabular-nums }
.activity-action { color: #d7eade; font-size: 10px; font-weight: 700 }
.pill { padding: 4px 8px; border: 1px solid transparent; font-size: 9px; letter-spacing: .025em }
.ok { color: #a8ebba; background: #173523; border-color: #285638 }
.bad { color: #ffabb2; background: #381d21; border-color: #5a2b31 }
.empty-state { padding: 36px 12px; color: #799082; font-size: 12px }

.pulse-panel { display: flex; flex-direction: column; background: linear-gradient(150deg, #14251a, #0f1b14); border-color: #294632 }
.pulse-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #20372a }
.pulse-heading h2 { margin: 4px 0 0 }
.status-mark { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; color: #a8edba; background: #173723; border: 1px solid #2b5738; border-radius: 999px; font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase }
.status-mark i { width: 5px; height: 5px; border-radius: 50%; background: #83e8a2; box-shadow: 0 0 7px #83e8a2 }
.pulse-description { margin: 13px 0 3px; color: #82998a; font-size: 11px }
.pulse-list { margin: 8px 0 17px }
.pulse-list div { align-items: center; padding: 13px 0; border-bottom-color: #203329 }
.pulse-list span { display: inline-flex; align-items: center; gap: 9px; color: #97ae9d; font-size: 11px }
.pulse-list b { color: #e2f4e7; font-size: 11px; font-variant-numeric: tabular-nums }
.pulse-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #90dba6; background: #1a3523; border-radius: 8px; font-size: 14px; font-style: normal }
.wide-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 11px 13px; color: #c5f2d1; background: #193b25; border-color: #326144; border-radius: 10px; font-size: 11px; font-weight: 750 }
.wide-button:hover { color: #f2fff5; background: #215031; border-color: #4b8059; transform: none }

button { color: #dcebe0; background: linear-gradient(145deg, #1a2b20, #132119); border-color: #2d4936; border-radius: 9px }
button:hover { color: #f4fff6; background: #203c29; border-color: #477153 }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--mint) }
input, textarea, select { color: var(--text); background: #0b1710; border-color: #294236; border-radius: 9px }
input:focus, textarea:focus { border-color: #6ec58a; box-shadow: 0 0 0 3px #6ec58a20 }
input::placeholder, textarea::placeholder { color: #607868 }
.search-group { gap: 8px }
.search-group button { flex: 0 0 auto; padding-inline: 16px }
.login-card { width: min(430px, 100%); gap: 14px; padding: 36px; border-radius: 18px; box-shadow: 0 28px 90px #0007, inset 0 1px #ffffff0a }
.login-card .brand { color: #eaf8ee }
.login-card .brand span { color: var(--mint) }
.login-card h1 { margin-top: 3px; font-size: 30px }
.login-card p { color: #91a99a; font-size: 13px }
.login-card button { padding: 12px 15px; color: #07150c; background: linear-gradient(135deg, #a8f4bf, #70d493); border-color: #8de4a9; border-radius: 10px; box-shadow: 0 7px 18px #6fce8a26 }
.login-card button:hover { color: #07150c; background: #bcffd0; border-color: #bcffd0 }
.profile-panel { background: linear-gradient(145deg, #172a1e, #111d15) }
.avatar, .admin-card-avatar { color: #07150c; background: linear-gradient(145deg, #b4f5c8, #6dc991); border-radius: 11px }
.detail-list div, .account-detail-grid div, .account-log-list li { background: #0c1811; border-color: #20372a; border-radius: 9px }
.admin-card { background: #112017; border-color: #223a2a; border-radius: 12px }
.admin-card:hover { background: #172a1d; border-color: #3b6746 }
.admin-card-open { color: inherit }
.admin-reset-button { color: #9db4a3; background: #101d15; border-color: #294333; border-radius: 8px }
.admin-delete-button { border-radius: 8px }
.connection-error { border-color: #63343b }
.error-mark { color: #240a0e; background: #ff8994 }
.danger-button { color: #ffdce0; background: #3a2026; border-color: #6d3039 }
.modal { background: linear-gradient(145deg, #14251a, #0d1812); border-color: #355641; border-radius: 16px }
.modal-form label { color: #bdd5c4 }
.modal-form textarea { color: #b9f2ca }
#toast { color: #bdf3cb; background: #10251a; border-color: #326440; border-radius: 11px; box-shadow: 0 12px 35px #0005 }

@media (max-width: 1050px) {
    .dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(245px, .9fr) }
    .stat { padding: 16px }
}

@media (max-width: 850px) {
    aside { width: 218px; flex-basis: 218px }
    .dashboard-grid { grid-template-columns: 1fr }
    .pulse-panel { min-height: 0 }
}

@media (max-width: 600px) {
    .top-banner { min-height: 64px; padding: 9px 13px }
    .brand-monogram { width: 35px; height: 35px; border-radius: 10px }
    .brand-lockup { font-size: 13px }
    .brand-lockup small { display: none }
    .header-tools { width: auto; gap: 10px }
    #clock { display: none }
    .profile-button { gap: 7px; padding-right: 8px }
    .profile-button > span:first-child { width: 31px; height: 31px }
    #profile-name { max-width: 92px; font-size: 10px }
    .profile-name-wrap small { font-size: 8px }
    .shell { min-height: calc(100vh - 64px) }
    aside { padding: 12px 12px 10px; gap: 10px; border-right: 0; border-bottom: 1px solid #1e3327 }
    .nav-label { padding: 2px 5px 1px }
    nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px }
    nav button { flex: 0 0 auto; min-height: 38px; gap: 7px; padding: 7px 10px; font-size: 10px }
    nav button .nav-icon { flex-basis: 16px; width: 16px; font-size: 15px }
    .sidebar-spacer, .sidebar-status, .ghost { display: none }
    main { padding: 18px 13px 34px }
    header { top: 64px; flex-direction: row; align-items: center; margin: -18px 0 15px; padding: 15px 0 13px }
    .eyebrow { font-size: 8px; letter-spacing: .12em }
    h1 { font-size: 25px }
    .dashboard-intro { align-items: flex-start; flex-direction: column; gap: 14px; padding: 18px 16px; border-radius: 13px }
    .dashboard-intro p { max-width: 36ch; font-size: 11px }
    .connection-badge { padding: 8px 10px }
    .stats { gap: 8px; margin-bottom: 12px }
    .stat { min-height: 118px; padding: 13px }
    .stat-heading { align-items: flex-start; font-size: 8px; letter-spacing: .05em }
    .stat-icon { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; font-size: 14px }
    .stat strong { margin-top: 12px; font-size: 28px }
    .stat-foot { gap: 6px; margin-top: 8px }
    .stat-foot small { font-size: 7px; letter-spacing: .08em }
    .panel { padding: 16px 13px; border-radius: 12px }
    .panel-head, .toolbar { flex-direction: row; align-items: center }
    .panel-head > div:first-child { min-width: 0 }
    .panel-head .subtle-button { flex: 0 0 auto }
    .panel-head small { font-size: 10px }
    .dashboard-grid { gap: 11px }
    .table-wrap { overflow-x: auto }
    .pulse-heading { align-items: center }
    .login-card { padding: 27px 21px; border-radius: 15px }
    .grid2 { grid-template-columns: 1fr }
    .detail-list { grid-template-columns: 1fr 1fr }
    .modal { padding: 24px 18px 18px }
    .account-detail-grid { grid-template-columns: 1fr 1fr }
    .account-log-list li { grid-template-columns: 1fr; gap: 3px }
    .account-log-list time { grid-row: auto }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}