/* ═══════════════════════════════════════════════════
   NOX MAIL — shared stylesheet (all languages)
   One file, cached once, served to every /nox/{lang}/ page.
═══════════════════════════════════════════════════ */
:root{
  --bg:#030507;--bg2:#080c12;--bg3:#0c121b;--bg4:#121a26;
  --border:#131b28;--border2:#1c2740;
  --accent:#00d9ac;--accent2:#5cffdb;--accent-glow:rgba(0,217,172,.08);
  --accent-dim:rgba(0,217,172,.13);
  --red:#ff4568;--red-dim:rgba(255,69,104,.1);
  --blue:#4c8dff;--blue-dim:rgba(76,141,255,.1);
  --green:#00d9ac;--green-dim:rgba(0,217,172,.1);
  --gold:var(--accent);--gold2:var(--accent2);--gold-glow:var(--accent-glow);
  --text:#c3d1de;--text2:#57687c;--text3:#25324420;--text3:#28384a;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --sans:'Tajawal','Segoe UI',Tahoma,sans-serif;
  --r:8px;--r-sm:5px;--r-lg:14px;
  --ease:cubic-bezier(.22,.68,0,1.05);
  --shadow-card:0 1px 0 rgba(255,255,255,.02) inset,0 20px 50px -20px rgba(0,0,0,.6);
  --shadow-pop:0 24px 70px -16px rgba(0,0,0,.75),0 0 0 1px rgba(0,217,172,.06);
}
body.ltr{--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',sans-serif}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.5;
}
::selection{background:var(--accent);color:#02100c}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── AMBIENT BACKGROUND (signature) ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%,rgba(0,217,172,.07) 0%,transparent 65%),
    radial-gradient(ellipse 50% 30% at 100% 100%,rgba(76,141,255,.035) 0%,transparent 60%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 60% 40% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 40% at 50% 0%,#000 0%,transparent 75%);
}
.wrap,#view-init,#view-active,#mail-modal,#save-overlay,.toast{position:relative;z-index:1}
header{position:relative;z-index:10000}
#lang-bar{position:relative;z-index:10001}

/* ── LAYOUT ── */
.wrap{max-width:900px;margin:0 auto;padding:0 20px 80px}

/* ── LANG DROPDOWN ── */
#lang-bar{position:relative;display:inline-block}
.lang-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 9px;
  border-radius:var(--r-sm);border:1px solid var(--border2);
  background:var(--bg2);color:var(--text2);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  cursor:pointer;user-select:none;
  transition:border-color .15s,color .15s,background .15s;
}
.lang-trigger:hover{border-color:rgba(0,217,172,.35);color:var(--accent);background:var(--bg3)}
.lang-trigger.open{border-color:rgba(0,217,172,.45);color:var(--accent);background:var(--bg3)}
.lang-trigger-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 7px var(--accent);flex-shrink:0;
}
.lang-trigger-caret{font-size:.5rem;opacity:.5;margin-right:2px;transition:transform .2s}
.lang-trigger.open .lang-trigger-caret{transform:rotate(180deg)}
.lang-dropdown{
  position:fixed;width:268px;background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--r);overflow:visible;box-shadow:var(--shadow-pop);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top center;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  pointer-events:none;z-index:99999;
}
.lang-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.lang-dropdown-inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  max-height:300px;overflow-y:auto;border-radius:var(--r) var(--r) 0 0;overflow-x:hidden;
}
.lang-dropdown-inner::-webkit-scrollbar{width:3px}
.lang-dropdown-inner::-webkit-scrollbar-thumb{background:rgba(0,217,172,.25);border-radius:2px}
.lang-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:11px 6px;background:var(--bg2);cursor:pointer;text-decoration:none;
  transition:background .12s;position:relative;overflow:hidden;
}
.lang-opt:hover{background:var(--bg3)}
.lang-opt.active{background:rgba(0,217,172,.07)}
.lang-opt.active::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,217,172,.09),transparent);pointer-events:none}
.lang-opt-code{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);transition:color .12s}
.lang-opt-name{font-size:.65rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;transition:color .12s}
.lang-opt:hover .lang-opt-code,.lang-opt:hover .lang-opt-name{color:var(--text)}
.lang-opt.active .lang-opt-code,.lang-opt.active .lang-opt-name{color:var(--accent)}
.lang-opt.active .lang-opt-name{font-weight:600}
.lang-opt-check{position:absolute;top:3px;right:3px;font-size:.45rem;color:var(--accent);opacity:0;transition:opacity .12s}
body.ltr .lang-opt-check{right:auto;left:3px}
.lang-opt.active .lang-opt-check{opacity:1}
.lang-dropdown-footer{padding:9px 12px;border-top:1px solid var(--border);font-family:var(--mono);font-size:.55rem;color:var(--text3);text-align:center;letter-spacing:.06em}

