/* ==========================================================================
   CreativeFT Connect — WhatsApp Business Management Platform
   Design System Stylesheet  ·  v1.0
   --------------------------------------------------------------------------
   Dark theme is the default (:root). Light theme activates on
   [data-theme="light"] set on <html> or a top-level wrapper.
   RTL activates on dir="rtl". Fonts: Plus Jakarta Sans (Latin),
   IBM Plex Sans Arabic (Arabic), IBM Plex Mono (numeric/code).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

/* Tokens now live in src/themes/ibconnect/tokens.css (loaded once by
   main.tsx). This file keeps only component CSS — no raw colours, all
   var(--…) references. */
/* Fix datetime-local icon visibility in dark mode */
input[type="datetime-local"] {
  color-scheme: inherit;
}

/* ---------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[dir="rtl"] body, [dir="rtl"] { font-family:var(--ar); }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-600); text-decoration:underline; }
::selection { background:var(--brand-soft); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }

/* ------------------------------------------------------------ TYPOGRAPHY */
/* Headings use Outfit, body text Manrope, Arabic Tajawal (see --display/--sans/--ar). */
h1, h2, h3, h4, h5, h6 { font-family: var(--display); }
.h-display { font-family: var(--display); font-size:var(--fs-display); font-weight:700; letter-spacing:-.025em; line-height:1.08; }
.h1 { font-family: var(--display); font-size:var(--fs-h1); font-weight:700; letter-spacing:-.02em; }
.h2 { font-family: var(--display); font-size:var(--fs-h2); font-weight:700; }
.body { font-size:var(--fs-body); line-height:1.6; color:var(--text); }
.muted { color:var(--text-2); }
.subtle { color:var(--text-3); }
.mono { font-family:var(--mono); font-size:var(--fs-mono); }
/* LTR isolation — phone numbers, dates/times, amounts, codes, emails and API-key
   prefixes must not be reordered when they sit inside RTL text (e.g. "+966…" → "966…+"). */
.ltr { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .h-display, [dir="rtl"] .h1 { letter-spacing:0; line-height:1.25; }

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--sans); font-size:var(--fs-body); font-weight:600;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
  white-space:nowrap;
}
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.btn-primary { background:var(--brand); color:var(--brand-foreground); box-shadow:0 2px 8px var(--brand-soft); }
.btn-primary:hover { background:var(--brand-600); }
.btn-secondary { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--text-3); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }
.btn-danger { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:var(--on-solid); }
.btn[disabled] { background:var(--surface-2); color:var(--text-3); cursor:not-allowed; opacity:.7; }
.btn-sm { padding:6px 12px; font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn-lg { padding:13px 24px; font-size:16px; }
.btn-icon { width:40px; height:40px; padding:0; justify-content:center; }
/* Compact icon button for dense table action columns (5+ icon actions per row). */
.btn-icon-sm { width:26px; height:26px; padding:0; justify-content:center; border-radius:var(--r-sm); }
/* Single-line ellipsis for long cell content (emails, ids). */
.truncate { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; max-width:100%; }

/* -------------------------------------------------------------- FORM FIELDS */
.field { display:flex; flex-direction:column; gap:6px; }
.label { font-size:var(--fs-sm); font-weight:600; color:var(--text-2); }
.input, .select, .textarea {
  padding:11px 14px; border-radius:var(--r); border:1px solid var(--border-strong);
  background:var(--bg-2); color:var(--text); font-family:var(--sans); font-size:var(--fs-body);
  outline:none; width:100%;
}
.textarea { resize:vertical; line-height:1.6; }
.input:focus, .select:focus, .textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
.input.is-error, .select.is-error { border-color:var(--danger); }
/* Native <select> clips its text vertically when a page pins a small height
   (the Outbox filter selects set height:36 with the shared 11px block padding,
   leaving a 14px content box for a 12px label). Scale the select's vertical
   padding to its font and set an explicit line-height so the label stays
   centred inside any fixed height. */
.select { padding-block:0.5em; line-height:1.35; }
.hint { font-size:var(--fs-xs); color:var(--text-3); }
.hint-error { font-size:var(--fs-xs); color:var(--danger); display:flex; align-items:center; gap:5px; }
.select-wrap { position:relative; }
.select-wrap svg { position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
/* toggle switch */
.switch { width:42px; height:24px; border-radius:999px; background:var(--surface-3); position:relative; cursor:pointer; transition:background .15s; }
.switch.on { background:var(--brand); }
.switch::after { content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%; background:var(--text-3); transition:inset-inline-start .15s, background .15s; }
.switch.on::after { inset-inline-start:20px; background:var(--brand-foreground); }

/* ---------------------------------------------------------------- CARD */
.card { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.card-pad { padding:var(--space-5); }
.card-elevated { box-shadow:var(--shadow); }
.stat { text-align:center; padding:9px 4px; background:var(--surface-2); border-radius:var(--r-sm); }
.stat-value { font-size:16px; font-weight:700; }
.stat-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

/* ---------------------------------------------------------------- BADGES */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; }
.badge-sq { border-radius:var(--r-sm); }
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
/* status color helpers — apply to .badge */
.is-success  { background:var(--success-soft); color:var(--success); }
.is-warning  { background:var(--warning-soft); color:var(--warning); }
.is-danger   { background:var(--danger-soft);  color:var(--danger); }
.is-info     { background:var(--info-soft);    color:var(--info); }
.is-neutral  { background:var(--neutral-soft); color:var(--neutral); }
.is-brand    { background:var(--brand-soft);   color:var(--brand); }

/* ---------------------------------------------------------------- TABLE */
.table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table thead tr { background:var(--surface-2); }
.table th { padding:10px 14px; text-align:start; font-weight:600; color:var(--text-2); white-space:nowrap; }
.table td { padding:10px 14px; border-top:1px solid var(--border); }
.table tbody tr:hover { background:var(--surface-2); }
.table-wrap { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.table-scroll { overflow-x:auto; }
.toolbar { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--border); font-size:var(--fs-sm); color:var(--text-3); flex-wrap:wrap; gap:10px; }
.page-btn { width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; }
.page-btn.active { background:var(--brand); color:var(--brand-foreground); border-color:var(--brand); font-weight:600; }

/* ---------------------------------------------------------------- LAYOUT SHELL */
.app { height:100vh; display:flex; overflow:hidden; }
.sidebar { width:var(--sidebar-w); flex-shrink:0; display:flex; flex-direction:column; background:var(--bg-2); border-inline-end:1px solid var(--border); transition:width .18s ease; }
.sidebar.collapsed { width:var(--sidebar-collapsed-w); }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 24px; min-height:var(--topbar-h); border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); flex-shrink:0; }
.content { flex:1; overflow-y:auto; }
.content-inner { max-width:1240px; margin:0 auto; padding:24px 24px 64px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; padding:9px 11px; border:none; border-radius:var(--r); background:transparent; color:var(--text-2); font-family:var(--sans); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--ink); color:var(--ink-foreground); font-weight:700; border-radius:999px; }
.nav-group-label { padding:14px 8px 6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

/* ---------------------------------------------------------------- DIALOG / MODAL */
.overlay { position:fixed; inset:0; z-index:60; background:var(--overlay-bg); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:overlayIn .15s ease; }
.dialog { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; animation:dialogIn .2s cubic-bezier(.2,.8,.2,1); }
.dialog-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }

