/* ================= theme tokens ================= */
:root, html[data-theme="dark"]{
  --bg:#050807;--panel:#0a0f0d;--line:#12331f;--fg:#c8ffdd;--dim:#4d8a66;
  --acc:#00ff88;--warn:#ff3860;--input:#060b09;--htmlbg:#fff;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --glow:radial-gradient(ellipse at 50% -20%,rgba(0,255,136,.06),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,255,136,.012) 2px 4px);
  --accfade:rgba(0,255,136,.07);
}
html[data-theme="light"]{
  --bg:#dfe6e1;--panel:#ffffff;--line:#7fa08c;--fg:#07130d;--dim:#33584d;
  --acc:#005c33;--warn:#a50f33;--input:#f2f6f3;--htmlbg:#fff;
  --glow:radial-gradient(ellipse at 50% -20%,rgba(0,92,51,.07),transparent 60%);
  --accfade:rgba(0,92,51,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
/* theme transition: circular reveal via View Transitions API */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:9999}
/* fallback cross-fade for browsers without view transitions */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .55s ease,color .55s ease,border-color .55s ease,
    box-shadow .55s ease,fill .55s ease !important}
#themeBtn{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
#themeBtn.spin{transform:rotate(360deg) scale(1.25)}
body{
  font-family:var(--mono);color:var(--fg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;
  background:var(--glow);
}
main{width:100%;max-width:640px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
h1{font-size:1.1rem;font-weight:400;cursor:pointer;display:flex;align-items:center}
h1 a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
h1 img{height:2.1rem;width:auto;display:block}
.ctrls{display:flex;gap:.4rem;align-items:center}
.ctrls select,.ctrls button{width:auto;margin:0;padding:.3rem .5rem;font-size:.7rem}
.sub{color:var(--dim);font-size:.72rem;margin-bottom:2.2rem;letter-spacing:.08em}
.panel{background:var(--panel);border:1px solid var(--line);padding:1.4rem;margin-bottom:1rem}
label{display:block;font-size:.68rem;color:var(--dim);letter-spacing:.15em;
      text-transform:uppercase;margin:.9rem 0 .3rem}
input,select,textarea,button{
  font-family:var(--mono);font-size:.9rem;color:var(--fg);
  background:var(--input);border:1px solid var(--line);padding:.6rem .7rem;width:100%;
  outline:none;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:1rem;height:1rem;
  border:1px solid var(--acc);background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .35s,background .35s;position:relative}
input[type="checkbox"]:checked{
  background:var(--acc)}
input[type="checkbox"]:hover{border-color:var(--acc);opacity:.9}
textarea{min-height:9rem;resize:vertical}
button{cursor:pointer;background:transparent;border:1px solid var(--acc);color:var(--acc);
  letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;padding:.75rem;
  transition:background .35s,color .35s,opacity .35s,box-shadow .35s,transform .35s;
  margin-top:1.1rem;opacity:.9}
button:hover{background:var(--acc);color:#000;opacity:1;
  box-shadow:0 0 12px var(--accfade),0 0 24px var(--accfade);transform:translateY(-1px)}
button.ghost{border-color:var(--line);color:var(--dim);margin-top:.5rem;opacity:.85}
button.ghost:hover{background:var(--line);color:var(--fg);opacity:1;
  box-shadow:0 0 8px rgba(77,138,102,.15);transform:translateY(-1px)}
button.burn{border-color:var(--warn);color:var(--warn);opacity:.9}
button.burn:hover{background:var(--warn);color:#fff;opacity:1;
  box-shadow:0 0 12px rgba(255,56,96,.25),0 0 24px rgba(255,56,96,.15);
  transform:translateY(-1px)}
.seg{display:flex;gap:0}
.seg button{margin-top:0;border-color:var(--line);color:var(--dim);flex:1;
  transition:background .35s,color .35s,opacity .35s,box-shadow .35s,transform .35s;
  opacity:.85}
.seg button:hover{opacity:1;transform:translateY(-1px)}
.seg button.on{border-color:var(--acc);color:var(--acc);opacity:1;
  box-shadow:0 0 8px var(--accfade)}
.addr{font-size:1.05rem;color:var(--acc);word-break:break-all;cursor:pointer;
  padding:.9rem;border:1px dashed var(--acc);text-align:center;margin:.4rem 0}
.addr:hover{background:var(--accfade)}
.meta{color:var(--dim);font-size:.7rem;margin-top:.6rem;letter-spacing:.05em}
.msg{border:1px solid var(--line);padding:.8rem .9rem;margin-top:.6rem;cursor:pointer}
.msg:hover{border-color:var(--acc)}
.msg .from{color:var(--acc);font-size:.8rem;word-break:break-all}
.msg .subj{font-size:.9rem;margin-top:.2rem}
.msg .time{color:var(--dim);font-size:.65rem;margin-top:.25rem}
.empty{color:var(--dim);font-size:.8rem;text-align:center;padding:2rem 0;letter-spacing:.1em}
.wait-wrap{padding:2rem 0;text-align:center;font-size:.85rem;letter-spacing:.18em}
.wait-glyphs{color:var(--acc);text-shadow:0 0 6px var(--accfade),0 0 14px var(--accfade);
  animation:wait-pulse 2.4s ease-in-out infinite}
.wait-cursor{display:inline-block;margin-left:.15em;color:var(--acc);
  text-shadow:0 0 8px var(--accfade);animation:wait-blink 1s steps(1) infinite}
@keyframes wait-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes wait-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.body-view{white-space:pre-wrap;word-break:break-word;font-size:.85rem;line-height:1.55;
  border:1px solid var(--line);padding:1rem;margin-top:.8rem;max-height:50vh;overflow:auto;background:var(--input)}
iframe.html-view{width:100%;height:50vh;border:1px solid var(--line);background:var(--htmlbg);margin-top:.8rem}
.row{display:flex;gap:.6rem}
.row>*{flex:1}
.hidden{display:none}
a{color:var(--acc)}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);
  background:var(--acc);color:var(--bg);padding:.5rem 1.2rem;font-size:.75rem;
  letter-spacing:.15em;opacity:0;pointer-events:none;transition:opacity .25s;z-index:9}
