/* ─────────────────────────────────────────────────────────────────────
 * File:    style.css
 * Route:   GET /style.css
 * Purpose: All styles for landing + app + view.
 * Notes:   Lagos timezone is applied in JS, not here.
 *          The old .messageView overlay has been removed — messages
 *          now open in view.html in a new tab.
 * ───────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#08090c;
  --surface:#12141b;
  --surface2:#181b24;
  --surface3:#1e222d;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.14);
  --text:#f4f5f7;
  --muted:#9aa3b2;
  --dim:#6b7280;
  --primary:#635bff;
  --primary2:#7c73ff;
  --primaryGlow:rgba(99,102,241,.35);
  --accent:#a78bfa;
  --danger:#ef4444;
  --success:#10b981;
  --warning:#f59e0b;
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --shadow-lg:0 24px 70px rgba(0,0,0,.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{
  min-height:100dvh;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(600px 400px at 90% 110%, rgba(124,115,255,.09), transparent 60%),
    var(--bg);
  line-height:1.5;
}
button{font:inherit;cursor:pointer;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--primaryGlow);color:#fff}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center;display:block}
.eyebrow{color:var(--dim);letter-spacing:.16em;font-size:11px;font-weight:700;text-transform:uppercase}

/* ── Brand ── */
.brand{font-weight:900;letter-spacing:.04em;color:#fff;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.brand span{opacity:.55;margin-left:1px}
.brand.small{font-size:13px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-sm);padding:11px 16px;
  color:#fff;background:var(--surface2);
  font-weight:600;font-size:14px;
  transition:transform .08s ease,background .15s ease,opacity .15s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{background:#222634}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);box-shadow:0 8px 24px -8px rgba(99,102,241,.6)}
.btn.primary:hover{background:var(--primary2);box-shadow:0 12px 28px -8px rgba(99,102,241,.7)}
.btn.secondary{background:var(--surface2)}
.btn.danger{background:rgba(239,68,68,.14);color:#fca5a5}
.btn.danger:hover{background:rgba(239,68,68,.22)}
.btn.ghost{background:transparent;border:1px solid var(--border2)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.small{padding:8px 12px;font-size:13px}
.btn.lg{padding:14px 22px;font-size:15px}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Nav (landing) ── */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
  max-width:1120px;margin:0 auto;
}

/* ── Landing hero ── */
.landing .hero{position:relative;max-width:860px;margin:0 auto;padding:70px 22px 40px;text-align:center}
.heroGlow{
  position:absolute;inset:auto 0 -80px 0;height:340px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0, rgba(99,102,241,.35), transparent 70%);
  filter:blur(60px);opacity:.7;z-index:-1;
}
.heroBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(16,185,129,.09);color:#6ee7b7;
  font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:28px;
  border:1px solid rgba(16,185,129,.2);
}
.liveDot{
  width:6px;height:6px;border-radius:50%;background:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,.18);
  animation:pulseDot 2.4s ease-in-out infinite;
}
.liveDot.small{width:6px;height:6px;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.18)}
  50%{box-shadow:0 0 0 7px rgba(16,185,129,.05)}
}
.hero h1{font-size:clamp(38px, 6.4vw, 66px);font-weight:900;letter-spacing:-.035em;margin-bottom:22px}
.hero h1 .grad{
  background:linear-gradient(120deg, #a5b4fc 0%, #635bff 45%, #a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:var(--muted);font-size:clamp(15px,2.2vw,18.5px);line-height:1.65;max-width:580px;margin:0 auto 34px}
.heroCta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.chips{list-style:none;padding:0;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:640px}
.chips li{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 16px;text-align:left;min-width:130px;
  transition:border-color .2s ease,background .2s ease;
}
.chips li:hover{border-color:var(--border2);background:var(--surface2)}
.chips b{display:block;font-size:15px;font-weight:800}
.chips span{color:var(--dim);font-size:12px}

/* ── Landing sections ── */
.section{max-width:1060px;margin:0 auto;padding:72px 22px}
.section h2{font-size:clamp(24px,3.6vw,34px);margin:12px 0 12px;font-weight:800}
.sectionLede{color:var(--muted);font-size:15px;max-width:520px;margin:0 auto 40px;line-height:1.65}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:36px}
.feature{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;transition:border-color .2s ease,transform .2s ease;
}
.feature:hover{border-color:var(--border2);transform:translateY(-2px)}
.feature .icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.22);
  display:grid;place-items:center;margin-bottom:16px;font-size:20px;
}
.feature h3{font-size:16.5px;margin-bottom:8px}
.feature p{color:var(--muted);font-size:14px;line-height:1.6}

