@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0b0f19;--card:#12172b;--card2:#181e34;--accent:#3b82f6;--accent2:#22d3ee;--green:#10b981;--text:#cbd5e1;--white:#f1f5f9;--muted:#475569;--border:rgba(255,255,255,.06);--nav-bg:rgba(11,15,25,.85);--radius:14px}
[data-theme="light"]{--bg:#f8fafc;--card:#ffffff;--card2:#f1f5f9;--accent:#2563eb;--accent2:#0ea5e9;--green:#059669;--text:#334155;--white:#0f172a;--muted:#64748b;--border:rgba(0,0,0,.08);--nav-bg:rgba(255,255,255,.85)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
[v-cloak]{display:none}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;color:var(--white)}
a{color:var(--accent);text-decoration:none}

/* Navbar */
.navbar{background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 0;position:sticky;top:0;z-index:50}
.nav-container{max-width:960px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-text{font-family:'Outfit';font-weight:700;font-size:1.4rem;color:var(--white);letter-spacing:-.02em;display:flex;align-items:center}
.logo-text .lock-wrapper{display:inline-flex;align-items:center;position:relative;margin:0 0.02em}
.logo-text .lock-svg{width:1.1em;height:1.3em;margin-bottom:-0.1em}
.tagline{color:var(--muted);font-size:.78rem;letter-spacing:.02em;display:none}
@media(min-width:768px){.tagline{display:block}}

/* Layout */
.main{max-width:960px;margin:0 auto;padding:16px 20px}

/* Email Hero */
.email-hero{text-align:center;padding:36px 0 20px}
.email-hero h1{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700;margin-bottom:8px;color:var(--white)}
.email-hero .subtitle{color:var(--muted);font-size:.92rem;margin-bottom:28px}
.email-box{background:var(--card);border:1.5px solid rgba(59,130,246,.3);border-radius:var(--radius);padding:20px 24px;max-width:580px;margin:0 auto 22px;cursor:pointer;user-select:all;transition:border-color .25s}
.email-box:hover{border-color:var(--accent)}
.email-box .address{font-size:clamp(1.1rem,3vw,1.55rem);font-weight:700;font-family:'Outfit';word-break:break-all;color:var(--white)}
.email-box .loading{color:var(--muted);font-size:1.1rem}

/* Buttons */
.btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.btn-action{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.btn-action:hover{background:var(--card2);border-color:rgba(59,130,246,.4);color:var(--white)}
.btn-action svg{width:18px;height:18px;flex-shrink:0}
.btn-action.primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-action.primary:hover{background:#2563eb}
.btn-action.danger{border-color:rgba(239,68,68,.3);color:#f87171}
.btn-action.danger:hover{background:rgba(239,68,68,.12);border-color:#ef4444}

/* Inbox */
.inbox-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-width:700px;margin:0 auto 36px}
.inbox-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.inbox-header h3{font-size:1rem;font-weight:700}
.refresh-btn{background:none;border:1px solid var(--border);color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.82rem;font-family:'Inter',sans-serif;transition:all .2s}
.refresh-btn:hover{border-color:rgba(59,130,246,.4);color:var(--accent)}
.inbox-body{min-height:340px;max-height:440px;overflow-y:auto}
.msg-item{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.msg-item:hover{background:var(--card2)}
.msg-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:12px;flex-shrink:0}
.msg-info{flex:1;min-width:0}
.msg-sender{font-weight:600;font-size:.9rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-subject{color:var(--muted);font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msg-time{color:var(--muted);font-size:.75rem;flex-shrink:0;margin-left:12px}
.msg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 20px;color:var(--muted)}
.msg-empty .pulse-ring{width:48px;height:48px;border:2px solid var(--accent);border-radius:50%;opacity:.4;animation:pulse 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.95);opacity:.3}50%{transform:scale(1.08);opacity:.6}}
.msg-empty p{margin-top:16px;font-size:.88rem}

/* Message View */
.msg-view-header{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.msg-view-sender{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.avatar{width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0}
.msg-view-subject{padding:12px 18px;font-weight:700;font-size:1rem;border-bottom:1px solid var(--border);word-break:break-word;color:var(--white)}
.msg-view-body iframe{width:100%;height:320px;border:none;background:#fff;border-radius:0 0 var(--radius) var(--radius)}

/* Dialogs */
.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.dialog-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;max-width:480px;width:100%;max-height:85vh;overflow-y:auto}
.dialog-box h4{margin-bottom:14px}
.close-btn{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;float:right;line-height:1}
.close-btn:hover{color:var(--white)}

.email-list-item{display:flex;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all .15s}
.email-list-item:hover,.email-list-item.active{border-color:rgba(59,130,246,.4);background:var(--card2)}
.email-list-item .info{flex:1;min-width:0}
.email-list-item .addr{font-weight:600;font-size:.88rem;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-list-item .badges{display:flex;gap:5px;margin-top:3px}
.badge{font-size:.7rem;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.05);color:var(--muted)}
.badge.unread{background:rgba(59,130,246,.15);color:var(--accent)}
.badge.expired{background:rgba(239,68,68,.15);color:#f87171}

.alias-input-wrap{display:flex;align-items:center;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:10px 0}
.alias-input-wrap input{flex:1;background:none;border:none;color:var(--white);font-size:.95rem;font-weight:600;text-align:right;outline:none;font-family:'Inter',sans-serif}
.alias-input-wrap span{color:var(--accent);font-weight:600;font-size:.95rem}
.domain-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;max-height:100px;overflow-y:auto}
.domain-chip{padding:5px 12px;border-radius:7px;background:var(--card2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:.82rem;transition:all .15s}
.domain-chip:hover,.domain-chip.active{border-color:rgba(59,130,246,.4);color:var(--accent)}
.dialog-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dialog-actions .btn-action{justify-content:center;width:100%;padding:12px}

/* Progress */
.progress-dialog{text-align:center;padding:36px 20px}
.spinner{width:32px;height:32px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-success{font-size:2.5rem;color:var(--green)}
.icon-error{font-size:2.5rem;color:#f87171}
.progress-dialog p{font-weight:600;font-size:1rem;margin-top:10px}

/* Content */
.content-section{max-width:700px;margin:0 auto;padding:32px 20px}
.content-section h2{font-size:1.4rem;margin:28px 0 10px}
.content-section h3{font-size:1.05rem;color:var(--accent);margin:20px 0 8px}
.content-section p{color:var(--muted);line-height:1.7;margin-bottom:10px;font-size:.9rem}
.content-section ul{color:var(--muted);line-height:1.8;padding-left:18px;margin-bottom:10px;font-size:.9rem}
.content-section li::marker{color:var(--accent)}
.content-section strong{color:var(--text)}

/* FAQ */
.faq-section{max-width:700px;margin:0 auto;padding:16px 20px 32px}
.faq-section h2{text-align:center;font-size:1.4rem;margin-bottom:18px}
.faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.faq-q{padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.9rem;color:var(--white);transition:background .15s}
.faq-q:hover{background:var(--card2)}
.faq-q .arrow{transition:transform .25s;color:var(--muted);font-size:.7rem}
.faq-item.open .arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s}
.faq-item.open .faq-a{max-height:200px;padding:0 16px 14px}
.faq-a p{color:var(--muted);line-height:1.6;font-size:.88rem}

/* Footer */
.site-footer{max-width:960px;margin:0 auto;padding:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.site-footer p{color:var(--muted);font-size:.8rem}
.site-footer nav a{color:var(--muted);margin-left:16px;font-size:.8rem}
.site-footer nav a:hover{color:var(--accent)}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.theme-toggle{background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;transition:all .2s}
.theme-toggle:hover{background:var(--card2);color:var(--accent)}
.theme-toggle svg{width:20px;height:20px}

@media(max-width:640px){
  .email-hero{padding:24px 0 16px}
  .email-box{padding:16px}
  .btn-action{padding:9px 14px;font-size:.82rem}
  .inbox-body{max-height:320px}
}

/* end */