:root{
  --bg: #0f1520;
  --panel: #111927;
  --panel-2: #0b1220;
  --text: #e2e8f0;
  --muted: #9aa6b2;
  --primary: #2ea043;
  --danger: #e5534b;
  --border: #253041;
  --hover: #1a2233;
  --focus: #3b82f6;
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0; height:100%; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Segoe UI Emoji", "Segoe UI Symbol";
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--border);
}
.topbar h1{ margin:0; font-size:18px; font-weight:600; }

.actions .btn{ margin-left:8px; }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--panel-2); border-bottom:1px solid var(--border);
}
.search-wrap{ flex:1; }
#searchBox{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:#0a1220; color:var(--text); outline:none;
}
#searchBox:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(59,130,246,0.3); }

.toggles{ display:flex; gap:16px; flex-wrap:wrap; }
.chk{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }

.content{
  display:grid; grid-template-columns: 220px 1fr; gap:0; height:calc(100vh - 136px);
}
.sidebar{
  border-right:1px solid var(--border); background:var(--panel);
  padding:12px 10px;
}
.sidebar h2{ margin:6px 6px 10px; font-size:14px; color:var(--muted); }
.category-list{ list-style:none; margin:0; padding:0; }
.category-list li{
  padding:8px 10px; border-radius:6px; margin:4px 6px; cursor:pointer;
}
.category-list li.active, .category-list li:hover{ background:var(--hover); }

.list-area{ display:flex; flex-direction:column; }
.list-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
#countLabel{ color:var(--muted); }

.item-list{
  list-style:none; margin:0; padding:0; overflow:auto; height:100%;
}
.item{
  padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer;
  display:flex; align-items:flex-start; gap:10px;
}
.item:hover{ background:var(--hover); }
.item .label{ font-weight:600; }
.item .value{ color:var(--muted); margin-top:2px; white-space:pre-wrap; }

.item .meta{
  margin-left:auto; display:flex; gap:6px; align-items:center; color:var(--muted);
  font-size:12px;
}

.btn{
  background:#1b2636; color:var(--text); border:1px solid var(--border);
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.btn:hover{ background:var(--hover); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.btn.primary{ background:var(--primary); border-color:#277a38; color:white; }
.btn.danger{ background:var(--danger); border-color:#b83c36; color:white; }

.statusbar{
  padding:8px 12px; border-top:1px solid var(--border); background:var(--panel);
  color:var(--muted);
}

.dialog-form{
  min-width: min(90vw, 520px);
  background:var(--panel);
  color:var(--text);
  padding:16px;
  border:1px solid var(--border);
  border-radius:10px;
}
dialog::backdrop{ background: rgba(0,0,0,0.6); }
.dialog-form h3{ margin-top:0; }
.dialog-form label{
  display:block; margin:10px 0;
}
.dialog-form input[type="text"], .dialog-form textarea{
  width:100%; background:#0a1220; color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px; outline:none;
}
.dialog-form input[type="text"]:focus, .dialog-form textarea:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(59,130,246,0.3);
}
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.dialog-actions .primary{ background:var(--primary); color:#fff; border-color:#277a38; }