/* TungMail — shared design tokens & primitives
   Premium dark privacy-email brand: near-black base, indigo/violet accents,
   bold grotesk display type, glow accents. Original TungMail identity. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- brand indigo / violet --- */
  --indigo-50:#eef1ff;
  --indigo-100:#e0e4ff;
  --indigo-200:#c7ccff;
  --indigo-300:#a5adff;
  --indigo-400:#818cf8;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;
  --violet:#8b7cf0;

  /* --- dark surfaces --- */
  --bg:#0a0b12;
  --bg-2:#0c0d17;
  --surface:#101220;
  --surface-2:#161827;
  --card:#12131f;
  --card-2:#15172499;
  --line:#ffffff12;
  --line-2:#ffffff1f;

  /* --- text --- */
  --cream:#f4f5fb;
  --text:#ecedf5;
  --text-dim:#b0b5c8;
  --text-mute:#787f96;

  /* --- semantic --- */
  --accent:#6366f1;
  --accent-strong:#4f46e5;
  --danger:#f0616a;
  --secure:#10b981;
  --secure-2:#34d399;
  --star:#f5b544;

  /* legacy aliases (kept so older rules resolve) */
  --wood-gold-2:#818cf8;
  --wood-saddle:#4338ca;

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:0 30px 70px -24px rgba(0,0,0,.7);
  --shadow-sm:0 14px 36px -18px rgba(0,0,0,.6);
  --glow:0 20px 60px -18px rgba(99,102,241,.55);

  --display:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-family:var(--mono);letter-spacing:.01em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-weight:600;font-size:14.5px;border-radius:12px;
  padding:12px 22px;transition:.16s ease;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--indigo-500),var(--indigo-600));color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-light{background:#f4f5fb;color:#111321}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-dark{background:var(--surface-2);color:#fff;border:1px solid var(--line-2)}
.btn-dark:hover{background:#1d2033}
.btn-ghost{background:#ffffff0d;color:var(--cream);border:1px solid var(--line-2)}
.btn-ghost:hover{background:#ffffff1a}
.btn-block{width:100%}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;background:#6366f11a;color:#c3c8ff;border:1px solid #6366f133}
.chip.secure{color:#5eead4;background:#10b9811a;border-color:#10b98138}

/* ---------- logo ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--cream)}
.brand .logo-badge{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700));
  box-shadow:0 8px 20px -6px rgba(99,102,241,.6)}
.brand .logo-badge svg{width:24px;height:24px}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#ffffff33;background-clip:padding-box}

/* small avatar */
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;color:#fff;font-size:15px;flex:0 0 auto;position:relative}
.avatar.sm{width:30px;height:30px;font-size:12px}
.g1{background:linear-gradient(135deg,#818cf8,#4338ca)}
.g2{background:linear-gradient(135deg,#34d399,#059669)}
.g3{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.g4{background:linear-gradient(135deg,#c084fc,#7c3aed)}
.g5{background:linear-gradient(135deg,#38bdf8,#0284c7)}
.g6{background:linear-gradient(135deg,#f472b6,#c026d3)}
.avatar .lock{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
  background:var(--secure);display:grid;place-items:center;border:2px solid var(--surface);font-size:8px;color:#04231a}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- disabled buttons (gated actions) ---------- */
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none;filter:grayscale(.2)}

/* ---------- shared captcha gate (hCaptcha + Turnstile) ---------- */
.captcha-gate{
  background:#0c0d17;
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:15px 16px 14px;position:relative;
  box-shadow:inset 0 0 0 1px #ffffff08;
}
.captcha-gate.solved{border-color:#10b98166;box-shadow:inset 0 0 0 1px #10b98133}
.captcha-gate .cg-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--cream)}
.captcha-gate .cg-shield{font-size:16px}
.captcha-gate .cg-title{letter-spacing:-.01em}
.captcha-gate .cg-sub{flex-basis:100%;font-weight:500;font-size:12px;color:var(--text-dim);margin-top:3px;line-height:1.4}
.captcha-gate .cg-widgets{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 11px}
.captcha-gate .cg-slot{display:flex;flex-direction:column;gap:6px}
.captcha-gate .cg-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.captcha-gate .cg-box{min-height:74px}
.captcha-gate .cg-status{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim)}
.captcha-gate .cg-status::before{content:"⏳";font-size:13px}
.captcha-gate .cg-status.ok{color:var(--secure-2)}
.captcha-gate .cg-status.ok::before{content:"✅"}