:root{
  --ink:#16233e;
  --ink-soft:#3a4966;
  --red:#b23a2e;
  --parchment:#ede6d6;
  --paper:#faf8f3;
  --line: rgba(22,35,62,0.16);
  --radius: 3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--parchment);
  background-image: radial-gradient(circle at 1px 1px, rgba(22,35,62,0.08) 1px, transparent 0);
  background-size: 22px 22px;
  color:var(--ink);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 16px 64px;
}
[dir="rtl"] body{ text-align:right; }
h1,h2,.display{ font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.01em; }
.wrap{ width:100%; max-width:620px; }

.topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .mark{ display:inline-block; width:34px;height:34px; border:1.5px solid var(--ink); border-radius:50%; position:relative; flex:none; }
.brand .mark::after{ content:""; position:absolute; inset:6px; border:1px solid var(--red); border-radius:50%; }
.brand-name{ font-size:1.25rem; }
select#langSelect{
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 8px; color:var(--ink);
}

.stamp{
  background:var(--paper); border:1.5px solid var(--ink);
  padding:28px 24px 22px; position:relative;
  box-shadow: 6px 6px 0 rgba(22,35,62,0.10);
}
.stamp::before{ content:""; position:absolute; inset:8px; border:1px dashed var(--line); pointer-events:none; }
.kicker{ font-size:0.72rem; color:var(--red); margin:0 0 6px; letter-spacing:0.02em; }
h1{ font-size:1.7rem; margin:0 0 6px; }
.subtitle{ margin:0 0 22px; color:var(--ink-soft); font-size:0.92rem; max-width:46ch;}

.address-row{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin-bottom:10px; }
#emailAddr{
  flex:1 1 260px; font-family:'IBM Plex Mono', monospace; font-size:1.05rem; font-weight:600;
  background:var(--parchment); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; color:var(--ink); letter-spacing:0.01em; overflow-wrap:anywhere;
}
button{
  font-family:'IBM Plex Mono', monospace; font-size:0.86rem; cursor:pointer;
  border-radius:var(--radius); border:1px solid var(--ink); padding:11px 16px;
  background:var(--ink); color:var(--paper); transition: transform .08s ease; white-space:nowrap;
}
button:active{ transform: translateY(1px); }
button.ghost{ background:transparent; color:var(--ink); }
button.link{ border:none; background:none; text-decoration:underline; padding:4px 2px; color:var(--ink-soft); }
button:disabled{ opacity:0.5; cursor:default; }

.meta-row{
  display:flex; justify-content:space-between; align-items:center; font-size:0.78rem;
  color:var(--ink-soft); margin-top:14px; flex-wrap:wrap; gap:8px;
}
.timer{ font-weight:600; color:var(--red); }

.change-form{ display:none; gap:8px; margin-top:14px; flex-wrap:wrap; }
.change-form.open{ display:flex; }
.change-form input{
  flex:1 1 160px; font-family:'IBM Plex Mono', monospace; border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 12px; background:var(--parchment); color:var(--ink);
}

.captcha-box{
  display:none; margin-top:16px; padding:14px; border:1px dashed var(--red);
  background:rgba(178,58,46,0.05);
}
.captcha-box.open{ display:block; }
.captcha-question{ margin:0 0 8px; font-size:0.86rem; }
.captcha-row{ display:flex; gap:8px; }
.captcha-row input{
  width:90px; font-family:'IBM Plex Mono', monospace; border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 12px; background:var(--paper); color:var(--ink);
}
.captcha-hint{ margin:8px 0 0; font-size:0.76rem; color:var(--red); min-height:1em; }

.inbox{ margin-top:26px; width:100%; }
.inbox h2{ font-size:1.05rem; margin:0 0 12px; display:flex; align-items:center; gap:10px; justify-content:space-between;}
.inbox h2 .count{ font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:0.78rem; color:var(--ink-soft); }
.empty{ border:1px dashed var(--line); padding:26px 18px; text-align:center; color:var(--ink-soft); font-size:0.86rem; }
ul#mailList{ list-style:none; margin:0; padding:0; }
.mail-item{ border-bottom:1px solid var(--line); padding:14px 4px; cursor:pointer; }
.mail-item:first-child{ border-top:1px solid var(--line); }
.mail-item:hover{ background:rgba(178,58,46,0.05); }
.mail-item .row1{ display:flex; justify-content:space-between; gap:10px; font-size:0.85rem; }
.mail-item .from{ font-weight:600; }
.mail-item .date{ color:var(--ink-soft); font-size:0.75rem; flex:none; }
.mail-item .subject{ font-size:0.88rem; margin-top:3px; }
.mail-item .excerpt{ font-size:0.78rem; color:var(--ink-soft); margin-top:2px; }
.mail-item.unread .from, .mail-item.unread .subject{ font-weight:600; }
.mail-item.unread{ position:relative; }
.mail-item.unread::before{ content:""; position:absolute; left:-4px; top:20px; width:6px; height:6px; border-radius:50%; background:var(--red); }

.reader{ display:none; margin-top:26px; border:1.5px solid var(--ink); background:var(--paper); padding:20px; width:100%; }
.reader.open{ display:block; }
.reader .back{ margin-bottom:12px; }
.reader h3{ margin:0 0 4px; font-family:'Fraunces',serif; font-size:1.15rem; }
.reader .from-line{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:14px; }
.reader iframe{ width:100%; min-height:220px; border:1px solid var(--line); background:#fff; }

footer{ margin-top:40px; font-size:0.74rem; color:var(--ink-soft); text-align:center; max-width:480px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }