:root {
  --color-background: #f5f7fa;
  --color-surface: #ffffff;
  --color-text-primary: #172b4d;
  --color-text-secondary: #52606d;
  --color-border: #d9e2ec;
  --color-accent: #185fa5;
  --color-accent-hover: #12497d;
  --color-success: #18794e;
  --color-warning: #8a5a00;
  --color-danger: #b42318;
  --color-info: #185fa5;
  --color-accent-surface: #e8f1f9;
  --color-accent-border: #b9d5ec;
  --color-accent-text: #123e69;
  --color-success-surface: #e9f6ef;
  --color-success-border: #b8dfc9;
  --color-success-text: #125b3a;
  --color-warning-surface: #fff4d6;
  --color-warning-border: #edd38a;
  --color-warning-text: #6b4700;
  --color-danger-surface: #fdecea;
  --color-danger-border: #f4b8b2;
  --color-input-border: #9fb3c8;
  --color-readonly-surface: #eef2f6;
  --color-table-header: #eef2f6;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --shadow-subtle: 0 1px 3px rgb(23 43 77 / 0.08);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-size-md);
  line-height: 1.5;
  margin: 0;
}
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }
button, input { font: inherit; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:disabled, .btn:disabled { cursor: not-allowed; opacity: 0.6; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding-bottom: var(--space-4);
  padding-top: var(--space-4);
}
.brand {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav {
  display: flex;
  flex: 1 1 100%;
  gap: var(--space-1);
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}
.site-nav a {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-flex;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a.active { background: var(--color-accent-surface); color: var(--color-accent-hover); }
.auth-actions { display: flex; gap: var(--space-1); margin-left: auto; }

.page { margin: 0 auto; max-width: 1120px; padding: var(--space-6) var(--space-4) var(--space-12); }
.page-title { font-size: var(--font-size-2xl); line-height: 1.2; margin: 0 0 var(--space-6); }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
}
.card-title, .card h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-4); }
.card h3 { font-size: var(--font-size-md); margin: var(--space-5) 0 var(--space-2); }
.grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid > .card { margin: 0; }
.muted { color: var(--color-text-secondary); }

.alert { border: 1px solid transparent; border-radius: var(--radius-md); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); }
.alert.info { background: var(--color-accent-surface); border-color: var(--color-accent-border); color: var(--color-accent-text); }
.alert.success { background: var(--color-success-surface); border-color: var(--color-success-border); color: var(--color-success-text); }
.alert.warning { background: var(--color-warning-surface); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.alert.error, .error { background: var(--color-danger-surface); border-color: var(--color-danger-border); color: var(--color-danger); }

.btn.primary, button.primary { background: var(--color-accent); color: var(--color-surface); }
.btn.primary:hover, button.primary:hover { background: var(--color-accent-hover); color: var(--color-surface); }
.btn.secondary, button.secondary { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent); }
.btn.secondary:hover, button.secondary:hover { background: var(--color-accent-surface); }
.btn.danger, button.danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
.btn.danger:hover, button.danger:hover { background: var(--color-danger-surface); }

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.field input, .field select, .field textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  width: 100%;
}
.field input[readonly] { background: var(--color-readonly-surface); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; width: 100%; }
.table th, .table td { border-bottom: 1px solid var(--color-border); min-width: 7rem; padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.table th { background: var(--color-table-header); font-weight: var(--font-weight-bold); }
.badge { background: var(--color-accent-surface); border-radius: var(--radius-pill); color: var(--color-accent-text); display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2); }
.empty-state { color: var(--color-text-secondary); margin: 0; padding: var(--space-2) 0; }
.partner-card { margin: 0; }
.availability-day { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-4); }
.availability-day h3 { font-size: var(--font-size-md); margin: 0 0 var(--space-2); }
.availability-slot { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.availability-slot input { min-height: 44px; }
.availability-slot button, .add-slot { min-height: 44px; }
#save-status { min-height: 1.5em; }

@media (min-width: 700px) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav { flex: 1 1 auto; justify-content: flex-end; }
  .page { padding-left: var(--space-6); padding-right: var(--space-6); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }