/* Geist studio calendar — presentation only; existing reservation data bindings stay intact. */
@media (min-width: 769px) {
  body:has(#studioView.active) .main.studio-mode > .topbar {
    display: flex;
  }

  #studioView {
    width: min(1200px, 100%);
    margin-inline: auto;
    color: var(--geist-ink);
  }

  #studioView button:focus-visible,
  #studioView input:focus-visible,
  #staffScheduleModal button:focus-visible,
  #staffScheduleModal input:focus-visible,
  #staffScheduleModal textarea:focus-visible,
  #recurringTrainingModal button:focus-visible,
  #recurringTrainingModal input:focus-visible,
  #recurringTrainingModal textarea:focus-visible,
  #recurringTrainingManageModal button:focus-visible,
  body:has(#studioView.active) .dropdown-layer button:focus-visible,
  body:has(#studioView.active) .date-picker-card button:focus-visible {
    outline: 2px solid rgba(0, 237, 100, 0.48);
    outline-offset: 1px;
  }

  body:has(#studioView.active) .nav-item:focus-visible,
  body:has(#studioView.active) .topbar button:focus-visible {
    outline: 2px solid rgba(0, 237, 100, 0.48);
    outline-offset: 1px;
  }

  #studioView .studio-manage-page {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--geist-hairline);
    border-radius: 12px;
    background: var(--geist-elevated);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.035);
  }

  #studioView .studio-manage-head {
    display: flex;
    min-height: 112px;
    align-items: flex-end;
    border-bottom: 1px solid var(--geist-hairline);
    background: var(--geist-elevated);
    padding: 22px 24px;
  }

  #studioView .studio-manage-head .eyebrow {
    margin: 0 0 5px;
    color: var(--geist-mute);
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  #studioView .studio-manage-head h2 {
    margin: 0;
    color: var(--geist-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.8px;
  }

  #studioView .studio-manage-head p:last-child {
    margin: 4px 0 0;
    color: var(--geist-mute);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  #studioView .studio-toolbar {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--geist-hairline);
    background: var(--geist-canvas);
    padding: 13px 18px;
  }

  #studioView .studio-week-nav,
  #studioView .studio-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #studioView .studio-week-nav .circle,
  #studioView .studio-week-nav .pill,
  #studioView .studio-toolbar-actions .record-control,
  #studioView #studioAddStaffBtn {
    min-height: 38px;
    border: 1px solid var(--geist-hairline);
    border-radius: 6px;
    background: var(--geist-elevated);
    color: var(--geist-body);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
  }

  #studioView .studio-week-nav .circle {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 20px;
  }

  #studioView .studio-week-nav .circle:hover,
  #studioView .studio-week-nav .pill:hover,
  #studioView .studio-toolbar-actions .record-control:hover {
    background: var(--geist-soft);
    color: var(--geist-ink);
  }

  #studioView .studio-week-nav #studioTodayBtn {
    order: 3;
    border-radius: 6px;
  }

  #studioView .studio-week-nav #studioWeekTitle {
    order: 4;
    min-width: 0;
    margin-left: 8px;
    color: var(--geist-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.25px;
  }

  #studioView .studio-toolbar-actions .record-control.active {
    border-color: rgba(0, 237, 100, 0.34);
    background: var(--geist-accent-soft);
    color: #087231;
  }

  #studioView .studio-toolbar-actions #studioAddStaffBtn {
    margin-left: 4px;
    border-color: var(--geist-accent);
    background: var(--geist-accent);
    color: #06140a;
    padding-inline: 14px;
    font-weight: 600;
  }

  #studioView .studio-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    gap: 0;
    align-items: stretch;
  }

  #studioView .studio-week-card,
  #studioView .studio-check-panel {
    border: 0;
    border-radius: 0;
    background: var(--geist-elevated);
    color: var(--geist-ink);
    box-shadow: none;
  }

  #studioView .studio-week-card {
    min-width: 0;
    overflow: hidden;
  }

  #studioView .studio-legend {
    display: flex;
    min-height: 48px;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--geist-hairline);
    background: var(--geist-elevated);
    color: var(--geist-body);
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 500;
  }

  #studioView .studio-legend span {
    color: var(--geist-body);
  }

  #studioView .studio-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--studio-type-color, var(--geist-accent));
  }

  #studioView .studio-week-grid {
    grid-template-columns: 60px repeat(7, minmax(112px, 1fr));
    max-height: calc(100vh - 316px);
    overflow: auto;
    background: var(--geist-hairline);
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
  }

  #studioView .studio-day-head,
  #studioView .studio-time-label,
  #studioView .studio-time-cell {
    border: 0;
    border-right: 1px solid var(--geist-hairline);
    border-bottom: 1px solid var(--geist-hairline);
    background: var(--geist-elevated);
  }

  #studioView .studio-day-head {
    min-height: 54px;
    color: var(--geist-ink);
    font-weight: 600;
  }

  #studioView .studio-day-head span {
    color: var(--geist-mute);
    font-family: "Geist Mono", monospace;
    font-size: 9px;
    font-weight: 500;
  }

  #studioView .studio-day-head strong {
    font-size: 12px;
    font-weight: 600;
  }

  #studioView .studio-day-head.today {
    background: #f7fff9;
    color: #087231;
    box-shadow: 0 -2px 0 var(--geist-accent) inset;
  }

  #studioView .studio-day-head.today span {
    color: #087231;
  }

  #studioView .studio-day-head.sunday,
  #studioView .studio-day-head.holiday,
  #studioView .studio-day-head.sunday span,
  #studioView .studio-day-head.holiday span,
  #studioView .studio-day-head em {
    color: #c50000;
  }

  #studioView .studio-corner {
    background: var(--geist-canvas);
  }

  #studioView .studio-time-label,
  #studioView .studio-time-cell {
    min-height: 76px;
  }

  #studioView .studio-time-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--geist-canvas);
    color: var(--geist-mute);
    padding: 10px 8px;
    font-family: "Geist Mono", monospace;
    font-size: 9px;
    font-weight: 500;
  }

  #studioView .studio-time-cell:hover {
    background: #fcfcfc;
  }

  #studioView .studio-time-cell.drag-selecting::after {
    border-radius: 6px;
    background: rgba(0, 237, 100, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 237, 100, 0.38);
  }

  #studioView .studio-week-event {
    left: 4px;
    right: 4px;
    min-height: 28px;
    border: 1px solid color-mix(in srgb, var(--studio-type-color) 38%, #d7d7d7);
    border-left-width: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--studio-type-color) 11%, #ffffff);
    color: var(--geist-ink);
    padding: 5px 7px;
    box-shadow: none;
  }

  #studioView .studio-week-event.typed {
    background: color-mix(in srgb, var(--studio-type-color) 11%, #ffffff);
  }

  #studioView .studio-week-event:hover {
    background: color-mix(in srgb, var(--studio-type-color) 17%, #ffffff);
  }

  #studioView .studio-week-event span {
    color: var(--geist-body);
    font-size: 9px;
    font-weight: 500;
  }

  #studioView .studio-week-event strong {
    color: var(--geist-ink);
    font-size: 11px;
    font-weight: 600;
  }

  #studioView .studio-assignment-badge {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #ee0000;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
    font-size: 10px;
    font-weight: 600;
  }

  #studioView .studio-check-panel {
    min-width: 0;
    border-left: 1px solid var(--geist-hairline);
    padding: 18px;
  }

  #studioView .studio-check-panel h3 {
    margin: 0 0 4px;
    color: var(--geist-ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.35px;
  }

  #studioView .studio-check-panel > p {
    margin: 0 0 16px;
    color: var(--geist-mute);
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
  }

  #studioView .studio-filter-section {
    border-top: 1px solid var(--geist-hairline);
    padding: 12px 0;
  }

  #studioView .studio-filter-section summary {
    min-height: 28px;
    color: var(--geist-body);
    font-size: 11px;
    font-weight: 600;
  }

  #studioView .studio-filter-section summary::after {
    color: var(--geist-mute);
  }

  #studioView .studio-training-type-filters {
    gap: 6px;
    margin-top: 8px;
  }

  #studioView .studio-training-filter,
  #studioView .studio-owner-filters label {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--geist-hairline);
    border-radius: 6px;
    background: var(--geist-elevated);
    color: var(--geist-body);
    padding: 0 9px;
    font-size: 11px;
    font-weight: 500;
  }

  #studioView .studio-training-filter:has(input:checked),
  #studioView .studio-owner-filters label:has(input:checked) {
    border-color: rgba(0, 237, 100, 0.34);
    background: var(--geist-accent-soft);
    color: #087231;
  }

  #studioView .studio-training-filter input,
  #studioView .studio-owner-filters input {
    appearance: none;
    width: 15px;
    min-width: 15px;
    height: 15px;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    background: var(--geist-elevated);
  }

  #studioView .studio-training-filter input:checked,
  #studioView .studio-owner-filters input:checked {
    border-color: var(--geist-accent);
    background: var(--geist-accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%2306140a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  }

  #studioView .studio-recurring-filter {
    margin-top: 4px;
  }

  #studioView .studio-unassigned-alert {
    gap: 8px;
    margin: 12px 0 0;
    border: 1px solid #f3d7a5;
    border-radius: 8px;
    background: #fff8e8;
    color: #855b00;
    padding: 11px;
    font-size: 11px;
    font-weight: 500;
  }

  #studioView .studio-unassigned-alert b {
    color: #a34e00;
  }

  #studioView .studio-unassigned-alert button {
    min-height: 32px;
    border: 1px solid #edcc8d;
    border-radius: 6px;
    background: #fff;
    color: #855b00;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 600;
  }

  #studioView .studio-week-grid.is-month {
    grid-template-columns: repeat(7, minmax(110px, 1fr));
  }

  #studioView .studio-month-head {
    border-color: var(--geist-hairline);
    background: var(--geist-canvas);
    color: var(--geist-mute);
    font-family: "Geist Mono", monospace;
    font-size: 9px;
    font-weight: 500;
  }

  #studioView .studio-month-head.sunday {
    color: #c50000;
  }

  #studioView .studio-month-day {
    min-height: 114px;
    border-color: var(--geist-hairline);
    background: var(--geist-elevated);
    color: var(--geist-ink);
    padding: 8px;
  }

  #studioView .studio-month-day:hover {
    background: #fcfcfc;
  }

  #studioView .studio-month-day.muted {
    background: #fcfcfc;
    opacity: 1;
  }

  #studioView .studio-month-day.muted > span b {
    color: #c7c7c7;
  }

  #studioView .studio-month-day.today {
    background: #f7fff9;
    box-shadow: inset 0 0 0 2px var(--geist-accent);
  }

  #studioView .studio-month-day > span {
    color: var(--geist-body);
    font-size: 11px;
    font-weight: 600;
  }

  #studioView .studio-month-day > span em,
  #studioView .studio-month-day.sunday > span b,
  #studioView .studio-month-day.holiday > span b {
    color: #c50000;
  }

  #studioView .studio-month-event,
  #studioView .studio-month-event.typed {
    border: 1px solid color-mix(in srgb, var(--studio-type-color) 38%, #d7d7d7);
    border-left-width: 3px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--studio-type-color) 11%, #ffffff);
    color: var(--geist-ink);
    padding: 5px 6px;
    font-size: 10px;
    font-weight: 500;
  }

  #studioView .studio-month-event:hover {
    background: color-mix(in srgb, var(--studio-type-color) 17%, #ffffff);
  }
}

