:root{
    color-scheme: light;

    --a-bg1: #f8fafc;
    --a-bg2: #eef2ff;
    --a-bg3: #ffffff;

    --a-text: #0f172a;
    --a-muted: #475569;
    --a-muted2: #64748b;

    --a-border: rgba(15, 23, 42, 0.10);
    --a-border-strong: rgba(15, 23, 42, 0.15);

    --a-glass: rgba(255,255,255,0.96);

    --a-shadow-brand: 0 10px 25px rgba(2,6,23,0.12);
    --a-shadow-card: 0 20px 50px rgba(2,6,23,0.10);

    --a-radius-lg: 1rem;
    --a-radius-md: .75rem;
    --a-radius-sm: .6rem;

    --a-focus: rgba(14,165,233,0.65);
    --a-focus-ring: 0 0 0 3px rgba(14,165,233,0.12);

    --a-ok: 22,163,74;
    --a-bad: 239,68,68;

    --a-accent-a: #0ea5e9;
    --a-accent-b: #22c55e;
  }

  *,
  *::before,
  *::after{ box-sizing: border-box; }

  html, body{ height: 100%; }

  body{
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, var(--a-bg1), var(--a-bg2) 40%, var(--a-bg3) 80%);
    color: var(--a-text);

    padding: 1.25rem;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  /* iOS Safari fallback a dvh-re */
  @supports (-webkit-touch-callout: none){
    body{ min-height: -webkit-fill-available; }
  }

  .auth-wrapper{
    width: 100%;
    max-width: 440px;
    padding: 1.5rem;
  }

  .brand{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1.2rem;
    text-align: center;
  }

  .brand-logo{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, var(--a-accent-b), var(--a-accent-a));
    box-shadow: var(--a-shadow-brand);
    flex: 0 0 auto;
  }

  .brand-text{ display: flex; flex-direction: column; gap: .1rem; }

  .brand-title{
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .brand-subtitle{
    font-size: .85rem;
    color: var(--a-muted);
  }

  .card{
    background: var(--a-glass);
    border-radius: var(--a-radius-lg);
    padding: 1.2rem 1.1rem 1rem;
    border: 1px solid var(--a-border);
    box-shadow: var(--a-shadow-card);
    backdrop-filter: blur(6px);
  }

  .card-header{ margin-bottom: .9rem; text-align: center; }
  .card-title{ font-size: 1.1rem; font-weight: 900; }
  .card-subtext{ font-size: .85rem; color: var(--a-muted); margin-top: .2rem; }

  .alert{
    border-radius: calc(var(--a-radius-md) - .05rem);
    padding: .65rem .75rem;
    font-size: .85rem;
    margin-bottom: .7rem;
    white-space: pre-line;
  }

  .alert-error{
    background: rgba(var(--a-bad),0.10);
    border: 1px solid rgba(var(--a-bad),0.35);
    color: #7f1d1d;
  }

  .alert-success{
    background: rgba(var(--a-ok),0.10);
    border: 1px solid rgba(var(--a-ok),0.35);
    color: #14532d;
  }

  .field{ margin-bottom: .75rem; }

  .field-label{
    display: block;
    font-size: .85rem;
    margin-bottom: .25rem;
    color: var(--a-text);
    font-weight: 700;
  }

  .field-input{
    width: 100%;
    padding: .55rem .65rem;
    border-radius: var(--a-radius-sm);
    border: 1px solid var(--a-border-strong);
    background: #fff;
    color: var(--a-text);
    font-size: .95rem;
    outline: none;
  }

  .field-input:focus{
    border-color: var(--a-focus);
    box-shadow: var(--a-focus-ring);
  }

  .btn-primary{
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--a-radius-md);
    border: none;
    background: linear-gradient(135deg, var(--a-accent-a), var(--a-accent-b));
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
    cursor: pointer;
    margin-top: .2rem;
  }

  .btn-primary:hover{ filter: brightness(1.02); }

  .btn-primary:focus-visible{
    outline: none;
    box-shadow: var(--a-focus-ring);
  }

  .link-row{
    margin-top: .9rem;
    text-align: center;
    font-size: .85rem;
    color: #334155;
  }

  .link-row a{
    color: #0284c7;
    text-decoration: none;
    font-weight: 800;
  }

  .link-row a:hover{ text-decoration: underline; }
  .link-row a:focus-visible{ outline:none; box-shadow: var(--a-focus-ring); border-radius: 8px; }

  .footer-text{
    margin-top: 1rem;
    font-size: .8rem;
    text-align: center;
    color: var(--a-muted2);
  }

  code.inline{
    background: rgba(15,23,42,0.06);
    padding: .1rem .35rem;
    border-radius: .4rem;
    border: 1px solid rgba(15,23,42,0.08);
  }

  /* Responsive */
  @media (max-width: 420px){
    body{ padding: 1rem; }
    .auth-wrapper{ padding: 1rem; }
    .card{ padding: 1.05rem .95rem .9rem; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .btn-primary{ transition: none; }
  }