/* Identidade institucional do Login. Adaptado do protótipo aprovado; sem dependências Next/Tailwind. */

/* Institutional surface: deliberately independent from every authenticated theme source. */
html[data-rukia-surface="institutional"] {
  --login-ink: #081321; --login-ink-soft: #24364a; --login-paper: #f2f5f8;
  --login-white: #fff; --login-muted: #566578; --login-line: #cbd2da;
  --login-accent: #1976f3; --login-silver: #bcc7d3; --login-danger: #b3261e; --login-success: #146149;
  --login-font: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  --login-display: Georgia, "Times New Roman", serif; --login-radius: 2px;
  --background: var(--login-paper); --foreground: var(--login-ink); --card: var(--login-white);
  --card-foreground: var(--login-ink); --primary: var(--login-ink); --primary-foreground: var(--login-white);
  --secondary: #eceae4; --secondary-foreground: var(--login-ink); --muted: #eceae4;
  --muted-foreground: var(--login-muted); --accent: var(--login-accent); --accent-foreground: var(--login-ink);
  --destructive: var(--login-danger); --border: var(--login-line); --input: var(--login-line);
  --ring: #1976f3; --radius: var(--login-radius);
}
* { box-sizing: border-box; }
html[data-rukia-surface="institutional"], html[data-rukia-surface="institutional"] body { margin: 0; background: var(--login-paper); color: var(--login-ink); font-family: var(--login-font); }
button, input, select { font: inherit; } a { color: inherit; }

