/* ══════════════════════════════════════════════════════
   phantom.css — Shared Design System
   Tokens · Typography · Base Components · Auth Layout
   ══════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Design Tokens — Light ── */
:root {
  /* Backgrounds */
  --bg:       #F4F5F7;
  --surface:  #FFFFFF;
  --surface2: #F1F5F9;
  --surface3: #EEF2F7;
  --border:   #E2E4E9;
  --border2:  #CBD5E1;

  /* Text */
  --text:     #0A0B0D;
  --text-mid: #4A5568;
  --text-dim: #9AA3B2;

  /* Accent (blue) */
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-light:  rgba(37,99,235,0.10);

  /* Semantic */
  --green:        #16A34A;  --green-bg:  #DCFCE7;              --green-border:  #86EFAC;
  --green-dim:    rgba(22,163,74,0.10);
  --amber:        #F59E0B;  --amber-bg:  #FEF3C7;              --amber-border:  #FCD34D;
  --amber-dim:    rgba(245,158,11,0.10);
  --red:          #DC2626;  --red-bg:    #FEE2E2;              --red-border:    #FCA5A5;
  --red-dim:      rgba(220,38,38,0.10);

  /* Form / error */
  --input-bg:       #FFFFFF;   --input-border:  #D1D5DB;
  --error:          #DC2626;   --error-bg:      #FEF2F2;  --error-border: #FECACA;

  /* Auth brand panel */
  --panel-bg:  #1A1F36;  --panel-dim: rgba(255,255,255,0.50);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow2:   0 8px 32px rgba(0,0,0,0.12);

  /* Radius scale — use these everywhere */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 100px;

  /* Legacy aliases (MAIN_TEMPLATE backward compat — do not add new uses) */
  --card:       #FFFFFF;  --card2:     #F1F5F9;  --muted:      #4A5568;
  --accent-dim: rgba(37,99,235,0.10);            --accent-bd:  #BFDBFE;
  --accent2:    #2563EB;  --online:    #16A34A;
}

/* ── Design Tokens — Dark ── */
[data-theme=dark] {
  --bg:       #0D0D0F;
  --surface:  #18181B;
  --surface2: #27272A;
  --surface3: #2F2F33;
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.12);

  --text:     #F9FAFB;
  --text-mid: #9CA3AF;
  --text-dim: #6B7280;

  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-light:  rgba(59,130,246,0.15);

  --green:        #22C55E;  --green-bg:  rgba(34,197,94,0.10);  --green-border:  rgba(34,197,94,0.30);
  --green-dim:    rgba(34,197,94,0.10);
  --amber:        #F59E0B;  --amber-bg:  rgba(245,158,11,0.10); --amber-border:  rgba(245,158,11,0.30);
  --amber-dim:    rgba(245,158,11,0.10);
  --red:          #EF4444;  --red-bg:    rgba(239,68,68,0.10);  --red-border:    rgba(239,68,68,0.30);
  --red-dim:      rgba(239,68,68,0.10);

  --input-bg:     #1F2937;  --input-border:  rgba(255,255,255,0.10);
  --error:        #EF4444;  --error-bg:      rgba(239,68,68,0.10);  --error-border: rgba(239,68,68,0.30);

  --panel-bg:  #111827;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --shadow:    0 8px 32px rgba(0,0,0,0.50);
  --shadow2:   0 16px 48px rgba(0,0,0,0.70);

  /* Legacy aliases */
  --card:       #18181B;  --card2:    #27272A;  --muted:     #A1A1AA;
  --accent-dim: rgba(59,130,246,0.15);          --accent-bd: rgba(59,130,246,0.30);
  --accent2:    #3B82F6;  --online:   #22C55E;
}