.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:12px}
.steps li{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;
}
.steps li:hover{border-color:var(--border2);background:var(--surface2)}
.stepNum{
  flex:0 0 34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;
  box-shadow:0 6px 18px -6px rgba(99,102,241,.7);
}
.steps b{display:block;margin-bottom:4px;font-size:15px}
.steps p{color:var(--muted);font-size:14px;line-height:1.6}

.faq{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 20px;margin-bottom:10px;
}
.faq summary{cursor:pointer;font-weight:600;list-style:none;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim);font-weight:400;transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:12px;font-size:14px;line-height:1.65}
.foot{
  max-width:1060px;margin:0 auto;padding:40px 22px 70px;text-align:center;color:var(--dim);
  border-top:1px solid var(--border);
}
.foot p{margin:10px 0 20px;font-size:14px}

/* ── App header ── */
.appHeader{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px max(14px, env(safe-area-inset-left)) 12px max(14px, env(safe-area-inset-right));
  background:rgba(8,9,12,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.headerChips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:12.5px;color:var(--muted);white-space:nowrap;
}
.chip b{color:#fff;font-weight:700;font-family:var(--mono);font-size:12.5px}
.chip .chipTail{color:var(--dim);font-size:11.5px;font-family:var(--mono)}
.chipBtn{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.chipBtn:hover{border-color:var(--border2);background:rgba(255,255,255,.08)}
.chip.warn{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.3);
  color:#fcd34d;
}
.spinner{
  display:inline-block;width:12px;height:12px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--primary2);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── App shell ── */
.shell{max-width:760px;margin:0 auto;padding:26px max(16px, env(safe-area-inset-left)) 90px}
.view.hidden{display:none}
.view{animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.viewHead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.viewHead h1{font-size:clamp(23px,4.4vw,30px);margin-top:6px;font-weight:800}
.headPills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  font-size:12.5px;color:var(--muted);white-space:nowrap;border:1px solid var(--border);
}
.pill b{color:#fff;font-weight:700}
.pillDaily{background:rgba(99,102,241,.09);border-color:rgba(99,102,241,.22);color:#c7d2fe}
.pillDaily b{color:#e0e7ff}
.pillDaily.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);color:#fcd34d}
.pillDaily.warn b{color:#fef3c7}

.info{
  background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;color:#c7d2fe;
  display:flex;flex-direction:column;gap:2px;margin-bottom:16px;
}
.info b{color:#e0e7ff;font-weight:600}
.info span{color:#a5b4fc;opacity:.9}

/* ── Mailbox cards ── */
.mailboxList{display:grid;gap:12px;margin-bottom:18px}
.mailboxCard{
  width:100%;
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap:10px 14px;
  cursor:default;
  transition:border-color .18s ease, box-shadow .2s ease;
}
.mailboxCard:hover{border-color:var(--border2);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.mailboxMain{grid-column:1;grid-row:1;min-width:0}
.mailboxMain strong{
  display:block;overflow-wrap:anywhere;
  font-size:14.5px;font-weight:600;font-family:var(--mono);
}
.mailboxMain small{display:block;margin-top:6px;color:var(--muted);font-size:12.5px}
.mailboxMain small.unread{color:#a5b4fc;font-weight:600}
.mailboxRight{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;flex-shrink:0}
.cardActions{
  grid-column:1 / -1;grid-row:2;
  display:flex;gap:8px;justify-content:flex-end;
  border-top:1px solid var(--border);padding-top:10px;margin-top:4px;
}
.iconBtn{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  width:38px;height:38px;
  display:grid;place-items:center;
  font-size:15px;
  transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
.iconBtn:hover{background:rgba(255,255,255,.09);border-color:var(--border2)}
.iconBtn:active{transform:scale(.94)}
.iconBtn.deleteBtn:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}

.progressRing{
  --p:100;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--primary) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
  display:grid;place-items:center;position:relative;
  transition:background .3s ease;
}
.progressRing::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.progressRing b{position:relative;z-index:1;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;font-family:var(--mono)}
.progressRing.warn{background:conic-gradient(var(--warning) calc(var(--p)*1%), rgba(255,255,255,.08) 0)}
.progressRing.danger{background:conic-gradient(var(--danger) calc(var(--p)*1%), rgba(255,255,255,.08) 0)}
.newDot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.15);animation:pulseRed 2s ease-in-out infinite}
@keyframes pulseRed{
  0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.18)}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,.05)}
}

/* ── Empty & skeleton ── */
.emptyCard{
  text-align:center;padding:44px 24px;
  background:var(--surface);border:1px dashed var(--border2);
  border-radius:var(--r-lg);margin-bottom:18px;
}
.emptyCard.hidden{display:none}
.emptyIcon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:16px;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);
  display:grid;place-items:center;font-size:26px;
}
.emptyCard h2{font-size:17px;margin-bottom:8px}
.emptyCard p{color:var(--muted);font-size:14px;max-width:360px;margin:0 auto;line-height:1.6}

