@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/inter/inter-latin-700-normal.woff2") format("woff2")}
:root,html[data-theme="light"]{
  --navy:#0B1F3A; --navy-2:#132a4a; --orange:#ff6a1a; --orange-2:#e55a10;
  --bg:#f3f5f9; --card:#fff; --line:#e5e9f0; --text:#1a2332; --muted:#5b6778;
  --unread:#0b1f3a; --hover:#eef2f8; --sel:#e8f0fe; --danger:#c62828;
  --shadow:0 8px 28px rgba(11,31,58,.12); --r:14px;
  --input:#fff; --toolbar:#fbfcfe; --folder-on:#fce8dc; --folder-on-fg:#0B1F3A;
  --picked:#fff4ec; --drop:#e8f0fe; --danger-bg:#fef2f2; --danger-line:#fecaca;
  --kbg:#eef2f8;
  --read-head:#e7edf5; --read-paper:#fff;
  color-scheme:light;
}
html[data-theme="dark"]{
  --navy:#07111f; --navy-2:#0c1a2e; --orange:#ff7a2e; --orange-2:#e55a10;
  --bg:#070e18; --card:#101b2c; --line:#2a3b54; --text:#e8eef6; --muted:#9aa8bc;
  --unread:#fff; --hover:#18263c; --sel:#1d334f; --danger:#ff8a80;
  --shadow:0 12px 32px rgba(0,0,0,.45); --r:14px;
  --input:#0c1624; --toolbar:#0c1624; --folder-on:#3a2418; --folder-on-fg:#ffd4b8;
  --picked:#2c1c12; --drop:#1a2a40; --danger-bg:#3a1518; --danger-line:#7a3038;
  --kbg:#18263c;
  --read-head:#080f1a; --read-paper:#1c3148;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.app{display:flex;flex-direction:column;height:100%}
.top{
  display:flex;align-items:center;gap:.75rem;padding:.55rem 1rem;
  background:var(--navy);color:#fff;min-height:56px;flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;flex:0 0 auto}
.brand img{height:28px;width:auto;display:block}
.brand span{font-weight:700;letter-spacing:.02em;font-size:.95rem}
.search{
  flex:1;max-width:720px;margin:0 auto;display:flex;align-items:center;
  background:rgba(255,255,255,.1);border-radius:999px;padding:.15rem .2rem .15rem .9rem;
}
.search input{
  flex:1;border:0;background:transparent;color:#fff;outline:none;padding:.45rem 0;min-width:0;
}
.search input::placeholder{color:rgba(255,255,255,.55)}
.search button,.icon-btn{
  border:0;background:transparent;color:#fff;width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
}
.search button:hover,.icon-btn:hover{background:rgba(255,255,255,.12)}
.who{font-size:.8rem;opacity:.85;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.acct{position:relative;flex:0 0 auto}
.acct-btn{
  border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;
  padding:.35rem .7rem;display:flex;align-items:center;gap:.35rem;min-height:40px;font-weight:600
}
.acct-btn:hover{background:rgba(255,255,255,.16)}
.acct-menu{
  position:absolute;right:0;top:calc(100% + 6px);background:var(--card);color:var(--text);
  border-radius:12px;box-shadow:var(--shadow);min-width:220px;padding:.35rem;z-index:30
}
.acct-menu button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:.65rem .75rem;border-radius:8px;font-weight:600
}
.acct-menu button:hover{background:var(--hover)}
.shell.is-panel{grid-template-columns:232px 1fr}
.settings{background:var(--card);overflow:auto;padding:1.15rem 1.5rem 3rem;min-width:0;position:relative;z-index:1}
.settings-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.settings-head h2{margin:0;font-size:1.35rem}
.set-block{border-top:1px solid var(--line);padding:1.1rem 0}
.set-block h3{margin:0 0 .4rem;font-size:1.02rem}
.set-lead{margin:0 0 .75rem;color:var(--muted);font-size:.9rem;line-height:1.5}
.set-block ol{margin:.2rem 0 0;padding-left:1.2rem;color:var(--text);line-height:1.55}
.set-block li{margin:.35rem 0}
.set-block code{font-size:.85em;background:var(--hover);padding:.1rem .3rem;border-radius:4px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.set-row .k{display:block;font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.set-row code{font-size:.9rem}
.set-note{font-size:.82rem;color:var(--muted);margin:.7rem 0 0}
.tool-form{margin-top:.75rem}
.tool-form label{display:block;font-size:.8rem;font-weight:700;margin:.55rem 0 .25rem}
.tool-form input,.tool-form select,.tool-form textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem;min-height:42px;font:inherit;background:var(--input);color:var(--text)
}
.tool-form textarea{min-height:110px;resize:vertical}
.tool-form input:focus,.tool-form select:focus,.tool-form textarea:focus{
  outline:2px solid rgba(255,106,26,.35);border-color:var(--orange)
}
.tool-row{display:flex;gap:.5rem;align-items:center;margin-top:.55rem}
.tool-row.wrap{flex-wrap:wrap}
.tool-row input,.tool-row select{flex:1;min-width:140px}
.tool-row .send{flex:0 0 auto;min-width:96px}
.danger-link{color:var(--danger)!important;border-color:#f3c7c7!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.set-row span{font-size:.88rem;color:var(--text)}
.text-link{background:none;border:0;color:#0b57d0;font-weight:600;padding:0;cursor:pointer;text-decoration:underline}
a.text-link{color:#0b57d0}
kbd{border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem;font-size:.8em;background:var(--kbg)}
.howto-sheet{width:min(640px,100%);background:var(--card);border-radius:20px;padding:1.2rem 1.3rem 1.3rem;box-shadow:var(--shadow);max-height:min(86vh,900px);overflow:auto}
.login-logo{height:42px;width:auto;display:block;margin:0 auto;flex:0 0 auto}
@media (min-width: 900px){
  .login{flex-direction:row;gap:4.5rem}
  .login-logo{height:52px;margin:0}
}
.shell{display:grid;grid-template-columns:232px 360px 1fr;flex:1;min-height:0;position:relative}
.side{
  background:var(--card);border-right:1px solid var(--line);padding:.85rem .7rem;overflow:auto;
  position:relative;z-index:3;min-width:0;
}
.side-back{display:none}
.compose{
  display:flex;align-items:center;gap:.55rem;width:100%;border:0;border-radius:18px;
  background:var(--orange);color:#fff;font-weight:700;padding:.85rem 1rem;margin-bottom:.85rem;
  box-shadow:0 6px 16px rgba(255,106,26,.28);
}
.compose:hover{background:var(--orange-2)}
.nav-f{
  display:flex;align-items:center;gap:.55rem;width:100%;border:0;background:transparent;
  text-align:left;padding:.5rem .7rem;border-radius:0 20px 20px 0;color:var(--text);font-weight:600;
}
.nav-f:hover{background:var(--hover)}
.nav-f.on{background:var(--folder-on);color:var(--folder-on-fg);font-weight:700}
.nav-f .n{margin-left:auto;font-size:.75rem;color:var(--muted)}
.list{background:var(--card);border-right:1px solid var(--line);overflow:auto;min-width:0}
.list-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.45rem .7rem;border-bottom:1px solid var(--line);background:var(--toolbar);font-size:.8rem;position:sticky;top:0;z-index:2}
.list-head button,.list-head select{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:.25rem .65rem;font-weight:600;font-size:.78rem}
.pick-all{display:flex;align-items:center;gap:.35rem;font-weight:600;color:var(--muted)}
.bulk-n{color:var(--muted)}
.row{
  display:grid;grid-template-columns:22px 32px 22px 1fr auto;gap:.3rem .5rem;padding:.65rem .75rem;
  border-bottom:1px solid var(--line);cursor:pointer;align-items:center;
}
.row.picked{background:var(--picked)}
.pick{margin:0}
.av{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex:0 0 auto}
.av.lg{width:40px;height:40px;font-size:.85rem}
.mid{min-width:0}
.snip{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.clip{font-size:.75rem}
.who-line{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 1rem}
.quoted{margin:.8rem 0;border-left:3px solid var(--line);padding-left:.7rem;color:var(--muted)}
.quoted summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:.82rem}
.suggest{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.suggest button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:.45rem .8rem;font-size:.82rem;text-align:left;max-width:100%}
.suggest button:hover{border-color:var(--orange);color:var(--navy)}
.undo-bar{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:.55rem .7rem .55rem 1rem;border-radius:999px;display:flex;align-items:center;gap:.7rem;z-index:70;box-shadow:var(--shadow);font-weight:600}
.undo-bar button{border:0;background:var(--orange);color:#fff;border-radius:999px;padding:.35rem .8rem;font-weight:700}
.help-back{position:fixed;inset:0;background:rgba(11,31,58,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:1rem}
.help{background:var(--card);color:var(--text);border-radius:16px;padding:1.2rem 1.3rem;max-width:420px;width:100%;box-shadow:var(--shadow)}
.help h2{margin:0 0 .7rem}
.help ul{margin:0;padding:0;list-style:none}
.help li{margin:.4rem 0;line-height:1.55}
.help p{margin:.35rem 0;line-height:1.5}
.cc-line{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.cc-line input{border:0!important}
.bcc-tog{margin-right:.5rem;flex:0 0 auto}
.hint-inline{font-size:.75rem;color:var(--muted);margin-left:auto}
.cwh-sig{margin-top:1rem;color:var(--muted)}
#modal-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;margin:0 0 1rem;background:var(--input);color:var(--text)}
.theme-picks{display:flex;gap:.5rem;margin-top:.55rem}
.theme-picks button{flex:1;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:12px;min-height:42px;font-weight:700}
.theme-picks button.on{border-color:var(--orange);background:var(--folder-on);color:var(--folder-on-fg)}
html[data-theme="dark"] .body{color:var(--text)}
html[data-theme="dark"] .empty,html[data-theme="dark"] .read-empty{color:var(--muted)}
html[data-theme="dark"] .login-card h1{color:var(--text)}
html[data-theme="dark"] .chip{background:var(--hover)}
html[data-theme="dark"] .link-row input{background:var(--input)!important;color:var(--text)!important}
.icon-btn.theme-btn{font-size:1.05rem}
.row:hover{background:var(--hover)}
.row.on{background:var(--sel)}
.row.unseen .sub,.row.unseen .from{font-weight:700;color:var(--unread)}
.from{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font-size:.72rem;color:var(--muted);text-align:right;white-space:nowrap}
.star{border:0;background:transparent;color:#c5ccd6;font-size:1.05rem;line-height:1;padding:0}
.star.on{color:#f4b400}
.read{background:var(--bg);overflow:auto;min-width:0;padding:0;display:flex;flex-direction:column}
.read-chrome{background:var(--read-head);border-bottom:1px solid var(--line);flex:0 0 auto}
.read-head{padding:.15rem 1.35rem 1.1rem;border-top:1px solid var(--line)}
.read-head h1{font-size:1.28rem;margin:0 0 .75rem;line-height:1.3;color:var(--text)}
.read-paper{
  background:var(--read-paper);flex:1;padding:1.25rem 1.4rem 3rem;
  box-shadow:inset 0 8px 16px rgba(11,31,58,.04);
}
html[data-theme="dark"] .read-paper{box-shadow:inset 0 10px 18px rgba(0,0,0,.18)}
.read-wait{color:var(--muted)}
.read-empty{color:var(--muted);padding:3rem 1rem;text-align:center}
.read-from{font-weight:700}
.read-date{color:var(--muted);font-size:.8rem}
.who-line{padding:0}
.tools{display:flex;gap:.35rem;flex-wrap:wrap;margin:0;padding:.7rem 1.15rem}
.tools button,.ghost{
  border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:.35rem .75rem;font-weight:600;font-size:.82rem
}
.tools button:hover,.ghost:hover{background:var(--hover)}
.tools .danger{color:var(--danger);border-color:#f3c7c7}
.body{line-height:1.55;overflow-wrap:anywhere}
.body img{max-width:100%;height:auto}
.cwh-mail-plain{white-space:pre-wrap;font-family:inherit}
.atts a{display:inline-flex;margin:.25rem .35rem 0 0;padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px;font-size:.8rem;text-decoration:none}
.atts a:hover{background:var(--hover)}

.login{
  min-height:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;gap:1.1rem;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(255,106,26,.18), transparent 55%),
    linear-gradient(165deg,#050b14 0%,#0B1F3A 55%,#0c223f 100%);
}
.login-card{
  width:min(420px,100%);background:var(--card);color:var(--text);border-radius:20px;padding:1.6rem 1.5rem 1.3rem;
  box-shadow:var(--shadow);
}
.login-card img{height:40px;display:block;margin:0 auto 1rem}
.login-card h1{margin:0 0 .35rem;font-size:1.35rem;text-align:center}
.login-card p.lead{margin:0 0 1.1rem;color:var(--muted);text-align:center;font-size:.92rem}
.login-card label{display:block;font-size:.8rem;font-weight:700;margin:.7rem 0 .25rem}
.login-card input{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;min-height:44px;background:var(--input);color:var(--text)
}
.login-card input:focus{outline:2px solid rgba(255,106,26,.35);border-color:var(--orange)}
.login-card button[type=submit]{
  width:100%;margin-top:1rem;border:0;border-radius:12px;background:var(--orange);color:#fff;
  font-weight:700;min-height:46px
}
.login-card button[type=submit]:hover{background:var(--orange-2)}
.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);border-radius:12px;padding:.7rem .8rem;font-size:.88rem;margin-bottom:.8rem}
.hint{font-size:.78rem;color:var(--muted);margin-top:.85rem;text-align:center}
.hint a{color:#0b57d0;font-weight:600}

.compose-back{
  position:fixed;inset:0;background:rgba(11,31,58,.35);z-index:40;display:flex;align-items:flex-end;justify-content:flex-end;padding:1rem
}
.compose-box{
  width:min(560px,100%);background:var(--card);color:var(--text);border-radius:16px 16px 8px 8px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;max-height:min(78vh,640px);min-height:420px;
}
.compose-back.is-wide{
  align-items:center;justify-content:center;padding:1.25rem;background:rgba(11,31,58,.5)
}
.compose-back.is-wide .compose-box{
  width:min(920px,100%);height:min(88vh,860px);max-height:88vh;min-height:0;border-radius:16px
}
.draft-st{font-style:normal;font-weight:600;font-size:.75rem;opacity:.75;margin-left:.55rem}
.compose-box header{
  display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:var(--navy);color:#fff;border-radius:16px 16px 0 0;font-weight:700;flex:0 0 auto
}
.compose-hdr-acts{display:flex;align-items:center;gap:.35rem}
.compose-box header button{border:0;background:transparent;color:#fff;font-size:1.15rem;min-width:32px;min-height:32px;border-radius:8px}
.compose-box header button:hover{background:rgba(255,255,255,.12)}
.compose-box header .hdr-wide{font-size:.8rem;font-weight:700;padding:0 .65rem;border:1px solid rgba(255,255,255,.28);letter-spacing:.02em}
.compose-box input,.compose-box [contenteditable]{
  border:0;border-bottom:1px solid var(--line);padding:.7rem 1rem;width:100%;background:var(--card);color:var(--text)
}
.compose-box [contenteditable]{min-height:160px;outline:none;overflow:auto;flex:1}
.c-body ul,.c-body ol{margin:.25rem 0 .25rem 1.3rem}
.c-body a{color:#0b57d0}
.fmt{display:flex;flex-wrap:wrap;gap:.25rem;padding:.4rem .7rem;border-bottom:1px solid var(--line);background:var(--toolbar);flex:0 0 auto}
.fmt button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;min-height:32px;padding:0 .55rem;font-size:.85rem}
.fmt button:hover{border-color:var(--navy);color:var(--navy)}
.link-row{display:flex;gap:.4rem;padding:.45rem .7rem;border-bottom:1px solid var(--line);align-items:center}
.link-row[hidden]{display:none !important}
.link-row input{border:1px solid var(--line)!important;border-radius:8px;padding:.4rem .6rem!important;min-height:36px}
.att-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.45rem .75rem;border-top:1px solid var(--line);flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--hover);border-radius:999px;padding:.25rem .55rem .25rem .7rem;font-size:.8rem}
.chip em{color:var(--muted);font-style:normal;font-size:.75rem}
.chip button{border:0;background:transparent;font-size:1rem;line-height:1;padding:0 .15rem;color:var(--muted)}
.att-add{cursor:pointer;margin:0}
.c-body.drop{background:var(--drop)}
.compose-box footer{display:flex;gap:.5rem;padding:.75rem 1rem 1rem;flex:0 0 auto}
.send{
  border:0;background:var(--orange);color:#fff;font-weight:700;border-radius:999px;padding:.55rem 1.2rem;min-height:40px
}
.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:.6rem 1rem;border-radius:999px;font-size:.85rem;z-index:50;box-shadow:var(--shadow)
}
.modal-back{position:fixed;inset:0;background:rgba(11,31,58,.4);z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--card);color:var(--text);border-radius:16px;padding:1.2rem;max-width:360px;width:100%;box-shadow:var(--shadow)}
.modal h2{margin:0 0 .4rem;font-size:1.05rem}
.modal p{margin:0 0 1rem;color:var(--muted);font-size:.9rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.45rem}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
.menu-btn{display:none}
@media (max-width: 960px){
  .shell,.shell.is-panel{grid-template-columns:1fr !important}
  .side-back{
    display:block;position:fixed;inset:56px 0 0 0;border:0;padding:0;
    background:rgba(11,31,58,.45);z-index:35;
  }
  .side{
    display:none;position:fixed;z-index:40;top:56px;left:0;bottom:0;
    width:min(300px,86vw);box-shadow:var(--shadow);padding:.9rem .75rem 2rem;
  }
  .side.open{display:block}
  .nav-f,.side .compose{min-height:44px}
  .list.hide,.read.hide{display:none}
  .read{position:relative;inset:auto;z-index:1;padding:1rem 1rem 5rem}
  .menu-btn{display:inline-flex}
  .who{display:none}
  .brand span{display:none}
  .search{flex:1;min-width:0;max-width:none}
  .top{gap:.4rem;padding:.45rem .55rem;position:sticky;top:0;z-index:50}
  .acct-btn{padding:.35rem .45rem}
  .app,.top{overflow-x:hidden}
  .settings{padding:1rem 1rem 5rem}
  .settings-head{
    position:sticky;top:0;z-index:2;background:var(--card);
    margin:0 -1rem 1rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);
  }
  .theme-picks{flex-direction:column}
  .tools{gap:.4rem;padding:.65rem .85rem}
  .tools button,.ghost{min-height:40px}
  .read-head{padding:.2rem 1rem 1rem}
  .read-paper{padding:1.1rem 1rem 4rem}
  .compose-back,.compose-back.is-wide{
    padding:0;align-items:stretch;justify-content:stretch;background:rgba(11,31,58,.45)
  }
  .compose-box,.compose-back.is-wide .compose-box{
    width:100%;height:100%;max-height:100%;min-height:100%;border-radius:0
  }
  .compose-box header{border-radius:0}
  .hdr-wide{display:none}
  .row{grid-template-columns:22px 28px 18px 1fr auto}
  .hint-inline{display:none}
  .list-head{font-size:.75rem;gap:.35rem}
  .undo-bar{left:12px;right:12px;transform:none;width:auto;justify-content:space-between}
}