/* ============================================================
   SOUKAMOD MAIL — Complete Stylesheet
   ============================================================ */

/* Fonts are preloaded in HTML <head> for better performance. */
:root{
  --bg:#f8fafc;
  --bg-gradient:radial-gradient(circle at 50% -20%, #ccfbf1 0%, #f8fafc 45%);
  --card:#ffffff;
  --text:#0f172a;
  --text-strong:#020617;
  --muted:#64748b;
  --border:#e5e9ef;
  --border-strong:#cbd5e1;
  --accent:#0d9488;
  --accent-2:#14b8a6;
  --accent-3:#0f766e;
  --accent-soft:#f0fdfa;
  --accent-glow:rgba(13,148,136,.15);
  --accent-gradient:linear-gradient(135deg,#0d9488 0%,#14b8a6 100%);
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --success:#16a34a;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 12px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05);
  --shadow-glow:0 8px 24px rgba(13,148,136,.20);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --transition:.2s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg:#0a0f1a;
  --bg-gradient:radial-gradient(circle at 50% -20%, #134e4a 0%, #0a0f1a 45%);
  --card:#141b2b;
  --text:#e2e8f0;
  --text-strong:#f8fafc;
  --muted:#94a3b8;
  --border:#1f2937;
  --border-strong:#334155;
  --accent:#2dd4bf;
  --accent-2:#5eead4;
  --accent-3:#14b8a6;
  --accent-soft:#0f2a2a;
  --accent-glow:rgba(45,212,191,.15);
  --accent-gradient:linear-gradient(135deg,#14b8a6 0%,#2dd4bf 100%);
  --danger:#f87171;
  --danger-soft:#2a1215;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.4);
  --shadow-glow:0 8px 24px rgba(45,212,191,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  background-image:var(--bg-gradient);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-3)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 24px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
[data-theme="dark"] .topbar{background:rgba(20,27,43,.72)}

.brand{display:flex;align-items:center}
.brand-home{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;
}
.brand-icon{
  width:32px;height:32px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.brand-text{
  font-weight:800;
  font-size:16px;
  letter-spacing:-.3px;
  color:var(--text-strong);
  line-height:1;
  white-space:nowrap;
}
.brand-text strong{color:var(--accent)}

/* Language Dropdown */
.lang-menu{position:relative;display:inline-block}
.lang-trigger{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  font-family:inherit;font-weight:600;font-size:13px;
  cursor:pointer;
  transition:all var(--transition);
  letter-spacing:.3px;
}
.lang-trigger:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.lang-trigger:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.lang-trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.lang-trigger .lang-flag{font-size:14px;line-height:1}
.lang-trigger .lang-code{font-weight:700;letter-spacing:1px}
.lang-trigger .lang-caret{opacity:.65;transition:transform var(--transition)}
.lang-trigger[aria-expanded="true"] .lang-caret{transform:rotate(180deg);opacity:1}
.lang-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:200px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:6px;z-index:100;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
html[dir="rtl"] .lang-dropdown{right:auto;left:0}
.lang-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  color:var(--text);font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.lang-option:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.lang-option .lang-flag{font-size:18px;line-height:1}
.lang-option .lang-name{flex:1;text-align:start}
.lang-option.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.lang-option .lang-check{color:var(--accent);flex-shrink:0}

.topnav{display:flex;gap:16px;align-items:center;font-size:14px;font-weight:500}
.topnav a{color:var(--muted);position:relative}
.topnav a:hover{color:var(--accent)}
.topnav a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--accent);transition:width var(--transition);
}
.topnav a:hover::after{width:100%}
.icon-btn{
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;color:var(--text);cursor:pointer;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.icon-btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.icon-btn svg{width:16px;height:16px}

/* Container */
.container{max-width:800px;margin:0 auto;padding:32px 20px 0}
.tagline{text-align:center;font-size:16px;color:var(--muted);margin:0 0 28px;font-weight:500}

/* Cards */
.mailbox-card,.inbox-card,.viewer{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow);
  padding:24px;margin-bottom:20px;
  transition:box-shadow var(--transition);
}
.mailbox-card:hover{box-shadow:var(--shadow-lg)}

/* Email row */
.email-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.email-input{
  flex:1;min-width:200px;
  font-size:19px;font-weight:700;letter-spacing:-.3px;
  padding:16px 20px;
  border:2px solid var(--accent);
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--card) 150%);
  color:var(--text-strong);
  font-family:ui-monospace,'SF Mono',Monaco,monospace;
  transition:all var(--transition);outline:none;
}
.email-input:focus{box-shadow:0 0 0 4px var(--accent-glow)}

/* Buttons */
.btn{
  background:var(--card);color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:12px 20px;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;
  transition:all var(--transition);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  text-decoration:none;
}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}
.btn-primary:hover{color:#fff;border-color:transparent;box-shadow:var(--shadow-glow),0 12px 24px rgba(13,148,136,.3);transform:translateY(-2px)}
.btn-danger{color:var(--danger);border-color:var(--border-strong)}
.btn-danger:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.btn-small{padding:8px 14px;font-size:13px;border-radius:var(--radius-sm)}

/* Mailbox actions */
.mailbox-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ttl-select{
  padding:11px 16px;border-radius:var(--radius);
  border:1px solid var(--border-strong);
  background:var(--card);color:var(--text);
  font-family:inherit;font-weight:500;font-size:14px;
  cursor:pointer;transition:border-color var(--transition);
}
.ttl-select:focus{outline:none;border-color:var(--accent)}

/* Fixed TTL badge */
.ttl-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 16px;border-radius:var(--radius);
  background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--accent);font-weight:700;font-size:14px;
  white-space:nowrap;
}