/* ---------------------------------------------------------------- TOAST */
.toast { position:fixed; inset-inline-end:24px; bottom:24px; z-index:70; display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-strong); border-inline-start:4px solid var(--neutral); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; min-width:300px; max-width:380px; animation:toastIn .25s cubic-bezier(.2,.8,.2,1); }
.toast.is-success { border-inline-start-color:var(--success); }
.toast.is-warning { border-inline-start-color:var(--warning); }
.toast.is-danger  { border-inline-start-color:var(--danger); }
.toast.is-info    { border-inline-start-color:var(--info); }

/* ---------------------------------------------------------------- STATES */
.empty-state { text-align:center; padding:36px 24px; }
.empty-icon { width:56px; height:56px; margin:0 auto 16px; border-radius:16px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
.skeleton { border-radius:6px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%); background-size:800px 100%; animation:shimmer 1.4s infinite linear; }
.alert-error { border:1px solid var(--danger); border-radius:var(--r-lg); background:var(--danger-soft); padding:24px; display:flex; gap:14px; align-items:flex-start; }
.progress { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:999px; background:var(--brand); }

/* ---------------------------------------------------------------- SHARED COMPONENTS (Phase 2a) */
/* stat card — KPI tile */
.stat-card { display:flex; flex-direction:column; gap:12px; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.stat-card__row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.stat-card__label { font:500 13px/1.4 var(--sans); color:var(--text-2); white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; }
.stat-card__icon { width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-card__value { font:700 32px/1.1 var(--sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.stat-card__foot { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.stat-card__foot-note { font:400 12px var(--sans); color:var(--text-3); }
/* accent variant — green gradient tile (dark-mode footnote/delta fixed for contrast) */
.stat-card.accent { background:linear-gradient(135deg,var(--brand),var(--brand-bright)); color:var(--brand-foreground); border-color:transparent; }
.stat-card.accent .stat-card__label,
.stat-card.accent .stat-card__value { color:var(--brand-foreground); }
.stat-card.accent .stat-card__foot-note { color:color-mix(in srgb, var(--brand-foreground) 80%, transparent); }
.stat-card.accent .stat-card__icon { background:color-mix(in srgb, var(--glass-ink) 22%, transparent); color:var(--brand-foreground); }
.stat-card.accent .delta-chip { background:color-mix(in srgb, var(--brand-foreground) 20%, transparent); color:var(--brand-foreground); }

/* delta chip — soft pill with arrow (flips in RTL) */
.delta-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font:600 12px var(--sans); font-variant-numeric:tabular-nums; }
.delta-chip svg { width:12px; height:12px; }
.delta-chip.up   { background:var(--success-soft); color:var(--success); }
.delta-chip.down { background:var(--danger-soft);  color:var(--danger); }
.delta-chip.flat { background:var(--neutral-soft); color:var(--text-2); }
[dir="rtl"] .delta-chip svg { transform:scaleX(-1); }

/* status pill — soft emerald chip (dot + label), never a solid fill */
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font:600 12.5px var(--sans); white-space:nowrap; }
.status-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status-pill.success { background:var(--success-soft); color:var(--success); }
.status-pill.warning { background:var(--warning-soft); color:var(--warning); }
.status-pill.danger  { background:var(--danger-soft);  color:var(--danger); }
.status-pill.info    { background:var(--info-soft);    color:var(--info); }
.status-pill.neutral { background:var(--neutral-soft); color:var(--neutral); }

/* pill nav — segmented control, active = dark filled pill */
.pill-nav { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.pill-nav button { border:none; background:transparent; color:var(--text-2); font:500 13px var(--sans); padding:7px 16px; border-radius:999px; cursor:pointer; transition:background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.pill-nav button:hover { color:var(--text); }
.pill-nav button.active { background:var(--ink); color:var(--ink-foreground); font-weight:600; }

/* interactivity (design parity §C) — hover lift + active transitions on the
   shared tokens so every KPI card and nav item picks them up at once. */
.stat-card { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.chart-card { transition: box-shadow var(--duration-base) var(--ease-out); }
.nav-item { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.sidebar .nav-item.active, .nav-item.active { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-radius var(--duration-fast) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .stat-card, .chart-card, .nav-item { transition: none; }
  .stat-card:hover { transform: none; }
}

/* chart card — card with title row + muted legend */
.chart-card { padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
.chart-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.chart-card__title { font:600 15px var(--sans); color:var(--text); }
.chart-card__legend { display:flex; align-items:center; gap:14px; }
.chart-card__legend span { display:inline-flex; align-items:center; gap:5px; font:500 12px var(--sans); color:var(--text-2); }
.chart-card__legend i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* skeleton — shimmer bars (surface-2 → surface-3) */
.skeleton { border-radius:8px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%); background-size:800px 100%; animation:shimmer 1.4s infinite linear; }

/* empty state — centered icon in a soft circle + title + body + action */
.empty-state__icon { width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--surface-2); color:var(--text-3); display:flex; align-items:center; justify-content:center; }
.empty-state__title { font:600 15px var(--sans); color:var(--text); }
.empty-state__body { margin:6px auto 0; max-width:36ch; font:400 13px/1.5 var(--sans); color:var(--text-3); }
.empty-state__action { margin-top:16px; }

/* ---------------------------------------------------------------- CHAT BUBBLES (inbox) */
.bubble-in  { max-width:76%; background:var(--surface); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:10px 13px; }
.bubble-out { max-width:76%; background:var(--brand); color:var(--brand-foreground); border-radius:14px 14px 4px 14px; padding:10px 13px; margin-inline-start:auto; }

/* ---------------------------------------------------------------- CODE BLOCK (api docs) */
.code { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); padding:14px; font-family:var(--mono); font-size:12.5px; line-height:1.7; overflow-x:auto; position:relative; }
.code .k { color:var(--info); }     /* key */
.code .s { color:var(--brand); }    /* string */
.code .n { color:var(--warning); }  /* number */
.code .b { color:var(--success); }  /* boolean/enum */
.method { padding:1px 7px; border-radius:5px; font-family:var(--mono); font-size:10px; font-weight:700; }
.method.post { background:var(--success-soft); color:var(--success); }
.method.get  { background:var(--info-soft);    color:var(--info); }
.method.put  { background:var(--warning-soft); color:var(--warning); }
.method.del  { background:var(--danger-soft);  color:var(--danger); }

/* ---------------------------------------------------------------- ANIMATIONS */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes toastIn { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
@keyframes dialogIn { from { transform:translateY(12px) scale(.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes growBar { from { height:0; } }
.spinner { width:15px; height:15px; border:2px solid color-mix(in srgb, var(--glass-ink) 40%, transparent); border-top-color:var(--on-solid); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }

/* ---------------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------- RESPONSIVE */
/* Breakpoints: mobile <640, tablet 640–1024, desktop >1024 */
@media (max-width:1024px) {
  .sidebar { position:fixed; inset-block:0; inset-inline-start:0; z-index:50; transform:translateX(-100%); transition:transform .2s ease; }
  [dir="rtl"] .sidebar { transform:translateX(100%); }
  .sidebar.open { transform:translateX(0); }
  .content-inner { padding:16px 16px 48px; }
}
@media (max-width:640px) {
  :root { --fs-display:30px; --fs-h1:20px; }
  .topbar { padding:10px 14px; gap:8px; }
  .table th, .table td { padding:10px 12px; }
}


/* ==========================================================================
   AUTH — crystal glass over deep navy gradient
   Always a dark-navy surface regardless of theme (a separate surface, per DESIGN.md).
   Login / Register / Verification + prose headers. No one-off hex — all tokens.
   ========================================================================== */

/* -------- shared shell: gradient + green glows + centered card -------- */
.auth-shell {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; justify-content: center; padding: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--gradient-start) 0%, var(--gradient-mid) 55%, var(--gradient-end) 100%);
  color: var(--glass-ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.auth-glow, .auth-glow--2 {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-glow) 26%, transparent), transparent 70%);
  filter: blur(42px); pointer-events: none;
}
.auth-glow { inset-inline-start: -150px; top: -150px; }
.auth-glow--2 { inset-inline-end: -150px; bottom: -170px; }

/* top-right language + theme toggles */
.auth-topbar { position: absolute; top: 20px; inset-inline-end: 20px; display: flex; gap: 8px; z-index: 2; }
.auth-iconbtn {
  height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r); cursor: pointer; border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--glass-ink); font: 600 12px var(--sans);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .15s;
}
.auth-iconbtn:hover { background: var(--glass-hover); }

/* -------- glass card -------- */
.auth-card {
  position: relative; width: 100%; max-width: 420px; padding: 32px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass); color: var(--glass-ink);
}
.auth-card--wide { max-width: 580px; }

/* brand mark + wordmark */
.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand__mark {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; overflow: hidden; background: var(--logo-chip-bg);
  display: flex; align-items: center; justify-content: center;
}
.auth-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand__name { font: 700 15px var(--sans); color: var(--glass-ink); line-height: 1.2; }
.auth-brand__sub { font: 400 11.5px var(--sans); color: var(--glass-muted); }

/* headings */
.auth-title { margin: 0; font: 700 24px var(--sans); color: var(--glass-ink); letter-spacing: -.02em; }
[dir="rtl"] .auth-title { letter-spacing: 0; }
.auth-subtitle { margin: 6px 0 0; font: 400 13.5px/1.55 var(--sans); color: var(--glass-muted); }

/* form controls */
.auth-label { font: 600 13px var(--sans); color: var(--glass-muted); }
.auth-input {
  width: 100%; padding: 11px 14px; border-radius: var(--r);
  border: 1px solid var(--glass-border); background: var(--glass-input-bg);
  color: var(--glass-ink); font: 400 14px var(--sans); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: var(--glass-subtle); }
.auth-input:hover { border-color: var(--glass-hover); }
.auth-input:focus { border-color: var(--brand-glow); box-shadow: 0 0 0 3px var(--glass-ring); }
.auth-input.is-error { border-color: var(--glass-danger); }
.auth-hint { font: 400 12px var(--sans); color: var(--glass-subtle); }
.auth-error { font: 400 12px var(--sans); color: var(--glass-danger); display: flex; align-items: center; gap: 5px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.auth-input-wrap { position: relative; }
.auth-input--endpad { padding-inline-end: 44px; }
.auth-eye {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--glass-muted); cursor: pointer; border-radius: 8px;
}
.auth-eye:hover { color: var(--glass-ink); }

/* primary action — bright green gradient, dark text (continuous with the landing) */
.auth-btn {
  width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: var(--r); cursor: pointer;
  background: linear-gradient(135deg, var(--brand-glow) 0%, var(--brand-bright) 60%, var(--glass-btn-end) 120%);
  color: var(--glass-btn-fg); font: 700 15.5px var(--sans);
  box-shadow: var(--glass-btn-glow); transition: filter .15s, transform .1s;
}
.auth-btn:hover { filter: brightness(1.06); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn[disabled] { opacity: .6; cursor: default; filter: none; }
.auth-btn--ghost {
  height: 48px; background: var(--glass-input-bg); color: var(--glass-ink);
  border: 1px solid var(--glass-border); box-shadow: none; font-weight: 600;
}
.auth-btn--ghost:hover { background: var(--glass-hover); filter: none; }

/* divider — "or continue with" */
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--glass-subtle); font: 400 12.5px var(--sans); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }

/* OAuth buttons — official brand colours (Google white / Apple black) */
.auth-oauth {
  width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border-radius: var(--r); font: 600 14.5px var(--sans); cursor: pointer; border: none; transition: background .15s;
}
.auth-oauth--google { background: var(--oauth-google-bg); color: var(--oauth-google-fg); box-shadow: var(--shadow-oauth); }
.auth-oauth--google:hover { background: var(--oauth-google-bg-hover); }
.auth-oauth--apple { background: var(--oauth-apple-bg); color: var(--oauth-apple-fg); }
.auth-oauth--apple:hover { background: var(--oauth-apple-bg-hover); }

/* secondary link row */
.auth-foot { text-align: center; margin-top: 16px; font: 400 13.5px var(--sans); color: var(--glass-subtle); }
.auth-foot a { color: var(--brand-bright); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { color: var(--brand-glow); text-decoration: underline; }

/* error banner (glass) */
.auth-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--glass-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-danger) 40%, transparent);
  border-radius: var(--r); color: var(--glass-ink); font: 400 13px/1.5 var(--sans);
}
.auth-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--glass-danger); }

