:root{
  --bg:#070b18; --bg2:#0b1226;
  --card:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12);
  --text:#eef2ff; --muted:#9aa6c7;
  --acc1:#7c3aed; --acc2:#06b6d4; --acc3:#f472b6;
  --ok:#22c55e; --danger:#ef4444;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:20px;
}
[data-theme="light"]{
  --bg:#eef2ff; --bg2:#ffffff;
  --card:rgba(255,255,255,.85); --card-border:rgba(15,23,42,.1);
  --text:#0f172a; --muted:#5b6b8c;
  --shadow:0 20px 50px rgba(99,102,241,.15);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Space Grotesk',system-ui,sans-serif; color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.35), transparent),
             radial-gradient(900px 500px at 90% 10%, rgba(6,182,212,.28), transparent),
             linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100vh;
}
.mono{font-family:'JetBrains Mono',monospace}
.muted{color:var(--muted)}
code{background:rgba(127,127,160,.2); padding:2px 6px; border-radius:6px}

.bg-orbs span{position:fixed; border-radius:50%; filter:blur(90px); opacity:.35; z-index:-1; animation:float 12s ease-in-out infinite alternate}
.bg-orbs span:nth-child(1){width:340px;height:340px; background:#7c3aed; left:-80px; top:-60px}
.bg-orbs span:nth-child(2){width:300px;height:300px; background:#06b6d4; right:-60px; top:20%}
.bg-orbs span:nth-child(3){width:260px;height:260px; background:#f472b6; left:30%; bottom:-80px}
@keyframes float{to{transform:translateY(-30px) translateX(20px)}}

.nav{max-width:1080px; margin:0 auto; padding:18px 20px; display:flex; justify-content:space-between; align-items:center}
.brand{display:flex; gap:12px; align-items:center}
.logo-img{width:44px;height:44px;border-radius:50%;box-shadow:var(--shadow)}
.brand b{font-size:20px; letter-spacing:2px}
.brand small{display:block; color:var(--muted); font-size:12px; letter-spacing:1px}
.nav-actions{display:flex; gap:10px; align-items:center}
.live-dot{display:flex; gap:6px; align-items:center; font-size:12px; font-weight:700; color:var(--ok);
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); padding:6px 12px; border-radius:99px}
.live-dot i{width:8px;height:8px; border-radius:50%; background:var(--ok); animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.icon-btn{border:1px solid var(--card-border); background:var(--card); color:var(--text);
  width:42px;height:42px;border-radius:12px; font-size:20px; cursor:pointer; backdrop-filter:blur(10px)}
.icon-btn:hover{transform:scale(1.06)}

.container{max-width:1080px; margin:0 auto; padding:0 20px 60px}
.glass{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(14px)}

.email-card{padding:24px; position:relative; overflow:hidden}
.email-card::before{content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--acc1),var(--acc2),var(--acc3))}
.card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
.card-top h1{margin:0; font-size:clamp(22px,3vw,30px)}
.card-top p{margin:6px 0 0; color:var(--muted)}
.timer-pill{background:rgba(6,182,212,.14); border:1px solid rgba(6,182,212,.35); padding:8px 14px; border-radius:99px; font-weight:700}
.ok-pill{background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.4); color:var(--ok)}
.key-row{margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.key-box{background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.4); padding:10px 14px; border-radius:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.restore-box{margin-top:14px; border:1px solid var(--card-border); border-radius:14px; padding:12px 14px; background:rgba(0,0,0,.15)}
[data-theme="light"] .restore-box{background:#f8faff}
.restore-box summary{cursor:pointer; font-weight:700}
.restore-form{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center}
.restore-form input{flex:1; min-width:160px; padding:10px 12px; border-radius:10px; border:1px solid var(--card-border); background:rgba(0,0,0,.2); color:var(--text); font-family:inherit}
[data-theme="light"] .restore-form input{background:#fff}
.restore-form select{flex:1; min-width:200px; padding:10px 12px; border-radius:10px; border:1px solid var(--card-border); background:rgba(0,0,0,.2); color:var(--text); font-family:inherit; cursor:pointer}
[data-theme="light"] .restore-form select{background:#fff}

.addr-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.addr-box{flex:1; min-width:220px; padding:14px 16px; border-radius:14px; font-size:17px; font-weight:600;
  background:rgba(0,0,0,.25); border:1px dashed rgba(124,58,237,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-theme="light"] .addr-box{background:#f1f5ff}

.btn{border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--acc1),var(--acc2)); color:#fff}
.btn.ghost{background:rgba(127,127,160,.15); color:var(--text); border:1px solid var(--card-border)}
.btn.small{padding:8px 12px; font-size:13px}
.btn.danger-ghost{background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.3)}

.controls{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px}
.controls label{font-size:13px; color:var(--muted); display:grid; gap:6px}
.controls input,.controls select{padding:11px 12px; border-radius:12px; border:1px solid var(--card-border);
  background:rgba(0,0,0,.2); color:var(--text); font-family:inherit; width:100%}
[data-theme="light"] .controls input,[data-theme="light"] .controls select{background:#fff}
.inline{display:flex; gap:8px}
.quick-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:16px}
@media(max-width:860px){.grid{grid-template-columns:1fr}.controls{grid-template-columns:1fr}}
.inbox,.reader{padding:18px; min-height:420px}
.sec-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sec-head h2{margin:0; font-size:18px}
.badge{background:linear-gradient(135deg,var(--acc1),var(--acc3)); color:#fff; border-radius:99px; padding:2px 10px; font-size:13px}
.switch{font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; cursor:pointer}

.mail-list{display:grid; gap:10px; max-height:560px; overflow:auto}
.mail-item{padding:13px 14px; border-radius:14px; border:1px solid var(--card-border); cursor:pointer;
  background:rgba(255,255,255,.04); transition:.15s; animation:slideIn .3s ease}
.mail-item:hover{border-color:var(--acc2); transform:translateY(-1px)}
.mail-item.active{border-color:var(--acc1); box-shadow:0 0 0 2px rgba(124,58,237,.3)}
.mail-item.unread{border-left:4px solid var(--acc2)}
.mail-item b{display:block; font-size:14px; margin:2px 0}
.mail-item p{margin:0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mail-item small{color:var(--muted); font-size:12px}
@keyframes slideIn{from{opacity:0; transform:translateY(8px)}}
.empty{text-align:center; padding:40px 16px; color:var(--muted)}
.empty-illus{font-size:52px; animation:float 3s ease-in-out infinite alternate}
.empty.small{padding:20px}

.reader-body{max-height:560px; overflow:auto}
.reader-meta{background:rgba(0,0,0,.2); border:1px solid var(--card-border); border-radius:12px; padding:12px; font-size:13px; display:grid; gap:4px; margin-bottom:12px}
[data-theme="light"] .reader-meta{background:#f8faff}
.otp-box{display:flex; gap:10px; align-items:center; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35);
  padding:12px; border-radius:12px; margin-bottom:12px; flex-wrap:wrap}
.otp-code{font-size:26px; font-weight:700; letter-spacing:4px; color:var(--ok)}
.mail-html{border:1px solid var(--card-border); border-radius:12px; padding:12px; background:rgba(255,255,255,.5); color:#111; overflow:auto}
[data-theme="dark"] .mail-html{background:#fff}

.domain-sec{margin-top:16px; padding:22px}
.pill{background:linear-gradient(135deg,var(--acc2),var(--ok)); color:#04222a; font-weight:800; font-size:12px; padding:6px 12px; border-radius:99px}
.dns-box{background:rgba(0,0,0,.25); border:1px solid var(--card-border); border-radius:14px; padding:16px; margin:14px 0}
[data-theme="light"] .dns-box{background:#f1f5ff}
.dns-grid{display:grid; grid-template-columns:150px 1fr; gap:8px 12px; margin-top:10px; align-items:center; font-size:14px}
.dns-examples{display:flex; gap:8px; margin-top:12px}
.example{background:rgba(0,0,0,.35); border-radius:10px; padding:12px; font-size:12.5px; white-space:pre-wrap; margin-top:10px}
[data-theme="light"] .example{background:#0f172a; color:#e2e8f0}
.add-domain{display:flex; gap:10px; flex-wrap:wrap}
.add-domain input{flex:1; min-width:200px; padding:12px 14px; border-radius:12px; border:1px solid var(--card-border); background:rgba(0,0,0,.2); color:var(--text)}
[data-theme="light"] .add-domain input{background:#fff}
.msg{margin-top:10px; font-size:14px}
.msg.ok{color:var(--ok)} .msg.err{color:#f87171}
.domain-list{display:grid; gap:8px; margin-top:12px}
.domain-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--card-border); border-radius:12px; font-size:14px; flex-wrap:wrap}
.status{font-size:12px; font-weight:800; padding:4px 10px; border-radius:99px}
.status.yes{background:rgba(34,197,94,.15); color:var(--ok); border:1px solid rgba(34,197,94,.4)}
.status.no{background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.35)}

footer{text-align:center; color:var(--muted); font-size:13px; margin-top:22px}
footer a{color:var(--acc2)}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; place-items:center; padding:20px; z-index:50}
.modal.show{display:grid}
.modal-card{padding:24px; max-width:440px}
.modal-card ol{color:var(--muted); line-height:1.8}