/* ── HEADER ── */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 20px;border-bottom:1px solid var(--border);margin-bottom:clamp(28px,5vw,44px);
}
.brand{
  font-family:var(--mono);font-size:1.02rem;color:var(--accent);letter-spacing:.06em;
  display:flex;align-items:center;gap:10px;text-shadow:0 0 22px rgba(0,217,172,.3);
  font-weight:600;
}
.brand-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent);animation:pulse 2.2s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hstats{display:flex;gap:22px}
.hstat{text-align:center}
.hstat-n{font-family:var(--mono);font-size:.92rem;font-weight:700;color:var(--gold);display:block}
.hstat-l{font-size:.63rem;color:var(--text2);letter-spacing:.07em;text-transform:uppercase}

/* ── HERO GRID ── */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:620px){.hero{grid-template-columns:1fr}}

/* ── CARD ── */
.card{
  background:linear-gradient(180deg,var(--bg2),var(--bg2) 60%,var(--bg3));
  border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;
  position:relative;overflow:hidden;transition:border-color .25s,transform .25s;
  box-shadow:var(--shadow-card);
}
.card:hover{border-color:var(--border2)}
.card-full{grid-column:1/-1}
.card-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.card-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── INIT STATE ── */
.init-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(38px,7vw,58px) 20px}
.init-icon{font-family:var(--mono);font-size:2.5rem;color:var(--border2);margin-bottom:18px;letter-spacing:-.04em}
.init-title{font-size:clamp(1.15rem,3vw,1.4rem);font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.init-sub{font-size:.87rem;color:var(--text2);line-height:1.75;max-width:280px}
.init-actions{display:flex;gap:10px;margin-top:28px;justify-content:center;flex-wrap:wrap}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 21px;
  border:1px solid var(--border2);border-radius:var(--r-sm);background:transparent;
  color:var(--text);font-family:var(--sans);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;text-decoration:none;
}
.btn:hover{background:var(--bg3);border-color:#324258}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#02100c;font-weight:700;box-shadow:0 8px 26px -10px rgba(0,217,172,.55)}
.btn-primary:hover{background:var(--gold2);border-color:var(--gold2);color:#031712;box-shadow:0 10px 30px -8px rgba(0,217,172,.7)}
.btn-ghost{border-color:rgba(0,217,172,.32);color:var(--gold)}
.btn-ghost:hover{background:var(--gold-glow);border-color:var(--gold)}
.btn-danger{border-color:rgba(255,69,104,.32);color:var(--red)}
.btn-danger:hover{background:var(--red-dim);border-color:var(--red)}
.btn-sm{padding:6px 13px;font-size:.78rem}
.btn-xs{padding:3px 9px;font-size:.72rem}

/* ── EMAIL DISPLAY ── */
.email-addr{font-family:var(--mono);font-size:1.08rem;color:var(--gold2);font-weight:700;word-break:break-all;line-height:1.5;margin-bottom:14px}
.copy-row{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer;transition:all .18s;user-select:none;margin-bottom:8px}
.copy-row:hover{border-color:var(--gold);background:var(--gold-glow)}
.copy-val{flex:1;font-family:var(--mono);font-size:.82rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-lbl{font-family:var(--mono);font-size:.7rem;color:var(--text2);white-space:nowrap;transition:color .18s}
.copy-row:hover .copy-lbl{color:var(--gold)}
.copy-row.copied{border-color:var(--green)}
.copy-row.copied .copy-lbl{color:var(--green)}

/* ── TIMER ── */
.timer-wrap{margin-top:18px}
.timer-num{font-family:var(--mono);font-size:2.3rem;font-weight:700;color:var(--gold);letter-spacing:.04em;display:block;margin-bottom:8px;transition:color .3s;font-variant-numeric:tabular-nums}
.timer-num.warn{color:#f5a623}
.timer-num.danger{color:var(--red)}
.timer-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:6px}
.timer-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;transition:width 1s linear,background .3s}
.timer-bar.warn{background:#f5a623}
.timer-bar.danger{background:var(--red)}
.timer-sub{font-size:.72rem;color:var(--text2);font-family:var(--mono)}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ── LOGIN FORM ── */
.login-form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.field label{display:block;font-size:.7rem;color:var(--text2);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:10px 13px;border-radius:var(--r-sm);font-family:var(--mono);font-size:.88rem;outline:none;transition:border-color .18s}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:var(--text3)}

/* ── TELEGRAM ── */
.tg-desc{font-size:.83rem;color:var(--text2);line-height:1.8;margin-bottom:14px}
.tg-btn{display:flex;align-items:center;gap:10px;background:rgba(0,140,212,.09);border:1px solid rgba(0,140,212,.24);border-radius:var(--r);color:#55c0ff;font-size:.85rem;font-weight:600;padding:12px 18px;text-decoration:none;transition:all .18s;width:100%;justify-content:center}
.tg-btn:hover{background:rgba(0,140,212,.17);border-color:rgba(0,140,212,.45)}
.tg-token-row{display:flex;align-items:center;gap:6px;margin-top:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px}
.tg-token-val{flex:1;font-family:var(--mono);font-size:.7rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}

.link-card{margin-top:12px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden}
.link-card-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);padding:9px 14px 0}
.link-card-url{font-family:var(--mono);font-size:.72rem;color:var(--gold);padding:6px 14px 10px;word-break:break-all;line-height:1.5;direction:ltr;text-align:left}
.link-card-actions{display:flex;align-items:center;gap:7px;padding:10px 14px;border-top:1px solid var(--border);background:rgba(255,255,255,.02);flex-wrap:wrap}
.link-card-expiry{font-family:var(--mono);font-size:.63rem;color:var(--text3);padding:6px 14px 8px;border-top:1px solid var(--border)}
.token-mini{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 10px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--r-sm)}
.token-mini-lbl{font-family:var(--mono);font-size:.62rem;color:var(--text3)}
.token-mini-val{flex:1;font-family:var(--mono);font-size:.78rem;color:var(--text);letter-spacing:.12em;font-weight:700}

