/* ========== Tokens & base ========== */
:root{
  --bg: #f6f7f8;
  --bg-elev: #ffffff;
  --bg-hero-overlay: rgba(255,255,255,.3);
  --bg-hero-gradient: linear-gradient(to bottom right, rgba(19,127,236,.10), rgba(19,127,236,.05), transparent);
  --text: #1f2937;
  --text-weak: #6b7280;
  --text-hero: #0b1220;
  --text-hero-weak: rgba(11,18,32,.88);
  --primary: #137fec;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --ring: rgba(19,127,236,.35);

  --radius: 12px;
  --radius-lg: 16px;

  --shadow-1: 0 1px 0 rgba(0,0,0,.06);
  --shadow-2: 0 10px 25px -12px rgba(0,0,0,.15);
}
.dark{
  --bg: #101922;
  --bg-elev: #0f1720;
  --bg-hero-overlay: rgba(0,0,0,.3);
  --bg-hero-gradient: linear-gradient(to bottom right, rgba(19,127,236,.12), rgba(19,127,236,.06), transparent);
  --text: #e5e7eb;
  --text-weak: #9ca3af;
  --text-hero: #f3f4f6;
  --text-hero-weak: rgba(243,244,246,.9);
  --border: #223041;
  --border-strong: #2b3a4d;
  --ring: rgba(19,127,236,.45);
}

*{ box-sizing: border-box; }
html{ color-scheme: light dark; }
body.page{
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* a11y helpers */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skiplink{
  position: fixed; inset: 12px auto auto 12px; z-index: 100;
  background: var(--bg-elev); color: var(--text); border:1px solid var(--border);
  padding:.5rem .75rem; border-radius:10px; box-shadow: var(--shadow-2);
  transform: translateY(-150%); transition: transform .2s ease;
}
.skiplink:focus{ transform: translateY(0); outline:2px solid var(--primary); outline-offset:2px; }

/* ========== Layout ========== */
.auth-layout{
  display: grid; grid-template-columns: 1fr; min-height: 100vh;
}
@media (min-width: 1024px){
  .auth-layout{ grid-template-columns: 1fr 1fr; }
}

.auth-hero{
  position: relative; display:none;
}
@media (min-width:1024px){ .auth-hero{ display:block; } }
.hero-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-layer{ position:absolute; inset:0; }
.hero-gradient{ background: var(--bg-hero-gradient); }
.hero-overlay{ background: var(--bg-hero-overlay); mix-blend:multiply; }
.hero-content{
  position:relative; z-index:5; color: var(--text-hero);
  padding: 3rem; max-width: 720px; margin-top: 30%;
}
.brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.brand--small{ gap:.75rem; }
.brand__icon{ width:36px; height:36px; color: var(--primary); }
.brand__icon svg{ width:100%; height:100%; display:block; }
.brand__icon--small{ width:32px; height:32px; }
.brand__name{ font-weight:800; font-size: 1.25rem; letter-spacing: -.01em; }

.hero-title{
  margin: .5rem 0 0; font-size: clamp(24px, 2vw + 18px, 34px);
  font-weight: 900; letter-spacing: -.015em; line-height: 1.1;
  max-width: 40ch;
}
.hero-text{ margin: .75rem 0 0; max-width: 55ch; color: var(--text-hero-weak); }
.hero-list{ margin: 1.25rem 0 0; padding: 0; list-style:none; display:grid; gap:.5rem; }
.hero-list__item{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; color: var(--text-hero-weak); }
.hero-list__item .material-symbols-outlined{ font-variation-settings:'OPSZ' 24; }

.auth-panel{
  display:flex; align-items:center; justify-content:center; padding: 24px 24px 40px;
}
.panel{
  width:100%; max-width: 440px; background: var(--bg-elev);
  border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-2);
}
.panel__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.panel__title{ margin:0; font-size: 24px; font-weight:800; letter-spacing:-.01em; }