/* Meta / status */
.meta-row{
  display:flex;gap:12px;align-items:center;
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);
  flex-wrap:wrap;
}
.status{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;transition:all var(--transition);
}
.status.online{background:var(--success);box-shadow:0 0 0 4px rgba(22,163,74,.15);animation:blink 2s ease-in-out infinite}
.status.offline{background:var(--muted)}
.status.error{background:var(--danger);box-shadow:0 0 0 4px rgba(220,38,38,.15)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}

/* Inbox */
.inbox-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.inbox-head h2{font-size:18px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:10px}
.inbox-head h2::before{content:'';width:4px;height:20px;background:var(--accent-gradient);border-radius:2px}
.inbox-list{list-style:none;margin:0;padding:0}
.inbox-list li{
  padding:16px 18px;border:1px solid transparent;
  border-bottom:1px solid var(--border);
  cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;
  transition:all var(--transition);border-radius:var(--radius-sm);
}
.inbox-list li:last-child{border-bottom-color:transparent}
.inbox-list li:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateX(4px)}
.inbox-list li.empty{cursor:default;color:var(--muted);justify-content:center;padding:40px 20px;text-align:center;font-style:italic}
.inbox-list li.empty:hover{background:transparent;border-color:transparent;transform:none}
.inbox-list li.unread{
  font-weight:600;border-left:3px solid var(--accent);
  background:linear-gradient(90deg,var(--accent-soft) 0%,transparent 30%);
}
.inbox-sender{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong)}
.inbox-subject{font-size:13px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.inbox-time{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:500}
.attach-ico{font-size:11px;color:var(--accent);margin-left:4px}

.hidden{display:none!important}

/* Viewer */
.viewer-head{margin-bottom:20px}
.viewer-head h3{margin:14px 0 6px;font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:var(--text-strong)}
.viewer-meta{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* OTP / Link / Images */
.otp-box,.link-box,.images-banner{
  margin:16px 0;padding:16px 20px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent-soft) 0%,transparent 100%);
  border:1px solid var(--accent);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  animation:slideIn .3s ease-out;
}
.images-banner{background:linear-gradient(135deg,#fef3c7 0%,transparent 100%);border-color:#fbbf24;font-size:13px;color:#92400e}
[data-theme="dark"] .images-banner{background:linear-gradient(135deg,#3a2a0a 0%,transparent 100%);border-color:#a16207;color:#fde68a}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.otp-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.otp-value{font-size:28px;font-weight:800;letter-spacing:6px;font-family:ui-monospace,'SF Mono',Monaco,monospace;color:var(--accent);text-shadow:0 0 20px var(--accent-glow)}
.link-box{flex-direction:column;align-items:flex-start;gap:10px}
.link-box a{word-break:break-all;font-weight:600;padding:6px 10px;background:var(--card);border-radius:var(--radius-sm);display:inline-block}
.link-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:20px 0 14px;overflow-x:auto}
.tab{background:none;border:none;padding:12px 18px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px;font-family:inherit;border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane{display:none;min-height:120px}
.tab-pane.active{display:block;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* HTML / TEXT / SOURCE */
#htmlFrame{width:100%;min-height:400px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;display:block;direction:ltr}
#textPane,#sourcePane{
  white-space:pre-wrap;word-break:break-word;font-size:13px;background:var(--bg);
  padding:16px;border-radius:var(--radius);max-height:480px;overflow:auto;
  font-family:ui-monospace,'SF Mono',Monaco,monospace;
  direction:ltr;text-align:left;unicode-bidi:embed;border:1px solid var(--border);
}

/* Attachments */
.attach-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.attach-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border:1px solid var(--border);
  border-radius:var(--radius);font-size:13px;transition:all var(--transition);
}
.attach-item:hover{border-color:var(--accent);background:var(--accent-soft)}

/* Modal / QR */
.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;animation:fadeIn .2s ease-out;
}
.modal-box{
  background:var(--card);padding:28px;border-radius:var(--radius-xl);
  text-align:center;max-width:360px;width:100%;
  box-shadow:var(--shadow-lg);animation:scaleIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
#qrCanvas{margin:20px auto;width:200px;height:200px;display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;border-radius:var(--radius)}
.qr-email{font-family:ui-monospace,'SF Mono',Monaco,monospace;font-size:13px;word-break:break-all;color:var(--muted);margin-top:12px}

/* Confirm dialog */
.modal-box.confirm-box{max-width:400px;text-align:center;padding:32px 28px}
.confirm-icon{width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border-radius:50%;color:var(--accent)}
.confirm-icon svg{width:28px;height:28px}
.confirm-title{font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--text-strong);margin:0 0 10px}
.confirm-message{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 24px}
.confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.confirm-actions .btn{min-width:110px;justify-content:center}
.confirm-actions .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.25)}
.confirm-actions .btn-danger:hover{color:#fff;border-color:var(--danger);transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,38,38,.35)}

/* Footer */
.footer{text-align:center;font-size:12px;color:var(--muted);padding:32px 20px;line-height:2}
.footer a{margin:0 4px}

/* Toast */
.toast{
  position:fixed;bottom:30px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text-strong);color:var(--card);
  padding:12px 22px;border-radius:30px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Live Countdown */
#expiresLabel{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:var(--accent-soft);border:1.5px solid var(--accent);
  font-weight:600;transition:all .3s ease;font-size:13px;line-height:1;
}
#expiresLabel.expires-initial{background:transparent;border-color:var(--border);color:var(--muted);font-weight:500;padding:4px 10px}
#expiresLabel .expires-icon{color:var(--accent);flex-shrink:0;opacity:.9}
#expiresLabel .expires-label-text{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
#expiresLabel .expires-timer{
  font-size:19px;font-weight:800;color:var(--accent);letter-spacing:1.2px;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum';
  font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace;line-height:1;
}
#expiresLabel.warning{background:var(--danger-soft);border-color:var(--danger);animation:pulseWarn 1.2s ease-in-out infinite}
#expiresLabel.warning .expires-icon,
#expiresLabel.warning .expires-timer{color:var(--danger)}
#expiresLabel.warning .expires-label-text{color:var(--danger);opacity:.85}
#expiresLabel.expired{background:var(--danger-soft);border-color:var(--danger);opacity:.75}
#expiresLabel.expired .expires-timer{color:var(--danger);text-decoration:line-through;font-size:16px}
@keyframes pulseWarn{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}
  50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}
}
html[dir="rtl"] #expiresLabel{direction:rtl}
html[dir="rtl"] #expiresLabel .expires-timer,
html[dir="rtl"] #expiresLabel .expires-icon{direction:ltr}

