:root {
    --ink-950: #031015;
    --ink-900: #07171d;
    --ink-850: #0a2028;
    --ink-800: #0d2932;
    --ink-700: #183b45;
    --line: rgba(146, 217, 217, 0.16);
    --line-strong: rgba(104, 235, 220, 0.30);
    --paper: #f4fbfa;
    --paper-soft: #d8e8e7;
    --muted: #8ca7a8;
    --cyan: #55f0dc;
    --cyan-strong: #20cbbb;
    --cyan-dark: #0b827d;
    --orange: #ffbd72;
    --red: #ff6f72;
    --green: #5ce2a7;
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
    --font-sans: Inter, "Segoe UI", Arial, sans-serif;
    --font-mono: "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
h1, h2, h3, p, pre { margin: 0; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
html { background: var(--ink-950); color-scheme: dark; }
body {
    background: var(--ink-950);
    color: var(--paper);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { color: inherit; background: none; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
::selection { color: #fff; background: rgba(85, 240, 220, 0.25); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.16); }
::-webkit-scrollbar-thumb {
    background: rgba(140, 192, 193, 0.34);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.public-shell,
.console-shell {
    isolation: isolate;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.public-shell {
    background:
        linear-gradient(rgba(85, 240, 220, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 240, 220, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 70% 15%, rgba(29, 179, 177, 0.10), transparent 34%),
        var(--ink-950);
    background-size: 38px 38px, 38px 38px, auto, auto;
}
.console-shell {
    background:
        linear-gradient(rgba(85, 240, 220, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 240, 220, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 22% -10%, rgba(35, 194, 188, 0.09), transparent 30%),
        var(--ink-950);
    background-size: 38px 38px, 38px 38px, auto, auto;
}
.ambient {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
}
.ambient-one { background: rgba(47, 224, 204, 0.12); top: 8%; right: -180px; }
.ambient-two { background: rgba(21, 106, 131, 0.22); bottom: -240px; left: 12%; }

.corner-logo {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 12;
    width: 72px;
    height: 74px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    border: 1px solid rgba(118, 255, 242, 0.24);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 0 20px rgba(118, 255, 242, 0.14);
}

.page-width { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
.brand-header {
    width: min(1440px, calc(100% - 64px));
    min-height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 5;
    padding-right: 92px;
}
.brand-identity { display: flex; align-items: center; gap: 13px; }
.brand-identity > div { display: flex; flex-direction: column; gap: 3px; }
.brand-identity strong { color: #f4ffff; font-size: 14px; font-weight: 680; letter-spacing: 0.015em; }
.brand-identity > div > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(85, 240, 220, 0.18), rgba(10, 38, 47, 0.80));
    border: 1px solid rgba(85, 240, 220, 0.50);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px rgba(12, 205, 190, 0.12);
}
.brand-mark span, .brand-mark b {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    font-style: normal;
}
.brand-mark span { top: 8px; left: 8px; }
.brand-mark b { right: 7px; bottom: 7px; color: #eaffff; }
.brand-mark i {
    position: absolute;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.7;
    rotate: -45deg;
}

.quiet-button,
.text-button,
.danger-text-button,
.icon-button,
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 0;
}
.quiet-button {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--paper-soft);
    font-size: 12px;
    font-weight: 650;
    transition: all 0.16s ease;
}
.quiet-button:hover { border-color: var(--line-strong); color: var(--cyan); background: rgba(85, 240, 220, 0.06); }

.notice {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 12px;
}
.notice.ok { color: #cafff8; background: rgba(18, 200, 210, 0.12); border-color: rgba(118, 255, 242, 0.22); }
.notice.error { color: #ffd6d3; background: rgba(166, 45, 42, 0.18); border-color: rgba(255, 117, 111, 0.28); }

.site-footer {
    width: min(1440px, calc(100% - 64px));
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    color: #6d8788;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cyan-dark); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.eyebrow.success { color: var(--green); }

.access-stage {
    width: min(1120px, calc(100% - 64px));
    margin: 0 auto;
    padding: 74px 0 92px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 110px;
    align-items: center;
    z-index: 1;
}
.access-copy { max-width: 610px; }
.access-copy h1 {
    color: #f3ffff;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 660;
    line-height: 0.98;
    letter-spacing: -0.055em;
}
.access-copy p {
    max-width: 530px;
    margin: 30px 0 0;
    color: #a9c0c1;
    font-size: 17px;
    line-height: 1.75;
}
.trust-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.trust-row span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(8, 32, 40, 0.58);
    color: #94adae;
    font-size: 11px;
    font-weight: 650;
}
.access-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 24px;
    border: 1px solid rgba(118, 216, 209, 0.17);
    background: linear-gradient(150deg, rgba(13, 42, 51, 0.96), rgba(5, 24, 31, 0.98));
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.04);
}
.access-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    translate: 45% -50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(65, 233, 214, 0.10);
    filter: blur(45px);
}
.card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    background: rgba(85, 240, 220, 0.10);
    border: 1px solid rgba(85, 240, 220, 0.24);
    border-radius: 14px;
}
.access-card-title { margin: 21px 0 27px; position: relative; z-index: 1; }
.access-card-title span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.access-card-title h2 {
    margin: 7px 0 0;
    color: #f2ffff;
    font-size: 25px;
    font-weight: 670;
    letter-spacing: -0.025em;
}
.form-stack { display: grid; gap: 12px; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
label, .field-group label {
    display: block;
    margin-bottom: 8px;
    color: #9eb4b5;
    font-size: 11px;
    font-weight: 700;
}
.code-entry { position: relative; }
.code-entry input,
.field-group input,
.field-group textarea,
.search-box input,
textarea,
input {
    width: 100%;
    color: #f2ffff;
    background: rgba(2, 15, 20, 0.70);
    border: 1px solid rgba(145, 209, 207, 0.17);
    transition: all 0.16s ease;
}
input, textarea {
    border-radius: 10px;
    outline: 0;
}
.code-entry input,
.field-group input,
.search-box input,
input {
    min-height: 42px;
    padding: 0 13px;
    font-size: 12px;
}
textarea, .field-group textarea {
    min-height: 220px;
    padding: 14px;
    resize: vertical;
    line-height: 1.6;
    font-family: var(--font-mono);
    font-size: 12px;
    direction: ltr;
    text-align: left;
    tab-size: 4;
}
.code-entry input {
    height: 52px;
    padding: 0 46px 0 15px;
    border-radius: 12px;
    font-size: 15px;
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}
.code-entry input::placeholder,
.field-group input::placeholder,
.field-group textarea::placeholder,
.search-box input::placeholder,
input::placeholder,
textarea::placeholder { color: #536f72; }
.code-entry input:hover,
.field-group input:hover,
.field-group textarea:hover,
.search-box input:hover,
input:hover,
textarea:hover { border-color: rgba(122, 224, 216, 0.28); }
.code-entry input:focus,
.field-group input:focus,
.field-group textarea:focus,
.search-box input:focus,
input:focus,
textarea:focus { border-color: rgba(85, 240, 220, 0.64); box-shadow: 0 0 0 3px rgba(85, 240, 220, 0.08); }
.code-entry > svg {
    position: absolute;
    top: 16px;
    right: 15px;
    color: #648184;
    pointer-events: none;
}
input.code {
    direction: ltr;
    text-align: left;
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.primary-button,
.secondary-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    transition: all 0.16s ease;
    border: 1px solid transparent;
}
.primary-button {
    color: #032325;
    background: linear-gradient(135deg, #50ead7, #19bcb5);
    border-color: rgba(99, 255, 235, 0.72);
    box-shadow: 0 8px 24px rgba(20, 194, 181, 0.18), inset 0 1px rgba(255, 255, 255, 0.3);
}
.primary-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #67f4e2, #23cbc1);
    translate: 0 -1px;
    box-shadow: 0 10px 28px rgba(20, 194, 181, 0.25), inset 0 1px rgba(255, 255, 255, 0.35);
}
.primary-button.compact { min-height: 38px; padding: 0 13px; }
.secondary-button {
    color: #c5dad9;
    background: rgba(11, 37, 45, 0.72);
    border-color: var(--line);
}
.secondary-button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--cyan); background: rgba(24, 63, 72, 0.70); }
.danger-button {
    color: #25090b;
    background: linear-gradient(135deg, #ff7779, #df4e55);
    border-color: rgba(255, 111, 114, 0.5);
}
.access-button { width: 100%; min-height: 49px; }
.privacy-note {
    margin: 20px 0 0;
    color: #607d80;
    font-size: 10px;
    line-height: 1.45;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.record-stage { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 54px 0 72px; z-index: 1; }
.record-card {
    overflow: hidden;
    border: 1px solid rgba(118, 216, 209, 0.16);
    border-radius: 22px;
    background: rgba(7, 28, 35, 0.94);
    box-shadow: var(--shadow);
}
.record-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--line);
}
.record-heading h1 { font-size: 29px; font-weight: 670; letter-spacing: -0.03em; }
.record-subline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--paper-soft);
    background: rgba(91, 181, 181, 0.06);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.public-content { padding: 24px 28px 10px; }
.public-content textarea {
    width: 100%;
    min-height: 52vh;
    background: rgba(2, 15, 20, 0.84);
    border: 1px solid rgba(118, 255, 242, 0.12);
    border-radius: 16px;
    padding: 18px;
    color: #d9ffff;
    font-size: 12px;
}
.record-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-height: 66px;
    padding: 0 28px 20px;
    color: #6b8789;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.console-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}
.console-titlebar h1 { font-size: 32px; font-weight: 670; letter-spacing: -0.04em; }
.console-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.console-stats div {
    min-width: 90px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(7, 24, 31, 0.66);
}
.console-stats span {
    display: block;
    color: #6f8c8e;
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.console-stats strong { color: #efffff; font-size: 18px; font-weight: 680; }
.manager-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    min-height: 760px;
    border: 1px solid rgba(118, 216, 209, 0.15);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(7, 24, 31, 0.68);
    box-shadow: var(--shadow);
}
.records-panel {
    border-right: 1px solid var(--line);
    background: rgba(4, 20, 26, 0.86);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
}
.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-height: 76px;
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--line);
}
.panel-heading h2 { font-size: 20px; font-weight: 660; }
.panel-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.search-box input { flex: 1; min-width: 0; }
.icon-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #83a1a2;
}
.icon-button:hover { border-color: var(--line-strong); color: var(--cyan); background: rgba(85, 240, 220, 0.06); }
.records-list { min-height: 0; overflow-y: auto; padding: 7px; }
.record-row {
    width: 100%;
    min-height: 91px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 9px;
    align-items: center;
    padding: 13px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: #6d898b;
    transition: all 0.14s ease;
}
.record-row + .record-row { margin-top: 2px; }
.record-row:hover { color: #a7c2c2; background: rgba(52, 129, 132, 0.08); }
.record-row.selected {
    color: var(--cyan);
    background: linear-gradient(90deg, rgba(53, 206, 193, 0.12), rgba(35, 105, 112, 0.06));
    border-color: rgba(85, 240, 220, 0.24);
}
.record-file-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #799798;
    background: rgba(91, 181, 181, 0.06);
    border: 1px solid rgba(126, 202, 200, 0.14);
}
.record-row.selected .record-file-icon { color: var(--cyan); background: rgba(85, 240, 220, 0.10); border-color: rgba(85, 240, 220, 0.24); }
.record-row-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.record-row-copy strong {
    color: #dcebea;
    font-size: 12px;
    font-weight: 680;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.record-row-copy code { color: #789596; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.045em; direction: ltr; text-align: left; }
.record-row-meta { display: flex; gap: 11px; color: #5f7b7d; font-size: 9px; }
.record-row-meta .urgent { color: var(--orange); }
.panel-footnote {
    min-height: 43px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid var(--line);
    color: #587477;
    font-size: 9px;
}
.empty-list {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: #638083;
    font-size: 11px;
}
.empty-list strong { color: #9bb3b3; font-size: 12px; }
.empty-list span { color: #5b7779; font-size: 10px; }

.editor-panel {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: radial-gradient(circle at 95% 0, rgba(57, 183, 178, 0.06), transparent 30%), rgba(7, 28, 35, 0.78);
}
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 77px;
    padding: 17px 24px;
    border-bottom: 1px solid var(--line);
}
.editor-kicker { color: #617e80; font-size: 9px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.editor-header h2 {
    margin-top: 5px;
    color: #edfafa;
    font-size: 20px;
    font-weight: 660;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 620px;
}
.active-badge {
    min-height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid rgba(92, 226, 167, 0.20);
    background: rgba(92, 226, 167, 0.06);
    color: var(--green);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.active-badge > span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(92, 226, 167, 0.75); }
.record-control-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 11px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(3, 18, 23, 0.50);
}
.code-block { display: flex; flex-direction: column; gap: 3px; min-width: 195px; margin-right: auto; }
.code-block span { color: #617e80; font-size: 8px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.code-block strong { color: var(--cyan); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; direction: ltr; text-align: left; }
.record-control-strip button {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    border: 1px solid var(--line);
    color: #94aeaf;
    background: rgba(14, 43, 51, 0.44);
    cursor: pointer;
    font-size: 10px;
    font-weight: 650;
}
.record-control-strip button:hover { border-color: var(--line-strong); color: var(--cyan); }
.editor-form {
    min-height: 0;
    padding: 20px 24px;
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    gap: 16px;
    overflow: hidden;
}
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-group { min-height: 0; }
.content-field { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.field-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.field-label-row span { color: #567275; font-family: var(--font-mono); font-size: 9px; }
.editor-form textarea { min-height: 340px; resize: none; }
.record-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 24px 13px;
}
.record-details-grid div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid rgba(126, 198, 197, 0.09);
    background: rgba(1, 14, 18, 0.32);
}
.record-details-grid span { color: #567275; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.record-details-grid strong {
    color: #9db5b5;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.editor-secondary-actions,
.save-zone { display: flex; align-items: center; gap: 8px; }
.danger-text-button {
    color: #c87c80;
    min-height: 38px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
    border: 0;
    background: none;
}
.danger-text-button:hover { color: var(--red); }
.save-zone > span { color: #557174; font-size: 9px; }
.empty-editor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    color: #638083;
    text-align: center;
    padding: 0 24px 24px;
}
.empty-editor > span {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(85, 240, 220, 0.05);
    color: #6d9495;
}
.empty-editor h2 { color: #bdd0cf; font-size: 17px; }
.empty-editor p { max-width: 320px; margin: 8px 0 0; color: #668184; font-size: 11px; line-height: 1.6; }

@media (max-width: 1050px) {
    .access-stage { grid-template-columns: minmax(0, 1fr) 390px; gap: 55px; }
    .manager-grid { grid-template-columns: 330px minmax(0, 1fr); }
    .record-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-control-strip { flex-wrap: wrap; }
}
@media (max-width: 820px) {
    .brand-header, .site-footer, .access-stage, .record-stage, .page-width { width: min(100% - 36px, 680px); }
    .brand-header { min-height: 76px; }
    .brand-header { padding-right: 72px; }
    .access-stage { grid-template-columns: 1fr; gap: 42px; padding: 50px 0 64px; }
    .access-copy { max-width: 640px; }
    .access-copy h1 { font-size: clamp(43px, 12vw, 64px); }
    .access-copy p { font-size: 15px; }
    .access-card { width: min(100%, 500px); }
    .record-heading { flex-direction: column; align-items: flex-start; }
    .console-titlebar { flex-direction: column; align-items: flex-start; }
    .manager-grid { grid-template-columns: 1fr; height: auto; max-height: none; overflow: visible; }
    .records-panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: 500px; }
    .editor-panel { min-height: 620px; }
}
@media (max-width: 560px) {
    .brand-header, .site-footer, .access-stage, .record-stage, .page-width { width: calc(100% - 28px); }
    .brand-identity strong { font-size: 12px; }
    .brand-identity > div > span { font-size: 8px; }
    .quiet-button { width: 38px; padding: 0; font-size: 0; }
    .access-stage { padding-top: 38px; }
    .access-copy h1 { font-size: 44px; }
    .access-copy p { margin-top: 21px; }
    .access-card { border-radius: 19px; padding: 25px; }
    .site-footer {
        min-height: 64px;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
    }
    .site-footer .footer-dot { display: none; }
    .record-stage { padding: 28px 0 48px; }
    .record-heading, .public-content { padding-left: 20px; padding-right: 20px; }
    .record-actions { width: 100%; }
    .record-actions > * { flex: 1 1 auto; }
    .record-card-footer { min-height: 72px; padding: 12px 18px; flex-direction: column; align-items: flex-start; }
    .console-stats { width: 100%; }
    .console-stats div { flex: 1 1 calc(50% - 10px); }
    .panel-toolbar { flex-wrap: wrap; }
    .search-box { min-width: calc(100% - 46px); }
    .primary-button.compact { width: 100%; }
    .records-panel { max-height: 560px; }
    .editor-header, .record-control-strip, .editor-form { padding-left: 16px; padding-right: 16px; }
    .record-control-strip { align-items: stretch; }
    .code-block { width: 100%; min-width: 0; margin-bottom: 3px; }
    .record-control-strip button { flex: 1 1 auto; justify-content: center; }
    .split-fields { grid-template-columns: 1fr; }
    .record-details-grid { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
    .editor-footer { flex-direction: column-reverse; align-items: stretch; }
    .editor-secondary-actions, .save-zone { justify-content: space-between; width: 100%; flex-wrap: wrap; }
    .save-zone .primary-button, .save-zone .secondary-button { flex: 1 1 auto; }
    .corner-logo {
        top: 10px;
        right: 10px;
        width: 58px;
        height: 60px;
        border-radius: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Dynamic icfn-style background */
:root { --pointer-x: 68vw; --pointer-y: 18vh; }
.public-shell::before,
.console-shell::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -4;
    pointer-events: none;
    background:
        linear-gradient(rgba(85, 240, 220, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 240, 220, 0.035) 1px, transparent 1px);
    background-size: 38px 38px;
    animation: grid-drift 24s linear infinite;
    transform: perspective(720px) rotateX(5deg) scale(1.08);
    transform-origin: center top;
}
.public-shell::after,
.console-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(540px circle at var(--pointer-x) var(--pointer-y), rgba(85, 240, 220, 0.16), transparent 58%),
        radial-gradient(720px circle at 13% 92%, rgba(13, 122, 150, 0.12), transparent 60%);
}
.ambient { will-change: transform; }
.ambient-one { animation: ambient-one-drift 15s ease-in-out infinite alternate; }
.ambient-two { animation: ambient-two-drift 19s ease-in-out infinite alternate; }
.ambient-three {
    width: 300px;
    height: 300px;
    top: 47%;
    left: 54%;
    background: rgba(34, 191, 183, 0.09);
    animation: ambient-three-drift 17s ease-in-out infinite alternate;
}
@keyframes grid-drift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 38px 76px, 76px 38px; }
}
@keyframes ambient-one-drift {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to { transform: translate3d(-110px, 90px, 0) scale(1.18); }
}
@keyframes ambient-two-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(140px, -80px, 0) scale(1.22); }
}
@keyframes ambient-three-drift {
    from { transform: translate3d(-40px, 20px, 0) scale(0.85); }
    to { transform: translate3d(130px, -100px, 0) scale(1.25); }
}

/* Masked dual-purpose code input */
.code-entry input { padding-right: 54px; }
.visibility-toggle {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: #6f8e90;
    background: transparent;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}
.visibility-toggle:hover,
.visibility-toggle:focus-visible {
    color: var(--cyan);
    background: rgba(85, 240, 220, 0.08);
}
.visibility-toggle .eye-hide { display: none; }
.visibility-toggle.is-visible .eye-show { display: none; }
.visibility-toggle.is-visible .eye-hide { display: block; }

@media (prefers-reduced-motion: reduce) {
    .public-shell::before,
    .console-shell::before,
    .ambient-one,
    .ambient-two,
    .ambient-three { animation: none !important; }
}

/* Schwartz energy-field visual system */
:root {
    --ink-950: #0b0c0f;
    --ink-900: #101216;
    --ink-850: #15181d;
    --ink-800: #1b2026;
    --ink-700: #28333a;
    --line: rgba(188, 255, 246, 0.14);
    --line-strong: rgba(100, 242, 223, 0.38);
    --paper: #f5f7f7;
    --paper-soft: #dce6e5;
    --muted: #8f9e9e;
    --cyan: #64f2df;
    --cyan-strong: #28c8bc;
    --cyan-dark: #0e736f;
    --orange: #ffbd72;
    --red: #ff777a;
    --green: #5ce2a7;
    --shadow: 0 34px 120px rgba(0, 0, 0, 0.54);
    --pointer-x: 68vw;
    --pointer-y: 18vh;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --shine-x: 50%;
    --shine-y: 50%;
}

body {
    background: #0b0c0f;
}

.public-shell,
.console-shell {
    background:
        radial-gradient(circle at 14% 18%, rgba(100, 242, 223, 0.05), transparent 30%),
        radial-gradient(circle at 78% 6%, rgba(55, 134, 153, 0.07), transparent 28%),
        linear-gradient(180deg, #0b0c0f 0%, #101217 58%, #0b0c0f 100%);
}

.public-shell::before,
.console-shell::before {
    inset: 0;
    opacity: 0.52;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: none;
    animation: schwartz-grid-drift 34s linear infinite;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 82%);
}

.public-shell::after,
.console-shell::after {
    background:
        radial-gradient(620px circle at var(--pointer-x) var(--pointer-y), rgba(100, 242, 223, 0.10), transparent 62%),
        radial-gradient(800px circle at 12% 92%, rgba(15, 100, 112, 0.10), transparent 64%);
}

@keyframes schwartz-grid-drift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 72px 144px, 144px 72px; }
}

.surface-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.055;
    background-image:
        radial-gradient(circle at 25% 25%, #fff 0 0.6px, transparent 0.8px),
        radial-gradient(circle at 75% 65%, #fff 0 0.55px, transparent 0.75px);
    background-size: 5px 5px, 7px 7px;
    mix-blend-mode: overlay;
}

.cursor-aura {
    position: fixed;
    left: var(--pointer-x);
    top: var(--pointer-y);
    width: 560px;
    height: 560px;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient(circle, rgba(100, 242, 223, 0.10), rgba(100, 242, 223, 0.035) 34%, transparent 70%);
    filter: blur(2px);
}

.energy-landscape {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -5vh;
    height: min(68vh, 760px);
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.94;
    perspective: 900px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 88%, transparent 100%);
}

.energy-contours {
    width: 112%;
    height: 100%;
    margin-left: -6%;
    overflow: visible;
    transform: perspective(900px) rotateX(58deg) translateY(10%) scale(1.12);
    transform-origin: 50% 82%;
    filter: drop-shadow(0 0 10px rgba(100, 242, 223, 0.16));
    animation: energy-field-float 18s ease-in-out infinite alternate;
}

.contour-group {
    fill: none;
    stroke: url(#contour-stroke);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.contour-group path {
    stroke-dasharray: 22 13 180 28;
    animation: contour-flow 17s linear infinite;
}
.contour-group path:nth-child(2n) { animation-duration: 22s; animation-direction: reverse; opacity: 0.78; }
.contour-group path:nth-child(3n) { animation-duration: 28s; opacity: 0.55; }

.energy-core {
    opacity: 0.7;
    animation: energy-core-pulse 8s ease-in-out infinite alternate;
}

.signal-nodes circle {
    fill: var(--cyan);
    filter: drop-shadow(0 0 8px rgba(100, 242, 223, 0.9));
    animation: signal-node-pulse 3.2s ease-in-out infinite;
}
.signal-nodes circle:nth-child(2n) { animation-delay: -1.1s; }
.signal-nodes circle:nth-child(3n) { animation-delay: -2.2s; }

.signal-sweep {
    position: fixed;
    z-index: -1;
    top: -20%;
    left: 14%;
    width: 1px;
    height: 140%;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(100, 242, 223, 0.48), transparent);
    box-shadow: 0 0 20px rgba(100, 242, 223, 0.22);
    opacity: 0.35;
    transform: rotate(18deg);
    animation: signal-sweep 15s ease-in-out infinite;
}

@keyframes contour-flow {
    to { stroke-dashoffset: -520; }
}
@keyframes energy-field-float {
    from { transform: perspective(900px) rotateX(58deg) translate3d(-1.5%, 10%, 0) scale(1.12); }
    to { transform: perspective(900px) rotateX(58deg) translate3d(1.5%, 7%, 0) scale(1.16); }
}
@keyframes energy-core-pulse {
    from { opacity: 0.34; transform: scale(0.88); transform-origin: 60% 58%; }
    to { opacity: 0.78; transform: scale(1.14); transform-origin: 60% 58%; }
}
@keyframes signal-node-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.65); }
    50% { opacity: 1; transform: scale(1.45); }
}
@keyframes signal-sweep {
    0%, 100% { left: 8%; opacity: 0.08; }
    42% { opacity: 0.45; }
    58% { opacity: 0.45; }
    100% { left: 92%; opacity: 0.08; }
}

.ambient {
    opacity: 0.42;
    filter: blur(120px);
}
.ambient-one { background: rgba(55, 193, 184, 0.12); }
.ambient-two { background: rgba(13, 83, 104, 0.16); }
.ambient-three { background: rgba(100, 242, 223, 0.06); }

.brand-header {
    min-height: 92px;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    padding-right: 98px;
}
.brand-identity strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.brand-identity > div > span {
    color: #718384;
    letter-spacing: 0.18em;
}
.brand-mark {
    color: var(--cyan);
    background: rgba(17, 22, 27, 0.72);
    border-color: rgba(100, 242, 223, 0.30);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 16px 36px rgba(0, 0, 0, 0.28);
}

.corner-logo {
    width: 70px;
    height: 72px;
    padding: 6px;
    object-fit: contain;
    object-position: center;
    background: rgba(12, 15, 18, 0.58);
    border: 1px solid rgba(100, 242, 223, 0.18);
    border-radius: 14px;
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38), 0 0 28px rgba(100, 242, 223, 0.09);
    animation: logo-breathe 7s ease-in-out infinite alternate;
}
@keyframes logo-breathe {
    from { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38), 0 0 16px rgba(100, 242, 223, 0.04); }
    to { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38), 0 0 34px rgba(100, 242, 223, 0.16); }
}

