/* app-v2.css — light theme matching aero-track-six exactly */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Exact aero-track-six light-mode tokens */
  --bg:      #edf3f7;
  --card:    #ffffff;
  --card2:   #e5ecf3;
  --border:  #d0d9e0;
  --input:   #d0d9e0;
  --text:    #122032;
  --text-2:  #515f6e;
  --text-3:  #8a9baa;
  --primary: #006fd9;
  --accent:  #e58212;
  --red:     #df202e;
  --shadow:  rgba(18,32,50,.08);
  /* Altitude bands */
  --band-gnd:    #657383;
  --band-low:    #de3e2d;
  --band-mid:    #b67700;
  --band-high:   #009342;
  --band-cruise: #006fd9;
  --band-arr:    #009342;
  --band-dep:    #006fd9;
  --band-enr:    #b67700;
  /* Fonts */
  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'Fira Code', monospace;
  /* Responsive spacing */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px; /* base — prevents iOS auto-zoom */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Make everything scale nicely */
img, svg { max-width: 100%; }
.screen  { min-height: 100dvh; }
.hidden  { display: none !important; }

/* ─── Welcome ────────────────────────────────────────────────────────────── */
#welcome,
#login-screen,
#otp-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 48px) 24px calc(var(--safe-bot) + 48px);
}

#welcome-inner {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  width: 100%; max-width: 360px; gap: 18px;
}

.hero-icon {
  position: relative; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.hero-icon-inner {
  width: 80px; height: 80px; border-radius: 22px;
  background: linear-gradient(145deg, #e5f1fd, #f0f7ff);
  border: 1.5px solid rgba(0,111,217,.25);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,111,217,.15);
}

#welcome h1 {
  font-size: 32px; font-weight: 800;
  letter-spacing: -.5px; color: var(--text);
}

.hero-sub  { font-size: 17px; color: var(--text-2); line-height: 1.55; }
.hero-note { font-size: 14px; color: var(--text-3); }

/* ─── App screen ─────────────────────────────────────────────────────────── */
#app-screen {
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: calc(var(--safe-bot) + 24px);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
#app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  position: sticky; top: 0;
  background: rgba(237,243,247,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); z-index: 100;
}
.app-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--text);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary); color: #fff;
  border: none; border-radius: 14px;
  font-size: 17px; font-weight: 700; padding: 16px 32px;
  cursor: pointer; width: 100%; margin-top: 8px;
  font-family: var(--font); transition: opacity .15s;
  box-shadow: 0 4px 16px rgba(0,111,217,.3);
}
.btn-primary:active { opacity: .8; }

.btn-outline {
  display: block; text-align: center;
  background: transparent; color: var(--primary);
  border: 1.5px solid rgba(0,111,217,.3);
  border-radius: 14px; font-size: 16px; font-weight: 600;
  padding: 14px; cursor: pointer; text-decoration: none; margin-top: 12px;
  transition: background .15s;
}
.btn-outline:active { background: rgba(0,111,217,.06); }

.btn-text { background: none; border: none; color: var(--primary); font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 2px; font-family: var(--font); }
.btn-text.danger { color: var(--red); }
.btn-text-sm { background: none; border: none; color: var(--text-3); font-size: 14px; cursor: pointer; padding: 4px 2px; font-family: var(--font); }

.btn-icon {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 50%; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); transition: background .15s;
}
.btn-icon:active { background: #d0d9e0; }

.btn-demo {
  display: block; width: 100%; text-align: center; padding: 14px;
  border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--primary);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.btn-demo:active { background: var(--card2); }

/* ─── Display card ───────────────────────────────────────────────────────── */
#display-card {
  background: var(--card); border-radius: 18px;
  padding: 20px 18px 18px; margin: 16px 16px 0;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow);
}
#display-name-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#disp-name-label  { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }

#display-url-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card2); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; margin-bottom: 16px; border: 1px solid var(--border);
  transition: background .12s;
}
#display-url-row:active { background: #d0d9e0; }
#disp-url-text { font-size: 12px; color: var(--text-2); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; margin-right: 10px; }
.copy-hint { font-size: 13px; font-weight: 700; color: var(--primary); flex-shrink: 0; }

#qr-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
#qr-img  { width: 160px; height: 160px; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 2px 8px var(--shadow); }
.qr-hint { text-align: center; font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: 4px; }