/* verification code input */
.auth-code { text-align: center; letter-spacing: 8px; font-size: 20px; font-weight: 600; }
.auth-spinner {
  width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--glass-ink) 35%, transparent); border-top-color: var(--on-solid);
  border-radius: 50%; animation: auth-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* status badge (glass) */
.auth-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font: 600 12.5px var(--sans);
}
.auth-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.auth-badge--warning { background: color-mix(in srgb, var(--glass-warning) 16%, transparent); color: var(--glass-warning); }
.auth-badge--success { background: color-mix(in srgb, var(--glass-success) 16%, transparent); color: var(--glass-success); }
.auth-badge--neutral { background: var(--glass-input-bg); color: var(--glass-muted); }

/* verification sub-card (email / whatsapp) */
.auth-verify-card {
  padding: 20px; border-radius: var(--r-lg); margin-bottom: 16px;
  background: var(--glass-input-bg); border: 1px solid var(--glass-border);
}
.auth-verify-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.auth-verify-card__icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: color-mix(in srgb, var(--glass-ink) 8%, transparent); color: var(--glass-muted);
  display: flex; align-items: center; justify-content: center;
}
.auth-verify-card__icon.is-done { color: var(--glass-success); background: color-mix(in srgb, var(--glass-success) 16%, transparent); }
.auth-verify-title { font: 600 14px var(--sans); color: var(--glass-ink); }
.auth-verify-sub { font: 400 12.5px var(--sans); color: var(--glass-subtle); }
.auth-verify-row { display: flex; gap: 8px; align-items: center; }
.auth-verify-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.auth-verify-actions .auth-btn { width: auto; height: 42px; padding: 0 20px; font-size: 14px; }
.auth-verify-actions .auth-btn--ghost { width: auto; height: 38px; padding: 0 16px; font-size: 13px; }

