/* Standalone pages: sign-in, setup, installer, link status, password gate, and preview page. */
.page-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.page-shell--single { grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-6) var(--space-4); background: var(--gray-50); }

/* Brand panel */
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); padding: var(--space-10); background: var(--navy-900); color: #c9d4ee; overflow: hidden; }
.brand-panel::after { content: ""; position: absolute; right: -140px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 114, 240, 0.45), transparent 70%); pointer-events: none; }
.brand-panel__logo { display: flex; align-items: center; gap: var(--space-3); color: var(--white); font-weight: var(--weight-bold); font-size: var(--text-md); }
.brand-panel__logo img { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); }
.brand-panel__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-4); max-width: 460px; }
.brand-panel__copy h2 { color: var(--white); font-size: var(--text-3xl); letter-spacing: -0.03em; }
.brand-panel__copy h2 em { font-style: normal; color: var(--amber-400); }
.brand-panel__copy p { font-size: var(--text-md); }
.brand-panel__points { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.brand-panel__points li { display: flex; align-items: center; gap: var(--space-3); color: #e3e9f8; }
.brand-panel__points .icon { color: var(--amber-400); }
.brand-panel__foot { position: relative; z-index: 1; font-size: var(--text-sm); color: #8597c2; }

/* Form panel */
.form-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-10) var(--space-6); background: var(--color-surface); }
.auth { display: flex; flex-direction: column; gap: var(--space-6); width: min(400px, 100%); }
.auth__head { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.auth__head p { color: var(--color-text-muted); font-size: var(--text-md); }
.auth__note { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.auth__mobile-brand { display: none; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); }
.auth__mobile-brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }

/* Centered status card (link errors, password gate, preview, setup) */
.status-card { display: flex; flex-direction: column; gap: var(--space-5); width: min(480px, 100%); padding: var(--space-8); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.status-card--wide { width: min(680px, 100%); }
.status-card__brand { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); }
.status-card__brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
.status-card__icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }
.status-card__icon--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.status-card__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.status-card__text { display: flex; flex-direction: column; gap: var(--space-2); }
.status-card__text p { color: var(--color-text-muted); font-size: var(--text-md); overflow-wrap: anywhere; }
.status-card__code { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.status-card__media { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--gray-100); }
.status-card__foot { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-subtle); }
.steps { display: grid; gap: var(--space-3); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-3); align-items: start; counter-increment: step; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* Installer */
.installer { display: flex; flex-direction: column; gap: var(--space-6); width: min(720px, 100%); }

