:root { --ink:#17202a; --muted:#69747f; --line:#e5e8eb; --canvas:#f7f8fa; --paper:#fff; --accent:#2867f0; --accent-dark:#1e54cc; --mint:#dff8e9; --mint-ink:#197548; --shadow:0 18px 50px rgba(35,47,62,.09); }
* { box-sizing:border-box; }
html::-webkit-scrollbar { display:none; }
body::-webkit-scrollbar { display:none; }
body { display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; min-height:100dvh; margin:0; min-width:320px; background-color:var(--canvas); background-image:radial-gradient(circle,rgba(40,103,240,.07) 1.5px,transparent 0),radial-gradient(circle,rgba(0,0,0,.025) 1px,transparent 0); background-size:48px 48px,24px 24px; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; touch-action:manipulation; }
button { cursor:pointer; }
.shell { max-width:800px; margin:0 auto; padding:0 28px; }
body>header,body>main,body>footer { width:100%; }
main.shell { display:flex; flex-direction:column; }
.nav { height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:750; letter-spacing:-.6px; text-decoration:none; color:var(--ink); }
.brand-logo { display:block; width:36px; height:36px; border-radius:9px; flex:none; }
.nav-actions { display:flex; align-items:center; gap:22px; }
.login-wrap { position:relative; }
.login-toggle,.account-toggle { background:#fff; border:1px solid #dfe4e8; color:var(--ink); border-radius:9px; padding:9px 13px; font-size:14px; font-weight:650; display:flex; align-items:center; gap:8px; }
.login-toggle:hover,.account-toggle:hover { border-color:#bec7ce; }
.chevron { transition:transform .2s ease; }
.login-wrap.open .chevron { transform:rotate(180deg); }
.login-panel { position:absolute; z-index:4; top:calc(100% + 10px); right:0; width:300px; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-5px); transition:.18s ease; }
.login-wrap.open .login-panel { opacity:1; visibility:visible; transform:translateY(0); }
.login-close { position:absolute; top:8px; right:8px; width:28px; height:28px; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:21px; line-height:1; }
.login-close:hover { color:var(--ink); background:#f1f3f5; }
.field-label { display:block; margin:0 0 6px; color:#4b5661; font-size:12px; font-weight:650; }
.text-input { width:100%; height:40px; padding:0 12px; color:var(--ink); background:#fff; border:1px solid #dce1e5; border-radius:8px; outline:none; font-size:16px; }
.text-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(40,103,240,.12); }
.login-panel .field-label:not(:first-of-type) { margin-top:10px; }
.button { min-height:40px; border:0; border-radius:8px; padding:0 15px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; transition:background .15s ease,transform .15s ease; }
.button:hover { background:var(--accent-dark); }
.button:active { transform:translateY(1px); }
.button.full { width:100%; margin-bottom:8px; }
.hero { display:flex; align-items:center; justify-content:center; flex:1; }
.create-card { position:relative; overflow:hidden; width:min(100%,510px); background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:31px; box-shadow:var(--shadow); }
.create-card::before { content:""; position:absolute; z-index:-1; width:175px; height:175px; right:-46px; top:-42px; background:#e6edff; border-radius:50%; filter:blur(1px); }
.card-title { margin:0; font-size:22px; letter-spacing:-.8px; }
.card-copy { margin:7px 0 25px; color:var(--muted); font-size:14px; line-height:1.5; }
.card-copy a { color:var(--accent); font-weight:600; text-decoration:none; }
.card-copy a:hover { text-decoration:underline; }
.card-login-link { margin:12px 0 0; text-align:center; font-size:13px; }
.card-login-link a { color:var(--accent); text-decoration:none; font-weight:600; }
.card-login-link a:hover { text-decoration:underline; }
.email-field { display:flex; align-items:center; overflow:hidden; height:40px; margin-bottom:12px; border:1px solid #dce1e5; border-radius:9px; transition:.15s ease; }
.email-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(40,103,240,.12); }
.email-field input { width:100%; min-width:0; height:100%; padding:0 0 0 14px; border:0; outline:0; font-size:16px; color:var(--ink); }
.domain { flex:none; padding:0 14px 0 9px; color:#596570; font-size:14px; font-weight:600; }
.password-wrap { position:relative; margin-bottom:15px; }

.pwd-toggle { position:absolute; top:0; right:0; height:40px; width:40px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#84909a; transition:color .15s; z-index:1; }
.pwd-toggle:hover { color:var(--ink); }
.pwd-toggle svg { width:18px; height:18px; }
.pwd-toggle.visible { color:var(--accent); }
.create-button { width:100%; min-height:40px; margin-top: 12px; display:flex; justify-content:center; align-items:center; gap:9px; font-size:15px; }

.fine-print { margin:8px 0 0; color:#84909a; font-size:11px; line-height:1.55; text-align:center; }
.fine-print strong { color:#58636e; font-weight:650; }
.site-footer { min-height:64px; border-top:1px solid var(--line); }
.footer-content { display:flex; align-items:center; justify-content:space-between; min-height:63px; color:#84909a; font-size:12px; }
.footer-content a { color:var(--accent); font-weight:650; text-decoration:none; }
.footer-content a:hover { text-decoration:underline; }
.footer-nav { display:flex; align-items:center; gap:18px; }

.inbox { display:none; padding:20px 0 20px; }
.inbox.visible { display:flex; flex-direction:column; flex:1; min-height:0; }
.inbox-top { display:none; }
.inbox-top h2 { margin:0; font-size:32px; letter-spacing:-1.5px; }
.inbox-top p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.mailbox-bar { display:flex; align-items:center; gap:12px; padding:13px 14px 13px 18px; margin-bottom:16px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.domain-expiry-warning { display:flex; align-items:center; gap:10px; padding:12px 18px; margin-bottom:12px; background:#fff8dc; border:1px solid #e8a317; border-radius:10px; color:#6b5300; font-size:13px; font-weight:600; }
.mailbox-icon { display:grid; place-items:center; width:31px; height:31px; flex:none; border-radius:8px; color:var(--accent); background:#e9efff; }
.mailbox-address { -webkit-data-detectors:none; min-width:0; font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiet-button { display:flex; align-items:center; gap:6px; flex:none; padding:8px 10px; color:#4e5b67; background:#fff; border:1px solid #dce2e6; border-radius:7px; font-size:12px; font-weight:650; }
.quiet-button:hover { background:#f7f9fa; }
.quiet-button#copyEmail { margin-left:-6px; padding:8px 6px; }
.danger { display:flex; align-items:center; gap:6px; }
.signout.danger { color:#c34b4b; }
.signout.danger:hover { background:#fef3f2; color:#a33; margin:0 -8px; padding:10px 8px; }
.inbox-layout { width:100%; flex:1; display:flex; flex-direction:column; min-height:0; }
.mail-list,.info-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; }
.mail-list { flex:1; display:flex; flex-direction:column; min-height:0; }
.list-head { display:flex; align-items:center; justify-content:space-between; padding:17px 18px; border-bottom:1px solid var(--line); }
.list-head h2 { margin:0; font-size:14px; letter-spacing:-.2px; display:flex; align-items:center; gap:7px; }
.list-head span { color:var(--muted); font-size:12px; }
.list-head .badge { color:#fff; display:none; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); font-size:10px; font-weight:700; line-height:1; }
#messageList { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.empty { flex:1; display:grid; place-items:center; padding:35px; color:var(--muted); text-align:center; }
.empty-art { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border:1px solid #e1e6ea; border-radius:17px; color:#82909c; background:#f9fafb; }
.empty h3 { margin:0 0 7px; color:#27313a; font-size:15px; }
.empty p { max-width:230px; margin:0; font-size:13px; line-height:1.55; }
.info-card { padding:21px; }
.info-card h2 { margin:0; font-size:15px; letter-spacing:-.3px; }
.info-card p { margin:7px 0 20px; color:var(--muted); font-size:12px; line-height:1.55; }
.expiry { padding:13px; background:#f7f9fb; border-radius:8px; }
.expiry-label { display:block; margin-bottom:5px; color:#7a8690; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.expiry strong { font-size:13px; }
.account-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#dce6ff; color:#315dca; font-size:12px; font-weight:800; }
.account-toggle { padding:5px 8px 5px 5px; }
.account-menu { right:0; width:300px; }
.account-email, .account-password { -webkit-data-detectors:none; cursor:pointer; padding:0px 0 4px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-email:hover, .account-password:hover { color:var(--ink); }
.pwd-value { transition:filter .15s; }
.pwd-value.blurred { filter:blur(5px); }
.account-password { padding:0 0 14px; }
.signout { width:100%; padding:10px 0; display:flex; align-items:center; gap:6px; color:var(--accent); text-align:left; background:transparent; border:0; font-size:13px; font-weight:650; border-radius:6px; transition:background .12s; }
.account-storage { padding:4px 0 8px 0; border-bottom:1px solid var(--line); margin-bottom:16px; }
.account-storage-bar { height:6px; background:#e5e8eb; border-radius:3px; overflow:hidden; }
.account-storage-fill { height:100%; width:0; border-radius:3px; background:var(--accent); transition:width .4s ease; }
.account-storage-label { margin-top:6px; color:#84909a; font-size:11px; text-align:right; }
.mailbox-storage-label { margin-left:auto; color:#84909a; font-size:11px; white-space:nowrap; }
.signout:hover { background:#f0f4ff; margin:0 -8px; padding:10px 8px; }
.saved-accounts { padding:10px 0 0; border-top:1px solid var(--line); margin-top:10px; }
.saved-head { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.saved-row { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; border-radius:6px; }
.saved-row:hover { background:#f0f4ff; margin:0 -8px; padding:6px 8px; }
.saved-row:hover .saved-avatar { background:#cddaff; }
.saved-avatar { display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:50%; background:#dce6ff; color:#315dca; font-size:10px; font-weight:800; }
.saved-email { -webkit-data-detectors:none; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-row:hover .saved-email { color:var(--ink); }
.saved-delete { display:grid; place-items:center; width:28px; height:28px; margin-left:auto; flex:none; padding:0; background:transparent; border:0; border-radius:6px; color:var(--muted); cursor:pointer; opacity:1; transition:color .15s,background .15s; }
.saved-delete:hover { color:#c34b4b; background:#fef3f2; }
.message-row { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.message-row:hover { background:#f9fafb; }
.message-row.unread { background:#f2f6ff; }
.message-row.unread:hover { background:#eaeffe; }
.msg-sender { flex:0 0 205px; min-width:0; font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-row:not(.unread) .msg-sender { color:var(--muted); }
.msg-subject { flex:1; min-width:0; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-subject.unread-indicator { font-weight:650; }
.msg-date { flex:none; font-size:11px; color:var(--muted); white-space:nowrap; }
.msg-delete { flex:none; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:#b0bbc6; cursor:pointer; opacity:1; transition:opacity .12s,color .12s,background .12s; }
.msg-delete:hover { color:#c34b4b; background:#fef3f2; }
.unread-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent); }
.modal-overlay { position:fixed; z-index:20; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; opacity:0; visibility:hidden; transition:.18s ease; }
.modal-overlay.open { opacity:1; visibility:visible; }
.modal { width:min(100% - 32px,580px); max-height:80vh; overflow-y:auto; background:var(--paper); border-radius:16px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.2); transform:translateY(12px); transition:.2s ease; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal h2 { margin:0 0 4px; font-size:18px; letter-spacing:-.4px; }
.modal-meta { margin:16px 0; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.modal-body { -webkit-data-detectors:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word; }
.modal-close { position:sticky; top:0; float:right; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:var(--canvas); border-radius:8px; color:var(--muted); font-size:22px; line-height:1; }
.modal-close:hover { background:#e5e8eb; }
.faq-modal { width:min(100% - 32px,540px); }
.faq-intro { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.faq-list { margin:20px 0 0; }
.faq-list div { padding:15px 0; border-top:1px solid var(--line); }
.faq-list dt { font-size:14px; font-weight:700; }
.faq-list dd { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.confirm-modal { width:min(100% - 32px,400px); text-align:center; padding:32px 28px 24px; transform:none; }
.confirm-message { -webkit-data-detectors:none; margin:8px 0 24px; color:var(--muted); font-size:14px; line-height:1.5; }
.confirm-actions { display:flex; justify-content:center; gap:10px; }
.confirm-cancel { background:var(--canvas); color:var(--ink); border:1px solid var(--line); }
.confirm-cancel:hover { background:#e5e8eb; border-color:#d0d5da; }
.confirm-ok { background:#c34b4b; color:#fff; min-width:100px; }
.confirm-ok:hover { background:#a83a3a; }
#loginError { color:#c34b4b; font-size:12px; margin-top:8px; }

  #notification {
  -webkit-data-detectors:none;
  position:fixed; top:24px; left:50%; transform:translateX(-50%);
  background:var(--paper); color:var(--ink);
  padding:12px 20px; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  font-size:14px; z-index:999999;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  transform:translateX(-50%) translateY(-8px);
  cursor:pointer;
  max-width:90vw; text-align:center;
}
#notification.show {
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
#notification.error { border-left:4px solid #c34b4b; }
#notification.success { border-left:4px solid #1976d2; }
#notification.warning { border-left:4px solid #e8a317; background:#fff8dc; color:#6b5300; }

@media (max-width:800px) { .shell { padding:0 20px; } .create-card { max-width:560px; } .info-card { display:none; } .msg-sender { flex-basis:120px; } #notification { top:12px; } }
@media (max-width:460px) { .shell { padding:0 16px; } .nav { height:56px; } .brand { font-size:17px; } .brand-logo { width:28px; height:28px; } .login-toggle { padding:7px 10px; font-size:13px; } .create-card { padding:20px 16px; } .card-title { font-size:20px; } .card-copy { margin:5px 0 16px; font-size:13px; } .field-label { font-size:11px; } .email-field input { font-size:16px; } .domain { padding-right:10px; font-size:11px; } .password-wrap { margin-bottom:10px; } .card-login-link { margin-top:8px; font-size:12px; } .fine-print { margin-top:5px; font-size:10px; } .site-footer { min-height:48px; } .footer-content { min-height:47px; font-size:11px; } .mailbox-bar { flex-wrap:wrap; } .mailbox-address { flex:auto; } .quiet-button { margin-left:43px; } .msg-sender { flex-basis:90px; } #notification { top:8px; } }