/* ============ Content Pages (SEO) ============ */
.content-page{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:56px 64px;
  color:var(--text);
  font-size:16px;
  line-height:1.75;
}
.content-page h1{
  font-size:36px;font-weight:800;letter-spacing:-.7px;
  color:var(--text-strong);
  margin:0 0 20px;
  line-height:1.25;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.content-page .lead{
  font-size:17.5px;
  color:var(--muted);
  margin:0 0 48px;
  line-height:1.75;
  font-weight:500;
}
.content-page h2{
  font-size:25px;font-weight:700;letter-spacing:-.4px;
  color:var(--text-strong);
  margin:56px 0 20px;
  line-height:1.3;
  padding-bottom:12px;
  position:relative;
}
.content-page h2::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:44px;
  height:3px;
  background:var(--accent-gradient);
  border-radius:2px;
}
html[dir="rtl"] .content-page h2::before{left:auto;right:0}
.content-page h2:first-of-type{margin-top:40px}
.content-page h3{
  font-size:19px;font-weight:700;
  color:var(--text-strong);
  margin:40px 0 14px;
  line-height:1.4;
}
.content-page p{
  margin:0 0 22px;
  line-height:1.8;
}
.content-page ul,
.content-page ol{
  margin:18px 0 28px;
  padding-inline-start:28px;
}
.content-page ul{list-style:disc}
.content-page ol{list-style:decimal}
.content-page li{
  margin-bottom:12px;
  line-height:1.75;
  padding-inline-start:6px;
}
.content-page li::marker{color:var(--accent);font-weight:700}
.content-page strong{color:var(--text-strong);font-weight:700}
.content-page em{font-style:italic;color:var(--muted)}
.content-page code{
  font-family:ui-monospace,'SF Mono',Monaco,monospace;
  font-size:.88em;
  background:var(--accent-soft);
  color:var(--accent);
  padding:3px 9px;
  border-radius:6px;
  direction:ltr;
  display:inline-block;
  unicode-bidi:embed;
  font-weight:600;
}
.content-page a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--accent-glow);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:all var(--transition);
}
.content-page a:hover{
  color:var(--accent-3);
  text-decoration-color:var(--accent);
}
.content-page a.btn,
.content-page a.btn-primary{
  color:#fff !important;
  text-decoration:none !important;
  text-decoration-color:transparent !important;
}
.content-page a.btn-primary:hover{
  color:#fff !important;
}
.content-page a.btn:not(.btn-primary):not(.btn-danger){
  color:var(--text) !important;
  text-decoration:none !important;
}
.content-page blockquote{
  margin:28px 0;
  padding:20px 26px;
  border-inline-start:4px solid var(--accent);
  background:var(--accent-soft);
  border-radius:var(--radius);
  color:var(--text);
  font-style:italic;
}
.content-page hr{
  border:none;
  border-top:1px solid var(--border);
  margin:48px 0;
}