/* Studio reservation, recurring registration and recurring management dialogs. */
#staffScheduleModal,
#recurringTrainingModal,
#recurringTrainingManageModal {
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 23, 0.42);
  padding: 24px;
  backdrop-filter: blur(6px);
}

#staffScheduleModal .studio-schedule-modal,
#recurringTrainingModal .recurring-training-card,
#recurringTrainingManageModal .recurring-training-manage-card {
  border: 1px solid var(--geist-hairline);
  border-radius: 16px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 28px 72px -24px rgba(0, 0, 0, 0.45);
}

#staffScheduleModal .studio-schedule-modal {
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 26px;
}

#staffScheduleModal .studio-modal-close {
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 21px;
  box-shadow: none;
}

#staffScheduleModal .studio-modal-close:hover {
  background: var(--geist-soft);
  color: var(--geist-ink);
}

#staffScheduleModal .studio-modal-title {
  border-bottom: 1px solid var(--geist-hairline);
  padding: 0 54px 18px 0;
}

#staffScheduleModal .studio-modal-title h2 {
  margin: 0 0 4px;
  color: var(--geist-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.65px;
}

#staffScheduleModal .studio-modal-title p,
#staffScheduleModal .studio-staff-head p {
  color: var(--geist-mute);
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
}

#staffScheduleModal .studio-schedule-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
  margin-top: 16px;
}

#staffScheduleModal .studio-schedule-section {
  min-height: 0;
  gap: 13px;
  border: 1px solid var(--geist-hairline);
  border-radius: 12px;
  background: var(--geist-canvas);
  padding: 17px;
  box-shadow: none;
}

#staffScheduleModal .studio-schedule-section h3,
#staffScheduleModal .studio-staff-head h3 {
  color: var(--geist-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

#staffScheduleModal .studio-section-icon {
  color: #087231;
  font-weight: 600;
}

