/* Sign-in screens (Components/Account/Pages) after DIGI-FRAME's account.css: brand stage left, card on the app canvas right.
   Everything is scoped under .login-root; colours are tokens so html[data-preload-theme] can swap them before first paint. */
.login-root {
    --brand: #047d59; --brand-600: #03684a; --brand-700: #02563d;
    --brand-tint: rgba(4, 125, 89, 0.03); --brand-ring: rgba(4, 125, 89, 0.15); --on-brand: #ffffff;
    --surface: #ffffff; --canvas: #f5f6f8; --field-bg: #ffffff; --rule-ink: rgba(27, 31, 39, 0.05);
    --ink: #1b1f27; --muted: #5a6272; --label: #3a4251; --placeholder: #aab2bd;
    --line: #e7e9ee; --line-input: #d9dce3; --line-hover: #c3c9d3;
    --err-bg: #fef2f2; --err-line: #fca5a5; --err-fg: #b91c1c; --err-text: #c0392b;
    --ok-bg: #ecfdf5; --ok-line: #6ee7b7; --ok-fg: #0e7a45;
    --login-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ui-scale: 1.3;
    zoom: var(--ui-scale);
    position: relative; display: flex; min-height: calc(100vh / var(--ui-scale));
    font-family: var(--app-font); color: var(--ink); background: var(--surface);
}
@media (max-height: 820px) { .login-root { --ui-scale: 1.15; } }
@media (max-height: 700px) { .login-root { --ui-scale: 1; } }
:where(.login-root), :where(.login-root) *, :where(.login-root) *::before, :where(.login-root) *::after { box-sizing: border-box; margin: 0; padding: 0; }
html:has(.login-root), body:has(.login-root) { height: 100%; min-height: 100vh; margin: 0; }
.login-root::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); pointer-events: none; z-index: 2; }
@keyframes df-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.login-root .login-left { flex: 1.05; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 64px; background: var(--surface); }
.login-root .login-left::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, var(--rule-ink) 0 1px, transparent 1px 28px);
    -webkit-mask-image: radial-gradient(64% 58% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 82%);
    mask-image: radial-gradient(64% 58% at 50% 48%, #000 0%, rgba(0, 0, 0, 0.34) 62%, transparent 82%);
}
.login-root .login-left::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--line); }
.login-root .left-inner { position: relative; z-index: 1; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 44px; animation: df-rise 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both; }
.login-root .brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.login-root .brand-word { font-family: var(--login-display); font-size: 64px; font-weight: 650; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.login-root .brand-word span { color: var(--brand); }
.login-root .brand-name { font-size: 13px; font-weight: 700; letter-spacing: 0.32em; color: var(--muted); text-transform: uppercase; }
.login-root .brand-tagline { margin-top: 10px; font-size: 15px; color: var(--muted); white-space: nowrap; }
/* Four corner brackets over a faint tint: the "recognised region" frame from DIGI-FRAME, holding a document glyph. */
.login-root .brand-figure {
    position: relative; width: 300px; height: 300px; flex: none; display: flex; align-items: center; justify-content: center;
    background-color: var(--brand-tint);
    background-image:
        linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)),
        linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-size: 34px 2px, 2px 34px, 34px 2px, 2px 34px, 34px 2px, 2px 34px, 34px 2px, 2px 34px;
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.login-root .brand-figure svg { width: 150px; height: 150px; color: var(--brand); }

.login-root .login-right { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: var(--canvas); padding: 48px 40px; }
.login-root .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 40px 36px 34px; animation: df-rise 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both; animation-delay: 0.07s; }
.login-root .card-word { display: none; font-family: var(--login-display); font-size: 34px; font-weight: 650; letter-spacing: -0.05em; color: var(--ink); margin-bottom: 4px; }
.login-root .card-word span { color: var(--brand); }
.login-root .card-head { margin-bottom: 30px; }
.login-root .eyebrow { display: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-600); margin-bottom: 10px; }
.login-root .card-head h1 { font-family: var(--login-display); font-size: 34px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); outline: none; }
.login-root .card-head p { margin-top: 10px; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.login-root .field { margin-bottom: 20px; }
.login-root .field > label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--label); margin-bottom: 7px; }
.login-root .field-input {
    width: 100%; height: 50px; background: var(--field-bg); border: 1px solid var(--line-input); border-radius: 3px; color: var(--ink);
    font-size: 1rem; padding: 0 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; margin: 0;
}
.login-root .field-input::placeholder { color: var(--placeholder); }
.login-root .field-input:hover { border-color: var(--line-hover); }
.login-root .field-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.login-root .field-input:-webkit-autofill, .login-root .field-input:-webkit-autofill:hover, .login-root .field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset; box-shadow: 0 0 0 1000px var(--field-bg) inset; caret-color: var(--ink);
}
.login-root .field-error { display: block; font-size: 0.8rem; color: var(--err-text); margin-top: 6px; }
.login-root .remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 26px; font-size: 0.88rem; font-weight: 400; color: var(--label); cursor: pointer; user-select: none; }
.login-root .remember-box { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.login-root .login-error { display: flex; align-items: center; gap: 9px; background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-fg); border-radius: 3px; padding: 12px 15px; font-size: 0.88rem; margin-bottom: 20px; }
.login-root .login-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-fg); border-radius: 3px; padding: 12px 15px; font-size: 0.88rem; margin-bottom: 20px; }
.login-root .login-hint { margin-top: -12px; margin-bottom: 20px; padding: 0 4px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.login-root .submit-btn {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; background: var(--brand); color: var(--on-brand);
    border: none; border-radius: 3px; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; font-family: inherit;
    transition: background 0.15s, transform 0.05s;
}
.login-root .submit-btn:hover { background: var(--brand-600); text-decoration: none; }
.login-root .submit-btn:active { background: var(--brand-700); transform: translateY(1px); }
.login-root .secondary-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 12px; border: 1px solid var(--line-input); border-radius: 3px; color: var(--ink); background: transparent; font-weight: 600; text-decoration: none; }
.login-root .secondary-btn:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.login-root .form-footer-links { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; font-size: 0.85rem; color: var(--muted); }
.login-root .form-footer-links a { color: var(--brand-600); font-weight: 600; }

