/* ============================================================
   Dev5.DeckBuilder.co.uk — style.css
   Theme: White / Grey / Black | Clean & Modern | Responsive
   ============================================================ */

/* ── Custom properties ─────────────────────────────────────── */
:root {
  --color-white:    #ffffff;
  --color-lightest: #f8f8f8;
  --color-light:    #f0f0f0;
  --color-mid:      #cccccc;
  --color-steel:    #888888;
  --color-dark:     #444444;
  --color-darkest:  #222222;
  --color-black:    #111111;

  --color-success-bg:   #e8f5e9;
  --color-success-text: #1b5e20;
  --color-success-bdr:  #a5d6a7;
  --color-error-bg:     #fdecea;
  --color-error-text:   #b71c1c;
  --color-error-bdr:    #ef9a9a;
  --color-info-bg:      #e3f2fd;
  --color-info-text:    #0d47a1;
  --color-info-bdr:     #90caf9;
  --color-warning-bg:   #fff8e1;
  --color-warning-text: #e65100;
  --color-warning-bdr:  #ffcc80;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius:    4px;
  --shadow:    0 1px 4px rgba(0,0,0,.10);
  --max-width: 1100px;
  --gap:       1.5rem;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--color-lightest);
  color: var(--color-darkest);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-black); }
a:hover { text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Site Header ────────────────────────────────────────────── */
.site-header {
  background: var(--color-black);
  padding: .9rem 0;
}
.site-header .container {
  display: flex;
  align-items: center;
}
.site-logo {
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.site-logo:hover { opacity: .85; }

/* ── Navigation ─────────────────────────────────────────────── */
.site-nav {
  background: var(--color-darkest);
  border-bottom: 1px solid var(--color-black);
}
.site-nav .container {
  display: flex;
  align-items: center;
  position: relative;
}
.nav-list {
  display: flex;
  list-style: none;
  gap: 0;
  flex-wrap: wrap;
}
/* Shared token for all top-level nav items — links AND dropdown triggers */
.nav-list > li > a,
.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  height: 100%;
  padding: .65rem 1rem;
  box-sizing: border-box;
  color: var(--color-mid);
  text-decoration: none;
  font-size: .9rem;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-list > li > a:hover,
.nav-list > li > a.active,
.nav-dropdown__trigger:hover,
.nav-dropdown--active > .nav-dropdown__trigger {
  background: var(--color-black);
  color: var(--color-white);
}
.nav-sep {
  flex: 1;
}
/* ── Nav dropdown ───────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-dropdown__arrow {
  font-size: .6rem;
  margin-left: .3rem;
  opacity: .7;
}
/* Submenu — absolutely positioned so it never affects the nav bar height */
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  background: var(--color-darkest);
  border: 1px solid var(--color-black);
  border-top: none;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 200;
}
.nav-dropdown__menu li a {
  display: block;
  padding: .6rem 1rem;
  font-size: .875rem;
  color: var(--color-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s, color .15s;
}
.nav-dropdown__menu li:last-child a {
  border-bottom: none;
}
.nav-dropdown__menu li a:hover,
.nav-dropdown__menu li a.active {
  background: var(--color-black);
  color: var(--color-white);
}
/* Desktop: open on hover */
@media (min-width: 769px) {
  .nav-dropdown:hover > .nav-dropdown__menu {
    display: block;
  }
}
/* Open state driven by JS (mobile + keyboard) */
.nav-dropdown.open > .nav-dropdown__menu {
  display: block;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-mid);
  font-size: 1.4rem;
  cursor: pointer;
  padding: .65rem 1rem;
  margin-left: auto;
}

/* ── Main content ───────────────────────────────────────────── */
.site-main {
  flex: 1;
  padding: 2rem 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-darkest);
  color: var(--color-steel);
  text-align: center;
  font-size: .85rem;
  padding: 1.25rem 0;
}

/* ── Page sections ──────────────────────────────────────────── */
.page-section {
  margin-bottom: 2rem;
}
.page-section h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-black);
}
.page-section h2 {
  font-size: 1.25rem;
  margin-bottom: .75rem;
  color: var(--color-darkest);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.alert a { font-weight: 600; }
.alert-success {
  background: var(--color-success-bg);
  color:      var(--color-success-text);
  border-color: var(--color-success-bdr);
}
.alert-error {
  background: var(--color-error-bg);
  color:      var(--color-error-text);
  border-color: var(--color-error-bdr);
}
.alert-info {
  background: var(--color-info-bg);
  color:      var(--color-info-text);
  border-color: var(--color-info-bdr);
}
.alert-warning {
  background: var(--color-warning-bg);
  color:      var(--color-warning-text);
  border-color: var(--color-warning-bdr);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-section {
  max-width: 480px;
}
.form-group {
  margin-bottom: 1.1rem;
}
.form-group label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--color-darkest);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-black);
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.form-group textarea,
.form-group .form-select {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-black);
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.form-group textarea:focus,
.form-group .form-select:focus {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.form-check label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 400;
  cursor: pointer;
}
.field-hint {
  display: block;
  font-size: .8rem;
  color: var(--color-steel);
  margin-top: .25rem;
}
.form-links {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--color-steel);
}
.form-links a { color: var(--color-darkest); font-weight: 600; }

/* Password requirements */
.password-requirements {
  margin: .4rem 0 0 1.1rem;
  font-size: .8rem;
  color: var(--color-steel);
  line-height: 1.8;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .55rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-primary:hover {
  background: var(--color-darkest);
  border-color: var(--color-darkest);
  color: var(--color-white);
}
.btn-secondary {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.btn-secondary:hover {
  background: var(--color-darkest);
  border-color: var(--color-darkest);
  color: var(--color-white);
}
.btn-outline {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn-outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-danger {
  background: #c62828;
  color: var(--color-white);
  border-color: #c62828;
}
.btn-danger:hover {
  background: #b71c1c;
  border-color: #b71c1c;
}
.btn-sm {
  padding: .3rem .75rem;
  font-size: .8rem;
}

/* ── Dashboard cards ────────────────────────────────────────── */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 1.5rem;
}
.card {
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.card p {
  font-size: .88rem;
  color: var(--color-steel);
  margin-bottom: 1rem;
}

/* ── Profile info ───────────────────────────────────────────── */
.profile-info {
  background: var(--color-light);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .92rem;
}
.profile-info p { margin-bottom: .4rem; }
.profile-info p:last-child { margin-bottom: 0; }
hr { border: none; border-top: 1px solid var(--color-mid); margin: 1.5rem 0; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table thead th {
  background: var(--color-darkest);
  color: var(--color-white);
  padding: .65rem .85rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--color-light);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--color-lightest); }
.data-table tbody tr:hover { background: var(--color-light); }
.data-table td {
  padding: .6rem .85rem;
  vertical-align: middle;
}
.actions-cell { white-space: nowrap; }
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .15rem .2rem .15rem 0;
}
.select-sm {
  padding: .25rem .4rem;
  font-size: .8rem;
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  background: var(--color-white);
  font-family: inherit;
}
.text-center { text-align: center; }

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.filter-bar__group {
  flex: 1 1 auto;
  min-width: 160px;
}
.filter-bar__input,
.filter-bar__select {
  width: 100%;
  padding: .4rem .65rem;
  font-size: .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-dark);
}
.filter-bar__input:focus,
.filter-bar__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59,130,246),.15);
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
}
.pagination__info {
  font-size: .9rem;
  color: var(--color-dark);
}
.pagination__disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-success {
  background: var(--color-success-bg);
  color:      var(--color-success-text);
}
.badge-warning {
  background: var(--color-warning-bg);
  color:      var(--color-warning-text);
}
.badge-error {
  background: var(--color-error-bg);
  color:      var(--color-error-text);
}

