:root{--bg:#f5f7fb;--panel:#fff;--panel2:#f0f3f9;--ink:#0f1b2d;--muted:#5d6b82;--line:#e1e6ef;--brand:#0b1f3a;--accent:#0ea5e9;--accent2:#22d3ee;--accent-ink:#fff;--sel:#e0f2fe;--unread:#0369a1;--danger:#dc2626;--star:#f59e0b;--shadow:0 10px 30px rgba(15,27,45,.18);--r:10px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#08111f;--panel:#0d1a2e;--panel2:#12233b;--ink:#e7eefb;--muted:#8fa2c0;--line:#1c2f4d;--sel:#12324f;--unread:#67d4ff;--shadow:0 10px 30px rgba(0,0,0,.5)}}
:root[data-theme=dark]{--bg:#08111f;--panel:#0d1a2e;--panel2:#12233b;--ink:#e7eefb;--muted:#8fa2c0;--line:#1c2f4d;--sel:#12324f;--unread:#67d4ff;--shadow:0 10px 30px rgba(0,0,0,.5)}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
.hidden{display:none!important}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 13px;display:inline-flex;gap:6px;align-items:center}
.btn:hover{background:var(--panel2)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#2563eb);color:var(--accent-ink);border:0;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn[disabled]{opacity:.5;cursor:default}
.icon{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 10px}
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.muted{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:100;max-width:90vw}
.toast.err{background:var(--danger)}

/* auth */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(1000px 500px at 20% -10%,#13417a55,transparent),var(--bg)}
.auth .card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}
.logo i{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:var(--accent2);font-style:normal}

/* layout */
.shell{display:grid;grid-template-columns:260px minmax(300px,400px) 1fr;grid-template-rows:56px 1fr;height:100dvh}
.top{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--brand);color:#fff}
.top .search{flex:1;max-width:620px}
.top .search input{background:#ffffff1f;border:1px solid #ffffff2e;color:#fff;border-radius:999px;padding:8px 16px}
.top .search input::placeholder{color:#cfe3ff}
.top .btn.ghost{color:#fff}.top .btn.ghost:hover{background:#ffffff22}
.side{background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:12px 8px}
.side .compose{width:100%;justify-content:center;padding:11px;margin-bottom:10px}
.acct{margin:8px 0}
.acct-h{display:flex;align-items:center;gap:6px;padding:6px 10px;font-weight:600;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.acct-h .err{color:var(--danger)}
.fld{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;user-select:none}
.fld:hover{background:var(--panel2)}.fld.on{background:var(--sel);font-weight:600}
.fld .n{margin-left:auto;font-size:12px;font-weight:700;color:var(--unread)}
.list{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.list-h{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);min-height:52px}
.list-h h2{font-size:16px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows{overflow:auto;flex:1}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:1px 12px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.row:hover{background:var(--panel2)}.row.on{background:var(--sel)}
.row .from{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .subj{grid-column:2/-1;grid-row:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.row .date{font-size:12px;color:var(--muted)}
.row.unread .from,.row.unread .subj{font-weight:700;color:var(--ink)}
.row.unread .from::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px}
.star{background:none;border:0;font-size:18px;color:var(--muted);padding:0}.star.on{color:var(--star)}
.more{padding:12px;text-align:center}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.read{background:var(--panel);overflow:auto;min-width:0}
.read-h{padding:16px 20px;border-bottom:1px solid var(--line)}
.read-h h1{font-size:20px;margin:0 0 8px;word-break:break-word}
.meta{font-size:13px;color:var(--muted);word-break:break-word}.meta b{color:var(--ink)}
.actions{display:flex;gap:6px;flex-wrap:wrap;padding:8px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.banner{margin:12px 20px 0;padding:8px 12px;border-radius:8px;background:var(--panel2);font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.body{padding:12px 20px 40px}
.body iframe{width:100%;border:0;background:#fff;border-radius:6px;min-height:120px;display:block}
.body pre{white-space:pre-wrap;word-break:break-word;font:inherit}
.atts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 20px 0}
.att{border:1px solid var(--line);border-radius:8px;padding:6px 10px;text-decoration:none;color:var(--ink);font-size:13px;display:flex;gap:6px;align-items:center}
.att:hover{background:var(--panel2)}
.noread{display:grid;place-items:center;height:100%;color:var(--muted)}

/* modals */
.scrim{position:fixed;inset:0;background:#0008;display:grid;place-items:center;z-index:50;padding:12px}
.modal{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);width:min(640px,100%);max-height:94dvh;display:flex;flex-direction:column;overflow:hidden}
.modal.wide{width:min(860px,100%)}
.modal-h{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;gap:8px}
.modal-h span{flex:1}
.modal-b{padding:6px 16px 16px;overflow:auto}
.modal-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cwin{position:fixed;right:20px;bottom:0;width:min(640px,100vw);z-index:40}
.cf{display:grid;grid-template-columns:60px 1fr auto;align-items:center;border-bottom:1px solid var(--line)}
.cf input{border:0;border-radius:0;background:transparent}
.cf span{color:var(--muted);font-size:13px;padding-left:4px}
.ed{min-height:220px;max-height:50dvh;overflow:auto;padding:12px 4px;outline:none}
.tb{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:4px 0}
.tb button{border:0;background:none;padding:4px 9px;border-radius:6px}.tb button:hover{background:var(--panel2)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px;margin:2px}
.chip button{border:0;background:none;padding:0;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 12px}
.tabs button{border:0;background:none;padding:10px 12px;border-bottom:2px solid transparent;color:var(--muted)}.tabs button.on{border-color:var(--accent);color:var(--ink);font-weight:600}
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.item>div:first-child{flex:1;min-width:0}
.mobnav{display:none}

/* responsive: one pane at a time on phones */
@media(max-width:1000px){.shell{grid-template-columns:230px 1fr}.read{position:fixed;inset:56px 0 0 0;z-index:20;transform:translateX(100%);transition:transform .2s}.shell.reading .read{transform:none}}
@media(max-width:700px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:56px 0 0 0;width:min(300px,86vw);z-index:30;transform:translateX(-102%);transition:transform .2s}
  .shell.menu .side{transform:none;box-shadow:var(--shadow)}
  .mobnav{display:inline-flex}
  .cwin{right:0;width:100vw;height:100dvh}.cwin .modal{height:100%;max-height:100dvh;border-radius:0}
  .grid2{grid-template-columns:1fr}
  .top .name{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== motion ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1)}
body,.side,.list,.read,.row,.modal,.btn,input,select,textarea{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideRow{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.6) rotate(-12deg)}100%{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #0ea5e9aa}70%{box-shadow:0 0 0 7px #0ea5e900}100%{box-shadow:0 0 0 0 #0ea5e900}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes flash{0%{background:#22d3ee55}100%{background:transparent}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,16px) scale(.96)}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes dock{from{transform:translateY(105%)}to{transform:none}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes badge{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

.auth{position:relative;overflow:hidden}
.auth::before,.auth::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(70px);opacity:.35;animation:blob 14s ease-in-out infinite;pointer-events:none}
.auth::before{background:#0ea5e9;top:-120px;left:-100px}.auth::after{background:#22d3ee;bottom:-140px;right:-80px;animation-delay:-7s}
.auth .card{position:relative;z-index:1;animation:fadeUp .7s var(--ease) both}
.auth .card.shake{animation:shake .45s ease}
.auth .card>*{animation:fadeUp .6s var(--ease) both}
.auth .card>:nth-child(1){animation-delay:.08s}.auth .card>:nth-child(2){animation-delay:.16s}.auth .card>:nth-child(3){animation-delay:.24s}.auth .card>:nth-child(4){animation-delay:.32s}.auth .card>:nth-child(5){animation-delay:.4s}
.logo i{animation:floaty 3.2s ease-in-out infinite}

.shell{animation:fadeIn .5s ease both}
.top{animation:fadeUp .5s var(--ease) both}
.side{animation:slideRow .55s var(--ease) .05s both}
.list{animation:fadeUp .55s var(--ease) .1s both}
.fld{transition:background-color .2s,transform .25s var(--ease),padding .25s var(--ease)}
.fld:hover{transform:translateX(4px)}
.fld .n{animation:badge .5s var(--spring)}
.fld span:first-child{transition:transform .3s var(--spring)}.fld:hover span:first-child{transform:scale(1.25) rotate(-6deg)}
.acct>*{animation:slideRow .45s var(--ease) both}.acct>:nth-child(2){animation-delay:.05s}.acct>:nth-child(3){animation-delay:.1s}.acct>:nth-child(4){animation-delay:.15s}.acct>:nth-child(5){animation-delay:.2s}.acct>:nth-child(6){animation-delay:.25s}.acct>:nth-child(7){animation-delay:.3s}

.btn{transition:background-color .2s,transform .18s var(--ease),box-shadow .25s,filter .2s}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn:active:not([disabled]){transform:translateY(1px) scale(.96)}
.btn.primary:hover{box-shadow:0 8px 22px #0ea5e955}
.btn.primary.compose{background-size:200% 100%;transition:background-position .6s,transform .18s var(--ease),box-shadow .25s}
.btn.primary.compose:hover{background-position:100% 0}
.btn.spin{animation:spin .8s linear infinite}
.btn.icon:hover{transform:rotate(12deg) scale(1.08)}
.top .btn.icon:hover{transform:scale(1.15)}

.row{transition:background-color .2s,transform .25s var(--ease),box-shadow .25s;position:relative}
.row.enter{animation:slideRow .5s var(--ease) both;animation-delay:calc(var(--i,0)*38ms)}
.row.fresh{animation:slideRow .5s var(--ease) both,flash 2.4s ease .4s both}
.row:hover{transform:translateX(3px);box-shadow:inset 3px 0 0 var(--accent)}
.row.on{box-shadow:inset 3px 0 0 var(--accent)}
.row.leaving{animation:none;transition:all .28s var(--ease);opacity:0;transform:translateX(60px);max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.row.unread .from::before{animation:pulse 2.2s ease-out infinite}
.star{transition:color .25s,transform .25s var(--spring)}.star:hover{transform:scale(1.3)}
.star.pop{animation:pop .5s var(--spring)}
.list-h h2{animation:fadeIn .4s ease both}
.skel{height:64px;margin:0;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent 0,var(--panel2) 40%,transparent 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.empty{animation:fadeUp .5s var(--ease) both}.empty b{display:block;font-size:34px;animation:floaty 3s ease-in-out infinite}

.read-in>*{animation:slideIn .45s var(--ease) both}
.read-in>:nth-child(2){animation-delay:.05s}.read-in>:nth-child(3){animation-delay:.1s}.read-in>:nth-child(4){animation-delay:.15s}.read-in>:nth-child(5){animation-delay:.2s}.read-in>:nth-child(6){animation-delay:.25s}
.noread{animation:fadeIn .6s ease both}.noread span{display:block;font-size:56px;text-align:center;animation:floaty 3.5s ease-in-out infinite}
.att{transition:transform .2s var(--ease),background-color .2s,box-shadow .2s}.att:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0002}
.banner{animation:fadeUp .5s var(--ease) both}
.loader{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-4px;margin-right:8px}

.scrim{animation:fadeIn .2s ease both;backdrop-filter:blur(3px)}
.scrim .modal{animation:popIn .35s var(--spring) both}
.scrim.closing{animation:fadeIn .16s ease reverse both}.scrim.closing .modal{animation:popOut .16s ease both}
.cwin{animation:dock .45s var(--ease) both}.cwin.closing{animation:dock .25s ease reverse both}
.tabs button{transition:color .2s,border-color .25s}
.item{animation:slideRow .4s var(--ease) both}
.chip{animation:popIn .3s var(--spring) both}
.toast{animation:toastIn .4s var(--spring) both}.toast.out{animation:toastOut .3s ease both}
.fldr-new{animation:fadeUp .4s var(--ease) both}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ===== icons, avatars, interaction ===== */
.ic{flex:none;vertical-align:middle;pointer-events:none}
.ic.fill,.star.on .ic{fill:currentColor}
.ic.turn{animation:turn .55s var(--spring)}
@keyframes turn{from{transform:rotate(-200deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
.btn{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.btn.starred{color:var(--star);border-color:var(--star)}
kbd{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 8px;white-space:nowrap}

.top{background:linear-gradient(100deg,#0b1f3a 0%,#0e2a4e 55%,#0b3558 100%);box-shadow:0 2px 14px #0b1f3a55;position:relative;z-index:5}
.top .logo.name{font-size:17px;gap:9px;white-space:nowrap}
.top .logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#22d3ee33,#0ea5e933);border:1px solid #22d3ee55}
.top .search{position:relative;flex:1;max-width:620px;transition:max-width .35s var(--ease)}
.top .search:focus-within{max-width:760px}
.top .search input{padding-left:40px;transition:background-color .25s,box-shadow .3s,border-color .25s}
.top .search input:focus{background:#ffffff2e;border-color:#22d3ee;box-shadow:0 0 0 4px #22d3ee22;outline:none}
.search-ic{position:absolute;left:14px;top:50%;translate:0 -50%;color:#cfe3ff;display:grid}
.top .search:focus-within .search-ic{color:#22d3ee}
.top .icon{color:#e8f1ff}

.side .compose{box-shadow:0 8px 20px #0ea5e944}
.fld{position:relative;gap:12px}
.fld::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:3px;background:linear-gradient(var(--accent2),var(--accent));transform:scaleY(0);transition:transform .3s var(--spring)}
.fld.on::before{transform:scaleY(1)}
.fld.on .ic{color:var(--accent)}
.fld .n{background:var(--sel);padding:1px 9px;border-radius:99px;font-size:12px}
.fld.drop{background:var(--sel);outline:2px dashed var(--accent);outline-offset:-2px;transform:scale(1.03)}
.fld.muted .ic{opacity:.7}
body.dragging-mail .fld{outline:1px dashed var(--line);outline-offset:-1px}
.row[draggable=true]{cursor:grab}
.row.dragging{opacity:.4;transform:scale(.97)}

.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 72% 52%),hsl(calc(var(--h) + 40) 70% 40%));letter-spacing:.02em;transition:transform .3s var(--spring),opacity .2s;user-select:none}
.avatar.lg{width:46px;height:46px;font-size:16px}
.row .lead{position:relative;grid-row:1/3;width:40px;height:40px}
.row .lead input{position:absolute;inset:0;margin:auto;width:20px;height:20px;opacity:0;cursor:pointer;accent-color:var(--accent);transition:opacity .15s}
.row:hover .lead .avatar,.row.picked .lead .avatar{opacity:0;transform:scale(.6)}
.row:hover .lead input,.row.picked .lead input,.lead input:focus-visible{opacity:1}
.row .from{grid-column:2;grid-row:1;align-self:end}
.meta-r{grid-column:3;grid-row:1;display:flex;align-items:center;gap:6px;color:var(--muted);align-self:end}
.row.picked{background:var(--sel)}
.quick{position:absolute;right:44px;top:4px;display:flex;gap:2px;opacity:0;pointer-events:none;transform:translateX(10px);transition:opacity .2s,transform .25s var(--ease);}
.quick .btn{width:32px;height:32px;background:transparent}
.quick .btn.danger:hover{background:#dc262622}
@media(hover:hover){.row:hover .quick,.row:focus-within .quick{opacity:1;pointer-events:auto;transform:none}.row:hover .meta-r .date,.row:hover .meta-r>.ic{opacity:0}}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sender{display:flex;gap:12px;align-items:center}.sender-t{min-width:0}
.read-h h1{letter-spacing:-.01em}
.actions .btn{padding:7px 12px}
.banner .ic{color:var(--accent)}
.att .ic{color:var(--accent)}
.empty b .ic,.noread span .ic{color:var(--accent);opacity:.75}
.list-h{backdrop-filter:blur(8px)}
.search-hint{color:#cfe3ff}
.tb button{display:grid;place-items:center;width:32px;height:30px;padding:0}
.chip .ic{opacity:.7}
.chip button:hover .ic{opacity:1;color:var(--danger)}
.modal-h .icon:hover{transform:rotate(90deg)}
.btn.icon .ic{transition:transform .3s var(--spring)}
.btn.icon:hover .ic{transform:scale(1.12)}
.theme-btn{overflow:visible}
.meta-r .date,.meta-r>.ic{transition:opacity .2s}