#staffScheduleModal label,
#recurringTrainingModal label {
  gap: 7px;
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 500;
}

#staffScheduleModal .custom-select,
#staffScheduleModal .date-button,
#staffScheduleModal .time-button,
#staffScheduleModal input[type="text"],
#staffScheduleModal textarea,
#recurringTrainingModal .custom-select,
#recurringTrainingModal .date-button,
#recurringTrainingModal .time-button,
#recurringTrainingModal input,
#recurringTrainingModal textarea {
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

#staffScheduleModal textarea,
#recurringTrainingModal textarea {
  min-height: 76px;
  padding: 11px 12px;
  font-weight: 400;
}

#staffScheduleModal textarea::placeholder,
#staffScheduleModal input::placeholder,
#recurringTrainingModal textarea::placeholder,
#recurringTrainingModal input::placeholder {
  color: var(--geist-faint);
}

#staffScheduleModal .custom-select i,
#recurringTrainingModal .custom-select i {
  color: var(--geist-mute);
}

#staffScheduleModal .custom-select:hover,
#staffScheduleModal .date-button:hover,
#staffScheduleModal .time-button:hover,
#recurringTrainingModal .custom-select:hover,
#recurringTrainingModal .date-button:hover,
#recurringTrainingModal .time-button:hover {
  border-color: #d2d2d2;
  background: #fcfcfc;
}

#staffScheduleModal .studio-checkbox-line,
#recurringTrainingModal .check-line {
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body) !important;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
}

#staffScheduleModal .studio-checkbox-line input,
#recurringTrainingModal .check-line input {
  appearance: none;
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background: var(--geist-elevated);
}

#staffScheduleModal .studio-checkbox-line input:checked,
#recurringTrainingModal .check-line input:checked {
  border-color: var(--geist-accent);
  background: var(--geist-accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%2306140a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

#staffScheduleModal .studio-field-grid.time > span {
  color: var(--geist-mute);
  font-size: 12px;
  font-weight: 500;
}

#staffScheduleModal .studio-memo-count {
  color: var(--geist-mute);
  font-size: 10px;
  font-weight: 500;
}

#staffScheduleModal .studio-repeat-box {
  gap: 10px;
  border-top: 1px solid var(--geist-hairline);
  padding-top: 13px;
}

#staffScheduleModal .studio-repeat-toggle {
  gap: 10px !important;
}

#staffScheduleModal .studio-repeat-toggle span,
#staffScheduleModal .studio-repeat-toggle b {
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 600;
}

#staffScheduleModal .studio-repeat-toggle input {
  width: 34px;
  height: 18px;
  background: #d7d7d7;
  box-shadow: none;
}

#staffScheduleModal .studio-repeat-toggle input::after {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#staffScheduleModal .studio-repeat-toggle input:checked {
  background: var(--geist-accent);
}

#staffScheduleModal .studio-repeat-controls {
  gap: 12px;
  border: 1px solid rgba(0, 237, 100, 0.22);
  border-radius: 8px;
  background: var(--geist-accent-soft);
  padding: 10px;
}

#staffScheduleModal .studio-repeat-controls.disabled {
  border-color: var(--geist-hairline);
  background: var(--geist-soft);
  opacity: 0.55;
  filter: none;
}

#staffScheduleModal .studio-repeat-days,
#staffScheduleModal .studio-repeat-count {
  color: var(--geist-body);
  font-size: 10px;
  font-weight: 500;
}

#staffScheduleModal .studio-repeat-days button {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 500;
}

#staffScheduleModal .studio-repeat-days button.active {
  border-color: var(--geist-accent);
  background: var(--geist-accent);
  color: #06140a;
  font-weight: 600;
}

#staffScheduleModal .studio-repeat-count input {
  min-height: 32px;
  text-align: center;
}

#staffScheduleModal .pill.small {
  min-height: 36px;
  border: 1px solid rgba(0, 237, 100, 0.36);
  border-radius: 6px;
  background: var(--geist-accent-soft);
  color: #087231;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 600;
}

#staffScheduleModal .studio-staff-table {
  border: 1px solid var(--geist-hairline);
  border-radius: 8px;
  background: var(--geist-elevated);
}

#staffScheduleModal .studio-staff-table-head {
  background: var(--geist-soft);
  color: var(--geist-mute);
  font-family: "Geist Mono", monospace;
  font-size: 9px;
  font-weight: 500;
}

#staffScheduleModal .studio-staff-row {
  border-color: var(--geist-hairline);
  background: var(--geist-elevated);
}

#staffScheduleModal .studio-row-drag {
  color: var(--geist-faint);
}

#staffScheduleModal .studio-row-number {
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 500;
}

#staffScheduleModal .studio-row-delete {
  width: 34px;
  height: 34px;
  border: 1px solid #ffd4d4;
  border-radius: 6px;
  background: #fff3f3;
  color: #c50000;
  box-shadow: none;
}

#staffScheduleModal .studio-add-row {
  border: 1px dashed rgba(0, 181, 69, 0.42);
  border-radius: 6px;
  background: #f7fff9;
  color: #087231;
  font-size: 11px;
  font-weight: 600;
}

#staffScheduleModal .studio-modal-actions {
  grid-template-columns: 120px 140px;
  gap: 8px;
  margin-top: 16px;
  border-top: 1px solid var(--geist-hairline);
  padding-top: 16px;
}

#staffScheduleModal .studio-modal-actions .pill,
#recurringTrainingModal > form > .pill,
#recurringTrainingManageModal .training-card .pill {
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
}

#staffScheduleModal .studio-modal-actions .pill.primary,
#recurringTrainingModal > form > .pill.primary {
  border-color: var(--geist-accent);
  background: var(--geist-accent);
  color: #06140a;
}

#staffScheduleModal .time-button:disabled,
#recurringTrainingModal .time-button:disabled {
  border-color: var(--geist-hairline);
  background: var(--geist-soft);
  color: var(--geist-faint);
  opacity: 1;
}

#recurringTrainingModal .recurring-training-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  padding: 26px;
}

#recurringTrainingModal .section-head,
#recurringTrainingModal .check-line,
#recurringTrainingModal .time-row,
#recurringTrainingModal label:has(textarea),
#recurringTrainingModal > form > .pill {
  grid-column: 1 / -1;
}

#recurringTrainingModal .section-head,
#recurringTrainingManageModal .section-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--geist-hairline);
  padding-bottom: 16px;
}

#recurringTrainingModal .section-head .eyebrow,
#recurringTrainingManageModal .section-head .eyebrow {
  color: var(--geist-mute);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#recurringTrainingModal .section-head h2,
#recurringTrainingManageModal .section-head h2 {
  margin-top: 5px;
  color: var(--geist-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.6px;
}

