/* The app's styling: a single dark, modern theme — pure CSS (NO JS, NO
toggle, NO light mode; the one stylesheet + the one script are the only
assets). The palette is the :root token block (CSS custom properties;
color-scheme: dark renders the native controls + scrollbars dark). The
theme covers the shared chrome (the top nav bar — logo left, links
right — and the admin variant's two-column body: the fixed-width side
menu left, the main content flexing), the page text, the buttons (the
base raised surface + the per-role primary / secondary / danger /
compact overlays), the form controls (the raised inputs / selects /
textareas + the accent focus ring; the checkbox via accent-color), the
listing tables (the brands + the articles + the media pages), the
add + edit modals + the media upload modal, the articles create +
edit forms' block editor (the Edit /
Preview underline tab bar, the block cards, the per-block up / down /
remove controls, and the preview's validation error), and the content
components (the shared .component wrapper + the youtube component — the
16/9 thumbnail, the centered circular play button, and the embedded
iframe). NO transitions / animations (the theme is static). Loaded by
every page via the head partial (one source of truth — both layout
variants include it by constant name). */

:root {
  color-scheme: dark;
  --bg: #0d1117;           /* the page background */
  --bg-panel: #161b22;     /* chrome (top nav, side nav), the table background, the modal panel, the block cards */
  --bg-raised: #21262e;    /* inputs / select / textarea, the secondary buttons, the hover row */
  --border: #30363d;       /* all borders */
  --border-strong: #484f58;/* the hover border */
  --text: #e6edf3;         /* the primary text */
  --text-muted: #8b949e;   /* the secondary text (nav links, table headers, hints, details) */
  --accent: #2f81f7;       /* the primary buttons, links, focus ring */
  --accent-hover: #388bfd;
  --danger: #f85149;       /* the delete buttons, the preview error */
  --danger-soft: rgba(248, 81, 73, 0.12);
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* the global base (static — no transitions / animations). */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
main.content { padding: 1rem 1.25rem; }
::selection { background: var(--accent); color: #fff; }

/* the shared chrome: the top nav bar (logo left, links right) + the admin variant's side menu (the fixed-width column, the vertical link list — hover only, NO active-item state). */
.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.top-nav-logo { max-height: 60px; }
.top-nav-links { display: flex; align-items: center; gap: 1rem; }
.top-nav a { color: var(--text); }
.top-nav a:hover { color: var(--accent); }
.top-nav-logout { color: var(--text-muted); }
.top-nav-logout:hover { color: var(--text); }
.admin-body { display: flex; align-items: stretch; }
.side-nav { flex: 0 0 160px; padding: 0.5rem 1rem; border-right: 1px solid var(--border); background: var(--bg-panel); }
.side-nav a { display: block; padding: 0.25rem 0; color: var(--text-muted); }
.side-nav a:hover { color: var(--text); }
.admin-body .content { flex: 1; }

/* the page text (the error page's subheading + details; the .page-intro paragraphs inherit the body text). */
.page-subheading { font-size: 1.25rem; font-weight: 600; }
.page-details { color: var(--text-muted); }

/* the buttons: every button gets the base (the raised surface + the border hover), then the per-role overlays — primary (the accent), secondary (the base style: #brands-add-cancel, #brands-edit-cancel, .brands-edit-btn, .articles-edit-link, #add-markdown-btn, #add-component-btn), danger (the red outline), compact (the per-block controls). */
button { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); cursor: pointer; }
button:hover { border-color: var(--border-strong); }
#brands-add-btn, #brands-add-form button[type="submit"], #brands-edit-form button[type="submit"], #articles-new-form button[type="submit"], #articles-edit-form button[type="submit"], .articles-new-link { background: var(--accent); border-color: transparent; color: #fff; }
#brands-add-btn:hover, #brands-add-form button[type="submit"]:hover, #brands-edit-form button[type="submit"]:hover, #articles-new-form button[type="submit"]:hover, #articles-edit-form button[type="submit"]:hover, .articles-new-link:hover { background: var(--accent-hover); border-color: transparent; }
.brands-delete-btn, .articles-delete-btn, .media-folder-delete-btn, .media-file-delete-btn, .block-remove { background: transparent; border-color: var(--danger); color: var(--danger); }
.brands-delete-btn:hover, .articles-delete-btn:hover, .media-folder-delete-btn:hover, .media-file-delete-btn:hover, .block-remove:hover { background: var(--danger-soft); border-color: var(--danger); }
.block-controls button { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.brands-table .brands-edit-btn, .brands-table .brands-delete-btn { margin-right: 0.25rem; }
.articles-edit-link, .articles-delete-btn { margin-right: 0.25rem; }
/* the "New article" anchor is a primary-styled anchor (the button's shape + the primary colors). */
.articles-new-link { display: inline-block; font: inherit; font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); }

/* the form controls (the raised inputs / selects / textareas + the accent focus ring; the checkbox via accent-color — it is excluded from the input rule). */
input[type="text"], select, textarea { display: block; width: 100%; margin-top: 0.25rem; box-sizing: border-box; padding: 0.4rem 0.5rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit; }
input[type="text"]:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--accent); }
::placeholder { color: var(--text-muted); }
select option { background: var(--bg-panel); }
label { display: block; margin: 0.5rem 0; }

/* the listing tables (the brands + the articles + the media pages: the dark panel background + the raised hover row). */
.brands-toolbar { margin: 0.5rem 0; }
.articles-toolbar { margin: 0.5rem 0; }
.brands-table, .articles-table, .media-table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; background: var(--bg-panel); }
.brands-table th, .brands-table td, .articles-table th, .articles-table td, .media-table th, .media-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.brands-table th, .articles-table th, .media-table th { color: var(--text-muted); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.brands-table tbody tr:hover, .articles-table tbody tr:hover, .media-table tbody tr:hover { background: var(--bg-raised); }
.media-thumb { max-height: 80px; object-fit: contain; }

/* the add + edit modals + the media upload modal (the dark overlay + the panel form — the [hidden] display:none + the centering flex unchanged). */
.brands-modal, .media-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; background: rgba(0, 0, 0, 0.6); }
.brands-modal[hidden], .media-modal[hidden] { display: none; }
.brands-modal form, .media-modal form { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; width: 340px; max-width: 90vw; }

/* the articles create + edit forms (the field inputs / selects reuse the form-control rule above; the max-width cap + the block labels keep the existing conventions). */
#articles-new-form, #articles-edit-form { max-width: 640px; }
/* the block editor: the Edit / Preview tab bar (the modern underline style — replacing the boxy style), the .block wrapper (the panel card, stacked with a gap), the per-block up / down / remove controls (the compact buttons), and the preview's validation error. */
[role="tablist"] { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.25rem; border-bottom: 1px solid var(--border); }
[role="tab"] { padding: 0.25rem 0.75rem; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); border-radius: 0; cursor: pointer; }
[role="tab"]:hover { color: var(--text); }
[role="tab"].tab-active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
#blocks { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.block { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.block-controls { display: flex; gap: 0.25rem; margin: 0.5rem 0 0; }
.preview-error { color: var(--danger); font-weight: 600; }

/* the content components (the server-rendered component blocks): the shared wrapper + the youtube component (the 16/9 thumbnail + the centered circular play button; the embedded iframe on the play click — the 16/9 absolute geometry unchanged). */
.component { width: 100%; margin: 1rem 0; }
.component-youtube { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.component-youtube img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.component-youtube .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.5rem; cursor: pointer; }
.component-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }