*{box-sizing:border-box}
:root{
  --accent:#6d5dfc;
  --bg:#f6f7fb;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#fff;
  --text:#171927;
  --muted:#72788d;
  --line:#e7e8ef;
  --soft:#f0f1f6;
  --danger:#d94452;
  --shadow:0 18px 55px rgba(25,30,60,.09);
}
html[data-theme="dark"]{
  --bg:#0d0f17;
  --panel:rgba(20,23,34,.86);
  --panel-solid:#151822;
  --text:#f4f5fa;
  --muted:#9ba1b4;
  --line:#292e3c;
  --soft:#202431;
  --danger:#ff6874;
  --shadow:0 18px 55px rgba(0,0,0,.25);
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{position:relative;overflow-x:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
.shell{width:min(1120px,calc(100% - 34px));margin-inline:auto}
.ambient{position:fixed;border-radius:999px;filter:blur(85px);opacity:.18;pointer-events:none;z-index:0}
.ambient-a{width:420px;height:420px;background:var(--accent);top:-140px;left:-120px}
.ambient-b{width:360px;height:360px;background:#30c6aa;right:-140px;top:38%}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.brand{display:inline-flex;gap:10px;align-items:center;font-weight:800;text-decoration:none;font-size:19px;letter-spacing:-.02em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--text);color:var(--bg)}
.top-actions{display:flex;gap:9px}
.icon-btn,.soft-btn,.danger-btn,.primary-btn{border:0;border-radius:12px;transition:.18s ease}
.icon-btn{width:40px;height:40px;background:var(--panel);color:var(--text);border:1px solid var(--line)}
.icon-btn:hover,.soft-btn:hover{transform:translateY(-1px);background:var(--soft)}
.app-shell{position:relative;z-index:1;padding:54px 0 28px}
.hero{text-align:center;max-width:760px;margin:0 auto 38px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.hero h1{font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.055em;margin:12px 0 18px}
.hero h1 span{color:var(--accent)}
.hero p{font-size:18px;line-height:1.65;color:var(--muted);max-width:670px;margin:auto}
.card{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}
.address-card{max-width:850px;margin:0 auto 30px;padding:24px}
.address-meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;margin-bottom:13px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#35c68a;box-shadow:0 0 0 5px rgba(53,198,138,.12)}
.address-row{display:flex;gap:12px}
.address-value{flex:1;min-width:0;background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:16px 18px;font-size:clamp(17px,3vw,23px);font-weight:750;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.primary-btn{padding:0 24px;background:var(--accent);color:white;font-weight:800;box-shadow:0 8px 25px color-mix(in srgb,var(--accent) 30%,transparent)}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.address-tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.soft-btn,.danger-btn{padding:10px 13px;font-weight:700}
.soft-btn{background:transparent;color:var(--text);border:1px solid var(--line)}
.danger-btn{margin-left:auto;background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line))}
.inbox-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.inbox-panel{min-height:420px;padding:22px}
.side-panel{padding:24px;position:sticky;top:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}
.panel-head h2{font-size:24px;margin:5px 0 0;letter-spacing:-.03em}
.count-pill{font-size:12px;background:var(--soft);padding:5px 8px;border-radius:999px;color:var(--muted);vertical-align:middle}
.message-list{display:flex;flex-direction:column}
.message-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 3px;border-bottom:1px solid var(--line);cursor:pointer}
.message-item:hover{background:color-mix(in srgb,var(--soft) 60%,transparent)}
.sender-avatar{width:44px;height:44px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-weight:900;color:var(--accent)}
.message-main{min-width:0}
.sender{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subject{font-size:14px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-time{font-size:12px;color:var(--muted);white-space:nowrap}
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state h3{color:var(--text);margin:13px 0 7px}
.empty-state p{max-width:380px;margin:auto;line-height:1.6}
.empty-icon{width:58px;height:58px;margin:auto;border-radius:18px;display:grid;place-items:center;background:var(--soft);font-size:24px;color:var(--accent)}
.security-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--accent) 12%,var(--soft));color:var(--accent);font-size:22px}
.side-panel h3{font-size:20px;letter-spacing:-.025em;margin:17px 0 8px}
.side-panel p{color:var(--muted);line-height:1.6;font-size:14px}
.feature-list{padding:0;margin:18px 0 0;list-style:none;display:grid;gap:11px;font-size:14px}
.feature-list li:before{content:"✓";color:#34b784;font-weight:900;margin-right:8px}
.footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px;padding:22px 0 35px}
.footer a{text-decoration:none}
.modal-backdrop{position:fixed;z-index:20;inset:0;background:rgba(3,5,12,.56);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px}
.modal-backdrop.hidden{display:none}
.message-modal{width:min(900px,100%);height:min(760px,92vh);padding:20px;display:flex;flex-direction:column;background:var(--panel-solid)}
.modal-head{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:14px}
.modal-head h2{margin:4px 0;font-size:22px;letter-spacing:-.025em}
.modal-from,.modal-date{color:var(--muted);font-size:13px}
.mail-frame{border:0;width:100%;flex:1;background:white;border-radius:14px;margin-top:13px}
.attachment-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.attachment-list a{font-size:12px;text-decoration:none;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.toast{position:fixed;z-index:30;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:11px 15px;border-radius:12px;font-weight:700;font-size:13px;opacity:0;pointer-events:none;transition:.2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
  .app-shell{padding-top:32px}
  .inbox-grid{grid-template-columns:1fr}
  .side-panel{position:static}
}
@media (max-width:560px){
  .topbar{height:66px}
  .hero h1{font-size:43px}
  .hero p{font-size:16px}
  .address-card{padding:17px}
  .address-row{flex-direction:column}
  .primary-btn{height:48px}
  .danger-btn{margin-left:0}
  .inbox-panel{padding:16px}
  .message-item{grid-template-columns:42px minmax(0,1fr)}
  .message-time{display:none}
}


.verify-card{max-width:850px;margin:0 auto 18px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.verify-card.hidden{display:none}
.verify-card h2{margin:5px 0 4px;font-size:22px}
.verify-card p{margin:0;color:var(--muted);font-size:14px}
.verify-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.primary-btn.compact{min-height:44px;padding:0 18px}
.ad-slot{max-width:850px;margin:0 auto 22px;text-align:center;color:var(--muted);font-size:13px;overflow:hidden}
.bottom-ad{margin-top:24px;margin-bottom:0}
.footer-nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
.footer-nav a{color:var(--muted)}
.content-shell{max-width:850px;margin:30px auto 70px}
.content-card{padding:28px}
.content-card h1{font-size:38px;letter-spacing:-.04em;margin:0 0 12px}
.content-card .prose{color:var(--text);line-height:1.75}
.content-card .prose p,.content-card .prose ul,.content-card .prose ol{color:var(--muted)}
.content-card .meta{font-size:12px;color:var(--muted);margin-bottom:24px}
.public-form{display:grid;gap:14px;margin-top:22px}
.public-form label{font-size:13px;font-weight:750;color:var(--muted)}
.public-form input,.public-form textarea,.public-form select{width:100%;margin-top:7px;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:12px;padding:12px;outline:none}
.public-form input:focus,.public-form textarea:focus,.public-form select:focus{border-color:var(--accent)}
.notice{padding:12px 14px;border:1px solid var(--line);background:var(--soft);border-radius:12px;margin:14px 0}
.notice.success{border-color:color-mix(in srgb,#34b784 35%,var(--line))}
.notice.error{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
@media(max-width:650px){
  .verify-card{align-items:flex-start;flex-direction:column}
  .verify-action{justify-content:flex-start;width:100%}
  .footer{flex-direction:column}
  .footer-nav{justify-content:flex-start}
}