#recurringTrainingModal .section-head .circle,
#recurringTrainingManageModal .section-head .circle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
}

#recurringTrainingModal > form > .pill {
  justify-self: end;
  width: auto;
  min-width: 160px;
}

#recurringTrainingManageModal .recurring-training-manage-card {
  gap: 16px;
  width: min(780px, 100%);
  max-height: calc(100vh - 48px);
  padding: 26px;
}

#recurringTrainingManageModal .training-list {
  gap: 8px;
}

#recurringTrainingManageModal .training-card {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--geist-hairline);
  border-radius: 8px;
  background: var(--geist-canvas);
  padding: 14px;
}

#recurringTrainingManageModal .training-card > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

#recurringTrainingManageModal .training-card strong {
  color: var(--geist-ink);
  font-size: 13px;
  font-weight: 600;
}

#recurringTrainingManageModal .training-card span,
#recurringTrainingManageModal .training-card small {
  color: var(--geist-mute);
  font-size: 11px;
  font-weight: 400;
}

#recurringTrainingManageModal .training-card .danger-pill {
  min-width: 72px;
  border-color: #ffd4d4;
  background: #fff3f3;
  color: #c50000;
}

#recurringTrainingManageModal .empty-state {
  border: 1px dashed var(--geist-hairline);
  border-radius: 8px;
  background: var(--geist-canvas);
  color: var(--geist-mute);
  padding: 28px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

#staffEventDetailModal .event-detail-staff {
  grid-column: 1 / -1;
  min-width: 0;
}

#staffEventDetailModal .event-detail-staff-table-head,
#staffEventDetailModal .event-detail-staff-row {
  grid-template-columns: 30px minmax(126px, 1fr) minmax(126px, 1fr) minmax(170px, 1.4fr) 42px;
}

/* Studio dropdown and date picker layers. */
body:has(#studioView.active) .dropdown-layer {
  border: 1px solid var(--geist-hairline);
  border-radius: 10px;
  background: var(--geist-elevated);
  padding: 6px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 14px 32px -10px rgba(0, 0, 0, 0.24);
}

body:has(#studioView.active) .dropdown-option {
  min-height: 38px;
  border-radius: 6px;
  color: var(--geist-body);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

body:has(#studioView.active) .dropdown-option:hover,
body:has(#studioView.active) .dropdown-option.selected {
  background: var(--geist-soft);
  color: var(--geist-ink);
}

body:has(#studioView.active) .dropdown-option.selected i {
  color: var(--geist-accent);
}

body:has(#studioView.active) .date-picker-card {
  border: 1px solid var(--geist-hairline);
  border-radius: 12px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 16px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -12px rgba(0, 0, 0, 0.28);
}

body:has(#studioView.active) .date-picker-top strong {
  color: var(--geist-ink);
  font-size: 15px;
  font-weight: 600;
}

body:has(#studioView.active) .date-picker-top button,
body:has(#studioView.active) .date-picker-bottom button {
  min-height: 36px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 12px;
  font-weight: 500;
}

body:has(#studioView.active) .date-picker-top button {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

body:has(#studioView.active) .date-picker-weekdays {
  color: var(--geist-mute);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 500;
}

body:has(#studioView.active) .date-picker-days {
  gap: 4px;
}

body:has(#studioView.active) .date-picker-days button {
  border-radius: 6px;
  background: transparent;
  color: var(--geist-body);
  font-size: 12px;
  font-weight: 500;
}

body:has(#studioView.active) .date-picker-days button:hover,
body:has(#studioView.active) .date-picker-top button:hover {
  background: var(--geist-soft);
  color: var(--geist-ink);
}

body:has(#studioView.active) .date-picker-days button.muted {
  color: #c5c5c5;
}

body:has(#studioView.active) .date-picker-days button.today {
  box-shadow: 0 0 0 1px #c9c9c9 inset;
}

body:has(#studioView.active) .date-picker-days button.selected,
body:has(#studioView.active) .date-picker-bottom [data-date-today] {
  border-color: var(--geist-accent);
  background: var(--geist-accent);
  color: #06140a;
  box-shadow: none;
  font-weight: 600;
}

body:has(#studioView.active) .date-picker-bottom {
  margin-top: 12px;
  border-top: 1px solid var(--geist-hairline);
  padding-top: 12px;
}

@media (max-width: 1280px) and (min-width: 769px) {
  #studioView .studio-workspace {
    grid-template-columns: 1fr;
  }

  #studioView .studio-check-panel {
    border-top: 1px solid var(--geist-hairline);
    border-left: 0;
  }

  #studioView .studio-training-type-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #staffScheduleModal .studio-schedule-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #staffScheduleModal,
  #recurringTrainingModal,
  #recurringTrainingManageModal {
    align-items: flex-end;
    padding: 12px;
  }

  #staffScheduleModal .studio-schedule-modal,
  #recurringTrainingModal .recurring-training-card,
  #recurringTrainingManageModal .recurring-training-manage-card {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 16px;
    padding: 20px 16px;
  }

  #staffScheduleModal .studio-schedule-layout,
  #staffScheduleModal .studio-field-grid.two,
  #staffScheduleModal .studio-date-line,
  #recurringTrainingModal .recurring-training-card {
    grid-template-columns: 1fr;
  }

  #recurringTrainingModal .section-head,
  #recurringTrainingModal .check-line,
  #recurringTrainingModal .time-row,
  #recurringTrainingModal label:has(textarea),
  #recurringTrainingModal > form > .pill {
    grid-column: 1;
  }

  #staffScheduleModal .studio-modal-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Studio Telegram notice manager */
#studioTelegramModal {
  background: rgba(23, 23, 23, 0.42);
  padding: 24px;
  backdrop-filter: blur(6px);
}

#studioTelegramModal .studio-telegram-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
  width: min(1040px, 100%);
  max-height: calc(100dvh - 48px);
  gap: 14px;
  border: 1px solid var(--geist-hairline);
  border-radius: 16px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 24px;
  box-shadow: 0 28px 72px -24px rgba(0, 0, 0, 0.45);
}

#studioTelegramModal .section-head {
  margin: 0;
  border-bottom: 1px solid var(--geist-hairline);
  padding-bottom: 14px;
}

#studioTelegramModal .studio-telegram-intro {
  margin: 0;
  color: var(--geist-mute);
  font-size: 12px;
  line-height: 1.6;
}

#studioTelegramModal .studio-telegram-rules {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 3px;
}

#studioTelegramModal .studio-rule-summary,
#studioTelegramModal .studio-rule-editor {
  border: 1px solid var(--geist-hairline);
  border-radius: 10px;
  background: var(--geist-canvas);
}