/* ── Brand Wordmark (Pinyon Script / signature) ── */
.ph-wordmark {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ── Base ── */
html, body { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Raleway', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
.num { font-variant-numeric: tabular-nums; }

/* ── Theme Toggle ── */
.theme-toggle {
  position: fixed; top: 1rem; right: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-mid);
  box-shadow: var(--shadow-sm); transition: all 0.15s; z-index: 10;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; }

/* ── Language Selector ── */
.lang-seg {
  display: flex; gap: 7px; margin-bottom: 1.5rem;
}
.lang-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font-family: 'Raleway', sans-serif;
  transition: all 0.18s ease; min-height: 54px; outline: none;
}
.lang-code {
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--text-mid); transition: color 0.15s; line-height: 1;
}
.lang-name {
  font-size: 9.5px; font-weight: 500; color: var(--text-dim);
  transition: color 0.15s; white-space: nowrap;
}
.lang-btn:hover {
  border-color: var(--accent); background: var(--accent-light);
}
.lang-btn:hover .lang-code,
.lang-btn:hover .lang-name { color: var(--accent); }
/* Active — driven by JS adding .active class */
.lang-btn.active {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(37,99,235,0.42); transform: translateY(-1px);
}
.lang-btn.active .lang-code,
.lang-btn.active .lang-name { color: #fff; }
[data-theme=dark] .lang-btn { background: var(--surface2); }
[data-theme=dark] .lang-btn.active { background: var(--accent); box-shadow: 0 4px 20px rgba(59,130,246,0.5); }

/* ── Auth Split Layout ── */
.brand-panel { display: none; }
@media (min-width: 768px) {
  .brand-panel {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 480px; min-width: 440px; flex-shrink: 0;
    background: linear-gradient(160deg, #0C1222 0%, #131a35 55%, #0e1526 100%);
    padding: 2.75rem; position: relative; overflow: hidden;
  }
  /* dot-grid texture */
  .brand-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(99,130,255,0.18) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  /* glow */
  .brand-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse at 18% 12%, rgba(37,99,235,0.50) 0%, transparent 52%),
      radial-gradient(ellipse at 88% 88%, rgba(99,102,241,0.32) 0%, transparent 48%);
  }
  .bp-logo     { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
  .bp-logo-img { width: 130px; height: auto; display: block; mix-blend-mode: screen; filter: drop-shadow(0 0 16px rgba(59,130,246,0.4)); }
  .bp-wordmark { display: none; }
  .bp-tagline-top { font-size: 10px; color: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; margin-left: 2px; }
  .bp-body     { position: relative; z-index: 1; }
  .bp-headline { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: -1.5px; margin-bottom: 0.85rem; }
  .bp-headline span { background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .bp-desc     { font-size: 13.5px; color: rgba(255,255,255,0.42); line-height: 1.75; margin-bottom: 1.75rem; }
  /* Result cards (login variant) */
  .bp-results    { display: flex; flex-direction: column; gap: 9px; }
  .bp-result     { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-lg); padding: 13px 15px; display: flex; align-items: center; gap: 13px; transition: border-color 0.2s; }
  .bp-result:hover { border-color: rgba(255,255,255,0.18); }
  .bp-result-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .bp-result-icon.blue   { background: rgba(37,99,235,0.22);  border: 1px solid rgba(59,130,246,0.30); }
  .bp-result-icon.green  { background: rgba(34,197,94,0.14);  border: 1px solid rgba(34,197,94,0.28); }
  .bp-result-icon.violet { background: rgba(139,92,246,0.16); border: 1px solid rgba(139,92,246,0.28); }
  .bp-result-icon svg { width: 17px; height: 17px; stroke-width: 2.2; fill: none; }
  .bp-result-val { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
  .bp-result-lbl { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 2px; font-weight: 500; }
  /* Live indicator */
  .bp-live     { display: flex; align-items: center; gap: 9px; margin-top: 1.4rem; padding: 9px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
  .bp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: livepulse 2.2s ease-in-out infinite; }
  @keyframes livepulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50%{ box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
  .bp-live-txt { font-size: 11.5px; color: rgba(255,255,255,0.42); font-weight: 500; }
  .bp-footer   { font-size: 10px; color: rgba(255,255,255,0.18); letter-spacing: 1px; text-transform: uppercase; position: relative; z-index: 1; }
  /* Feature list (signup variant) */
  .bp-features  { display: flex; flex-direction: column; gap: 14px; }
  .bp-feat      { display: flex; align-items: flex-start; gap: 12px; }
  .bp-feat-dot  { width: 20px; height: 20px; border-radius: 6px; background: rgba(37,99,235,0.5); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .bp-feat-dot svg  { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.5; fill: none; }
  .bp-feat-text { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; }
  .bp-feat-text strong { color: #fff; font-weight: 600; display: block; margin-bottom: 1px; }
  .trial-badge  { display: inline-flex; align-items: center; gap: 6px; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: #22C55E; margin-top: 1.5rem; }
}

/* ── Form Panel (auth pages) ── */
.form-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; position: relative; }
.form-wrap  { width: 100%; max-width: 380px; }

/* Mobile brand mark (shown when brand-panel hidden) */
.mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 2rem; }
@media (min-width: 768px) { .mobile-brand { display: none; } }
.m-brand-icon { width: 36px; height: 36px; background: var(--accent); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.m-brand-icon svg  { width: 18px; height: 18px; }
.m-brand-name { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.m-brand-name .ph-wordmark { font-size: 32px; vertical-align: middle; }

.form-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 0.35rem; }
.form-sub   { font-size: 13px; color: var(--text-mid); margin-bottom: 1.75rem; }

/* ── Form Elements ── */
.field-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 6px; }
.field-hint  { font-size: 11px; color: var(--text-dim); margin-top: -10px; margin-bottom: 14px; line-height: 1.4; }
.error { color: var(--error); font-size: 13px; margin-bottom: 14px; background: var(--error-bg); border: 1px solid var(--error-border); padding: 10px 14px; border-radius: var(--r-md); line-height: 1.5; font-weight: 500; }

input[type=text], input[type=password] {
  width: 100%; padding: 12px 14px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--r-md); color: var(--text); font-size: 15px;
  margin-bottom: 14px; font-family: 'Raleway', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm); -webkit-appearance: none;
}
input[type=text]:focus, input[type=password]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
input::placeholder { color: var(--text-dim); }

button.submit {
  width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none;
  border-radius: var(--r-md); cursor: pointer; font-size: 15px; font-weight: 600;
  font-family: 'Raleway', sans-serif; transition: background 0.15s, opacity 0.1s;
  letter-spacing: -0.2px; min-height: 48px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.35);
}
button.submit:hover  { background: var(--accent-hover); }
button.submit:active { opacity: 0.82; }

.form-footer   { margin-top: 1.25rem; text-align: center; font-size: 13px; color: var(--text-mid); }
.form-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.form-footer a:hover { text-decoration: underline; }

/* ── Status Chips ── */
.sp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm); }
.sp::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.sp.active   { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.sp.active::before  { background: var(--green); }
.sp.pending  { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.sp.pending::before { background: var(--amber); }
.sp.rejected { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-border); }
.sp.rejected::before { background: var(--red); }

/* ── Pill / Badge ── */
.pill   { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-xs); }
.pill-a { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-border); }
.pill-m { background: var(--surface2);  color: var(--text-mid); border: 1px solid var(--border); }
.pill-r { background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red-border); }

