:root{
  --bg:#0e1014; --surface:#161a21; --surface-2:#1c212b; --border:#272d38;
  --text:#e7e9ee; --muted:#9aa2b1; --faint:#6b7280;
  --accent:#5b8cff; --accent-weak:#1e2942;
  --green:#39b482; --amber:#d8a640; --red:#e06a5c; --violet:#9a7be0;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5}
button{font-family:inherit;font-size:14px;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px}
.hidden{display:none!important}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:32px;width:100%;max-width:340px}
.login-card h1{font-size:20px;margin:0 0 4px}
.login-card p{color:var(--muted);margin:0 0 20px;font-size:13px}
.login-card input{width:100%;padding:11px 12px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);margin-bottom:12px}
.login-card .err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:8px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:6px}
.brand{font-size:17px;font-weight:650;letter-spacing:.2px;padding:4px 8px 14px;display:flex;align-items:center;gap:8px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--muted);border:1px solid transparent;background:none;width:100%;text-align:left}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-weak);color:var(--text);border-color:#2c3a5e}
.nav-item .badge{background:var(--surface-2);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:12px;min-width:22px;text-align:center}
.nav-item.active .badge{background:var(--accent);color:#fff}
.nav-sep{height:1px;background:var(--border);margin:8px 4px}
.sidebar-foot{margin-top:auto;padding-top:12px}
.link-btn{background:none;border:none;color:var(--faint);padding:6px 10px}
.link-btn:hover{color:var(--text)}

/* ---------- main ---------- */
.main{padding:26px 30px;overflow:auto}
.capture{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:22px;box-shadow:var(--shadow)}
.capture-row{display:flex;gap:10px}
.capture input{flex:1;padding:11px 13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}
.capture textarea{width:100%;margin-top:9px;padding:10px 13px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);resize:vertical;min-height:0;height:0;padding-top:0;padding-bottom:0;border:none;transition:none;overflow:hidden}
.capture textarea.open{height:64px;padding:10px 13px;border:1px solid var(--border);margin-top:9px}

.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.head h2{margin:0;font-size:19px}
.head .sub{color:var(--muted);font-size:13px;margin-top:2px}

.btn{padding:10px 15px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:none}
.btn.sm{padding:6px 10px;font-size:13px}

/* ---------- cards / list ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;display:flex;gap:12px;align-items:flex-start}
.card .body{flex:1;min-width:0}
.card .t{font-weight:550}
.card .d{color:var(--muted);font-size:13px;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.card .acts{display:flex;gap:6px;flex-shrink:0}
.tag{font-size:12px;padding:2px 9px;border-radius:20px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.tag.src{color:var(--faint)}
.tag.cat{color:var(--violet)}
.tag.date{color:var(--amber)}
.tag.who{color:var(--green)}
.tag.proj{color:var(--accent)}
.empty{color:var(--faint);text-align:center;padding:48px 0;font-size:14px}
.done .t{text-decoration:line-through;color:var(--muted)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:560px;padding:22px}
.modal h3{margin:0 0 2px;font-size:14px;color:var(--muted);font-weight:500}
.modal .item-t{font-size:19px;font-weight:600;margin:6px 0}
.modal .item-d{color:var(--muted);white-space:pre-wrap;margin-bottom:8px;max-height:180px;overflow:auto}
.modal .progress{color:var(--faint);font-size:13px;margin-bottom:14px}
.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.dest{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);text-align:left}
.dest:hover{border-color:var(--accent)}
.dest small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.dest.good{border-color:#2c5a45}
.modal .row{display:flex;gap:8px;align-items:center;margin-top:12px}
.modal input,.modal select{padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}
.modal-foot{display:flex;justify-content:space-between;margin-top:18px}

/* toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);padding:11px 18px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:80;opacity:0;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

@media(max-width:720px){
  .app{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border)}
  .sidebar-foot{margin:0}
  .dest-grid{grid-template-columns:1fr}
}