:root {
  --bg:#f4f0ea; --surface:#fbf8f3; --surface-2:#efebe3;
  --rule:#e2dcd0; --rule-strong:#c9c1b1;
  --ink-1:#1f2330; --ink-2:#4a4f5c; --ink-3:#7a7e8a; --ink-4:#a8a99f;
  --accent:#fe9000; --accent-soft:#ffe9c9; --accent-deep:#c46f00;
  --ok:#2f6f3e; --ok-bg:#dcefe0; --err:#8a3a2a; --err-bg:#f3dcd4;
  --font:'Source Sans 3',-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:6px; --radius-lg:10px;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#14161b; --surface:#1c1f25; --surface-2:#262a31;
  --rule:#323843; --rule-strong:#47505d;
  --ink-1:#f1f2f4; --ink-2:#c4c9d2; --ink-3:#8b919c; --ink-4:#646b77;
  --accent:#fe9000; --accent-soft:#3a2a10; --accent-deep:#ffb454;
  --ok:#5bbd72; --ok-bg:#16301d; --err:#e9806b; --err-bg:#3a1d16;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font:15px/1.5 var(--font);
  color:var(--ink-1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1 { font-size:24px; font-weight:600; margin:0; }
a { color:inherit; text-decoration:none; }

/* Themed scrollbars so OS chrome matches the palette. */
* { scrollbar-color:var(--rule-strong) transparent; scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--rule-strong); border-radius:999px; border:2px solid transparent; background-clip:content-box; }

/* ---- Layout shell ---- */
.app {
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:60px 1fr;
  grid-template-areas:"side topbar" "side main";
  height:100vh;
  overflow:hidden;
}
.sidebar {
  grid-area:side;
  width:240px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--rule);
  background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 6%, var(--surface)));
  transition:width .2s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.topbar {
  grid-area:topbar;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px 0 24px;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface)));
}
main {
  grid-area:main;
  padding:28px 32px 48px;
  overflow:auto;
}

/* ---- Brand ---- */
.brand { display:flex; align-items:center; gap:10px; padding:0 20px; height:60px; flex:0 0 auto; }
.brand-dot { width:18px; height:18px; border-radius:5px; background:var(--accent); flex:0 0 auto; }
.brand-name { font-weight:700; letter-spacing:.04em; font-size:16px; white-space:nowrap; }

/* ---- Nav ---- */
.nav { flex:1 1 auto; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--radius);
  color:var(--ink-2); font-weight:600; font-size:14px;
  border-left:3px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.nav-item:hover { background:var(--surface-2); color:var(--ink-1); }
.nav-item.active { background:var(--accent-soft); color:var(--accent-deep); border-left-color:var(--accent); }
.nav-label { transition:opacity .15s ease; }

.nav-collapse {
  flex:0 0 auto; margin:8px; padding:9px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--ink-3); cursor:pointer;
}
.nav-collapse:hover { background:var(--surface-2); color:var(--ink-1); }

/* Collapsed icon rail */
.app.nav-collapsed { grid-template-columns:66px 1fr; }
.app.nav-collapsed .sidebar { width:66px; }
.app.nav-collapsed .brand-name,
.app.nav-collapsed .nav-label { opacity:0; width:0; }
.app.nav-collapsed .nav-item { justify-content:center; border-left-color:transparent; }
.app.nav-collapsed .nav-item.active { border-left-color:transparent; }
.app.nav-collapsed .nav-collapse svg { transform:rotate(180deg); }

/* ---- Topbar bits ---- */
.topbar-left, .topbar-right { display:flex; align-items:center; gap:10px; }
.crumbs { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; }
.crumb-sep { color:var(--ink-4); }
.crumb:last-child { color:var(--ink-1); }

.icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  background:transparent; border:1px solid transparent; border-radius:var(--radius);
  color:var(--ink-2); cursor:pointer;
}
.icon-btn:hover { background:var(--surface-2); color:var(--ink-1); }
.burger { display:none; }

.user-chip {
  display:flex; align-items:center; gap:8px;
  padding:5px 11px 5px 6px; border:1px solid var(--rule); border-radius:999px;
  color:var(--ink-2); font-weight:600; font-size:14px; cursor:pointer;
}
.user-chip:hover { background:var(--surface-2); }
.avatar {
  width:24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-deep); font-size:12px; font-weight:700;
}

.ic { width:18px; height:18px; display:block; }

/* ---- Buttons ---- */
button, .btn {
  font:inherit; font-weight:600;
  padding:8px 16px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-deep); }
.btn-ghost { background:var(--bg); border-color:var(--rule); color:var(--ink-2); }
.btn-ghost:hover { background:var(--surface-2); color:var(--ink-1); }
.btn-danger { background:var(--err-bg); color:var(--err); }
.btn:disabled, button:disabled { opacity:.5; cursor:default; }

.lnk { color:var(--accent-deep); font-weight:600; }
.lnk:hover { text-decoration:underline; }

/* ---- Surfaces ---- */
.card {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius-lg); padding:20px;
}
.page-head { margin-bottom:20px; }
.page-head .sub { margin:6px 0 0; color:var(--ink-3); }
.card + .card { margin-top:16px; }

code, .mono { font-family:var(--mono); }

/* ---- View enter animation ---- */
#view.enter { animation:enter .18s ease; }
@keyframes enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ---- Off-canvas drawer (mobile) ---- */
.scrim {
  position:fixed; inset:0; background:rgba(0,0,0,.32);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;
}

@media (max-width:1024px) {
  .app { grid-template-columns:1fr; grid-template-areas:"topbar" "main"; }
  .sidebar {
    position:fixed; top:0; left:0; bottom:0; width:240px; z-index:40;
    transform:translateX(-100%); transition:transform .2s cubic-bezier(.4,0,.2,1);
  }
  .app.drawer-open .sidebar { transform:none; }
  .app.drawer-open .scrim { opacity:1; pointer-events:auto; }
  .nav-collapse { display:none; }
  .burger { display:flex; }
}

@media (prefers-reduced-motion:reduce) {
  *, ::before, ::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}