:root {
  --kt-red: #ef3542;
  --kt-red-dark: #b4232e;
  --kt-blue: #1367ad;
  --kt-blue-soft: #eaf4ff;
  --kt-ink: #15181d;
  --kt-surface: #ffffff;
  --kt-canvas: #f4f6f8;
  --kt-muted: #65707c;
  --kt-line: #dce2e8;
  --kt-line-dark: #b9c2cb;
  --kt-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background: #111315;
  color: var(--kt-ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(19, 103, 173, 0.45);
  outline-offset: 3px;
}

.app-root {
  min-height: 100vh;
}

.login-shell,
.center-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 20px;
}

.login-card,
.card {
  width: min(100%, 620px);
  background: var(--kt-surface);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 16px;
  box-shadow: var(--kt-shadow);
  padding: 24px;
}

.login-card {
  border-top: 5px solid var(--kt-red);
}

.login-logo {
  display: block;
  width: min(250px, 82%);
  margin: 0 auto 22px;
}

.app-kicker,
.section-label {
  margin: 0 0 8px;
  color: var(--kt-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-kicker span {
  color: var(--kt-muted);
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--kt-ink);
  letter-spacing: 0;
  line-height: 1.1;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.login-card h1 {
  margin-bottom: 24px;
  font-size: 42px;
}

.form-stack {
  display: grid;
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  color: #2b333d;
  font-size: 15px;
  font-weight: 750;
}

input,
select,
textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--kt-line-dark);
  border-radius: 10px;
  background: #fff;
  padding: 12px 13px;
  color: var(--kt-ink);
  font-size: 17px;
}

select {
  appearance: auto;
}

textarea {
  min-height: 98px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #8b95a1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kt-blue);
  box-shadow: 0 0 0 3px rgba(19, 103, 173, 0.12);
  outline: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 22px;
  height: 22px;
  min-height: 0;
}

.primary-button,
.secondary-button,
.logout-button,
.text-button,
.mini-button {
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 11px 16px;
  font-weight: 800;
}

.primary-button {
  background: var(--kt-red);
  color: #fff;
}

.primary-button:hover {
  background: var(--kt-red-dark);
}

.secondary-button {
  background: #252a30;
  color: #fff;
}

.secondary-button:hover {
  background: #121417;
}

.text-button {
  min-height: auto;
  background: transparent;
  color: var(--kt-blue);
  padding: 8px 0;
}

.text-button:hover {
  color: #0e4f86;
  text-decoration: underline;
}

.mini-button {
  background: #f2f4f6;
  border-color: var(--kt-line);
  color: #20262d;
}

.mini-button:hover {
  background: #e7ebef;
}

.danger-button {
  border-color: #f1b6bd;
  background: #fff5f6;
  color: #a51c2b;
}

.danger-button:hover {
  background: #fde9ec;
}

.mini-button:disabled,
.action-card:disabled,
.primary-button:disabled,
.secondary-button:disabled {
  cursor: progress;
  opacity: 0.58;
}

.form-alert {
  margin-top: 4px;
  margin-bottom: 0;
}

.alert,
.notice {
  margin-bottom: 4px;
  border-radius: 10px;
  padding: 14px 15px;
  font-size: 15px;
  font-weight: 750;
}

.alert {
  border: 1px solid #ffbac1;
  background: #fff1f2;
  color: #94242d;
}

.notice {
  border: 1px solid #c7e2fa;
  background: #eff8ff;
  color: #155989;
}

.practice-notice {
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #d8b46a;
  border-radius: 14px;
  background: #fff8e8;
  color: #674713;
}

.practice-notice strong {
  display: block;
}

.practice-notice p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.setup-card {
  display: grid;
  gap: 9px;
  border: 2px solid #d7aa4e;
  border-radius: 14px;
  background: #fff8e8;
  padding: 18px;
  color: #4d3712;
}

.setup-card strong {
  font-size: 19px;
}

.setup-card p {
  margin: 0;
  line-height: 1.45;
}

.setup-card .primary-button {
  justify-self: start;
}

.preview-month + .preview-month {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #dbe2eb;
}

.test-logins {
  margin-top: 18px;
  color: var(--kt-muted);
  font-size: 14px;
}

.test-logins summary {
  cursor: pointer;
  color: #323a45;
  font-weight: 800;
}

.test-logins p {
  margin: 7px 0 0;
}

.app-shell {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 12px;
}

.topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 4px solid var(--kt-red);
  box-shadow: inset 0 -3px 0 var(--kt-red), var(--kt-shadow);
  padding: 18px;
  border-radius: 16px;
  background: var(--kt-surface);
}

.brand-block {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
}

.brand-block img {
  width: 110px;
  max-width: 36%;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
}

.brand-block h1 {
  margin: 0;
  overflow-wrap: anywhere;
}

.brand-subtitle {
  margin: 7px 0 0;
  color: var(--kt-muted);
  font-size: 14px;
  font-weight: 650;
}

.brand-korean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: #272d34;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.brand-korean span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--kt-red);
  box-shadow: 11px 0 0 var(--kt-blue);
}

.header-controls {
  display: grid;
  gap: 12px;
}

.studio-selector {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-selector select,
.language-selector select {
  min-height: 48px;
  font-size: 16px;
}

.language-selector {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.single-studio-label {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  color: var(--kt-muted);
  font-size: 13px;
}

.single-studio-label strong {
  color: var(--kt-ink);
  font-size: 16px;
}

.logout-button {
  min-height: 48px;
  border-color: #ebc8cb;
  background: #fff;
  color: var(--kt-red-dark);
}

.logout-button:hover {
  border-color: var(--kt-red);
  background: #fff6f6;
}

.module-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 0 18px;
}

.module-nav button {
  min-height: 48px;
  border: 1px solid #30343a;
  border-radius: 10px;
  background: #1e2125;
  color: #f7f8f9;
  font-size: 14px;
  font-weight: 750;
}

.module-nav button:hover {
  background: #30353a;
}

.module-nav button.active {
  border-color: var(--kt-red);
  background: var(--kt-red);
  color: #fff;
}

.content-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding-bottom: 52px;
}

.screen-heading {
  color: #fff;
}

.screen-heading h2 {
  margin-bottom: 7px;
  color: #fff;
  font-size: 30px;
}

.screen-heading > div > p:last-child {
  max-width: 620px;
  margin: 0;
  color: #c5cbd1;
  font-size: 16px;
  line-height: 1.45;
}

.workspace-status {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  border-left: 3px solid var(--kt-red);
  padding: 7px 0 7px 12px;
  color: #d6dce2;
}

