/* Sculpted glass entrance in the original blue/cyan brand palette. */
.auth-screen {
  --auth-ink: #0b1934;
  --auth-muted: #65728a;
  --auth-gold: #245de8;
  --auth-gold-light: #28d9ce;
  --auth-line: #7b9ac638;
  --auth-card-top: #ffffffde;
  --auth-card-bottom: #f4f7ffd4;
  --auth-field: #f8faffc9;
  --auth-field-line: #91acd448;
  --auth-input-text: #0b1934;
  --auth-tabs: #245de812;
  --auth-tab-selected: #fffffff0;
  --auth-background: #f4f7ff;
  --auth-ribbon-opacity: .42;
  --auth-ribbon-filter: saturate(.85) contrast(.9);
  position: relative;
  isolation: isolate;
  color: var(--auth-ink);
  background: radial-gradient(ellipse at 52% 18%, #ffffffcc, transparent 58%),
    radial-gradient(ellipse at 20% 92%, #6da8ef26, transparent 45%), var(--auth-background);
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  column-gap: clamp(36px, 5vw, 84px);
  padding-inline: max(40px, calc((100vw - 1360px) / 2));
}

:root[data-theme=night] .auth-screen {
  color-scheme: dark;
  --auth-ink: #e6edf9;
  --auth-muted: #adbed3;
  --auth-gold: #99bfff;
  --auth-gold-light: #28d9ce;
  --auth-line: #91b7ea30;
  --auth-card-top: #142742ca;
  --auth-card-bottom: #0d1c32e8;
  --auth-field: #0c1a2eb8;
  --auth-field-line: #9fbbea33;
  --auth-input-text: #e6edf9;
  --auth-tabs: #0612284f;
  --auth-tab-selected: #ffffff10;
  --auth-background: #091426;
  --auth-ribbon-opacity: .9;
  --auth-ribbon-filter: saturate(.95);
  background: radial-gradient(ellipse at 20% 16%, #245de821, transparent 46%),
    radial-gradient(ellipse at 77% 76%, #28d9ce12, transparent 46%), var(--auth-background);
}

.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url("/assets/obsidian-ribbons.svg") center / cover no-repeat;
  opacity: var(--auth-ribbon-opacity);
  filter: var(--auth-ribbon-filter);
}

.auth-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #f4f7ff35 38%, #f4f7ff4a 69%, transparent);
}

:root[data-theme=night] .auth-screen::after {
  background: linear-gradient(90deg, #09142608, #09142661 35%, #09142640 68%, #09142612);
}

:root .auth-screen .portal-header {
  border-color: var(--auth-line);
  min-height: 100px;
}

:root .auth-screen .portal-header::before,
:root .auth-screen .portal-header::after { display: none; }

:root .auth-screen .portal-header .brand { color: var(--auth-ink); }
:root .auth-screen .portal-header .brand small { color: var(--auth-muted); }

:root .auth-screen .portal-home-link { color: var(--auth-muted); }
:root .auth-screen .portal-home-link span { color: var(--auth-gold); }
:root .auth-screen .portal-home-link:hover { color: var(--auth-ink); }
:root .auth-screen .portal-header .theme-toggle {
  color: var(--auth-ink);
  border-color: var(--auth-line);
  background: var(--auth-tabs);
  box-shadow: inset 0 1px 0 #ffffff12;
}
:root .auth-screen .portal-header .theme-toggle:hover { border-color: var(--auth-gold); background: var(--auth-tab-selected); }

:root .auth-screen .auth-story {
  padding: 58px 0 35px;
  background: none;
  min-width: 0;
}

:root .auth-screen .auth-story-main { padding: 0; }
:root .auth-screen .eyebrow { color: var(--auth-gold); font-weight: 600; }
:root .auth-screen .auth-story h1 {
  color: var(--auth-ink);
  font-family: inherit;
  font-size: clamp(40px, 3.7vw, 58px);
  line-height: 1.16;
  font-weight: 450;
  letter-spacing: -.045em;
  margin: 23px 0;
  text-wrap: balance;
}
:root .auth-screen .auth-story h1 em { color: var(--auth-gold); font-style: normal; font-weight: 450; }
:root .auth-screen .auth-story-main > p { color: var(--auth-muted); font-size: 16px; line-height: 1.85; }
:root .auth-screen .story-features { border-color: var(--auth-line); gap: 20px; padding-top: 23px; }
:root .auth-screen .story-features span { color: var(--auth-gold); font-variant-numeric: tabular-nums; }
:root .auth-screen .story-features p { color: var(--auth-muted); }
:root .auth-screen .story-features strong { color: var(--auth-ink); }
:root .auth-screen .auth-story-foot { color: var(--auth-muted); }

/* The familiar shield stays, with quieter metallic framing and smoked cards. */
:root .auth-screen .auth-visual { height: 195px; margin-block: 20px 16px; }
:root .auth-screen .auth-visual::before { background: radial-gradient(ellipse, #28d9ce22, transparent 65%); }
:root .auth-screen .auth-grid-plane { opacity: .45; background-image: linear-gradient(#77bde022 1px, transparent 1px), linear-gradient(90deg, #77bde022 1px, transparent 1px); }
:root .auth-screen .auth-orbit { border-color: var(--auth-line); }
:root .auth-screen .auth-orbit-two { border-color: #28d9ce40; }
:root .auth-screen .auth-shield { filter: drop-shadow(0 14px 18px #00000038); }
:root .auth-screen .auth-light-node { background: #28d9ce; box-shadow: 0 0 10px #28d9ce40; }
:root .auth-screen .auth-light-node-two { background: #ffb45e; box-shadow: 0 0 8px #ffb45e40; }
:root .auth-screen .auth-float-card {
  color: var(--auth-ink);
  border-color: var(--auth-line);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--auth-card-top), var(--auth-card-bottom));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #ffffff20, 0 15px 32px #00000017;
}
:root .auth-screen .auth-float-card svg { color: var(--auth-gold); }

:root .auth-screen .auth-panel { padding: 55px 0 28px; background: none; }
:root .auth-screen .auth-card {
  position: relative;
  isolation: isolate;
  color: var(--auth-ink);
  max-width: 490px;
  padding: 38px 39px 32px;
  border: 1px solid var(--auth-line);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--auth-card-top), var(--auth-card-bottom));
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  backdrop-filter: blur(24px) saturate(1.08);
  box-shadow: inset 0 1px 0 #ffffff6b, inset 0 -1px 0 #ffffff20, 0 28px 70px #153a7223, 0 4px 12px #153a7210;
}
:root[data-theme=night] .auth-screen .auth-card {
  box-shadow: inset 0 1px 0 #b9dfff1c, inset 0 -1px 0 #ffffff06, 0 36px 90px #020a2088, 0 8px 22px #020a2055;
}

:root .auth-screen .auth-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: .85;
  background-image: linear-gradient(var(--auth-gold), var(--auth-gold)), linear-gradient(var(--auth-gold), var(--auth-gold)), linear-gradient(var(--auth-gold), var(--auth-gold)), linear-gradient(var(--auth-gold), var(--auth-gold));
  background-size: 30px 1px, 1px 30px, 30px 1px, 1px 30px;
  background-position: top 0 left 17px, top 17px left 0, bottom 0 right 17px, bottom 17px right 0;
  background-repeat: no-repeat;
}

:root .auth-screen .auth-card::after {
  content: "";
  position: absolute;
  inset: 0 10% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4f4ff6b, transparent);
  pointer-events: none;
}

:root .auth-screen .auth-card-top { margin-bottom: 24px; }
:root .auth-screen .auth-card h2 { color: var(--auth-ink); font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
:root .auth-screen .auth-card > p.muted { color: var(--auth-muted); font-size: 14px; margin-bottom: 25px; }
:root .auth-screen .auth-tabs { background: var(--auth-tabs); border-color: var(--auth-line); border-radius: 10px; gap: 4px; padding: 4px; }
:root .auth-screen .auth-tabs button { color: var(--auth-muted); border-radius: 7px; font-size: 13px; }
:root .auth-screen .auth-tabs button[aria-selected=true] {
  color: var(--auth-ink);
  border-color: var(--auth-line);
  background: var(--auth-tab-selected);
  box-shadow: inset 0 1px 0 #ffffff16, 0 3px 10px #00000009;
}
:root .auth-screen .auth-tabs button:hover { color: var(--auth-ink); }

:root .auth-screen .auth-card .field label { color: var(--auth-ink); font-size: 13px; font-weight: 500; }
:root .auth-screen .auth-card .field input:not([type=checkbox]) {
  min-height: 50px;
  font-size: 15px;
  border-radius: 9px;
  color: var(--auth-input-text);
  border: 1px solid var(--auth-field-line);
  background: var(--auth-field);
  box-shadow: inset 0 2px 6px #00000006;
}
:root .auth-screen .auth-card .field input:not([type=checkbox])::placeholder { color: var(--auth-muted); opacity: .85; }
:root .auth-screen .auth-card .field input:not([type=checkbox]):focus {
  border-color: var(--auth-gold);
  background: var(--auth-field);
  box-shadow: 0 0 0 3px #245de830, inset 0 2px 6px #00000008;
  outline: none;
}
:root .auth-screen .auth-card .field small,
:root .auth-screen .auth-consent,
:root .auth-screen .auth-footnote,
:root .auth-screen .auth-copyright { color: var(--auth-muted); }
:root .auth-screen .auth-consent input { width: 18px; height: 18px; accent-color: var(--auth-gold); }
:root .portal-glass .auth-screen .password-field button { color: var(--auth-gold); font-size: 12px; }
:root .portal-glass .auth-screen .auth-forgot-password,
:root .portal-glass .auth-screen .back-link { color: var(--auth-gold); }

:root .auth-screen .auth-submit {
  color: #ffffff;
  border: 1px solid #245de8;
  border-radius: 9px;
  background: linear-gradient(105deg, #245de8, #2869f3 50%, #245de8);
  box-shadow: inset 0 1px 0 #b9dfff55, 0 5px 18px #245de82b;
  font-weight: 600;
}
:root .auth-screen .auth-submit:hover { background: linear-gradient(105deg, #1748be, #245de8 50%, #1748be); box-shadow: inset 0 1px 0 #b9dfff66, 0 7px 23px #245de835; }
:root .auth-screen .auth-submit:disabled { cursor: not-allowed; transform: none; opacity: .45; }
:root .auth-screen :is(button, a):focus-visible { outline: 2px solid var(--auth-gold); outline-offset: 4px; }
:root .auth-screen .notice { background: #245de812; border-color: #245de850; color: var(--auth-ink); }
:root .auth-screen .notice.error { background: #ab34211a; border-color: #bb625c61; color: #93322b; }
:root .auth-screen .notice.success { background: #21835713; border-color: #2d8f654f; color: #216e4b; }
:root[data-theme=night] .auth-screen .notice.error { color: #f2b5ac; }
:root[data-theme=night] .auth-screen .notice.success { color: #a9d9bc; }

@media (max-width: 1200px) {
  .auth-screen { padding-inline: 32px; column-gap: 38px; grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr); }
  :root .auth-screen .auth-card { padding: 32px; }
  :root .auth-screen .auth-story h1 { font-size: 43px; }
}

@media (max-width: 980px) {
  .auth-screen { padding-inline: 28px; grid-template-columns: minmax(0, 1fr); }
  .auth-screen::before { background-size: auto 1100px; background-position: center top; }
  :root .auth-screen .portal-header { min-height: 86px; }
  :root .auth-screen .auth-story { max-width: 680px; padding: 36px 0 0; }
  :root .auth-screen .auth-story h1 { font-size: 38px; margin-block: 16px; }
  :root .auth-screen .auth-story-main > p { font-size: 14px; }
  :root .auth-screen .auth-visual { width: 190px; height: 180px; margin: 0; }
  :root .auth-screen .auth-panel { padding: 30px 0 28px; }
  :root .auth-screen .auth-card { max-width: 560px; }
}

@media (max-width: 600px) {
  .auth-screen { padding-inline: 20px; }
  .auth-screen::before { background-size: auto 1000px; opacity: calc(var(--auth-ribbon-opacity) * .65); }
  :root .auth-screen .portal-header { min-height: 82px; gap: 12px; }
  :root .auth-screen .portal-header-actions { gap: 9px; }
  :root .auth-screen .portal-header .brand { font-size: 11px; letter-spacing: 1px; gap: 8px; }
  :root .auth-screen .portal-header .brand-symbol { width: 31px; height: 38px; }
  :root .auth-screen .portal-header .brand small { font-size: 5.5px; letter-spacing: 1.2px; }
  :root .auth-screen .portal-home-link { font-size: 10px; max-width: 78px; }
  :root .auth-screen .auth-story { padding-top: 28px; }
  :root .auth-screen .auth-story h1 { font-size: clamp(29px, 7.6vw, 38px); letter-spacing: -.04em; }
  :root .auth-screen .auth-story-main > p { max-width: 400px; line-height: 1.8; }
  :root .auth-screen .auth-visual { width: 100%; height: 132px; margin-top: 10px; }
  :root .auth-screen .auth-panel { padding-top: 19px; }
  :root .auth-screen .auth-card { padding: 28px 23px 25px; border-radius: 15px; }
  :root .auth-screen .auth-card h2 { font-size: 27px; }
  :root .auth-screen .auth-card .field input:not([type=checkbox]) { font-size: 16px; }
  :root .auth-screen .auth-card .field { margin-bottom: 19px; }
  :root .auth-screen .auth-card-top { margin-bottom: 22px; }
  :root .auth-screen .auth-copyright { padding-top: 22px; }
}

@media (max-width: 360px) {
  .auth-screen { padding-inline: 16px; }
  :root .auth-screen .auth-card { padding-inline: 20px; }
  :root .auth-screen .portal-header .brand { font-size: 10px; letter-spacing: .7px; }
  :root .auth-screen .portal-header .brand small { letter-spacing: .8px; }
  :root .auth-screen .portal-header-actions { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  :root .auth-screen :is(.brand-symbol img, .auth-shield, .auth-light-node, .auth-float-card, .auth-card) { animation: none; }
  :root .auth-screen .auth-submit:hover { transform: none; }
}