:root {
  --sr-accent: #ccaa66;
  --sr-text: #0f172a;
  --sr-muted: #64748b;
  --sr-border: rgba(15, 23, 42, 0.12);
  --sr-soft: #f8fafc;
  --sr-card: #ffffff;
  --sr-reserved: #dc2626;
  --sr-selected: #16a34a;
}

.sr-app { max-width: 980px; margin: 40px auto; color: var(--sr-text); font-size: 16px; }
.sr-app * { box-sizing: border-box; }
.sr-card { background: var(--sr-card); border: 1px solid var(--sr-border); border-radius: 20px; box-shadow: 0 18px 45px rgba(15,23,42,.08); }
.sr-body { padding: 32px; }
.sr-header h2 { margin: 0 0 10px; font-size: 32px; }
.sr-header p, .sr-muted { color: var(--sr-muted); }
.sr-step h3 { margin: 0 0 16px; font-size: 24px; }
.sr-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sr-field input, .sr-field textarea { border: 1px solid var(--sr-border); border-radius: 14px; padding: 14px 16px; font: inherit; width: 100%; }
.sr-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.sr-time-btn { border: 1px solid var(--sr-border); background: #fff; border-radius: 14px; min-height: 56px; font: inherit; cursor: pointer; }
.sr-time-btn.is-active { border-color: var(--sr-accent); box-shadow: 0 0 0 3px rgba(204,170,102,.22); }
.sr-inline-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sr-inline-controls input { width: 120px; text-align: center; border: 1px solid var(--sr-border); border-radius: 14px; padding: 12px; font: inherit; }
.sr-square { width: 52px; height: 52px; }
.sr-actions { display: flex; margin-top: 24px; gap: 12px; }
.sr-actions.end { justify-content: flex-end; }
.sr-actions.between { justify-content: space-between; }
.sr-primary, .sr-ghost { border-radius: 14px; padding: 14px 22px; font: inherit; cursor: pointer; }
.sr-primary { border: none; background: linear-gradient(135deg, var(--sr-accent), #b89244); color: #fff; font-weight: 700; }
.sr-ghost { border: 1px solid var(--sr-border); background: #fff; }
.sr-alert { padding: 14px 16px; border-radius: 14px; margin: 0 0 20px; background: #fff3cd; color: #7c5700; border: 1px solid #f4d58d; }
.sr-status { margin: 16px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--sr-border); background: var(--sr-soft); }
.sr-status.is-error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.sr-status.is-success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.sr-seat-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 20px 0 10px; }
.sr-seat { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; font-weight: 700; border: 1px solid var(--sr-border); background: #fff; }
.sr-seat.sr-reserved { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.sr-seat.sr-selected { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.sr-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--sr-muted); }
.sr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sr-legend .sr-seat { min-height: 18px; min-width: 18px; width: 18px; height: 18px; border-radius: 6px; }
.sr-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 18px; border: 1px solid var(--sr-border); background: var(--sr-soft); border-radius: 16px; margin-bottom: 20px; }
.sr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.sr-field-full { grid-column: 1 / -1; }
.sr-note-box { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--sr-border); color: var(--sr-muted); }

@media (max-width: 720px) {
  .sr-body { padding: 20px; }
  .sr-time-grid, .sr-summary, .sr-form-grid { grid-template-columns: 1fr; }
  .sr-actions.between { flex-direction: column-reverse; }
  .sr-actions.end { justify-content: stretch; }
  .sr-primary, .sr-ghost { width: 100%; }
}