#studioTelegramModal .studio-rule-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 9px 10px 9px 12px;
  transition: opacity 160ms ease, border-color 160ms ease;
}

#studioTelegramModal .studio-rule-summary.is-disabled {
  opacity: 0.52;
}

#studioTelegramModal .studio-rule-summary-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

#studioTelegramModal .studio-rule-summary-main strong {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  color: var(--geist-ink);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
}

#studioTelegramModal .studio-rule-summary-main > span {
  flex: 0 0 auto;
  border: 1px solid var(--geist-hairline);
  border-radius: 999px;
  background: var(--geist-elevated);
  color: var(--geist-mute);
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
}

#studioTelegramModal .studio-rule-summary-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

#studioTelegramModal .studio-rule-summary-actions button {
  min-height: 30px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
}

#studioTelegramModal .studio-rule-summary-actions button.danger {
  border-color: #ffd2d2;
  background: #fff7f7;
  color: #c50000;
}

#studioTelegramModal .studio-rule-editor {
  padding: 15px;
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.55);
}

#studioTelegramModal .studio-rule-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#studioTelegramModal .studio-rule-editor > header > div {
  display: grid;
  gap: 2px;
}

#studioTelegramModal .studio-rule-editor > header span,
#studioTelegramModal .studio-rule-grid > label,
#studioTelegramModal .studio-rule-everyday > span {
  color: var(--geist-mute);
  font-size: 10px;
  font-weight: 500;
}

#studioTelegramModal .studio-rule-editor > header strong {
  color: var(--geist-ink);
  font-size: 14px;
  font-weight: 600;
}

#studioTelegramModal .studio-rule-editor > header > button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--geist-mute);
  font-size: 20px;
}

.studio-switch {
  position: relative;
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 24px;
  cursor: pointer;
}

.studio-switch > input[type="checkbox"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}

.studio-switch > :is(span, i) {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid #c7c7c7;
  border-radius: 999px;
  background: #d8d8d8;
  transition: background 160ms ease, border-color 160ms ease;
}

.studio-switch > :is(span, i)::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}

.studio-switch > input:checked + :is(span, i) {
  border-color: #00c95b;
  background: #00d860;
}

.studio-switch > input:checked + :is(span, i)::after {
  transform: translateX(16px);
}

.studio-switch > input:focus-visible + :is(span, i) {
  outline: 2px solid color-mix(in srgb, #00d860 45%, transparent);
  outline-offset: 2px;
}

.studio-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.studio-switch-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.studio-switch-row > span:first-child strong {
  color: var(--geist-ink);
  font-size: 12px;
  font-weight: 600;
}

.studio-switch-row > span:first-child small {
  color: var(--geist-mute);
  font-size: 10px;
  line-height: 1.45;
}

#studioTelegramModal .studio-rule-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(110px, 1fr));
  align-items: end;
  gap: 8px;
}

#studioTelegramModal .studio-rule-grid > label,
#studioTelegramModal .studio-rule-everyday {
  display: grid;
  gap: 5px;
}

#studioTelegramModal .studio-rule-grid :is(input:not([type="checkbox"]), select),
#studioTelegramModal .studio-rule-notice textarea,
#staffEventDetailModal .studio-event-telegram textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
}

#studioTelegramModal .studio-telegram-dropdown {
  min-width: 0;
}

#studioTelegramModal .custom-select.studio-telegram-select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 11px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  box-shadow: none;
}

#studioTelegramModal .custom-select.studio-telegram-select:hover {
  border-color: color-mix(in srgb, var(--geist-ink) 24%, var(--geist-hairline));
}

#studioTelegramModal .custom-select.studio-telegram-select:focus-visible {
  border-color: var(--geist-accent);
  box-shadow: 0 0 0 3px rgba(0, 237, 100, 0.12);
}

#studioTelegramModal .custom-select.studio-telegram-select span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#studioTelegramModal .studio-rule-everyday strong {
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

#studioTelegramModal .studio-rule-editor-options {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 10px;
  margin-top: 10px;
}

#studioTelegramModal .studio-rule-editor-options > label {
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  padding: 11px;
}

#studioTelegramModal .studio-rule-notice {
  position: relative;
  display: grid;
  gap: 6px;
  color: var(--geist-mute);
  font-size: 10px;
}

#studioTelegramModal .studio-rule-notice textarea {
  min-height: 78px;
  padding: 9px 10px;
  line-height: 1.5;
  resize: vertical;
}

#studioTelegramModal .studio-rule-notice > small {
  justify-self: end;
  color: var(--geist-mute);
  font-size: 9px;
}

#studioTelegramModal .studio-rule-editor > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 12px;
}

#studioTelegramModal .studio-rule-editor > footer button {
  min-width: 80px;
  min-height: 36px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 600;
}

#studioTelegramModal .studio-rule-editor > footer button.primary {
  border-color: #00c95b;
  background: #00ed64;
  color: #06140a;
}

#studioTelegramModal .studio-telegram-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px dashed var(--geist-hairline);
  border-radius: 10px;
  color: var(--geist-mute);
  text-align: center;
}

#studioTelegramModal .studio-telegram-empty span {
  font-size: 28px;
}

#studioTelegramModal .studio-telegram-empty strong {
  color: var(--geist-ink);
  font-size: 14px;
}

#studioTelegramModal .studio-telegram-empty small,
#studioTelegramModal .studio-telegram-message {
  color: var(--geist-mute);
  font-size: 11px;
}

#studioTelegramModal .studio-telegram-add {
  justify-self: start;
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  box-shadow: none;
}

#studioTelegramModal .studio-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  border-top: 1px solid var(--geist-hairline);
  padding-top: 14px;
}

#studioTelegramModal .studio-modal-actions .pill {
  min-width: 112px;
  min-height: 40px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  box-shadow: none;
}

#studioTelegramModal .studio-modal-actions .pill.primary {
  border-color: #00c95b;
  background: #00ed64;
  color: #06140a;
}

#staffEventDetailModal .event-detail-card:has(.studio-event-telegram) .event-detail {
  min-height: 0;
  overflow-y: auto;
}

#staffEventDetailModal .studio-event-telegram {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border: 1px solid #b8eacb;
  border-radius: 10px;
  background: #f3fff7;
  padding: 14px;
}

#staffEventDetailModal .studio-event-telegram > label:last-of-type,
#staffEventDetailModal .studio-event-telegram-message {
  grid-column: 1 / -1;
}

#staffEventDetailModal .studio-event-telegram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#staffEventDetailModal .studio-event-telegram-copy {
  display: grid;
  gap: 2px;
}

#staffEventDetailModal .studio-inline-calltime {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#staffEventDetailModal .studio-event-telegram strong {
  color: var(--geist-ink);
  font-size: 13px;
}