.tg-linked{display:flex;align-items:center;gap:12px;background:rgba(0,217,172,.07);border:1px solid rgba(0,217,172,.2);border-radius:var(--r);padding:14px 16px}
.tg-linked-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2.2s ease infinite}
.tg-linked-text{flex:1;font-size:.83rem}
.tg-badge{font-family:var(--mono);font-size:.65rem;color:var(--green);border:1px solid rgba(0,217,172,.28);padding:2px 7px;border-radius:3px}

/* ── INBOX ── */
.inbox-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.inbox-badge{font-family:var(--mono);font-size:.68rem;color:var(--text2);border:1px solid var(--border);padding:2px 9px;border-radius:3px;letter-spacing:.04em}
.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:5px;animation:pulse 2.2s ease infinite}
.mail-list{list-style:none}
.mail-item{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:14px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);position:relative;user-select:none}
.mail-item:last-child{border-bottom:none}
.mail-item:hover{background:var(--bg3)}
.mail-item.unread{background:rgba(0,217,172,.025)}
.mail-item.unread::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:2px;height:55%;background:var(--gold);border-radius:1px}
.mail-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.75rem;color:var(--text2);flex-shrink:0;text-transform:uppercase}
.mail-info{min-width:0}
.mail-from{font-size:.75rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.mail-subj{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.mail-item.unread .mail-subj{color:var(--gold2)}
.mail-time{font-family:var(--mono);font-size:.68rem;color:var(--text3);white-space:nowrap}
.empty-state{text-align:center;padding:48px 20px}
.empty-icon{font-family:var(--mono);font-size:1.8rem;color:var(--border2);margin-bottom:10px;display:block}

/* ── MODAL ── */
#mail-modal{display:none;position:fixed;inset:0;background:rgba(3,5,9,.94);backdrop-filter:blur(3px);z-index:9999;overflow-y:auto;padding:20px}
#mail-modal.open{display:block}
.mbox{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-lg);max-width:820px;width:100%;margin:0 auto;box-shadow:var(--shadow-pop);animation:slideUp .22s var(--ease)}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.mbox-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:var(--bg3);border-radius:var(--r-lg) var(--r-lg) 0 0;position:sticky;top:0;z-index:1}
.mbox-subject{font-size:.98rem;font-weight:700;color:var(--text);flex:1;line-height:1.55;word-break:break-word}
.mbox-close{background:none;border:1px solid var(--border2);color:var(--text2);width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mbox-close:hover{border-color:var(--red);color:var(--red);background:var(--red-dim)}
.mbox-meta{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--border);background:var(--bg3)}
.mbox-meta-item{padding:10px 22px;font-size:.78rem;border-left:1px solid var(--border);display:flex;align-items:center;gap:6px;min-width:0}
.mbox-meta-item:last-child{border-left:none}
.mbox-meta-lbl{color:var(--text2);font-family:var(--mono);white-space:nowrap;font-size:.68rem}
.mbox-meta-val{color:var(--text);word-break:break-all;font-size:.8rem}
.mbox-body{padding:0}
.mail-txt{padding:24px;font-size:.9rem;line-height:1.9;white-space:pre-wrap;word-break:break-word;color:var(--text);direction:auto}
.mail-html-wrap{background:#fff;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.mail-html-wrap iframe{width:100%;border:none;display:block;min-height:300px;transition:height .2s}
.mbox-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap;background:var(--bg3);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ── TOAST ── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:10px 22px;border-radius:var(--r);font-size:.83rem;font-weight:600;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;z-index:99999;white-space:nowrap;box-shadow:var(--shadow-pop)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(0,217,172,.4);color:var(--gold)}
.toast.err{border-color:rgba(255,69,104,.4);color:var(--red)}

