/* ============================================================
   UserFrameworkBaseline — 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"],
.form-group input[type="number"] {
  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);
}

/* ── 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-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-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[hidden],
  .data-table td[hidden] { display: none !important; }
  .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; }

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

/* ── Card Search ────────────────────────────────────────────── */
.card-search-form-wrap {
  width: 100%;
  max-width: none;
}

/* Autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-drop {
  position: absolute; z-index: 200;
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  width: 100%; list-style: none;
  margin: 0; padding: 0;
  max-height: 420px; overflow-y: auto;
  box-shadow: var(--shadow);
}
.autocomplete-item a {
  display: flex; flex-direction: row; align-items: center; gap: .6rem;
  padding: .4rem .75rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--color-light);
}
.autocomplete-item a:hover { background: var(--color-lightest); }
.autocomplete-item:last-child a { border-bottom: none; }
.ac-img { border-radius: 2px; flex-shrink: 0; display: block; }
.ac-text { display: flex; flex-direction: column; min-width: 0; }
.ac-name { font-weight: 600; }
.ac-meta { font-size: .8rem; color: var(--color-steel); margin-top: .1rem; }

.u-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;
}

.mana-sequence {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  flex-wrap: wrap;
  vertical-align: middle;
}
.mana-sequence--cost {
  gap: .12rem;
}
.mana-symbol {
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: -.16em;
}
.mana-symbol--cost {
  width: 1.1rem;
  height: 1.1rem;
}
.mana-symbol--inline {
  width: .95rem;
  height: .95rem;
}
.ac-meta .mana-sequence {
  margin-right: .1rem;
}

/* Search results grid */
.card-results-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: var(--gap);
}
.card-result {
  display: inline-block;
  background: var(--color-white);
  border: 1px solid var(--color-mid);
  border-radius: var(--radius);
  padding: .4rem;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.card-result:hover { box-shadow: var(--shadow); border-color: var(--color-dark); }
.card-result__img-wrap { width: 200px; }
.card-result__img-wrap img { border-radius: 3px; width: 200px; height: 279px; object-fit: cover; display: block; }
.card-result__img-wrap--placeholder {
  width: 200px; height: 279px;
  background: var(--color-light);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--color-steel); text-align: center;
}
.card-result__body { flex: 1; min-width: 0; }
.card-result__header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.card-result__name { font-weight: 700; font-size: 1rem; }
.card-result__mana { font-size: .8rem; white-space: nowrap; }
.card-result__type { color: var(--color-dark); }
.card-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.card-result__text { color: var(--color-steel); line-height: 1.4; }

/* Rarity badges */
.badge-rarity-common   { background: #eee;     color: #444; }
.badge-rarity-uncommon { background: #d4e6d4;  color: #2a5e2a; }
.badge-rarity-rare     { background: #fff3cd;  color: #7a5800; }
.badge-rarity-mythic   { background: #fde0cc;  color: #8b3a00; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pagination__current { cursor: default; }

/* Card detail */
.card-detail-layout {
  display: grid;
  grid-template-columns: 265px 1fr;
  gap: 2rem;
  align-items: start;
}
.card-detail__image { display: block; border-radius: 4px; width: 265px; max-width: 100%; height: 370px; object-fit: cover; }
.card-detail__image--placeholder {
  width: 265px; max-width: 100%; height: 370px;
  background: var(--color-light);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-steel); font-size: .9rem; text-align: center;
}
.card-detail__name { font-size: 1.6rem; font-weight: 700; }
.card-detail__tabs { margin-top: 1rem; }
.card-detail__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--color-light);
  padding-bottom: .5rem;
}
.card-detail__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-mid);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .45rem .85rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.card-detail__tab:hover {
  border-color: var(--color-dark);
  background: var(--color-lightest);
}
.card-detail__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.card-detail__tab[aria-selected="true"] {
  border-color: var(--color-darkest);
  background: var(--color-darkest);
  color: var(--color-white);
}
.card-detail__tabpanel {
  margin-top: 1rem;
}
.card-detail__placeholder {
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  background: var(--color-lightest);
  color: var(--color-steel);
  line-height: 1.6;
  padding: 1rem 1.1rem;
}
.card-detail__field {
  display: flex; flex-direction: row; align-items: baseline;
  gap: .75rem; border-bottom: 1px solid var(--color-light); padding-bottom: .4rem;
}
.card-detail__field--block { align-items: flex-start; }
.card-detail__label {
  flex-shrink: 0; width: 110px;
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-steel);
}
.card-detail__value { flex: 1; }
.card-detail__value--multiline { white-space: pre-line; }
.card-detail__stat  {}
.card-detail__text { flex: 1; }
.card-detail__text p { margin-bottom: .35rem; line-height: 1.5; }
.card-detail__text p:last-child { margin-bottom: 0; }
.card-detail__text em { font-style: italic; color: var(--color-steel); }
.card-detail__text--flavour { color: var(--color-steel); font-style: italic; }
.color-pips {
  display: inline-flex;
  align-items: center;
  gap: .14rem;
  min-height: 1rem;
}
.color-pips--empty {
  color: var(--color-steel);
}

