/* Broadcast Clock — professional layout */
:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --success: #22c55e;
  --danger: #ef4444;
  --border: #334155;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* All links: no underline by default; underline on hover so it’s clear they’re links */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn, a.btn:hover { text-decoration: none !important; }
/* Header nav links (Pricing, Log in, Sign up): match header, not default link color */
.mrt-header .mrt-user a,
.mrt-header .mrt-user a:link,
.mrt-header .mrt-user a:visited { color: #e2e8f0 !important; text-decoration: none; }
.mrt-header .mrt-user a:hover { color: #94a3b8 !important; text-decoration: none; }
.site-header .logo, .site-header .logo:hover { text-decoration: none !important; display: flex; align-items: center; color: var(--muted); }
.site-header .logo:hover { color: var(--text); }
.site-header .logo .logo-svg {
  height: 38px;
  width: auto;
  display: block;
}
.site-header .logo.logo-inline-svg { font-size: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.site-header .logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.header-nav-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.header-nav a {
  color: var(--muted);
  text-decoration: none;
}
.header-nav a:hover { color: var(--text); }

/* Hamburger menu: visible only on mobile */
.header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}
.header-menu-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}
.header-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.header-menu-icon .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-header.nav-open .header-menu-icon .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .header-menu-icon .bar:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .header-menu-icon .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .header-menu-btn {
    display: flex;
  }
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease-out, opacity 0.2s, visibility 0.2s;
  }
  .site-header.nav-open .header-nav {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }
  .header-nav-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header-nav-main a,
  .header-nav > a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 6px;
  }
  .header-nav-main a:hover,
  .header-nav > a:hover {
    background: rgba(255, 255, 255, 0.06);
  }
  .header-feedback-btn {
    align-self: flex-start;
    margin: 0.25rem 0;
    order: 2;
  }
  /* Profile/account first on mobile, then nav links */
  .header-station-dropdown {
    order: -1;
    margin: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .header-nav-main {
    order: 0;
  }
  .header-station-dropdown .station-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
  }
  .header-station-dropdown .station-trigger .station-name {
    max-width: none;
  }
  .station-dropdown-menu {
    position: static;
    width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
  }
  .header-station-dropdown.is-open .station-dropdown-menu {
    max-height: 220px;
  }
}

/* Station / account dropdown (right side of header) */
.header-station-dropdown {
  position: relative;
  margin-left: auto;
}
.station-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.station-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}
.station-trigger .station-chevron {
  font-size: 0.6rem;
  opacity: 0.8;
  transition: transform 0.2s;
}
.header-station-dropdown.is-open .station-trigger .station-chevron {
  transform: rotate(180deg);
}
.station-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.station-avatar-letter {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.station-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .station-name { max-width: 80px; }
}
.station-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 180px;
  padding: 0.35rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 200;
}
.station-dropdown-menu[hidden] {
  display: none;
}
.station-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.9rem;
}
.station-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
}

/* Feedback button (header) */
.header-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.header-feedback-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}
.header-feedback-btn svg {
  flex-shrink: 0;
}

