/* LuxMail Pro Auth + App — styles.css */
:root{
  --bg:#0b1020;
  --ink:#e6ebff;
  --muted:#9fb0d0;
  --panel:#0f1630cc;
  --panel-strong:#0f1630e6;
  --border: #253055;
  --accent:#7c8cff;
  --accent-2:#38d6c9;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --glow: 0 0 0 1px rgba(124,140,255,.12), 0 20px 60px rgba(124,140,255,.15);
}
html[data-theme="light"]{
  --bg:#f6f7fb;
  --ink:#0f172a;
  --muted:#475569;
  --panel:#ffffffcc;
  --panel-strong:#ffffffe6;
  --border:#e5e7eb;
  --accent:#334155;
  --accent-2:#0ea5a4;
  --shadow: 0 10px 40px rgba(2,8,23,.08);
  --glow: 0 0 0 1px rgba(2,8,23,.06), 0 10px 40px rgba(2,8,23,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  color:var(--ink);
  background: radial-gradient(900px 600px at 10% -10%, #1a2250 0%, transparent 60%),
              radial-gradient(700px 500px at 110% 10%, #0b7ca4 0%, transparent 50%),
              var(--bg);
  overflow-x:hidden;
}
.hidden{display:none}

.bg-orb{position:fixed;filter:blur(60px);opacity:.35;z-index:-2;mix-blend:screen}
.orb-a{width:420px;height:420px;border-radius:50%;background:linear-gradient(120deg,#8b5cf6,#22d3ee);right:-120px;top:-100px;animation:float 9s ease-in-out infinite}
.orb-b{width:360px;height:360px;border-radius:50%;background:linear-gradient(120deg,#22d3ee,#34d399);left:-120px;bottom:-140px;animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

.glass{background:var(--panel);border:1px solid var(--border);backdrop-filter: blur(14px) saturate(1.2);border-radius:18px;box-shadow:var(--glow)}
.glass-subtle{background:linear-gradient(180deg,transparent,rgba(255,255,255,.04));border:1px dashed var(--border);border-radius:14px;padding:10px}

.topbar{position:sticky;top:14px;margin:14px auto;display:flex;gap:12px;align-items:center;padding:10px 12px;max-width:1200px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.03em}
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#0ea5a4,#7c8cff);display:grid;place-items:center;position:relative;box-shadow:0 10px 30px rgba(14,165,164,.35)}
.spark{width:14px;height:14px;border-radius:4px;background:conic-gradient(from 0deg,#fff,#c7d2fe,#99f6e4,#fff);animation:spark 3.6s linear infinite}
@keyframes spark{to{transform:rotate(1turn)}}
.search{flex:1;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel-strong)}
.search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.search input{background:transparent;border:0;outline:0;color:var(--ink);width:100%}

.actions{display:flex;gap:8px;align-items:center}
.btn{border:1px solid var(--border);padding:10px 14px;border-radius:12px;color:var(--ink);background:transparent;cursor:pointer;font-weight:700;transition:transform .15s ease, background .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.btn.primary{background:linear-gradient(120deg,#7c8cff,#0ea5a4);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.btn.full{width:100%}
.pulse-dot{position:absolute;left:10px;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.layout{display:grid;grid-template-columns:260px 1fr 1.1fr;gap:12px;max-width:1200px;margin:0 auto 24px;padding:0 14px}
@media (max-width:1024px){.layout{grid-template-columns:220px 1fr}.read{display:none}}
@media (max-width:720px){.layout{grid-template-columns:1fr}.sidebar{order:2}.list{order:1}}

.sidebar{padding:12px;max-height:calc(100vh - 120px);overflow:auto}
.nav{display:grid;gap:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s ease, transform .15s ease}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:linear-gradient(120deg,rgba(124,140,255,.25),rgba(14,165,164,.25));border-color:transparent;transform:translateY(-1px)}
.nav .hr{height:1px;background:var(--border);margin:6px 0}
.nav-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-left:6px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent)}

.list{max-height:calc(100vh - 120px);overflow:auto}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:12px;border-bottom:1px solid var(--border);cursor:pointer;position:relative}
.item:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);transform:translateX(-100%);opacity:0;pointer-events:none}
.item:hover:before{animation:shine .8s forwards;opacity:1}
@keyframes shine{to{transform:translateX(100%)}}
.item.unread .dot{background:linear-gradient(120deg,#7c8cff,#0ea5a4)}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--border);margin-top:6px}
.from{font-weight:800;letter-spacing:.02em}
.subject{font-size:14px}
.meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pill{background:linear-gradient(180deg,rgba(124,140,255,.15),rgba(14,165,164,.12));color:var(--ink);font-size:11px;border-radius:10px;padding:3px 6px;border:1px solid var(--border)}

.read{display:flex;flex-direction:column;max-height:calc(100vh - 120px);overflow:auto}
.read-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px;border-bottom:1px solid var(--border)}
.subject{font-weight:900}
.from{padding:0 16px 12px;color:var(--muted)}
.read-body{padding:18px 16px 24px;line-height:1.75}
.read-body p{margin:0 0 10px}

.icon{border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:10px;padding:8px 10px;cursor:pointer;transition:transform .15s ease, background .2s ease}
.icon:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.icon.close{font-weight:900}

.compose{position:fixed;right:16px;bottom:16px;width:min(560px,95vw);display:none;flex-direction:column;box-shadow:var(--shadow)}
.compose.open{display:flex;animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:.5}to{transform:none;opacity:1}}
.compose-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.compose-row{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}
.compose textarea{min-height:180px;border:0;outline:0;padding:12px 12px;background:transparent;color:var(--ink);resize:vertical;font-family:inherit}
.compose-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid var(--border)}
.attach{color:var(--muted)}
.right{display:flex;gap:8px}
kbd{font-family:ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--border);padding:2px 6px;border-radius:6px;background:transparent;font-size:12px}

/* AUTH */
.auth-screen{max-width:560px;margin:8vh auto 24px;padding:18px;animation:pop .18s ease-out}
.auth-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px}
.auth-title{font-weight:900;font-size:22px;letter-spacing:.02em}
.auth-tabs{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0 14px;position:relative}
.auth-tab{border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.auth-tab.active{background:linear-gradient(120deg,#7c8cff,#0ea5a4);border-color:transparent;color:#fff}
.auth-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.auth-card{display:none;flex-direction:column;gap:10px;padding:16px;border-radius:14px;background:var(--panel-strong);border:1px solid var(--border)}
.auth-card.show{display:flex;animation:slideIn .2s ease-out}
@keyframes slideIn{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.field{display:flex;flex-direction:column;gap:6px}
.field input{border:1px solid var(--border);background:transparent;border-radius:10px;padding:10px 12px;color:var(--ink);outline:none}
.field input:focus{box-shadow:0 0 0 3px rgba(124,140,255,.25)}
.auth-row{display:flex;justify-content:space-between;align-items:center}
.check{display:flex;align-items:center;gap:8px;cursor:pointer}
.muted{color:var(--muted);font-size:12px}
.auth-hint{margin-top:6px}
.auth-footer{display:flex;justify-content:center;margin-top:10px}