:root{
  --bg:#0b0d10; --bg2:#12151a; --bg3:#171b21; --line:#242a33;
  --fg:#e6e9ee; --fg2:#9aa4b2; --fg3:#6b7embed;
  --muted:#8b95a3; --accent:#5b8cff; --accent-dim:#2f4a8a;
  --danger:#ff5f56; --ok:#3ecf8e;
  --r:8px; --sb:232px; --list:380px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
.spacer{flex:1}
.muted{color:var(--muted);font-size:12px}
code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg2)}

/* ── login ── */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 500px at 50% -10%,#16202f 0%,var(--bg) 60%)}
.login-card{width:100%;max-width:372px;background:var(--bg2);border:1px solid var(--line);
  border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.brand h1{margin:0;font-size:19px;letter-spacing:-.01em}
.brand p{margin:0;font-size:12px;color:var(--muted)}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--fg2)}
.login-card input[type=email],.login-card input[type=password]{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;outline:none}
.login-card input:focus{border-color:var(--accent)}
.login-card label.row{flex-direction:row;align-items:center;gap:8px}
.login-card button[type=submit]{
  margin-top:4px;background:var(--accent);border:0;border-radius:var(--r);
  padding:11px;font-weight:600;cursor:pointer;color:#fff}
.login-card button[disabled]{opacity:.6;cursor:progress}
.err{background:#2a1416;border:1px solid #5d2327;color:#ffb4b0;
  padding:9px 11px;border-radius:var(--r);font-size:12.5px;white-space:pre-wrap}
.foot{margin:2px 0 0;font-size:11.5px;color:var(--fg3);text-align:center}

/* ── shell ── */
#app{height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:0 14px;height:52px;
  background:var(--bg2);border-bottom:1px solid var(--line);flex:0 0 auto}
.logo{display:flex;align-items:center;gap:8px;font-weight:650;letter-spacing:-.01em}
.search{flex:0 1 330px}
.search input{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:7px 13px;outline:none}
.search input:focus{border-color:var(--accent-dim)}
.btn{border:1px solid var(--line);background:var(--bg3);border-radius:var(--r);
  padding:7px 13px;cursor:pointer}