/* ==========================================================================
   DESIGN PARITY — crystal-glass accents (login-glass reference, in green/teal)
   Tech brackets, wave background, icons-in-inputs, glass checkbox, glass
   social buttons, the arrow on the primary action, and the highlighted
   subtitle word. Tokens only, logical properties, RTL-safe.
   ========================================================================== */

/* -------- wave background (green/teal, low opacity, behind the card) -------- */
.auth-waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-waves svg { position: absolute; inset-inline-start: 0; width: 100%; height: 100%; }
.auth-waves .auth-wave { fill: none; stroke-linecap: round; }
.auth-waves .auth-wave--a { stroke: var(--teal); opacity: .34; }
.auth-waves .auth-wave--b { stroke: var(--brand-glow); opacity: .22; }
.auth-waves .auth-wave--c { stroke: var(--brand-bright); opacity: .14; }
/* filled wave layers (brand green/teal, low opacity) under the stroke lines */
.auth-waves .auth-wave--fill-a { fill: var(--teal); stroke: none; opacity: .12; }
.auth-waves .auth-wave--fill-b { fill: var(--brand-glow); stroke: none; opacity: .09; }
.auth-waves .auth-wave--fill-c { fill: var(--brand-bright); stroke: none; opacity: .07; }
/* mirror the wave across RTL so it reads left-to-right consistently */
[dir="rtl"] .auth-waves svg { transform: scaleX(-1); }

