:root {
  --bg:#0e1014; --panel:#171a21; --line:#262a33; --text:#e6e8ee;
  --muted:#8a93a6; --primary:#3a7bd5; --danger:#d04f4f; --ok:#2ecc71;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--text); margin:0;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar {
  display:flex; align-items:center; gap:1.25rem; padding:.65rem 1.25rem;
  background: linear-gradient(180deg, var(--bg-2,#14100a) 0%, var(--bg,#0a0805) 100%);
  border-bottom:1px solid var(--line-strong,#4a3a1c);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.topbar .brand a { color: var(--accent-2,#f4c95a); font-weight:600; }
.topbar nav { display:flex; gap:.4rem; flex:1; flex-wrap:wrap; align-items:center; }
.topbar nav .nav-group {
  display:inline-flex; gap:.15rem; align-items:center;
  padding:.18rem .35rem; border-radius:8px;
  background: rgba(227,165,42,.04);
  border: 1px solid rgba(74,58,28,.5);
}
.topbar nav .nav-group::before {
  content: attr(data-label);
  color: var(--accent-3,#c8761e);
  font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:0 .4rem 0 .25rem;
  border-right:1px solid rgba(74,58,28,.5); margin-right:.2rem;
}
.topbar nav .nav-sep { width:.5rem; }
.topbar nav a {
  color: var(--text-dim,#9a8866);
  padding: .35rem .55rem; border-radius:5px;
  font-size:.85rem; transition: background .15s, color .15s;
}
.topbar nav a:hover { color: var(--accent-2,#f4c95a); background: rgba(227,165,42,.08); text-decoration:none; }
.topbar .user { color: var(--text-dim,#9a8866); display:flex; gap:.75rem; align-items:center; }
.topbar .user a { color: inherit; }
.topbar .user a:hover { color: var(--accent-2,#f4c95a); }
.container { width: 100%; max-width: 1280px; margin: 1.5rem auto; padding: 0 clamp(.75rem, 2vw, 1.75rem) 3rem; box-sizing:border-box; }
@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .topbar nav { justify-content: center; }
  .topbar nav .nav-group::before { display:none; }
}

/* ============================================================
   SIDEBAR LAYOUT (Phase 1)
   ============================================================ */
:root { --sb-width: 240px; --sb-width-collapsed: 60px; }
body.has-sidebar { padding-left: var(--sb-width); transition: padding-left .18s ease; }
body.has-sidebar.sb-collapsed { padding-left: var(--sb-width-collapsed); }
body.has-sidebar .container { max-width: none; margin: 1.25rem; padding: 0 1rem 3rem; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-width);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #14100a 0%, #0a0805 100%);
  border-right: 1px solid var(--line-strong, #4a3a1c);
  z-index: 60; overflow: hidden; transition: width .18s ease;
}
body.sb-collapsed .sidebar { width: var(--sb-width-collapsed); }

.side-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem .9rem .8rem; border-bottom: 1px solid rgba(74,58,28,.45);
  gap: .5rem;
}
.side-brand a {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--accent-2, #f4c95a); font-weight: 700; letter-spacing: .04em;
  text-decoration: none;
}
.side-brand a img { filter: drop-shadow(0 0 4px rgba(227,165,42,.4)); }
.side-collapse {
  background: transparent; border: 1px solid rgba(74,58,28,.5);
  color: var(--text-dim, #9a8866); border-radius: 6px; cursor: pointer;
  padding: .15rem .4rem; font-size: .8rem; line-height: 1;
}
.side-collapse:hover { color: var(--accent-2,#f4c95a); border-color: var(--accent-3,#c8761e); }
body.sb-collapsed .side-brand-text,
body.sb-collapsed .side-collapse { display: none; }

.side-nav { flex: 1; overflow-y: auto; padding: .6rem .55rem .8rem; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(74,58,28,.5); border-radius: 3px; }
.side-group { margin-bottom: .85rem; }
.side-group::before {
  content: attr(data-label);
  display: block; padding: .35rem .55rem .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent-3, #c8761e); text-transform: uppercase;
}
body.sb-collapsed .side-group::before { content: ""; height: 1px; background: rgba(74,58,28,.4); margin: .35rem; padding: 0; }
.side-group a {
  display: flex; align-items: center; gap: .65rem;
  padding: .42rem .6rem; border-radius: 6px;
  color: var(--text-dim, #9a8866); font-size: .9rem;
  text-decoration: none; transition: background .12s, color .12s;
  white-space: nowrap; overflow: hidden;
}
.side-group a::before {
  content: attr(data-icon); flex: 0 0 1.4rem;
  font-size: 1rem; text-align: center;
}
.side-group a:hover { color: var(--accent-2, #f4c95a); background: rgba(227,165,42,.08); }
.side-group a.active {
  color: var(--accent-2, #f4c95a); background: rgba(227,165,42,.12);
  box-shadow: inset 2px 0 0 var(--accent, #e3a52a);
}
body.sb-collapsed .side-group a span,
body.sb-collapsed .side-palette-label,
body.sb-collapsed .side-user-name { display: none; }
body.sb-collapsed .side-group a { justify-content: center; }
body.sb-collapsed .side-group a::before { flex: 0 0 auto; }

.side-foot {
  border-top: 1px solid rgba(74,58,28,.45);
  padding: .55rem .55rem .65rem; display: flex; flex-direction: column; gap: .35rem;
}
.side-palette-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem; border-radius: 6px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(74,58,28,.5);
  color: var(--text-dim, #9a8866); font: inherit; font-size: .82rem;
  cursor: pointer; transition: border-color .12s, color .12s;
}
.side-palette-btn:hover { color: var(--accent-2, #f4c95a); border-color: var(--accent-3, #c8761e); }
.side-palette-icon { color: var(--accent-2, #f4c95a); font-weight: 700; }
.side-palette-label { display: flex; align-items: center; gap: .35rem; flex: 1; }
.side-palette-label kbd {
  margin-left: auto; font-size: .65rem; padding: 1px 4px;
  border: 1px solid rgba(74,58,28,.6); border-radius: 3px;
  color: var(--text-dim, #9a8866);
}
.side-user {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem .5rem; border-radius: 6px;
  color: var(--text-dim, #9a8866); text-decoration: none; font-size: .85rem;
}
.side-user:hover { background: rgba(227,165,42,.06); color: var(--accent-2, #f4c95a); }
.side-user img { border-radius: 50%; }
.side-user-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(227,165,42,.12); color: var(--accent-2, #f4c95a);
  font-weight: 700; font-size: .85rem;
}
.side-logout {
  text-align: center; color: var(--text-dim, #9a8866); text-decoration: none;
  padding: .25rem; border-radius: 5px; font-size: .9rem;
}
.side-logout:hover { color: #ffc7c8; background: rgba(214,56,59,.12); }

@media (max-width: 720px) {
  body.has-sidebar { padding-left: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.sb-mobile-open .sidebar { transform: translateX(0); width: var(--sb-width); }
}

/* ============================================================
   COMMAND PALETTE (Cmd-K)
   ============================================================ */
.palette {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.palette.open { display: flex; }
.palette-card {
  width: min(640px, 92vw);
  background: var(--panel, #171a21);
  border: 1px solid var(--line-strong, #4a3a1c); border-radius: 10px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden;
}
.palette-card input {
  background: transparent; border: 0; outline: 0;
  padding: 1rem 1.1rem; font: inherit; font-size: 1rem;
  color: var(--text); border-bottom: 1px solid var(--line-strong, #4a3a1c);
}
.palette-list { list-style: none; margin: 0; padding: .35rem; max-height: 50vh; overflow-y: auto; }
.palette-list li {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem; border-radius: 6px; cursor: pointer;
  color: var(--text-dim, #9a8866);
}
.palette-list li.active,
.palette-list li:hover { background: rgba(227,165,42,.1); color: var(--accent-2, #f4c95a); }
.palette-list li .pl-icon { width: 1.3rem; text-align: center; }
.palette-list li .pl-label { flex: 1; }
.palette-list li .pl-hint  { font-size: .72rem; color: var(--text-dim, #9a8866); opacity: .7; }
.palette-foot {
  padding: .5rem .85rem; border-top: 1px solid var(--line-strong, #4a3a1c);
  font-size: .72rem; color: var(--text-dim, #9a8866);
}
.palette-foot kbd {
  border: 1px solid rgba(74,58,28,.6); border-radius: 3px;
  padding: 1px 4px; margin: 0 .15rem;
}

/* ============================================================
   UNIVERSAL CARD + MODAL
   .slrp-card is an alias for .card so existing templates get the
   upgraded styling automatically. Use the variants on either class.
   ============================================================ */
.card, .slrp-card {
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #262a33); border-radius: 12px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.card > h2:first-child, .slrp-card > h2:first-child,
.card > h3:first-child, .slrp-card > h3:first-child { margin-top: 0; }
.card.card-tight, .slrp-card.slrp-card-tight { padding: .75rem .9rem; }
.card.card-accent, .slrp-card.slrp-card-accent {
  border-color: rgba(227,165,42,.4);
  box-shadow: 0 0 0 1px rgba(227,165,42,.15) inset;
}
.card.card-danger, .slrp-card.slrp-card-danger,
.card.error {
  border-color: rgba(214,56,59,.45);
  background: linear-gradient(180deg, rgba(214,56,59,.06), var(--panel, #171a21));
}

.slrp-modal {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.slrp-modal.open { display: flex; }
.slrp-modal-card {
  width: min(520px, 100%);
  background: var(--panel, #171a21);
  border: 1px solid var(--line-strong, #4a3a1c); border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  padding: 1.25rem 1.4rem 1.1rem;
}
.slrp-modal-card h2 { margin: 0 0 .9rem; font-size: 1.05rem; color: var(--accent-2,#f4c95a); }
.slrp-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
h1 { margin:0 0 1rem; font-size:1.5rem; }
h2 { margin:1.5rem 0 .75rem; font-size:1.15rem; color:var(--text); }
.muted { color: var(--muted); }
.card {
  background: var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1rem 1.25rem; margin-bottom:1rem;
}
.counts { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat .num { font-size:1.75rem; font-weight:600; }
.stat .lbl { color:var(--muted); font-size:.85rem; }
.grid { width:100%; border-collapse: collapse; }
.grid th, .grid td { text-align:left; padding:.6rem .85rem; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align: top; }
.grid th { color: var(--accent-3,#c8761e); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em;
  border-bottom:1px solid var(--line-strong,#4a3a1c);
  background: rgba(227,165,42,.04); position: sticky; top: 0; }
.grid tbody tr { transition: background .12s; }
.grid tbody tr:hover { background: rgba(227,165,42,.04); }
.grid td code { background: rgba(0,0,0,.3); padding:1px 5px; border-radius:3px; font-size:11px; color: var(--text-dim,#9a8866); }
.grid tbody tr td:first-child { padding-left: 1.1rem; }
.card { border-radius: 12px; }
.card.error { background: rgba(214,56,59,.1); border-color: rgba(214,56,59,.4); color:#ffc7c8; }
.actions { display:flex; gap:.5rem; }
.actions .link, .actions a { background:none; border:0; color:var(--primary); cursor:pointer; padding:0; font:inherit; }
.actions .link.danger { color: var(--danger); }
.btn {
  display:inline-block; padding:.5rem 1rem; border-radius:6px;
  background: var(--bg-3, var(--panel)); border:1px solid var(--line-strong, var(--line));
  color:var(--text); cursor:pointer;
  font: inherit; font-size: 13px; text-decoration:none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { border-color: var(--accent, var(--primary)); color: var(--accent-2, var(--primary));
  text-decoration:none; background: rgba(227,165,42,.06); }
.btn.primary { background: linear-gradient(135deg, var(--accent, var(--primary)), var(--accent-2, var(--primary)));
  border-color: var(--accent-3, var(--primary)); color: #1a120a; font-weight: 700; letter-spacing: .03em; }
.btn.primary:hover { filter: brightness(1.08); color: #1a120a; }
.btn.danger { border-color: rgba(214,56,59,.5); }
.btn.danger:hover { background: rgba(214,56,59,.18); border-color: #d6383b; color: #ffc7c8; }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.form label { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem; color:var(--muted); font-size:.85rem; }
.form input[type=text], .form input[type=password], .form textarea {
  background: #0a0c10; border:1px solid var(--line); color:var(--text);
  padding:.55rem .75rem; border-radius:6px; font: inherit;
}
.form textarea { resize: vertical; }
.form .check { flex-direction:row; align-items:center; gap:.5rem; }
.form.inline { display:flex; gap:.5rem; align-items:center; }
.form.inline input { flex: 0 0 auto; }
.form .actions { margin-top:.5rem; }

.login-wrap { max-width: 380px; margin: 4rem auto; }
.login-wrap h1 { text-align:center; }
.login-wrap form button { width:100%; margin-top:.5rem; }
.login-wrap .error { background: #3a1f1f; color:#ffb4b4; padding:.5rem .75rem; border-radius:6px; margin-bottom:.75rem; font-size:.9rem; }
code { background:#0a0c10; padding:0 .35rem; border-radius:3px; }