.btn:hover{border-color:#39414d}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.ghost{background:transparent}
.icon-btn{background:none;border:0;color:var(--fg2);cursor:pointer;font-size:16px;
  padding:6px 8px;border-radius:6px;line-height:1}
.icon-btn:hover{background:var(--bg3);color:var(--fg)}
.only-mobile{display:none}

.usermenu{position:relative}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--accent-dim);color:#fff;font-weight:650;font-size:12px;cursor:pointer}
.dropdown{position:absolute;right:0;top:38px;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;min-width:216px;padding:6px;z-index:40;box-shadow:0 12px 34px #0009}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--fg);padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.dropdown a:hover,.dropdown button:hover{background:var(--bg3)}
.dropdown .who{padding:9px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
.dropdown .who strong{display:block;font-size:13px}
.dropdown .who span{font-size:11.5px;color:var(--muted)}

.body{flex:1;display:flex;min-height:0}

/* ── sidebar ── */
.sidebar{width:var(--sb);flex:0 0 auto;background:var(--bg2);border-right:1px solid var(--line);
  padding:10px 8px;overflow:auto;display:flex;flex-direction:column}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  cursor:pointer;font-size:13.5px;color:var(--fg2)}
.sidebar li:hover{background:var(--bg3);color:var(--fg)}
.sidebar li.active{background:var(--accent-dim);color:#fff;font-weight:550}
.sidebar li .cnt{margin-left:auto;font-size:11.5px;color:var(--muted);
  background:var(--bg);padding:1px 7px;border-radius:9px}
.sidebar li.active .cnt{background:#ffffff22;color:#fff}
.sb-section{margin-top:14px}
.sb-section h3{margin:0 0 5px;padding:0 10px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--fg3)}
.usage{margin-top:auto;padding:11px 10px 4px}
.usage .bar{height:4px;background:var(--bg);border-radius:3px;overflow:hidden}
.usage .bar i{display:block;height:100%;width:0;background:var(--accent)}
.usage small{color:var(--fg3);font-size:11px}

/* ── list ── */
.list{width:var(--list);flex:0 0 auto;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.list-head{display:flex;align-items:center;gap:9px;padding:10px 13px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.list-body{overflow:auto;flex:1}
.row-item{padding:11px 13px;border-bottom:1px solid #1b2027;cursor:pointer;display:flex;gap:10px}
.row-item:hover{background:var(--bg2)}
.row-item.sel{background:var(--bg3);box-shadow:inset 2px 0 0 var(--accent)}
.row-item .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;margin-top:6px}
.row-item.read .dot{background:transparent}
.row-item .meta{min-width:0;flex:1}
.row-item .l1{display:flex;gap:8px;align-items:baseline}
.row-item .from{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1}
.row-item.read .from{font-weight:450;color:var(--fg2)}
.row-item .date{font-size:11px;color:var(--muted);flex:0 0 auto}
.row-item .subj{font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .prev{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:1px}
.row-item .clip{font-size:11px;color:var(--muted)}

/* ── reader ── */
.reader{flex:1;min-width:0;overflow:auto;background:var(--bg)}
.empty{height:100%;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--fg3)}
#readerBody{padding:22px 26px;max-width:860px}
#readerBody h2{margin:0 0 12px;font-size:19px;line-height:1.3;letter-spacing:-.01em}
.hdr{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hdr .big{width:38px;height:38px;border-radius:50%;background:var(--accent-dim);color:#fff;
  display:grid;place-items:center;font-weight:650;flex:0 0 auto}
.hdr .who{flex:1;min-width:0}
.hdr .who b{font-size:13.5px}
.hdr .who div{font-size:12px;color:var(--muted);word-break:break-word}
.hdr .when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.actions{display:flex;gap:7px;margin:14px 0}
.msg{padding-top:16px;font-size:14px;line-height:1.65;white-space:pre-wrap;word-wrap:break-word}
.msg-html{padding-top:16px}
.msg-html img{max-width:100%;height:auto}
.auth{margin-top:20px;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);font:11.5px/1.6 ui-monospace,Menlo,monospace;color:var(--fg2);
  white-space:pre-wrap;word-break:break-all}
.auth b{color:var(--fg)}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10.5px;font-weight:650}
.pill.pass{background:#12301f;color:var(--ok)}
.pill.fail{background:#2f1517;color:var(--danger)}

/* ── compose ── */
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:60;padding:18px}
.compose{width:100%;max-width:720px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;display:flex;flex-direction:column;max-height:92vh;overflow:auto}
.c-head{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}
.c-head strong{flex:1;font-size:14px}
.c-row{display:flex;align-items:center;gap:10px;padding:8px 15px;border-bottom:1px solid #1b2027}
.c-row label{width:58px;font-size:12px;color:var(--muted);flex:0 0 auto}
.c-row input,.c-row select{flex:1;background:transparent;border:0;outline:none;padding:3px 0}
.compose textarea{border:0;background:transparent;outline:none;padding:15px;resize:vertical;
  font:14px/1.6 inherit;min-height:200px}
.c-foot{display:flex;align-items:center;gap:9px;padding:12px 15px;border-top:1px solid var(--line)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--bg3);
  border:1px solid var(--line);padding:10px 16px;border-radius:22px;z-index:80;font-size:13px;
  box-shadow:0 10px 30px #000a}
.toast.bad{border-color:#5d2327;color:#ffb4b0}

.skel{padding:11px 13px;border-bottom:1px solid #1b2027}
.skel i{display:block;height:9px;background:linear-gradient(90deg,#1a1f26,#232a33,#1a1f26);
  background-size:200% 100%;border-radius:4px;animation:sh 1.2s infinite}
.skel i+i{margin-top:7px;width:65%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:1080px){ .reader{position:fixed;inset:52px 0 0 0;z-index:30;display:none}
  .reader.open{display:block} }
@media(max-width:760px){
  .only-mobile{display:block}
  .sidebar{position:fixed;left:0;top:52px;bottom:0;z-index:35;transform:translateX(-100%);
    transition:transform .18s ease}
  .sidebar.open{transform:none}
  .list{width:100%}
  .search{display:none}
}

/* ── FIX-hidden: the hidden attribute must beat component display rules ── */
[hidden]{display:none !important}