/* =========================================================
   Design tokens
   ========================================================= */
:root {
  /* Dark theme (default) — matches programinds.com's palette */
  --bg: #0a0a0f;
  --bg-elevated: #121218;
  --surface: #16161f;
  --surface-2: #1b1b26;
  --surface-hover: #222230;
  --border: #2a2a3a;
  --border-strong: #383850;
  --text: #f0f0f5;
  --text-muted: #a0a0b8;
  --text-subtle: #6c6c88;
  --accent: #6c5ce7;
  --accent-hover: #8175ea;
  --accent-soft: rgba(108, 92, 231, 0.14);
  --accent-border: rgba(108, 92, 231, 0.35);
  --accent-2: #00cec9;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-hover: #fca5a5;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.5);

  /* No external font loading — self-contained, works with no internet access */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-w: 240px;
  --header-h: 60px;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="light"] {
  --bg: #f7f6fb;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1eff8;
  --surface-hover: #e9e6f5;
  --border: #e2ddf0;
  --border-strong: #cdc5e8;
  --text: #16151f;
  --text-muted: #5c5a70;
  --text-subtle: #8a87a0;
  --accent: #5b4bd6;
  --accent-hover: #4c3ec2;
  --accent-soft: rgba(91, 75, 214, 0.08);
  --accent-border: rgba(91, 75, 214, 0.25);
  --accent-2: #00a19c;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 12px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 20px 40px -10px rgba(16, 24, 40, 0.12);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 18px; line-height: 1.3; }
h3 { font-size: 15px; line-height: 1.4; }
p { margin: 0; }

::selection { background: var(--accent-soft); color: var(--text); }

/* =========================================================
   Motion
   ========================================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-head, .card, .alert, .empty-state, .project-item, .viewer-card {
  animation: fadeInUp 220ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

/* Respect the OS-level "reduce motion" setting — everything above still
   works, it just stops moving instead of breaking. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Layout: admin app (sidebar + header)
   ========================================================= */
.app { min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 6px;
  overflow-y: auto;
  z-index: 30;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sidebar-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.sidebar-brand-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.sidebar-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  padding: 14px 10px 6px;
  font-weight: 600;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sidebar-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.sidebar-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-user {
  padding: 6px 10px 10px;
  font-size: 12px;
  color: var(--text-subtle);
}

/* Main content area — offset by the fixed sidebar's width */
.main { display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: var(--bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
}
.topbar-title { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-crumb { color: var(--text-muted); font-size: 13px; }
.topbar-spacer { flex: 1; }

.icon-btn, .theme-toggle {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover, .theme-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.icon-btn svg, .theme-toggle svg { width: 18px; height: 18px; }
[data-theme-toggle] .icon-sun { display: none; }
:root[data-theme="light"] [data-theme-toggle] .icon-moon { display: none; }
:root[data-theme="light"] [data-theme-toggle] .icon-sun { display: block; }

.mobile-menu-btn { display: none; }

.content { padding: 32px 28px 60px; max-width: 1200px; width: 100%; margin: 0 auto; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; }
.page-head .subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }

/* =========================================================
   Cards
   ========================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
/* Consistent vertical rhythm between any two stacked content blocks —
   not just card-after-card. Previously only `.card + .card` had spacing,
   so a card sitting next to an .empty-state, .alert, or .project-list
   (any page with zero items, e.g. an empty backups list) collapsed
   together with no gap at all. Adjacent block margins collapse in normal
   flow, so this also settles cleanly against .page-head's own margin
   instead of stacking on top of it. */
.card, .alert, .empty-state, .project-list { margin-top: 20px; }
.page-head + .card, .page-head + .alert, .page-head + .empty-state, .page-head + .project-list {
  margin-top: 28px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; row-gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.card-head h2 { font-size: 15px; }
.card-head .hint { color: var(--text-muted); font-size: 12.5px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn svg { width: 14px; height: 14px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.2); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(108,92,231,0.35); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* Shown while a form is submitting, to prevent double-clicks on slow
   actions (uploads, extraction, eviction) and give clear feedback. */
.btn.is-loading { pointer-events: none; opacity: 0.7; }
.btn.is-loading svg { animation: spin 0.7s linear infinite; }

.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); text-decoration: none; }

.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; text-decoration: none; }

.btn-sm { padding: 6px 10px; font-size: 12.5px; }
.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================
   Forms
   ========================================================= */
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; }
.field-label .optional { font-size: 11px; color: var(--text-subtle); font-weight: 400; }
.field-hint { font-size: 12px; color: var(--text-muted); }

.input {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder { color: var(--text-subtle); }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }

.file-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
}
.file-input:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-input input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-input-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.file-input-icon svg { width: 18px; height: 18px; }
.file-input-text { font-size: 13px; }
.file-input-text strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.file-input-text span { color: var(--text-muted); font-size: 12px; }

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

/* =========================================================
   Tables
   ========================================================= */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

.table-empty { padding: 36px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* =========================================================
   Badges / status pills
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-active  { background: var(--success-soft); color: var(--success); }
.badge-revoked { background: var(--danger-soft);  color: var(--danger); }
.badge-expired { background: var(--warning-soft); color: var(--warning); }

/* =========================================================
   Storage meter
   ========================================================= */
.meter {
  position: relative; /* anchors .meter-reserve-marker */
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; /* segments lay out left-to-right, each just a % width */
}
.meter-fill { height: 100%; transition: width 0.3s ease; }
.meter-fill.success { background: var(--success); }
.meter-fill.warning { background: var(--warning); }
.meter-fill.danger  { background: var(--danger); }
/* Backups share the same limit as projects now, but capped at (limit -
   reserve) — a distinct color still helps tell the two segments apart. */
.meter-fill-backup { height: 100%; background: var(--accent-2); transition: width 0.3s ease; }
/* Marks where the backups cap sits — the strip from here to 100% is the
   headroom backups can never grow into, always left free for projects. */
.meter-reserve-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bg);
  opacity: 0.6;
}
.meter-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; margin-bottom: 8px; gap: 8px; }
.meter-label { font-size: 13px; color: var(--text); font-weight: 500; }
.meter-sub { font-size: 12px; color: var(--text-muted); }
.meter-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.meter-legend-item { display: flex; align-items: center; gap: 6px; }
.meter-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.meter-legend-dot.success { background: var(--success); }
.meter-legend-dot.warning { background: var(--warning); }
.meter-legend-dot.danger  { background: var(--danger); }
.meter-legend-dot.backups { background: var(--accent-2); }
.meter-legend-dot.reserve { background: transparent; border: 1.5px solid var(--text-subtle); }

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* =========================================================
   Project list (dashboard)
   ========================================================= */
