:root{
  --bg:#0d0f13; --surf:#161b24; --line:#222a37; --txt:#e8ebf0; --dim:#8b93a1;
  --accent:#4a9eff; --danger:#ff5d5d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; height:100vh; height:100dvh;
  overscroll-behavior:none; overflow:hidden;
}
button{font-family:inherit; cursor:pointer; touch-action:manipulation}

/* ---------- header ---------- */
header{
  padding:8px 8px 6px; padding-top:calc(8px + env(safe-area-inset-top));
  border-bottom:1px solid #1a212c; background:var(--bg); z-index:5;
}
.hrow{display:flex; align-items:center; gap:2px}
.spacer{flex:1}
.ic{
  background:none; border:0; color:var(--dim); width:38px; height:38px;
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ic:active{background:#1b2330}
.ic:disabled{opacity:.25; pointer-events:none}
.ic svg{display:block}
.plabel{
  flex:1; min-width:0; text-align:center; background:none; border:0; color:var(--txt);
  font-size:15px; font-weight:600; padding:8px 4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; border-radius:10px;
}
.plabel:active{background:#1b2330}
.chips{justify-content:center; gap:6px; margin-top:3px}
.chip{
  border:1px solid var(--line); background:none; color:var(--dim);
  padding:4px 15px; border-radius:14px; font-size:13px;
}
.chip.active{color:var(--txt); border-color:rgba(74,158,255,.55); background:rgba(74,158,255,.12)}
.psel{position:fixed; top:-100px; left:0; width:1px; height:1px; opacity:0}

/* ---------- feed ---------- */
#feed{flex:1; overflow-y:auto; padding:6px 0 10px; scrollbar-width:thin; scrollbar-color:#2a3342 transparent}
.item{position:relative; margin:5px 12px}
.item .bgL,.item .bgR{
  position:absolute; inset:0; border-radius:6px 14px 14px 14px; display:flex;
  align-items:center; font-size:17px; opacity:0; transition:opacity .12s; pointer-events:none;
}
.bgL{justify-content:flex-start; padding-left:16px; color:#9ecbff; background:rgba(74,158,255,.14)}
.bgR{justify-content:flex-end; padding-right:16px; color:#ff9c9c; background:rgba(255,93,93,.13)}
.item.hint-edit .bgL{opacity:1}
.item.hint-del .bgR{opacity:1}
.card{
  position:relative; padding:8px 13px 9px; border-radius:6px 14px 14px 14px;
  border-left:3px solid var(--dim); touch-action:pan-y;
  background:var(--surf); overflow:hidden;
}
.card.snap{transition:transform .18s ease}
.card.new{animation:pop .22s ease}
@keyframes pop{from{opacity:0; transform:translateY(10px)}}
.meta{display:flex; gap:8px; align-items:baseline; font-size:11.5px; color:var(--dim)}
.meta .catn{font-weight:600}
.card .txt{margin-top:2px; white-space:pre-wrap; word-break:break-word}
.group-h{
  margin:14px 16px 1px; font-size:12px; color:var(--dim); font-weight:600;
}
.group-h:first-child{margin-top:8px}
.empty{margin:46px 24px 20px; text-align:center; color:var(--dim); line-height:1.7}
.empty b{color:var(--txt); font-weight:600}

/* inline edit */
.editTa{
  width:100%; background:#0f141c; border:1px solid #2c3646; border-radius:10px;
  padding:9px 11px; color:var(--txt); font:inherit; resize:none; min-height:66px; outline:none;
  display:block;
}
.erow{display:flex; gap:8px; margin-top:8px; justify-content:flex-end}
.ebtn{border:1px solid #2c3646; background:#1a212c; color:var(--txt); border-radius:10px; padding:6px 13px; font-size:13px}
.ebtn.primary{background:var(--accent); color:#06101c; border-color:var(--accent); font-weight:600}

/* ---------- composer ---------- */
#composer{
  padding:6px 10px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid #1a212c;
}
.catbar{display:flex; gap:6px; overflow-x:auto; padding:3px 2px 8px; animation:slideup .15s ease; scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar.hidden{display:none}
.cat{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  border:1px solid var(--line); padding:7px 13px; border-radius:17px;
  background:var(--surf); color:var(--txt); font-size:13px; white-space:nowrap;
}
.cat i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.cat.cancel{margin-left:auto; color:var(--dim); border-color:var(--line)}
@keyframes slideup{from{opacity:0; transform:translateY(6px)}}
.inrow{display:flex; gap:8px; align-items:flex-end}
#input{
  flex:1; background:var(--surf); border:1px solid var(--line); border-radius:20px;
  padding:11px 15px; color:var(--txt); font:inherit; resize:none; outline:none;
  max-height:140px; min-height:44px;
}
#input:focus{border-color:#33507a}
#input.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.send{
  width:44px; height:44px; border-radius:50%; border:0; background:var(--accent);
  color:#06101c; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.send:active{transform:scale(.94)}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(8px);
  background:#232b38; border:1px solid #2e3949; color:var(--txt);
  padding:9px 15px; border-radius:14px; font-size:13.5px;
  display:flex; gap:14px; align-items:center;
  opacity:0; pointer-events:none; transition:.2s; max-width:88vw; z-index:50;
  white-space:nowrap; overflow:hidden;
}
.toast.show{opacity:1; transform:translateX(-50%); pointer-events:auto}
.toast button{background:none; border:0; color:var(--accent); font-weight:600; font-size:13.5px; padding:0}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; z-index:60}
.modal.hidden{display:none}
.sheet{
  width:100%; background:var(--surf); border-radius:18px 18px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  animation:slideup .2s ease; max-height:82dvh; overflow-y:auto;
}
.lvhead{display:flex; align-items:baseline; gap:12px; margin-bottom:10px}
.lv{font-size:38px; font-weight:700; line-height:1}
.lvsub{color:var(--dim); font-size:14px}
.pbar{height:8px; background:#232b38; border-radius:6px; overflow:hidden; margin:6px 0 6px}
.pfill{height:100%; background:var(--accent); border-radius:6px}
.pxp{color:var(--dim); font-size:12.5px; margin-bottom:12px}
.srow{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #1d2530; font-size:14px}
.srow:last-of-type{border-bottom:0}
.srow span{color:var(--dim)}
.srow b{font-weight:600; text-align:right}
.catdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px}
.fineprint{color:#6b7383; font-size:11.5px; line-height:1.6; margin-top:12px}