/* ============ FAQ Accordion ============ */
.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:12px;
  transition:all var(--transition);
  overflow:hidden;
}
.faq-item[open]{
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.faq-item:hover{
  border-color:var(--accent);
}
.faq-item summary{
  padding:18px 22px;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  color:var(--text-strong);
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  transition:background var(--transition);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{display:none;content:''}
.faq-item summary::before{
  content:'+';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:700;
  font-size:18px;
  line-height:1;
  flex-shrink:0;
  transition:all var(--transition);
}
.faq-item[open] summary::before{
  content:'−';
  background:var(--accent);
  color:#fff;
  transform:rotate(180deg);
}
.faq-item[open] summary{
  color:var(--accent);
}
.faq-item summary:hover{
  background:var(--accent-soft);
}
.faq-answer{
  padding:0 22px 22px 60px;
  color:var(--text);
  line-height:1.85;
  font-size:15px;
}
.faq-answer p{
  margin:0 0 14px;
}
.faq-answer p:last-child{
  margin-bottom:0;
}
.faq-answer ul,
.faq-answer ol{
  margin:10px 0 16px;
  padding-inline-start:22px;
}
.faq-answer li{
  margin-bottom:8px;
  line-height:1.75;
}
.faq-answer li::marker{
  color:var(--accent);
}
.faq-answer strong{
  color:var(--text-strong);
}
.faq-answer a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--accent-glow);
  text-underline-offset:3px;
}
.faq-answer a:hover{
  text-decoration-color:var(--accent);
}

/* ============ RTL Support ============ */
html[dir="rtl"] body{font-family:'Cairo','Segoe UI',Tahoma,Arial,system-ui,sans-serif;font-weight:500}
html[dir="rtl"] .topbar{direction:rtl}
html[dir="rtl"] .brand-home{direction:ltr}
html[dir="rtl"] .topnav{direction:rtl}
html[dir="rtl"] .topnav a::after{left:auto;right:0}
html[dir="rtl"] .email-input{direction:ltr;text-align:left}
html[dir="rtl"] .qr-email{direction:ltr;text-align:center}
html[dir="rtl"] .inbox-list li{text-align:right}
html[dir="rtl"] .inbox-list li.unread{
  border-left:none;border-right:3px solid var(--accent);
  background:linear-gradient(270deg,var(--accent-soft) 0%,transparent 30%);
}
html[dir="rtl"] .viewer-head{text-align:right}
html[dir="rtl"] .otp-value{direction:ltr}
html[dir="rtl"] .otp-box,
html[dir="rtl"] .link-box,
html[dir="rtl"] .images-banner{direction:rtl}
html[dir="rtl"] .link-box a{direction:ltr;text-align:left}
html[dir="rtl"] .tabs{direction:rtl}
html[dir="rtl"] #textPane,
html[dir="rtl"] #sourcePane,
html[dir="rtl"] #htmlFrame{direction:ltr;text-align:left}
html[dir="rtl"] .confirm-box{direction:rtl}
html[dir="rtl"] .confirm-actions{flex-direction:row-reverse}
html[dir="rtl"] .attach-item{direction:rtl}
html[dir="rtl"] .footer{direction:rtl}
html[dir="rtl"] .content-page code{direction:ltr}
html[dir="rtl"] .content-page{line-height:1.85}
html[dir="rtl"] .content-page p{line-height:1.9}
html[dir="rtl"] .content-page li{line-height:1.85}
html[dir="rtl"] .faq-answer{
  padding:0 60px 22px 22px;
}
html[dir="rtl"] .faq-item summary{
  text-align:right;
}