#staffEventDetailModal .studio-event-telegram small,
#staffEventDetailModal .studio-event-telegram label {
  color: var(--geist-mute);
  font-size: 11px;
}

#staffEventDetailModal .studio-event-telegram label:last-of-type {
  display: grid;
  gap: 6px;
}

#staffEventDetailModal .studio-event-telegram textarea {
  min-height: 74px;
  padding: 9px 10px;
  line-height: 1.5;
  resize: vertical;
}

#staffEventDetailModal .event-detail-actions .telegram-pill {
  border-color: #00c95b;
  background: #00ed64;
  color: #06140a;
}

body[data-theme="dark"] #studioTelegramModal .studio-rule-summary-actions button.danger {
  border-color: rgba(255, 92, 92, 0.35);
  background: rgba(255, 92, 92, 0.12);
  color: #ff8a8a;
}

body[data-theme="dark"] #staffEventDetailModal .studio-event-telegram {
  border-color: rgba(0, 237, 100, 0.28);
  background: rgba(0, 237, 100, 0.08);
}

@media (max-width: 900px) {
  #studioTelegramModal .studio-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studioTelegramModal .studio-rule-name {
    grid-column: 1 / -1;
  }

  #studioTelegramModal .studio-rule-editor-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #studioTelegramModal {
    align-items: flex-end;
    padding: 0;
  }

  #studioTelegramModal .studio-telegram-card {
    width: 100%;
    max-height: 94dvh;
    border-radius: 16px 16px 0 0;
    padding: 18px 14px max(14px, env(safe-area-inset-bottom));
  }

  #studioTelegramModal .studio-rule-grid {
    grid-template-columns: 1fr;
  }

  #studioTelegramModal .studio-rule-name {
    grid-column: auto;
  }

  #studioTelegramModal .studio-rule-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  #studioTelegramModal .studio-rule-summary-main strong {
    max-width: 150px;
  }

  #studioTelegramModal .studio-rule-summary-main > span:nth-of-type(n + 2) {
    display: none;
  }

  #studioTelegramModal .studio-rule-summary-actions button {
    min-width: 0;
    padding: 0 8px;
  }

  #studioTelegramModal .studio-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #studioTelegramModal .studio-modal-actions .pill {
    min-height: 44px;
  }

  #staffEventDetailModal .studio-event-telegram {
    grid-template-columns: 1fr;
  }

  #staffEventDetailModal .studio-event-telegram-head {
    gap: 10px;
  }

  #staffEventDetailModal .event-detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Telegram schedule UI refinement — presentation only. */
@media (min-width: 769px) {
  #studioView #studioTelegramManageBtn {
    min-height: 38px;
    border: 1px solid var(--geist-hairline);
    border-radius: 6px;
    background: var(--geist-elevated);
    color: var(--geist-body);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
  }

  #studioView #studioTelegramManageBtn:hover {
    background: var(--geist-soft);
    color: var(--geist-ink);
  }
}

#studioTelegramModal {
  align-items: center;
  background: rgba(23, 23, 23, 0.2);
  padding: 24px;
  backdrop-filter: blur(3px);
}

#studioTelegramModal .studio-telegram-card {
  width: min(960px, 100%);
  max-height: calc(100dvh - 48px);
  gap: 16px;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 18px 44px -18px rgba(0, 0, 0, 0.28);
}

#studioTelegramModal .section-head {
  min-height: 64px;
  align-items: flex-start;
  padding-bottom: 16px;
}

#studioTelegramModal .section-head .eyebrow {
  margin: 0 0 5px;
  color: var(--geist-mute);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#studioTelegramModal .section-head h2 {
  margin: 0;
  color: var(--geist-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.8px;
}

#studioTelegramModal #closeStudioTelegramBtn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 20px;
  box-shadow: none;
}

#studioTelegramModal #closeStudioTelegramBtn:hover {
  background: var(--geist-soft);
  color: var(--geist-ink);
}

#studioTelegramModal .studio-telegram-intro {
  max-width: 760px;
  color: var(--geist-body);
  font-size: 12px;
  line-height: 1.6;
}

#studioTelegramModal .studio-global-fixed-notice {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--geist-accent) 24%, var(--geist-hairline));
  border-radius: 10px;
  background: color-mix(in srgb, var(--geist-accent) 5%, var(--geist-elevated));
  padding: 12px 14px;
}

#studioTelegramModal .studio-global-fixed-notice > div,
#studioTelegramModal .studio-global-fixed-notice > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#studioTelegramModal .studio-global-fixed-notice strong {
  color: var(--geist-ink);
  font-size: 12px;
  font-weight: 600;
}

#studioTelegramModal .studio-global-fixed-notice small {
  color: var(--geist-mute);
  font-size: 9px;
  line-height: 1.45;
}

#studioTelegramModal .studio-global-fixed-notice textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

#studioTelegramModal .studio-global-fixed-notice textarea:focus {
  border-color: var(--geist-accent);
  box-shadow: 0 0 0 3px rgba(0, 237, 100, 0.1);
}

#studioTelegramModal #studioTelegramFixedNoticeCount {
  justify-self: end;
}

#studioTelegramModal .studio-rule-summary,
#studioTelegramModal .studio-rule-editor {
  border-radius: 10px;
  background: var(--geist-elevated);
}

#studioTelegramModal .studio-rule-summary {
  min-height: 58px;
  padding: 10px 11px 10px 13px;
}

#studioTelegramModal .studio-rule-summary-main strong {
  font-size: 13px;
  font-weight: 600;
}

#studioTelegramModal .studio-rule-summary-main > span {
  border-radius: 100px;
  background: var(--geist-canvas);
  padding: 5px 8px;
  font-size: 10px;
}

#studioTelegramModal .studio-rule-summary-actions button,
#studioTelegramModal .studio-rule-editor > footer button {
  min-height: 34px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

#studioTelegramModal .studio-rule-editor {
  border-color: var(--geist-hairline);
  background: var(--geist-canvas);
  padding: 18px;
  box-shadow: none;
}

#studioTelegramModal .studio-rule-editor > header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--geist-hairline);
  padding-bottom: 12px;
}

#studioTelegramModal .studio-rule-editor > header > button {
  border: 1px solid var(--geist-hairline);
  background: var(--geist-elevated);
}

#studioTelegramModal .studio-rule-grid {
  grid-template-columns: 1.25fr repeat(4, minmax(106px, 1fr));
  gap: 10px;
}

#studioTelegramModal .studio-rule-grid > label,
#studioTelegramModal .studio-rule-everyday,
#studioTelegramModal .studio-rule-notice {
  color: var(--geist-body);
  font-size: 11px;
  font-weight: 500;
}