/* -------- tech brackets on the card corners (mirror in RTL) -------- */
.auth-bracket {
  position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 1;
}
.auth-bracket--tl {
  top: 14px; inset-inline-start: 14px;
  border-top: 2px solid var(--brand-glow); border-inline-start: 2px solid var(--brand-glow);
  filter: drop-shadow(0 0 6px var(--brand-glow));
}
.auth-bracket--br {
  bottom: 14px; inset-inline-end: 14px;
  border-bottom: 2px solid var(--brand-glow); border-inline-end: 2px solid var(--brand-glow);
  filter: drop-shadow(0 0 6px var(--brand-glow));
}

/* -------- icon inside the input (focus changes its colour) -------- */
.auth-field-icon {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--glass-subtle); pointer-events: none; transition: color .2s ease;
}
.auth-input--icon { padding-inline-start: 42px; }
.auth-field-group:focus-within .auth-field-icon { color: var(--brand-glow); }

/* -------- glass checkbox (custom, like the reference) -------- */
.auth-check {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid var(--glass-border); background: var(--glass-input-bg);
  cursor: pointer; position: relative; margin: 0;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.auth-check:checked {
  background: linear-gradient(135deg, var(--brand-glow), var(--brand-bright));
  border-color: transparent; box-shadow: 0 0 12px color-mix(in srgb, var(--brand-glow) 50%, transparent);
}
.auth-check:checked::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px;
  width: 5px; height: 9px; border: solid var(--glass-btn-fg);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.auth-check:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 2px; }