/* Mobile */
@media(max-width:600px){
  .topbar{padding:6px 14px}
  .brand-icon{width:28px;height:28px}
  .brand-text{font-size:14px}
  .container{padding:20px 12px 0}
  .mailbox-card,.inbox-card,.viewer{padding:18px;border-radius:var(--radius-lg)}
  .email-input{font-size:15px;padding:14px 16px}
  .btn{padding:10px 16px;font-size:13px}
  .tagline{font-size:14px;margin-bottom:20px}
  .otp-value{font-size:22px;letter-spacing:4px}
  #expiresLabel{padding:6px 12px;gap:6px}
  #expiresLabel .expires-timer{font-size:17px}
  #expiresLabel .expires-label-text{font-size:10px}
  html[dir="rtl"] .inbox-list li.unread{background:linear-gradient(270deg,var(--accent-soft) 0%,transparent 40%)}
  .content-page{padding:28px 22px;border-radius:var(--radius-lg);font-size:15px}
  .content-page h1{font-size:24px;padding-bottom:18px;margin-bottom:16px}
  .content-page h2{font-size:19px;margin:36px 0 14px}
  .content-page h3{font-size:16px;margin:26px 0 10px}
  .content-page .lead{font-size:15px;margin-bottom:28px}
  .content-page p{margin-bottom:16px}
  .content-page ul,.content-page ol{margin:14px 0 20px;padding-inline-start:22px}
  .content-page li{margin-bottom:8px}
  .faq-item summary{padding:14px 16px;font-size:15px}
  .faq-item summary::before{width:22px;height:22px;font-size:16px}
  .faq-answer{padding:0 16px 18px 48px;font-size:14px}
  html[dir="rtl"] .faq-answer{padding:0 48px 18px 16px}
}
@media(max-width:380px){
  .email-row{flex-direction:column}
  .email-row .btn{width:100%;justify-content:center}
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer{
  background:var(--card);
  border-top:1px solid var(--border);
  padding:56px 24px 24px;
  margin-top:0;
}
.footer-container{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-brand .brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.3px;
  color:var(--text-strong);
  text-decoration:none;
  margin-bottom:12px;
}
.footer-icon{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.footer-brand .brand-link strong{color:var(--accent)}
.footer-tagline{
  font-size:13px;
  color:var(--muted);
  margin:8px 0 0;
  line-height:1.6;
}
.footer-col h4{
  font-size:13px;
  font-weight:700;
  color:var(--text-strong);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 16px;
}
.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-col li{margin:0}
.footer-col a{
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
  transition:color var(--transition);
  display:inline-block;
  padding:2px 0;
}
.footer-col a:hover{
  color:var(--accent);
  transform:translateX(2px);
}
.footer-bottom{
  max-width:900px;
  margin:40px auto 0;
  padding-top:24px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px;
  color:var(--muted);
}
.footer-bottom p{margin:0;line-height:1.6}
.footer-copy{opacity:.8}

html[dir="rtl"] .footer-col a:hover{transform:translateX(-2px)}

@media(max-width:768px){
  .site-footer{padding:40px 20px 20px}
  .footer-container{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1;text-align:center;padding-bottom:8px;border-bottom:1px solid var(--border)}
  .footer-brand .brand-link{justify-content:center}
  .footer-col h4{font-size:12px;margin-bottom:12px}
  .footer-col a{font-size:13px}
  .footer-bottom{flex-direction:column;text-align:center;margin-top:32px}
}
@media(max-width:480px){
  .footer-container{grid-template-columns:1fr;gap:28px}
  .footer-col{text-align:center}
  .footer-col ul{align-items:center}
}

/* ============================================================
   HOMEPAGE SEO CONTENT
   ============================================================ */
.home-seo{
  background:var(--accent-soft);
  border:none;
  box-shadow:none;
  padding:0 24px 48px;
  margin:0;
  width:100%;
}
[data-theme="dark"] .home-seo{
  background:var(--bg);
}
.home-seo-inner{
  max-width:1140px;
  margin:0 auto;
  padding-top:20px;
}
.home-seo h1,
.home-seo-lead,
.home-seo p,
.home-seo h2{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.home-seo h1{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.6px;
  color:var(--text-strong);
  margin-top:0;
  margin-bottom:16px;
  line-height:1.3;
  text-align:center;
}
.home-seo-lead{
  font-size:17px;
  color:var(--muted);
  margin-bottom:44px;
  line-height:1.7;
  font-weight:500;
  text-align:center;
}
.home-seo h2{
  font-size:24px;
  font-weight:700;
  letter-spacing:-.4px;
  color:var(--text-strong);
  margin-top:48px;
  margin-bottom:24px;
  line-height:1.35;
  padding-bottom:10px;
  position:relative;
  text-align:center;
}
.home-seo h2::before{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:44px;
  height:3px;
  background:var(--accent-gradient);
  border-radius:2px;
}
.home-seo p{
  margin-bottom:18px;
  line-height:1.8;
  color:var(--text);
  font-size:15.5px;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.home-features-grid{
  list-style:none;
  padding:0;
  margin:24px 0 48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
}
.home-feature-card{
  padding:32px 24px 28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  text-align:center;
  transition:all var(--transition);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-feature-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(13,148,136,.12);
  transform:translateY(-3px);
}
.home-feature-icon{
  width:64px;
  height:64px;
  border-radius:14px;
  background:var(--accent-gradient);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  box-shadow:0 6px 16px rgba(13,148,136,.25);
  flex-shrink:0;
}
.home-feature-icon svg{
  width:28px;
  height:28px;
  stroke-width:2;
}
.home-feature-title{
  font-size:17px;
  font-weight:800;
  color:var(--text-strong);
  margin:0 0 12px;
  letter-spacing:-.3px;
  line-height:1.4;
}
.home-feature-desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

@media(max-width:900px){
  .home-seo{padding:0 20px 40px}
  .home-seo-inner{padding-top:16px}
  .home-seo h1{font-size:26px}
  .home-seo-lead{font-size:16px}
  .home-features-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
}

@media(max-width:600px){
  .home-seo{padding:0 16px 32px}
  .home-seo-inner{padding-top:12px}
  .home-seo h1{font-size:22px}
  .home-seo-lead{font-size:15px;margin-bottom:32px}
  .home-seo h2{font-size:19px;margin-top:36px}
  .home-seo p{font-size:14.5px}
  .home-features-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .home-feature-card{padding:26px 20px}
  .home-feature-icon{width:58px;height:58px;margin-bottom:16px}
  .home-feature-icon svg{width:26px;height:26px}
  .home-feature-title{font-size:16px;margin-bottom:10px}
  .home-feature-desc{font-size:13.5px}
}

/* ============================================================
   SEO LINKS + CTA
   ============================================================ */
.home-seo-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:32px auto 40px;
  max-width:1140px;
}
.home-seo-links a{
  display:inline-block;
  padding:12px 22px;
  border-radius:var(--radius);
  background:var(--card);
  color:var(--accent);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--accent);
  transition:all var(--transition);
}
.home-seo-links a:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--shadow-glow);
  text-decoration:none;
}
.home-seo-cta{
  text-align:center;
  margin:48px auto 0;
  max-width:1140px;
}