#studioTelegramModal .studio-rule-grid :is(input:not([type="checkbox"]), select),
#studioTelegramModal .studio-rule-notice textarea,
#staffEventDetailModal .studio-event-telegram textarea {
  min-height: 42px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 11px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: none;
  outline: none;
}

#studioTelegramModal .studio-rule-grid :is(input:not([type="checkbox"]), select):focus,
#studioTelegramModal .studio-rule-notice textarea:focus,
#staffEventDetailModal .studio-event-telegram textarea:focus {
  border-color: var(--geist-accent);
  box-shadow: 0 0 0 3px rgba(0, 237, 100, 0.12);
}

#studioTelegramModal .studio-rule-editor-options {
  grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}

#studioTelegramModal .studio-rule-editor-options > label {
  min-height: 138px;
  height: 100%;
  border-radius: 8px;
  background: var(--geist-elevated);
  padding: 13px;
}

#studioTelegramModal .studio-calltime-option {
  display: grid;
  grid-template-rows: auto 42px;
  align-content: space-between;
  gap: 12px;
}

#studioTelegramModal .studio-calltime-option > span {
  display: grid;
  gap: 3px;
}

#studioTelegramModal .studio-calltime-option strong {
  color: var(--geist-ink);
  font-size: 12px;
  font-weight: 600;
}

#studioTelegramModal .studio-calltime-option small {
  color: var(--geist-mute);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

#studioTelegramModal .studio-calltime-option .studio-telegram-dropdown {
  width: 100%;
  min-width: 0;
  height: 42px;
}

#staffEventDetailModal .studio-inline-calltime select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  padding: 0 34px 0 11px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
}

#staffEventDetailModal .studio-inline-calltime select:focus {
  border-color: var(--geist-accent);
  box-shadow: 0 0 0 3px rgba(0, 237, 100, 0.12);
}

#studioTelegramModal .studio-rule-notice textarea {
  min-height: 84px;
  padding: 10px 11px;
  line-height: 1.55;
}

#studioTelegramModal .studio-telegram-add {
  min-height: 38px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#studioTelegramModal .studio-telegram-add:disabled {
  background: var(--geist-soft);
  color: var(--geist-faint);
  opacity: 1;
}

#studioTelegramModal .studio-modal-actions {
  padding-top: 16px;
}

#studioTelegramModal .studio-modal-actions .pill {
  min-width: 104px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#staffEventDetailModal .event-detail-card:has(.studio-event-telegram) {
  width: min(900px, 100%);
}

#staffEventDetailModal .studio-event-telegram {
  gap: 12px;
  border-color: var(--geist-hairline);
  border-radius: 10px;
  background: var(--geist-elevated);
  padding: 16px;
}

#staffEventDetailModal .studio-event-telegram-head {
  min-height: 40px;
}

#staffEventDetailModal .studio-inline-calltime {
  min-width: 152px;
  cursor: default;
}

#staffEventDetailModal .studio-inline-calltime select {
  width: 104px;
  height: 38px;
}

#staffEventDetailModal .studio-event-telegram-copy {
  gap: 3px;
}

#staffEventDetailModal .studio-event-telegram strong {
  font-size: 13px;
  font-weight: 600;
}

#staffEventDetailModal .studio-event-telegram small,
#staffEventDetailModal .studio-event-telegram label {
  color: var(--geist-mute);
  font-size: 11px;
  font-weight: 500;
}

#staffEventDetailModal .studio-event-telegram textarea {
  min-height: 88px;
  background: var(--geist-canvas);
  padding: 10px 11px;
  line-height: 1.55;
  resize: vertical;
}

#staffEventDetailModal .studio-auto-fixed-notice {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--geist-accent) 28%, var(--geist-hairline));
  border-radius: 8px;
  background: color-mix(in srgb, var(--geist-accent) 7%, var(--geist-elevated));
  padding: 11px 12px;
}

#staffEventDetailModal .studio-auto-fixed-notice > span {
  color: var(--geist-ink);
  font-size: 11px;
  font-weight: 600;
}

#staffEventDetailModal .studio-auto-fixed-notice > p {
  margin: 0;
  color: var(--geist-body);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

#staffEventDetailModal .studio-auto-fixed-notice > small {
  margin: 0;
  color: var(--geist-mute);
  font-size: 10px;
}

#staffEventDetailModal .event-detail-actions .telegram-pill {
  border-color: var(--geist-accent);
  background: var(--geist-accent);
}

body[data-theme="dark"] #studioTelegramModal .studio-telegram-card,
body[data-theme="dark"] #studioTelegramModal .studio-rule-summary,
body[data-theme="dark"] #studioTelegramModal .studio-rule-editor-options > label,
body[data-theme="dark"] #studioTelegramModal .studio-global-fixed-notice,
body[data-theme="dark"] #staffEventDetailModal .studio-event-telegram,
body[data-theme="dark"] #staffEventDetailModal .studio-auto-fixed-notice {
  border-color: #29302c;
  background: #111512;
}

body[data-theme="dark"] #studioTelegramModal .studio-rule-editor {
  border-color: #29302c;
  background: #0b0f0d;
}

body[data-theme="dark"] #studioTelegramModal .studio-rule-grid :is(input:not([type="checkbox"]), select),
body[data-theme="dark"] #studioTelegramModal .studio-rule-notice textarea,
body[data-theme="dark"] #studioTelegramModal .studio-global-fixed-notice textarea,
body[data-theme="dark"] #studioTelegramModal .custom-select.studio-telegram-select,
body[data-theme="dark"] #staffEventDetailModal .studio-inline-calltime select,
body[data-theme="dark"] #staffEventDetailModal .studio-event-telegram textarea {
  border-color: #29302c;
  background: #0b0f0d;
  color: #f2f5f3;
}

body[data-theme="dark"] #studioTelegramModal :is(.section-head h2, .studio-rule-summary-main strong, .studio-rule-editor > header strong, .studio-rule-everyday strong, .studio-switch-row strong, .studio-telegram-empty strong, .studio-global-fixed-notice strong),
body[data-theme="dark"] #staffEventDetailModal .studio-event-telegram strong {
  color: #f2f5f3;
}

body[data-theme="dark"] #studioTelegramModal :is(.studio-telegram-intro, .studio-rule-grid > label, .studio-rule-everyday, .studio-rule-notice, .studio-rule-summary-main > span, .studio-telegram-message),
body[data-theme="dark"] #staffEventDetailModal .studio-event-telegram :is(small, label) {
  color: #a8b0ab;
}

body[data-theme="dark"] #studioTelegramModal :is(#closeStudioTelegramBtn, .studio-rule-summary-actions button, .studio-rule-editor > footer button, .studio-telegram-add, .studio-modal-actions .pill),
body[data-theme="dark"] #studioTelegramModal .studio-rule-summary-main > span {
  border-color: #29302c;
  background: #151a17;
  color: #d8ddda;
}