/* ─── Config form ────────────────────────────────────────────────────────── */
#config-form { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 4px; }

.cfg-section {
  background: var(--card); border-radius: 16px;
  padding: 16px 16px 14px; border: 1px solid var(--border);
  margin-top: 12px; box-shadow: 0 1px 4px var(--shadow);
}
.cfg-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }

/* Location tabs */
.loc-tabs { display: flex; background: var(--card2); border-radius: 10px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--border); }
.loc-tab  { flex: 1; background: none; border: none; border-radius: 8px; color: var(--text-2); font-size: 15px; font-weight: 600; font-family: var(--font); padding: 9px; cursor: pointer; transition: all .15s; }
.loc-tab.active { background: var(--card); color: var(--primary); border: 1px solid rgba(0,111,217,.2); box-shadow: 0 1px 4px var(--shadow); }

/* Inputs */
.input-wrap { display: flex; align-items: center; gap: 8px; background: var(--card2); border-radius: 12px; padding: 0 14px; border: 1.5px solid var(--border); transition: border-color .15s; }
.input-wrap:focus-within { border-color: var(--primary); }
.input-icon { color: var(--text-3); flex-shrink: 0; }
.input-wrap input { background: none; border: none; outline: none; color: var(--text); font-family: var(--font); font-size: 16px; padding: 13px 0; width: 100%; } /* 16px prevents iOS zoom */
.input-wrap input::placeholder { color: var(--text-3); }

.zip-row { display: flex; gap: 8px; align-items: stretch; }
.btn-zip-go { background: var(--primary); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 0 18px; cursor: pointer; font-family: var(--font); flex-shrink: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,111,217,.25); }
.btn-zip-go:disabled { opacity: .5; cursor: default; }
.btn-zip-go:active:not(:disabled) { opacity: .8; }

/* Dropdown */
.results-list { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 8px; box-shadow: 0 4px 16px var(--shadow); }
.result-item  { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--border); }
.result-item:last-child { border-bottom: none; }
.result-item:active { background: var(--card2); }
.result-item.no-results { color: var(--text-3); font-size: 14px; cursor: default; pointer-events: none; gap: 10px; align-items: flex-start; }
.no-results-icon { font-size: 16px; color: #e58212; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.no-results-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.no-results-sub   { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.loc-coverage-note { display: flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12px; color: var(--text-3); background: #fff8f0; border: 1px solid #f5d89c; border-radius: 7px; margin-top: 6px; }
.loc-coverage-note.hidden { display: none; }
.result-iata { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--primary); width: 40px; flex-shrink: 0; }
.result-info { flex: 1; min-width: 0; }
.result-name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-city { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* Chips */
.selected-chip, #zip-result { display: flex; align-items: center; justify-content: space-between; background: rgba(0,111,217,.06); border: 1px solid rgba(0,111,217,.2); border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 15px; color: var(--primary); font-weight: 600; }
.chip-clear { font-size: 13px; cursor: pointer; color: var(--text-3); }

/* Pills */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: var(--card2); border: 1.5px solid var(--border); border-radius: 20px; color: var(--text-2); font-size: 15px; font-weight: 600; padding: 9px 17px; cursor: pointer; font-family: var(--font); transition: all .15s; min-height: 44px; display: flex; align-items: center; }
.pill:active { opacity: .7; }
.pill.active { background: rgba(0,111,217,.08); border-color: var(--primary); color: var(--primary); }

