/* ============================================================
   台灣牙科偏鄉義診資訊平台 — Site Layer
   All colours / type / radius / shadow from DS custom properties.
   No hardcoded hex. Loaded after /css/ds/styles.css.
   ============================================================ */

/* === Layout helpers === */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* === Site Header (sticky blur nav) === */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header .container {
  height: 68px; display: flex; align-items: center; gap: var(--space-6);
}

/* Wordmark */
.site-logo {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; }
.logo-mark {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-zh {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-sm); color: var(--text-strong);
}
.logo-en {
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: var(--weight-medium);
}

/* Nav links */
.main-nav { display: flex; gap: var(--space-1); flex: 1; flex-wrap: wrap; }
.main-nav a {
  padding: var(--space-2) 14px;
  border-radius: var(--radius-pill);
  color: var(--text-body); font-size: 15px; font-weight: var(--weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.main-nav a:hover {
  background: var(--color-primary-soft); color: var(--color-primary);
  text-decoration: none;
}
.main-nav a.active, .main-nav a[aria-current="page"] {
  background: var(--color-primary-soft); color: var(--royal-700); font-weight: var(--weight-bold);
}
.nav-toggle { display: none; }
.nav-toggle-label { display: none; color: var(--text-body); cursor: pointer; font-size: 1.5rem; }

/* === Flash === */
.flash-message {
  background: var(--status-success-soft); color: var(--status-success);
  padding: var(--space-3) var(--space-4); text-align: center;
  font-weight: var(--weight-bold); border-bottom: 1px solid var(--border-subtle);
}

/* === Main Content === */
.main-content { min-height: calc(100vh - 68px - 80px); padding: var(--space-8) 0; }

/* === Footer (deep-blue band) === */
.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  margin-top: var(--space-16);
}
.footer-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-10) var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8);
}
.footer-brand strong {
  font-family: var(--font-display); font-size: var(--text-md); color: var(--text-on-dark);
}
.footer-brand p { color: var(--royal-100); font-size: var(--text-sm); margin-top: var(--space-2); line-height: var(--leading-normal); }
.footer-cols { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.footer-col-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--royal-100); margin-bottom: var(--space-3); }
.footer-col-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col-links a { color: var(--royal-200); font-size: var(--text-sm); text-decoration: none; }
.footer-col-links a:hover { color: var(--text-on-dark); }
.footer-bottom {
  border-top: 1px solid var(--royal-800);
  padding: var(--space-4) var(--gutter); text-align: center;
  font-size: var(--text-xs); color: var(--royal-200);
  max-width: var(--container-max); margin: 0 auto;
}
/* Legacy footer (for old partials with .footer-links class) */
.footer-links { display: flex; gap: var(--space-6); justify-content: center; margin-bottom: var(--space-3); flex-wrap: wrap; }
.footer-links a { color: var(--royal-200); text-decoration: none; }
.footer-links a:hover { color: var(--text-on-dark); }
.data-source { font-size: var(--text-xs); color: var(--royal-300); margin-top: var(--space-2); }

/* === Kicker / Eyebrow === */
.kicker {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary); display: block; margin-bottom: var(--space-2);
}

/* === Hero === */
.hero {
  background: linear-gradient(180deg, var(--royal-50) 0%, var(--gray-50) 100%);
  padding: var(--space-16) var(--gutter);
  text-align: center; margin-bottom: var(--space-10);
  border-radius: var(--radius-lg);
}
.hero h1 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: var(--weight-black); color: var(--text-strong);
  margin-bottom: var(--space-4);
}
.hero-subtitle {
  font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-normal);
  max-width: 600px; margin: 0 auto var(--space-8);
}
.hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  cursor: pointer; border: none; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  white-space: nowrap; min-height: var(--control-md);
  font-family: var(--font-body);
}
.btn:hover { text-decoration: none; }

/* Primary — Royal Blue */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-primary:active { background: var(--color-primary-active); }

/* Accent — Rotary Gold (人際 CTA only) */
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-accent:active { background: var(--color-accent-active); }

/* Secondary / ghost */
.btn-outline {
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-soft); }

/* Sizes */
.btn-sm { min-height: var(--control-sm); padding: var(--space-1) var(--space-4); font-size: var(--text-xs); }
.btn-lg { min-height: var(--control-lg); padding: var(--space-3) var(--space-8); font-size: var(--text-base); }

/* === Cards === */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* === Stats === */
.stats-section { margin-bottom: var(--space-10); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stat-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-number { font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--color-primary); font-family: var(--font-display); }
.stat-label { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.stat-link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-link); }
.stat-card.alert-warn { border-color: var(--status-danger); }
.stat-card.alert-warn .stat-number { color: var(--status-danger); }