body[data-theme="dark"] #studioTelegramModal .studio-modal-actions .pill.primary,
body[data-theme="dark"] #studioTelegramModal .studio-rule-editor > footer button.primary,
body[data-theme="dark"] #staffEventDetailModal .event-detail-actions .telegram-pill {
  border-color: #00ed64;
  background: #00ed64;
  color: #06140a;
}

#studioTelegramPreviewModal {
  z-index: 1400;
  align-items: center;
  justify-content: center;
  background: rgba(23, 23, 23, 0.28);
  padding: 20px;
  backdrop-filter: blur(4px);
}

#studioTelegramPreviewModal .studio-telegram-preview-card {
  width: min(680px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto auto;
  gap: 14px;
  border: 1px solid var(--geist-hairline);
  border-radius: 14px;
  background: var(--geist-elevated);
  padding: 20px;
  box-shadow: 0 24px 64px -22px rgba(0, 0, 0, 0.42);
}

#studioTelegramPreviewModal .studio-telegram-preview-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--geist-hairline);
  padding-bottom: 13px;
}

#studioTelegramPreviewModal .studio-telegram-preview-card > header .eyebrow {
  margin: 0 0 4px;
  color: var(--geist-mute);
  font-family: "Geist Mono", monospace;
  font-size: 9px;
  font-weight: 500;
}

#studioTelegramPreviewModal .studio-telegram-preview-card h2,
#studioTelegramPreviewModal .studio-telegram-preview-card p {
  margin: 0;
}

#studioTelegramPreviewModal .studio-telegram-preview-card h2 {
  color: var(--geist-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

#studioTelegramPreviewModal .studio-telegram-preview-card > header p:last-child {
  margin-top: 4px;
  color: var(--geist-mute);
  font-size: 11px;
}

#studioTelegramPreviewModal #closeStudioTelegramPreviewBtn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-body);
  font-size: 20px;
}

#studioTelegramPreviewModal #studioTelegramPreviewContent {
  min-height: 0;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--geist-hairline);
  border-radius: 10px;
  background: var(--geist-canvas);
  color: var(--geist-ink);
  padding: 16px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#studioTelegramPreviewModal .studio-telegram-preview-message {
  min-height: 16px;
  color: #c50000;
  font-size: 10px;
}

#studioTelegramPreviewModal .studio-telegram-preview-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#studioTelegramPreviewModal .studio-telegram-preview-card > footer button {
  min-width: 112px;
  min-height: 42px;
  border: 1px solid var(--geist-hairline);
  border-radius: 6px;
  background: var(--geist-elevated);
  color: var(--geist-ink);
  font-size: 12px;
  font-weight: 600;
}

#studioTelegramPreviewModal .studio-telegram-preview-card > footer button.primary {
  border-color: var(--geist-accent);
  background: var(--geist-accent);
  color: #06140a;
}

body[data-theme="dark"] #studioTelegramPreviewModal .studio-telegram-preview-card {
  border-color: #29302c;
  background: #0b0f0d;
}

body[data-theme="dark"] #studioTelegramPreviewModal :is(#closeStudioTelegramPreviewBtn, #studioTelegramPreviewContent, .studio-telegram-preview-card > footer button) {
  border-color: #29302c;
  background: #111512;
  color: #f2f5f3;
}

body[data-theme="dark"] #studioTelegramPreviewModal .studio-telegram-preview-card h2 {
  color: #f2f5f3;
}

@media (max-width: 900px) {
  #studioTelegramModal .studio-rule-editor-options {
    grid-template-columns: 1fr;
  }

  #studioTelegramModal .studio-rule-editor-options > label {
    min-height: 0;
  }
}

@media (max-width: 768px) {
  #studioTelegramModal {
    align-items: flex-end;
    padding: 0;
  }

  #studioTelegramModal .studio-telegram-card {
    max-height: 94dvh;
    border-radius: 16px 16px 0 0;
    padding: 18px 14px max(14px, env(safe-area-inset-bottom));
  }

  #studioTelegramModal .section-head h2 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  #studioTelegramModal .studio-global-fixed-notice {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #studioTelegramModal .studio-rule-editor {
    padding: 14px;
  }

  #studioTelegramModal .studio-rule-summary-main {
    flex-wrap: wrap;
    white-space: normal;
  }

  #studioTelegramModal .studio-rule-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #studioTelegramModal .studio-rule-summary-actions [data-preview-studio-rule] {
    grid-column: 1 / -1;
  }

  #studioTelegramPreviewModal {
    align-items: flex-end;
    padding: 0;
  }

  #studioTelegramPreviewModal .studio-telegram-preview-card {
    width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    padding: 17px 14px max(14px, env(safe-area-inset-bottom));
  }

  #studioTelegramPreviewModal .studio-telegram-preview-card > footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #studioTelegramPreviewModal .studio-telegram-preview-card > footer:has(#confirmStudioTelegramSendBtn[hidden]) {
    grid-template-columns: 1fr;
  }

  #studioTelegramPreviewModal .studio-telegram-preview-card > footer button {
    width: 100%;
    min-width: 0;
  }

  #staffEventDetailModal .studio-event-telegram {
    padding: 14px;
  }

  #staffEventDetailModal .studio-event-telegram-head {
    align-items: flex-start;
  }
}

/* Keep studio calendar events readable against the dark calendar grid. */
@media (min-width: 769px) {
  body[data-theme="dark"] #studioView :is(.studio-week-event, .studio-week-event.typed) {
    border-color: color-mix(in srgb, var(--studio-type-color) 64%, #39423d);
    background: color-mix(in srgb, var(--studio-type-color) 20%, #111512);
    color: #f2f5f3;
  }

  body[data-theme="dark"] #studioView :is(.studio-week-event, .studio-week-event.typed):hover {
    background: color-mix(in srgb, var(--studio-type-color) 28%, #111512);
  }

  body[data-theme="dark"] #studioView .studio-week-event span {
    color: #c1c8c4;
  }

  body[data-theme="dark"] #studioView .studio-week-event strong {
    color: #f7faf8;
  }

  body[data-theme="dark"] #studioView :is(.studio-month-event, .studio-month-event.typed) {
    border-color: color-mix(in srgb, var(--studio-type-color) 64%, #39423d);
    background: color-mix(in srgb, var(--studio-type-color) 20%, #111512);
    color: #f2f5f3;
  }

  body[data-theme="dark"] #studioView :is(.studio-month-event, .studio-month-event.typed):hover {
    background: color-mix(in srgb, var(--studio-type-color) 28%, #111512);
  }
}