/* Layout grid */
.layout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.layout-btn  { background: var(--card2); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 6px 8px; cursor: pointer; font-family: var(--font); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all .15s; }
.layout-btn span { font-size: 12px; color: var(--text-2); font-weight: 700; }
.layout-btn.active { background: rgba(0,111,217,.06); border-color: rgba(0,111,217,.35); }
.layout-btn.active span { color: var(--primary); }
.layout-preview { width: 100%; height: 32px; border-radius: 5px; background: var(--border); position: relative; overflow: hidden; }
.split-prev::before { content:''; position:absolute; top:0;left:0;width:55%;height:100%; background:rgba(0,111,217,.1); }
.split-prev::after  { content:''; position:absolute; top:2px;right:2px;width:43%;height:calc(100% - 4px); background:rgba(0,111,217,.06); border-radius:3px; }
.radar-prev::before { content:''; position:absolute; inset:4px; border:1px solid rgba(0,111,217,.3); border-radius:50%; }
.board-prev { display:flex; flex-direction:column; justify-content:space-around; padding:5px 4px; }
.board-prev::before,.board-prev::after { content:''; display:block; height:3px; background:rgba(0,111,217,.18); border-radius:2px; }
.minimal-prev::before { content:''; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:10px;height:10px; background:rgba(0,111,217,.2); border-radius:50%; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
#app-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 0; font-size: 13px; color: var(--text-3); }

/* ─── Closest Traffic ────────────────────────────────────────────────────── */
#flights-section { margin: 12px 16px 0; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 12px var(--shadow); }

/* Stats grid */
.af-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.af-stat  { padding: 14px 8px 12px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.af-stat:last-child { border-right: none; }
.af-stat-num { font-family: var(--mono); font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.af-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 700; }
.af-stat-cruise .af-stat-num { color: var(--band-cruise); }
.af-stat-high   .af-stat-num { color: var(--band-high); }
.af-stat-arr    .af-stat-num { color: var(--band-arr); }
.af-stat-dep    .af-stat-num { color: var(--band-dep); }

/* Header */
.af-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; border-bottom: 1px solid var(--border); background: #f4f8fb; }
.af-header-title { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); flex: 1; }
.btn-refresh-flights { background: none; border: none; color: var(--primary); font-size: 17px; cursor: pointer; padding: 2px 4px; line-height: 1; }

/* Search + filter controls */
.af-controls { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: #fff; }
.af-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--card2); border: 1.5px solid var(--border); border-radius: 10px; padding: 0 10px; transition: border-color .15s; }
.af-search-wrap:focus-within { border-color: var(--primary); }
.af-search-icon { color: var(--text-3); flex-shrink: 0; }
.af-search-wrap input[type=search] { background: none; border: none; outline: none; color: var(--text); font-family: var(--font); font-size: 14px; padding: 9px 0; width: 100%; }
.af-search-wrap input::placeholder { color: var(--text-3); }
.af-search-wrap input::-webkit-search-cancel-button { display: none; }
.af-clear-btn { background: none; border: none; color: var(--text-3); font-size: 12px; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.af-clear-btn.hidden { display: none; }
.af-toolbar { display: flex; align-items: center; gap: 8px; }
.af-select { background: var(--card2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 6px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; flex-shrink: 0; }
.af-select:focus { outline: none; border-color: var(--primary); }
.af-filter-pills { display: flex; gap: 5px; flex: 1; }
.af-fpill { background: var(--card2); border: 1.5px solid var(--border); border-radius: 14px; color: var(--text-3); font-size: 11px; font-weight: 800; padding: 5px 10px; cursor: pointer; font-family: var(--font); letter-spacing: .04em; transition: all .12s; flex: 1; text-align: center; }
.af-fpill.active { background: rgba(0,111,217,.08); border-color: var(--primary); color: var(--primary); }

.app-flights-placeholder { padding: 28px; text-align: center; font-size: 14px; color: var(--text-3); }

/* Rows */
.af-row { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; user-select: none; }
.af-row:last-child { border-bottom: none; }
.af-row:active, .af-row.spotlit { background: rgba(0,111,217,.05); }

/* Airline badge (colored square, mirrors display board) */
.af-airline-badge {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .04em;
  font-family: var(--mono); overflow: hidden;
}

.af-row-main { flex: 1; min-width: 0; }
.af-row-top  { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.af-cs       { font-family: var(--mono); font-size: 16px; font-weight: 900; letter-spacing: .04em; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.af-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0; border: 1px solid; }
.af-badge-ARR { color: var(--band-arr);   background: rgba(0,147,66,.08);   border-color: rgba(0,147,66,.25); }
.af-badge-DEP { color: var(--band-dep);   background: rgba(0,111,217,.08);  border-color: rgba(0,111,217,.25); }
.af-badge-ENR { color: var(--band-enr);   background: rgba(182,119,0,.08);  border-color: rgba(182,119,0,.25); }
.af-badge-GND { color: var(--band-gnd);   background: rgba(101,115,131,.08); border-color: rgba(101,115,131,.2); }

.af-dist      { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
.af-dist-unit { font-size: 11px; color: var(--text-3); font-weight: 600; }

.af-row-bot { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; flex-wrap: wrap; }
.af-sep { opacity: .35; }
.af-alt-cruise { color: var(--band-cruise); font-weight: 700; }
.af-alt-high   { color: var(--band-high);   font-weight: 700; }
.af-alt-mid    { color: var(--band-mid);    font-weight: 700; }
.af-alt-low    { color: var(--band-low);    font-weight: 700; }

/* QR button on flight row */
.af-qr-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-3); font-size: 16px; line-height: 1; padding: 6px 8px; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.af-qr-btn:hover { color: var(--primary); border-color: var(--primary); }
.af-alt-gnd    { color: var(--band-gnd); }

/* Toast */
.spotlight-sent { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; border-radius: 20px; padding: 10px 22px; font-size: 14px; font-weight: 700; pointer-events: none; white-space: nowrap; animation: toast-in .2s ease, toast-out .3s ease 1.5s forwards; z-index: 9999; box-shadow: 0 4px 16px rgba(0,111,217,.35); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-out { to   { opacity: 0; } }

/* ── Weather alert banner ─────────────────────────────────────────────────── */
#wx-alert-banner { margin: 0 16px 12px; border-radius: 12px; overflow: hidden; }
#wx-alert-banner.hidden { display: none; }
.wx-alert-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: #fff5f0; border: 1px solid #ffb99a;
  border-radius: 12px; margin-bottom: 6px;
}
.wx-alert-row:last-child { margin-bottom: 0; }
.wx-alert-icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.wx-alert-body { flex: 1; min-width: 0; }
.wx-alert-event { font-size: 13px; font-weight: 700; color: #c0391a; letter-spacing: .02em; }
.wx-alert-headline { font-size: 11px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.wx-alert-sev { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px;
  border-radius: 6px; flex-shrink: 0; align-self: flex-start; text-transform: uppercase; }
.wx-sev-extreme  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.wx-sev-severe   { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.wx-sev-moderate { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* QR button on flight row */
.af-qr-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-3); font-size: 16px; line-height: 1; padding: 6px 8px; cursor: pointer; flex-shrink: 0; transition: all .15s; }
.af-qr-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ─── Plan selection ────────────────────────────────────────────────────── */
#plan-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 32px) 24px calc(var(--safe-bot) + 32px);
}
#plan-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 400px; gap: 16px;
}
#plan-inner h1 { font-size: 28px; font-weight: 800; letter-spacing: -.4px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 4px; }
.plan-card {
  background: var(--card); border: 2px solid var(--border); border-radius: 18px;
  padding: 20px 16px; cursor: pointer; text-align: left; transition: all .15s;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font);
}
.plan-card:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,111,217,.15); }
.plan-card.featured { border-color: var(--primary); background: rgba(0,111,217,.04); }
.plan-badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; width: fit-content;
  background: rgba(0,111,217,.1); color: var(--primary); border: 1px solid rgba(0,111,217,.2); }
