/* enidu Studio — minimal CSS for server-rendered admin */
:root {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bg: #faf8f5;
  --bg-elev: #ffffff;
  --bg-deep: #f2efe9;
  --ink: #1f1b16;
  --ink-soft: #4a4540;
  --ink-mute: #8a857e;
  --line: #e8e4de;
  --primary: #e85d2a;
  --primary-soft: #fef0ea;
  --primary-deep: #b8431a;
  --accent: #2a8a5a;
  --accent-soft: #e6f5ed;
  --warn: #c8811a;
  --warn-soft: #fdf3e0;
  --shadow: 0 8px 24px -8px rgba(31,27,22,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.4; }

.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.admin-topbar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.admin-topbar .brand .dot { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: var(--bg-elev); display: grid; place-items: center; font-size: 14px; transform: rotate(-6deg); }
.admin-topbar .brand .pill { font-size: 9px; padding: 3px 8px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 8%, transparent); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

.admin-body { display: grid; grid-template-columns: 220px 1fr; flex: 1; }
.admin-sidebar {
  padding: 20px 12px; border-right: 1px solid var(--line);
  background: var(--bg-elev); display: flex; flex-direction: column; gap: 2px;
}
.admin-sidebar .group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); font-weight: 700; padding: 16px 12px 6px; }
.admin-sidebar .nav-item { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.admin-sidebar .nav-item:hover { background: var(--bg-deep); }
.admin-sidebar .nav-active { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }

.admin-main { padding: 28px 32px; max-width: 960px; }
.page-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.page-title h1 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.page-title .sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-tile { padding: 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; }
.stat-tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); font-weight: 700; }
.stat-tile .value { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin-top: 4px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--bg-elev); }
.btn-primary:hover { background: var(--primary-deep); }
.btn-ghost { background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-soft); }
.btn-lg { padding: 14px 24px; font-size: 14px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.field-hint { font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.input, .textarea, .select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--bg-elev); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--primary); }
.textarea { min-height: 80px; resize: vertical; }

.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; }
.chip { display: inline-flex; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-soft); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg-elev); }
.filter-chips { display: flex; gap: 6px; margin-bottom: 16px; }

.quiz-table { display: flex; flex-direction: column; }
.quiz-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 40px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); gap: 12px; }
.quiz-table-row.head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); font-weight: 700; }
.quiz-table-row.body { cursor: pointer; border-radius: 12px; }
.quiz-table-row.body:hover { background: var(--bg-deep); }

.step-track { display: flex; gap: 8px; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-mute); }
.step.active { background: var(--primary-soft); color: var(--primary-deep); }
.step.done { color: var(--accent); }
.step .num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-deep); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.step.active .num { background: var(--primary); color: var(--bg-elev); }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-elev); padding: 4px; border-radius: 999px; width: fit-content; border: 1px solid var(--line); }
.tab { padding: 8px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; background: transparent; color: var(--ink-soft); cursor: pointer; border: none; font-family: inherit; }
.tab.active { background: var(--ink); color: var(--bg-elev); }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 40px; }
.auth-form { width: 100%; max-width: 440px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; }
.status.live { background: #e6f5ed; color: #2a8a5a; }
.status.live .dot { background: #2a8a5a; }
.status.draft { background: #f2efe9; color: #8a857e; }
.status.draft .dot { background: #8a857e; }
.status.scheduled { background: #e8f0ff; color: #3a6bc8; }
.status.scheduled .dot { background: #3a6bc8; }
.status.closed { background: #f5f0ea; color: #6b5a3d; }
.status.closed .dot { background: #6b5a3d; }