/* ---------- Installer (split layout: progress panel + form) ---------- */
.setup { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); min-height: 100vh; background: var(--gray-50); }
.setup__panel { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-10) var(--space-8); background: var(--navy-900); color: #c9d4ee; overflow-x: hidden; overflow-y: auto; isolation: isolate; }
.setup__panel::after { content: ""; position: absolute; z-index: -1; right: -160px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 114, 240, 0.4), transparent 70%); pointer-events: none; }
.setup__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.setup__eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-400); }
.setup__intro h2 { color: var(--white); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: -0.02em; }
.setup__intro h2 em { font-style: normal; color: var(--amber-400); }
.setup-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.setup-step { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-5); }
.setup-step:last-child { padding-bottom: 0; }
.setup-step:not(:last-child)::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.25rem; bottom: 0.25rem; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.setup-step--done:not(:last-child)::before { background: rgba(255, 190, 77, 0.55); }
.setup-step__dot { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: #c9d4ee; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.setup-step__dot .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.setup-step--current .setup-step__dot { border-color: var(--amber-400); background: rgba(255, 190, 77, 0.12); color: var(--amber-400); }
.setup-step--done .setup-step__dot { border-color: var(--amber-400); background: var(--amber-400); color: var(--navy-950); }
.setup-step__text { display: flex; flex-direction: column; gap: 2px; padding-top: 0.3rem; min-width: 0; }
.setup-step__text b { color: var(--white); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.setup-step__text span { font-size: var(--text-sm); color: #9fb0d6; }
.setup-step--todo .setup-step__text b { color: #c9d4ee; }
.setup__need { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); font-size: var(--text-sm); }
.setup__need > b { color: var(--white); }
.setup__need ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); list-style: disc; }
.setup__need ul b { color: #e3e9f8; }
.setup__panel .brand-panel__foot { margin-top: auto; }
.setup__main { display: flex; justify-content: center; padding: var(--space-12) var(--space-8); min-width: 0; }
.setup__content { display: flex; flex-direction: column; gap: var(--space-5); width: min(680px, 100%); }
.setup__mobile-brand { display: none; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); }
.setup__mobile-brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
.setup__head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-1); }
.setup__head p { color: var(--color-text-muted); font-size: var(--text-md); line-height: var(--leading-normal); }
.setup__submit { display: flex; flex-direction: column; gap: var(--space-3); }
.setup__submit .auth__note { justify-content: center; text-align: center; }
.form-grid.setup-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setup-grid > .field { grid-column: span 2; }
.setup-grid > .setup-grid__host { grid-column: span 3; }
.setup-grid > .setup-grid__port { grid-column: span 1; }
.setup-grid > .span-2 { grid-column: 1 / -1; }
.server-check > summary { padding: var(--space-4) var(--space-5); }
.server-check .disclosure__icon { background: var(--color-success-soft); color: var(--color-success); }
.server-check--warn .disclosure__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.server-check--bad { border-color: var(--color-danger-border); }
.server-check--bad .disclosure__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.server-check__toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.server-check .disclosure__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.setup-result .card__body { padding: var(--space-8); gap: var(--space-5); }
.status-card__icon--success { background: var(--color-success-soft); color: var(--color-success); }
.setup-result .status-card__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }
.next-steps { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.next-steps__title { font-size: var(--text-base); font-weight: var(--weight-bold); }
.next-steps__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: nstep; }
.next-steps__list li { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding-left: 2.5rem; counter-increment: nstep; min-width: 0; }
.next-steps__list li::before { content: counter(nstep); position: absolute; left: 0; top: -1px; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary); color: var(--white); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.next-steps__list span { font-size: var(--text-sm); color: var(--color-text-muted); }
.next-steps__code { display: block; margin: var(--space-1) 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 1023px) {
  .setup { grid-template-columns: minmax(0, 1fr); }
  .setup__panel { display: none; }
  .setup__mobile-brand { display: flex; }
  .setup__main { padding: var(--space-6) var(--space-5) var(--space-10); }
}
@media (max-width: 640px) {
  .setup__main { padding: var(--space-5) var(--space-4) var(--space-10); }
  .setup-grid > .field { grid-column: 1 / -1; }
  .setup-grid > .setup-grid__host { grid-column: span 3; }
  .setup-grid > .setup-grid__port { grid-column: span 1; }
  .setup-result .card__body { padding: var(--space-6) var(--space-5); }
  .server-check > summary { padding: var(--space-4); }
  .server-check__toggle { display: none; }
}
.installer__step { display: flex; align-items: flex-start; gap: var(--space-3); }
.installer__step .installer__num { margin-top: 1px; }
.installer__num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--color-primary); color: var(--white); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.req-grid { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.req { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.req__name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.req__name .icon { color: var(--color-success); }
.req--bad { border-color: var(--color-danger-border); background: var(--color-danger-soft); }
.req--bad .req__name .icon { color: var(--color-danger); }
.req--warn { border-color: var(--color-warning-border); background: var(--color-warning-soft); }
.req--warn .req__name .icon { color: var(--color-warning); }
.req__detail { color: var(--color-text-muted); font-size: var(--text-sm); text-align: right; }
.code-block { width: 100%; min-height: 220px; padding: var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--gray-50); font: 12px/1.6 var(--font-mono); resize: vertical; }

@media (max-width: 960px) {
  .page-shell { grid-template-columns: minmax(0, 1fr); }
  .brand-panel { display: none; }
  .auth__mobile-brand { display: flex; }
  .form-panel { min-height: 100vh; padding: var(--space-8) var(--space-5); background: var(--gray-50); }
  .auth { padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }
}
@media (max-width: 640px) {
  :root { --control-h: 2.75rem; }
  .status-card { padding: var(--space-6) var(--space-5); }
  .req-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .auth { padding: var(--space-5); }
}