:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background:#0b1020; color:#eef2ff; }
a { color: inherit; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 20px; min-width: 0; overflow-x: hidden; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.topbar h1 { margin:0 0 8px; font-size: clamp(26px, 4vw, 34px); }
.topbar p { margin:0; color:#a5b4fc; }
.top-actions { margin-left:auto; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(100%, 420px); min-width:0; }
.card,.panel { background:#11172a; border:1px solid #24304d; border-radius:16px; }
.card { padding:16px 18px; min-width:0; display:flex; flex-direction:column; }
.card strong { font-size:28px; }
.card span { color:#9fb0d8; }
.grid.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin-bottom:20px; min-width:0; }
.panel { padding:18px; min-width:0; overflow-x:hidden; }
.panel h2 { margin-top:0; margin-bottom:14px; }
.form-grid { display:grid; gap:12px; min-width:0; }
.form-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.search-bar { display:grid; grid-template-columns:minmax(0,1fr) 180px 140px auto; gap:12px; align-items:center; }
input, textarea, select, button { width:100%; box-sizing:border-box; border-radius:12px; border:1px solid #334155; background:#0f172a; color:#eef2ff; padding:12px; font: inherit; min-width:0; }
textarea { min-height:100px; resize:vertical; }
button { background:#4f46e5; border:none; font-weight:700; cursor:pointer; }
button:hover { filter: brightness(1.06); }
.list { display:grid; gap:12px; min-width:0; }
.item { padding:14px; border:1px solid #283552; border-radius:12px; background:#0b1324; min-width:0; overflow-x:hidden; }
.item-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:8px; flex-wrap:wrap; }
.item-head strong { word-break: break-word; }
.meta,.note { color:#9fb0d8; font-size:14px; margin-top:4px; word-break: break-word; overflow-wrap:anywhere; }
.badge { padding:4px 8px; border-radius:999px; font-size:12px; white-space:nowrap; }
.badge.active { background:#14532d; color:#bbf7d0; }
.badge.idle { background:#3f3f46; color:#e4e4e7; }
.badge.expired { background:#7f1d1d; color:#fecaca; }
.badge.plain { background:#1e293b; color:#cbd5e1; }
pre { white-space:pre-wrap; overflow:auto; overflow-wrap:anywhere; word-break:break-all; background:#020617; padding:12px; border-radius:10px; max-width:100%; }
.empty { color:#94a3b8; padding:12px; border:1px dashed #334155; border-radius:12px; }
.ghost-btn, .inline-tag, .tag-pill { display:inline-flex; align-items:center; justify-content:center; border:1px solid #334155; color:#e2e8f0; text-decoration:none; border-radius:10px; padding:10px 12px; background:#0f172a; }
.inline-tag { padding:4px 8px; border-radius:999px; margin-right:6px; margin-top:6px; font-size:12px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.tag-pill.active-tag { background:#312e81; border-color:#6366f1; }
.action-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0; }
.action-row > * { flex: 0 0 auto; }
.action-row form { margin:0; }
.danger-btn { background:#991b1b; }
.compact-list { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.mini-item { padding:10px 12px; }
.stack-mobile { display:grid; gap:16px; }
.nav-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px;min-width:0}.tab{display:inline-flex;padding:10px 14px;border:1px solid #334155;border-radius:10px;background:#0f172a;color:#e2e8f0;text-decoration:none}.active-tab{background:#312e81;border-color:#6366f1}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.muted{color:#94a3b8;font-size:14px}
@media (max-width: 960px) {
  .wrap { padding: 14px; }
  .grid.two { grid-template-columns:1fr; }
  .search-bar { grid-template-columns:1fr; }
  .form-two { grid-template-columns:1fr; }
  .stats { width:100%; }
}
@media (max-width: 640px) {
  .wrap { padding: 12px; }
  .panel, .card, .item { border-radius: 14px; }
  .panel { padding: 14px; }
  .topbar { margin-bottom: 16px; }
  .nav-tabs { gap: 8px; }
  .tab, .ghost-btn, button { min-height: 42px; }
  .tab { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .item-head { flex-direction: column; align-items: flex-start; }
  .action-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .action-row > *, .action-row form { width:100%; }
  .action-row .danger-btn, .action-row .ghost-btn, .action-row button { width:100%; justify-content:center; }
  .stats { grid-template-columns:1fr; }
  .panel pre, .item pre { font-size: 12px; line-height: 1.45; }
}