.project-list { display: grid; gap: 10px; }
.project-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.project-item:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.project-item-main { min-width: 0; }
.project-item-name { font-weight: 600; font-size: 14.5px; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.project-item-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.project-item-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.project-item-meta a:hover { color: var(--accent); }
.project-item-meta svg { width: 12px; height: 12px; }
.project-item-actions { display: flex; gap: 8px; }

/* =========================================================
   Live link / copy row
   ========================================================= */
.copy-row {
  display: flex;
  align-items: stretch;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}
.copy-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.copy-row-input {
  flex: 1;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  outline: none;
  min-width: 0;
}
.copy-row-btn {
  padding: 0 12px;
  background: var(--surface-2);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
}
.copy-row-btn:hover { background: var(--surface-hover); color: var(--text); }
.copy-row-btn svg { width: 14px; height: 14px; }
.copy-row-btn.copied { color: var(--success); }

/* =========================================================
   Alerts / empty states
   ========================================================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  margin-bottom: 18px;
}
.alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alert-error   { border-color: rgba(248,113,113,0.3); background: var(--danger-soft); color: var(--danger); }
.alert-success { border-color: rgba(52,211,153,0.3); background: var(--success-soft); color: var(--success); }
.alert-warn    { border-color: rgba(251,191,36,0.3);  background: var(--warning-soft); color: var(--warning); }
.alert-body { flex: 1; min-width: 0; }

.empty-state { text-align: center; padding: 56px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.empty-state-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
}
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state h3 { margin-bottom: 4px; }
.empty-state p { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }

/* =========================================================
   Viewer pages (centered card)
   ========================================================= */
.viewer-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(91,141,239,0.12), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(139,92,246,0.10), transparent 60%),
    var(--bg);
}
:root[data-theme="light"] .viewer-shell {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(59,111,224,0.08), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(139,92,246,0.06), transparent 60%),
    var(--bg);
}
.viewer-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg); }
.viewer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.viewer-brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.viewer-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.viewer-card h1 { font-size: 20px; margin-bottom: 6px; }
.viewer-card .lead { color: var(--text-muted); font-size: 13.5px; margin-bottom: 22px; }

.viewer-status-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center; }
.viewer-status-icon.danger { background: var(--danger-soft); color: var(--danger); }
.viewer-status-icon.warn   { background: var(--warning-soft); color: var(--warning); }
.viewer-status-icon svg { width: 26px; height: 26px; }

/* =========================================================
   Toast
   ========================================================= */
.toast-host { position: fixed; top: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  min-width: 220px;
  animation: toastIn 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.success { border-color: rgba(52,211,153,0.35); color: var(--success); }
.toast.error   { border-color: rgba(248,113,113,0.35); color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .sidebar {
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .mobile-menu-btn { display: inline-grid; }
  .content { padding: 22px 18px 48px; }
  .topbar { padding: 0 18px; }
}

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .btn { align-self: flex-start; }
  .project-item { grid-template-columns: 1fr; }
  .project-item-actions { justify-content: flex-start; }
  .viewer-card { padding: 24px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

/* Utility */
.muted { color: var(--text-muted); font-size: 0.85em; }
code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-2); border: 1px solid var(--border); padding: 0.1rem 0.4rem; border-radius: 4px; }
form.inline { display: inline; }