:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f7ff;
  background: #070a12;
  font-synthesis: none;
  --line: rgba(137, 151, 204, .18);
  --muted: #8993ad;
  --violet: #786dff;
  --cyan: #3ed6ed;
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(78, 85, 218, .12), transparent 29rem),
    linear-gradient(rgba(151, 165, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 165, 220, .025) 1px, transparent 1px),
    #070a12;
  background-size: auto, 52px 52px, 52px 52px, auto;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

body::before {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.025), transparent 24%, transparent 76%, rgba(57,214,237,.025)),
    radial-gradient(circle at center, transparent 35%, rgba(3, 5, 11, .65) 100%);
}

body::after {
  top: 0;
  left: 50%;
  width: min(520px, 78vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(104, 100, 255, .75), rgba(62, 214, 237, .55), transparent);
  box-shadow: 0 0 38px 7px rgba(91, 99, 247, .12);
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.scene-orbit {
  position: absolute;
  width: min(760px, 105vw);
  aspect-ratio: 1;
  border: 1px solid rgba(116, 127, 190, .065);
  border-radius: 50%;
}

.scene-orbit::before,
.scene-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(116, 127, 190, .05);
  border-radius: 50%;
}

.scene-orbit::before { inset: 13%; }
.scene-orbit::after { inset: 27%; }

.scene-glow {
  position: absolute;
  width: min(560px, 90vw);
  aspect-ratio: 1.15;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(100, 83, 255, .15), rgba(39, 191, 229, .07));
  filter: blur(110px);
  opacity: .52;
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(30px, 7vh, 68px) 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-showcase {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #f8faff;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(132, 150, 229, .25);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(62, 70, 145, .3), rgba(13, 18, 34, .86));
  box-shadow: 0 14px 34px rgba(44, 52, 176, .22), inset 0 1px rgba(255,255,255,.09);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%);
}

.brand-mark img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.brand-copy { display: grid; gap: 2px; }

.brand-name {
  font-size: 22px;
  font-weight: 730;
  line-height: 1;
  letter-spacing: -.035em;
}

.brand-tag {
  color: #727e9f;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.auth-panel { width: 100%; }

.login-card {
  position: relative;
  width: 100%;
  padding: 34px 36px 29px;
  overflow: hidden;
  border: 1px solid rgba(133, 147, 204, .2);
  border-radius: 20px;
  background:
    linear-gradient(155deg, rgba(28, 33, 57, .9), rgba(10, 13, 25, .96) 72%),
    rgba(11, 14, 27, .94);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(24px);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 13%;
  width: 74%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128, 116, 255, .82), rgba(55, 213, 238, .6), transparent);
}

.login-card::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -90px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(71, 77, 207, .12);
  filter: blur(42px);
  pointer-events: none;
}

.card-status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.server-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #879b9b;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .035em;
}

.server-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42dca7;
  box-shadow: 0 0 10px rgba(66, 220, 167, .78);
}