html[data-preload-theme="dark"] .login-root {
    --brand: #0bbf85; --brand-600: #0aa974; --brand-700: #099565; --brand-tint: rgba(11, 191, 133, 0.05); --brand-ring: rgba(11, 191, 133, 0.22); --on-brand: #05231a;
    --surface: #1e2128; --canvas: #16181d; --field-bg: #16181d; --rule-ink: rgba(255, 255, 255, 0.05);
    --ink: #e6e9ee; --muted: #9aa3b2; --label: #b6bdc9; --placeholder: rgba(255, 255, 255, 0.28);
    --line: #2c313b; --line-input: #39404c; --line-hover: #4a5361;
    --err-bg: rgba(220, 38, 38, 0.11); --err-line: rgba(248, 113, 113, 0.40); --err-fg: #f5a3a3; --err-text: #f0a2a2;
    --ok-bg: rgba(9, 170, 118, 0.10); --ok-line: rgba(52, 211, 153, 0.36); --ok-fg: #6ee7b7;
}
@media (prefers-color-scheme: dark) {
    html:not([data-preload-theme]) .login-root {
        --brand: #0bbf85; --brand-600: #0aa974; --on-brand: #05231a; --surface: #1e2128; --canvas: #16181d; --field-bg: #16181d;
        --ink: #e6e9ee; --muted: #9aa3b2; --label: #b6bdc9; --line: #2c313b; --line-input: #39404c;
    }
}
@media (max-width: 1300px) {
    .login-root .login-left { display: none; }
    .login-root .login-right { padding: 32px 20px; }
    .login-root .card-word { display: block; }
    .login-root .card-head { text-align: center; margin-bottom: 26px; }
    .login-root .eyebrow { display: block; }
    .login-root .card-head h1 { font-size: 30px; }
}
@media (max-width: 620px) {
    .login-root { --ui-scale: 1.05; }
    .login-root .login-right { padding: 20px 14px; }
    .login-root .login-card { padding: 30px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) { .login-root .left-inner, .login-root .login-card { animation: none; } }

/* ---- Account management column (Components/Account/Shared/ManageLayout) */
:root { --acc-manage-width: 1200px; }
.acc-manage { max-width: var(--acc-manage-width); margin-inline: auto; }
.appbar--account-manage > .mud-toolbar { width: 100%; max-width: calc(var(--acc-manage-width) + 48px); margin-inline: auto; }
.acc-manage .acc-layout { display: flex; align-items: flex-start; gap: 1rem; }
.acc-manage .acc-sidebar { flex: 0 0 260px; max-width: 260px; }
.acc-nav .acc-nav-back .mud-nav-link { color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); box-shadow: inset 3px 0 0 var(--mud-palette-info); }
.acc-nav .acc-nav-back .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-info); }
.acc-nav .acc-nav-logout .mud-nav-link { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.acc-nav .acc-nav-logout .mud-nav-link:hover { background: var(--mud-palette-action-default-hover); }
.acc-manage .acc-content { flex: 1 1 auto; min-width: 0; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--df-radius-lg); }
@media (max-width: 959px) {
    .acc-manage .acc-layout { flex-direction: column; }
    .acc-manage .acc-sidebar { flex: 1 1 auto; max-width: none; width: 100%; }
    .acc-manage .acc-content { width: 100%; }
}
.acc-manage .acc-field { margin-bottom: 1.15rem; }
.acc-manage .acc-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 0 0 0.4rem; }
.acc-manage .acc-input {
    width: 100%; margin: 0; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--df-radius);
    color: var(--mud-palette-text-primary); font-size: 0.95rem; padding: 11px 13px; outline: none; font-family: inherit;
}
.acc-manage .acc-input:focus { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(9, 170, 118, 0.16); }
.acc-manage .acc-error, .acc-manage .validation-message { display: block; font-size: 0.78rem; color: var(--mud-palette-error); margin-top: 0.3rem; }
.acc-manage .acc-recovery-code { display: inline-block; font-family: 'Cascadia Code', Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.04em; background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px 12px; margin: 4px 0; color: var(--mud-palette-text-primary); }
.acc-manage .acc-recovery-code.acc-shared-key { white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.02em; padding: 6px 10px; max-width: 100%; }
.acc-manage .acc-recovery__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 0.35rem; }
.acc-manage .acc-recovery__copy { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.85rem; font-weight: 600; padding: 7px 14px; cursor: pointer; color: var(--mud-palette-primary); background: transparent; border: 1px solid var(--mud-palette-primary); border-radius: var(--df-radius-lg); }
.acc-manage .acc-recovery__copy[data-state="done"] { color: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.acc-manage .acc-recovery__copy[data-state="failed"] { color: var(--mud-palette-error); border-color: var(--mud-palette-error); }
.acc-manage .acc-recovery__status { display: block; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--mud-palette-error); }
.acc-manage .acc-recovery__status:empty { display: none; }
.acc-qr { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--df-radius-lg); }
.acc-qr svg { display: block; width: 184px; height: 184px; }