:root {
    --ink: #142033;
    --muted: #68758a;
    --line: #dce4ee;
    --surface: #ffffff;
    --canvas: #f1f5fa;
    --nav: #071424;
    --nav-soft: #10243b;
    --accent: #087fdb;
    --accent-dark: #075fa8;
    --accent-soft: #e7f4ff;
    --cyan: #14c6c3;
    --violet: #755cf6;
    --blue: #367ae8;
    --blue-soft: #eaf2ff;
    --danger: #c94b55;
    --danger-soft: #fae9eb;
    --warning: #a66a12;
    --warning-soft: #fff3d9;
    --shadow: 0 16px 45px rgba(28, 52, 82, .08);
    --radius: 16px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 20; display: flex; flex-direction: column; padding: 26px 18px 20px; color: #e9f5ff; background: linear-gradient(180deg, #071626 0%, #091d31 58%, #071420 100%); box-shadow: 18px 0 45px rgba(22, 45, 73, .08); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; color: white; }
.brand:hover { text-decoration: none; }
.brand-mark, .auth-logo span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: white; font-weight: 800; background: linear-gradient(145deg, #28d8d1, #3478f6 52%, #795cf4); box-shadow: 0 9px 24px rgba(43, 133, 242, .3); }
.brand strong, .brand small, .account-chip strong, .account-chip small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 2px; font-size: 10px; color: #8fa7a2; letter-spacing: .08em; text-transform: uppercase; }
.nav-list { display: grid; gap: 7px; }
.nav-list a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; color: #aabbb8; font-size: 14px; font-weight: 550; }
.nav-list a span { width: 20px; text-align: center; font-size: 18px; }
.nav-list a:hover, .nav-list a.active { color: #fff; text-decoration: none; background: var(--nav-soft); }
.nav-list a.active { box-shadow: inset 3px 0 #34d4d0, 0 8px 20px rgba(0,0,0,.08); }
.sidebar-foot { margin-top: auto; }
.account-chip { display: flex; gap: 10px; align-items: center; margin: 0 4px 14px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; color: #d9fff6; background: #29413d; font-size: 13px; font-weight: 700; }
.account-chip strong { max-width: 145px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.account-chip small { margin-top: 2px; color: #8fa7a2; font-size: 11px; }
.nav-logout { width: 100%; padding: 9px 12px; border: 1px solid #334c48; border-radius: 9px; color: #b9c8c5; background: transparent; cursor: pointer; }
.nav-logout:hover { color: white; border-color: #55706b; }

.app-main { position: relative; grid-column: 2; min-width: 0; padding: 34px 42px 70px; background: radial-gradient(circle at 92% 4%, rgba(80, 119, 245, .09), transparent 28%), radial-gradient(circle at 8% 94%, rgba(25, 199, 192, .07), transparent 24%); }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.topbar h1 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.eyebrow.light { color: #84d9c8; }
.secure-badge { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid #d6e6e1; border-radius: 999px; color: #527068; background: #fbfdfc; font-size: 12px; }
.secure-badge span { width: 7px; height: 7px; border-radius: 50%; background: #20a37f; box-shadow: 0 0 0 4px #dff3ed; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 18px rgba(33, 49, 45, .035); }
.stat-card .label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.stat-card .value { display: block; margin-top: 10px; font-size: 27px; font-weight: 720; letter-spacing: -.035em; }
.stat-card .hint { display: block; margin-top: 4px; color: #919aa2; font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #adb6bd; }
.dot.valid, .dot.running { background: #1ba17d; box-shadow: 0 0 0 4px #dff3ec; }
.dot.invalid { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

.workspace-grid { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(420px, 1.22fr); gap: 18px; align-items: start; }
.panel { position: relative; overflow: hidden; border: 1px solid rgba(207, 220, 235, .9); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,252,255,.96)); box-shadow: var(--shadow); }
.panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 179, 220, .5), rgba(104, 91, 245, .35), transparent); pointer-events: none; }
.panel-inner { padding: 22px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 17px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.02em; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-stack { display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: #45515a; font-size: 12px; font-weight: 650; }
input, select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d8dfe3; border-radius: 9px; color: var(--ink); background: #fbfcfc; outline: none; transition: border-color .16s, box-shadow .16s, background .16s; }
input:focus, select:focus { border-color: #55ad9c; background: #fff; box-shadow: 0 0 0 3px rgba(15, 139, 116, .11); }
.field-help, .muted { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.form-divider { height: 1px; margin: 19px 0; background: var(--line); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-radius: 9px; font-weight: 680; font-size: 12px; cursor: pointer; transition: transform .14s, background .14s, border-color .14s; }
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: default; transform: none; }
.button.primary { color: white; background: linear-gradient(135deg, #078cca, #3478ee 58%, #675cf0); box-shadow: 0 8px 20px rgba(43, 113, 220, .2); }
.button.primary:hover { background: linear-gradient(135deg, #057db7, #286bd9 58%, #594cdb); }
.button.ghost { color: #315d8c; border-color: transparent; background: #eef5fc; }
.button.secondary { color: #3d4c52; border-color: #d8dfe3; background: #fff; }
.button.secondary:hover { border-color: #aab7bc; background: #f8faf9; }
.button.danger { color: var(--danger); border-color: #efc9ce; background: #fff; }
.button.danger:hover { background: var(--danger-soft); }
.button.small { min-height: 31px; padding: 5px 10px; font-size: 11px; }
.button.wide { width: 100%; min-height: 44px; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }

.resource-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.resource-chip { padding: 6px 9px; border-radius: 7px; color: #536069; background: #f2f5f4; font-size: 11px; }
.resource-chip strong { color: var(--ink); }
.task-list { display: grid; gap: 10px; padding: 14px; max-height: 600px; overflow-y: auto; }
.empty-state { padding: 62px 20px; text-align: center; color: #88939b; }
.empty-state strong { display: block; margin-bottom: 5px; color: #58656d; }
.task-item { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.task-item.selected { border-color: #78bdae; box-shadow: 0 0 0 3px #e5f3ef; }
.task-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-name { margin: 0; font-size: 14px; font-weight: 730; word-break: break-word; }
.task-id { margin-top: 4px; color: #919aa1; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; margin: 13px 0; color: #66737b; font-size: 11px; }
.task-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 13px; }
.task-tags span { max-width: 100%; padding: 4px 7px; overflow: hidden; text-overflow: ellipsis; border-radius: 5px; color: #52615f; background: #eff5f3; font-size: 10px; }
.task-actions { display: flex; gap: 7px; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; color: #68747b; background: #edf0f2; font-size: 10px; font-weight: 760; }
.status-pill.running, .status-pill.valid, .status-pill.completed, .status-pill.enabled { color: #08745f; background: var(--accent-soft); }
.status-pill.failed, .status-pill.invalid, .status-pill.stop_failed, .status-pill.disabled { color: #a83a45; background: var(--danger-soft); }
.status-pill.stopped, .status-pill.interrupted { color: #95600e; background: var(--warning-soft); }

.log-panel { margin-top: 18px; overflow: hidden; }
.log-box { min-height: 230px; max-height: 460px; margin: 0; padding: 20px; overflow: auto; color: #d8e6e2; background: #15211f; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

.flash-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.flash { padding: 12px 14px; border: 1px solid #d9e2df; border-radius: 10px; color: #40534e; background: #f7faf9; font-size: 12px; line-height: 1.5; word-break: break-word; }
.flash.success { color: #08745f; border-color: #bfe1d8; background: var(--accent-soft); }
.flash.error { color: #a63843; border-color: #efc5ca; background: var(--danger-soft); }
.flash.code { color: #6c4d0e; border-color: #eed49b; background: var(--warning-soft); font: 13px/1.7 ui-monospace, monospace; user-select: all; }
.inline-error { margin: 12px 0; padding: 10px; border-radius: 8px; color: #a63843; background: var(--danger-soft); font-size: 12px; }

.security-note { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; padding: 13px 16px; border: 1px solid #c9e2db; border-radius: 12px; color: #386259; background: #eff8f5; font-size: 12px; }
.security-note strong { white-space: nowrap; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }
.settings-grid.single-setting { grid-template-columns: minmax(0, 760px); }
.settings-grid > .panel { padding-bottom: 22px; }
.settings-grid .panel > form, .settings-grid .panel > p, .settings-grid .panel > hr, .settings-grid .account-facts, .settings-grid .inline-error { margin-left: 22px; margin-right: 22px; }
.settings-grid hr { margin-top: 22px; margin-bottom: 22px; border: 0; border-top: 1px solid var(--line); }
.account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; }
.account-facts div { padding: 12px; border-radius: 9px; background: #f6f8f7; }
.account-facts dt { color: #7a858d; font-size: 10px; }
.account-facts dd { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 650; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 13px; color: #7a858d; background: #f7f9f8; font-size: 10px; text-align: left; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
td { padding: 12px 13px; border-top: 1px solid var(--line); color: #46535b; font-size: 11px; vertical-align: middle; }
td strong { color: var(--ink); }
.number { font-variant-numeric: tabular-nums; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 18px; align-items: start; }
.admin-grid .span-all { grid-column: 1 / -1; }
.code-form { display: grid; grid-template-columns: .6fr .8fr 1fr auto; gap: 10px; align-items: end; padding: 18px 20px; }
.code-form label { min-width: 0; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(13, 24, 22, .62); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(1100px, 96vw); max-height: 90vh; overflow: auto; border-radius: 16px; background: white; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line); background: white; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; }

.auth-body { min-height: 100vh; background: #edf2f0; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); min-height: 100vh; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px clamp(38px, 6vw, 90px); color: #dce9e6; background: radial-gradient(circle at 25% 20%, #24574f 0, transparent 36%), linear-gradient(145deg, #172d29, #10211e 70%); }
.auth-logo { display: flex; gap: 11px; align-items: center; color: white; font-size: 16px; font-weight: 750; }
.auth-story h1 { margin: 12px 0 20px; color: white; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.08; letter-spacing: -.055em; }
.auth-story p:not(.eyebrow) { max-width: 560px; color: #afc4bf; line-height: 1.8; }
.auth-security { color: #789790; font-size: 11px; letter-spacing: .04em; }
.auth-panel { display: grid; place-items: center; padding: 42px; }
.auth-card { width: min(390px, 100%); padding: 34px; border: 1px solid #dbe2df; border-radius: 18px; background: white; box-shadow: 0 20px 55px rgba(27, 48, 43, .09); }
.auth-card h2 { margin: 7px 0 8px; font-size: 26px; letter-spacing: -.035em; }
.auth-card > .muted { margin-bottom: 24px; }
.auth-card label { margin-top: 15px; }
.auth-card .button { margin-top: 22px; }
.auth-link { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.toast { position: fixed; top: 22px; right: 24px; z-index: 80; max-width: 360px; padding: 12px 15px; border-radius: 10px; color: white; background: #33423f; box-shadow: 0 12px 32px rgba(0,0,0,.18); font-size: 12px; animation: toast-in .2s ease; }
.toast.success { background: var(--accent-dark); }
.toast.error { background: #a83a45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* Factor Lab visual system */
.compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-stats .stat-card { background: linear-gradient(150deg, #fff, #f8fbff); }
.cell-subtitle { display: block; margin-top: 4px; color: #8793a5; font-size: 10px; line-height: 1.4; }
.encrypted-code { color: #23466f; font: 650 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .045em; white-space: nowrap; }
.access-table td { min-width: 105px; }
.access-table td:first-child { min-width: 168px; }
.access-table td:nth-last-child(1) { min-width: 310px; }
.action-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.action-cluster form { margin: 0; }
.extend-form { display: flex; align-items: center; gap: 5px; }
.extend-form input { width: 62px; height: 31px; padding: 0 7px; font-size: 11px; }
.status-pill.active { color: #08745f; background: #dff7f1; }
.status-pill.unused { color: #2463a6; background: #e8f2ff; }
.status-pill.expired { color: #96620c; background: #fff2d4; }
.admin-table-panel { overflow: visible; }
.admin-table-panel .table-wrap { border-radius: 0 0 var(--radius) var(--radius); }

.generator-layout { display: grid; grid-template-columns: minmax(420px, .9fr) minmax(360px, 1.1fr); gap: 20px; align-items: stretch; }
.generator-panel { min-height: 440px; }
.generator-form { display: grid; gap: 18px; padding: 28px; }
.generator-form label { font-size: 13px; }
.generator-form input { height: 48px; }
.generator-orbit { width: 34px; height: 34px; border: 1px solid rgba(28, 135, 225, .35); border-radius: 50%; box-shadow: inset 0 0 0 8px #eef7ff, 0 0 22px rgba(31, 153, 234, .17); }
.generator-preview { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 440px; padding: 42px; overflow: hidden; border: 1px solid rgba(60, 100, 160, .18); border-radius: var(--radius); color: #deedff; background: radial-gradient(circle at 80% 20%, rgba(105, 80, 235, .32), transparent 34%), radial-gradient(circle at 15% 80%, rgba(12, 193, 198, .2), transparent 32%), #09182b; box-shadow: 0 20px 50px rgba(20, 42, 75, .16); }
.generator-preview::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(79, 132, 181, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 132, 181, .16) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent); }
.generator-preview > * { position: relative; z-index: 1; }
.preview-kicker { color: #63dad3; font: 700 10px ui-monospace, monospace; letter-spacing: .2em; }
.preview-code { display: flex; align-items: center; gap: 9px; width: fit-content; margin: 34px 0 30px; padding: 18px 20px; border: 1px solid rgba(126, 174, 221, .25); border-radius: 13px; color: #e8f5ff; background: rgba(8, 25, 45, .72); box-shadow: inset 0 0 35px rgba(38, 122, 202, .09); font: 700 14px ui-monospace, monospace; }
.preview-code i { width: 5px; height: 5px; border-radius: 50%; background: #2bd4c8; box-shadow: 0 0 10px #2bd4c8; }
.preview-code i:nth-child(2) { opacity: .65; }.preview-code i:nth-child(3) { opacity: .35; }
.preview-code span { margin-left: 5px; color: #5fded6; }.preview-code b { color: #91a8c3; font-weight: 600; }
.generator-preview h3 { margin: 0 0 10px; color: white; font-size: 25px; }.generator-preview p { max-width: 430px; margin: 0 0 26px; color: #8fa8c2; line-height: 1.75; }
.generator-preview .button { align-self: flex-start; color: #d8eaff; border-color: rgba(140, 181, 221, .25); background: rgba(255,255,255,.06); }

.auth-body { color: #dbeaff; background: #06111f; }
.auth-shell { grid-template-columns: minmax(520px, 1.15fr) minmax(420px, .85fr); }
.auth-story.auth-visual-story { position: relative; min-height: 100vh; padding: 34px clamp(30px, 4vw, 64px); overflow: hidden; background: radial-gradient(circle at 55% 42%, rgba(38, 99, 176, .2), transparent 28%), radial-gradient(circle at 8% 92%, rgba(16, 205, 189, .12), transparent 27%), linear-gradient(145deg, #06111f, #091b30 72%, #0b162b); }
.auth-story.auth-visual-story::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(88, 137, 179, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 137, 179, .06) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at center, black 20%, transparent 78%); }
.auth-story.auth-visual-story > * { position: relative; z-index: 1; }
.auth-logo { font-size: 14px; letter-spacing: .04em; }
.factor-visual { position: relative; width: 100%; height: min(66vh, 640px); min-height: 430px; }
.factor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-core { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: 112px; height: 112px; transform: translate(-50%, -50%); border: 1px solid rgba(86, 207, 229, .28); border-radius: 50%; color: white; background: radial-gradient(circle, rgba(29, 107, 179, .36), rgba(8, 24, 45, .86) 68%); box-shadow: 0 0 0 16px rgba(31, 122, 188, .05), 0 0 70px rgba(21, 174, 204, .2); backdrop-filter: blur(8px); }
.visual-core span { font: 400 42px Georgia, serif; text-shadow: 0 0 20px rgba(55, 221, 221, .65); }
.visual-core small { margin-top: -18px; color: #7fb2cd; font: 650 8px ui-monospace, monospace; letter-spacing: .13em; }
.visual-chip { position: absolute; display: grid; grid-template-columns: auto auto; gap: 3px 10px; min-width: 120px; padding: 10px 12px; border: 1px solid rgba(105, 160, 205, .16); border-radius: 9px; color: #d7ebf8; background: rgba(6, 21, 39, .72); box-shadow: 0 10px 30px rgba(0,0,0,.16); backdrop-filter: blur(10px); animation: visual-float 6s ease-in-out infinite; }
.visual-chip i { grid-row: 1 / 3; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: #35d3c9; box-shadow: 0 0 10px #35d3c9; }
.visual-chip span { color: #7094ad; font: 650 8px ui-monospace, monospace; letter-spacing: .1em; }
.visual-chip strong { font: 650 12px ui-monospace, monospace; }
.chip-one { left: 8%; top: 25%; }.chip-two { right: 7%; top: 35%; animation-delay: -2s; }.chip-three { left: 15%; bottom: 17%; animation-delay: -4s; }
@keyframes visual-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.visual-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid rgba(101, 149, 186, .14); }
.visual-caption span { color: #4fc9c6; font: 700 9px ui-monospace, monospace; letter-spacing: .19em; }
.visual-caption strong { color: #b9cfe1; font-size: 12px; font-weight: 520; letter-spacing: .03em; }
.auth-panel { position: relative; background: radial-gradient(circle at 75% 18%, rgba(76, 101, 239, .12), transparent 28%), linear-gradient(150deg, #f7faff, #edf3f9); }
.auth-panel::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle, #a9bdd2 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom right, black, transparent 65%); }
.auth-card { position: relative; z-index: 1; width: min(410px, 100%); padding: 38px; border: 1px solid rgba(198, 215, 230, .9); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.86); box-shadow: 0 28px 75px rgba(32, 66, 105, .14); backdrop-filter: blur(18px); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #18c9c2, #347aec, #745cf2); }
.auth-card h2 { font-size: 29px; }
.auth-card input { height: 47px; background: #f8fbfd; }

@media (prefers-reduced-motion: reduce) { .visual-chip { animation: none; } }

@media (max-width: 1080px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .workspace-grid, .settings-grid, .admin-grid, .generator-layout { grid-template-columns: 1fr; }
    .admin-grid .span-all { grid-column: auto; }
}
@media (max-width: 760px) {
    .app-body { display: block; }
    .sidebar { position: static; width: 100%; padding: 14px; }
    .brand { padding-bottom: 14px; }
    .nav-list { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
    .nav-list a { justify-content: center; padding: 9px 5px; font-size: 11px; }
    .nav-list a span { display: none; }
    .sidebar-foot { display: none; }
    .app-main { padding: 24px 15px 50px; }
    .topbar { align-items: flex-start; }
    .secure-badge { display: none; }
    .stats-grid, .form-grid, .account-facts { grid-template-columns: 1fr 1fr; }
    .workspace-grid { display: block; }
    .workspace-grid > .panel { margin-bottom: 15px; }
    .code-form { grid-template-columns: 1fr 1fr; }
    .auth-shell { display: block; }
    .auth-story { min-height: 300px; padding: 24px; }
    .auth-story h1 { font-size: 34px; }
    .auth-story p, .auth-security { display: none; }
    .auth-panel { padding: 24px 15px; }
}
@media (max-width: 470px) {
    .stats-grid, .form-grid, .account-facts, .code-form { grid-template-columns: 1fr; }
    .panel-heading { align-items: flex-start; flex-direction: column; }
    .security-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 900px) {
    .auth-shell { display: block; }
    .auth-story.auth-visual-story { min-height: 370px; height: 42vh; }
    .factor-visual { height: 280px; min-height: 0; }
    .visual-core { width: 88px; height: 88px; }
    .visual-core span { font-size: 32px; }
    .visual-chip { transform: scale(.88); }
    .chip-one { left: 2%; }.chip-two { right: 1%; }.chip-three { bottom: 8%; }
    .visual-caption { display: none; }
    .auth-panel { min-height: 58vh; }
}