.auth-index {
  color: #525d7e;
  font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.login-heading { margin: 33px 0 27px; }

.card-kicker {
  margin: 0 0 8px;
  color: #7885b0;
  font-size: 9px;
  font-weight: 730;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #f8f9ff;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.subtitle {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.field + .field { margin-top: 16px; }

label {
  display: block;
  margin: 0 0 7px;
  color: #bdc5dc;
  font-size: 10px;
  font-weight: 650;
}

.input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.input-shell svg {
  position: absolute;
  z-index: 1;
  left: 13px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #687493;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .18s ease;
}

input {
  width: 100%;
  height: 47px;
  padding: 0 13px 0 39px;
  border: 1px solid rgba(128, 141, 190, .25);
  border-radius: 10px;
  color: #f7f8ff;
  background: rgba(5, 8, 17, .67);
  outline: none;
  user-select: text;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  caret-color: #57d6ed;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:hover { border-color: rgba(145, 158, 209, .42); }

.input-shell:focus-within svg { stroke: #7c8cff; }

input:focus {
  border-color: #6876f6;
  background: rgba(7, 10, 21, .92);
  box-shadow: 0 0 0 3px rgba(93, 107, 246, .14), 0 10px 24px rgba(0,0,0,.16);
}

#login-error {
  min-height: 25px;
  padding-top: 9px;
  color: #ff93a1;
  font-size: 10.5px;
  line-height: 1.45;
}

button {
  position: relative;
  width: 100%;
  height: 47px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(105deg, #685cf2, #557bf1 56%, #32bcd9);
  box-shadow: 0 14px 30px rgba(68, 83, 214, .27), inset 0 1px rgba(255,255,255,.2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.13) 48%, transparent 75%);
  transform: translateX(-110%);
  transition: transform .45s ease;
}

button:hover {
  filter: brightness(1.08);
  box-shadow: 0 17px 36px rgba(68, 83, 214, .35), inset 0 1px rgba(255,255,255,.22);
  transform: translateY(-1px);
}

button:hover::after { transform: translateX(110%); }
button:active { transform: translateY(0); }

button:focus-visible {
  outline: 3px solid rgba(74, 210, 237, .34);
  outline-offset: 3px;
}

button:disabled {
  opacity: .58;
  cursor: wait;
  filter: saturate(.65);
  transform: none;
}

.privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid rgba(127, 141, 190, .12);
  color: #7c87a5;
  font-size: 9.5px;
  line-height: 1.4;
  text-align: center;
}

.privacy-note svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #7080ad;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-foot {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  color: #4f5872;
  font-size: 9px;
  letter-spacing: .04em;
}

@media (max-width: 480px) {
  body { background-size: auto, 42px 42px, 42px 42px, auto; }
  .login-shell { width: calc(100% - 28px); padding: 24px 0 18px; }
  .login-showcase { margin-bottom: 20px; }
  .brand-mark { width: 41px; height: 41px; border-radius: 12px; }
  .brand-mark img { width: 33px; height: 33px; }
  .brand-name { font-size: 21px; }
  .login-card { padding: 29px 24px 25px; border-radius: 17px; }
  .login-heading { margin: 29px 0 24px; }
}

@media (max-width: 350px) {
  .login-shell { width: calc(100% - 20px); }
  .login-card { padding-right: 18px; padding-left: 18px; }
  .server-pill { font-size: 8.5px; }
}

@media (max-height: 650px) and (min-width: 481px) {
  .login-shell { padding-top: 22px; padding-bottom: 16px; }
  .login-showcase { margin-bottom: 17px; }
  .login-card { padding-top: 27px; padding-bottom: 23px; }
  .login-heading { margin: 23px 0 20px; }
  .privacy-note { margin-top: 18px; padding-top: 15px; }
  .auth-foot { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Kinetix light — quiet, product-first, and intentionally free of spectacle. */
:root {
  color-scheme: light;
  color: #1d1d1f;
  background: #fff;
  --line: #d2d2d7;
  --muted: #6e6e73;
  --violet: #0071e3;
  --cyan: #0071e3;
}

body { color: #1d1d1f; background: #fff; }
body::before, body::after, .scene { display: none; }

.login-shell { width: min(420px, calc(100% - 40px)); padding: 44px 0 28px; }
.login-showcase { margin-bottom: 46px; }
.brand { gap: 11px; color: #1d1d1f; }
.brand-mark { width: 46px; height: 46px; border: 0; border-radius: 12px; background: #f5f5f7; box-shadow: none; }
.brand-mark::after { display: none; }
.brand-mark img { width: 36px; height: 36px; }
.brand-name { font-size: 24px; font-weight: 650; letter-spacing: -.04em; }
.brand-tag { color: #86868b; font-size: 9px; font-weight: 560; letter-spacing: .11em; }

.login-card { padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.login-card::before, .login-card::after, .card-status, .card-kicker { display: none; }
.login-heading { margin: 0 0 34px; text-align: center; }
h1 { color: #1d1d1f; font-size: 38px; font-weight: 620; letter-spacing: -.045em; }
.subtitle { margin-top: 10px; color: #6e6e73; font-size: 15px; }
.field + .field { margin-top: 18px; }
label { margin-bottom: 8px; color: #3a3a3c; font-size: 12px; font-weight: 560; }
.input-shell svg { left: 15px; stroke: #86868b; }
input {
  height: 52px; padding-left: 43px; border-color: #d2d2d7; border-radius: 12px;
  color: #1d1d1f; background: #fff; caret-color: #0071e3; font-size: 15px;
}
input:hover { border-color: #a1a1a6; }
.input-shell:focus-within svg { stroke: #0071e3; }
input:focus { border-color: #0071e3; background: #fff; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
#login-error { min-height: 30px; padding-top: 10px; color: #d70015; font-size: 12px; }
button { height: 50px; border-radius: 12px; background: #0071e3; box-shadow: none; font-size: 15px; font-weight: 590; }
button::after { display: none; }
button:hover { background: #0077ed; box-shadow: none; filter: none; }
button:focus-visible { outline-color: rgba(0,113,227,.3); }
.privacy-note { margin-top: 30px; padding-top: 24px; border-top-color: #e8e8ed; color: #86868b; font-size: 11px; }
.privacy-note svg { stroke: #86868b; }
.auth-foot { margin-top: 34px; color: #a1a1a6; font-size: 10px; }

@media (max-width: 480px) {
  .login-shell { width: calc(100% - 40px); padding: 32px 0 24px; }
  .login-showcase { margin-bottom: 38px; }
  .login-card { padding: 0; }
  h1 { font-size: 34px; }
}

@media (max-height: 620px) {
  .login-shell { justify-content: flex-start; }
  .login-showcase { margin-bottom: 28px; }
  .login-heading { margin-bottom: 24px; }
  .privacy-note { margin-top: 22px; padding-top: 18px; }
  .auth-foot { margin-top: 22px; }
}

@media (forced-colors: active) {
  .login-card,
  input,
  button { border: 1px solid CanvasText; }
  .server-pill i { background: CanvasText; box-shadow: none; }
}

/* Professional CAD sign-in — the same restrained shell as the editor. */
body { background: #f1f3f5; }
.login-shell { width: min(438px, calc(100% - 32px)); padding: 34px 0 24px; }
.login-showcase { margin-bottom: 18px; }
.brand { justify-content: flex-start; padding-left: 2px; }
.brand-mark { width: 38px; height: 38px; border: 1px solid #d6d9dd; border-radius: 6px; background: #fff; }
.brand-mark img { width: 31px; height: 31px; }
.brand-name { font-size: 20px; letter-spacing: -.025em; }
.brand-tag { font-size: 8px; letter-spacing: .09em; }
.login-card {
  padding: 30px 32px 27px; border: 1px solid #cfd3d8; border-radius: 8px;
  background: #fff; box-shadow: 0 12px 34px rgba(25,35,45,.09);
}
.login-heading { margin-bottom: 25px; text-align: left; }
h1 { font-size: 27px; font-weight: 660; letter-spacing: -.025em; }
.subtitle { margin-top: 6px; font-size: 12px; }
.field + .field { margin-top: 14px; }
label { margin-bottom: 6px; font-size: 10.5px; font-weight: 620; }
input { height: 42px; padding-left: 39px; border-color: #cfd3d8; border-radius: 5px; font-size: 12px; }
.input-shell svg { left: 13px; width: 14px; height: 14px; }
input:focus { box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
#login-error { min-height: 26px; padding-top: 8px; font-size: 10.5px; }
button { height: 40px; border-radius: 5px; font-size: 12px; font-weight: 620; }
.privacy-note { margin-top: 22px; padding-top: 18px; font-size: 9.5px; }
.auth-foot { margin-top: 18px; font-size: 8.5px; }

@media (max-width: 480px) {
  .login-shell { width: calc(100% - 24px); padding-top: 22px; }
  .login-showcase { margin-bottom: 14px; }
  .login-card { padding: 25px 22px 22px; }
  h1 { font-size: 25px; }
}

/* Apple-futurist sign-in — warm glass and graphite, without a blue cast. */
:root { --violet: #746580; --cyan: #746580; --line: rgba(48,44,52,.16); }
body {
  background:
    radial-gradient(circle at 78% 6%, rgba(174,146,190,.23), transparent 31%),
    radial-gradient(circle at 15% 96%, rgba(218,184,154,.17), transparent 29%),
    #f2f1ef;
}
.brand-mark { border-color: rgba(48,44,52,.14); background: rgba(255,255,255,.68); backdrop-filter: blur(18px); }
.brand-tag { color: #817984; }
.login-card {
  border-color: rgba(48,44,52,.15);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  box-shadow: 0 28px 80px rgba(40,33,44,.14), inset 0 1px rgba(255,255,255,.8);
  backdrop-filter: saturate(145%) blur(28px);
}
input { border-color: rgba(48,44,52,.18); background: rgba(255,255,255,.58); caret-color: #746580; }
input:hover { border-color: rgba(48,44,52,.34); }
.input-shell:focus-within svg { stroke: #65566f; }
input:focus { border-color: #746580; background: rgba(255,255,255,.82); box-shadow: 0 0 0 3px rgba(116,101,128,.11); }
button { background: linear-gradient(180deg, #39363b, #252327); }
button:hover { background: linear-gradient(180deg, #454147, #2b292d); }
button:focus-visible { outline-color: rgba(116,101,128,.3); }
.privacy-note { border-top-color: rgba(48,44,52,.11); }

/* Kinetix 2.0 — architectural product sign-in. */
body {
  min-height: 100vh;
  color: #1b1b1d;
  background: #f1f1ee;
}

.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  width: min(1120px, calc(100% - 64px));
  min-height: min(680px, calc(100vh - 64px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(22,22,24,.09);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(24,24,27,.12), 0 2px 8px rgba(24,24,27,.04);
}

.login-showcase {
  position: relative;
  min-height: 680px;
  margin: 0;
  padding: 44px 48px;
  overflow: hidden;
  background:
    linear-gradient(rgba(22,22,24,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,22,24,.04) 1px, transparent 1px),
    #ececea;
  background-size: 32px 32px;
}

.login-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 42%, rgba(255,255,255,.82), transparent 33%);
  pointer-events: none;
}

.brand { position: relative; z-index: 3; gap: 10px; padding: 0; }
.brand-mark {
  width: 36px; height: 36px;
  border: 1px solid rgba(20,20,22,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 18px rgba(24,24,27,.06);
}
.brand-mark img { width: 29px; height: 29px; filter: grayscale(1) contrast(1.8) brightness(.3); opacity: .9; }
.brand-name { font-size: 19px; font-weight: 680; letter-spacing: -.035em; }
.brand-tag { color: #747477; font-size: 8px; letter-spacing: .12em; }

.showcase-copy { position: absolute; z-index: 3; left: 48px; bottom: 50px; max-width: 440px; }
.showcase-kicker { color: #6b6b6e; font-size: 10px; font-weight: 680; letter-spacing: .16em; }
.showcase-copy h2 { margin: 14px 0 18px; color: #171719; font-size: clamp(48px, 5.2vw, 72px); font-weight: 610; line-height: .94; letter-spacing: -.065em; }
.showcase-copy p { max-width: 360px; margin: 0; color: #626265; font-size: 15px; line-height: 1.55; }

.showcase-object { position: absolute; z-index: 2; top: 145px; right: 82px; width: 250px; height: 250px; transform: rotate(-4deg); }
.object-face { position: absolute; display: block; border: 1px solid rgba(24,24,27,.18); box-shadow: inset 0 0 30px rgba(255,255,255,.62); }
.face-top { top: 5px; left: 50px; width: 150px; height: 150px; background: rgba(255,255,255,.78); transform: rotate(30deg) skewX(-30deg) scaleY(.86); }
.face-left { top: 99px; left: 34px; width: 130px; height: 130px; background: rgba(218,218,215,.82); transform: skewY(30deg); }
.face-right { top: 99px; left: 164px; width: 92px; height: 130px; background: rgba(244,244,241,.9); transform: skewY(-30deg); }
.object-axis { position: absolute; z-index: -1; display: block; height: 1px; background: rgba(24,24,27,.2); transform-origin: left; }
.axis-one { top: 225px; left: -70px; width: 380px; transform: rotate(-30deg); }
.axis-two { top: 225px; left: 100px; width: 300px; transform: rotate(30deg); }

.auth-panel { display: flex; align-items: center; padding: 64px 62px; background: #fff; }
.login-card { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.login-heading { margin: 0 0 34px; text-align: left; }
h1 { font-size: 40px; font-weight: 620; letter-spacing: -.05em; }
.subtitle { margin-top: 9px; color: #737377; font-size: 14px; }
.field + .field { margin-top: 18px; }
label { margin-bottom: 8px; color: #3d3d40; font-size: 11px; font-weight: 620; }
input { height: 50px; border: 1px solid #d7d7d8; border-radius: 11px; background: #f8f8f7; font-size: 14px; }
input:hover { border-color: #aaa9ac; }
input:focus { border-color: #333336; background: #fff; box-shadow: 0 0 0 4px rgba(28,28,30,.08); }
.input-shell:focus-within svg { stroke: #333336; }
#login-error { min-height: 34px; }
button { height: 49px; border-radius: 11px; background: #202023; font-size: 14px; }
button:hover { background: #050506; }
.privacy-note { margin-top: 28px; padding-top: 22px; color: #838387; font-size: 10px; }
.auth-foot { position: absolute; right: 62px; bottom: 28px; z-index: 5; margin: 0; color: #a0a0a3; }

@media (max-width: 800px) {
  body { background: #fff; }
  .login-shell { display: block; width: 100%; min-height: 100vh; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .login-showcase { min-height: 0; padding: 28px 26px 24px; background: #f1f1ee; }
  .login-showcase::after, .showcase-copy, .showcase-object { display: none; }
  .auth-panel { padding: 54px max(26px, calc((100vw - 420px) / 2)); }
  .auth-foot { position: static; margin: 8px 0 28px; }
}

/* Focused sign-in composition: the form remains the visual center. */
.login-shell {
  display: flex;
  flex-direction: column;
  width: min(500px, calc(100% - 40px));
  min-height: 0;
  padding: 38px 0 26px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-showcase { min-height: 0; margin: 0 0 22px; padding: 0; overflow: visible; background: transparent; }
.login-showcase::after { display: none; }
.brand { justify-content: center; }
.showcase-object { position: fixed; top: 50%; right: max(48px, calc(50% - 610px)); opacity: .42; transform: translateY(-54%) rotate(-7deg) scale(1.12); }
.auth-panel { display: block; padding: 0; background: transparent; }
.login-card { padding: 44px 46px 38px; border: 1px solid rgba(24,24,27,.1); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(24,24,27,.1); }
.login-heading { text-align: center; }
.auth-foot { position: static; margin: 22px 0 0; }

@media (max-width: 800px) {
  body { background: #f1f1ee; }
  .login-shell { width: calc(100% - 28px); min-height: 100vh; padding: 26px 0 20px; }
  .login-showcase { padding: 0; background: transparent; }
  .showcase-object { display: none; }
  .auth-panel { padding: 0; }
  .login-card { padding: 38px 28px 32px; }
}