.auth-check-label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 400 13px var(--sans); color: var(--glass-muted); user-select: none;
}

/* -------- glass social buttons (translucent + hairline border + hover lift) -------- */
/* The official logos stay unchanged (multicolour G, Apple mark); only the
   button surface becomes glass. Apple's mark uses currentColor, so it stays
   white on the translucent surface. */
.auth-oauth {
  width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border-radius: var(--r); font: 600 14.5px var(--sans); cursor: pointer;
  border: 1px solid var(--glass-border); background: var(--glass-input-bg); color: var(--glass-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.auth-oauth:hover {
  border-color: color-mix(in srgb, var(--brand-glow) 55%, var(--glass-border));
  background: var(--glass-hover); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-glow) 18%, transparent); transform: translateY(-2px);
}
.auth-oauth:active { transform: translateY(0); }
.auth-oauth:focus-visible { outline: 2px solid var(--brand-glow); outline-offset: 3px; }
.auth-oauth--google, .auth-oauth--apple { background: var(--glass-input-bg); color: var(--glass-ink); }
.auth-oauth--google:hover, .auth-oauth--apple:hover { background: var(--glass-hover); }
.reg-google, .reg-apple {
  height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid var(--glass-border); border-radius: var(--r); font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--glass-input-bg); color: var(--glass-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.reg-google:hover, .reg-apple:hover {
  border-color: color-mix(in srgb, var(--brand-glow) 55%, var(--glass-border));
  background: var(--glass-hover); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-glow) 18%, transparent); transform: translateY(-2px);
}

/* -------- primary action arrow + hover/tap motion -------- */
.auth-btn .auth-arrow { display: inline-flex; transition: transform .25s ease; }
.auth-btn:hover .auth-arrow { transform: translateX(4px); }
[dir="rtl"] .auth-btn:hover .auth-arrow { transform: translateX(-4px); }

/* -------- highlighted subtitle word -------- */
.auth-text-glow {
  background: linear-gradient(90deg, var(--brand-glow), var(--brand-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600;
}

/* -------- "forgot password" inline link -------- */
.auth-link {
  color: var(--brand-bright); font: 500 13px var(--sans); text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.auth-link:hover { color: var(--brand-glow); text-shadow: 0 0 12px color-mix(in srgb, var(--brand-glow) 60%, transparent); }

/* ==========================================================================
   REGISTER — two-column glass layout (brand panel + glass form cards)
   ========================================================================== */
.reg-shell {
  position: relative; min-height: 100vh; display: flex; overflow: hidden;
  background: linear-gradient(160deg, var(--gradient-start) 0%, var(--gradient-mid) 55%, var(--gradient-end) 100%);
  color: var(--glass-ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}

/* brand panel */
.reg-brand {
  width: 40%; max-width: 560px; flex-shrink: 0; position: relative; overflow: hidden;
  padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: color-mix(in srgb, var(--glass-ink) 3%, transparent); border-inline-end: 1px solid var(--glass-border);
}
.reg-brand__glow {
  position: absolute; inset-inline-start: -120px; top: -140px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-glow) 28%, transparent), transparent 70%); filter: blur(40px); pointer-events: none;
}
.reg-brand > * { position: relative; }
.reg-brand__title { margin: 0; font-size: 34px; line-height: 1.18; font-weight: 800; letter-spacing: -.5px; text-wrap: balance; color: var(--glass-ink); }
[dir="rtl"] .reg-brand__title { letter-spacing: 0; line-height: 1.3; }
.reg-brand__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--glass-muted); max-width: 38ch; text-wrap: pretty; }
.reg-perk { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--glass-muted); }
.reg-perk__tick {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
  background: color-mix(in srgb, var(--brand-bright) 18%, transparent); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.reg-brand__foot { font-size: 12px; color: var(--glass-subtle); }
.reg-brand__foot a { color: var(--brand-bright); text-decoration: none; }
.reg-brand__foot a:hover { color: var(--brand-glow); text-decoration: underline; }
.reg-logo { width: 42px; height: 42px; border-radius: 11px; background: var(--logo-chip-bg); overflow: hidden; box-shadow: var(--shadow-glass); flex-shrink: 0; }
.reg-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }

/* form column */
.reg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 0 32px 56px; position: relative; }
.reg-col { width: 100%; max-width: 620px; }
.reg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.reg-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-glow), var(--brand-bright));
  color: var(--glass-btn-fg); display: flex; align-items: center; justify-content: center;
}
.reg-head__title { font: 700 17px var(--sans); color: var(--glass-ink); }
.reg-head__sub { font: 400 12.5px var(--sans); color: var(--glass-muted); }

/* numbered section header */
.reg-sec { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.reg-sec__num { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-bright); font-family: var(--mono); }
.reg-sec__title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--glass-ink); }
.reg-sec__rule { flex: 1; height: 1px; background: var(--glass-border); }

/* glass form cards (override base .card inside the register shell) */
.reg-shell .card {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass); color: var(--glass-ink);
}
.reg-shell .label { color: var(--glass-muted); }
.reg-shell .hint { color: var(--glass-subtle); }
.reg-shell .hint-error { color: var(--glass-danger); }
.reg-shell .select-wrap svg { color: var(--glass-muted); }
.reg-shell .subtle { color: var(--glass-subtle); }
.reg-shell .muted { color: var(--glass-muted); }
.reg-shell .body { color: var(--glass-ink); }

/* SSO verified banner (fixed success on the always-dark surface) */
.reg-sso-banner {
  margin-bottom: 16px; padding: 14px 18px; border-radius: var(--r);
  background: color-mix(in srgb, var(--glass-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-success) 40%, transparent);
  color: var(--glass-ink); font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.reg-sso-banner svg { color: var(--glass-success); flex-shrink: 0; }

/* form fields (glass) */
.reg-shell .input, .reg-shell .select {
  height: 44px; padding: 0 13px; background: var(--glass-input-bg); border-color: var(--glass-border);
  color: var(--glass-ink); font-size: 14px; border-radius: var(--r); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.reg-shell .input::placeholder, .reg-shell .select::placeholder { color: var(--glass-subtle); }
.reg-shell .input:focus, .reg-shell .select:focus { border-color: var(--brand-glow); box-shadow: 0 0 0 3px var(--glass-ring); }
.reg-shell .input.is-error, .reg-shell .select.is-error { border-color: var(--glass-danger); background: color-mix(in srgb, var(--glass-danger) 8%, transparent); }
.reg-shell .select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px; cursor: pointer; }
.reg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reg-fields { display: flex; flex-direction: column; gap: 16px; }

/* phone input with country flag + dial code dropdown */
.reg-phone { display: flex; align-items: center; gap: 8px; }
.reg-phone__flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.reg-phone__code { font-size: 14px; font-weight: 700; color: var(--glass-muted); white-space: nowrap; }
.reg-phone .input { flex: 1; min-width: 0; }
.reg-phone__country { position: relative; flex-shrink: 0; }
.reg-phone__country-btn {
  display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--glass-input-bg);
  color: var(--glass-ink); cursor: pointer; font-size: 14px; font-weight: 600;
}
.reg-phone__country-btn:hover { border-color: var(--glass-hover); }
.reg-phone__country-btn svg { color: var(--glass-muted); transition: transform .15s; }
.reg-phone__country-btn svg.open { transform: rotate(180deg); }
.reg-phone__menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 100;
  width: 280px; max-height: 320px; display: flex; flex-direction: column;
  background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: 12px;
  box-shadow: var(--shadow-popover); overflow: hidden;
}
.reg-phone__search {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border); background: var(--glass-surface-2);
}
.reg-phone__search svg { color: var(--glass-muted); }
.reg-phone__search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13.5px; color: var(--glass-ink); min-width: 0;
}
.reg-phone__search input::placeholder { color: var(--glass-subtle); }
.reg-phone__list { overflow-y: auto; padding: 6px; }
.reg-phone__option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px; background: transparent;
  color: var(--glass-ink); font-size: 13.5px; cursor: pointer; text-align: start;
}
.reg-phone__option:hover { background: var(--glass-surface-2); }
.reg-phone__option.is-selected { background: color-mix(in srgb, var(--brand-bright) 18%, transparent); font-weight: 700; }
.reg-phone__name { flex: 1; }
.reg-phone__option-code { color: var(--glass-subtle); font-size: 12.5px; font-weight: 600; }
.reg-phone__empty { padding: 14px; text-align: center; color: var(--glass-subtle); font-size: 13px; }