.workspace-status span {
  color: #ff8a92;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.workspace-status strong {
  font-size: 14px;
  line-height: 1.35;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.action-card {
  display: grid;
  min-width: 0;
  min-height: 124px;
  gap: 7px;
  align-content: start;
  border: 1px solid var(--kt-line);
  border-radius: 14px;
  background: #fff;
  color: var(--kt-ink);
  padding: 16px;
  text-align: left;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.09);
}

.action-card:hover {
  transform: translateY(-1px);
  border-color: #aeb8c2;
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.13);
}

.action-card strong {
  font-size: 18px;
  line-height: 1.15;
}

.action-card small {
  color: var(--kt-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.32;
}

.action-kicker {
  color: var(--kt-red);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-primary,
.action-publish {
  grid-column: 1 / -1;
}

.action-primary {
  border-color: var(--kt-red);
  background: var(--kt-red);
  color: #fff;
  box-shadow: inset 5px 0 0 var(--kt-blue), 0 7px 18px rgba(0, 0, 0, 0.13);
}

.action-primary:hover {
  border-color: var(--kt-red-dark);
  background: var(--kt-red-dark);
}

.action-primary .action-kicker,
.action-primary small {
  color: #fff;
}

.action-publish {
  border-color: #0d5b9f;
  background: #1268ad;
  color: #fff;
}

.action-publish:hover {
  border-color: #0a4e86;
  background: #0d5b9f;
}

.action-publish .action-kicker,
.action-publish small {
  color: #fff;
}

.content-card,
.form-card,
.preview-card {
  width: 100%;
}

.card-heading {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-heading h2 {
  margin-bottom: 0;
  font-size: 25px;
}

.card-count {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #eef1f4;
  color: #333b45;
  font-size: 14px;
  font-weight: 850;
}

.form-studio,
.staging-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--kt-blue-soft);
  color: #0c528d;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.event-list,
.daily-list,
.staff-list {
  display: grid;
  gap: 10px;
}

.event-row,
.daily-row,
.staff-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.event-row.has-actions {
  grid-template-columns: 54px minmax(0, 1fr);
}

.event-row > div:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.event-row strong,
.daily-row strong {
  font-size: 17px;
}

.event-row span,
.daily-row span,
.staff-card span,
.staff-card small,
.soft-text,
.empty-text {
  color: var(--kt-muted);
  font-weight: 600;
  line-height: 1.4;
}

.event-row span,
.daily-row span {
  overflow-wrap: anywhere;
}

.event-row.has-actions .mini-button {
  grid-column: 1 / -1;
}

.event-row-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.date-pill {
  display: grid;
  min-height: 48px;
  place-items: center;
  border-radius: 10px;
  background: #20252b;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.daily-row {
  grid-template-columns: 92px minmax(0, 1fr);
  background: #f8fafb;
}

.daily-row strong {
  color: var(--kt-red);
}

.add-class-button {
  width: 100%;
  margin: 8px 0 20px;
}

.weekly-form {
  margin: 4px 0 24px;
  border: 2px solid #bfd4e7;
  border-radius: 14px;
  background: #f5faff;
  padding: 18px;
}

.weekly-form h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.weekly-template-picker {
  min-width: 0;
  margin: 0;
  border: 1px solid #bfd4e7;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.weekly-template-picker legend {
  padding: 0 6px;
  color: var(--kt-ink);
  font-weight: 850;
}

.weekly-template-picker > p {
  margin: 0 0 12px;
  color: var(--kt-muted);
  font-size: 14px;
  font-weight: 600;
}

.weekly-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weekly-template-button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  gap: 4px;
  align-content: center;
  border: 1px solid var(--kt-line-dark);
  border-radius: 10px;
  background: #fff;
  color: var(--kt-ink);
  padding: 10px;
  text-align: left;
}

.weekly-template-button strong,
.weekly-template-button span {
  overflow-wrap: anywhere;
}

.weekly-template-button span {
  color: var(--kt-muted);
  font-size: 12px;
  font-weight: 650;
}

.weekly-template-button[aria-pressed="true"] {
  border-color: var(--kt-blue);
  background: var(--kt-blue-soft);
  box-shadow: inset 0 0 0 1px var(--kt-blue);
}

.weekly-audience-fields {
  display: grid;
  gap: 14px;
  margin: 0;
  background: #fff;
}

.weekly-audience-fields > p {
  margin: 0;
}

.weekly-room-field {
  border-left: 4px solid var(--kt-blue);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}

.weekly-room-field > * + * {
  margin-top: 10px;
}

.weekly-admin-list,
.weekly-admin-day {
  display: grid;
  gap: 10px;
}

.weekly-admin-day + .weekly-admin-day {
  margin-top: 22px;
}

.weekly-admin-day > h3 {
  margin: 0;
  border-bottom: 2px solid #20252b;
  padding-bottom: 7px;
  font-size: 19px;
}

.weekly-admin-row {
  display: grid;
  gap: 12px;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: #f8fafb;
  padding: 14px;
}

.weekly-admin-row > div:first-child {
  display: grid;
  gap: 3px;
}

.weekly-admin-row strong {
  color: var(--kt-red-dark);
  font-size: 17px;
}

.weekly-admin-row span {
  font-size: 17px;
  font-weight: 800;
}

.weekly-admin-row small,
.field-hint {
  color: var(--kt-muted);
  font-weight: 600;
}

.weekly-admin-row .weekly-room-badge {
  width: max-content;
  margin: 2px 0 3px;
  border-radius: 999px;
  background: #e7f1fa;
  padding: 4px 9px;
  color: #0d538c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .02em;
}

@media (max-width: 699px) {
  .weekly-form {
    margin-left: -8px;
    margin-right: -8px;
    padding: 16px 14px;
  }

  .weekly-template-button {
    min-height: 58px;
    padding: 9px;
    text-align: center;
  }

  .weekly-form .form-actions {
    position: sticky;
    z-index: 4;
    bottom: 0;
    margin: 0 -14px -16px;
    border-top: 1px solid var(--kt-line);
    background: rgba(245, 250, 255, .97);
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }

  .weekly-form .form-actions .primary-button {
    min-height: 54px;
    font-size: 17px;
  }
}

.weekly-admin-row .weekly-belt-summary {
  margin-top: 5px;
  border-top: 1px solid var(--kt-line);
  padding-top: 7px;
}

.weekly-belt-summary b {
  color: var(--kt-ink);
}

.field-hint {
  margin: -10px 0 0;
  font-size: 13px;
}

.optional-details,
.template-picker {
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.optional-details summary,
.template-picker legend {
  color: var(--kt-ink);
  font-weight: 850;
}

.optional-details[open] summary {
  margin-bottom: 16px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 5px;
}

.template-button {
  display: grid;
  min-height: 74px;
  gap: 4px;
  align-content: center;
  border: 1px solid #cbd4dd;
  border-radius: 10px;
  background: #f8fafb;
  padding: 10px;
  color: var(--kt-ink);
  text-align: left;
}

.template-button:hover {
  border-color: var(--kt-blue);
  background: var(--kt-blue-soft);
}

.template-button strong {
  font-size: 15px;
}

.template-button small {
  color: var(--kt-muted);
  font-size: 12px;
  line-height: 1.3;
}

.group-box {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: #f8fafb;
  padding: 16px;
}

.group-box legend {
  padding: 0 6px;
  color: var(--kt-ink);
  font-size: 15px;
  font-weight: 850;
}

.two-column,
.session-row {
  display: grid;
  gap: 12px;
}

.session-row + .session-row {
  margin-top: 14px;
  border-top: 1px solid var(--kt-line);
  padding-top: 14px;
}

.full-width {
  width: 100%;
  margin-top: 14px;
}

.form-actions {
  display: grid;
  gap: 10px;
}

.confirmation-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(19, 30, 42, 0.62);
}

.confirmation-dialog {
  width: min(100%, 480px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  padding: 24px;
}

.confirmation-dialog h2 {
  margin: 4px 0 12px;
  color: var(--kt-ink);
  font-size: 26px;
}

.confirmation-dialog p {
  line-height: 1.5;
}

.confirmation-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.danger-button {
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--kt-red);
  color: #fff;
  padding: 12px 18px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.preview-box {
  border: 1px solid #cfe1f1;
  border-radius: 12px;
  background: #f5faff;
  padding: 15px;
}

.preview-box p {
  margin: 6px 0;
  font-weight: 700;
}

.preview-heading {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.preview-heading h2 {
  margin-bottom: 0;
  font-size: 29px;
}

.preview-help {
  margin: 17px 0;
  border-left: 3px solid var(--kt-blue);
  background: #f2f8fd;
  color: #194f78;
  padding: 12px 13px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
}

.preview-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.preview-toolbar label {
  min-width: 0;
}

.preview-agenda {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}

.preview-agenda h3 {
  margin: 0 0 2px;
  color: var(--kt-ink);
  font-size: 18px;
}

.agenda-event {
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.agenda-event.is-closure {
  border-color: #f4c4c9;
  background: #fff7f7;
}

.agenda-date {
  display: grid;
  align-self: start;
  min-height: 48px;
  place-items: center;
  border-radius: 10px;
  background: #20252b;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.agenda-event.is-closure .agenda-date {
  background: var(--kt-red);
}

.agenda-event > div:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.agenda-event strong {
  font-size: 17px;
}

.agenda-event span {
  color: var(--kt-muted);
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.agenda-sessions {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--kt-line);
}

.agenda-sessions div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.agenda-sessions strong,
.agenda-sessions span {
  font-size: 14px;
}

.calendar-grid-details {
  border-top: 1px solid var(--kt-line);
  padding-top: 15px;
}

.calendar-grid-details summary {
  cursor: pointer;
  color: #20262d;
  font-size: 15px;
  font-weight: 800;
}

.calendar-preview-shell {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid #69727c;
  border-radius: 10px;
  background: #fff;
}

.calendar-weekdays,
.calendar-preview-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  background: #20252b;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.calendar-weekdays div {
  padding: 10px 3px;
  font-size: 14px;
}

.calendar-day {
  display: grid;
  min-width: 0;
  min-height: 122px;
  gap: 6px;
  align-content: start;
  border-top: 1px solid #cfd5db;
  border-right: 1px solid #cfd5db;
  padding: 7px;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.outside-month {
  background: #fafbfc;
  color: #a1a8b0;
}

.calendar-day-number {
  justify-self: end;
  color: #313841;
  font-size: 16px;
  font-weight: 850;
}

.outside-month .calendar-day-number {
  color: #a1a8b0;
}

.calendar-day-events {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.calendar-event-pill {
  display: grid;
  min-width: 0;
  gap: 2px;
  border-radius: 7px;
  border-left: 3px solid var(--kt-blue);
  background: var(--kt-blue-soft);
  padding: 5px;
}

.calendar-event-pill.is-closure {
  border-left-color: var(--kt-red);
  background: #fff0f1;
}

.calendar-event-pill strong,
.calendar-event-pill span,
.calendar-day-events small {
  overflow-wrap: anywhere;
  line-height: 1.17;
}

.calendar-event-pill strong {
  color: #1a222a;
  font-size: 12px;
}

.calendar-event-pill span,
.calendar-day-events small {
  color: var(--kt-muted);
  font-size: 11px;
  font-weight: 700;
}

.staff-card {
  grid-template-columns: 1fr;
  align-items: start;
}

.coming-soon {
  min-height: 220px;
}

@media (min-width: 700px) {
  .confirmation-actions {
    grid-template-columns: 1fr 1fr;
  }

  .app-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
  }

  .weekly-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
  }

  .brand-block img {
    width: 150px;
    max-width: none;
  }

  .brand-block h1 {
    font-size: 42px;
  }

  .header-controls {
    grid-template-columns: minmax(190px, 260px) minmax(126px, 145px) auto;
    align-items: end;
  }

  .logout-button {
    min-width: 96px;
  }

  .module-nav {
    position: sticky;
    top: 16px;
    display: grid;
    grid-template-columns: 1fr;
    align-self: start;
    gap: 6px;
    padding: 0;
  }

  .module-nav button {
    min-height: 48px;
    padding: 10px 12px;
    text-align: left;
  }

  .content-shell {
    gap: 18px;
  }

  .screen-heading {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    padding: 4px 0 2px;
  }

  .screen-heading h2 {
    font-size: 38px;
  }

  .workspace-status {
    width: min(315px, 35%);
    margin: 0 0 4px;
  }

  .action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .action-card {
    min-height: 136px;
  }

  .action-primary {
    grid-column: span 2;
  }

  .action-publish {
    grid-column: span 2;
  }

  .two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-row {
    grid-template-columns: minmax(120px, 0.75fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
    align-items: end;
  }

  .nunchuck-row {
    grid-template-columns: minmax(120px, 0.75fr) minmax(200px, 1fr) auto;
  }

  .form-actions {
    grid-template-columns: auto auto auto;
    justify-content: start;
  }

  .event-row.has-actions {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .event-row.has-actions .mini-button {
    grid-column: auto;
  }

  .event-row-actions {
    grid-column: auto;
    display: flex;
    gap: 8px;
  }

  .weekly-admin-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .staff-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-heading {
    align-items: center;
  }

  .preview-toolbar {
    grid-template-columns: auto minmax(200px, 280px) auto auto;
    align-items: end;
  }

  .calendar-grid-details summary {
    cursor: default;
    list-style: none;
  }

  .calendar-grid-details summary::-webkit-details-marker {
    display: none;
  }

  .calendar-day {
    min-height: 132px;
  }
}

@media (min-width: 1050px) {
  .app-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .action-card strong {
    font-size: 19px;
  }

  .card,
  .login-card {
    padding: 28px;
  }
}

@media (max-width: 420px) {
  .app-shell {
    padding: 8px;
  }

  .topbar,
  .login-card,
  .card {
    padding: 16px;
  }

  .brand-block img {
    width: 94px;
  }

  .brand-block h1 {
    font-size: 30px;
  }

  .module-nav {
    gap: 6px;
    padding: 10px 0 16px;
  }

  .module-nav button {
    min-height: 44px;
    font-size: 13px;
  }

  .screen-heading h2 {
    font-size: 28px;
  }

  .action-card {
    min-height: 118px;
    padding: 14px;
  }

  .action-card strong {
    font-size: 17px;
  }

  .form-studio {
    max-width: 110px;
    overflow-wrap: anywhere;
  }

  .agenda-event {
    grid-template-columns: 1fr;
  }

  .agenda-date {
    width: max-content;
  }

  .calendar-weekdays div {
    padding: 8px 2px;
    font-size: 10px;
  }

  .calendar-day {
    min-height: 86px;
    gap: 4px;
    padding: 4px;
  }

  .calendar-day-number {
    font-size: 12px;
  }

  .calendar-event-pill {
    padding: 4px;
  }

  .calendar-event-pill strong {
    font-size: 9px;
  }

  .calendar-event-pill span,
  .calendar-day-events small {
    font-size: 8px;
  }
}

/* Large, familiar clock controls for phone and desktop event editing. */
.back-calendar{margin-bottom:14px;min-height:48px}
.form-card{max-width:820px}
.clock-picker,.event-time-mode{margin:0;padding:0;border:0;min-width:0}
.clock-picker legend,.event-time-mode legend{font-size:16px;font-weight:750;padding:0;margin-bottom:10px}
.clock-parts{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:8px}
.clock-parts label{min-width:0;font-size:13px}
.clock-parts select{padding:12px 8px;min-width:0;min-height:52px}
.time-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.time-mode-options label{display:flex;align-items:center;gap:10px;min-height:58px;border:1px solid var(--kt-line-dark);border-radius:10px;padding:12px;cursor:pointer}
.time-mode-options label:has(input:checked){border:2px solid var(--kt-blue);background:#eef5fc;padding:11px}
.time-mode-options input{width:22px;height:22px;min-height:22px;margin:0;accent-color:var(--kt-blue)}
.optional-details summary{cursor:pointer;min-height:28px;line-height:28px}
.optional-details:focus-within,.clock-parts select:focus-visible{outline-offset:3px}
.schedule-choice{display:grid;gap:16px;padding:16px;border:1px solid var(--kt-line);border-radius:10px;background:#f8fafb}
.schedule-choice .field-hint{margin:0;line-height:1.5;font-weight:500;font-size:14px}
.all-day-notice{padding:14px;border-radius:10px;background:#fff1f2;font-weight:750}
@media(min-width:700px){.belt-row{grid-template-columns:repeat(2,minmax(0,1fr))}.belt-row .clock-picker{grid-column:1/-1}.belt-row>.mini-button{justify-self:start}.nunchuck-row{grid-template-columns:minmax(270px,1fr) minmax(170px,1fr) auto}}

/* Staff calendar: one month, date actions, and readable event details. */
.staff-calendar.card{width:100%;min-width:0;max-width:none;padding:22px;box-shadow:0 6px 22px rgba(0,0,0,.08)}
.staff-calendar-heading{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:24px}
.staff-calendar-heading h2{font-size:30px;margin:0 0 8px}
.staff-calendar-heading p{max-width:500px;margin:0;color:#5f6268;line-height:1.5;font-size:16px}
.calendar-add-button{flex:0 0 auto;min-height:52px}
.calendar-header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.print-button{min-height:48px;white-space:nowrap}
.calendar-copy-list{display:grid;gap:16px;margin:24px 0}.calendar-copy-row{padding:18px;border:1px solid #d7e0e4;border-radius:12px;background:#fff}.calendar-copy-choice{display:flex;gap:12px;align-items:center;min-height:48px;font-size:20px;cursor:pointer}.calendar-copy-choice input[type=checkbox]{width:24px;min-height:24px;flex:0 0 24px;accent-color:#b91c1c}.calendar-copy-detail{padding-left:36px;overflow-wrap:anywhere}.calendar-copy-detail p{margin:8px 0;line-height:1.5}.calendar-copy-location{display:grid;gap:8px;margin-top:16px}.calendar-copy-location input{width:100%;min-width:0}.calendar-copy-status{color:#405765;font-weight:700}.calendar-copy-warning{color:#8c3b13}.calendar-copy-row.is-complete{background:#f5f7f8}.calendar-copy-actions{position:sticky;bottom:12px;z-index:5;padding:14px;border:1px solid #d7e0e4;border-radius:12px;background:#fff;box-shadow:0 3px 14px #2237440d}.calendar-copy-actions p{margin:0;flex:1}@media(max-width:699px){.calendar-copy-detail{padding-left:0}.calendar-copy-row{padding:14px}.calendar-copy-actions{bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr}}
.staff-calendar-toolbar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:18px}
.staff-month-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.staff-month-controls h3{font-size:23px;margin:0;text-align:center;line-height:1.3}
.calendar-arrow{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #d8d9db;border-radius:10px;background:#fff;color:#27292d;font-size:28px;line-height:1}
.staff-calendar-options{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.staff-calendar-options .secondary-button{min-height:44px;padding:10px 14px;font-size:15px}
.calendar-view-switch{display:inline-flex;border:1px solid #d8d9db;border-radius:10px;padding:3px;background:#f5f5f4}
.calendar-view-switch button{min-height:40px;min-width:65px;border:0;border-radius:7px;background:transparent;color:#5f6268;font-weight:750;padding:8px 13px}
.calendar-view-switch button[aria-pressed="true"]{background:#fff;color:#9e3035;box-shadow:0 1px 4px #191a1d1f}
.staff-month-grid{border:1px solid #dededd;border-radius:12px;overflow:hidden}
.staff-weekdays,.staff-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.staff-weekdays{background:#f5f5f3;color:#66696d;font-size:13px;font-weight:800;text-align:center}
.staff-weekdays span{padding:12px 2px}
.staff-day{min-width:0;min-height:126px;border-top:1px solid #e3e3e1;border-right:1px solid #e3e3e1;background:#fff}
.staff-day:nth-child(7n){border-right:0}
.staff-day.is-outside{background:#f8f8f7}
.staff-day.is-outside .staff-date-button{color:#85858b}
.staff-day.is-selected{background:#fff5f5;box-shadow:inset 0 0 0 2px #ac343b}
.staff-date-button{width:100%;min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:2px;border:0;border-radius:0;background:transparent;color:#303236;padding:8px 10px;font-size:16px;font-weight:800}
.staff-date-button:hover{background:#fff0f0}
.staff-date-plus{color:#76787e;font-size:18px;font-weight:500}
.staff-day.is-today .staff-date-button>span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#a92f38;color:#fff}
.staff-day-desktop-events{display:grid;gap:5px;padding:0 5px 7px}
.staff-event-button{display:grid;gap:3px;width:100%;min-width:0;min-height:44px;border:0;border-left:3px solid #6b6d72;border-radius:5px;background:#f2f2f0;color:#303236;text-align:left;padding:7px;font-size:12px}
.staff-event-button strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}
.staff-event-button span{font-size:11px}
.staff-event-button.is-closure{background:#fff0f1;border-left-color:#c63e4b;color:#762831}
.staff-more-events{min-height:44px;border:0;background:transparent;color:#8e3036;font-weight:700;font-size:12px;text-align:left;padding:4px}
.staff-day-mobile-events{display:none}
.staff-day-panel{border-top:1px solid #e3e3e1;margin-top:24px;padding-top:20px}
.staff-day-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.staff-day-panel-heading h3{margin:0;font-size:20px;line-height:1.35}
.staff-day-panel-heading .text-button{flex-shrink:0;min-height:44px}
.staff-day-summary+.staff-day-summary,.staff-event-details+.staff-day-summary{margin-top:8px}
.staff-day-summary-button,.staff-agenda-button{display:flex;flex-direction:column;gap:7px;width:100%;min-height:62px;text-align:left;border:1px solid #dededd;border-radius:9px;background:#fff;color:#303236;padding:14px;font-size:17px}
.staff-day-summary-button span,.staff-agenda-button span{color:#64666b;font-size:15px}
.staff-day-summary-button:hover,.staff-agenda-button:hover{background:#faf7f7;border-color:#c9bfc0}
.staff-event-details{border:1px solid #dededd;border-radius:12px;background:#fafaf8;padding:20px;margin:10px 0;color:#3f4146;overflow-wrap:anywhere}
.staff-event-details-heading{display:flex;align-items:start;justify-content:space-between;gap:14px}
.staff-event-details h4{font-size:22px;line-height:1.25;color:#232529;margin:7px 0 12px}
.staff-event-type{font-size:13px;font-weight:800;color:#8e3036}
.staff-event-details p{line-height:1.5;margin:0 0 12px}
.staff-detail-time{font-weight:750}
.staff-detail-notes{white-space:pre-wrap}
.staff-detail-sessions{list-style:none;margin:15px 0;padding:0;display:grid;gap:8px}
.staff-detail-sessions li{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(0,1fr);gap:12px;padding:10px 12px;background:#fff;border-radius:7px}
.staff-detail-sessions strong{font-size:15px}
.staff-schedule-note{font-size:14px;color:#7c3b2f}
.staff-event-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.staff-event-actions button{min-height:48px;min-width:90px;font-size:16px}
.staff-event-actions .calendar-remove-button{margin-left:auto;color:#a12c3d;font-weight:700;background:transparent;border:1px solid transparent}
.calendar-remove-button:hover{background:#fff0f2;border-color:#efc1c9}
.staff-month-list{display:grid;gap:14px}
.staff-agenda-row{display:grid;gap:7px}
.staff-agenda-date{font-size:14px;font-weight:700;color:#607284}
.staff-calendar-utilities{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:14px;padding:0 4px;color:#cdd6df}
.staff-calendar-utilities>.text-button{color:#dfeaf6;min-height:44px}
.staff-calendar-more{max-width:440px;flex:0 1 auto}
.staff-calendar-more summary{min-height:44px;line-height:44px;cursor:pointer;font-size:14px}
.staff-calendar-more>div{background:#fff;color:#536477;border-radius:12px;padding:18px;display:grid;gap:12px}
.staff-calendar-more p{font-size:14px;line-height:1.5;margin:0}
.staff-calendar-more input{max-width:100%}
@media(max-width:950px){
  .staff-calendar-heading{flex-direction:column;gap:16px}
  .staff-calendar-toolbar{display:grid;grid-template-columns:1fr;gap:12px}
  .staff-calendar-options{justify-content:space-between}
  .staff-month-controls{max-width:none}
  .staff-day{min-height:94px}
  .staff-day-desktop-events{display:none}
  .staff-day-mobile-events{display:block;width:100%;min-height:44px;border:0;background:transparent;color:#a92f38;font-size:11px;font-weight:750;padding:4px 2px;overflow-wrap:normal}
  .staff-day-mobile-events>span{display:block;font-size:8px;line-height:1.5}
  .staff-date-button{justify-content:center;padding:7px 2px}
  .staff-date-plus{display:none}
}
@media(max-width:699px){
  .staff-calendar.card{padding:14px 8px;border-radius:12px}
  .staff-calendar-heading{padding:0 6px;margin-bottom:20px}
  .staff-calendar-heading h2{font-size:27px}
  .staff-calendar-heading p{font-size:15px}
  .calendar-add-button{width:100%}
  .calendar-header-actions{display:grid;width:100%;grid-template-columns:1fr}.calendar-header-actions .print-button{width:100%}.card-heading>.print-button{width:100%;margin-top:8px}
  .staff-calendar-toolbar{padding:0 5px}
  .staff-month-controls{gap:6px}
  .staff-month-controls h3{font-size:20px}
  .staff-weekdays{font-size:11px}
  .staff-day-panel{padding:18px 5px 0}
  .staff-day-panel-heading{display:block}
  .staff-day-panel-heading h3{font-size:18px}
  .staff-day-panel-heading .text-button{padding-left:0}
  .staff-event-details{padding:14px}
  .staff-event-details h4{font-size:20px}
  .staff-detail-sessions li{grid-template-columns:1fr;gap:5px}
  .staff-event-actions{display:grid;grid-template-columns:1fr 1fr}
  .staff-event-actions .calendar-remove-button{grid-column:1/-1;justify-self:start;margin:0;min-width:100px}
  .staff-calendar-utilities{display:grid;gap:2px}
  .header-controls{grid-template-columns:1fr 1fr;gap:10px}
  .header-controls .logout-button{grid-column:1/-1;min-height:40px;justify-self:end;padding:7px 12px}
  .brand-subtitle,.brand-korean{display:none}
  .topbar{gap:12px}
  .brand-block h1{font-size:28px}
  .module-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:10px 0;gap:8px}
  .module-nav button{min-width:0;min-height:44px;padding:8px 10px;overflow-wrap:anywhere}
}

.group-manager{margin:24px 0;padding:18px;border:1px solid #d5d9df;border-radius:12px}.group-manager summary{font-size:20px;font-weight:700;min-height:48px;cursor:pointer}.class-group-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.class-group-choice{display:flex!important;align-items:center;gap:12px;padding:12px;border:1px solid #ddd;border-radius:8px;min-height:52px}.class-group-choice input[type=checkbox]{width:24px;min-height:24px;flex:0 0 24px}.class-group-choice small,.group-admin-row small{display:block;font-size:15px;line-height:1.5}.group-admin-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ddd;padding:14px 0}.group-admin-row>div{flex:1;min-width:0}#class-group-form{margin-top:24px}#class-group-form label{display:grid;gap:8px}#class-group-form input,#class-group-form select{width:100%;min-width:0}@media(max-width:600px){.group-admin-row{flex-wrap:wrap}.group-admin-row>div{flex-basis:100%}.class-group-options{grid-template-columns:1fr}}
.weekly-form:has(select[name=entryKind] option[value=appointment]:checked) .weekly-clock-fields,.weekly-form:has(select[name=entryKind] option[value=notice]:checked) .weekly-clock-fields{display:none}
.group-box>summary{min-height:48px;padding:10px 0;font-weight:650;cursor:pointer}

/* KTKD staff workspace — light, task-first, comfortable on a phone. */
:root{--kt-red:#a32d37;--kt-red-dark:#86232d;--kt-blue:#235e87;--kt-blue-soft:#eaf2f8;--kt-canvas:#f5f6f4;--kt-ink:#202b32;--kt-muted:#55656d;--kt-line:#dce2e3;--kt-shadow:0 3px 16px rgba(28,47,53,.035);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;color-scheme:light}
body{background:var(--kt-canvas);font-size:17px;line-height:1.55;overflow-x:clip}
html:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{line-height:1.3;letter-spacing:-.025em}h2{font-size:30px}h3{font-size:21px}
.app-shell{width:min(100%,1440px);gap:26px;padding:28px;grid-template-columns:188px minmax(0,1fr)}
.topbar{border:0;border-bottom:1px solid var(--kt-line);border-radius:0;background:transparent;box-shadow:none;padding:4px 0 26px;gap:24px}
.brand-block{gap:18px}.brand-block img{width:82px;mix-blend-mode:multiply}.brand-block h1{font-size:27px;letter-spacing:-.03em}.app-kicker{font-size:12px;letter-spacing:.06em;color:var(--kt-muted)}.brand-subtitle{font-size:15px;font-weight:400;margin-top:4px}
.header-controls{grid-template-columns:minmax(145px,210px) minmax(106px,126px) auto;gap:12px}.header-controls label{font-size:13px}.header-controls select{font-size:16px;min-height:48px;padding:10px}.logout-button{color:var(--kt-muted);border:0;background:transparent;font-size:14px;padding:10px}
.module-nav{top:20px;gap:8px}.module-nav button{display:flex;align-items:center;gap:12px;background:transparent;border-color:transparent;color:var(--kt-muted);font-size:17px;font-weight:600;min-height:54px;padding:14px;border-radius:12px}.module-nav button:hover{background:#e9eeec}.module-nav button.active{color:#204e69;background:#e5edf1;border-color:transparent}.module-nav svg{flex-shrink:0}
.content-shell{gap:20px}.card,.login-card{border:1px solid var(--kt-line);border-radius:18px;box-shadow:var(--kt-shadow)}.content-card{width:100%;padding:28px}.section-label{color:var(--kt-muted);font-size:12px;letter-spacing:.06em}.soft-text,.save-explanation{color:var(--kt-muted);font-size:16px;line-height:1.65}.section-label+ h2{margin-top:6px}.card-heading{margin-bottom:18px}
.primary-button{background:var(--kt-blue);font-weight:650;box-shadow:none}.primary-button:hover{background:#194966}.secondary-button{background:#f2f5f6;color:#2b4b5d;border:1px solid #c7d3d9;font-weight:600}.secondary-button:hover{background:#e8eef1}.text-button{min-height:48px;font-weight:600}.danger-button{color:#a32d37;background:#fff5f4;border-color:#e9c7c8}.mini-button{font-size:16px;font-weight:600}.primary-button,.secondary-button,.mini-button{min-height:48px}button:disabled{cursor:wait;opacity:.55}
label{font-size:16px;font-weight:600}input,select,textarea{font-size:17px;border:1px solid #7f909b;border-radius:9px;line-height:1.4}input::placeholder,textarea::placeholder{color:#65727b}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #235e87;outline-offset:3px}
.staff-calendar.card{padding:28px;border-radius:18px}.staff-calendar-heading h2{font-size:30px}.staff-calendar-heading p{max-width:610px;color:var(--kt-muted)}.staff-calendar-utilities,.staff-calendar-utilities>.text-button{color:var(--kt-muted)}.staff-calendar-more summary{font-size:16px}.staff-calendar-more>div{border:1px solid var(--kt-line)}.staff-day{border-color:#e0e5e6}.staff-day.is-today .staff-date-button{color:#235e87}.staff-event-details{background:#f8fafb}.staff-event-type{color:#8b303c}
.practice-notice{border:1px solid #ded9ba;background:#fcfaf0;color:#605431;border-radius:12px;padding:12px 16px;font-size:14px}.practice-notice p{margin:3px 0 0;font-size:14px;line-height:1.5}.practice-notice strong{font-size:14px}.notice{background:#edf5f0;border:1px solid #c1d9ca;color:#285b43;border-radius:12px;font-size:17px}.alert{background:#fff3f1;color:#8f2934;border:1px solid #d7aeb3;border-radius:12px;scroll-margin:28px;font-size:17px}
.weekly-form{background:#f8fafb;border:1px solid #d8e2e7;border-radius:14px;padding:24px;margin-top:24px}.weekly-form .card-heading{margin-bottom:0}.weekly-admin-day h3{padding:14px 0;border-bottom:1px solid var(--kt-line);font-size:22px}.weekly-admin-row{border-radius:0;background:#fff;border:0;border-bottom:1px solid #e7ebec;padding:18px 0;gap:16px}.weekly-admin-row strong{color:#315467;font-size:17px}.weekly-admin-row span{font-size:20px;font-weight:650;line-height:1.4}.weekly-admin-row small{color:#55656d;font-size:15px;line-height:1.65}.weekly-room-badge{background:#edf2f5;color:#3e5969;border-radius:6px;padding:3px 8px;width:max-content}.group-manager{border:1px solid var(--kt-line);padding:16px 20px;background:#f9faf9}.group-manager summary{font-size:17px}.group-box{background:white;border:1px solid #d7e0e4;border-radius:12px;padding:16px}.group-box>summary{font-size:17px}.optional-details{padding:14px 0;border-top:1px solid var(--kt-line)}.optional-details>summary{font-size:17px;min-height:48px;display:list-item;cursor:pointer;padding:10px 0}.optional-details>.form-stack{margin-top:16px}.field-hint{color:#55656d;font-size:15px;line-height:1.6;margin:0}
.weekly-no-time,.weekly-printed-fields{display:none}.weekly-form:has([name=entryKind] option[value=appointment]:checked) .weekly-time-section,.weekly-form:has([name=entryKind] option[value=notice]:checked) .weekly-time-section{display:none}.weekly-form:has([name=entryKind] option[value=appointment]:checked) .weekly-no-time,.weekly-form:has([name=entryKind] option[value=notice]:checked) .weekly-no-time{display:block}.weekly-form:has([name=timeMode] option[value=printed]:checked) .weekly-clock-fields{display:none}.weekly-form:has([name=timeMode] option[value=printed]:checked) .weekly-printed-fields{display:block}.weekly-form:has([name=categoryId]:checked) .weekly-audience-fields{display:none}
.group-age-range,.group-rank-range,.group-rank-to,.group-rank-set{display:none}#class-group-form:has([name=ageMode] option[value=range]:checked) .group-age-range{display:block}#class-group-form:has([name=rankMode] option:is([value=single],[value=range],[value=minimum]):checked) .group-rank-range{display:grid}#class-group-form:has([name=rankMode] option[value=range]:checked) .group-rank-to{display:grid}#class-group-form:has([name=rankMode] option[value=set]:checked) .group-rank-set{display:block}.group-belt-list{border:1px solid var(--kt-line);border-radius:12px;padding:16px}
#class-group-form .form-actions,.weekly-form .form-actions,#event-form .form-actions{position:sticky;bottom:12px;z-index:5;background:#fff;border:1px solid #d7e0e4;border-radius:12px;padding:12px;box-shadow:0 3px 14px #2237440d}.save-explanation{margin:0;font-size:15px}
.roadmap-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.roadmap-grid article{border:1px solid var(--kt-line);border-radius:14px;padding:22px;background:#fcfcfb}.roadmap-grid h3{font-size:21px;margin:12px 0 8px}.roadmap-grid p{font-size:16px;color:var(--kt-muted);line-height:1.6;margin:0 0 14px}.roadmap-number{font-size:13px;color:#697b82}.planned-label{font-size:13px;color:#58666e;border:1px solid #d5dcdf;border-radius:5px;padding:3px 7px}.account-email{font-size:20px;overflow-wrap:anywhere}.account-card h2{font-size:26px}
.login-card{max-width:480px;padding:36px;border-top:1px solid var(--kt-line)}.login-logo{width:164px;margin-bottom:28px}.login-card h1{font-size:34px}.login-card .language-selector{margin-bottom:22px}.login-card [data-action=google-sign-in]{width:100%;margin:0 0 24px;background:#fff;color:#253b48;border-color:#9baab4}
.skip-link{position:fixed;left:20px;top:-100px;z-index:1000;background:#fff;padding:14px;color:#235e87}.skip-link:focus{top:12px}.confirmation-dialog{max-height:85dvh;overflow:auto}.confirmation-dialog h2{font-size:26px}.confirmation-dialog p{font-size:17px;line-height:1.65}
@media(max-width:1000px) and (min-width:700px){.app-shell{grid-template-columns:160px minmax(0,1fr);padding:20px;gap:18px}.topbar{align-items:start;flex-wrap:wrap}.header-controls{width:100%;grid-template-columns:1fr 1fr auto}.module-nav button{font-size:16px;padding:12px}.content-card,.staff-calendar.card{padding:22px}.roadmap-grid{grid-template-columns:1fr}}
@media(max-width:699px){.app-shell{display:block;padding:16px 12px}.topbar{padding:2px 4px 16px;border:0;gap:16px}.brand-block img{width:54px}.brand-block{gap:12px}.brand-block h1{font-size:23px}.brand-subtitle{display:none}.app-kicker{font-size:11px;letter-spacing:.035em}.header-controls{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}.header-controls .logout-button{grid-column:1/-1;min-height:44px;padding:6px 4px;margin-top:-6px}.module-nav{position:sticky;top:0;z-index:8;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 0 12px;gap:6px;background:var(--kt-canvas);margin-bottom:12px}.module-nav button{display:flex;flex-direction:column;gap:4px;text-align:center;min-height:66px;padding:8px 4px;font-size:14px;line-height:1.4;border-radius:11px}.module-nav button svg{width:21px;height:21px}.content-shell{gap:16px;padding-bottom:28px}.card,.content-card{padding:20px 16px;border-radius:14px}.staff-calendar.card{padding:20px 12px;border-radius:14px}.staff-calendar-heading h2{font-size:27px}.weekly-form{padding:16px 12px}.weekly-admin-row{display:block}.weekly-admin-row .event-row-actions{display:flex;margin-top:14px;flex-wrap:wrap;gap:8px}.event-row-actions .mini-button{flex:1;padding:10px 12px;min-width:70px}.weekly-admin-row span{font-size:20px}.group-manager{padding:12px}.group-admin-row{gap:8px}.group-admin-row>.mini-button{flex:1}.group-box{padding:12px}.clock-parts{gap:6px}.clock-parts select{padding:10px 7px}.form-actions{gap:8px}#class-group-form .form-actions,.weekly-form .form-actions,#event-form .form-actions{bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr;padding:10px;margin-left:-4px;margin-right:-4px}.form-actions .primary-button{white-space:normal;line-height:1.45;min-height:52px}.form-actions .text-button{min-height:44px}.roadmap-grid{grid-template-columns:1fr}.roadmap-grid article{padding:20px}.login-card{padding:26px 22px}.confirmation-dialog{width:calc(100% - 24px);padding:22px}.alert{scroll-margin-top:100px}.staff-calendar-tools,.staff-calendar-options{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(forced-colors:active){.module-nav button.active{outline:2px solid Highlight}.primary-button,.secondary-button{border:1px solid ButtonText}}
.weekly-day-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}.weekly-day-tabs button{min-height:48px;padding:10px 16px;border:1px solid #c8d3d8;background:#fff;color:#415967;border-radius:9px;font-weight:600;font-size:16px}.weekly-day-tabs button[aria-pressed=true]{background:#e8f0f5;color:#204e69;border-color:#7e9db1}.add-class-button{width:auto;min-width:180px}.review-return{padding:10px 28px;font-size:14px;border-bottom:1px solid #dee4e4}.review-return a{display:inline-flex;align-items:center;min-height:44px;color:#235e87}input[readonly]{background:#eef2f4;color:#485d69}#main-content{outline:none}
@media(max-width:699px){.add-class-button{width:100%}.weekly-day-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.weekly-day-tabs button{font-size:15px;padding:9px 4px}.review-return{padding:4px 16px}.app-shell:has(#weekly-form,#event-form,#class-group-form) .module-nav{position:static}.weekly-admin-day h3{margin-bottom:0}.app-shell:has(.weekly-form) .card-heading{align-items:start}}
.calendar-view-switch button{min-height:48px}.email-sign-in summary{min-height:48px;padding:12px 0;font-size:17px;font-weight:600;color:#235e87;cursor:pointer}.email-sign-in .form-stack{margin-top:18px}.login-card [data-action=google-sign-in]{min-height:54px}
.home-quick-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.home-studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.home-studio-button{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:58px;border:1px solid var(--kt-line);border-radius:12px;padding:14px 18px;background:#fff;color:var(--kt-ink);font-size:18px;text-align:left}.home-studio-button:hover,.home-studio-button[aria-current=true]{background:var(--kt-blue-soft);border-color:#9eb8c9}.staff-event-button strong{display:block;overflow:visible;-webkit-line-clamp:unset}.staff-calendar-session{display:grid;gap:3px;border-top:1px solid #dce2e3;margin-top:4px;padding-top:5px;overflow-wrap:anywhere}.staff-calendar-session b{font-size:12px;line-height:1.4}.staff-calendar-session small{font-size:11px;line-height:1.4}.staff-agenda-row>.staff-detail-sessions{margin:0 0 6px}.staff-agenda-row>.staff-detail-sessions li{border:1px solid var(--kt-line);font-size:16px}
@media(max-width:699px){.module-nav:has([data-destination=dashboard]){grid-template-columns:repeat(4,minmax(0,1fr))}.home-studio-grid{grid-template-columns:1fr}.home-quick-actions{display:grid;grid-template-columns:1fr}.staff-agenda-row .staff-detail-sessions li{grid-template-columns:1fr;gap:4px}.staff-agenda-row .staff-detail-sessions strong{font-size:17px}}

/* Each event time has its own optional belt rule. */
.belt-row .event-belt-mode{grid-column:1/-1}
.belt-entry{display:grid;gap:12px;min-width:0;align-content:start}
.belt-entry-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.belt-entry-heading>span{font-weight:600}
.belt-entry-trigger{min-height:44px;padding:6px 0;font-size:15px;text-align:left}
.belt-entry-manual{display:grid}
.group-rank-range{align-items:start}
.group-belt-list>label{margin-top:16px}
.group-manual-belts{display:none}
#class-group-form:has([name=rankMode] option[value=manual]:checked) .group-manual-belts{display:block}
@media(min-width:1000px){.belt-row .clock-picker{grid-column:auto}}

.remember-device{margin:16px 0 0;min-height:44px}.remember-device input{flex:0 0 auto;width:22px;height:22px;min-height:22px}.remember-help{font-size:14px;color:#606873;line-height:1.5;margin:4px 0 18px}

/* Student pilot shares the existing navigation on small screens. */
@media(max-width:699px){.module-nav:has([data-destination=students]){grid-template-columns:repeat(4,minmax(0,1fr))}.module-nav:has([data-destination=dashboard]):has([data-destination=students]){grid-template-columns:repeat(5,minmax(0,1fr))}.module-nav:has([data-destination=students]) button{min-width:0;padding-left:2px;padding-right:2px;font-size:11px}}

/* Local copy interaction preview. */
.copy-demo-banner {margin:0;padding:10px 16px;background:#fff2ca;color:#594414;text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em}
.copy-heading-actions,.copy-footer{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.copy-footer{justify-content:space-between;border-top:1px solid #e4e7ec;margin-top:26px;padding-top:22px}
.copy-panel{max-width:1000px}.copy-panel h2{font-size:30px;margin:8px 0 10px}.copy-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px}.copy-columns fieldset{border:0;padding:0;min-width:0}.copy-columns legend{font-size:18px;font-weight:750;margin-bottom:18px}.copy-field{display:grid;gap:8px;font-weight:600}.copy-field select{padding:12px;border:1px solid #c9ced7;border-radius:10px;background:white;color:#151c28;font:inherit}.copy-mode{display:flex;gap:18px;margin:20px 0;flex-wrap:wrap}.copy-mode label{display:flex;gap:8px;align-items:center}.copy-panel input{accent-color:#bd2829;width:19px;height:19px;flex-shrink:0}.copy-source-list,.copy-destinations{border:1px solid #e0e4eb;border-radius:12px;overflow:hidden}.copy-source-row,.copy-destinations label{display:flex;gap:12px;align-items:center;padding:15px;border-bottom:1px solid #e6e9ee;cursor:pointer}.copy-source-row:last-child,.copy-destinations label:last-child{border-bottom:0}.copy-source-row span{display:grid;gap:6px}.copy-source-row small,.copy-destinations small{color:#667080}.copy-destinations small{margin-left:auto}.copy-summary{display:flex;gap:16px;align-items:center;background:#f0f5f2;padding:18px;border-radius:12px;margin:24px 0}.copy-review-row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #e6e9ee}.copy-review-row div{display:grid;gap:6px}.copy-review-row span{color:#667080}.copy-review-row b{font-size:13px;color:#287349}.copy-review-row.copy-skipped b{color:#6b7280}.copy-panel button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:650px){.copy-columns{grid-template-columns:1fr;gap:25px}.copy-summary{align-items:flex-start;flex-direction:column}.copy-heading-actions{margin-top:12px}.copy-review-row span{font-size:13px}.copy-panel h2{font-size:25px}}

.copy-field{margin-bottom:16px}.copy-field input[type="date"],.copy-field input[type="month"]{width:100%;height:auto;padding:12px;border:1px solid #c9ced7;border-radius:10px;font:inherit;box-sizing:border-box}
.copy-demo-banner{grid-column:1/-1;border-radius:8px;margin:0}.copy-panel input[type="checkbox"],.copy-panel input[type="radio"]{min-height:19px;margin:0}.copy-panel fieldset{margin:0}.copy-source-row,.copy-destinations label{min-height:52px}.copy-destinations label:has(input:disabled){cursor:default}