/* Flip card image rotation (same-face 180deg) */
.card-detail__image--flipped { transform: rotate(180deg); }
.card-detail__image           { transition: transform .35s ease; }

/* DFC 3D card-flip animation */
.card-detail__flip-container {
  perspective: 1000px;
  width: 265px; height: 370px;
}
.card-detail__flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s ease;
}
.card-detail__flip-inner--flipped { transform: rotateY(180deg); }
.card-detail__flip-front,
.card-detail__flip-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-detail__flip-back { transform: rotateY(180deg); }

/* DFC / flip face toggle button */
.card-detail__face-toggle {
  display: block; width: 100%; max-width: 265px; margin-top: .6rem;
  font-size: .85rem;
}
/* Individual face name subheading (DFC toggle + split inline) */
.card-detail__face-name {
  font-size: 1rem; font-weight: 600; margin-top: .5rem;
}
/* Split / aftermath / adventure inline face divider */
.card-detail__split-divider {
  border-top: 1px solid var(--color-light);
  margin-top: .75rem;
}
.card-detail__field--split-meta-start,
.card-detail__field--section-start {
  margin-top: .75rem;
  border-top: 1px solid var(--color-light);
  padding-top: .4rem;
}
.card-detail__pricing-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.card-detail__pricing-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}
.card-detail__price--missing {
  color: var(--color-steel);
}
.card-detail__legality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
}
.card-detail__legality-grid--single {
  grid-template-columns: 1fr;
}
.card-detail__legality-grid .card-detail__field {
  margin-top: 0;
}
.card-detail__printings-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.card-detail__printings-filter-group {
  flex: 1 1 220px;
  min-width: 180px;
}
.card-detail__printings-filter-group--select {
  flex: 0 0 200px;
}
.card-detail__printings-filter-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--color-steel);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.card-detail__printings-empty {
  margin-top: 1rem;
}
.card-detail__printings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.card-detail__printing-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: stretch;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  background: var(--color-white);
  transition: border-color .15s ease, background-color .15s ease;
}
.card-detail__printing-link:hover {
  border-color: var(--color-dark);
  background: var(--color-lightest);
  color: inherit;
}
.card-detail__printing-link--active {
  border-color: var(--color-black);
  background: var(--color-light);
  color: inherit;
}
.card-detail__printing-content {
  min-width: 0;
}
.card-detail__printing-link .card-detail__field:first-child {
  margin-top: 0;
}
.card-detail__printing-preview {
  display: flex;
  min-width: 0;
}
.card-detail__printing-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-light);
}
.card-detail__printing-image--placeholder {
  align-items: center;
  color: var(--color-steel);
  display: flex;
  font-size: .75rem;
  justify-content: center;
  text-align: center;
}

/* Meld related cards */
.card-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.card-related__card {
  display: grid;
  grid-template-columns: 73px 1fr;
  gap: .75rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: .5rem;
  background: var(--color-white);
  transition: border-color .15s;
}
.card-related__card:hover { border-color: var(--color-dark); }
.card-related__thumb {
  width: 73px;
  height: 102px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--color-light);
}
.card-related__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-steel);
  font-size: .75rem;
  text-align: center;
}
.card-related__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.card-related__name { font-weight: 600; }
.card-related__meta {
  margin-top: .25rem;
  color: var(--color-steel);
  font-size: .85rem;
}

/* Alternative printings */
.card-printings__grid {
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.card-printing {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-decoration: none; color: inherit;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: .25rem;
  transition: border-color .15s;
}
.card-printing:hover { border-color: var(--color-dark); }
.card-printing--active { border-color: var(--color-black); background: var(--color-light); }
.card-printing img { border-radius: 3px; width: 73px; height: 102px; object-fit: cover; }
.card-printing__placeholder {
  width: 73px; height: 102px;
  background: var(--color-light);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--color-steel);
}
.card-printing__label { font-size: .75rem; text-align: center; }

/* Responsive card search grid — steps down from 4 → 3 → 2 → 1 */
@media (max-width: 960px)  { .card-results-grid { grid-template-columns: repeat(3, max-content); } }
@media (max-width: 720px)  { .card-results-grid { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 480px)  { .card-results-grid { grid-template-columns: repeat(1, max-content); } }

/* Responsive card detail */
@media (max-width: 600px) {
  .card-detail-layout { grid-template-columns: 1fr; }
  .card-detail__image-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-detail__image,
  .card-detail__image--placeholder,
  .card-detail__flip-container,
  .card-detail__face-toggle {
    width: 100%;
    max-width: 265px;
  }
  .card-detail__image { height: auto; }
  .card-detail__image--placeholder,
  .card-detail__flip-container {
    height: auto;
    aspect-ratio: 265 / 370;
  }
  .card-detail__flip-container .card-detail__image,
  .card-detail__flip-container .card-detail__image--placeholder {
    max-width: none;
    height: 100%;
  }
  .card-detail__tab {
    flex: 1 1 calc(50% - .4rem);
    justify-content: center;
    text-align: center;
  }
  .card-detail__legality-grid {
    grid-template-columns: 1fr;
  }
  .card-detail__pricing-layout {
    grid-template-columns: 1fr;
  }
}