/* ── Public card search ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.card-search-form {
  margin-bottom: 1rem;
  border: 1px solid var(--color-mid);
}
.card-search-form .filter-bar__group {
  min-width: 260px;
}
.card-search-form .filter-bar__input {
  border: 1px solid var(--color-mid);
}
.card-search-form .filter-bar__input:focus {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.card-search-summary {
  margin-bottom: 1rem;
  font-size: .92rem;
  color: var(--color-steel);
}
.card-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.card-search-empty {
  margin-top: 1rem;
}
.card-result {
  display: grid;
  grid-template-columns: 140px 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-result__media {
  background: linear-gradient(180deg, var(--color-light) 0%, var(--color-lightest) 100%);
}
.card-result__image,
.card-result__placeholder {
  width: 100%;
  min-height: 220px;
  height: 100%;
}
.card-result__image {
  object-fit: cover;
}
.card-result__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--color-steel);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0)),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.03),
      rgba(0,0,0,.03) 10px,
      rgba(255,255,255,.25) 10px,
      rgba(255,255,255,.25) 20px
    );
}
.card-result__body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem 1.1rem;
}
.card-result__heading {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.card-result__name {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--color-black);
}
.card-result__subtitle {
  margin: 0;
  color: var(--color-steel);
  font-size: .95rem;
}
.card-result__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.card-result__set-name {
  margin: -.3rem 0 0;
  font-size: .84rem;
  color: var(--color-steel);
}
.card-result__meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .9rem;
}
.card-result__meta li {
  min-width: 0;
}
.card-result__meta-label {
  display: block;
  margin-bottom: .1rem;
  color: var(--color-steel);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.card-result__rules {
  font-size: .9rem;
  color: var(--color-dark);
}
.card-result__rules-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* ── Site management cards ──────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gap);
  margin-top: 1.5rem;
}
.settings-card {
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.settings-card--active {
  border-color: var(--color-warning-bdr);
  background: var(--color-warning-bg);
}
.settings-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.settings-card h2 {
  margin-bottom: 0;
}
.settings-card p {
  font-size: .88rem;
  color: var(--color-steel);
  margin-bottom: 1.25rem;
}

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap);
  margin-top: 1.25rem;
}
.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-card--success { border-color: var(--color-success-bdr); background: var(--color-success-bg); }
.stat-card--warning { border-color: var(--color-warning-bdr); background: var(--color-warning-bg); }
.stat-card--error   { border-color: var(--color-error-bdr);   background: var(--color-error-bg); }
.stat-card__number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-black);
}
.stat-card--success .stat-card__number { color: var(--color-success-text); }
.stat-card--warning .stat-card__number { color: var(--color-warning-text); }
.stat-card--error   .stat-card__number { color: var(--color-error-text); }
.stat-card__label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-top: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stat-card__sub {
  font-size: .78rem;
  color: var(--color-steel);
  margin-top: .25rem;
}

/* ── Footer nav ─────────────────────────────────────────────── */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  margin-bottom: .65rem;
}
.footer-nav a {
  color: var(--color-mid);
  text-decoration: none;
  font-size: .82rem;
}
.footer-nav a:hover { color: var(--color-white); }
.footer-copy { font-size: .82rem; }

/* ── Content pages (privacy, terms, contact, thanks) ─────────── */
.content-page { max-width: 760px; }
.content-page > p { margin-bottom: 1.25rem; color: var(--color-dark); }
.content-block {
  margin-bottom: 2rem;
}
.content-block h2 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-light);
}
.content-block p { margin-bottom: .65rem; color: var(--color-dark); line-height: 1.7; }
.content-block ul {
  margin: .4rem 0 .65rem 1.4rem;
  color: var(--color-dark);
  line-height: 1.8;
}
.contact-blocks,
.thanks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap);
  margin-top: 1.25rem;
}
.contact-blocks .content-block,
.thanks-grid .content-block {
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 0;
}

