:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#07111f;--panel:#0f1b2d;--panel-2:#13233a;--panel-3:#14233ae0;--panel-4:#09121eb8;--text:#ebf2ff;--muted:#93a4bf;--accent:#61dafb;--accent-2:#7c9cff;--success:#8ef3c3;--border:#223755;--danger:#ff7b8f;--shadow-md:0 14px 32px #0003;--shadow-lg:0 18px 50px #00000042;--shadow-xl:0 26px 70px #00000059;--radius-md:16px;--radius-lg:20px;--radius-xl:24px;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:16px;--space-5:20px;--space-6:24px}*{box-sizing:border-box}html,body{background:linear-gradient(180deg, #050b14 0%, var(--bg) 100%);color:var(--text);margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif}body{min-height:100vh}a{color:inherit;text-decoration:none}code{color:var(--accent);background:#61dafb1a;border-radius:999px;align-items:center;padding:3px 8px;display:inline-flex}button,input,textarea{font:inherit}.shell{width:min(1120px,100% - 32px);margin:0 auto;padding:32px 0 64px}.hero,.panel{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#0f1b2de6}.hero{padding:32px}.createMailboxHero{position:relative;overflow:hidden}.createMailboxHero:after{content:"";pointer-events:none;background:radial-gradient(circle,#61dafb29,#0000 62%);height:300px;position:absolute;inset:auto -10% -35% 35%}.panel{padding:var(--space-5)}.grid{gap:var(--space-5);grid-template-columns:320px 1fr;display:grid}.stack{gap:var(--space-4);display:grid}.compactStack{gap:var(--space-1)}.muted{color:var(--muted)}.badge{width:fit-content;color:var(--accent);background:#61dafb1f;border:1px solid #61dafb3d;border-radius:999px;align-items:center;gap:8px;padding:6px 10px;font-size:.85rem;display:inline-flex}.badge.success{color:var(--success);background:#8ef3c31f;border-color:#8ef3c33d}.badge.subtle{color:var(--muted);background:#93a4bf1a;border-color:#93a4bf33}.headline{margin:16px 0;font-size:clamp(2rem,5vw,3.75rem);line-height:1.05}.heroHeader,.inboxHeaderContent{z-index:1;position:relative}.heroLead{max-width:720px;font-size:1.05rem;line-height:1.7}.actions,.row{flex-wrap:wrap;gap:12px;display:flex}.button,.input,.textarea{border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:14px}.button{cursor:pointer;padding:12px 18px;font-weight:600}.button.primary{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#05101c;border:0}.button.ghost{background:0 0}.input,.textarea{width:100%;padding:12px 14px}.textarea{resize:vertical;min-height:180px}.address{padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--panel-3);overflow-wrap:anywhere;font-size:1.05rem}.address.secondary{background:var(--panel-4);font-size:.95rem}.featureGrid,.infoGrid{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.featureCard,.infoCard,.createdMailboxPanel{border-radius:var(--radius-md);box-shadow:var(--shadow-md);background:linear-gradient(#7c9cff14,#13233ae6),#13233ae6;border:1px solid #7c9cff29;position:relative}.featureCard,.infoCard{padding:var(--space-4)}.createdMailboxPanel{z-index:1;padding:var(--space-5)}.list{gap:var(--space-2);display:grid}.messageCard{padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;text-align:left;background:linear-gradient(#7c9cff14,#13233adb),#13233adb;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.messageCard:hover{border-color:#61dafb47;transform:translateY(-1px);box-shadow:0 12px 28px #0003}.messageCard.active{border-color:var(--accent);background:linear-gradient(#61dafb2e,#13233ae6),#13233ae6;box-shadow:0 18px 36px #0a121f5c}.messageCardContent{gap:var(--space-1);display:grid}.messageCardSubject,.detailSubject{line-height:1.3}.inboxGrid{align-items:start}.messageListPanel,.messageDetailPanel{position:relative;overflow:hidden}.messageListPanel:before,.messageDetailPanel:before{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#61dafb14,#0000 48%);position:absolute;inset:0}.messageListHeader,.messageDetailHeader{gap:var(--space-4);justify-content:space-between;align-items:flex-start;display:flex;position:relative}.inboxHero{gap:var(--space-4)}.inboxHeader{justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;align-items:flex-start;display:flex}.inboxHeaderActions{flex-wrap:wrap;justify-content:flex-end;gap:12px;display:flex}.messageCount{min-width:42px;color:var(--accent);background:#61dafb14;border:1px solid #61dafb33;border-radius:999px;justify-content:center;padding:8px 10px;font-size:.9rem;font-weight:700;display:inline-flex}.messageEmptyState{padding:var(--space-4);border-radius:var(--radius-md);background:#13233a73;border:1px dashed #93a4bf38}.messageMetaList{flex-wrap:wrap;gap:8px 12px;display:flex}.messageToolbar{gap:var(--space-2);place-items:start end;display:grid}.viewToggle{background:#07111f7a;border:1px solid #7c9cff29;border-radius:999px;gap:6px;padding:5px;display:inline-flex}.viewToggleButton{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:9px 14px;font-weight:600;transition:background .18s,color .18s,opacity .18s}.viewToggleButton.active{color:var(--text);background:linear-gradient(135deg,#7c9cff3d,#61dafb33)}.viewToggleButton:disabled{cursor:not-allowed;opacity:.45}.remoteImageToggle{color:var(--muted);background:#07111f6b;border:1px solid #61dafb24;border-radius:999px;align-items:center;gap:10px;padding:10px 14px;font-size:.92rem;display:inline-flex}.remoteImageToggle input{accent-color:var(--accent)}.messageBody{padding:var(--space-5);border-radius:var(--radius-xl);white-space:pre-wrap;word-break:break-word;background:linear-gradient(#ffffff05,#0000),#07111f5c;border:1px solid #7c9cff1f;line-height:1.65;box-shadow:inset 0 1px #ffffff08}.htmlPreviewStack{gap:var(--space-3);display:grid}.htmlFrame{border-radius:var(--radius-xl);width:100%;min-height:420px;box-shadow:var(--shadow-xl);background:#fff;border:1px solid #7c9cff24}.error{color:var(--danger)}@media (max-width:860px){.grid{grid-template-columns:1fr}.inboxHeader{flex-direction:column}.inboxHeaderActions{justify-content:flex-start}.messageListHeader,.messageDetailHeader{flex-direction:column}.messageToolbar{justify-items:start}}