/* Feedback modal */
body.feedback-modal-open { overflow: hidden; }
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s;
}
.feedback-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.feedback-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.feedback-modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  padding: 0;
}
.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.feedback-modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}
.feedback-modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.feedback-modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.feedback-form {
  padding: 1.25rem;
}
.feedback-form label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.feedback-form label:first-of-type { margin-top: 0; }
.feedback-form input,
.feedback-form textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.feedback-form textarea {
  resize: vertical;
  min-height: 80px;
}
.feedback-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: flex-end;
}
.feedback-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.feedback-status-success { color: var(--success, #22c55e); }
.feedback-status-error { color: var(--danger, #ef4444); }

/* Studio: auto-hide header for more real estate */
body.studio-auto-hide-header .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.25s ease-out;
}
body.studio-auto-hide-header.studio-header-hidden .site-header {
  transform: translateY(-100%);
}
body.studio-auto-hide-header .content {
  transition: padding-top 0.25s ease-out;
}
body.studio-auto-hide-header .content {
  padding-top: 3.5rem;
}
body.studio-auto-hide-header.studio-header-hidden .content {
  padding-top: 0.5rem;
}
body.studio-auto-hide-header .site-footer {
  display: none;
}

.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}
/* Links in content: light color on dark background, no underline for a cleaner look */
.content a:not(.btn) {
  color: #cbd5e1;
  text-decoration: none;
}
.content a:not(.btn):hover {
  color: #f1f5f9;
}

.page-header {
  margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0 0 0.25rem 0; font-size: 1.75rem; }
.page-header .lead { color: var(--muted); margin: 0; }
.muted { color: var(--muted); }
.page-header p a {
  color: var(--text);
  text-decoration: none;
}
.page-header p a:hover { color: #f1f5f9; }
.view-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.view-header .program-title { margin: 0; color: var(--muted); }
.view-header .view-datetime { margin: 0.25rem 0 0 0; font-size: 0.95rem; color: var(--muted); width: 100%; }
.view-header .view-timezone { font-size: 0.9em; opacity: 0.9; }
.view-schedule-block { margin-top: 0.75rem; width: 100%; }
.view-schedule-title { margin: 0 0 0.35rem 0; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.view-schedule-list { list-style: none; padding: 0; margin: 0; }
.view-schedule-item { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.25rem; }
.view-schedule-item .view-schedule-dates { font-weight: 500; color: var(--text); }
.view-schedule-item .view-schedule-repeat { font-weight: 600; color: var(--text); }
.view-schedule-item .view-schedule-active { display: block; font-size: 0.85em; color: var(--muted); margin-top: 0.15rem; }
.view-actions { display: flex; gap: 0.5rem; margin-left: auto; }

.actions { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: white;
}
.btn:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: #475569; }
.btn-small { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #dc2626; }

.clock-view-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1rem 0;
}
.clock-view-main { min-width: 0; }
.clock-view-wrap-with-actions { margin: 0; }
.clock-view-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.clock-view-breakdown {
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.breakdown-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.breakdown-list { list-style: none; padding: 0; margin: 0; }
.breakdown-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.breakdown-item:last-child { border-bottom: none; }
.breakdown-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.breakdown-body { flex: 1; min-width: 0; }
.breakdown-title-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.15rem;
}
.breakdown-title-link:hover { text-decoration: underline; }
.breakdown-type {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.breakdown-time {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
}
.breakdown-dur { color: var(--muted); font-size: 0.9em; }
.breakdown-host { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.breakdown-desc {
  margin: 0.35rem 0 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}
.clock-view-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  position: relative;
}
.clock-view-wrap .segment {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform-origin: 50% 50%;
}
.clock-view-wrap .segment:hover,
.clock-view-wrap .segment.segment-hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.clock-view-wrap .broadcast-clock-svg text {
  pointer-events: none;
}
.broadcast-clock-svg {
  max-width: 100%;
  height: auto;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.broadcast-clock-svg .clock-segments .segment { stroke: rgba(0,0,0,0.25); }
.broadcast-clock-svg .tick { stroke: #94a3b8; stroke-width: 1; }
.broadcast-clock-svg .tick-five { stroke: #cbd5e1; stroke-width: 2; }
.broadcast-clock-svg .tick-cardinal { stroke: #f1f5f9; stroke-width: 2.5; }
.broadcast-clock-svg .segment-leader { stroke: #94a3b8; stroke-width: 1; opacity: 0.9; }
.broadcast-clock-svg .clock-center { fill: var(--bg); stroke: #334155; stroke-width: 2; }
.broadcast-clock-svg .time-label {
  fill: #f1f5f9;
  font-weight: 700;
  font-family: inherit;
}
.broadcast-clock-svg .time-label-cardinal {
  font-size: 14px;
}
.broadcast-clock-svg .time-label-five {
  font-size: 10px;
}
.broadcast-clock-svg .segment-label {
  fill: #fff;
  font-weight: 700;
  font-family: inherit;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.6);
}
.broadcast-clock-svg .segment-label-inner { font-size: 13px; }
.broadcast-clock-svg .segment-label-medium { font-size: 12px; }
.broadcast-clock-svg .segment-label-narrow { font-size: 9px; }

.clock-list-preview .clock-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.clock-list-preview .clock-cards li { display: flex; align-items: center; gap: 0.5rem; }
.clock-list-preview .card {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
}
.clock-list-preview .card:hover { border-color: var(--primary); }
.clock-list-preview .card-name { font-weight: 600; }
.clock-list-preview .card-meta { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }

.clocks-list { list-style: none; padding: 0; margin: 0; }
.clock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.clock-info > a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.clock-info > a:hover { color: #f1f5f9; }
.clock-info .program-title { color: var(--muted); margin-left: 0.5rem; font-size: 0.9rem; }
.clock-info .meta { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }
.clock-actions { display: flex; gap: 0.5rem; align-items: center; }
.clock-actions a { text-decoration: none; }
.clock-actions a.btn,
.clock-actions a.btn:hover { color: white; }

.form-block { margin-bottom: 1.5rem; }
.form-block label { display: block; margin-top: 0.75rem; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.9rem; }
.form-block input[type="text"],
.form-block input[type="number"],
.form-block input[type="date"],
.form-block input[type="file"],
.form-block select,
.form-block textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}
.form-block button { margin-top: 1rem; }
.form-submit-row {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 0.5rem; }
.form-row label { margin-right: 0.25rem; }
.form-row input { max-width: 120px; }
.form-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.form-inline label { margin: 0; }
.inline-form { display: inline; }

.segments-list { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.segment-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.seg-color { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.seg-title { font-weight: 500; }
.seg-time { color: var(--muted); font-size: 0.9rem; margin-left: auto; }
.seg-time .seg-duration { opacity: 0.85; font-size: 0.85em; }
.form-add-segment { background: var(--surface); padding: 1.25rem; border-radius: 8px; border: 1px solid var(--border); }
.form-add-segment h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.form-add-segment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}
.form-add-segment .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-add-segment .form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.form-add-segment .form-field input[type="text"],
.form-add-segment .form-field select {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
.form-add-segment .form-field-full { grid-column: 1 / -1; }
.form-add-segment .form-field-color .color-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-add-segment .form-field-color .color-hex-input { flex: 1; min-width: 0; }
.form-add-segment .form-field-color input[type="color"] {
  width: 2.5rem;
  height: 2.25rem;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--surface);
}
.form-add-segment .btn-add-segment { margin-top: 0; }

/* Duration slider: shows MM:SS, stays in sync with text input */
.duration-slider-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.duration-slider {
  flex: 1;
  min-width: 120px;
  height: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 4px;
  outline: none;
}
.duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.duration-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.duration-display {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  color: var(--text);
}
.duration-input-sync {
  margin-top: 0.35rem;
  max-width: 5rem;
}

@media (max-width: 520px) {
  .form-add-segment-grid { grid-template-columns: 1fr; }
}

/* Add schedule form — same layout as Add segment */
.form-add-schedule { background: var(--surface); padding: 1.25rem; border-radius: 8px; border: 1px solid var(--border); }
.form-add-schedule h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.form-add-schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}
.form-add-schedule .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-add-schedule .form-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}
.form-add-schedule .form-field input[type="date"],
.form-add-schedule .form-field input[type="number"],
.form-add-schedule .form-field select {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
.form-add-schedule .form-field input[type="date"] {
  cursor: pointer;
}
.form-add-schedule .btn-add-schedule { margin-top: 0; }

/* Date input: calendar icon visible on dark background, click opens native picker (Chrome, Safari, Edge) */
.content input[type="date"] {
  cursor: pointer;
}
.content input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.85;
  cursor: pointer;
}
.content input[type="date"]::-webkit-datetime-edit {
  color: var(--text);
}
@media (max-width: 520px) {
  .form-add-schedule-grid { grid-template-columns: 1fr; }
}

.clock-progress { font-weight: normal; color: var(--muted); font-size: 0.95rem; }
.next-start-msg { margin: 0.25rem 0 0 0; color: var(--muted); }
.clock-complete-msg { margin: 0.25rem 0 0 0; color: var(--success); }
.live-clock-preview { margin: 1rem 0; }
.live-clock-preview h3 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--muted); }
.live-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.clock-preview-wrap {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  position: relative;
}
.clock-preview-wrap .broadcast-clock-svg { max-width: 320px; height: auto; }
.clock-preview-wrap .segment {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform-origin: 50% 50%;
}
.clock-preview-wrap .segment:hover,
.clock-preview-wrap .segment.segment-hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.clock-preview-wrap .broadcast-clock-svg text,
.clock-view-wrap .broadcast-clock-svg text,
.clock-fullscreen-overlay .broadcast-clock-svg text {
  pointer-events: none;
}

/* Segment hover tooltip */
.segment-tooltip {
  position: fixed;
  z-index: 3000;
  left: -9999px;
  top: 0;
  max-width: 280px;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-size: 0.875rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.segment-tooltip.is-visible {
  opacity: 1;
  left: 0;
  top: 0;
}
.segment-tooltip .seg-type { color: var(--muted); font-size: 0.8em; display: block; margin-top: 0.15rem; }
.segment-tooltip .seg-time { color: var(--muted); display: block; margin-top: 0.25rem; }
.segment-tooltip .seg-dur { font-size: 0.95em; }
.segment-tooltip .seg-host { display: block; margin-top: 0.35rem; }
.segment-tooltip .seg-desc { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.85em; }

/* Full-screen clock preview */
.clock-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.clock-fullscreen-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.clock-fullscreen-overlay .clock-fullscreen-inner {
  max-width: min(95vmin, 1000px);
  width: 100%;
}
.clock-fullscreen-overlay .clock-fullscreen-inner .broadcast-clock-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.clock-fullscreen-overlay .segment {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform-origin: 50% 50%;
}
.clock-fullscreen-overlay .segment:hover,
.clock-fullscreen-overlay .segment.segment-hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.clock-fullscreen-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}
.clock-fullscreen-close:hover {
  background: var(--border);
}
body.clock-fullscreen-active { overflow: hidden; }

.schedules-list { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.schedule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-dates { font-weight: 500; }
.schedule-meta { color: var(--muted); font-size: 0.9rem; }
.schedule-remove-form { margin-left: auto; }

.logo-preview { max-height: 48px; max-width: 120px; object-fit: contain; }
input[type="color"] {
  width: 2.5rem;
  height: 2rem;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: var(--surface);
}
.color-hex-input { width: 6rem; }

.flash-messages { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.flash { padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.25rem; }
.flash-success { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.flash-error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.empty { color: var(--muted); }
.calendar-clocks { display: flex; flex-direction: column; gap: 1.5rem; }
.calendar-clock h2 { margin: 0 0 0.5rem 0; font-size: 1.1rem; }
.calendar-clock h2 a { color: var(--text); text-decoration: none; }
.schedule-list { list-style: none; padding: 0; margin: 0; }

/* Calendar */
.calendar-header { margin-bottom: 1rem; }
.calendar-intro { color: var(--muted); margin: 0.25rem 0 0 0; }
.calendar-timezone { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0 0; }
.calendar-timezone a { color: #cbd5e1; }

.calendar-view-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.calendar-tab {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--border);
}
.calendar-tab:hover { color: var(--text); background: var(--border); }
.calendar-tab.is-active { background: var(--primary); color: white; border-color: var(--primary); }

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.calendar-month-title { margin: 0; font-size: 1.35rem; min-width: 10rem; text-align: center; }
.calendar-wrap { overflow-x: auto; }
.calendar-grid-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-grid { }
.calendar-row { display: contents; }
.calendar-row-head .calendar-cell-head {
  background: var(--border);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.5rem 0.25rem;
  text-align: center;
}
.calendar-cell {
  min-width: 0;
  min-height: 5rem;
  padding: 0.35rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.calendar-cell:nth-child(7n) { border-right: none; }
.calendar-cell-empty { background: var(--bg); opacity: 0.6; }
.calendar-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.calendar-day-events { display: flex; flex-direction: column; gap: 0.2rem; }
.calendar-event {
  display: block;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, filter 0.15s ease;
}
.calendar-event:hover { background: var(--primary-hover); filter: brightness(1.05); }
.calendar-event-time { font-weight: 600; margin-right: 0.25rem; }
.calendar-event-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Week view grid: 7 days × 24 hours */
.calendar-wrap-week { overflow-x: auto; }
.calendar-week-grid {
  display: grid;
  grid-template-columns: 4rem repeat(7, minmax(0, 1fr));
  min-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-week-row { display: contents; }
.calendar-week-row-head .calendar-week-cell-time,
.calendar-week-row-head .calendar-week-cell-day {
  background: var(--border);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.35rem 0.25rem;
  text-align: center;
}
.calendar-week-cell {
  min-width: 0;
  padding: 0.2rem 0.25rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.75rem;
}
.calendar-week-cell-time { min-width: 3.5rem; color: var(--muted); }
.calendar-week-cell-day .calendar-event-week {
  display: block;
  margin-bottom: 0.15rem;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-week-dayname { display: block; }
.calendar-week-date { font-size: 0.7rem; color: var(--muted); }

/* Day view: 24 hours */
.calendar-wrap-day { overflow-x: auto; }
.calendar-day-grid {
  display: grid;
  grid-template-columns: 4rem 1fr;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-day-row { display: contents; }
.calendar-day-row-head .calendar-day-cell-time,
.calendar-day-row-head .calendar-day-cell-events {
  background: var(--border);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
}
.calendar-day-cell {
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.calendar-day-cell-time { color: var(--muted); font-size: 0.85rem; }
.calendar-day-cell-events .calendar-event-day {
  display: inline-block;
  margin-right: 0.35rem;
  margin-bottom: 0.2rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: 0.85rem;
}
.calendar-day-cell-events .calendar-event-day:hover { background: var(--primary-hover); }

/* Hover popup: clock details (no SVG) */
.calendar-hover-preview {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.calendar-hover-preview.is-visible {
  opacity: 1;
  visibility: visible;
}
.calendar-hover-preview-details {
  max-width: 280px;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  font-size: 0.875rem;
  line-height: 1.4;
}
.calendar-hover-preview-details .cal-preview-program { display: block; color: var(--muted); font-size: 0.8em; margin-top: 0.15rem; }
.calendar-hover-preview-details .cal-preview-time { display: block; color: var(--muted); font-size: 0.8em; margin-top: 0.2rem; }
.calendar-hover-preview-details .cal-preview-desc { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.85em; }

/* Settings */
.settings-form { max-width: 420px; margin-top: 1rem; }
.settings-form .form-group { margin-bottom: 1rem; }
.settings-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.settings-timezone-select { width: 100%; max-width: 320px; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 1rem; }
.timezone-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.timezone-row select { flex: 1; min-width: 200px; }
.form-hint { font-size: 0.875rem; color: var(--muted); margin-top: 0.35rem; }

/* Studio: full-width page, left = LED time + controls, right = large clock */
/* Studio: use full viewport width (override .content max-width when this page is present) */
.content:has(.studio-page) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.studio-page {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.studio-header { margin-bottom: 1rem; }
.studio-intro { color: var(--muted); margin: 0.25rem 0 0 0; }

.studio-dashboard {
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  flex: 1;
  min-height: 0;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 720px) {
  .studio-page { max-height: none; min-height: 0; overflow: visible; }
  .studio-dashboard { grid-template-columns: 1fr; align-items: start; justify-items: stretch; }
}

.studio-left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
}
/* 7-segment display font (https://torinak.com/font/7segment.ttf) */
@font-face {
  font-family: 'Segment7';
  src: url('fonts/7segment.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.studio-led-panel {
  --led-color: #22c55e;
  --led-rgb: 34, 197, 94;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0a0e14;
  border: 2px solid #1a2332;
  border-radius: 12px;
  padding: 1.25rem 3rem;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.studio-led-panel.studio-led-glow-on {
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 20px rgba(var(--led-rgb, 34, 197, 94), 0.25);
}
.studio-led-time {
  font-family: 'Segment7', 'Orbitron', 'Courier New', monospace;
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--led-color, #22c55e);
  text-shadow: none;
  line-height: 1.1;
  min-width: 0;
  max-width: 100%;
  padding-right: 0.12em;
  overflow: visible;
  text-align: center;
  width: fit-content;
  box-sizing: border-box;
}
.studio-led-panel.studio-led-glow-on .studio-led-time {
  text-shadow: 0 0 10px rgba(var(--led-rgb, 34, 197, 94), 0.6), 0 0 24px rgba(var(--led-rgb, 34, 197, 94), 0.35);
}
.studio-led-date {
  font-family: 'Segment7', 'Orbitron', monospace;
  font-size: clamp(0.9rem, 2.5vw, 1.5rem);
  font-weight: normal;
  color: var(--led-color, #15803d);
  filter: brightness(0.85);
  margin-top: 0.5rem;
  letter-spacing: 0.05em;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
.studio-gear-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  left: auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.4);
  color: var(--muted);
  opacity: 0.55;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  z-index: 10;
}
.studio-gear-btn:hover {
  opacity: 1;
  background: rgba(51, 65, 85, 0.9);
  color: var(--text);
}
.studio-gear-icon {
  width: 1.35rem;
  height: 1.35rem;
}
.studio-left {
  position: relative;
}
.studio-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  max-width: 100%;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.25s ease-out;
  overflow-y: auto;
  padding: 1.25rem;
  box-sizing: border-box;
}
.studio-drawer.is-open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}
.studio-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.studio-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.25rem 0 0 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.studio-drawer-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.studio-drawer-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.studio-drawer-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.studio-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 199;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.studio-drawer-backdrop.is-visible {
  pointer-events: auto;
  opacity: 1;
}
.studio-led-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0;
}
.studio-led-options-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}
.studio-led-options input[type="color"] {
  width: 2.25rem;
  height: 2rem;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}
.studio-led-options-glow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
}
.studio-led-options-glow input { margin: 0; }
.studio-auto-advance-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
}
.studio-auto-advance-label input { margin: 0; }
.studio-controls-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.studio-nav-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.studio-label { font-size: 0.875rem; color: var(--muted); margin: 0; }
.studio-date-input, .studio-hour-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 0;
}
.studio-hour-select { min-width: 6rem; }

.studio-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  min-width: 0;
  justify-self: start;
}
.studio-clock-wrap {
  position: relative;
  width: 100%;
  max-width: min(85vmin, 900px);
  max-height: min(85vmin, 900px);
  aspect-ratio: 1;
  flex-shrink: 1;
  min-height: 0;
}
.studio-clock-pie {
  display: block;
  width: 100%;
  height: 100%;
}
.studio-clock-pie .broadcast-clock-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.studio-hands-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.studio-clock-name {
  margin: 0.75rem 0 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.studio-no-clock {
  padding: 2rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
}
.studio-no-clock p { margin: 0.5rem 0; }
.studio-no-clock a { color: #cbd5e1; }
.studio-no-clock a:hover { color: #f1f5f9; }

.site-footer {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Auth pages */
.auth-page {
  max-width: 420px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
}
.auth-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}
.auth-subtitle {
  margin: 0 0 1.25rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-form label {
  display: block;
  margin: 1rem 0 0.35rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-form label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0 0;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.auth-form .btn-block {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.65rem;
}
.auth-divider {
  text-align: center;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem;
  background: #fff;
  color: #1f2937;
  border: 1px solid var(--border);
}
.btn-google:hover {
  background: #f1f5f9;
  color: #1f2937;
}
.auth-footer {
  margin: 1.25rem 0 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
.auth-footer a { color: #cbd5e1; }
.auth-footer a:hover { color: #f1f5f9; }

/* Signup submit: spinner when loading */
.btn .btn-spinner {
  display: none;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.5em;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
.btn.is-loading .btn-text {
  display: inline-block;
}
.btn.is-loading .btn-spinner {
  display: inline-block;
}
.btn.is-loading {
  opacity: 0.85;
  cursor: wait;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Signup password requirements */
.signup-promo-wrap {
  margin-bottom: 0.5rem;
}
.signup-email-wrap {
  margin-bottom: 0.25rem;
}
.signup-password-wrap,
.signup-confirm-wrap {
  margin-top: 1rem;
}
.signup-field-status {
  font-size: 0.85rem;
  margin: 0.25rem 0 0 0;
  color: var(--muted);
}
.signup-field-status.signup-status-ok {
  color: var(--success);
  font-weight: 500;
}
.signup-field-status.signup-status-error {
  color: var(--danger);
}
.signup-field-status.signup-status-checking {
  color: var(--muted);
}
.signup-password-requirements {
  list-style: none;
  padding: 0.35rem 0 0 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.signup-password-requirements .signup-req {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
}
.signup-req-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  font-weight: bold;
}
.signup-req.signup-req-met {
  color: var(--success);
}
.signup-req.signup-req-met .signup-req-icon {
  color: var(--success);
}
.signup-req.signup-req-unmet .signup-req-icon {
  color: var(--muted);
}

/* Station form — match auth-form width (420px) and input/label styles */
.station-form {
  max-width: 420px;
}
.station-form label {
  display: block;
  margin: 1rem 0 0.35rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.station-form input[type="text"] {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  margin-top: 0.25rem;
  box-sizing: border-box;
}
.station-form input[type="file"] {
  width: 100%;
  max-width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
}
.station-form input[type="file"]::file-selector-button {
  padding: 0.35rem 0.65rem;
  margin-right: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.875rem;
}
.station-form input[type="file"]::file-selector-button:hover {
  background: var(--border);
}
.station-form select.station-form-select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  margin-top: 0.25rem;
  cursor: pointer;
  box-sizing: border-box;
}
.station-form .form-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.35rem;
}
.station-logo-preview {
  max-width: 160px;
  max-height: 80px;
  margin-top: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.station-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

/* Logo modal (station + clock logo picker with crop) */
.logo-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.logo-modal[aria-hidden="true"] { display: none; }
.logo-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.logo-modal-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.logo-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.logo-modal-header h2 { margin: 0; font-size: 1.25rem; }
.logo-modal-close { background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; padding: 0.25rem; line-height: 1; }
.logo-modal-close:hover { color: var(--text); }
.logo-modal-recommended { margin: 0; padding: 0.75rem 1.25rem; font-size: 0.875rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.logo-modal-tabs { display: flex; gap: 0; padding: 0 1.25rem; border-bottom: 1px solid var(--border); }
.logo-tab { padding: 0.6rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 0.9rem; cursor: pointer; }
.logo-tab:hover { color: var(--text); }
.logo-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.logo-modal-panel { padding: 1.25rem; }
.logo-modal-panel.hidden { display: none; }
.logo-existing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; min-height: 80px; }
.logo-existing-grid .logo-loading { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.9rem; }
.logo-existing-item { display: block; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; background: var(--bg); }
.logo-existing-item:hover { border-color: var(--primary); }
.logo-existing-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.logo-existing-item span { display: block; padding: 0.35rem; font-size: 0.75rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-upload-area input[type="file"] { display: block; margin-bottom: 0.75rem; }
.logo-upload-hint { margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--muted); }
.logo-crop-wrap { margin-top: 1rem; }
.logo-crop-wrap.hidden { display: none; }
.logo-crop-container { max-height: 320px; background: var(--bg); border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; }
.logo-crop-container img { max-width: 100%; display: block; }
.logo-crop-apply { margin-top: 0.5rem; }

/* Backyard (admin) */
.backyard-page { max-width: 960px; margin: 0 auto; }
.backyard-page .subtitle { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 1rem 0; }
.backyard-breadcrumb { margin-bottom: 0.75rem; font-size: 0.9rem; }
.backyard-breadcrumb .sep { margin: 0 0.35rem; color: var(--muted); }
.backyard-breadcrumb a { color: #cbd5e1; }
.backyard-breadcrumb a:hover { color: #f1f5f9; }
.backyard-dashboard .backyard-header { margin-bottom: 1.5rem; }
.backyard-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.backyard-card-link { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.backyard-card-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); border-color: var(--primary); }
.backyard-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: 6px; margin-bottom: 0.75rem; }
.backyard-card-icon svg { flex-shrink: 0; width: 24px; height: 24px; stroke: currentColor; }
.backyard-card-link h3 { margin: 0.25rem 0; font-size: 1.15rem; color: var(--text); }
.backyard-card-link p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.backyard-search { display: flex; gap: 0.5rem; margin: 1rem 0; }
.backyard-search input[type="text"] { flex: 1; max-width: 320px; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.backyard-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.backyard-stat { background: var(--surface); padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.9rem; }
.backyard-stat strong { color: var(--primary); }
.backyard-users-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.backyard-user-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.backyard-user-card-main { flex: 1 1 200px; min-width: 0; }
.backyard-user-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.35rem; }
.backyard-user-email { font-weight: 600; color: var(--text); word-break: break-all; }
.backyard-user-name { color: var(--muted); font-size: 0.9rem; }
.backyard-user-badges { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.backyard-user-card-meta { font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.15rem; }
.backyard-user-card-actions { flex-shrink: 0; }
.backyard-actions-trigger { list-style: none; padding: 0.4rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.875rem; color: var(--text); cursor: pointer; display: inline-block; }
.backyard-actions-trigger::-webkit-details-marker { display: none; }
.backyard-actions-menu { position: absolute; right: 0; top: 100%; margin-top: 2px; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 50; padding: 0.25rem 0; }
.backyard-actions-menu form { margin: 0; display: block; }
.backyard-action-item { display: block; width: 100%; padding: 0.5rem 1rem; text-align: left; background: none; border: none; font-size: 0.875rem; color: var(--text); cursor: pointer; }
.backyard-action-item:hover:not(:disabled) { background: var(--border); }
.backyard-action-item-danger { color: var(--danger); font-weight: 500; }
.backyard-empty { color: var(--muted); font-style: italic; text-align: center; padding: 1.5rem; margin: 1rem 0; }
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.status-active { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.status-pending { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.status-suspended { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.status-admin { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.backyard-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
.backyard-filters label { display: flex; align-items: center; gap: 0.35rem; }
.backyard-filters select, .backyard-filters input[type="text"] { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.backyard-pagination { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; }
.backyard-pagination a { color: #cbd5e1; }
.backyard-pagination a:hover { color: #f1f5f9; }
.backyard-activity-list { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.backyard-activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.backyard-activity-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.backyard-activity-card-head::-webkit-details-marker { display: none; }
.backyard-activity-card[open] .backyard-activity-card-head { border-bottom: 1px solid var(--border); }
.backyard-activity-ip { font-weight: 600; font-family: ui-monospace, monospace; font-size: 0.95rem; color: var(--text); }
.backyard-activity-location { font-size: 0.9rem; color: var(--muted); }
.backyard-activity-location-unknown { font-style: italic; }
.backyard-activity-count { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.backyard-activity-entries { list-style: none; margin: 0; padding: 0 1.25rem 1rem; }
.backyard-activity-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.35rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.backyard-activity-entry:last-child { border-bottom: none; }
.backyard-activity-time { flex-shrink: 0; color: var(--muted); min-width: 8rem; }
.backyard-activity-type { flex-shrink: 0; min-width: 4rem; }
.backyard-activity-user { flex-shrink: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.backyard-activity-path { flex: 1 1 8rem; min-width: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; padding: 0; color: var(--text); }
.backyard-activity-method { flex-shrink: 0; font-size: 0.75rem; color: var(--muted); }

/* Backyard Feedback list */
.backyard-feedback-list { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.backyard-feedback-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.backyard-feedback-card-unread { border-left: 3px solid var(--primary); }
.backyard-feedback-card-main { flex: 1 1 280px; min-width: 0; }
.backyard-feedback-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.backyard-feedback-from { font-weight: 600; color: var(--text); word-break: break-all; }
.backyard-feedback-time { font-size: 0.85rem; color: var(--muted); }
.backyard-feedback-message {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.45;
}
.backyard-feedback-card-actions { flex-shrink: 0; }

/* Backyard – Invite codes (promos) */
.backyard-promos-add { margin-bottom: 2rem; }
.backyard-promos-add h2 { font-size: 1.1rem; margin: 0 0 0.75rem 0; color: var(--muted); }
.backyard-promo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.backyard-promo-form label { margin: 0; font-size: 0.9rem; color: var(--muted); }
.backyard-promo-form input[type="text"],
.backyard-promo-form input[type="number"] { width: auto; min-width: 100px; padding: 0.5rem 0.75rem; font-size: 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.backyard-promos-list h2 { font-size: 1.1rem; margin: 0 0 0.75rem 0; color: var(--muted); }
.backyard-promos-list { margin-bottom: 1rem; }
.backyard-promo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 0.75rem; }
.backyard-promo-card-full { border-color: var(--danger); opacity: 0.9; }
.backyard-promo-card-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.backyard-promo-code { font-weight: 600; font-size: 1.1rem; color: var(--text); }
.backyard-promo-stats { font-size: 0.9rem; color: var(--muted); }
.backyard-promo-seats-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.backyard-promo-seats-form input[type="number"] { width: 4.5em; padding: 0.4rem 0.5rem; font-size: 0.95rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.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; }

/* Landing page (public home) */
.landing {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.landing-hero {
  text-align: center;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.landing-hero-logo {
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
}
.landing-hero-logo .logo-svg {
  height: 88px;
  width: auto;
  display: block;
  color: var(--text);
  opacity: 0.95;
}
.landing-hero-title {
  margin: 0 0 0.75rem 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.landing-hero-lead {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--muted);
}
.landing-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1rem auto;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
}
.landing-beta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  animation: landing-pulse 2s ease-in-out infinite;
}
@keyframes landing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.landing-beta-notice {
  margin: 0 0 1.75rem 0;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.landing-beta-notice strong {
  color: #e2e8f0;
}
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.btn-landing-cta {
  min-width: 120px;
  padding: 0.65rem 1.35rem;
  font-weight: 600;
}
.landing-muted {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}