/* ── SPINNER ── */
.spin{width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:_spin .65s linear infinite;display:inline-block;flex-shrink:0}
@keyframes _spin{to{transform:rotate(360deg)}}
.fade-in{animation:_fade .35s var(--ease) both}
@keyframes _fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* ── SAVE SITE ── */
.btn-save-site{display:flex;align-items:center;gap:7px;width:100%;padding:9px 13px;background:transparent;border:1px dashed var(--border2);border-radius:var(--r-sm);color:var(--text2);font-family:var(--sans);font-size:.78rem;cursor:pointer;transition:all .18s;margin-bottom:10px}
.btn-save-site:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
#save-overlay{position:fixed;inset:0;z-index:99998;background:rgba(3,5,9,.88);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease}
#save-overlay.open{opacity:1;pointer-events:all}
.save-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-lg);width:100%;max-width:360px;overflow:hidden;transform:translateY(20px) scale(.97);transition:transform .3s var(--ease);box-shadow:var(--shadow-pop)}
#save-overlay.open .save-modal{transform:translateY(0) scale(1)}
.save-modal-head{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.save-modal-title{font-size:.88rem;font-weight:700;color:var(--text)}
.save-modal-close{background:none;border:1px solid var(--border2);color:var(--text2);width:26px;height:26px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .15s}
.save-modal-close:hover{border-color:var(--red);color:var(--red)}
.save-modal-body{padding:20px 18px}
.save-device-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:16px}
.save-device-badge.mobile{background:rgba(0,217,172,.09);border:1px solid rgba(0,217,172,.22);color:var(--green)}
.save-device-badge.desktop{background:var(--blue-dim);border:1px solid rgba(76,141,255,.22);color:var(--blue)}
.save-step{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;opacity:0;transform:translateX(10px);transition:opacity .3s ease,transform .3s ease}
.save-step.vis{opacity:1;transform:translateX(0)}
.save-step-n{width:22px;height:22px;border-radius:50%;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.65rem;color:var(--text2);flex-shrink:0;margin-top:2px}
.save-step-txt{font-size:.82rem;color:var(--text);line-height:1.65}
.save-step-txt b{color:var(--gold2);font-weight:700}
.save-keys{display:flex;align-items:center;gap:7px;margin:18px 0 4px;flex-wrap:wrap}
.save-key{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--text);background:var(--bg4);border:1px solid var(--border2);border-bottom:3px solid var(--border2);border-radius:var(--r-sm);padding:6px 12px;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.save-key.vis{opacity:1;transform:translateY(0)}
.save-key-sep{color:var(--text3);font-size:.8rem;opacity:0;transition:opacity .25s ease}
.save-key-sep.vis{opacity:1}
.save-phone{width:120px;height:200px;border:1.5px solid var(--border2);border-radius:16px;margin:0 auto 18px;background:var(--bg3);overflow:hidden;position:relative;opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .35s ease}
.save-phone.vis{opacity:1;transform:scale(1)}
.save-phone-bar{height:22px;background:var(--bg4);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.save-phone-url{font-family:var(--mono);font-size:.55rem;color:var(--text3)}
.save-phone-body{padding:8px;display:flex;flex-direction:column;gap:5px}
.save-phone-line{height:4px;border-radius:2px;background:var(--border)}
.save-phone-line.g{background:var(--gold);width:55%}
.save-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border2);border-radius:12px 12px 0 0;padding:10px 8px;transform:translateY(100%);transition:transform .4s var(--ease)}
.save-sheet.up{transform:translateY(0)}
.save-sheet-handle{width:24px;height:2.5px;border-radius:2px;background:var(--border2);margin:0 auto 8px}
.save-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.save-sheet-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.save-sheet-circle{width:28px;height:28px;border-radius:50%;background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text2)}
.save-sheet-item.hl .save-sheet-circle{background:rgba(0,217,172,.14);border-color:rgba(0,217,172,.32);color:var(--green)}
.save-sheet-lbl{font-size:.5rem;color:var(--text3);text-align:center}
.save-tap{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(0,217,172,.28);border:1px solid var(--gold);pointer-events:none;transform:translate(-50%,-50%);display:none}
.save-tap.go{display:block;animation:saveTap .55s ease forwards}
@keyframes saveTap{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}

