/* mcpvillage admin — a self-contained theme built from DESIGN.md (Figma-inspired).
   Monochrome editorial system: black ink on white canvas, hairline borders, pill
   buttons, weight-not-opacity hierarchy, pastel blocks for emphasis. No framework.

   Sans  → General Sans  (figmaSans substitute, variable 200–700)
   Mono  → JetBrains Mono (figmaMono substitute — eyebrows & captions only)
   The single spot of color in the whole UI is the orange logo. */

@font-face {
  font-family: "General Sans";
  src: url("/_/static/admin/general-sans.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_/static/admin/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors (DESIGN.md colors) ─────────────────────────────────────────── */
  --ink: #000000;
  --canvas: #ffffff;
  --inverse-canvas: #000000;
  --inverse-ink: #ffffff;
  --hairline: #e6e6e6;
  --hairline-soft: #f1f1f1;
  --surface-soft: #f7f7f5;

  --block-lime: #dceeb1;
  --block-lilac: #c5b0f4;
  --block-cream: #f4ecd6;
  --block-pink: #efd4d4;
  --block-mint: #c8e6cd;
  --block-coral: #f3c9b6;
  --block-navy: #1f1d3d;

  --success: #1ea64a;
  /* Inline form-validation only — not a system accent. The doc has no error
     color; a restrained red is the pragmatic minimum for usable forms. */
  --danger: #c8372d;
  /* Secondary metadata in an app needs a soft tone; primary copy stays pure ink. */
  --ink-soft: #6b6f76;

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radius (DESIGN.md rounded) ─────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 50px;
  --r-full: 9999px;

  /* ── Spacing (DESIGN.md spacing, 8px base) ──────────────────────────────── */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 96px;

  --app-width: 46rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Belt-and-braces against horizontal scroll on phones: nothing should push the
   page wider than the viewport, even a stray long string or a wide flex child. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.14px;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Type scale (DESIGN.md typography, app-tuned sizes) ────────────────────── */
h1, h2, h3 { color: var(--ink); margin: 0 0 var(--s-sm); font-weight: 600; }
h1 { font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.6px; font-weight: 560; }
h2 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.4px; font-weight: 560; }
h3 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.26px; font-weight: 580; }
p { margin: 0 0 var(--s-md); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink-soft); }
strong { font-weight: 600; }

/* figmaMono eyebrow — uppercase taxonomy label above a heading. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-xs);
}

.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ── The one content width, shared by the bar and the page ────────────────── */
.shell {
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

/* ── App bar (signed-in pages) ────────────────────────────────────────────── */
.app-bar { background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 56px;
}
.app-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: auto; height: 34px; }

.app-nav { display: flex; align-items: center; gap: var(--s-lg); }
.app-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.1px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.app-nav a:hover { color: var(--ink-soft); }
.app-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

.app-content { padding: var(--s-xl) 0 var(--s-section); }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-head { margin-bottom: var(--s-xl); }
.page-head h1 { margin-bottom: var(--s-xxs); }
.page-head .sub { color: var(--ink-soft); font-size: 1rem; margin: 0; }

/* ── Buttons — pill is the only shape (DESIGN.md) ─────────────────────────── */
button, .btn, [role="button"], input[type="submit"], .btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: -0.1px;
  line-height: 1.2;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.04s;
  -webkit-appearance: none;
  appearance: none;
}
button:active, .btn:active, [role="button"]:active { transform: scale(0.985); }

/* Primary = black pill (the brand signature). Default for <button>/role=button. */
button, .btn-primary, [role="button"]:not(.btn-secondary):not(.btn-google) {
  background: var(--ink);
  color: var(--inverse-ink);
  border-color: var(--ink);
}
button:hover, .btn-primary:hover, [role="button"]:not(.btn-secondary):not(.btn-google):hover {
  background: #1c1c1c;
}

/* Secondary = white pill, hairline border (visible on white canvas). */
.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: #c7c7c7; background: var(--surface-soft); }

.btn-block { width: 100%; }

