/* ShuleHub design system: warm neutrals, one teal accent, Geist type, 8px grid. Light + dark. */
:root {
  --bg:#ffffff; --bg-subtle:#fafaf9; --card:#ffffff; --hover:#f5f5f4; --sel:#f0efed;
  --ink:#1c1917; --ink-2:#44403c; --muted:#78716c; --line:#e7e5e4; --line-2:#f0efed; --line-strong:#d6d3d1;
  --accent:#0f766e; --accent-hover:#115e59; --accent-ink:#ffffff; --soft:#f0fdfa; --soft-ink:#0f766e;
  --ok:#047857; --ok-bg:#ecfdf5; --ok-dot:#10b981;
  --info:#1d4ed8; --info-bg:#eff6ff; --info-dot:#2563eb;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-dot:#f59e0b;
  --danger:#b91c1c; --danger-bg:#fef2f2;
  --shadow-sm:0 1px 2px rgba(28,25,23,.05); --shadow-md:0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.07);
  --shadow-lg:0 12px 32px rgba(28,25,23,.14);
  --radius:8px; --radius-lg:12px;
  --font:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c0a09; --bg-subtle:#121110; --card:#171514; --hover:#1f1d1b; --sel:#262321;
    --ink:#f5f5f4; --ink-2:#d6d3d1; --muted:#a8a29e; --line:#292524; --line-2:#1f1d1c; --line-strong:#3a3532;
    --accent:#2dd4bf; --accent-hover:#5eead4; --accent-ink:#042f2e; --soft:#0f2a27; --soft-ink:#5eead4;
    --ok:#6ee7b7; --ok-bg:#062c22; --ok-dot:#34d399;
    --info:#93c5fd; --info-bg:#0f1d33; --info-dot:#60a5fa;
    --warn:#fcd34d; --warn-bg:#2a1f07; --warn-dot:#f59e0b;
    --danger:#fca5a5; --danger-bg:#2a1414;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 12px 32px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
body { margin:0; font:14px/20px var(--font); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
a:hover { color:var(--accent-hover); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* form controls */
select, input, textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:7px 10px; min-height:36px; }
input::placeholder, textarea::placeholder { color:var(--muted); }
select:focus, input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea { resize:vertical; }

/* buttons: default = secondary */
button { font:inherit; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:0 12px; min-height:36px; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:6px; box-shadow:var(--shadow-sm); transition:background .12s, border-color .12s, color .12s; }
button:hover { background:var(--hover); }
button svg { width:16px; height:16px; flex:none; }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); }
button.ghost:hover { background:var(--hover); color:var(--ink); }
button.danger { color:var(--danger); background:transparent; border-color:transparent; box-shadow:none; }
button.danger:hover { background:var(--danger-bg); }
button.icon { width:32px; min-height:32px; padding:0; }
button:disabled { opacity:.5; cursor:default; }
kbd { font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 5px; background:var(--card); }

/* badges */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:20px; font-weight:500; padding:0 8px;
  border-radius:999px; background:var(--hover); color:var(--ink-2); white-space:nowrap; width:fit-content; }
.badge::before { content:''; width:6px; height:6px; border-radius:3px; background:currentColor; opacity:.9; }
.badge.plain::before { display:none; }
.badge.ok { background:var(--ok-bg); color:var(--ok); }
.badge.info { background:var(--info-bg); color:var(--info); }
.badge.warn { background:var(--warn-bg); color:var(--warn); }
.badge.danger { background:var(--danger-bg); color:var(--danger); }
.badge.busy::before { animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }

/* popover menu */
.menu-pop { position:fixed; z-index:40; min-width:200px; background:var(--card); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:4px; display:none; }
.menu-pop.show { display:block; }
.menu-pop button { width:100%; justify-content:flex-start; gap:10px; min-height:34px; padding:0 10px; border:0; box-shadow:none;
  background:transparent; border-radius:6px; font-weight:400; text-align:left; }
.menu-pop button:hover, .menu-pop button:focus-visible { background:var(--hover); outline:none; }
.menu-pop button.danger { color:var(--danger); }
.menu-pop hr { border:0; border-top:1px solid var(--line); margin:4px 0; }
.menu-pop .hd { font-size:12px; color:var(--muted); padding:6px 10px 2px; font-weight:500; }
.menu-pop small { display:block; color:var(--muted); font-size:12px; line-height:16px; }

.muted { color:var(--muted); }
.small { font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.logo { width:28px; height:28px; border-radius:7px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; flex:none; letter-spacing:.02em; }
.avatar { width:32px; height:32px; border-radius:16px; background:var(--sel); color:var(--ink-2); font-weight:600; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; flex:none; }