:root{--bg: #0b0b1c;--bg-grad-1: #15102e;--bg-grad-2: #0a0a1f;--surface: #14142b;--surface-2: #181834;--surface-3: #1f1f42;--surface-hover: #20203f;--elevated: #1a1a38;--border: #272752;--border-soft: #20203e;--border-glow: rgba(124, 58, 237, .35);--text: #ececf7;--text-soft: #c2c2e0;--muted: #8e8eb8;--muted-2: #6c6c98;--primary: #7c3aed;--primary-2: #a78bfa;--primary-ink: #ffffff;--cyan: #22d3ee;--rose: #f43f5e;--green: #34d399;--amber: #fbbf24;--danger: #fb7185;--warning: #fbbf24;--success: #34d399;--info: #22d3ee;--grad-primary: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #22d3ee 140%);--grad-primary-soft: linear-gradient(135deg, rgba(124, 58, 237, .16), rgba(34, 211, 238, .12));--grad-rose: linear-gradient(135deg, #f43f5e, #a855f7);--grad-app: radial-gradient(1200px 700px at 12% -8%, rgba(124, 58, 237, .22), transparent 60%), radial-gradient(1000px 600px at 100% 0%, rgba(34, 211, 238, .12), transparent 55%), linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));--glow-primary: 0 0 0 1px rgba(124, 58, 237, .4), 0 8px 30px rgba(124, 58, 237, .25);--glow-cyan: 0 0 24px rgba(34, 211, 238, .35);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .35);--shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 22px;--r-pill: 999px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--fs-xs: 12px;--fs-sm: 13px;--fs-base: 14px;--fs-md: 15px;--fs-lg: 18px;--fs-xl: 22px;--fs-2xl: 30px;--t-fast: .12s ease;--t-base: .18s ease;--t-slow: .28s cubic-bezier(.22, 1, .36, 1);--z-base: 1;--z-sticky: 10;--z-dropdown: 20;--z-overlay: 30;--z-modal: 50;--z-toast: 60}:root[data-density=cozy]{--row-py: 10px}:root[data-density=compact]{--row-py: 6px}:root{--row-py: 14px}#root{position:relative;isolation:isolate}#root:before{content:"";position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:0;pointer-events:none;background:radial-gradient(40% 40% at 20% 25%,rgba(124,58,237,.28),transparent 60%),radial-gradient(35% 35% at 80% 20%,rgba(34,211,238,.18),transparent 60%),radial-gradient(45% 45% at 65% 85%,rgba(244,63,94,.12),transparent 60%);background-size:200% 200%;filter:blur(20px);opacity:.8;animation:auroraDrift 26s ease-in-out infinite alternate}#root>*{position:relative;z-index:1}@keyframes auroraDrift{0%{background-position:0% 0%,100% 0%,60% 100%;transform:scale(1)}50%{background-position:40% 30%,60% 20%,30% 70%;transform:scale(1.06)}to{background-position:100% 60%,0% 50%,80% 30%;transform:scale(1)}}.auth-orb{animation:orbFloat 16s ease-in-out infinite alternate;will-change:transform}.auth-orb:nth-of-type(2){animation-duration:22s;animation-direction:alternate-reverse}@keyframes orbFloat{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(18px,-26px,0) scale(1.12)}to{transform:translate3d(-14px,16px,0) scale(.96)}}.tilt-stage{perspective:1100px}.tilt{transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .22s cubic-bezier(.22,1,.36,1)}.brand-mark{position:relative;animation:glowPulse 4.5s ease-in-out infinite}.brand-mark:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:inherit;background:conic-gradient(from 0deg,#7c3aed,#22d3ee,#f43f5e,#7c3aed);filter:blur(7px);opacity:.55;z-index:-1;animation:ringSpin 6s linear infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 0 1px #7c3aed66,0 6px 22px #7c3aed4d}50%{box-shadow:0 0 0 1px #22d3ee80,0 10px 34px #7c3aed8c}}@keyframes ringSpin{to{transform:rotate(360deg)}}.auth-pitch h1{animation:riseIn .6s .05s ease-out both}.auth-pitch>p{animation:riseIn .6s .14s ease-out both}.auth-points li{animation:riseIn .5s ease-out both}.auth-points li:nth-child(1){animation-delay:.22s}.auth-points li:nth-child(2){animation-delay:.3s}.auth-points li:nth-child(3){animation-delay:.38s}.auth-card>h2{animation:riseIn .5s .06s ease-out both}.auth-card .sub{animation:riseIn .5s .12s ease-out both}.auth-card form{animation:riseIn .5s .18s ease-out both}@keyframes riseIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.btn-primary,.compose-btn{position:relative;overflow:hidden}.btn-primary:after,.compose-btn:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skew(-18deg);transition:left .55s ease}.btn-primary:hover:after,.compose-btn:hover:after{left:130%}.nav-item{position:relative}.nav-item .ico{transition:transform var(--t-base)}.nav-item:hover .ico{transform:translate(2px) scale(1.08)}.nav-item.active:before{content:"";position:absolute;left:0;top:50%;width:3px;height:60%;border-radius:0 3px 3px 0;background:var(--grad-primary);transform:translateY(-50%);animation:barGrow .3s ease-out both;box-shadow:0 0 10px #7c3aedb3}@keyframes barGrow{0%{height:0;opacity:0}to{height:60%;opacity:1}}.compose-btn:active{transform:translateY(1px) scale(.985)}.msg-row{animation:rowIn .34s ease-out both}@keyframes rowIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.msg-star.on{animation:starPop .3s ease-out}@keyframes starPop{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.3) rotate(6deg)}to{transform:scale(1) rotate(0)}}.read-anim{animation:readIn .32s ease-out both}@keyframes readIn{0%{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}.list-tile{transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base)}.list-tile:hover{transform:translateY(-2px);border-color:var(--border-glow);box-shadow:var(--shadow-md)}.toast{will-change:transform}@media (prefers-reduced-motion: reduce){#root:before,.auth-orb,.brand-mark,.brand-mark:after,.msg-row,.read-anim,.nav-item.active:before,.auth-pitch h1,.auth-pitch>p,.auth-points li,.auth-card>h2,.auth-card .sub,.auth-card form{animation:none!important}.tilt{transform:none!important}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%}body{font-family:var(--font);font-size:var(--fs-base);line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{background:var(--grad-app);background-attachment:fixed}a{color:var(--primary-2);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;cursor:pointer}img{max-width:100%;display:block}::selection{background:#7c3aed66;color:#fff}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:2px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:var(--primary);background-clip:content-box}.h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}.h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em}.muted{color:var(--muted)}.text-soft{color:var(--text-soft)}.gradient-text{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:10px 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;font-size:var(--fs-base);transition:background var(--t-base),border-color var(--t-base),transform var(--t-fast),box-shadow var(--t-base);white-space:nowrap}.btn:hover{background:var(--surface-hover);border-color:var(--border-glow)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--grad-primary);color:var(--primary-ink);border:none;box-shadow:0 6px 20px #7c3aed59}.btn-primary:hover{box-shadow:0 8px 28px #7c3aed80;filter:brightness(1.06)}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:var(--surface-2)}.btn-danger{background:transparent;border-color:#f43f5e66;color:var(--danger)}.btn-danger:hover{background:#f43f5e1f}.btn-block{width:100%}.btn-lg{padding:13px 20px;font-size:var(--fs-md)}.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--r-md);background:transparent;border-color:transparent;color:var(--muted)}.btn-icon:hover{background:var(--surface-2);color:var(--text)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}.field label{font-size:var(--fs-sm);font-weight:600;color:var(--text-soft)}.input,.textarea,.select{width:100%;padding:11px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:var(--fs-base);transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base)}.input::placeholder,.textarea::placeholder{color:var(--muted-2)}.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed40}.input-group{display:flex;align-items:stretch}.input-suffix{display:inline-flex;align-items:center;padding:0 13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-left:none;border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-sm);white-space:nowrap}.input-group .input{border-radius:var(--r-md) 0 0 var(--r-md)}.field-error{color:var(--danger);font-size:var(--fs-xs)}.input.has-error{border-color:var(--danger)}.help{color:var(--muted);font-size:var(--fs-xs)}.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1.7}.badge-count{background:var(--primary);color:#fff;min-width:20px;justify-content:center}.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-soft)}.dot{width:8px;height:8px;border-radius:50%;flex:none}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}.auth-shell{min-height:100%;display:grid;grid-template-columns:1.05fr .95fr}.auth-aside{position:relative;overflow:hidden;padding:var(--sp-7);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(800px 500px at 20% 10%,rgba(124,58,237,.35),transparent 60%),radial-gradient(700px 500px at 90% 90%,rgba(34,211,238,.2),transparent 55%),linear-gradient(160deg,#160f33,#0a0a20);border-right:1px solid var(--border)}.auth-aside .brand-xl{font-size:28px;font-weight:800}.auth-pitch{max-width:460px}.auth-pitch h1{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;margin-bottom:var(--sp-4)}.auth-pitch p{color:var(--text-soft);font-size:var(--fs-lg)}.auth-points{list-style:none;padding:0;margin-top:var(--sp-5);display:grid;gap:var(--sp-3)}.auth-points li{display:flex;gap:var(--sp-3);align-items:center;color:var(--text-soft)}.auth-points .pt-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--grad-primary-soft);border:1px solid var(--border-glow);color:var(--primary-2)}.auth-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5}.auth-main{display:grid;place-items:center;padding:var(--sp-6)}.auth-card{width:100%;max-width:420px}.auth-card .brand{display:none}.auth-card h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}.auth-card .sub{color:var(--muted);margin:6px 0 var(--sp-5)}.auth-foot{margin-top:var(--sp-4);text-align:center;color:var(--muted);font-size:var(--fs-sm)}.divider{display:flex;align-items:center;gap:var(--sp-3);color:var(--muted-2);margin:var(--sp-4) 0;font-size:var(--fs-xs)}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--border)}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800}.brand-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--grad-primary);box-shadow:var(--glow-primary);color:#fff}.app{height:100%;display:grid;grid-template-columns:264px 1fr;grid-template-rows:64px 1fr;grid-template-areas:"sidebar topbar" "sidebar content"}.topbar{grid-area:topbar}.sidebar{grid-area:sidebar}.content{grid-area:content;min-height:0;min-width:0}.topbar{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);border-bottom:1px solid var(--border);background:#0c0c1e99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:var(--z-sticky)}.search{flex:1;max-width:720px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);transition:border-color var(--t-base),box-shadow var(--t-base)}.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed38}.search input{flex:1;background:none;border:none;color:var(--text);font-size:var(--fs-base)}.search input:focus{outline:none}.topbar-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.sidebar{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border-right:1px solid var(--border);background:#0a0a1a8c;overflow-y:auto}.sidebar .brand{padding:6px 8px var(--sp-2);font-size:var(--fs-lg)}.compose-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:var(--r-pill);border:none;color:#fff;font-weight:700;background:var(--grad-primary);box-shadow:0 8px 24px #7c3aed66;transition:filter var(--t-base),box-shadow var(--t-base),transform var(--t-fast)}.compose-btn:hover{filter:brightness(1.08);box-shadow:0 10px 30px #7c3aed8c}.compose-btn:active{transform:translateY(1px)}.nav{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-2)}.nav-section{margin-top:var(--sp-4)}.nav-section-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);padding:var(--sp-2) 10px 6px;display:flex;justify-content:space-between;align-items:center}.nav-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--r-md);color:var(--text-soft);border:1px solid transparent;transition:background var(--t-base),color var(--t-base);width:100%;background:none;text-align:left;font-size:var(--fs-base)}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{background:var(--grad-primary-soft);color:#fff;border-color:var(--border-glow);box-shadow:inset 0 0 0 1px #7c3aed2e}.nav-item .ico{color:inherit;opacity:.92}.nav-item .label{flex:1}.nav-item .count{font-size:var(--fs-xs);font-weight:700;color:var(--primary-2)}.nav-item.active .count{color:#fff}.meter{margin-top:auto;padding:var(--sp-3) 10px}.meter-bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}.meter-fill{height:100%;background:var(--grad-primary);border-radius:99px}.mail-pane{display:grid;grid-template-columns:minmax(320px,460px) 1fr;height:100%;min-height:0}.mail-pane.pane-off{grid-template-columns:1fr}.list-col{border-right:1px solid var(--border);min-height:0;display:flex;flex-direction:column}.list-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);min-height:52px}.list-title{font-weight:700;font-size:var(--fs-md);text-transform:capitalize}.list-scroll{overflow-y:auto;flex:1;min-height:0}.msg-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:var(--sp-3);padding:var(--row-py) var(--sp-4);border-bottom:1px solid var(--border-soft);cursor:pointer;border-left:3px solid transparent;transition:background var(--t-fast)}.msg-row:hover{background:var(--surface-2)}.msg-row.unread{background:#7c3aed0f}.msg-row.unread .msg-from,.msg-row.unread .msg-subject{font-weight:700;color:var(--text)}.msg-row.selected{background:var(--grad-primary-soft);border-left-color:var(--primary)}.msg-star{color:var(--muted-2);background:none;border:none;padding:2px}.msg-star.on{color:var(--amber)}.msg-main{min-width:0}.msg-line{display:flex;align-items:center;gap:8px}.msg-from{font-weight:600;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.msg-subject{color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-snippet{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.msg-date{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}.read-col{min-height:0;display:flex;flex-direction:column}.read-empty{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:var(--sp-6)}.read-empty .ghost{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;margin:0 auto var(--sp-4);background:var(--grad-primary-soft);border:1px solid var(--border-glow);color:var(--primary-2)}.read-head{padding:var(--sp-5);border-bottom:1px solid var(--border)}.read-subject{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;margin-bottom:var(--sp-3);display:flex;gap:var(--sp-3);align-items:flex-start}.read-toolbar{display:flex;gap:4px;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--border);flex-wrap:wrap}.read-sender{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}.read-sender .who{min-width:0}.read-sender .name{font-weight:600}.read-sender .addr{color:var(--muted);font-size:var(--fs-sm)}.read-body{padding:var(--sp-5);overflow-y:auto;flex:1;min-height:0;line-height:1.7;color:var(--text-soft)}.read-body a{color:var(--cyan)}.read-body img{border-radius:8px;margin:8px 0}.read-body p{margin-bottom:12px}.read-body ul,.read-body ol{margin:0 0 12px 20px}.attachments{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border)}.attach{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);font-size:var(--fs-sm)}.safety{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);margin:0 var(--sp-5) 0;align-items:flex-start}.safety-suspicious{background:#fbbf241a;border:1px solid rgba(251,191,36,.35);color:#fde68a}.safety-spam{background:#fb71851a;border:1px solid rgba(251,113,133,.35);color:#fecdd3}.safety-phishing{background:#f43f5e24;border:1px solid rgba(244,63,94,.5);color:#fecdd3}.safety h4{font-size:var(--fs-sm)}.safety ul{margin:6px 0 0 16px;font-size:var(--fs-xs)}.compose{position:fixed;right:24px;bottom:0;width:560px;max-width:calc(100vw - 48px);background:var(--elevated);border:1px solid var(--border-glow);border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);z-index:var(--z-modal);display:flex;flex-direction:column;max-height:80vh;animation:slideUp var(--t-slow)}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.compose-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--grad-primary-soft);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--border)}.compose-head .title{font-weight:700}.compose-body{padding:var(--sp-3) var(--sp-4);overflow-y:auto;display:flex;flex-direction:column}.compose-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-soft);padding:8px 2px}.compose-row label{color:var(--muted);font-size:var(--fs-sm);width:52px}.compose-row input{flex:1;background:none;border:none;color:var(--text);font-size:var(--fs-base)}.compose-row input:focus{outline:none}.compose-area{flex:1;min-height:220px;background:none;border:none;color:var(--text);font-size:var(--fs-md);resize:none;padding:var(--sp-3) 2px;line-height:1.6}.compose-area:focus{outline:none}.compose-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}.attach-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 2px 8px}.autocomplete{position:relative;flex:1}.suggest-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-dropdown);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}.suggest-item{padding:9px 12px;cursor:pointer;display:flex;flex-direction:column}.suggest-item:hover,.suggest-item.active{background:var(--surface-hover)}.suggest-item .s-name{font-size:var(--fs-sm)}.suggest-item .s-mail{font-size:var(--fs-xs);color:var(--muted)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050510a8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:var(--z-overlay);padding:var(--sp-4);animation:fade var(--t-base)}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:520px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);animation:pop var(--t-slow)}@keyframes pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}.modal-body{padding:var(--sp-5)}.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border)}.menu{position:absolute;min-width:220px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px;z-index:var(--z-dropdown);animation:fade var(--t-fast)}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--r-sm);background:none;border:none;color:var(--text-soft);text-align:left;font-size:var(--fs-base)}.menu-item:hover{background:var(--surface-hover);color:var(--text)}.menu-item.danger{color:var(--danger)}.menu-sep{height:1px;background:var(--border);margin:6px 4px}.toasts{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;align-items:center}.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);animation:slideUp var(--t-base)}.toast.ok{border-color:#34d39980}.toast.err{border-color:#f43f5e80}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-sm);flex:none}.avatar-sm{width:30px;height:30px;font-size:var(--fs-xs)}.avatar-lg{width:56px;height:56px;font-size:var(--fs-lg)}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.center-spin{display:grid;place-items:center;height:100%}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:6px}@keyframes shimmer{to{background-position:-200% 0}}.settings{display:grid;grid-template-columns:220px 1fr;height:100%;min-height:0}.settings-nav{border-right:1px solid var(--border);padding:var(--sp-4);display:flex;flex-direction:column;gap:2px}.settings-main{overflow-y:auto;padding:var(--sp-6)}.settings-section{max-width:720px;margin:0 auto var(--sp-6)}.settings-section h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-2)}.settings-section .desc{color:var(--muted);margin-bottom:var(--sp-4)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border-soft)}.setting-row .label{font-weight:600}.setting-row .sub{color:var(--muted);font-size:var(--fs-sm)}.list-tile{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;background:var(--surface)}.switch{position:relative;width:46px;height:26px;flex:none}.switch input{opacity:0;width:0;height:0}.switch .track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--surface-3);border-radius:99px;transition:background var(--t-base);border:1px solid var(--border)}.switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--t-base)}.switch input:checked+.track{background:var(--grad-primary);border-color:transparent}.switch input:checked+.track+.thumb{transform:translate(20px)}.dns-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-top:var(--sp-3)}.dns-table th,.dns-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border-soft)}.dns-table th{color:var(--muted);font-weight:600}.dns-table code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:var(--fs-xs);word-break:break-all}.mobile-only{display:none}@media (max-width: 1100px){.mail-pane{grid-template-columns:1fr}.mail-pane .read-col,.mail-pane.show-reading .list-col{display:none}.mail-pane.show-reading .read-col{display:flex}}@media (max-width: 860px){.auth-shell{grid-template-columns:1fr}.auth-aside{display:none}.auth-card .brand{display:inline-flex;margin-bottom:var(--sp-5)}}@media (max-width: 760px){.app{grid-template-columns:1fr;grid-template-rows:60px 1fr;grid-template-areas:"topbar" "content"}.sidebar{position:fixed;inset:0 auto 0 0;width:280px;z-index:var(--z-modal);transform:translate(-100%);transition:transform var(--t-slow)}.sidebar.open{transform:translate(0);box-shadow:var(--shadow-lg)}.mobile-only{display:inline-flex}.settings{grid-template-columns:1fr}.settings-nav{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}.compose{right:0;left:0;width:100%;max-width:100%}body{font-size:16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}