.site-footer {
    border-top-color: rgba(255, 255, 255, 0.07);
    color: #596768;
}

.access-stage {
    grid-template-columns: minmax(0, 1.16fr) 410px;
    gap: clamp(48px, 7vw, 126px);
    padding-top: clamp(70px, 10vh, 122px);
    padding-bottom: clamp(110px, 16vh, 190px);
}

.access-copy {
    max-width: 720px;
    position: relative;
}
.access-copy::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 3px;
    width: 3px;
    height: 74px;
    background: linear-gradient(to bottom, transparent, var(--cyan), transparent);
    box-shadow: 0 0 20px rgba(100, 242, 223, 0.36);
}
.access-copy h1 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: clamp(54px, 7.1vw, 104px);
    line-height: 0.89;
    font-weight: 610;
    letter-spacing: -0.067em;
}
.access-copy h1 span {
    color: #f7f8f8;
}
.access-copy h1 em {
    color: transparent;
    font-style: normal;
    -webkit-text-stroke: 1px rgba(219, 239, 236, 0.72);
    text-shadow: 0 0 35px rgba(100, 242, 223, 0.10);
}
.access-copy p {
    max-width: 610px;
    color: #9aa8a8;
    font-size: 16px;
    line-height: 1.78;
}
.eyebrow {
    color: var(--cyan);
    font-size: 10px;
    letter-spacing: 0.22em;
}
.trust-row {
    gap: 8px;
    margin-top: 34px;
}
.trust-row span {
    min-height: 34px;
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(20, 23, 28, 0.48);
    color: #869596;
    backdrop-filter: blur(10px);
}