/* ── Contact Submissions ─────────────────────────────────────── */
.submissions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.submission-card {
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.submission-card--unread {
  border-left: 4px solid var(--color-warning-bdr);
  background: var(--color-warning-bg);
}
.submission-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.submission-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.submission-type-badge {
  display: inline-block;
  padding: .15rem .55rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--color-light);
  color: var(--color-dark);
  border: 1px solid var(--color-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.submission-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.submission-card__from {
  font-size: .9rem;
  margin-bottom: .75rem;
  color: var(--color-dark);
}
.submission-card__message {
  font-size: .9rem;
  line-height: 1.6;
  background: var(--color-lightest);
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: .9rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.submission-card__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Cron Log Viewer ─────────────────────────────────────────── */
.cron-log-wrap {
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  overflow: hidden;
}
.cron-log-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem 1rem;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-mid);
  font-size: .82rem;
}
.cron-log-legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  color: var(--color-dark);
}
.cron-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .2rem;
}
.cron-legend-dot.log-sent { background: var(--color-success-bdr); }
.cron-legend-dot.log-fail { background: var(--color-error-bdr); }
.cron-legend-dot.log-warn { background: #ffa726; }
.cron-legend-dot.log-done { background: var(--color-info-bdr); }
.cron-legend-dot.log-run  { background: var(--color-mid); }
.cron-log {
  background: var(--color-darkest);
  max-height: 480px;
  overflow-y: auto;
  padding: .75rem 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem;
  line-height: 1.7;
}
.cron-log__line { color: #ccc; white-space: pre-wrap; word-break: break-all; }
.cron-log__line.log-sent { color: #81c784; }
.cron-log__line.log-fail { color: #e57373; }
.cron-log__line.log-warn { color: #ffa726; }
.cron-log__line.log-done { color: #64b5f6; }
.cron-log__line.log-run  { color: #fff3e0; }
.cron-log__line.log-info { color: #aaa; }
.cron-log__line.log-skip { color: #ffb74d; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-muted  { color: var(--color-steel); }
.text-small  { font-size: .82rem; }
.text-normal { font-size: 1rem; }
.text-detail { font-size: .82rem; word-break: break-all; }
.link-inherit { color: inherit; }

/* Spacing utilities */
.mt-md { margin-top:    1.25rem; }
.mt-lg { margin-top:    1.5rem;  }
.mb-xs { margin-bottom: .25rem;  }
.mb-md { margin-bottom: 1.25rem; }
.mb-lg { margin-bottom: 1.5rem;  }
.ml-sm { margin-left:   .5rem;   }

/* Section heading spacing */
.section-heading { margin: 2rem 0 .75rem; }

/* Badge variants */
.badge-skipped { background: #eee; color: #888; }
.badge--inline { font-size: .7rem; vertical-align: middle; margin-left: .4rem; }

/* ── Responsive — 768px breakpoint ──────────────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav-toggle { display: block; }
  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    background: var(--color-darkest);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    border-top: 1px solid var(--color-black);
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
  }
  .nav-list.open { display: flex; }
  .nav-list li a { padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
  .nav-sep { display: none; }
  /* Dropdowns — inline on mobile */
  .nav-dropdown__trigger { width: 100%; text-align: left; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
  .nav-dropdown__menu { position: static; border: none; box-shadow: none; background: rgba(0,0,0,.2); display: none; }
  .nav-dropdown.open > .nav-dropdown__menu { display: flex; flex-direction: column; }
  .nav-dropdown__menu li a { padding-left: 2rem; }

  /* Forms */
  .form-section { max-width: 100%; }

  /* Tables — stacked card layout, no horizontal scroll */
  .table-responsive { overflow-x: visible; }
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; box-sizing: border-box; }
  .data-table tr {
    border: 1px solid var(--color-mid);
    border-radius: var(--radius);
    margin-bottom: .65rem;
    background: var(--color-white);
  }
  .data-table tr:nth-child(even) { background: var(--color-white); }
  .data-table tr:hover { background: var(--color-lightest); }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--color-light);
    font-size: .85rem;
    white-space: normal;
    word-break: break-word;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-dark);
    flex: 0 0 auto;
    min-width: 90px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: .1rem;
  }
  .data-table td[data-label=""] { justify-content: flex-end; }
  .data-table td[data-label=""]::before { display: none; }
  .actions-cell { flex-direction: column; align-items: flex-start; white-space: normal; }
  .inline-form { flex-wrap: wrap; width: 100%; }

  /* Cards */
  .dashboard-cards,
  .settings-grid { grid-template-columns: 1fr; }
  .card-search-results { grid-template-columns: 1fr; }
  .card-result { grid-template-columns: 1fr; }
  .card-result__image,
  .card-result__placeholder { min-height: 260px; }

  /* Sections */
  .page-section h1 { font-size: 1.4rem; }
}

@media (max-width: 560px) {
  .card-result__meta {
    grid-template-columns: 1fr;
  }
}