/* ── Flash / Alert ── */
.flash     { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 1.5rem; font-size: 14px; font-weight: 500; line-height: 1.5; }
.flash.ok  { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); }
.flash.err { background: var(--red-bg);   border: 1px solid var(--red-border);   color: var(--red); }

/* ── Shared Header (hdr) ── */
.hdr    { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 1.5rem; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.hdr-l  { display: flex; align-items: center; gap: 12px; }
.hdr-icon { width: 32px; height: 32px; background: var(--accent); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hdr-icon svg  { width: 16px; height: 16px; color: #fff; stroke-width: 2.5; }
.hdr-title { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.hdr-sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; font-weight: 500; }

/* ── Back Button ── */
.back-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-mid); font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.15s; }
.back-btn:hover { color: var(--text); border-color: var(--border2); background: var(--surface3); }

/* ── Primary / Ghost Buttons ── */
.btn-primary { padding: 10px 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-md); cursor: pointer; font-size: 13px; font-weight: 600; font-family: 'Raleway', sans-serif; min-height: 40px; transition: background 0.15s, opacity 0.15s; white-space: nowrap; }
.btn-primary:hover  { background: var(--accent-hover); }
.btn-primary:active { opacity: 0.8; }
.btn-ghost { padding: 10px 16px; background: transparent; color: var(--text-mid); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-size: 13px; font-family: 'Raleway', sans-serif; min-height: 40px; transition: all 0.15s; font-weight: 500; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Empty State ── */
.empty    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 3rem; text-align: center; margin-bottom: 2rem; }
.empty-ic { width: 48px; height: 48px; background: var(--surface2); border-radius: var(--r-md); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.empty-t  { font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.2px; }
.empty-s  { font-size: 13px; color: var(--text-mid); line-height: 1.5; }