/* ========== Buttons & links ========== */
.link{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link--primary{ color: var(--primary); text-decoration: none; font-weight: 600; }
.link--primary:hover{ text-decoration: underline; }

.btn{
  --bg: #eef2f7; --fg: #111827; --border: var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height: 44px; padding: 0 16px; border-radius: 10px; border:1px solid var(--border);
  background: var(--bg); color: var(--fg); font-weight: 700; cursor:pointer;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn--primary{ --bg: var(--primary); --fg: #fff; --border: color-mix(in oklab, var(--primary) 65%, #0000); }
.btn--block{ width:100%; }
.btn--neutral{ --bg: #f2f3f5; }
.dark .btn--neutral{ --bg: #0f1720; }
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--border); background: #f4f6f8;
  color:#334155;
}
.dark .icon-btn{ background:#0f1720; color:#cbd5e1; }

/* Busy indicator inside button */
.btn__busy{ display:inline-flex; gap:.5rem; align-items:center; }
.spinner{ width:20px; height:20px; }
.spinner__track{
  cx:12; cy:12; r:10; fill:none; stroke: currentColor; opacity:.25; stroke-width:4;
}
.spinner__head{
  fill:none; stroke: currentColor; stroke-width:4; stroke-linecap:round; opacity:.85;
}
.material-symbols-outlined{ font-variation-settings:'OPSZ' 24; }

/* ========== Form ========== */
.form{ display:grid; gap: 14px; }
.field{ display:grid; gap:6px; }
.field__row{ display:flex; align-items:center; justify-content:space-between; }
.label{ font-size: .95rem; font-weight: 600; }
.input{
  width:100%; height:44px; border-radius:10px; border:1px solid var(--border);
  padding: 0 12px; background: transparent; color: var(--text);
}
.input:focus{ outline:2px solid var(--ring); outline-offset: 2px; }
.input--with-icon{ padding-right: 44px; }

.password{ position:relative; }
.password__toggle{
  position:absolute; inset: 0 6px 0 auto; width:36px; display:flex; align-items:center;
  justify-content:center; border-radius:8px; color:#6b7280; background: transparent; border: none; cursor:pointer;
}

.meter{
  margin-top: 8px; width:100%; height: 6px; border-radius: 6px; background: #e5e7eb;
}
.dark .meter{ background:#334155; }
.meter__bar{ height:100%; border-radius: 6px; transition: width .2s ease; }

/* strength color classes (mapped from JS) */
.bg-rose-500{ background:#ef4444; }
.bg-amber-500{ background:#f59e0b; }
.bg-yellow-500{ background:#eab308; }
.bg-lime-500{ background:#84cc16; }
.bg-emerald-500{ background:#10b981; }

.text-rose-600{ color:#e11d48; }
.text-amber-600{ color:#d97706; }
.text-yellow-700{ color:#a16207; }
.text-lime-700{ color:#3f6212; }
.text-emerald-700{ color:#047857; }

.help{ margin:.25rem 0 0; font-size:.8rem; color: var(--text-weak); }
.help--error{ color:#e11d48; }

/* Checkbox */
.checkbox{ display:inline-flex; gap:.5rem; align-items:center; }
.checkbox input{ width:16px; height:16px; }

/* Divider */
.divider{ display:flex; align-items:center; gap:12px; margin: 14px 0; color:#9ca3af; }
.divider::before,.divider::after{ content:""; height:1px; background: var(--border); flex:1; }
.divider > span{ font-size:.78rem; }

/* OAuth */
.oauth{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oauth__btn{ display:flex; gap:8px; align-items:center; justify-content:center; }
.oauth__icon{ width:20px; height:20px; }

/* Secondary text */
.terms{ margin: 8px 0 0; text-align:center; font-size:.82rem; color: var(--text-weak); }
.signup{ margin: 12px 0 0; text-align:center; }

/* ========== Modal ========== */
.modal{
  position: fixed; inset:0; z-index: 50; display:grid; place-items:center;
  padding: 16px; background: rgba(0,0,0,.4);
}
.modal__card{
  width:100%; max-width: 560px; background: var(--bg-elev); color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-2);
}
.modal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.modal__title{ font-size: 18px; font-weight: 800; margin:0; }
.modal__body{ display:grid; gap: 14px; }
.modal__body--row{ display:flex; gap:10px; align-items:center; }
.modal__actions{ display:flex; justify-content:flex-end; margin-top: 6px; }

/* Tenant chooser */
.tenant{ display:grid; gap:8px; }
.tenant__grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:480px){ .tenant__grid{ grid-template-columns: 1fr; } }
.tenant__item{
  display:block; text-align:left; border:1px solid var(--border); background: #f8fafc;
  color:#0f172a; padding: 10px 12px; border-radius:10px; cursor:pointer;
}
.dark .tenant__item{ background:#0b1220; color:#e5e7eb; }
.tenant__item:hover{ background: #eef2f7; }
.dark .tenant__item:hover{ background:#121a26; }
.tenant__name{ font-weight: 700; }
.tenant__slug{ font-size:.75rem; color:#6b7280; }

/* Responsive panel spacing */
@media (min-width: 480px){ .panel{ padding: 28px; } }
@media (min-width: 640px){ .panel{ padding: 32px; } }