/* === Entry Cards (Platform Services) === */
.entry-cards { margin-bottom: var(--space-10); }
.entry-cards > h2, .section-heading { margin-bottom: var(--space-6); color: var(--text-strong); }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.entry-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  text-decoration: none; color: var(--text-body);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.card-icon { color: var(--color-primary); margin-bottom: var(--space-3); }
.entry-card h3 { color: var(--text-strong); margin-bottom: var(--space-2); font-size: var(--text-lg); }
.entry-card p { color: var(--text-body); font-size: var(--text-sm); margin: 0; }

/* === Upcoming Events === */
.upcoming-events { margin-bottom: var(--space-8); }
.upcoming-events h2 { margin-bottom: var(--space-4); }
.events-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.event-item {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.event-date { color: var(--text-muted); font-size: var(--text-sm); min-width: 140px; }
.event-info { flex: 1; }
.event-team { font-weight: var(--weight-bold); color: var(--text-strong); }
.event-location { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }

/* === Badges === */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
/* Status variants */
.badge-recruit   { background: var(--status-warning-soft); color: var(--status-warning); }
.badge-done      { background: var(--status-success-soft); color: var(--status-success); }
.badge-active    { background: var(--status-info-soft); color: var(--status-info); }
.badge-cancel    { background: var(--status-danger-soft); color: var(--status-danger); }
.badge-pending   { background: var(--status-warning-soft); color: var(--status-warning); }
.badge-reviewing { background: var(--status-info-soft); color: var(--status-info); }
.badge-matched   { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-scheduled { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-rejected  { background: var(--status-danger-soft); color: var(--status-danger); }

/* === Forms === */
.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: var(--container-narrow);
  box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block; font-weight: var(--weight-bold);
  margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-strong);
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-base); font-family: var(--font-body);
  color: var(--text-body); background: var(--surface-card);
  min-height: var(--control-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-checkbox label { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-regular); cursor: pointer; }
.form-checkbox input { width: auto; margin-top: 3px; accent-color: var(--color-primary); }
.form-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.form-inline { display: flex; align-items: flex-end; gap: var(--space-4); max-width: 480px; }
.form-inline .form-group { flex: 1; margin-bottom: 0; }

/* === Error / Alert === */
.error-list {
  background: var(--status-danger-soft); border: 1px solid var(--status-danger);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.error-list ul { margin: 0; padding-left: var(--space-5); }
.error-list li { color: var(--status-danger); margin-bottom: var(--space-1); font-size: var(--text-sm); }
.error-message {
  background: var(--status-danger-soft); color: var(--status-danger);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* === Page Header === */
.page-header { margin-bottom: var(--space-8); }
.page-header h1 { margin-bottom: var(--space-2); }
.page-header p { color: var(--text-muted); margin: 0; }

/* === Map === */
.map-page { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); min-height: 600px; }
.map-sidebar {
  background: var(--surface-card); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.map-sidebar h2 { margin-bottom: var(--space-4); font-size: var(--text-base); color: var(--text-strong); }
.filter-group { margin-bottom: var(--space-5); }
.filter-group label:first-child {
  font-weight: var(--weight-bold); font-size: var(--text-sm); margin-bottom: var(--space-2); display: block;
  color: var(--text-strong);
}
.filter-options { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-options label {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-regular); cursor: pointer; font-size: var(--text-sm);
}
.filter-options input[type="checkbox"] { accent-color: var(--color-primary); }
#map-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
#map { height: 600px; }
#map-legend { margin-top: var(--space-4); }
.legend-title { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-body); }
.legend-dot { width: 12px; height: 12px; border-radius: var(--radius-xs); display: inline-block; flex-shrink: 0; }

/* === Teams === */
.teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.team-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.team-type-badge {
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; margin-bottom: var(--space-2);
}
.team-card h2 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.team-card h2 a { color: var(--text-strong); text-decoration: none; }
.team-card h2 a:hover { color: var(--color-primary); }
.team-intro { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.team-meta { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); flex-wrap: wrap; }
.team-meta span { display: flex; align-items: center; gap: var(--space-1); }
.team-detail-header { margin-bottom: var(--space-6); }
.team-detail-header h1 { margin-top: var(--space-2); }
.team-info-section {
  background: var(--surface-card); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm);
}
.team-info-section p { color: var(--text-body); margin-bottom: var(--space-4); }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.info-list dt { font-weight: var(--weight-bold); color: var(--text-muted); font-size: var(--text-sm); }
.info-list dd { color: var(--text-body); font-size: var(--text-sm); }
.team-events-section { }
.team-events-section h2 { margin-bottom: var(--space-4); }

/* === Events === */
.event-detail-header { margin-bottom: var(--space-6); }
.event-detail-header h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.event-team-name { font-size: var(--text-md); color: var(--text-muted); }
.event-date-display { font-size: var(--text-base); color: var(--text-body); margin: var(--space-2) 0; display: flex; align-items: center; gap: var(--space-2); }
.event-status-badges { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.event-status-display { margin-top: var(--space-2); }
.recruit-section {
  background: var(--color-accent-soft); border: 1px solid var(--gold-200);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6);
}
.recruit-section h3 { color: var(--royal-800); margin-bottom: var(--space-3); }
.recruit-section p { color: var(--text-body); }
.event-services {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-4);
}
.event-services h3 { margin-bottom: var(--space-2); }
.my-application {
  background: var(--color-primary-soft); border-radius: var(--radius-md);
  padding: var(--space-4); margin-top: var(--space-4); color: var(--text-body);
}
.my-application p { margin: 0 0 var(--space-2); }