.skeletonWrap{display:grid;gap:14px}
.skeleton{
  background:linear-gradient(90deg, var(--surface) 0%, var(--surface2) 50%, var(--surface) 100%);
  background-size:200% 100%;animation:shim 1.4s linear infinite;border-radius:var(--r-lg);
}
.skeletonTitle{height:40px;max-width:220px}
.skeletonCard{height:86px}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}

.createBtn{margin-top:4px}

/* ── Detail view ── */
.back{margin-bottom:16px;padding:8px 12px;font-size:13px}

.addressCard{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;position:relative;overflow:hidden;
}
.addressCard::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(340px 120px at 50% -10%, rgba(99,102,241,.18), transparent 70%);
  pointer-events:none;
}
.addressCardTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative}
.statusChip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:#6ee7b7;font-weight:600;letter-spacing:.04em;
  background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.22);
  padding:4px 10px;border-radius:999px;
}
.address{
  font-size:clamp(17px,3.6vw,22px);font-weight:800;letter-spacing:-.01em;
  overflow-wrap:anywhere;margin:6px 0 18px;position:relative;
  font-family:var(--mono);
  background:linear-gradient(180deg,#fff,#c9cdea);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.copyBtn{margin-bottom:18px;position:relative}

.timerRow{display:flex;flex-direction:column;gap:10px;position:relative}
.progressBar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progressBar > span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  transition:width .95s linear, background .3s ease;border-radius:999px;
}
.progressBar.warn > span{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.progressBar.danger > span{background:linear-gradient(90deg,#ef4444,#f87171)}
.timerMeta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.timerText{color:var(--muted);font-size:13px}
.timerText b{font-variant-numeric:tabular-nums;color:#fff;font-weight:700;font-family:var(--mono)}
.lifetimeLabel{
  font-size:11.5px;color:var(--dim);letter-spacing:.04em;
  background:rgba(255,255,255,.04);padding:3px 9px;border-radius:999px;
  border:1px solid var(--border);
}

.detailActions{display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap}
.detailActions .btn{flex:1;min-width:140px}

.inboxHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.inboxHead h2{font-size:18px;font-weight:800}

/* ── Mail previews ── */
.mails{display:grid;gap:10px}
.mailPreview{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:14px;
  display:flex;align-items:center;gap:12px;
  transition:border-color .18s ease,background .18s ease;
}
.mailPreview:hover{border-color:var(--border2);background:var(--surface2)}
.mailPreviewAvatar{
  flex-shrink:0;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(99,102,241,.25), rgba(124,115,255,.15));
  border:1px solid rgba(99,102,241,.25);
  display:grid;place-items:center;
  font-weight:800;color:#c7d2fe;font-size:14px;text-transform:uppercase;
}
.mailPreviewMain{flex:1;min-width:0}
.mailPreviewSubject{
  display:block;overflow-wrap:anywhere;font-size:14px;font-weight:600;
  margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mailPreviewMeta{
  display:flex;gap:12px;flex-wrap:wrap;
  color:var(--muted);font-size:12px;
}
.mailPreviewMeta span{overflow-wrap:anywhere;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.emptyInbox{
  text-align:center;padding:38px 22px;background:var(--surface);
  border:1px dashed var(--border2);border-radius:var(--r-lg);
}
.emptyInbox h3{font-size:15.5px;margin-bottom:6px}
.emptyInbox p{color:var(--muted);font-size:13.5px}

/* ── Toasts ── */
.toasts{
  position:fixed;top:max(16px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none;
  width:min(92vw, 380px);
}
.toast{
  pointer-events:auto;
  background:rgba(24,27,36,.96);border:1px solid var(--border2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:12px 16px;border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);font-size:13.5px;color:#fff;
  animation:slideDown .28s cubic-bezier(.2,.8,.2,1);
}
.toast.success{border-color:rgba(16,185,129,.4)}
.toast.error{border-color:rgba(239,68,68,.4)}
.toast.info{border-color:rgba(99,102,241,.4)}
.toast.out{animation:slideUp .2s ease-in forwards}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideUp{to{opacity:0;transform:translateY(-8px) scale(.98)}}

.error{color:#fca5a5;font-size:13px;min-height:18px;margin-top:8px}

/* ── Modals ── */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px}
.modal.hidden{display:none}
.modalBackdrop{
  position:absolute;inset:0;
  background:rgba(4,5,8,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeIn .25s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modalCard{
  position:relative;width:min(100%, 460px);
  background:linear-gradient(180deg, #191c25, #131620);
  border:1px solid var(--border2);border-radius:var(--r-xl);
  padding:28px 24px 22px;
  box-shadow:var(--shadow-lg);
  animation:modalIn .32s cubic-bezier(.2,.9,.3,1.1);
  overflow:hidden;
}
.modalCardCompact{max-width:420px}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modalGlow{
  position:absolute;inset:-40% -20% auto -20%;height:220px;
  background:radial-gradient(60% 60% at 50% 0, rgba(99,102,241,.32), transparent 70%);
  pointer-events:none;
}
.modalGlow.danger{background:radial-gradient(60% 60% at 50% 0, rgba(239,68,68,.28), transparent 70%)}
.modalCard h2{font-size:22px;margin:10px 0 10px;position:relative}
.modalLede{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:22px;position:relative}

.durationPresets{display:grid;grid-template-columns:repeat(5, 1fr);gap:6px;margin-bottom:22px;position:relative}
.durationPresets button{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:10px 4px;
  font-size:12.5px;font-weight:600;color:var(--muted);
  transition:all .18s ease;
}
.durationPresets button:hover{color:#fff;background:rgba(255,255,255,.07)}
.durationPresets button.active{
  background:rgba(99,102,241,.16);color:#fff;border-color:rgba(99,102,241,.6);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}
.sliderWrap{margin-bottom:22px;position:relative}
.sliderWrap input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary) var(--fill, 40%), rgba(255,255,255,.08) var(--fill, 40%));
  outline:none;cursor:pointer;
}
.sliderWrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid var(--primary);
  cursor:grab;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.sliderWrap input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid var(--primary);
  cursor:grab;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.sliderLabels{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px;color:var(--dim)}
.sliderLabels b{color:#fff;font-size:14px;font-weight:800;letter-spacing:-.01em}

.modalActions{display:flex;gap:10px;justify-content:flex-end;position:relative}
.modalActions .btn{flex:0 0 auto}
.modalActions .btn.primary{flex:1}
.modalNote{text-align:center;color:var(--dim);font-size:11.5px;margin-top:18px;line-height:1.5;position:relative}

.connGrid{display:grid;gap:10px;margin:18px 0 18px;position:relative}
.connRow{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;background:rgba(255,255,255,.035);
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;
}
.connRow span{color:var(--muted)}
.connRow b{color:#fff;font-weight:600;font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere;text-align:right}
.connNote{
  font-size:12px;color:var(--dim);text-align:center;line-height:1.55;
  padding:12px 10px;background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.18);border-radius:var(--r-sm);
  margin-bottom:16px;
}

.confirmAddress{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:20px;
  font-family:var(--mono);font-size:13px;
  overflow-wrap:anywhere;text-align:center;
  color:#fca5a5;
}

/* ── Message full view (view.html) ─────────────────────────────── */

.messageHeader{
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.messageHeader::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(340px 120px at 50% -10%, rgba(99,102,241,.16), transparent 70%);
  pointer-events:none;
}
.messageSubject{
  font-size:clamp(19px,3.4vw,24px);font-weight:800;letter-spacing:-.015em;
  overflow-wrap:anywhere;margin-bottom:18px;position:relative;
}
.messageFromTo{display:grid;gap:10px;font-size:13px;position:relative}
.messageFromTo > div{display:flex;gap:12px;align-items:baseline}
.messageFromTo span{
  color:var(--dim);min-width:80px;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}
.messageFromTo b{
  color:#e5e7eb;font-family:var(--mono);font-size:12.5px;
  overflow-wrap:anywhere;font-weight:600;
}

/* ── Preview frame ─────────────────────────────────────────────── */

.previewWrap{
  position:relative;
  margin-bottom:18px;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  min-height:220px;
}
.previewFrame{
  width:100%;
  min-height:220px;
  border:0;
  display:block;
  background:#fff;
  color-scheme:light;
}
.previewFrame.hidden{display:none}

.previewLoading{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.02);
  color:var(--muted);font-size:13px;
  z-index:2;
}
.previewLoading.hidden{display:none}

.messageBody{
  padding:18px;
  background:rgba(0,0,0,.25);
  color:#d1d5db;
  font-size:14px;
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
  font-family:var(--mono);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
}
.messageBody a{color:#a5b4fc;text-decoration:underline;text-underline-offset:2px}
.messageBody.hidden{display:none}

.sectionTitle{
  font-size:14px;font-weight:700;letter-spacing:.02em;
  margin:22px 0 12px;color:#e5e7eb;
  display:flex;align-items:center;gap:8px;
}

/* ── Attachments ───────────────────────────────────────────────── */

.attachmentsWrap{margin-bottom:6px}
.attachments{display:grid;gap:10px}

.attachRow{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap:14px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  transition:border-color .15s ease, background .15s ease;
}
.attachRow:hover{border-color:var(--border2);background:var(--surface2)}

.attachIcon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg, rgba(99,102,241,.22), rgba(124,115,255,.12));
  border:1px solid rgba(99,102,241,.28);
  display:grid;place-items:center;font-size:20px;
}
.attachMain{min-width:0}
.attachName{
  display:block;font-size:14px;font-weight:600;
  overflow-wrap:anywhere;margin-bottom:3px;
  font-family:var(--mono);
  color:#f4f5f7;
}
.attachMeta{
  font-size:12px;color:var(--muted);
  font-family:var(--mono);
  overflow-wrap:anywhere;
}
.attachDownload{font-size:12.5px;padding:8px 12px;white-space:nowrap}

/* ── Raw .eml row ──────────────────────────────────────────────── */

.rawWrap{margin-bottom:6px}
.rawRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:14px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
}
.rawLabel{font-size:13px;color:#e5e7eb;font-weight:600}
.rawSize{font-size:12.5px;color:var(--muted);font-family:var(--mono)}

/* ── Message actions ───────────────────────────────────────────── */

.messageActions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;
}
.messageActions .btn{flex:1;min-width:140px}

/* ── Mobile ── */
@media(max-width:700px){
  .headerChips{order:3;width:100%;justify-content:flex-start;margin-top:6px}
  .chip{font-size:12px;padding:5px 10px}
}
@media(max-width:600px){
  .section{padding:56px 20px}
  .landing .hero{padding:44px 20px 20px}
  .shell{padding-bottom:120px}
  .heroCta{flex-direction:column;align-items:stretch}
  .heroCta .btn{width:100%}
  #create{position:sticky;bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);z-index:10}
  .mailboxCard{padding:14px}
  .progressRing{width:42px;height:42px}
  .detailActions .btn{flex:1 1 100%}
  .durationPresets{grid-template-columns:repeat(3, 1fr)}
  .modalCard{padding:24px 20px 20px}
  .modalActions{flex-direction:column-reverse}
  .modalActions .btn{width:100%}
  .viewHead{flex-direction:column;align-items:flex-start;gap:12px}
  .viewHead h1{font-size:22px}
  .messageFromTo > div{flex-direction:column;gap:2px}
  .messageFromTo span{min-width:auto}
  .previewWrap{min-height:180px}
  .previewFrame{min-height:180px}
  .attachRow{
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
  }
  .attachDownload{grid-column:1 / -1;justify-self:stretch}
  .rawRow{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .rawRow .btn{grid-column:1 / -1;justify-self:stretch}
  .messageActions .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}


/* ─────────────────────────────────────────────────────────────────────
 * Additions for the ZDROPMAIL email renderer (view.html)
 * ───────────────────────────────────────────────────────────────────── */

.emailPreview{
  background:#ffffff;
  color:#1a1a1a;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
  margin-bottom:18px;
  font-size:15px;
  line-height:1.65;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.emailPreview *{
  max-width:100%;
  box-sizing:border-box;
}

.emailPreview img{
  height:auto;
  border-radius:6px;
  display:block;
  margin:8px 0;
}

.emailPreview a{
  color:#4f46e5;
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-all;
}

.emailPreview h1,
.emailPreview h2,
.emailPreview h3,
.emailPreview h4,
.emailPreview h5,
.emailPreview h6{
  color:#111827;
  margin:16px 0 8px;
  line-height:1.25;
}

.emailPreview p{ margin:10px 0; }
.emailPreview ul,
.emailPreview ol{ padding-left:22px; margin:10px 0; }
.emailPreview li{ margin:4px 0; }

.emailPreview blockquote{
  margin:12px 0;
  padding:8px 14px;
  border-left:3px solid #e5e7eb;
  color:#4b5563;
  background:#f9fafb;
}

.emailPreview pre,
.emailPreview code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;
  background:#f3f4f6;
  color:#111827;
  border-radius:6px;
}
.emailPreview pre{
  padding:12px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

.emailPreview table{
  border-collapse:collapse;
  max-width:100%;
  font-size:14px;
  margin:10px 0;
}
.emailPreview td,
.emailPreview th{
  border:1px solid #e5e7eb;
  padding:6px 10px;
  vertical-align:top;
}
.emailPreview th{ background:#f9fafb; font-weight:600; }

.emailPlainText{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;
  line-height:1.65;
  color:#1a1a1a;
}
.emailPlainText a{ color:#4f46e5; text-decoration:underline; }

/* Dark theme override for the preview container's outer shell */
@media(prefers-color-scheme:dark){
  .emailPreview{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
}