/* Google sign-in — white pill, hairline border; keeps Google's colored glyph. */
.btn-google {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--hairline);
  width: 100%;
  font-weight: 540;
}
.btn-google:hover { border-color: #c7c7c7; background: var(--surface-soft); }
.btn-google svg { width: 18px; height: 18px; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
form { margin: 0; }
label {
  display: block;
  font-weight: 540;
  font-size: 0.9rem;
  letter-spacing: -0.1px;
  margin: var(--s-md) 0 6px;
}
label small { font-weight: 400; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* keeps iOS from auto-zooming */
  line-height: 1.4;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
input[readonly] { background: var(--surface-soft); cursor: pointer; }
input[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="false"] { border-color: var(--success); }

/* Address field: slug input + fixed domain suffix as one joined control. */
.input-group { display: flex; align-items: stretch; }
.input-group input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  white-space: nowrap;
}
.field-status { display: block; font-size: 0.85rem; min-height: 1.25rem; margin-top: 6px; }
.field-status.ok { color: var(--success); }
.field-status.bad { color: var(--danger); }

.form-actions { margin-top: var(--s-lg); }

/* ── Cards & row lists ────────────────────────────────────────────────────── */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
}

.card-list { display: flex; flex-direction: column; gap: var(--s-sm); margin-bottom: var(--s-xl); }
.row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s;
}
.row-card:hover { border-color: #c7c7c7; }
.row-title { display: block; font-weight: 580; letter-spacing: -0.2px; }
.row-sub { display: block; font-size: 0.88rem; color: var(--ink-soft); margin-top: 2px; }
.row-card .arrow { font-size: 1.4rem; line-height: 1; color: var(--ink-soft); }

/* ── Copy-field component (reusable click-to-copy, see copy.js) ────────────── */
.copy-field { margin-bottom: var(--s-md); }
.copy-row { display: flex; align-items: stretch; gap: var(--s-xs); }
.copy-row input, .copy-row textarea { flex: 1 1 auto; min-width: 0; }
.copy-btn {
  flex: 0 0 auto;
  width: 46px;
  min-height: 0;          /* override base button min-height */
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);  /* not a pill — it's an icon control */
}
.copy-btn:hover { background: var(--surface-soft); border-color: #c7c7c7; }
/* A text button (e.g. logo Upload) sharing a .copy-row with an input. */
.copy-row .btn-secondary { flex: 0 0 auto; white-space: nowrap; }
.copy-btn svg { width: 18px; height: 18px; }
.copy-btn .i-check { display: none; }
.copy-btn.copied { color: var(--success); border-color: var(--success); }
.copy-btn.copied .i-copy { display: none; }
.copy-btn.copied .i-check { display: inline; }

/* ── Auth / focused card (sign in, code, create site) ─────────────────────── */
.auth { max-width: 25rem; margin: 0 auto; padding: var(--s-xl) var(--s-lg) var(--s-section); }
.auth-logo { text-align: center; margin-bottom: var(--s-xl); }
.auth-logo .brand-logo { height: 34px; margin: 0 auto; }
.auth h1 { font-size: 1.6rem; margin-bottom: var(--s-xs); }
.auth .sub { color: var(--ink-soft); margin: 0 0 var(--s-lg); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: var(--s-md) 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.auth-legal { margin-top: var(--s-lg); text-align: center; font-size: 0.82rem; color: var(--ink-soft); }
.auth-legal a { color: var(--ink-soft); }

.error-note {
  border: 1px solid var(--danger);
  color: var(--danger);
  background: #fdf3f2;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--s-md);
  font-size: 0.9rem;
}

/* ── Pastel color block (emphasis panel — DESIGN.md signature) ─────────────── */
.color-block {
  border-radius: var(--r-lg);
  padding: var(--s-xxl);
  margin: var(--s-lg) 0;
}
.color-block.lime { background: var(--block-lime); }
.color-block.lilac { background: var(--block-lilac); }
.color-block.cream { background: var(--block-cream); }
.color-block.navy { background: var(--block-navy); color: var(--inverse-ink); }
.color-block.navy h1, .color-block.navy h2, .color-block.navy h3 { color: var(--inverse-ink); }

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.legal { padding: var(--s-xl) 0 var(--s-section); }
.legal h1 { font-size: 1.9rem; margin-bottom: var(--s-xxs); }
.legal .updated { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: var(--s-xl); }
.legal h2 { font-size: 1.25rem; margin-top: var(--s-xl); }
.legal p, .legal li { line-height: 1.7; }
.legal ul { margin: 0 0 var(--s-md); padding-left: 1.2rem; }
.legal-footer {
  margin-top: var(--s-xxl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.legal-footer a { color: var(--ink-soft); }
.legal-footer div { margin-top: 6px; }

/* ── Dashboard: per-site cards ────────────────────────────────────────────── */
.site-cards { display: flex; flex-direction: column; gap: var(--s-md); margin-bottom: var(--s-xl); }
.site-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-lg); }
.site-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-sm); }
.site-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-name { font-weight: 580; font-size: 1.1rem; letter-spacing: -0.2px; text-decoration: none; overflow-wrap: anywhere; }
.site-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-host { font-size: 0.85rem; color: var(--ink-soft); }
.site-updated { font-size: 0.82rem; color: var(--ink-soft); margin: var(--s-xs) 0 var(--s-md); }

.status-pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}
.status-live { background: var(--block-lime); border-color: transparent; color: #2e3d10; }
.status-unbuilt { background: var(--surface-soft); }

/* The OAuth connect surface on a card. */
.connect-mini { background: var(--surface-soft); border-radius: var(--r-md); padding: var(--s-sm); }
.connect-mini input { background: var(--canvas); }
.connect-label { display: block; font-weight: 540; font-size: 0.85rem; margin-bottom: 6px; }
.connect-label small { color: var(--ink-soft); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; }
.connect-hint { font-size: 0.76rem; color: var(--ink-soft); margin: 6px 0 0; }

/* Five per-site actions, icon over label. */
.site-actions {
  display: flex;
  gap: var(--s-xxs);
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline-soft);
}
.site-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--s-xs) 2px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 520;
  letter-spacing: -0.1px;
  transition: background-color 0.12s;
}
.site-action:hover { background: var(--surface-soft); }
.site-action svg { width: 20px; height: 20px; }