/* password strength meter */
.reg-strength { display: flex; align-items: center; gap: 14px; }
.reg-strength__bars { flex: 1; display: flex; gap: 5px; }
.reg-strength__bar { flex: 1; height: 4px; border-radius: 999px; background: var(--glass-border); transition: background .2s; }
.reg-strength__bar.lv-weak { background: var(--glass-danger); }
.reg-strength__bar.lv-fair { background: var(--glass-warning); }
.reg-strength__bar.lv-strong { background: var(--glass-success); }
.reg-strength__label { font-size: 11.5px; font-weight: 600; min-width: 70px; text-align: end; color: var(--glass-subtle); }
.reg-pw-toggle { background: none; border: none; padding: 0; color: var(--glass-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; }
.reg-pw-toggle:hover { color: var(--glass-ink); }

/* agreement rows */
.reg-agree { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--glass-input-bg);
  border: 1px solid var(--glass-border); border-radius: var(--r); cursor: pointer; font-size: 13.5px; line-height: 1.55;
  color: var(--glass-ink); transition: background .15s, border-color .15s; }
.reg-agree.is-checked { background: color-mix(in srgb, var(--brand-bright) 14%, transparent); border-color: var(--brand-bright); }
.reg-agree input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand-bright); flex-shrink: 0; cursor: pointer; }
.reg-agree a { color: var(--brand-bright); font-weight: 600; }

/* error banner */
.reg-banner { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  background: color-mix(in srgb, var(--glass-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glass-danger) 40%, transparent);
  border-radius: var(--r); font-size: 13.5px; line-height: 1.5; color: var(--glass-ink); }

/* actions */
.reg-submit { height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--brand-glow) 0%, var(--brand-bright) 60%, var(--glass-btn-end) 120%);
  color: var(--glass-btn-fg); border: none; border-radius: var(--r); font-size: 15.5px; font-weight: 700;
  cursor: pointer; box-shadow: var(--glass-btn-glow); transition: filter .15s; }
.reg-submit:hover { filter: brightness(1.06); }
.reg-submit[disabled] { opacity: .6; cursor: default; filter: none; }
.reg-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--glass-btn-fg) 35%, transparent); border-top-color: var(--glass-btn-fg);
  border-radius: 50%; animation: reg-spin .7s linear infinite; }
@keyframes reg-spin { to { transform: rotate(360deg); } }
.reg-divider { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--glass-subtle); }
.reg-divider::before, .reg-divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
.reg-google, .reg-apple { height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  border: none; border-radius: var(--r); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.reg-google { background: var(--oauth-google-bg); color: var(--oauth-google-fg); box-shadow: var(--shadow-oauth); }
.reg-google:hover { background: var(--oauth-google-bg-hover); }
.reg-apple { background: var(--oauth-apple-bg); color: var(--oauth-apple-fg); }
.reg-apple:hover { background: var(--oauth-apple-bg-hover); }

/* success card */
.reg-done { padding: 44px 40px; text-align: center; animation: reg-rise .3s ease both; }
@keyframes reg-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.reg-done__icon { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--glass-success) 16%, transparent);
  color: var(--glass-success); display: flex; align-items: center; justify-content: center; }
.reg-done h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--glass-ink); }
.reg-done .badge.is-warning { background: color-mix(in srgb, var(--glass-warning) 16%, transparent); color: var(--glass-warning); }

/* responsive */
@media (max-width: 1024px) {
  .reg-brand { display: none; }
  .reg-main { padding: 0 24px 48px; }
}
@media (max-width: 600px) {
  .reg-grid2 { grid-template-columns: 1fr; }
  .reg-brand__title { font-size: 27px; }
  .reg-strength { flex-wrap: wrap; }
  .auth-card { padding: 24px 20px; }
}

/* ==========================================================================
   PROSE PAGES (Privacy / Terms) — crystal-glass header + light readable body
   A slim glass band over the navy gradient holds the title; the legal body
   stays on the light canvas for long-form readability.
   ========================================================================== */
.prose-hero {
  position: relative; overflow: hidden; padding: 64px 24px;
  background: linear-gradient(160deg, var(--gradient-start) 0%, var(--gradient-mid) 55%, var(--gradient-end) 100%);
  color: var(--glass-ink);
}
.prose-hero .auth-glow, .prose-hero .auth-glow--2 { position: absolute; }
.prose-head {
  position: relative; max-width: 640px; margin: 0 auto; padding: 32px; text-align: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
}
.prose-head__icon {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--brand-bright) 20%, transparent); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
}
.prose-head h1 { margin: 0; font: 700 28px/1.2 var(--sans); color: var(--glass-ink); }
[dir="rtl"] .prose-head h1 { letter-spacing: 0; }
.prose-head__sub { margin: 8px 0 0; font: 400 13px var(--sans); color: var(--glass-muted); }
.prose-body { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
@media (max-width: 600px) {
  .prose-hero { padding: 40px 20px; }
  .prose-head { padding: 24px 20px; }
  .prose-head h1 { font-size: 24px; }
}