.toast.show{opacity:1}

/* paid-alias success banner (1-year purchase confirmation) */
.paid-success{margin:0 0 1.2rem;border:1px solid var(--acc);border-radius:4px;
  background:linear-gradient(180deg,var(--accfade),transparent);
  box-shadow:0 0 0 1px var(--acc) inset,0 0 18px -4px var(--acc);
  overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);
  transition:max-height .45s ease,opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.paid-success.show{max-height:200px;opacity:1;transform:translateY(0)}
.paid-success-inner{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem}
.paid-success-check{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;
  border:2px solid var(--acc);color:var(--acc);font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  animation:paidPop .5s cubic-bezier(.34,1.56,.64,1) both,paidPulse 1.8s ease-in-out .5s infinite}
@keyframes paidPop{0%{transform:scale(0) rotate(-90deg);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes paidPulse{0%,100%{box-shadow:0 0 0 0 var(--accfade)}50%{box-shadow:0 0 0 6px transparent}}
.paid-success-text{flex:1 1 auto;min-width:0}
.paid-success-title{color:var(--acc);font-size:.82rem;letter-spacing:.06em;font-weight:700}
.paid-success-sub{color:var(--fg);font-size:.7rem;margin-top:.15rem;opacity:.85}
.paid-success-copy{flex:0 0 auto;margin:0!important;padding:.35rem .6rem!important;font-size:.68rem!important}
.paid-success-close{flex:0 0 auto;cursor:pointer;color:var(--dim);font-size:.8rem;padding:.1rem .3rem}
.paid-success-close:hover{color:var(--fg)}
.paid-success.confetti::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--acc) 20%,transparent 22%),radial-gradient(circle,var(--acc) 20%,transparent 22%);
  background-size:14px 14px,10px 10px;background-position:0 0,7px 7px;opacity:.0;
  animation:paidConfetti 1.1s ease-out .15s 1}
@keyframes paidConfetti{0%{opacity:.0;transform:translateY(-30px)}30%{opacity:.5}100%{opacity:0;transform:translateY(40px)}}
@media(max-width:520px){.paid-success-title{font-size:.74rem}.paid-success-sub{font-size:.64rem}}
footer{margin-top:auto;padding-top:2.5rem;color:var(--dim);font-size:.62rem;
  letter-spacing:.12em;text-align:center;line-height:1.9;max-width:640px}
.err{color:var(--warn);font-size:.75rem;margin-top:.6rem;min-height:1em}
.back{color:var(--dim);font-size:.7rem;cursor:pointer;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:.8rem;display:inline-block}
.back:hover{color:var(--acc)}
.divider{border-top:1px solid var(--line);margin:1.4rem 0 .2rem;position:relative}
.divider span{position:absolute;top:-.6em;left:50%;transform:translateX(-50%);
  background:var(--panel);padding:0 .8rem;color:var(--dim);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase}
.keybox{font-size:.75rem;color:var(--fg);word-break:break-all;cursor:pointer;
  padding:.7rem;border:1px dashed var(--dim);margin-top:.4rem;background:var(--input)}
.keybox:hover{border-color:var(--acc)}
.msg.read .from,.msg.read .subj{opacity:.62}
/* ================= retro themes =================
   Retro themes (geos / workbench / win31 / macos / win95) now live in their
   own self-contained theme-*.css + theme-*.js files, loaded on demand by
   loadAddonTheme() in classic.js. Each one ships its own pixel font, window
   chrome, boot sequence, period-accurate transitions and crash gag. */
html[data-theme="geos"],html[data-theme="workbench"],html[data-theme="win31"],
html[data-theme="macos"],html[data-theme="win95"]{--glow:none;--htmlbg:#fff}