/* ── Per-site sub-pages: header + sub-nav ─────────────────────────────────── */
.site-head { margin-bottom: var(--s-md); }
.site-head .eyebrow a { color: var(--ink-soft); text-decoration: none; }
.site-head .eyebrow a:hover { color: var(--ink); }

.site-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-xl);
  border-bottom: 1px solid var(--hairline);
}
.site-subnav a {
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 520;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.site-subnav a:hover { color: var(--ink); }
.site-subnav a.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Overview: stat strip + content/file lists ────────────────────────────── */
.stat-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); margin-bottom: var(--s-xl); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-k { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.stat-v { font-weight: 580; font-size: 1.05rem; }

.overview-block { margin-bottom: var(--s-xl); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-xxs); }
.block-head h3 { margin: 0; }
.block-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 var(--s-sm); }

.add-row { display: flex; gap: var(--s-xs); margin-bottom: var(--s-sm); }
.add-row input { flex: 1; }
.add-row button { flex: 0 0 auto; }

.item-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  border-top: 1px solid var(--hairline-soft);
}
.item-row:first-child { border-top: 0; }
.item-row form { flex: 0 0 auto; }
.item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.item-path { font-weight: 520; font-size: 0.92rem; overflow-wrap: anywhere; }
.item-meta { font-size: 0.74rem; color: var(--ink-soft); font-family: var(--mono); overflow-wrap: anywhere; }

.empty {
  padding: var(--s-md);
  color: var(--ink-soft);
  font-size: 0.9rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  margin: 0;
}
.item-list .empty { border: 0; }

.btn-trash {
  width: 38px;
  min-height: 38px;
  padding: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.btn-trash:hover { color: var(--danger); border-color: var(--danger); background: #fdf3f2; }
.btn-trash svg { width: 16px; height: 16px; }

.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }

.ok-note {
  border: 1px solid var(--success);
  color: #176c34;
  background: #f0faf3;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--s-md);
  font-size: 0.9rem;
}

/* ── Settings ─────────────────────────────────────────────────────────────── */
.field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }

/* Manual (token) fallback on Connect. */
.manual { margin-top: var(--s-lg); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-sm) var(--s-md); }
.manual summary { cursor: pointer; font-weight: 540; font-size: 0.9rem; }
.manual[open] summary { margin-bottom: var(--s-sm); }

/* ── Tools: capability catalog ────────────────────────────────────────────── */
.tool-group { margin-bottom: var(--s-md); }
.cap-list { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.cap-list li { display: flex; flex-direction: column; gap: 1px; padding-left: var(--s-md); border-left: 2px solid var(--hairline); }
.cap-label { font-weight: 540; font-size: 0.92rem; }
.cap-desc { font-size: 0.82rem; color: var(--ink-soft); }
.teaser { background: var(--surface-soft); border-style: dashed; }
.soon {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Hide the scrollbar on horizontal tab strips (kept scrollable by touch/trackpad)
   while never letting them widen the page. Used by the app nav and site sub-nav. */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  max-width: 100%;
}
.scroll-x::-webkit-scrollbar { display: none; }  /* WebKit */

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .shell { padding: 0 var(--s-md); }   /* roomier gutters → more usable width */
  .app-bar-inner { gap: var(--s-sm); }
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }

  /* App bar: a tidy two-row bar — smaller logo up top, the nav a tight,
     horizontally-scrollable strip beneath it (never wraps, never overflows). */
  .app-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-xs);
    min-height: 0;
    padding-top: var(--s-sm);
    padding-bottom: var(--s-xs);
  }
  .brand-logo { height: 28px; }
  .app-nav {
    gap: var(--s-md);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { min-height: 36px; font-size: 0.92rem; white-space: nowrap; }

  .app-content { padding-top: var(--s-lg); }
  .color-block { padding: var(--s-lg); }
  .auth { padding-top: var(--s-lg); }
  .btn-block, .form-actions button, .form-actions .btn { width: 100%; }

  .stat-card { grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
  .field-2col { grid-template-columns: 1fr; }

  .site-action { font-size: 0.68rem; }
  .site-action svg { width: 18px; height: 18px; }

  /* Sub-nav: a single-line tab strip that scrolls sideways instead of wrapping,
     so the active underline reads as a clean row of tabs. */
  .site-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-bottom: var(--s-lg);
  }
  .site-subnav::-webkit-scrollbar { display: none; }
  .site-subnav a { padding: 8px 10px; font-size: 0.88rem; }
}

/* ── Small phone ──────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .shell { padding: 0 var(--s-sm); }
  .app-nav { gap: var(--s-sm); }
  .site-actions { gap: 0; }
  .site-action { padding-left: 0; padding-right: 0; }
}

/* ── Media library ────────────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-md);
}
.media-item {
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #f4f4f4;
  display: block;
}
.media-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.74rem;
  line-height: 1.3;
  min-width: 0;
}
.media-meta .media-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-item .copy-row { margin: 0; }
.media-item .copy-row input { font-size: 0.74rem; }
.media-item form { margin: 0; }
.media-item .btn-trash { width: 100%; }