.plan-badge.free-badge { background: rgba(0,147,66,.1); color: #009342; border-color: rgba(0,147,66,.2); }
.plan-name { font-size: 20px; font-weight: 800; color: var(--text); }
.plan-price { font-size: 14px; font-weight: 600; color: var(--text-2); }
.plan-features { font-size: 12px; color: var(--text-3); line-height: 1.6; margin-top: 4px; }
.plan-cta { margin-top: 8px; background: var(--primary); color: #fff; border: none;
  border-radius: 12px; font-size: 15px; font-weight: 700; padding: 12px; cursor: pointer;
  font-family: var(--font); width: 100%; transition: opacity .15s; }
.plan-cta:active { opacity: .8; }
.plan-cta.free-cta { background: var(--card2); color: var(--primary); border: 1.5px solid rgba(0,111,217,.3); }

/* ─── Auth screens ──────────────────────────────────────────────────────── */
.auth-input {
  width: 100%; max-width: 320px; margin: 0 auto 14px; display: block;
  padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card2);
  color: var(--text); font-size: 16px; font-family: inherit;
  outline: none; text-align: center; transition: border-color .2s;
}
.auth-input::placeholder { color: var(--text-3); }
.auth-input:focus { border-color: var(--primary); }
.auth-otp { letter-spacing: .35em; font-size: 22px; font-weight: 700; font-family: var(--mono); }
.auth-error { margin-top: 10px; color: var(--red); font-size: 13px; text-align: center; }
.btn-text-sm { background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 8px; margin-top: 4px; text-decoration: underline; font-family: inherit; }
.btn-text-sm:hover { color: var(--text-2); }