.login-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(440px,.88fr); background: var(--login-paper); }
.brand-stage { min-height: 100svh; padding: clamp(28px,4.2vw,68px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; background: linear-gradient(145deg,#07111d 0%,#0a1b2e 64%,#0b2440 100%); color: var(--login-white); }
.brand-stage::after { content: ""; position: absolute; width: min(34vw,540px); aspect-ratio: 1; right: -14%; bottom: -12%; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 80px #ffffff07,0 0 0 160px #ffffff05; pointer-events: none; }
.brand-topline { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.wordmark { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; font-weight: 800; letter-spacing: .16em; font-size: 15px; }
.wordmark-mark { width: 29px; height: 29px; position: relative; display: inline-block; }
.wordmark-mark i { display: block; position: absolute; width: 17px; height: 17px; transform: rotate(45deg); border: 2px solid currentColor; }
.wordmark-mark i:first-child { top: 2px; left: 2px; border-color: var(--login-silver); } .wordmark-mark i:last-child { bottom: 2px; right: 2px; border-color: var(--login-accent); }
.secure-label { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #ffffffa3; }
.secure-label svg { width: 14px; height: 14px; }
.brand-copy { max-width: 760px; position: relative; z-index: 1; padding: 9vh 0 4vh; }
.eyebrow,.form-kicker { margin: 0 0 18px; color: var(--login-silver); font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.brand-copy h1 { margin: 0; font-size: clamp(50px,5.6vw,94px); line-height: .96; letter-spacing: -.045em; font-weight: 600; }
.brand-copy h1 em { color: #4da0ff; font-family: var(--login-display); font-weight: 400; }
.brand-support { margin: clamp(28px,5vh,54px) 0 0; max-width: 510px; color: #ffffffad; font-size: clamp(16px,1.3vw,20px); line-height: 1.55; }
.brand-footer { display: flex; align-items: center; gap: 14px; color: #ffffff6b; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 1; }
.brand-rule { width: 56px; height: 1px; background: #ffffff40; }

.form-stage { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(34px,5vw,80px); background: var(--login-paper); }
.form-wrap { width: min(100%,440px); } .mobile-brand { display: none; } .form-heading { margin-bottom: 32px; }
.form-kicker { color: #2c5f9d; margin-bottom: 11px; }
.form-heading h2 { margin: 0; font-size: clamp(33px,3vw,46px); line-height: 1.06; letter-spacing: -.04em; font-weight: 680; }
.form-heading>p:last-child { margin: 13px 0 0; color: var(--login-muted); font-size: 16px; line-height: 1.55; }
form { display: grid; gap: 22px; } .field-group { display: grid; gap: 9px; }
.field-group label { font-size: 14px; font-weight: 700; color: var(--login-ink-soft); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.label-row a { font-size: 13px; color: var(--login-ink-soft); text-underline-offset: 3px; }
.field-group input { height: 54px; padding: 0 16px; border: 1px solid var(--login-line); border-radius: var(--login-radius); background: var(--login-white); color: var(--login-ink); box-shadow: none; font-size: 16px; }
.field-group input::placeholder { color: #787c79; } .field-group input:hover { border-color: #929590; }
.field-group input:focus-visible { border-color: var(--login-accent); box-shadow: 0 0 0 3px #1976f33d; outline: none; }
.field-group input[aria-invalid="true"] { border-color: var(--login-danger); box-shadow: 0 0 0 2px #b3261e21; }
.password-control { position: relative; } .password-control input { padding-right: 52px; }
.password-toggle { position: absolute; right: 4px; top: 4px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: transparent; color: var(--login-muted); cursor: pointer; border-radius: 1px; }
.password-toggle:hover { color: var(--login-ink); background: #e8edf3; } .password-toggle:focus-visible { outline: 3px solid #1976f35c; outline-offset: -2px; }
.password-toggle svg { width: 20px; height: 20px; }
.field-error { margin: 0; display: flex; gap: 7px; align-items: center; color: var(--login-danger); font-size: 13px; line-height: 1.4; }
.field-error svg { width: 15px; height: 15px; flex: 0 0 auto; }
.submit-button { margin-top: 4px; width: 100%; height: 56px; border: 1px solid #0b62cf; border-radius: var(--login-radius); background: var(--login-accent); color: var(--login-white); font-size: 15px; font-weight: 800; letter-spacing: .02em; box-shadow: none; cursor: pointer; }
.submit-button:hover { background: #0f66d9; } .submit-button:focus-visible { outline: 3px solid #6baeff; outline-offset: 3px; }
.submit-button:disabled { opacity: .72; cursor: wait; } .spin { animation: spin 900ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.status-card { margin: -9px 0 24px; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 15px 16px; border-left: 3px solid var(--login-danger); background: #fff2f0; color: #6d1b16; }
.status-card.status-success { border-color: var(--login-success); background: #eaf6f0; color: #11543d; }
.status-icon { width: 28px; height: 28px; border: 1px solid currentColor; display: grid; place-items: center; border-radius: 50%; }
.status-icon svg { width: 16px; height: 16px; } .status-card strong { display: block; font-size: 14px; line-height: 1.4; }
.status-card p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.scenario-panel { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--login-line); display: grid; gap: 8px; }
.scenario-panel label { font-size: 12px; color: var(--login-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.scenario-panel select { width: 100%; height: 42px; border: 1px solid var(--login-line); background: transparent; color: var(--login-ink); border-radius: var(--login-radius); padding: 0 10px; font-size: 14px; }
.scenario-panel select:focus-visible { outline: 3px solid #1976f352; outline-offset: 1px; }
.scenario-panel p { margin: 0; color: var(--login-muted); font-size: 12px; line-height: 1.45; }
.form-footer { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 34px; color: var(--login-muted); font-size: 12px; }
.form-footer a { text-underline-offset: 3px; }

@media (max-width:980px) {
  .login-shell { grid-template-columns: minmax(320px,.8fr) minmax(440px,1.2fr); } .brand-copy h1 { font-size: clamp(42px,6vw,62px); }
  .brand-support { font-size: 16px; } .brand-stage { padding: 34px; } .secure-label { display: none; } .form-stage { padding: 48px; }
}
@media (max-width:720px) {
  .login-shell { display: block; } .brand-stage { min-height: auto; height: 245px; padding: 28px 24px 26px; justify-content: flex-end; }
  .brand-stage .brand-topline,.brand-footer,.brand-support { display: none; } .brand-copy { padding: 0; } .brand-copy .eyebrow { margin-bottom: 10px; }
  .brand-copy h1 { font-size: clamp(37px,10.8vw,54px); line-height: .98; }
  .brand-stage::after { width: 270px; right: -90px; bottom: -110px; } .form-stage { min-height: calc(100svh - 245px); align-items: flex-start; padding: 0 24px 36px; }
  .form-wrap { width: 100%; } .mobile-brand { height: 72px; display: flex; align-items: center; justify-content: space-between; }
  .wordmark-dark { color: var(--login-ink); } .wordmark-dark .wordmark-mark { width: 25px; height: 25px; } .wordmark-dark .wordmark-mark i { width: 15px; height: 15px; }
  .secure-label-dark { display: inline-flex; color: var(--login-muted); font-size: 10px; } .form-heading { margin: 12px 0 26px; } .form-heading h2 { font-size: 34px; }
  .form-heading>p:last-child { font-size: 15px; } .field-group input { height: 52px; } .submit-button { height: 54px; } .scenario-panel { margin-top: 24px; }
}

/* V4 — final material study: warm porcelain / OLED black + controlled blue neon. */
html[data-rukia-surface="institutional"] {
  --login-ink: #251f19;
  --login-ink-soft: #493f36;
  --login-paper: #f2eadf;
  --login-white: #fffaf2;
  --login-muted: #70645a;
  --login-line: #b7a99b;
  --login-accent: #0878ff;
  --login-silver: #8c8177;
  --stage-fg: #271f18;
  --stage-muted: #695b50;
  --field-canvas: radial-gradient(circle at 72% 20%,#ffffffc4 0,transparent 24%),radial-gradient(circle at 14% 88%,#dfcdb8 0,transparent 34%),linear-gradient(135deg,#fbf6ee 0%,#f0e6d9 50%,#dfd0be 100%);
  --field-word: #725b4310;
  --field-line: #8b6f5028;
  --field-ring: #94734e0a;
  --field-glow: radial-gradient(circle,#ffffffb0 0,transparent 62%);
  --field-bg: #fffaf4de;
  --glass-bg: #fffaf1d9;
  --glass-line: #0878ff8f;
  --glass-shadow: 0 0 0 1px #ffffffd9 inset,0 0 26px #0878ff1f,0 42px 120px #66503a29;
  --accent-glow: #0878ff38;
  --background: var(--login-paper);
  --foreground: var(--login-ink);
  --card: var(--login-white);
  --card-foreground: var(--login-ink);
  --primary: var(--login-accent);
  --primary-foreground: #fff;
  --muted-foreground: var(--login-muted);
  --border: var(--login-line);
  --input: var(--login-line);
  --ring: var(--login-accent);
}

.wordmark-mark { width: 30px; height: 30px; clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); background: linear-gradient(145deg,var(--login-silver),var(--login-accent)); filter: drop-shadow(0 0 6px #0878ff5e); }
.wordmark-mark::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: var(--logo-core); }
.wordmark-mark::after { content: ""; position: absolute; inset: 8px; clip-path: inherit; background: var(--login-accent); box-shadow: 0 0 12px var(--login-accent); }
.wordmark-mark i { display: none; }
.field-group input,.scenario-panel select { border-color: #0878ff52; box-shadow: 0 0 0 1px #ffffffad inset,0 0 12px #0878ff0d; }
.field-group input:hover,.scenario-panel select:hover { border-color: #0878ff8f; }
.field-group input:focus-visible,.scenario-panel select:focus-visible { border-color: #1684ff; box-shadow: 0 0 0 1px #1684ff,0 0 18px #0878ff52; }
.submit-button { border-color: #5babff; background: linear-gradient(135deg,#0878ff,#3295ff); box-shadow: 0 0 0 1px #ffffff3b inset,0 0 20px #0878ff42,0 12px 28px #0878ff29; }
.submit-button:hover { background: linear-gradient(135deg,#006fea,#278eff); box-shadow: 0 0 0 1px #ffffff52 inset,0 0 28px #0878ff59,0 14px 30px #0878ff33; }
.pulse-dot { background: #1684ff; box-shadow: 0 0 0 5px #1684ff1c,0 0 15px #0878ffaa; }

@media (prefers-color-scheme:dark) {
  html[data-rukia-surface="institutional"] {
    --login-ink: #f2f5f8;
    --login-ink-soft: #d2dae3;
    --login-paper: #000000;
    --login-white: #07090c;
    --login-muted: #9ca8b6;
    --login-line: #26313d;
    --login-accent: #1684ff;
    --login-silver: #aab5c2;
    --stage-fg: #f4f7fa;
    --stage-muted: #a7b1bd;
    --field-canvas: radial-gradient(circle at 72% 20%,#06244a 0,transparent 28%),radial-gradient(circle at 10% 90%,#03152e 0,transparent 36%),#000000;
    --field-word: #1684ff0d;
    --field-line: #248dff38;
    --field-ring: #1684ff0a;
    --field-glow: radial-gradient(circle,#0878ff2e 0,transparent 63%);
    --field-bg: #04070be8;
    --glass-bg: #030609de;
    --glass-line: #1684ff9e;
    --glass-shadow: 0 0 0 1px #ffffff0a inset,0 0 36px #0878ff33,0 54px 150px #000000;
    --accent-glow: #1684ff55;
    --background: #000000;
    --foreground: var(--login-ink);
    --card: var(--login-white);
    --card-foreground: var(--login-ink);
    --primary: var(--login-accent);
    --primary-foreground: #ffffff;
    --muted-foreground: var(--login-muted);
    --border: var(--login-line);
    --input: var(--login-line);
    --ring: var(--login-accent);
    --logo-core: #000000;
  }
  .form-stage { background: transparent; }
  .field-group input,.scenario-panel select { color: var(--login-ink); border-color: #1684ff59; box-shadow: 0 0 0 1px #ffffff05 inset,0 0 14px #0878ff14; }
  .field-group input:hover,.scenario-panel select:hover { border-color: #1684ff9e; }
  .password-toggle:hover { background: #0b1118; }
}

@media (prefers-color-scheme:light) {
  html[data-rukia-surface="institutional"] { --logo-core: #f7efe4; }
  .form-stage { background: transparent; }
  .form-kicker { color: #085ebf; }
  .brand-copy h1 em { color: #0878ff; }
}
@media (max-width:390px) { .brand-stage { height: 216px; } .form-stage { min-height: calc(100svh - 216px); padding-inline: 20px; } .brand-copy h1 { font-size: 37px; } .form-heading h2 { font-size: 31px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* V2 — institutional light/dark pair, selected only by the operating system. */
html[data-rukia-surface="institutional"] {
  color-scheme: light dark;
  --login-ink: #0a1b30;
  --login-ink-soft: #2f455d;
  --login-paper: #edf4fb;
  --login-white: #ffffff;
  --login-muted: #566b80;
  --login-line: #bdcad8;
  --login-accent: #1268e8;
  --login-silver: #72859a;
  --login-radius: 12px;
  --stage-fg: #0a2443;
  --stage-muted: #3f5f7f;
  --stage-bg: radial-gradient(circle at 78% 20%,#c7e0ff 0,transparent 30%),linear-gradient(145deg,#f8fbff 0%,#dfeeff 54%,#cbdff5 100%);
  --stage-orbit: #44698e2e;
  --field-bg: #ffffffcc;
  --panel-shadow: 0 30px 80px #123a6817;
}

.login-shell { grid-template-columns: minmax(0,1.04fr) minmax(440px,.96fr); }
.brand-stage { color: var(--stage-fg); background: var(--stage-bg); }
.brand-stage::after { width: min(40vw,620px); right: -12%; bottom: -28%; border-color: var(--stage-orbit); box-shadow: 0 0 0 72px #4473a30a,0 0 0 144px #4473a30a; }
.wordmark { letter-spacing: .12em; }
.secure-label { color: var(--stage-muted); }
.eyebrow { color: #315d89; }
.brand-copy { max-width: 690px; }
.brand-copy h1 { font-size: clamp(54px,5.4vw,88px); line-height: .98; font-weight: 650; letter-spacing: -.055em; }
.brand-copy h1 em { color: var(--login-accent); font-family: var(--login-font); font-style: normal; font-weight: 720; }
.brand-support { max-width: 520px; color: var(--stage-muted); }
.brand-footer { color: var(--stage-muted); letter-spacing: .08em; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--login-accent); box-shadow: 0 0 0 5px #1268e81c; }
.form-stage { position: relative; background: color-mix(in srgb,var(--login-paper) 91%,var(--login-white)); }
.form-stage::before { content: ""; position: absolute; inset: 7% 8%; border-radius: 32px; background: #ffffff70; box-shadow: var(--panel-shadow); border: 1px solid #ffffff99; pointer-events: none; }
.form-wrap { position: relative; z-index: 1; }
.form-heading h2 { font-weight: 700; letter-spacing: -.035em; }
.field-group input { border-radius: var(--login-radius); background: var(--field-bg); }
.password-toggle { border-radius: 9px; }
.submit-button { border-radius: var(--login-radius); box-shadow: 0 10px 24px #1268e82e; }
.status-card { border: 1px solid color-mix(in srgb,currentColor 18%,transparent); border-left-width: 3px; border-radius: var(--login-radius); }
.scenario-panel select { border-radius: 9px; background: var(--field-bg); }

@media (prefers-color-scheme: dark) {
  html[data-rukia-surface="institutional"] {
    --login-ink: #edf5ff;
    --login-ink-soft: #cbd8e6;
    --login-paper: #07111d;
    --login-white: #0f2134;
    --login-muted: #9bacc0;
    --login-line: #30455d;
    --login-accent: #4c98ff;
    --login-silver: #aebdcd;
    --stage-fg: #f2f7fc;
    --stage-muted: #adbdcd;
    --stage-bg: radial-gradient(circle at 72% 18%,#123f71 0,transparent 32%),linear-gradient(145deg,#091522 0%,#0b2239 58%,#0d2e50 100%);
    --stage-orbit: #a9c8ea2e;
    --field-bg: #0d1d2fd9;
    --panel-shadow: 0 30px 90px #0000004d;
    --background: var(--login-paper);
    --foreground: var(--login-ink);
    --card: var(--login-white);
    --card-foreground: var(--login-ink);
    --primary: var(--login-accent);
    --primary-foreground: #fff;
    --muted-foreground: var(--login-muted);
    --border: var(--login-line);
    --input: var(--login-line);
    --ring: var(--login-accent);
  }
  .eyebrow,.form-kicker { color: #8bbcff; }
  .brand-copy h1 em { color: #62a5ff; }
  .form-stage { background: #081421; }
  .form-stage::before { background: #0c1b2bbd; border-color: #ffffff0d; }
  .field-group input { color: var(--login-ink); }
  .field-group input::placeholder { color: #8597a9; }
  .password-toggle:hover { background: #172a3e; }
  .scenario-panel select { color: var(--login-ink); }
  .status-card { background: #341b20; color: #ffb4ad; }
  .status-card.status-success { background: #102c24; color: #8bd7bb; }
}

@media (max-width:980px) {
  .login-shell { grid-template-columns: minmax(310px,.85fr) minmax(440px,1.15fr); }
  .form-stage::before { inset: 4% 5%; }
}
@media (max-width:720px) {
  .brand-stage { height: 220px; }
  .brand-copy h1 { font-size: clamp(38px,10.6vw,50px); }
  .form-stage { min-height: calc(100svh - 220px); }
  .form-stage::before { display: none; }
  .mobile-brand { height: 68px; }
}
@media (max-width:390px) {
  .brand-stage { height: 200px; }
  .form-stage { min-height: calc(100svh - 200px); }
  .brand-copy h1 { font-size: 36px; }
}

/* V3 — Campo RUKIA: one immersive surface instead of a conventional split screen. */
@media (min-width:721px) {
  .login-shell { min-height: 100svh; display: block; position: relative; overflow: hidden; isolation: isolate; background: var(--field-canvas); }
  .login-shell::before { content: "RUKIA"; position: absolute; z-index: -1; left: 3.5vw; top: 50%; transform: translateY(-53%); color: var(--field-word); font-size: clamp(150px,21vw,360px); line-height: .75; font-weight: 900; letter-spacing: -.085em; white-space: nowrap; pointer-events: none; }
  .login-shell::after { content: ""; position: absolute; z-index: -1; width: 72vw; height: 72vw; left: -21vw; top: -42vw; border: 1px solid var(--field-line); border-radius: 50%; box-shadow: 0 0 0 8vw var(--field-ring),0 0 0 16vw var(--field-ring); pointer-events: none; }

  .brand-stage { min-height: 100svh; width: 100%; padding: clamp(32px,4vw,64px); background: transparent; overflow: visible; color: var(--stage-fg); }
  .brand-stage::before { content: ""; position: absolute; z-index: -1; width: 55vw; height: 55vw; left: 8vw; top: 10vh; border-radius: 50%; background: var(--field-glow); filter: blur(4px); opacity: .9; pointer-events: none; }
  .brand-stage::after { width: 42vw; max-width: none; right: auto; left: 8vw; bottom: -29vw; border-color: var(--field-line); box-shadow: 0 0 0 5vw var(--field-ring),0 0 0 10vw var(--field-ring); }
  .brand-topline { align-items: flex-start; }
  .brand-copy { max-width: 42vw; padding: 0; margin: auto 0 clamp(82px,10vh,110px); }
  .brand-copy h1 { font-size: clamp(70px,8vw,132px); line-height: .78; letter-spacing: -.075em; }
  .brand-copy h1 em { display: inline-block; padding-left: .42em; color: var(--login-accent); text-shadow: 0 10px 34px var(--accent-glow); }
  .brand-support { max-width: 470px; margin-top: 38px; font-size: 17px; }
  .brand-footer { position: absolute; left: auto; right: clamp(32px,4vw,64px); bottom: 32px; }

  .form-stage { position: absolute; inset: 0; min-height: 100svh; display: grid; grid-template-columns: 1fr; place-items: center end; padding: 36px clamp(38px,6vw,96px); background: transparent; pointer-events: none; }
  .form-stage::before { display: none; }
  .form-wrap { width: min(44vw,500px); justify-self: end; max-height: calc(100svh - 72px); overflow: auto; scrollbar-width: none; padding: clamp(34px,4vw,52px); border: 1px solid var(--glass-line); border-radius: 32px; background: var(--glass-bg); box-shadow: var(--glass-shadow); backdrop-filter: blur(28px) saturate(135%); pointer-events: auto; }
  .form-wrap::-webkit-scrollbar { display: none; }
  .form-heading { margin-bottom: 26px; }
  .form-heading h2 { font-size: clamp(32px,3.2vw,46px); }
  form { gap: 18px; }
  .field-group { gap: 7px; }
  .field-group input { height: 51px; }
  .submit-button { height: 52px; }
  .scenario-panel { margin-top: 22px; padding-top: 18px; }
  .form-footer { margin-top: 24px; }
}

html[data-rukia-surface="institutional"] {
  --field-canvas: radial-gradient(circle at 72% 20%,#b9d8ff 0,transparent 25%),radial-gradient(circle at 16% 86%,#d8e9fc 0,transparent 34%),linear-gradient(135deg,#f9fcff 0%,#e4effa 48%,#cfdef0 100%);
  --field-word: #174d8810;
  --field-line: #365d8526;
  --field-ring: #2f6daf08;
  --field-glow: radial-gradient(circle,#5fa7ff42 0,transparent 63%);
  --accent-glow: #1268e82b;
  --glass-bg: #f8fbffcc;
  --glass-line: #ffffffde;
  --glass-shadow: 0 40px 120px #173d6828,0 3px 14px #173d6814;
}

@media (prefers-color-scheme:dark) {
  html[data-rukia-surface="institutional"] {
    --field-canvas: radial-gradient(circle at 72% 20%,#143f714f 0,transparent 27%),radial-gradient(circle at 10% 90%,#123259 0,transparent 38%),linear-gradient(135deg,#050c15 0%,#08182a 48%,#07111d 100%);
    --field-word: #6aaaff0b;
    --field-line: #a7c9ed20;
    --field-ring: #5798df0a;
    --field-glow: radial-gradient(circle,#1268e835 0,transparent 64%);
    --accent-glow: #4c98ff3d;
    --glass-bg: #0a1827c7;
    --glass-line: #b9d7f229;
    --glass-shadow: 0 50px 140px #0000008f,0 2px 16px #00000059;
  }
}

@media (max-width:720px) {
  .login-shell { position: relative; overflow: hidden; background: var(--field-canvas); }
  .brand-stage { height: 230px; background: transparent; }
  .brand-stage::after { width: 300px; right: -86px; bottom: -155px; border-color: var(--field-line); box-shadow: 0 0 0 50px var(--field-ring),0 0 0 100px var(--field-ring); }
  .brand-copy h1 { font-size: clamp(44px,12vw,54px); line-height: .83; letter-spacing: -.065em; }
  .brand-copy h1 em { color: var(--login-accent); font-style: normal; font-weight: 750; padding-left: .42em; }
  .brand-copy .eyebrow { margin-bottom: 15px; }
  .form-stage { min-height: calc(100svh - 230px); background: color-mix(in srgb,var(--login-paper) 91%,transparent); border-radius: 28px 28px 0 0; margin-top: -18px; position: relative; z-index: 2; backdrop-filter: blur(22px); }
  .form-wrap { padding-bottom: 12px; }
}

/* Canonical institutional theme values — keep last so legacy prototype layers cannot override them. */
html[data-rukia-surface="institutional"] {
  --login-ink:#251f19; --login-ink-soft:#493f36; --login-paper:#f2eadf; --login-white:#fffaf2;
  --login-muted:#70645a; --login-line:#b7a99b; --login-accent:#0878ff; --login-silver:#8c8177;
  --stage-fg:#271f18; --stage-muted:#695b50; --field-bg:#fffaf4de; --logo-core:#f7efe4;
  --field-canvas:radial-gradient(circle at 72% 20%,#ffffffc4 0,transparent 24%),radial-gradient(circle at 14% 88%,#dfcdb8 0,transparent 34%),linear-gradient(135deg,#fbf6ee 0%,#f0e6d9 50%,#dfd0be 100%);
  --field-word:#725b4310; --field-line:#8b6f5028; --field-ring:#94734e0a;
  --field-glow:radial-gradient(circle,#ffffffb0 0,transparent 62%); --accent-glow:#0878ff38;
  --glass-bg:#fffaf1d9; --glass-line:#0878ff8f;
  --glass-shadow:0 0 0 1px #ffffffd9 inset,0 0 26px #0878ff1f,0 42px 120px #66503a29;
  --background:var(--login-paper); --foreground:var(--login-ink); --card:var(--login-white);
  --card-foreground:var(--login-ink); --primary:var(--login-accent); --primary-foreground:#fff;
  --muted-foreground:var(--login-muted); --border:var(--login-line); --input:var(--login-line); --ring:var(--login-accent);
}
@media (prefers-color-scheme:dark) {
  html[data-rukia-surface="institutional"] {
    --login-ink:#f2f5f8; --login-ink-soft:#d2dae3; --login-paper:#000; --login-white:#07090c;
    --login-muted:#9ca8b6; --login-line:#26313d; --login-accent:#1684ff; --login-silver:#aab5c2;
    --stage-fg:#f4f7fa; --stage-muted:#a7b1bd; --field-bg:#04070be8; --logo-core:#000;
    --field-canvas:radial-gradient(circle at 72% 20%,#04152b 0,transparent 25%),radial-gradient(circle at 10% 90%,#020d1c 0,transparent 32%),#000;
    --field-word:#1684ff0d; --field-line:#248dff38; --field-ring:#1684ff0a;
    --field-glow:radial-gradient(circle,#0878ff24 0,transparent 60%); --accent-glow:#1684ff55;
    --glass-bg:#030609e8; --glass-line:#1684ff9e;
    --glass-shadow:0 0 0 1px #ffffff0a inset,0 0 36px #0878ff33,0 54px 150px #000;
    --background:#000; --foreground:var(--login-ink); --card:var(--login-white);
    --card-foreground:var(--login-ink); --primary:var(--login-accent); --primary-foreground:#fff;
    --muted-foreground:var(--login-muted); --border:var(--login-line); --input:var(--login-line); --ring:var(--login-accent);
  }
  .form-stage { background:transparent; }
}

/* Provisional R monogram. Brand exploration continues separately. */
.wordmark-mark { width: 30px; height: 34px; overflow: visible; clip-path: none; background: transparent; filter: none; }
.wordmark-mark::before { content: "R"; position: absolute; inset: auto; left: 0; top: -2px; clip-path: none; background: linear-gradient(145deg,var(--login-silver) 0 18%,var(--login-accent) 42% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Arial Black,Arial,sans-serif; font-size: 31px; font-weight: 900; line-height: 1; letter-spacing: -.1em; text-shadow: 0 0 10px #0878ff38; }
.wordmark-mark::after { display: none; }

@media (min-width:721px) {
  .form-wrap { width:min(52vw,560px); }
}

@media (min-width:721px) and (max-width:1100px) {
  .brand-copy { max-width:36vw; }
  .brand-copy h1 { font-size:clamp(58px,7vw,76px); }
  .brand-support { max-width:34vw; }
}

.brand-copy h1 .message-line { display:block; white-space:nowrap; }
.brand-copy h1 em.message-line { padding-left:0; }

@media (min-width:721px) {
  .brand-copy { max-width:44vw; }
  .brand-copy h1 { font-size:clamp(48px,5.4vw,80px); line-height:.92; letter-spacing:-.06em; }
}

@media (max-width:720px) {
  .brand-copy h1 { font-size:clamp(35px,9.4vw,43px); line-height:.91; }
  .brand-copy h1 .message-line { white-space:nowrap; }
  .brand-support { margin-top:24px; }
}

/* Wider access surface and a dedicated blocking state for concurrent sessions. */
@media (min-width:721px) {
  .form-wrap { width:min(55vw,600px); }
}

@media (min-width:721px) and (max-width:1100px) {
  .brand-copy { max-width:38vw; }
  .brand-copy h1 { font-size:clamp(44px,4.8vw,54px); }
  .brand-support { max-width:36vw; }
}

.session-takeover { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; padding:30px; border:2px solid #ff6068; border-radius:20px; background:linear-gradient(145deg,#3b0d14f2,#19070bf5); color:#fff; box-shadow:0 0 0 1px #ffbcc01f inset,0 0 34px #ff303d38; outline:none; }
.session-takeover::after { content:""; position:absolute; width:170px; height:170px; right:-74px; top:-74px; border:1px solid #ff8a904f; border-radius:50%; box-shadow:0 0 0 28px #ff60680a,0 0 0 56px #ff606807; pointer-events:none; }
.session-alert-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:26px; border-radius:50%; background:#ff6068; color:#20080b; box-shadow:0 0 24px #ff606875; }
.session-alert-icon svg { width:30px; height:30px; stroke-width:2.5; }
.session-kicker { margin:0 0 8px; color:#ffb8bc; font-size:12px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.session-takeover h3 { max-width:420px; margin:0; color:#fff; font-size:clamp(30px,3vw,42px); line-height:1.02; letter-spacing:-.04em; }
.session-message { max-width:460px; margin:18px 0 28px; color:#ffdadd; font-size:17px; line-height:1.55; }
.session-primary { width:100%; height:54px; border:1px solid #77b9ff; border-radius:12px; background:linear-gradient(135deg,#0878ff,#3295ff); color:#fff; font-weight:800; box-shadow:0 0 22px #0878ff52; }
.session-secondary { align-self:center; margin:18px 0 0; border:0; background:transparent; color:#fff; font-size:14px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.session-secondary:focus-visible { outline:3px solid #fff; outline-offset:4px; border-radius:2px; }
.session-takeover small { align-self:center; margin-top:20px; color:#dbaeb1; font-size:12px; text-align:center; }

@media (prefers-color-scheme:light) {
  .session-takeover { background:linear-gradient(145deg,#fff8f5,#ffecea); color:#451014; border-color:#c52d36; box-shadow:0 0 0 1px #fff inset,0 0 30px #c52d3626; }
  .session-alert-icon { background:#c52d36; color:#fff; box-shadow:0 0 22px #c52d3647; }
  .session-kicker { color:#9c2028; }
  .session-takeover h3 { color:#451014; }
  .session-message { color:#6f2b30; }
  .session-secondary { color:#6b2429; }
  .session-secondary:focus-visible { outline-color:#0878ff; }
  .session-takeover small { color:#7c4c50; }
}

@media (max-width:720px) {
  .brand-stage { display:none!important; }
  .login-shell { min-height:100svh; background:var(--login-paper); }
  .form-stage { min-height:100svh; margin:0; padding:0 24px 36px; border-radius:0; background:var(--login-paper); backdrop-filter:none; }
  .form-wrap { width:100%; }
  .session-takeover { padding:24px 20px; }
  .session-alert-icon { margin-bottom:22px; }
  .session-takeover h3 { font-size:32px; }
  .session-message { font-size:16px; }
}

/* Calm blue interruption states: session action and confirmed identity. */
@media (min-width:721px) {
  .form-wrap { width:min(58vw,640px); }
}
@media (min-width:721px) and (max-width:1100px) {
  .brand-copy { max-width:34vw; }
  .brand-copy h1 { font-size:clamp(40px,4.25vw,48px); }
  .brand-support { max-width:32vw; }
}

.session-takeover { border-color:#4aa3ff; background:linear-gradient(145deg,#071d3f,#020b19); color:#fff; box-shadow:0 0 0 1px #9bd0ff1c inset,0 0 38px #0878ff3d; }
.session-takeover::after { border-color:#63b1ff52; box-shadow:0 0 0 28px #1684ff0b,0 0 0 56px #1684ff08; }
.session-alert-icon { background:#258cff; color:#001126; box-shadow:0 0 25px #1684ff8a; }
.session-kicker { color:#94caff; }
.session-message { color:#d7ebff; }
.session-takeover small { color:#9eb6d0; }

.success-takeover { border-color:#36c9c0; background:linear-gradient(145deg,#073733,#031816); box-shadow:0 0 0 1px #a5fff91a inset,0 0 38px #25bcb33d; }
.success-takeover::after { border-color:#65e0d852; box-shadow:0 0 0 28px #36c9c00b,0 0 0 56px #36c9c008; }
.success-takeover .success-icon { background:#38d0c7; color:#03201e; box-shadow:0 0 25px #38d0c78c; }
.success-takeover .session-kicker { color:#91eee8; }
.success-takeover .session-message { color:#d4fbf8; margin-bottom:26px; }
.success-takeover small { color:#9dc8c5; }
.success-progress { width:100%; height:8px; overflow:hidden; border:1px solid #53d8d052; border-radius:99px; background:#02100f; }
.success-progress span { display:block; width:45%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#21aaa2,#62ebe3); box-shadow:0 0 16px #38d0c7; animation:success-load 1.65s ease-in-out infinite alternate; }
@keyframes success-load { from { transform:translateX(-12%); } to { transform:translateX(130%); } }

@media (prefers-color-scheme:light) {
  .session-takeover { background:linear-gradient(145deg,#f7fbff,#e6f2ff); color:#09294d; border-color:#1678dc; box-shadow:0 0 0 1px #fff inset,0 0 30px #0878ff2b; }
  .session-alert-icon { background:#1678dc; color:#fff; box-shadow:0 0 22px #0878ff4d; }
  .session-kicker { color:#075cad; }
  .session-takeover h3 { color:#09294d; }
  .session-message { color:#284f78; }
  .session-secondary { color:#164b82; }
  .session-takeover small { color:#547391; }
  .success-takeover { background:linear-gradient(145deg,#f5fffd,#e2f8f5); color:#063b37; border-color:#168a83; box-shadow:0 0 0 1px #fff inset,0 0 30px #20a39b29; }
  .success-takeover .success-icon { background:#168a83; color:#fff; }
  .success-takeover .session-kicker { color:#0b706a; }
  .success-takeover h3 { color:#063b37; }
  .success-takeover .session-message { color:#285d59; }
  .success-takeover small { color:#527975; }
  .success-progress { border-color:#168a8352; background:#d5efec; }
}

.password-control input { width: 100%; }
.submit-button { color: #071321; }
.label-row { flex-wrap: wrap; gap: 0 12px; }
.recovery-link { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-width: 44px; min-height: 44px; border: 0; padding: 8px 10px; background: transparent; color: var(--login-ink-soft); font-size: 13px; line-height: 1.3; text-align: center; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; cursor: pointer; }
.recovery-link:hover { color: var(--login-accent); }
.recovery-link:focus-visible,.recovery-back:focus-visible { outline: 3px solid var(--login-accent); outline-offset: 3px; }
/* The recovery heading also receives scripted focus after pointer activation. */
.form-heading h2[tabindex="-1"]:focus { outline: 3px solid var(--login-accent); outline-offset: 3px; }
.recovery-back { display: inline-flex; align-items: center; justify-content: center; align-self: center; max-width: 100%; min-width: 44px; min-height: 44px; border: 0; padding: 8px 12px; background: transparent; color: var(--login-ink-soft); text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.submit-button svg { width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; }
@media (prefers-reduced-motion: reduce) {
  .login-shell *, .login-shell *::before, .login-shell *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .brand-copy { max-width: 42vw; }
  .brand-copy h1 { font-size: clamp(45px, 4vw, 54px); }
  .form-wrap { width: min(48vw, 540px); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .login-shell { display: block; overflow: visible; }
  .brand-stage { min-height: 0; height: auto; padding: 32px 32px 20px; }
  .brand-copy { max-width: 100%; margin: 42px 0 0; }
  .brand-copy h1 { max-width: 100%; font-size: clamp(39px, 5.6vw, 58px); line-height: 1; }
  .brand-support { max-width: 100%; margin-top: 16px; }
  .brand-footer { display: none; }
  .form-stage { position: relative; inset: auto; min-height: 0; display: block; padding: 0 32px 48px; pointer-events: auto; }
  .form-wrap { width: min(100%, 600px); max-height: none; margin: 0 auto; }
}