@media(max-width:600px){
  .home-seo-links{gap:8px;margin-top:24px}
  .home-seo-links a{padding:10px 16px;font-size:13.5px}
  .home-seo-cta{margin-top:32px}
}

/* ============================================================
   HOME HERO
   ============================================================ */
.home-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:780px;
  margin:0 auto 28px;
  padding:0 16px;
  width:100%;
}
.home-hero-title{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--text-strong);
  line-height:1.35;
  margin:0 0 14px;
}
.home-hero-desc{
  font-size:15.5px;
  color:var(--muted);
  line-height:1.7;
  font-weight:500;
  margin:0;
}
@media(max-width:768px){
  .home-hero{margin-bottom:20px}
  .home-hero-title{font-size:22px;margin-bottom:10px}
  .home-hero-desc{font-size:14px;line-height:1.65}
}

/* ============================================================
   MOBILE HAMBURGER MENU — DRAWER
   ============================================================ */
.menu-toggle{display:none}
.menu-icon-close{display:none}

@media(max-width:768px){
  body::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease,visibility .3s;
    z-index:48;
    pointer-events:none;
  }
  body.menu-open::before{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    cursor:pointer;
    transition:all var(--transition);
    flex-shrink:0;
    margin-inline-end:12px;
  }
  .menu-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .menu-toggle[aria-expanded="true"]{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
  }
  .menu-toggle .menu-icon-open{display:block}
  .menu-toggle .menu-icon-close{display:none}
  .menu-toggle[aria-expanded="true"] .menu-icon-open{display:none}
  .menu-toggle[aria-expanded="true"] .menu-icon-close{display:block}

  .topbar{padding:6px 14px}
  .brand{display:flex;align-items:center;flex:1;min-width:0}

  .topnav{
    position:fixed;
    top:52px;
    bottom:0;
    left:0;
    width:280px;
    max-width:85vw;
    background:var(--card);
    border-right:1px solid var(--border);
    padding:16px 16px 24px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    z-index:49;
    transform:translateX(-110%);
    opacity:1;
    visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    box-shadow:var(--shadow-lg);
  }
  html[dir="rtl"] .topnav{
    left:auto;
    right:0;
    border-right:none;
    border-left:1px solid var(--border);
    transform:translateX(110%);
  }
  .topnav.menu-open{
    transform:translateX(0);
  }

  .topnav > a{
    display:block;
    padding:14px 14px;
    font-size:15px;
    font-weight:600;
    color:var(--text);
    border-radius:8px;
    text-align:start;
    transition:all var(--transition);
  }
  .topnav > a:hover{
    color:var(--accent);
    background:var(--accent-soft);
  }
  .topnav > a::after{display:none}

  .lang-menu{
    display:block;
    width:100%;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--border);
  }
  .lang-trigger{
    width:100%;
    height:44px;
    justify-content:space-between;
    font-size:14px;
    padding:0 14px;
  }
  .lang-dropdown{
    position:static;
    box-shadow:none;
    border:none;
    background:var(--accent-soft);
    margin-top:6px;
    padding:4px;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }
  .lang-dropdown.open{display:block}
  .lang-option{
    padding:11px 14px;
    font-size:14px;
  }

  #themeToggle{
    width:100%;
    height:44px;
    margin-top:10px;
    justify-content:flex-start;
    padding:0 14px;
    font-size:14px;
    border-radius:10px;
  }
  #themeToggle::after{
    content:'Dark Mode';
    margin-inline-start:10px;
    font-weight:600;
  }
  html[dir="rtl"] #themeToggle::after{content:'الوضع الليلي'}
  html[data-theme="dark"] #themeToggle::after{content:'Light Mode'}
  html[dir="rtl"][data-theme="dark"] #themeToggle::after{content:'الوضع الفاتح'}

  body.menu-open{overflow:hidden}
}

