:root{--c-accent-h: 252;--c-accent-s: 100%;--c-accent-l: 70%;--c-accent: hsl(var(--c-accent-h) var(--c-accent-s) var(--c-accent-l));--c-accent-soft: hsl(var(--c-accent-h) var(--c-accent-s) var(--c-accent-l) / .18);--c-cyan: hsl(186 92% 60%);--c-pink: hsl(330 84% 64%);--c-amber: hsl(40 96% 60%);--c-green: hsl(150 70% 52%);--c-red: hsl(0 84% 64%);--r-1: 6px;--r-2: 10px;--r-3: 14px;--r-4: 20px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--t-fast: .12s;--t-base: .2s;--ease: cubic-bezier(.2, .8, .2, 1);--shadow-1: 0 1px 2px hsl(220 30% 5% / .2);--shadow-2: 0 8px 24px hsl(220 30% 5% / .25)}[data-theme=dark]{--c-bg-0: hsl(228 34% 6%);--c-bg-1: hsl(228 30% 9%);--c-bg-2: hsl(228 26% 12%);--c-surface: hsl(228 26% 14% / .6);--c-surface-2: hsl(228 26% 18% / .6);--c-border: hsl(228 22% 22% / .8);--c-border-strong: hsl(228 22% 30%);--c-text: hsl(220 30% 96%);--c-text-2: hsl(220 14% 70%);--c-text-3: hsl(220 12% 56%);--c-overlay: hsl(228 30% 4% / .7)}[data-theme=light]{--c-bg-0: hsl(220 38% 98%);--c-bg-1: hsl(220 30% 96%);--c-bg-2: hsl(220 24% 94%);--c-surface: hsl(0 0% 100% / .85);--c-surface-2: hsl(220 24% 98% / .85);--c-border: hsl(220 20% 86%);--c-border-strong: hsl(220 20% 70%);--c-text: hsl(228 30% 12%);--c-text-2: hsl(228 14% 32%);--c-text-3: hsl(228 10% 50%);--c-overlay: hsl(220 24% 12% / .4)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 800px at 90% -10%,hsl(var(--c-accent-h) 80% 55% / .18),transparent 60%),radial-gradient(900px 600px at -10% 110%,hsl(186 80% 55% / .16),transparent 60%),var(--c-bg-0);color:var(--c-text);font:15px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:var(--c-accent);text-decoration:none}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-border);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10;background:linear-gradient(180deg,var(--c-bg-1),var(--c-bg-1) 70%,transparent)}.brand{display:flex;align-items:center;gap:var(--s-3)}.brand__logo{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-2);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--c-accent),var(--c-cyan));box-shadow:var(--shadow-1);letter-spacing:.5px}.brand__name{font-weight:700;letter-spacing:.2px}.brand__tag{color:var(--c-text-3);font-size:12.5px;margin-left:var(--s-2);border-left:1px solid var(--c-border);padding-left:var(--s-3)}.topbar__actions{display:flex;gap:var(--s-2);align-items:center}.layout{max-width:1080px;margin:0 auto;padding:var(--s-5);display:grid;gap:var(--s-5)}.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-3);padding:var(--s-4);backdrop-filter:blur(14px);box-shadow:var(--shadow-1)}.addressbar__row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}.addressbar__row+.addressbar__row{margin-top:var(--s-3)}.addressbar__row--actions{flex-wrap:wrap}.addressbar__email{flex:1 1 360px;min-width:0;display:flex;align-items:center;gap:var(--s-2);background:var(--c-bg-1);border:1px solid var(--c-border);border-radius:var(--r-2);padding:6px 8px 6px 12px}.addressbar__email input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--c-text);font:600 16px/1 ui-monospace,SF Mono,Menlo,Consolas,monospace;letter-spacing:.2px}.addressbar__email input::placeholder{color:var(--c-text-3);font-weight:400}.addressbar__meta{display:flex;gap:var(--s-2);align-items:center}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--c-text-3);box-shadow:0 0 0 3px #0000;transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}.status-dot[data-status=online]{background:var(--c-green);box-shadow:0 0 0 3px #2fda852e}.status-dot[data-status=loading]{background:var(--c-amber);box-shadow:0 0 0 3px #fbba372e;animation:pulse 1.4s var(--ease) infinite}.status-dot[data-status=offline]{background:var(--c-red);box-shadow:0 0 0 3px #f0565629}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.tabs{margin-top:var(--s-4);display:flex;gap:var(--s-2);flex-wrap:wrap;border-top:1px solid var(--c-border);padding-top:var(--s-3)}.tab{display:flex;align-items:center;gap:var(--s-2);padding:6px 8px 6px 12px;border:1px solid var(--c-border);border-radius:999px;background:var(--c-bg-1);color:var(--c-text-2);font-size:13px;cursor:pointer;transition:all var(--t-fast) var(--ease)}.tab:hover{color:var(--c-text);border-color:var(--c-border-strong)}.tab--active{color:var(--c-text);border-color:hsl(var(--c-accent-h) 90% 70% / .7);background:var(--c-accent-soft)}.tab__close{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--c-text-3);cursor:pointer}.tab__close:hover{background:var(--c-bg-2);color:var(--c-text)}.tab--add{border-style:dashed;color:var(--c-text-3)}.inbox__head{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}.inbox__title{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:17px;font-weight:700}.badge{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--c-accent-soft);color:hsl(var(--c-accent-h) 100% 80%);font-size:12px;font-weight:700}.inbox__filters{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}.search{background:var(--c-bg-1);border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-text);padding:7px 10px;min-width:220px;outline:0;font:inherit}.search:focus{border-color:var(--c-accent)}.chips{display:flex;gap:6px;background:var(--c-bg-1);border:1px solid var(--c-border);border-radius:999px;padding:3px}.chip{padding:6px 12px;border:0;background:transparent;color:var(--c-text-2);border-radius:999px;font:inherit;font-size:13px;cursor:pointer;transition:all var(--t-fast) var(--ease)}.chip:hover{color:var(--c-text)}.chip--active{background:var(--c-accent);color:#fff;font-weight:600}.inbox__list{display:grid;gap:var(--s-2)}.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2);background:var(--c-bg-1);cursor:pointer;transition:all var(--t-fast) var(--ease)}.row:hover{border-color:var(--c-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-1)}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}.row__main{min-width:0}.row__head{display:flex;align-items:center;gap:var(--s-2);margin-bottom:2px}.row__from{font-weight:600;color:var(--c-text)}.row__from .row__email{color:var(--c-text-3);font-weight:400;margin-left:6px}.row__subject{color:var(--c-text);font-weight:500}.row__preview{color:var(--c-text-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row__side{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text-3);font-size:12.5px}.tag{padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--c-border)}.tag--verification{background:#2fda8524;color:#7de8b3;border-color:#2fda8552}.tag--security{background:#f056561f;color:#f69898;border-color:#f056564d}.tag--marketing{background:#fbba371f;color:#fcd482;border-color:#fbba374d}.tag--testing{background:#3be4f71f;color:#85eefa;border-color:#3be4f74d}.star{border:0;background:transparent;cursor:pointer;color:var(--c-text-3);font-size:16px;padding:4px}.star--on{color:var(--c-amber)}.empty{display:grid;place-items:center;text-align:center;padding:var(--s-7) var(--s-4);color:var(--c-text-3)}.empty__icon{font-size:36px;margin-bottom:var(--s-2)}.empty__title{color:var(--c-text);font-weight:600;margin-bottom:4px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--c-border);background:var(--c-bg-1);color:var(--c-text);border-radius:var(--r-2);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:all var(--t-fast) var(--ease)}.btn:hover{border-color:var(--c-border-strong)}.btn:active{transform:translateY(1px)}.btn--primary{background:linear-gradient(135deg,var(--c-accent),hsl(var(--c-accent-h) 80% 60%));border-color:transparent;color:#fff;font-weight:600}.btn--primary:hover{filter:brightness(1.08)}.btn--ghost{background:transparent;border-color:transparent;color:var(--c-text-2)}.btn--ghost:hover{background:var(--c-bg-1);color:var(--c-text)}.btn--danger{color:#f69898}.btn--danger:hover{border-color:#f0565680;background:#f056561a}.btn--icon{padding:6px}.kbd{font:11px ui-monospace,monospace;padding:2px 6px;border-radius:4px;background:var(--c-bg-2);border:1px solid var(--c-border);color:var(--c-text-2)}.auto{display:inline-flex;align-items:center;gap:6px;background:var(--c-bg-1);border:1px solid var(--c-border);border-radius:var(--r-2);padding:4px 10px;font-size:13px;color:var(--c-text-2)}.auto select{background:transparent;color:var(--c-text);border:0;outline:0;font:inherit}.viewer{width:min(960px,92vw);max-height:84vh;border:1px solid var(--c-border);border-radius:var(--r-3);background:var(--c-bg-1);color:var(--c-text);padding:0;overflow:hidden;box-shadow:var(--shadow-2)}.viewer::backdrop{background:var(--c-overlay);backdrop-filter:blur(4px)}.viewer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border);background:var(--c-bg-2)}.viewer__meta h3{margin:0 0 4px;font-size:16px}.viewer__from{color:var(--c-text-3);font-size:12.5px}.viewer__actions{display:flex;gap:4px}.viewer iframe{width:100%;height:min(70vh,700px);border:0;background:#fff}.palette{width:min(560px,92vw);border:1px solid var(--c-border);border-radius:var(--r-3);background:var(--c-bg-1);color:var(--c-text);padding:0;overflow:hidden;box-shadow:var(--shadow-2);margin:12vh auto auto}.palette::backdrop{background:var(--c-overlay);backdrop-filter:blur(4px)}.palette__input{width:100%;border:0;outline:0;background:transparent;color:var(--c-text);font:16px/1.4 inherit;padding:var(--s-4);border-bottom:1px solid var(--c-border)}.palette__list{list-style:none;padding:6px;margin:0;max-height:50vh;overflow:auto}.palette__item{padding:10px 12px;border-radius:var(--r-1);cursor:pointer;display:flex;align-items:center;gap:var(--s-3)}.palette__item:hover,.palette__item[aria-selected=true]{background:var(--c-accent-soft)}.palette__hint{margin-left:auto;font-size:11.5px;color:var(--c-text-3)}.toasts{position:fixed;bottom:20px;right:20px;display:grid;gap:8px;z-index:100}.toast{background:var(--c-bg-2);border:1px solid var(--c-border);color:var(--c-text);padding:10px 14px;border-radius:var(--r-2);box-shadow:var(--shadow-2);font-size:13px;animation:slideUp .22s var(--ease)}.toast--success{border-color:#2fda8580}.toast--error{border-color:#f0565680}.toast--info{border-color:#3be4f780}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.alias{width:min(440px,92vw);border:1px solid var(--c-border);border-radius:var(--r-3);background:var(--c-bg-1);color:var(--c-text);padding:0;overflow:hidden;box-shadow:var(--shadow-2)}.alias::backdrop{background:var(--c-overlay);backdrop-filter:blur(4px)}.alias form{padding:var(--s-4)}.alias__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}.alias__head h3{margin:0;font-size:16px}.alias__hint{color:var(--c-text-3);font-size:13px;margin:0 0 var(--s-3)}.alias__row{display:flex;align-items:stretch;background:var(--c-bg-2);border:1px solid var(--c-border);border-radius:var(--r-2);overflow:hidden}.alias__row:focus-within{border-color:var(--c-accent)}.alias__row input{flex:1;border:0;outline:0;background:transparent;color:var(--c-text);padding:10px 12px;font:600 15px/1 ui-monospace,SF Mono,Menlo,Consolas,monospace}.alias__suffix{display:grid;place-items:center;padding:0 12px;background:var(--c-bg-1);border-left:1px solid var(--c-border);font:600 13px/1 ui-monospace,SF Mono,Menlo,Consolas,monospace;color:var(--c-text-2);white-space:nowrap}.alias__actions{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-4)}@media(max-width:640px){.layout{padding:var(--s-3);gap:var(--s-3)}.brand__tag{display:none}.search{min-width:140px;flex:1}}