.sf-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);margin-top:10px;cursor:pointer;user-select:none;transition:border-color .18s}
.sf-row:hover{border-color:var(--border2)}
.sf-row-left{display:flex;align-items:center;gap:9px}
.sf-label{font-size:.82rem;font-weight:600}
.sf-sub{font-size:.7rem;color:var(--text2);margin-top:1px}
.sf-toggle{width:34px;height:18px;background:var(--border2);border-radius:9px;position:relative;transition:background .2s;flex-shrink:0}
.sf-toggle.on{background:var(--gold)}
.sf-toggle::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s}
.sf-toggle.on::after{left:19px}
.smart-box{margin-top:0;animation:_fade .25s ease both}
.smart-box-inner{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden}
.smart-box-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(0,217,172,.05)}
.smart-box-title{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:6px}
.smart-box-badge{font-family:var(--mono);font-size:.6rem;background:var(--gold-glow);border:1px solid rgba(0,217,172,.28);color:var(--gold2);padding:2px 7px;border-radius:3px}
.smart-item{padding:12px 14px;border-bottom:1px solid var(--border)}
.smart-item:last-child{border-bottom:none}
.smart-item-type{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.smart-item-val{font-family:var(--mono);font-size:.88rem;color:var(--gold2);font-weight:700;word-break:break-all;line-height:1.5}
.smart-item-val.is-link{color:var(--blue);text-decoration:none}
.smart-item-val.is-link:hover{text-decoration:underline}
.smart-item-actions{display:flex;gap:6px;margin-top:8px}
.smart-empty{padding:16px 14px;font-size:.8rem;color:var(--text2);text-align:center;font-family:var(--mono)}

/* LTR override for non-RTL langs */
body.ltr{direction:ltr}
body.ltr .mail-item.unread::before{right:auto;left:0}
body.ltr .mbox-meta-item{border-left:none;border-right:1px solid var(--border)}
body.ltr .mbox-meta-item:last-child{border-right:none}

@media(max-width:500px){
  .mbox-meta{flex-direction:column}
  .mbox-meta-item{border-left:none;border-bottom:1px solid var(--border);padding:8px 18px}
  .mail-item{grid-template-columns:32px 1fr}.mail-time{display:none}
  header{flex-wrap:wrap;gap:12px}.hstats{order:-1;width:100%;justify-content:flex-end}
  .card{padding:20px}
}