/* === Apply === */
.success-page { text-align: center; padding: var(--space-12) var(--gutter); }
.success-icon { color: var(--status-success); margin-bottom: var(--space-4); }
.success-page h1 { margin-bottom: var(--space-4); }
.success-page > p { color: var(--text-muted); margin-bottom: var(--space-6); }
.lookup-code-box {
  background: var(--surface-card); border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg); padding: var(--space-6); display: inline-block;
  margin: 0 auto var(--space-6); box-shadow: var(--shadow-sm);
}
.lookup-code-box p { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.lookup-code {
  font-size: var(--text-2xl); font-weight: var(--weight-black);
  letter-spacing: 0.1em; color: var(--color-primary); font-family: var(--font-mono);
  display: block; margin-bottom: var(--space-2);
}
.hint { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.success-actions { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-6); }
.status-result {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); box-shadow: var(--shadow-sm);
}
.status-result h2 { margin-bottom: var(--space-4); }

/* === Auth Pages === */
.auth-page { max-width: 480px; margin: 0 auto; }
.auth-page h1 { margin-bottom: var(--space-6); }
.auth-page .form-card { max-width: 100%; }
.auth-page p { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.admin-login-page { max-width: 400px; margin: var(--space-12) auto; }
.admin-login-page h1 { margin-bottom: var(--space-6); text-align: center; }

/* === Admin === */
.admin-body { background: var(--surface-sunken); }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.admin-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.admin-nav-item {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
  text-decoration: none; color: var(--color-primary);
  font-weight: var(--weight-bold); text-align: center;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  box-shadow: var(--shadow-xs);
}
.admin-nav-item:hover { background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; }
.admin-page { }
.admin-page-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6);
}
.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface-card); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle);
}
.admin-table th {
  background: var(--color-primary); color: var(--color-on-primary);
  text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.admin-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-body); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-sunken); }
.admin-action-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); box-shadow: var(--shadow-sm);
}
.admin-action-card h2 { margin-bottom: var(--space-4); }
.detail-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.description-text { white-space: pre-wrap; font-family: var(--font-body); color: var(--text-body); margin: 0; }
.admin-action-card .form-card { max-width: 100%; box-shadow: none; border: none; padding: 0; }

/* === Misc === */
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.breadcrumb a { color: var(--text-link); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-link-hover); }
.empty-state { text-align: center; padding: var(--space-12) var(--gutter); color: var(--text-muted); }
.empty-state p { margin-bottom: var(--space-4); }
.empty-state-sm { color: var(--text-muted); font-style: italic; font-size: var(--text-sm); }
.text-muted { color: var(--text-muted); }
.popup-link { color: var(--color-primary); font-weight: var(--weight-bold); }

/* Applications (dentist me page) */
.applications-list { display: flex; flex-direction: column; gap: var(--space-3); }
.application-item {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.app-team { font-weight: var(--weight-bold); color: var(--text-strong); }
.app-location, .app-date { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.app-status { flex-shrink: 0; }
.my-actions { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); align-items: center; }
code { background: var(--surface-sunken); padding: 2px var(--space-2); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); }
.error-page { text-align: center; padding: var(--space-20) var(--gutter); }
.error-page h1 { margin-bottom: var(--space-4); }
.error-page p { color: var(--text-muted); margin-bottom: var(--space-8); }

/* === RWD === */
@media (max-width: 768px) {
  .site-header .container { flex-wrap: wrap; height: auto; padding: var(--space-3) var(--gutter); }
  .nav-toggle-label { display: flex; align-items: center; }
  .main-nav { display: none; flex-direction: column; width: 100%; padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--border-subtle); }
  .nav-toggle:checked ~ nav { display: flex; }
  .stats-grid, .cards-grid, .teams-grid { grid-template-columns: 1fr; }
  .admin-stats, .admin-nav { grid-template-columns: 1fr; }
  .map-page { grid-template-columns: 1fr; }
  #map { height: 400px; }
  .map-sidebar { order: 2; }
  #map-container { order: 1; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: var(--space-10) var(--gutter); }
  .hero h1 { font-size: var(--text-2xl); }
  .hero-actions { flex-direction: column; align-items: center; }
  .admin-table { font-size: var(--text-xs); }
  .admin-table th, .admin-table td { padding: var(--space-2) var(--space-3); }
  .footer-inner { flex-direction: column; }
  .footer-cols { gap: var(--space-8); }
}