@media(min-width:769px){
  .menu-toggle{display:none!important}
  .topnav{position:static;transform:none;opacity:1;visibility:visible}
}

/* CRITICAL FIX: backdrop-filter on topbar creates containing block
   for position:fixed children — remove it on mobile so drawer
   works relative to viewport */
@media(max-width:768px){
  .topbar{
    background:var(--card);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  [data-theme="dark"] .topbar{
    background:#141b2b;
  }
}

/* ============================================================
   FINAL FIX — Drawer (uses explicit height, not top/bottom)
   ============================================================ */
@media(max-width:768px){

  /* 1. Remove backdrop-filter — it creates a containing block for
        position:fixed children, breaking the drawer */
  .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* 2. Force the drawer to fill the viewport using dvh units
        (viewport-relative, independent of any containing block) */
  .topnav{
    position:fixed !important;
    top:52px !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:280px !important;
    max-width:85vw !important;
    height:calc(100vh - 52px) !important;
    height:calc(100dvh - 52px) !important;
    margin:0 !important;
  }

  html[dir="rtl"] .topnav{
    left:auto !important;
    right:0 !important;
  }
}
/* ============================================================
   RTL DRAWER FIX — html[dir="rtl"] .topnav is more specific
   than .topnav.menu-open, so the transform never resets in RTL.
   Must come AFTER all previous .topnav rules.
   ============================================================ */
@media(max-width:768px){
  .topnav.menu-open,
  html[dir="rtl"] .topnav.menu-open{
    transform:translateX(0) !important;
  }
}
/* ============================================================
   ACCESSIBILITY FIXES (WCAG AA) — v8
   Fixes contrast issues reported by PageSpeed / Lighthouse.
   These come LAST so they override earlier rules.
   ============================================================ */

/* 1. Utility: hide visually but keep for screen readers */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 2. Light theme — darker accent + muted for AA contrast on white */
:root{
  --accent:#0f766e;             /* teal-700 — AA pass on white (5.4:1) */
  --accent-3:#115e59;           /* teal-800 — for hover */
  --muted:#475569;              /* slate-600 — 7.5:1 on white */
}
/* Keep the button gradient brighter (visual identity) */
:root{
  --accent-gradient:linear-gradient(135deg,#0d9488 0%,#14b8a6 100%);
}

/* 3. Dark theme — lighter accent + muted for AA contrast on dark bg */
[data-theme="dark"]{
  --accent:#5eead4;             /* teal-300 — high contrast on #141b2b */
  --accent-3:#2dd4bf;           /* teal-400 for hover */
  --muted:#cbd5e1;              /* slate-300 — 12:1 on dark card */
}

/* 4. Footer copy — remove opacity to boost contrast */
.footer-copy{opacity:1}

/* 5. Language dropdown on dark theme */
[data-theme="dark"] .lang-trigger{color:var(--text)}
[data-theme="dark"] .lang-option{color:var(--text)}

/* 6. Topbar on mobile — solid background to avoid over-content contrast */
@media(max-width:768px){
  .topbar{background:var(--card) !important}
}

/* 7. Ensure icon buttons and links keep focus visible */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* 8. Timer contrast — accent on soft background must pass */
#expiresLabel{
  background:#0f2a2a0f; /* very light teal tint in light mode */
}
[data-theme="dark"] #expiresLabel{
  background:rgba(45,212,191,.10);
}

/* ============================================================
   BLOG STYLES — v9
   ============================================================ */
.blog-hero{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
  padding:0 16px;
}
.blog-hero-title{
  font-size:38px;font-weight:800;letter-spacing:-.7px;
  color:var(--text-strong);line-height:1.25;
  margin:0 0 14px;
}
.blog-hero-desc{
  font-size:16.5px;color:var(--muted);
  line-height:1.7;font-weight:500;margin:0;
}

.blog-grid{
  list-style:none;padding:0;margin:0 0 60px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;max-width:900px;margin-left:auto;margin-right:auto;
}
.blog-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--transition);
  overflow:hidden;
}
.blog-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
}
.blog-card-link{
  display:block;padding:28px 26px;
  color:inherit;text-decoration:none;
  height:100%;
}
.blog-card-link:hover{color:inherit;text-decoration:none}
.blog-card-icon{
  width:52px !important;
  height:52px !important;
  border-radius:12px;
  background:var(--accent-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  box-shadow:0 6px 16px rgba(13,148,136,.20);
  overflow:hidden;
}
.blog-card-icon svg{
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  stroke-width:2;
  flex-shrink:0;
}
.blog-card-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--muted);
  font-weight:500;margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.5px;
}
.blog-card-title{
  font-size:19px;font-weight:800;
  color:var(--text-strong);
  line-height:1.4;letter-spacing:-.3px;
  margin:0 0 12px;
}
.blog-card-excerpt{
  font-size:14.5px;color:var(--muted);
  line-height:1.65;margin:0 0 18px;
}
.blog-card-cta{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);font-weight:700;font-size:14px;
}
.blog-card:hover .blog-card-cta{gap:10px}

