:root{
  --bg:#f3f2ef;--surf:#ffffff;--raise:#ecebe7;--line:#dcdad4;--tx:#1b1b1a;--mut:#6c6b66;
  --or:#e07b00;--or-soft:rgba(224,123,0,.12);--red:#d63a37;--red-soft:rgba(214,58,55,.1);
  --grn:#238a5b;--tl:#16897a;--blu:#2f6fd0;--pu:#7a55c7;
  --wa:#dcf8c6;--wa-tx:#14301c;--wa-bg:#e8e2d6;
  --head:'Bricolage Grotesque','IBM Plex Sans','Segoe UI',system-ui,sans-serif;--body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151515;--surf:#1e1e1e;--raise:#282828;--line:#333331;--tx:#f2f1ee;--mut:#9d9c97;
    --or:#f58b13;--or-soft:rgba(245,139,19,.15);--red:#ef5350;--red-soft:rgba(239,83,80,.14);
    --grn:#43b581;--tl:#3fb8a5;--blu:#6ea8fe;--pu:#b79cf0;
    --wa:#0f5c46;--wa-tx:#e9f5ee;--wa-bg:#1a1f1d;
  }
}
:root[data-theme="dark"]{
  --bg:#151515;--surf:#1e1e1e;--raise:#282828;--line:#333331;--tx:#f2f1ee;--mut:#9d9c97;
  --or:#f58b13;--or-soft:rgba(245,139,19,.15);--red:#ef5350;--red-soft:rgba(239,83,80,.14);
  --grn:#43b581;--tl:#3fb8a5;--blu:#6ea8fe;--pu:#b79cf0;
  --wa:#0f5c46;--wa-tx:#e9f5ee;--wa-bg:#1a1f1d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
h1,h2,h3{font-family:var(--head);margin:0;letter-spacing:-.01em}
h1{font-size:30px;line-height:1.15}
h2{font-size:19px}
h3{font-size:16px}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;height:100dvh;overflow:auto;padding:22px 14px;border-right:1px solid var(--line);background:var(--surf);display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand img{width:34px;height:34px}
.brand b{font:700 18px var(--head)}
.brand small{display:block;color:var(--mut);font-size:12px;line-height:1.2}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:11px;border:0;background:none;text-align:left;padding:9px 10px;border-radius:10px;color:var(--mut);font-weight:500;position:relative}
.nav button:hover{background:var(--raise);color:var(--tx)}
.nav button.on{background:var(--or-soft);color:var(--tx)}
.nav button.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--or)}
.nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav .ct{margin-left:auto;font-size:12px;background:var(--raise);padding:1px 8px;border-radius:99px;color:var(--mut)}
.nav .ct.hot{background:var(--red);color:#fff}
.srcs{display:flex;flex-direction:column;gap:8px;padding:0 8px}
.srcs .ttl{font-size:12px;color:var(--mut)}
.ln{display:flex;align-items:center;gap:9px;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--grn);flex:none}
.dot.pair{background:var(--or)}
.main{padding:28px clamp(16px,3vw,40px) 60px;min-width:0;max-width:1320px;width:100%}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.top p{margin:6px 0 0;color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surf);padding:8px 14px;border-radius:10px;font-weight:500}
.btn:hover{background:var(--raise)}
.btn.pri{background:var(--or);border-color:var(--or);color:#1a1000;font-weight:600}
.btn.pri:hover{filter:brightness(1.07)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.ghost{border-color:transparent;background:none;color:var(--mut)}
.btn.ghost:hover{color:var(--tx);background:var(--raise)}
.btn.danger:hover{color:var(--red)}
.lnk{border:0;background:none;color:var(--or);padding:0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
input[type=text],input[type=time],input[type=date],input[type=search],select,textarea{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0}
textarea{width:100%;resize:vertical;min-height:110px;line-height:1.55}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mut)}
label.f input,label.f select{color:var(--tx)}
.seg{display:inline-flex;background:var(--raise);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:8px;color:var(--mut);font-size:14px}
.seg button.on{background:var(--surf);color:var(--tx);font-weight:600}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;background:var(--surf);margin-bottom:22px}
.strip>div{padding:18px 20px;border-right:1px solid var(--line)}
.strip>div:last-child{border:0}
.strip b{display:block;font:700 34px/1.1 var(--head)}
.strip span{color:var(--mut);font-size:14px}
.strip .hot b{color:var(--red)}
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.panel{border:1px solid var(--line);background:var(--surf);border-radius:16px;padding:18px 18px 8px}
.panel>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.panel>header span{color:var(--mut);font-size:13px}
.stack{display:flex;flex-direction:column;gap:20px}
.lc{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:1px 9px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.lc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d,var(--or))}
.dom{font-size:12px;color:var(--mut);padding:1px 8px;border-radius:6px;background:var(--raise)}
.pri-tag{font-size:12px;padding:2px 9px;border-radius:99px;font-weight:600;white-space:nowrap}
.pri-urgent{background:var(--red-soft);color:var(--red)}
.pri-high{background:var(--or-soft);color:var(--or)}
.pri-normal{background:var(--raise);color:var(--mut)}
.item{padding:14px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.item .hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.item .hd b{color:var(--tx);font-weight:600}
.item p{margin:6px 0 0}
.ai{margin-top:10px;background:var(--or-soft);border-radius:10px;padding:9px 12px;font-size:14px;display:flex;gap:9px}
.ai svg{width:16px;height:16px;flex:none;margin-top:3px;fill:var(--or)}
.ai.red{background:var(--red-soft)}
.ai.red svg{fill:var(--red)}
.acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.cls{font-size:12px;padding:2px 9px;border-radius:99px;font-weight:600;white-space:nowrap}
.cls-urgent{background:var(--red-soft);color:var(--red)}
.cls-task{background:var(--or-soft);color:var(--or)}
.cls-question{background:rgba(110,168,254,.16);color:var(--blu)}
.cls-fyi{background:var(--raise);color:var(--mut)}
.cls-noise{background:none;color:var(--mut);border:1px dashed var(--line)}
.trow{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.trow:first-of-type{border-top:0}
.trow.done .ttl{text-decoration:line-through;color:var(--mut)}
.ttl{font-weight:500}
.tmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-top:3px}
.chk{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--mut);background:none;display:grid;place-items:center;padding:0}
.chk svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3}
.done .chk{background:var(--grn);border-color:var(--grn)}
.due{font-size:13px;color:var(--mut);white-space:nowrap}
.due-overdue{color:var(--red);font-weight:600}
.due-today{color:var(--or);font-weight:600}
.grp{font:600 13px var(--body);color:var(--mut);margin:20px 0 4px}
.grp:first-child{margin-top:0}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.col{background:var(--raise);border-radius:16px;padding:12px;min-height:200px}
.col h3{padding:4px 6px 10px;display:flex;justify-content:space-between}
.col h3 span{color:var(--mut);font:500 14px var(--body)}
.card{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.card .ttl{font-size:14px}
.card .tmeta{margin:6px 0 10px}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:500;color:var(--mut);font-size:13px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .gn{font-weight:600}
.scroll{overflow-x:auto}
.sw{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);gap:12px}
.sw:first-of-type{border:0}
.sw small{display:block;color:var(--mut)}
input[type=checkbox]{width:40px;height:22px;appearance:none;background:var(--raise);border:1px solid var(--line);border-radius:99px;position:relative;cursor:pointer;flex:none}
input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--mut);transition:transform .15s,background .15s}
input[type=checkbox]:checked{background:var(--or-soft);border-color:var(--or)}
input[type=checkbox]:checked::after{transform:translateX(18px);background:var(--or)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lcard{border:1px solid var(--line);background:var(--surf);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.lcard .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lcard small{color:var(--mut)}
.empty{padding:30px 10px;text-align:center;color:var(--mut)}
/* inbox */
.mail{display:grid;grid-template-columns:minmax(290px,390px) minmax(0,1fr);gap:16px;align-items:start}
.mlist{border:1px solid var(--line);background:var(--surf);border-radius:16px;overflow:hidden}
.mi{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 14px 12px 20px;position:relative}
.mi:last-child{border-bottom:0}
.mi:hover{background:var(--raise)}
.mi.sel{background:var(--or-soft)}
.mi .l1{display:flex;gap:8px;align-items:center;justify-content:space-between}
.mi .fr{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mi .tm{font-size:12px;color:var(--mut);white-space:nowrap}
.mi.unread .fr{font-weight:700}
.mi.unread::before{content:"";position:absolute;left:8px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--or)}
.mi .l2{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi .l3{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap}
.pane{border:1px solid var(--line);background:var(--surf);border-radius:16px;padding:22px}
.pane h2{font-size:22px;margin:10px 0 4px}
.pane .body{white-space:pre-wrap;margin:14px 0;max-width:68ch}
.pane .meta{color:var(--mut);font-size:14px}
.att{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:13px;margin-right:6px}
.linked{margin-top:14px;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.linked .row{margin-top:6px}
.reply{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
/* calendar */
.calw{border:1px solid var(--line);background:var(--surf);border-radius:16px;overflow-x:auto}
.cali{min-width:780px}
.calh,.calb{display:grid;grid-template-columns:48px repeat(7,minmax(0,1fr))}
.calh>div{padding:8px 6px;text-align:center;border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)}
.calh b{display:block;font:600 17px var(--head);color:var(--tx)}
.calh .today b{color:#1a1000;background:var(--or);border-radius:50%;width:30px;height:30px;line-height:30px;margin:2px auto}
.gut div{height:46px;font-size:11px;color:var(--mut);text-align:right;padding-right:6px;transform:translateY(-7px)}
.dc{position:relative;border-left:1px solid var(--line);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,var(--line) 45px,var(--line) 46px)}
.dc.today{background-color:var(--or-soft)}
.ev{position:absolute;border-radius:8px;padding:3px 6px;font-size:12px;line-height:1.25;overflow:hidden;text-align:left;border:0;border-left:3px solid var(--ec);background:color-mix(in srgb,var(--ec) 18%,var(--surf));color:var(--tx)}
.ev b{display:block;font-weight:600}
.ev.pend{border:1.5px dashed var(--ec);background:var(--surf)}
.nowl{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:2}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin:12px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;background:var(--ec)}
.agenda{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:center}
.agenda:first-of-type{border:0}
.agenda.past{opacity:.5}
.agenda .tm{color:var(--mut);font-size:14px}
.nowtag{font-size:12px;color:var(--red);font-weight:600;padding:6px 0;border-top:2px solid var(--red)}
/* notes */
.notes{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:16px;align-items:start}
.nl button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 14px}
.nl button:last-child{border:0}
.nl button.sel{background:var(--or-soft)}
.nl button:hover{background:var(--raise)}
.nl b{display:block;font-weight:600}
.nl small{color:var(--mut)}
.ned input.nt{width:100%;font:700 22px var(--head);border:0;padding:0 0 8px;background:none}
.ned textarea{min-height:300px;border:0;padding:12px 0;background:none;font-size:15px}
/* briefing */
.phone{background:var(--wa-bg);border:1px solid var(--line);border-radius:26px;padding:14px;max-width:430px}
.phone .bar2{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.phone .bar2 img{width:30px;height:30px;background:#000;border-radius:50%;padding:5px}
.phone .bar2 b{display:block;line-height:1.1}
.phone .bar2 small{color:var(--mut)}
.bub{background:var(--wa);color:var(--wa-tx);border-radius:14px 14px 4px 14px;padding:10px 12px;font-size:14px;line-height:1.5;margin-left:14px;word-wrap:break-word}
.bub .tm{display:block;text-align:right;font-size:11px;opacity:.7;margin-top:4px}
.tick{color:var(--blu);letter-spacing:-3px}
.mailprev{border:1px solid var(--line);border-radius:16px;background:var(--surf);padding:20px;max-width:560px}
.mailprev h3{margin:14px 0 4px}
.mailprev ul{margin:0;padding-left:20px;color:var(--tx)}
.mailprev li{margin:3px 0}

.dchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dchips>button{border:1px solid var(--line);background:var(--surf);border-radius:8px;padding:4px 10px;font-size:13px;color:var(--mut)}
.dchips>button.on{background:var(--or-soft);border-color:var(--or);color:var(--tx);font-weight:600}
.dchips>button:hover{color:var(--tx)}
.tch{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:3px 6px 3px 10px;font-size:13px}
.tch button{border:0;background:none;color:var(--mut);padding:0 3px;font-size:16px;line-height:1}
.tch button:hover{color:var(--red)}
.sched{padding-bottom:6px}
.sched.off{opacity:.55}
.sched .lbl{font-size:13px;color:var(--mut);margin:12px 0 6px}
.wk td{font-size:13px;vertical-align:top}
.wk td span{display:block}
.wk em{color:var(--mut);font-style:normal}
.wk .tod{background:var(--or-soft)}
.code{font:700 30px var(--head);letter-spacing:.16em;background:var(--raise);border-radius:12px;padding:12px;text-align:center;margin:8px 0}
.steps{padding-left:20px;line-height:1.7}
.steps a{color:var(--or)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:start center;z-index:50;padding:clamp(16px,8vh,70px) 16px 16px}
.modal>div{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:22px;max-width:560px;width:100%;max-height:84vh;overflow:auto}
.modal.c>div{text-align:center;max-width:360px}
.modal.c{place-items:center}
.modal svg.qr{width:220px;height:220px;background:#fff;padding:10px;border-radius:12px;margin:14px auto;display:block}
.sres button{display:flex;width:100%;gap:10px;align-items:center;text-align:left;border:0;background:none;padding:9px 8px;border-radius:10px}
.sres button:hover{background:var(--raise)}
.sres .ty{font-size:12px;color:var(--mut);width:64px;flex:none}
.sres small{color:var(--mut);display:block}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:10px 18px;border-radius:12px;z-index:70;font-weight:500;max-width:90vw}
@media (max-width:1080px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip>div:nth-child(2){border-right:0}
  .strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cols,.grid3,.board,.mail,.notes{grid-template-columns:1fr}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{flex-direction:row;align-items:center;gap:8px;padding:10px;height:auto;max-height:none;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);z-index:5}
  .brand small,.srcs{display:none}
  .nav{flex-direction:row;gap:4px}
  .nav button{white-space:nowrap;padding:8px 12px}
  .nav button.on::before{display:none}
  .trow{grid-template-columns:26px minmax(0,1fr)}
  .trow .pri-tag,.trow .due{grid-column:2;justify-self:start}
  .grid2{grid-template-columns:1fr}
  .agenda{grid-template-columns:84px minmax(0,1fr)}
  .agenda>:last-child{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- added for the live app ---- */
.userbox{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:8px}
.userbox b{color:var(--tx);font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis}
.side{justify-content:flex-start}
.err{color:var(--red);font-size:14px;min-height:20px;margin-top:8px}
.okmsg{color:var(--grn);font-size:14px}
.hint{color:var(--mut);font-size:13px;margin:6px 0 0}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label,.f-l{font-size:13px;color:var(--mut)}
.field input,.field select,.field textarea{width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.mono{font-family:var(--mono);font-size:13px}
.copy{display:flex;gap:8px;align-items:center}
.copy code{flex:1;background:var(--raise);border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:13px;overflow-x:auto;white-space:nowrap}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--or);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.qrimg{display:block;margin:12px auto;width:260px;height:260px;background:#fff;border-radius:12px;padding:6px}
.badge{font-size:12px;padding:1px 8px;border-radius:99px;background:var(--raise);color:var(--mut)}
.badge.ok{background:rgba(35,138,91,.14);color:var(--grn)}
.badge.warn{background:var(--or-soft);color:var(--or)}
.badge.bad{background:var(--red-soft);color:var(--red)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:8px 14px;color:var(--mut);border-bottom:2px solid transparent;font-weight:500}
.tabs button.on{color:var(--tx);border-bottom-color:var(--or)}
.allday{font-size:11px;border-radius:6px;padding:1px 6px;margin-top:3px;background:color-mix(in srgb,var(--ec) 18%,var(--surf));border-left:3px solid var(--ec);text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.muted{color:var(--mut)}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{width:100%;max-width:400px;background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:30px}
.login img{width:44px;height:44px;margin-bottom:12px}
.login h1{font-size:26px}
.login .btn{width:100%;justify-content:center;text-align:center;display:block;text-decoration:none}
.login .sep{text-align:center;color:var(--mut);margin:14px 0}
.sticky-actions{position:sticky;bottom:0;background:var(--surf);padding-top:8px}
@media (max-width:640px){.row2,.row3{grid-template-columns:1fr}}

/* ---- Gmail-style inbox ---- */
.main.fill{max-width:none;padding:14px 16px 0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.ibx{flex:1;min-height:0;display:flex;flex-direction:column}
.ibx-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ibx-head h1{font-size:22px}
.ibx-head input[type=search]{flex:1;min-width:200px;max-width:560px}
.itabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;flex:none}
.itabs button{border:0;background:none;padding:8px 14px;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500}
.itabs button:hover{color:var(--tx)}
.itabs button.on{color:var(--tx);border-bottom-color:var(--or);font-weight:600}
.itabs .n{margin-left:6px;font-size:12px;background:var(--raise);padding:0 7px;border-radius:99px;color:var(--mut)}
.itabs .n.hot{background:var(--red);color:#fff}
.itools{display:flex;align-items:center;gap:8px;padding:6px 4px;flex-wrap:wrap;min-height:46px;flex:none}
.itools .grow,.ptool .grow{flex:1}
.itools select{padding:5px 10px}
.toggle{border:1px solid var(--line);background:var(--surf);border-radius:99px;padding:4px 12px;font-size:13px;color:var(--mut)}
.toggle[aria-pressed=true]{background:var(--or-soft);border-color:var(--or);color:var(--tx);font-weight:600}
.iconbtn{border:0;background:none;width:32px;height:32px;border-radius:8px;display:inline-grid;place-items:center;color:var(--mut);padding:0}
.iconbtn:hover{background:var(--raise);color:var(--tx)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mail.fill{flex:1;min-height:0;margin-bottom:12px;display:grid;grid-template-columns:minmax(420px,54%) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surf);overflow:hidden;align-items:stretch}
.mail.fill>*{min-height:0;min-width:0}
.mlist{overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;border-right:1px solid var(--line);background:var(--surf)}
input.rc{width:16px;height:16px;border-radius:4px;background:var(--surf);border:1.5px solid var(--mut);padding:0;margin:0}
input.rc::after{display:none}
input.rc:checked{background:var(--or);border-color:var(--or)}
input.rc:checked::before{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #1a1000;border-width:0 2px 2px 0;transform:rotate(45deg)}
input.rc:indeterminate{background:var(--or-soft);border-color:var(--or)}
.mr{display:grid;grid-template-columns:22px 26px minmax(90px,150px) minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:0 12px 0 10px;min-height:42px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;background:color-mix(in srgb,var(--raise) 55%,var(--surf))}
.mr:hover{background:var(--raise)}
.mr.unread{background:var(--surf)}
.mr.unread:hover{background:var(--raise)}
.mr.sel{background:var(--or-soft)}
.mr.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--or)}
.mr .who,.mr .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr .sub{color:var(--mut)}
.mr .sub b{color:var(--tx);font-weight:500}
.mr.unread .who,.mr.unread .sub b{font-weight:700}
.mr:not(.unread) .who{color:var(--mut)}
.mr .when{font-size:12px;color:var(--mut);white-space:nowrap;min-width:52px;text-align:right}
.mr.unread .when{color:var(--tx);font-weight:600}
.mr .tags{display:flex;gap:4px;align-items:center}
.mr .tags .cls,.mr .tags .dom{font-size:11px;padding:0 7px}
.mr .hov{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--raise);border-radius:8px;box-shadow:0 0 0 6px var(--raise)}
.mr:hover .hov,.mr:focus-within .hov{display:flex}
.mr:hover .when,.mr:hover .tags{visibility:hidden}
.st{border:0;background:none;padding:0;width:26px;height:26px;display:grid;place-items:center;color:var(--mut);border-radius:6px}
.st:hover{color:var(--or)}
.st.on{color:var(--or)}
.st.on .ico{fill:var(--or)}
.chdot{width:8px;height:8px;border-radius:50%;background:var(--d,var(--or));display:inline-block;margin-right:6px;flex:none}
.mfoot{padding:14px;text-align:center;color:var(--mut);font-size:13px}
.pane-wrap{display:flex;flex-direction:column;overflow:hidden}
.ptool{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.pane-scroll{overflow-y:auto;flex:1;min-height:0;padding:6px 24px 28px;overscroll-behavior:contain}
.pane-empty{margin:auto;text-align:center;color:var(--mut);padding:30px}
.pane-empty .ico{width:44px;height:44px;opacity:.5;margin-bottom:8px}
.pane-scroll h2{font-size:22px;margin:12px 0 4px;line-height:1.25}
.pane-scroll .body{white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0;max-width:72ch}
.fmt{margin-top:12px;text-align:right}
iframe.mailframe{width:100%;border:0;background:#fff;border-radius:10px;display:block;min-height:140px;margin-top:6px}
.back{display:none}
.kbd{font:12px var(--mono);background:var(--raise);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.toast .tbtn{margin-left:12px;background:none;border:0;color:inherit;text-decoration:underline;font-weight:600;padding:0}
@media (max-width:1080px){
  .mail.fill{grid-template-columns:1fr}
  .mail.fill:not(.reading) .pane-wrap{display:none}
  .mail.fill.reading .mlist{display:none}
  .back{display:inline-flex}
  .mr{grid-template-columns:22px 26px minmax(0,1fr) auto;row-gap:0;padding:8px 10px;min-height:56px}
  .mr .who{grid-column:3;grid-row:1}
  .mr .when{grid-column:4;grid-row:1}
  .mr .sub{grid-column:3 / 5;grid-row:2}
  .mr .tags,.mr .hov{display:none!important}
  .mr .rc{grid-row:1 / 3}.mr .st{grid-row:1 / 3}
}
@media (max-width:860px){
  .main.fill{height:calc(100dvh - 58px);padding:10px 10px 0}
  .pane-scroll{padding:6px 14px 24px}
}

a.btn{color:inherit}
label.f textarea{color:var(--tx)}
.btn.starbtn.on{background:var(--or-soft);border-color:var(--or);color:var(--tx)}
.btn.starbtn.on .ico{fill:var(--or);stroke:var(--or)}
.btn .ico{width:16px;height:16px;vertical-align:-3px;margin-right:2px}

.mr .tags .dom{display:none}

@media (max-width:860px){
  .side{padding:8px 10px;gap:10px;align-items:center}
  .brand{flex:none}.brand b{white-space:nowrap}
  .brand div{display:none}
  .userbox{margin:0 0 0 auto;border:0;padding:0;flex-direction:row;gap:6px;flex:none}
  .userbox>div:first-child{display:none}
}
@media (max-width:1080px){
  .ibx.reading .ibx-head,.ibx.reading #ibx-top{display:none}
  .ibx.reading+*{display:none}
}

.dstep{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.dstep:first-of-type{border:0}
.dmark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;margin-top:1px}
.dstep.ok .dmark{background:rgba(35,138,91,.16);color:var(--grn)}
.dstep.bad .dmark{background:var(--red-soft);color:var(--red)}
.dstep .muted{font-size:13px;overflow-wrap:anywhere}