.access-card,
.record-card,
.manager-grid {
    transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    will-change: transform;
}
.access-card::after,
.record-card::after,
.manager-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(330px circle at var(--shine-x) var(--shine-y), rgba(100, 242, 223, 0.09), transparent 68%);
    opacity: 0.85;
}

.access-card {
    border-radius: 18px;
    border-color: rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(145deg, rgba(31, 35, 41, 0.82), rgba(14, 17, 21, 0.88)),
        rgba(16, 18, 22, 0.78);
    backdrop-filter: blur(26px) saturate(115%);
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.055);
}
.access-card::before {
    width: 210px;
    height: 210px;
    background: rgba(100, 242, 223, 0.09);
}
.access-card:hover {
    border-color: rgba(100, 242, 223, 0.28);
    box-shadow: 0 40px 130px rgba(0, 0, 0, 0.62), 0 0 50px rgba(100, 242, 223, 0.06);
}
.card-icon {
    color: var(--cyan);
    background: rgba(100, 242, 223, 0.07);
    border-color: rgba(100, 242, 223, 0.24);
}
.access-card-title span {
    color: #6f8081;
    letter-spacing: 0.18em;
}
.access-card-title h2 {
    color: #f5f7f7;
    font-size: 27px;
    line-height: 1.12;
}
.code-entry input,
.field-group input,
.field-group textarea,
.search-box input,
input,
textarea {
    background: rgba(7, 9, 12, 0.72);
    border-color: rgba(255, 255, 255, 0.10);
}
.code-entry input:hover,
.field-group input:hover,
.field-group textarea:hover,
.search-box input:hover,
input:hover,
textarea:hover {
    border-color: rgba(100, 242, 223, 0.24);
}
.code-entry input:focus,
.field-group input:focus,
.field-group textarea:focus,
.search-box input:focus,
input:focus,
textarea:focus {
    border-color: rgba(100, 242, 223, 0.58);
    box-shadow: 0 0 0 3px rgba(100, 242, 223, 0.07), 0 0 30px rgba(100, 242, 223, 0.05);
}
.primary-button {
    color: #07110f;
    background: linear-gradient(135deg, #f0fffc 0%, #64f2df 48%, #26bfb5 100%);
    border-color: rgba(216, 255, 249, 0.66);
    box-shadow: 0 14px 34px rgba(41, 197, 184, 0.16), inset 0 1px rgba(255, 255, 255, 0.55);
}
.primary-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffffff 0%, #78ffe9 48%, #2dd0c4 100%);
    box-shadow: 0 18px 44px rgba(41, 197, 184, 0.24), inset 0 1px rgba(255, 255, 255, 0.65);
}
.secondary-button,
.quiet-button {
    color: #bec9c8;
    background: rgba(15, 18, 22, 0.48);
    border-color: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(14px);
}
.secondary-button:hover:not(:disabled),
.quiet-button:hover {
    border-color: rgba(100, 242, 223, 0.30);
    color: var(--cyan);
    background: rgba(100, 242, 223, 0.05);
}
.privacy-note { color: #647173; }

.record-card,
.manager-grid {
    position: relative;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(15, 18, 22, 0.84);
    backdrop-filter: blur(24px) saturate(112%);
}
.record-heading,
.panel-heading,
.editor-header,
.record-control-strip,
.panel-toolbar,
.record-card-footer,
.site-footer {
    border-color: rgba(255, 255, 255, 0.075);
}
.record-heading h1,
.console-titlebar h1,
.panel-heading h2,
.editor-header h2 {
    color: #f4f6f6;
}
.public-content textarea,
.editor-form textarea {
    background: rgba(5, 7, 10, 0.82);
    border-color: rgba(255, 255, 255, 0.09);
}
.badge,
.console-stats div,
.record-details-grid div {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(12, 15, 18, 0.52);
}
.records-panel {
    background: rgba(9, 11, 14, 0.86);
    border-left-color: rgba(255, 255, 255, 0.075);
}
.editor-panel {
    background:
        radial-gradient(circle at 90% 0, rgba(100, 242, 223, 0.05), transparent 30%),
        rgba(15, 18, 22, 0.74);
}
.record-row:hover {
    background: rgba(100, 242, 223, 0.045);
}
.record-row.selected {
    background: linear-gradient(90deg, rgba(100, 242, 223, 0.10), rgba(100, 242, 223, 0.02));
    border-color: rgba(100, 242, 223, 0.24);
}
.record-file-icon {
    background: rgba(100, 242, 223, 0.045);
    border-color: rgba(100, 242, 223, 0.13);
}
.active-badge {
    border-color: rgba(92, 226, 167, 0.22);
    background: rgba(92, 226, 167, 0.05);
}

.visibility-toggle {
    border: 1px solid transparent;
}
.visibility-toggle:hover,
.visibility-toggle:focus-visible {
    border-color: rgba(100, 242, 223, 0.16);
    color: var(--cyan);
    background: rgba(100, 242, 223, 0.06);
}

html[data-ready="true"] .access-copy,
html[data-ready="true"] .access-card,
html[data-ready="true"] .record-stage {
    animation: reveal-up 720ms cubic-bezier(.16, .84, .24, 1) both;
}
html[data-ready="true"] .access-card { animation-delay: 110ms; }
html[data-ready="true"] .record-stage { animation-delay: 70ms; }
@keyframes reveal-up {
    from { opacity: 0; translate: 0 24px; filter: blur(8px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@media (max-width: 1050px) {
    .access-stage {
        grid-template-columns: minmax(0, 1fr) 390px;
    }
    .access-copy h1 { font-size: clamp(52px, 8vw, 82px); }
}

@media (max-width: 820px) {
    .energy-landscape { height: 56vh; bottom: 0; opacity: 0.72; }
    .access-stage { grid-template-columns: 1fr; }
    .access-copy { max-width: 650px; }
    .access-copy::before { left: 0; top: -23px; width: 74px; height: 2px; }
    .access-copy h1 { font-size: clamp(52px, 13vw, 78px); }
    .access-card { width: min(100%, 520px); }
}

@media (max-width: 560px) {
    .brand-header { padding-right: 72px; }
    .corner-logo {
        width: 56px;
        height: 58px;
        padding: 5px;
    }
    .access-copy h1 { font-size: 49px; }
    .access-copy p { font-size: 14px; }
    .trust-row span { width: 100%; justify-content: center; }
    .energy-landscape { height: 48vh; opacity: 0.52; }
    .signal-sweep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .energy-contours,
    .contour-group path,
    .energy-core,
    .signal-nodes circle,
    .signal-sweep,
    .corner-logo,
    html[data-ready="true"] .access-copy,
    html[data-ready="true"] .access-card,
    html[data-ready="true"] .record-stage {
        animation: none !important;
    }
    .access-card,
    .record-card,
    .manager-grid { transform: none !important; }
}


/* The shared access field may contain a case-sensitive technician code. */
#access_code {
    text-transform: none !important;
}


/* Official Schwartz Technologies logo in the header */
.corner-logo,
.brand-mark {
    display: none !important;
}

.brand-header {
    direction: ltr;
}

.brand-identity {
    direction: ltr;
    flex-direction: row;
}

.brand-logo {
    display: block;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: contain;
    object-position: center;
    border-radius: 11px;
    border: 1px solid rgba(118, 255, 242, 0.24);
    background: rgba(3, 16, 21, 0.82);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(85, 240, 220, 0.10);
}

.brand-identity > div {
    text-align: left;
    align-items: flex-start;
}

@media (max-width: 560px) {
    .brand-logo {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 9px;
    }
}