/* Breadcrumb */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);
  max-width:800px;margin:0 auto 16px;
  padding:0 4px;
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-current="page"]{
  color:var(--text-strong);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:280px;
}

/* Article meta */
.article-meta{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--muted);
  font-weight:500;margin:0 0 24px;
  padding-bottom:20px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

/* Article CTA */
.article-cta{
  text-align:center;
  max-width:560px;margin:32px auto 60px;
  padding:28px 24px;
  background:var(--accent-soft);
  border-radius:var(--radius-lg);
  border:1px solid var(--accent);
}
.article-cta p{
  font-size:16px;font-weight:600;
  color:var(--text-strong);margin:0 0 16px;
}

@media(max-width:768px){
  .blog-hero-title{font-size:26px}
  .blog-hero-desc{font-size:15px}
  .blog-grid{grid-template-columns:1fr;gap:16px}
  .blog-card-link{padding:22px 20px}
  .blog-card-title{font-size:17px}
  .breadcrumb{font-size:12px}
  .breadcrumb span[aria-current="page"]{max-width:180px}
}

/* ============================================================
   INBOX PRO — Level 2 (Professional)
   ============================================================ */

.inbox-card{overflow:hidden}
.inbox-head{
  background:linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  margin:-24px -24px 20px;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  position:relative;
}
.inbox-head h2{
  font-size:18px;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:center;gap:12px;
}
.inbox-head-icon{
  width:18px;height:18px;
  color:var(--accent);
  flex-shrink:0;
}

.inbox-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:22px;
  padding:0 8px;
  border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;
  transition:all var(--transition);
}
.inbox-count[data-count="0"]{
  background:var(--border-strong);
  color:var(--muted);
}
.inbox-count.pulse{
  animation:countPulse .8s ease-out;
}
@keyframes countPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 var(--accent-glow)}
  50%{transform:scale(1.15);box-shadow:0 0 0 8px transparent}
  100%{transform:scale(1);box-shadow:0 0 0 0 transparent}
}

.inbox-list li.empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;
  padding:56px 24px !important;
  text-align:center;font-style:normal;cursor:default;
}
.inbox-list li.empty:hover{
  background:transparent;border-color:transparent;transform:none;
}
.empty-icon-wrap{
  width:72px;height:72px;
  border-radius:50%;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
  position:relative;
}
.empty-icon-wrap::after{
  content:'';
  position:absolute;inset:-8px;
  border-radius:50%;
  border:2px solid var(--accent-soft);
  animation:emptyRing 2s ease-out infinite;
}
@keyframes emptyRing{
  0%{transform:scale(.9);opacity:1}
  100%{transform:scale(1.2);opacity:0}
}
.empty-icon-wrap svg{
  width:32px;height:32px;
  color:var(--accent);stroke-width:1.8;
}
.empty-title{
  font-size:16px;font-weight:700;
  color:var(--text-strong);
  margin:0;letter-spacing:-.2px;
}
.empty-desc{
  font-size:13.5px;color:var(--muted);
  margin:0;max-width:340px;line-height:1.65;
}

.skeleton-item{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:16px 18px;
  border-bottom:1px solid var(--border);
  pointer-events:none;
}
.skeleton-item:last-child{border-bottom-color:transparent}
.skeleton-lines{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.skeleton-line{
  height:10px;border-radius:6px;
  background:linear-gradient(90deg,var(--border) 0%,var(--accent-soft) 50%,var(--border) 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s ease-in-out infinite;
}
.skeleton-line.w-70{width:70%}
.skeleton-line.w-40{width:40%}
.skeleton-time{
  width:52px;height:12px;border-radius:6px;
  background:var(--border);
  animation:skeletonShimmer 1.5s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.inbox-list li.new-message{
  animation:messageIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes messageIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

[data-theme="dark"] .inbox-head{
  background:linear-gradient(135deg, rgba(45,212,191,.08) 0%, transparent 100%);
}

@media(max-width:600px){
  .inbox-head{margin:-18px -18px 16px;padding:16px 18px}
  .inbox-head h2{font-size:16px;gap:10px}
  .inbox-head-icon{width:16px;height:16px}
  .inbox-list li.empty{padding:44px 18px !important}
  .empty-icon-wrap{width:60px;height:60px}
  .empty-icon-wrap svg{width:26px;height:26px}
  .empty-title{font-size:15px}
  .empty-desc{font-size:13px;max-width:280px}
}