@import url("/assets/css/design-tokens.css?v=20260717-1");

/*
 * Studio Beatriz Viamonte — shared product UI
 * Keeps the backoffice and student portal visually consistent while allowing
 * each area to retain its task-specific layouts.
 */
body.admin-app,
body.admin-login,
body.student-login,
body.student-setup,
body.student-app {
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --paper: var(--brand-surface);
  --surface: var(--brand-page);
  --line: var(--brand-line);
  --accent: var(--brand-accent);
  --accent-deep: var(--brand-accent-deep);
  --accent-soft: var(--brand-accent-soft);
  --input: var(--brand-surface-soft);
  --success: #dff1e7;
  --danger: #f8e6e6;
  --warning: #f8e8c8;
  --ui-radius-sm: var(--brand-radius-sm);
  --ui-radius: var(--brand-radius);
  --ui-radius-lg: var(--brand-radius-lg);
  --ui-shadow-sm: var(--brand-shadow-sm);
  --ui-shadow: var(--brand-shadow);
  color: var(--ink);
  background-color: var(--surface);
  font-family: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body.admin-app,
html[data-theme="dark"] body.admin-login,
html[data-theme="dark"] body.student-login,
html[data-theme="dark"] body.student-setup,
html[data-theme="dark"] body.student-app {
  color-scheme: dark;
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --paper: var(--brand-surface);
  --surface: var(--brand-page);
  --line: var(--brand-line);
  --accent: var(--brand-accent);
  --accent-deep: var(--brand-accent-deep);
  --accent-soft: var(--brand-accent-soft);
  --input: var(--brand-surface-soft);
  --success: #173c30;
  --danger: #44262d;
  --warning: #473a1f;
  --ui-shadow-sm: var(--brand-shadow-sm);
  --ui-shadow: var(--brand-shadow);
}

body.admin-app *,
body.admin-login *,
body.student-login *,
body.student-setup *,
body.student-app * {
  scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent;
}

body.admin-app :where(a, button, input, select, textarea, summary):focus-visible,
body.admin-login :where(a, button, input):focus-visible,
body.student-login :where(a, button, input):focus-visible,
body.student-setup :where(a, button, input):focus-visible,
body.student-app :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}

body.admin-app .responsive-table:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}

body.admin-app :where(button, .button, input, select),
body.student-app :where(button, .action, input, select) {
  min-height: 44px;
}

body.admin-app :where(input, select, textarea),
body.admin-login input,
body.student-login input,
body.student-setup input,
body.student-app :where(input, select, textarea) {
  border-color: var(--line);
  background: var(--input);
  color: var(--ink);
}

body.admin-app :where(input, select, textarea, fieldset),
body.student-app :where(input, select, textarea, fieldset) {
  min-width: 0;
  max-width: 100%;
}

body.admin-app dialog,
body.student-app dialog {
  max-width: calc(100vw - 1rem);
  max-height: calc(100svh - 1rem);
  overflow: auto;
}

body.admin-app :where(input, select, textarea)::placeholder,
body.admin-login input::placeholder,
body.student-login input::placeholder,
body.student-setup input::placeholder,
body.student-app :where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

body.admin-app :where(.card, .stat),
body.student-app :where(.hero, .portal-card, .availability-card) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  box-shadow: var(--ui-shadow-sm);
}

body.admin-app .card,
body.student-app :where(.hero, .portal-card, .availability-card) {
  border-radius: var(--ui-radius-lg);
}

body.admin-app :where(.button, .logout),
body.student-app :where(.action, .theme-button, .portal-logout button),
body.admin-login button,
body.student-login button,
body.student-setup button {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}

body.admin-app :where(.button, .logout):active,
body.student-app :where(.action, .theme-button, .portal-logout button):active,
body.admin-login button:active,
body.student-login button:active,
body.student-setup button:active {
  transform: translateY(1px);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .65rem .85rem;
  border-radius: var(--ui-radius-sm);
  background: var(--accent);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Backoffice application */
body.admin-app {
  background: radial-gradient(circle at 88% 0, #eadfd3 0, transparent 31rem), var(--surface);
}

html[data-theme="dark"] body.admin-app {
  background: radial-gradient(circle at 88% 0, #25221f 0, transparent 31rem), var(--surface);
}

body.admin-app header {
  border-color: var(--line);
}

body.admin-app .brand strong,
body.student-app .portal-brand strong {
  letter-spacing: -.01em;
}

body.admin-app .mark,
body.student-app .portal-brand .mark {
  background: linear-gradient(135deg, #b98b5c, var(--accent));
  box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.admin-app .nav-section a,
body.student-app .portal-nav a {
  min-height: 42px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

body.admin-app .nav-section a.active,
body.student-app .portal-nav a.active {
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

body.admin-app .nav-search-primary .search-toggle {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

body.admin-app .search-toggle kbd {
  margin-left: auto;
  padding: .16rem .38rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  font: 700 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--muted) 20%, transparent);
}

body.admin-app .nav > a.nav-booking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 46px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.admin-app .button.primary,
body.admin-app .nav > a.nav-booking,
body.student-app .action {
  border-color: var(--accent);
  background: linear-gradient(135deg, #b98b5c, var(--accent));
  color: #fffdfa;
}

html[data-theme="dark"] body.admin-app .button.primary,
html[data-theme="dark"] body.admin-app .nav > a.nav-booking,
html[data-theme="dark"] body.student-app .action {
  background: linear-gradient(135deg, #c99a67, #a87442);
  color: #fffdfa;
}

body.admin-app .button.primary:hover,
body.admin-app .nav > a.nav-booking:hover,
body.student-app .action:hover {
  border-color: var(--accent-deep);
  background: linear-gradient(135deg, #a87949, var(--accent-deep));
  color: #fffdfa;
}

body.admin-app .global-search {
  box-shadow: var(--ui-shadow);
}

body.admin-app .global-search {
  align-items: stretch;
  flex-direction: column;
  gap: .75rem;
}

body.admin-app .command-search-row {
  display: flex;
  align-items: center;
  gap: .55rem;
}

body.admin-app .command-search-row input {
  flex: 1;
  width: auto;
  min-width: 0;
}

body.admin-app .command-section {
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}

body.admin-app .command-section > span {
  display: block;
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.admin-app .command-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}

body.admin-app .command-links a {
  min-height: 42px;
  padding: .62rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

body.admin-app .command-links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

body.admin-app .notification-bell {
  box-shadow: var(--ui-shadow-sm);
}

body.admin-app .page-shell > .toolbar:first-of-type {
  gap: 1rem;
}

body.admin-app .schedule-heading {
  min-height: 88px;
  margin-bottom: 1rem;
}

body.admin-app .calendar-period {
  min-height: 1.35em;
}

body.admin-app .calendar-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  background: var(--paper);
  box-shadow: var(--ui-shadow-sm);
}

body.admin-app .calendar-commandbar {
  display: grid;
  grid-template-columns: auto minmax(290px, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 64px;
  margin: 0;
  padding: .7rem .8rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
}

body.admin-app .view-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  width: 250px;
}

body.admin-app .view-switch .button {
  justify-content: center;
}

body.admin-app .calendar-period-nav {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  margin: 0;
}

body.admin-app .calendar-jump {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  margin: 0;
}

body.admin-app .calendar-jump input {
  width: 150px;
  min-width: 0;
  min-height: 40px;
  padding: .5rem .65rem;
}

body.admin-app .calendar-shell > :where(.calendar-wrap, .week-wrap) {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.admin-app .calendar-list-content {
  margin: 0;
  padding: 1rem;
}

body.admin-app .week-event-delete,
body.admin-app .availability-slot-delete {
  display: none;
  place-items: center;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

body.admin-app .week-event:hover .week-event-delete,
body.admin-app .week-event:focus-within .week-event-delete,
body.admin-app .availability-slot:hover .availability-slot-delete,
body.admin-app .availability-slot:focus-within .availability-slot-delete {
  display: grid;
}

@media (max-width: 1080px) {
  body.admin-app .calendar-commandbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.admin-app .calendar-jump {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  body.admin-app .schedule-heading {
    min-height: 0;
  }

  body.admin-app .calendar-commandbar {
    grid-template-columns: 1fr;
  }

  body.admin-app .view-switch {
    width: 100%;
  }

  body.admin-app .calendar-period-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.admin-app .calendar-period-nav .button {
    min-width: 0;
    padding-inline: .45rem;
  }

  body.admin-app .calendar-jump {
    grid-column: auto;
  }

  body.admin-app .calendar-jump input {
    flex: 1;
    width: auto;
  }
}

body.admin-app .dashboard-layout {
  display: grid;
  gap: 1.25rem;
}

body.admin-app .dashboard-widget {
  min-width: 0;
  margin-bottom: 0;
}

body.admin-app .dashboard-widget[hidden] {
  display: none;
}

body.admin-app .dashboard-backup {
  padding: .15rem .25rem;
}

body.admin-app .dashboard-dialog {
  width: min(92vw, 580px);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ui-shadow);
}

body.admin-app .dashboard-dialog::backdrop {
  background: rgba(17, 19, 21, .52);
  backdrop-filter: blur(4px);
}

body.admin-app .dashboard-dialog .toolbar {
  align-items: flex-start;
}

body.admin-app .dashboard-settings {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}

body.admin-app .dashboard-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  background: var(--surface);
}

body.admin-app .dashboard-setting label {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: var(--ink);
}

body.admin-app .dashboard-setting input {
  width: 1.1rem;
  min-height: 1.1rem;
}

body.admin-app .dashboard-order {
  display: flex;
  gap: .3rem;
}

body.admin-app .dashboard-order button {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--accent);
  cursor: pointer;
}

body.admin-app .today-summary {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  color: var(--muted);
}

body.admin-app .today-summary strong {
  color: var(--ink);
  font: 500 1.6rem Georgia, serif;
}

body.admin-app .today-list {
  position: relative;
}

body.admin-app .today-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 76px;
  width: 2px;
  background: var(--line);
}

body.admin-app .today-lesson {
  position: relative;
  display: grid;
  grid-template-columns: 60px 20px minmax(0, 1fr);
  gap: .45rem;
  margin-bottom: .8rem;
}

body.admin-app .today-time {
  padding-top: 1rem;
  text-align: right;
}

body.admin-app .today-time strong,
body.admin-app .today-time span {
  display: block;
}

body.admin-app .today-time span {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .75rem;
}

body.admin-app .today-marker {
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: 1.25rem auto 0;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--line);
}

body.admin-app .today-lesson.next .today-marker {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

body.admin-app .today-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--paper);
  box-shadow: var(--ui-shadow-sm);
}

body.admin-app .today-lesson.next .today-card {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 10%, transparent);
}

body.admin-app .today-student {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}

body.admin-app .today-student h2,
body.admin-app .today-student p {
  margin: 0;
}

body.admin-app .today-student p {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .86rem;
}

body.admin-app .calendar-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

body.admin-app .calendar-avatar-generated {
  background: hsl(var(--avatar-hue) 56% 86%);
  color: hsl(var(--avatar-hue) 34% 24%);
  font-size: .7rem;
  font-weight: 850;
}

html[data-theme="dark"] body.admin-app .calendar-avatar-generated {
  background: hsl(var(--avatar-hue) 25% 28%);
  color: hsl(var(--avatar-hue) 60% 90%);
}

body.admin-app .today-actions,
body.admin-app .today-actions form {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

body.admin-app .today-actions .button {
  padding: .5rem .65rem;
}

body.admin-app table {
  font-size: .92rem;
}

body.admin-app th {
  color: var(--muted);
}

body.admin-app tbody tr {
  transition: background-color .12s ease;
}

body.admin-app tbody tr:hover {
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

body.admin-app .empty,
body.student-app .empty {
  border: 1px dashed color-mix(in srgb, var(--muted) 32%, var(--line));
}

@media (min-width: 1081px) {
  body.admin-app header {
    width: 272px;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
  }

  body.admin-app .topbar {
    padding: 1.5rem 1.2rem;
  }

  body.admin-app main {
    margin-left: 272px;
    padding: 2.25rem clamp(1.5rem, 3vw, 3.5rem);
  }

  body.admin-app .nav .global-search {
    left: 292px;
    width: min(600px, calc(100vw - 316px));
  }

  body.admin-app .notification-bell {
    top: 1.2rem;
    right: 1.4rem;
  }
}

/* Student application */
body.student-app {
  background: radial-gradient(circle at 88% 0, #eadfd3 0, transparent 31rem), var(--surface);
}

html[data-theme="dark"] body.student-app {
  background: radial-gradient(circle at 88% 0, #25221f 0, transparent 31rem), var(--surface);
}

body.student-app .portal-sidebar {
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
}

body.student-app .portal-sidebar-head {
  display: contents;
}

body.student-app .portal-brand {
  min-width: 0;
}

body.student-app .portal-menu-toggle {
  display: none;
}

body.student-app .profile-avatar,
body.student-app .portal-brand .mark {
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent) 18%, var(--paper));
  box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 18%, transparent);
}

body.student-app .portal-nav a:hover {
  transform: none;
}

body.student-app .portal-tools {
  align-items: stretch;
}

body.student-app .language-switch,
body.student-app .theme-button,
body.student-app .portal-logout button {
  border-color: var(--line);
  background: var(--paper);
}

body.student-app .theme-button,
body.student-login .theme-button,
body.student-setup .theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto;
  min-height: 40px;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

body.student-app .theme-label,
body.student-login .theme-label,
body.student-setup .theme-label {
  font-size: .76rem;
}

body.student-app .language-switch a[aria-current="page"] {
  border-radius: 6px;
  background: var(--accent-soft);
}

body.student-app .portal-main {
  padding: 2.25rem clamp(1.5rem, 3vw, 3.5rem);
}

body.student-app .summary-grid a {
  box-shadow: 0 1px 1px rgba(30, 47, 68, .03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.student-app .summary-grid a:hover {
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-1px);
}

body.student-app :where(.lesson, .resource, .settings-card, .availability-record) {
  border-color: var(--line);
}

body.admin-app .weekday,
body.admin-app .calendar-commandbar,
body.student-app .availability-toolbar,
body.student-app .availability-column.weekend .availability-day-head {
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--paper));
}

body.student-app footer {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

body.student-app .portal-onboarding {
  width: min(92vw, 540px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ui-shadow);
}

body.student-app .portal-onboarding::backdrop {
  background: rgba(17, 19, 21, .55);
  backdrop-filter: blur(5px);
}

body.student-app .onboarding-progress {
  height: 5px;
  background: var(--accent-soft);
}

body.student-app .onboarding-progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, #b98b5c, var(--accent));
  transition: width .2s ease;
}

body.student-app .portal-onboarding > section {
  min-height: 250px;
  padding: clamp(1.5rem, 6vw, 2.5rem);
}

body.student-app .portal-onboarding > section[hidden] {
  display: none;
}

body.student-app .portal-onboarding h2 {
  margin-top: .65rem;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
}

body.student-app .onboarding-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

body.student-app .onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

body.student-app .onboarding-actions > div {
  display: flex;
  gap: .45rem;
}

body.student-app .onboarding-skip {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}

body.student-app .onboarding-actions .action {
  margin: 0;
}

body.student-app .onboarding-actions .action.secondary {
  border-color: var(--line);
  background: var(--paper);
  color: var(--accent);
}

@media (min-width: 901px) {
  body.student-app .portal-sidebar {
    width: 272px;
  }

  body.student-app .portal-main {
    margin-left: 272px;
  }
}

/* Authentication and first access */
body.admin-login,
body.student-login,
body.student-setup {
  background: radial-gradient(circle at 10% 8%, #eadfd3 0, transparent 30rem), var(--surface);
}

html[data-theme="dark"] body.admin-login,
html[data-theme="dark"] body.student-login,
html[data-theme="dark"] body.student-setup {
  background: radial-gradient(circle at 85% 8%, #25221f 0, transparent 30rem), var(--surface);
}

body.student-login {
  padding: 1.25rem;
}

body.student-login .shell {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: var(--ui-shadow);
}

body.student-login .welcome,
body.admin-login .studio-panel {
  background: linear-gradient(145deg, #24201d, #463626);
  color: #fffdfa;
}

body.student-login .welcome :where(.brand, h2) {
  color: #fffdfa;
}

body.student-login .welcome :where(.eyebrow, p, small) {
  color: #d7c7b7;
}

body.student-login .login-panel {
  background: var(--paper);
}

body.student-login .mark,
body.admin-login .mark,
body.student-setup .mark {
  background: linear-gradient(135deg, #b98b5c, var(--accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

body.student-login .action,
body.student-setup .action {
  background: linear-gradient(135deg, #b98b5c, var(--accent));
  border-radius: 999px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.admin-login button[type="submit"] {
  border-radius: 999px;
  background: linear-gradient(135deg, #b98b5c, var(--accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.student-login .language-switch a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

body.student-setup .setup-card,
body.admin-login .card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  box-shadow: var(--ui-shadow);
}

body.student-setup .setup-card {
  border-radius: 22px;
}

body.admin-login .login-panel {
  background: transparent;
}

@media (max-width: 1080px) {
  body.admin-app header {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
  }

  body.admin-app .topbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
  }

  body.admin-app .brand {
    min-width: 0;
  }

  body.admin-app .notification-bell {
    position: relative;
    top: auto;
    right: auto;
    width: 42px;
    height: 42px;
    margin-left: auto;
  }

  body.admin-app .nav-toggle {
    margin-left: 0;
  }

  body.admin-app .nav.open {
    position: absolute;
    z-index: 50;
    top: calc(100% + .45rem);
    right: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    width: auto;
    max-height: calc(100vh - 6.5rem);
    padding: .8rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--paper) 98%, transparent);
    box-shadow: var(--ui-shadow);
  }

  body.admin-app .nav.open > *,
  body.admin-app .nav.open .nav-section {
    min-width: 0;
  }

  body.admin-app .nav.open .nav-section {
    display: contents;
  }

  body.admin-app .nav.open .nav-section a,
  body.admin-app .nav.open > a {
    width: 100%;
    min-width: 0;
  }

  body.admin-app .nav.open .nav-section-label {
    display: none;
  }

  body.admin-app .nav.open .nav-search-primary,
  body.admin-app .nav.open .nav-booking,
  body.admin-app .nav.open .nav-tools,
  body.admin-app .nav.open .logout-form {
    grid-column: 1 / -1;
  }

  body.admin-app .nav.open .nav-tools {
    margin: .35rem 0 0;
  }

  body.admin-app .nav.search-active {
    display: contents;
  }

  body.admin-app .nav.search-active > :not(.nav-search-primary) {
    display: none;
  }

  body.admin-app .nav.search-active .nav-search-primary {
    display: contents;
  }

  body.admin-app .nav.search-active .search-toggle {
    display: none;
  }

  body.admin-app .nav .global-search {
    top: 5rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    transform: none;
  }
}

@media (max-width: 900px) {
  body.admin-app .today-card {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-app .today-actions {
    width: 100%;
  }

  body.student-app .portal-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    gap: .8rem;
    max-height: 100svh;
    padding: .8rem 1rem;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(30, 47, 68, .06);
  }

  body.student-app .portal-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }

  body.student-app .portal-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
  }

  body.student-app .portal-menu-icon {
    position: relative;
    width: 16px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }

  body.student-app .portal-menu-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 2px solid currentColor;
    transform: translateY(-50%);
  }

  body.student-app .portal-sidebar.is-open .portal-menu-icon {
    border-color: transparent;
  }

  body.student-app .portal-sidebar.is-open .portal-menu-icon::before,
  body.student-app .portal-sidebar.is-open .portal-menu-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 2px solid currentColor;
  }

  body.student-app .portal-sidebar.is-open .portal-menu-icon::before {
    transform: rotate(45deg);
  }

  body.student-app .portal-sidebar.is-open .portal-menu-icon::after {
    transform: rotate(-45deg);
  }

  body.student-app .portal-nav {
    display: none;
    scrollbar-width: none;
  }

  body.student-app .portal-sidebar-footer {
    display: none;
  }

  body.student-app .portal-sidebar.is-open .portal-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.student-app .portal-sidebar.is-open .portal-nav a {
    justify-content: center;
    text-align: center;
  }

  body.student-app .portal-sidebar.is-open .portal-sidebar-footer {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin: 0;
    padding: .75rem .35rem 0;
    border-top: 1px solid var(--line);
    flex-direction: row;
  }

  body.student-app .portal-sidebar.is-open .portal-tools {
    width: auto;
    margin: 0;
  }

  body.student-app .portal-nav::-webkit-scrollbar {
    display: none;
  }

  body.student-app .portal-main {
    padding: 1.25rem;
  }
}

@media (max-width: 760px) {
  body.student-login {
    padding: 0;
  }

  body.student-login .shell {
    border: 0;
    border-radius: 0;
  }

  body.student-login .login-panel {
    padding: 1.25rem;
  }
}

@media (max-width: 700px) {
  body.admin-app .nav.open {
    grid-template-columns: 1fr;
  }

  body.admin-app .nav.open .nav-search-primary,
  body.admin-app .nav.open .nav-booking,
  body.admin-app .nav.open .nav-tools,
  body.admin-app .nav.open .logout-form {
    grid-column: auto;
  }

  body.admin-app main,
  body.student-app .portal-main {
    padding: .85rem;
    overflow-x: clip;
  }

  body.admin-app .card,
  body.student-app :where(.hero, .portal-card) {
    padding: 1rem;
    border-radius: var(--ui-radius);
  }

  body.admin-app .page-shell > .toolbar:first-of-type {
    padding: .25rem 0;
  }

  body.student-app .portal-sidebar {
    padding: .75rem;
  }

  body.student-app .portal-brand {
    padding: 0 .25rem;
  }

  body.admin-app .command-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  body.admin-app .command-search-row .button {
    width: 100%;
  }

  body.admin-app .command-links {
    grid-template-columns: 1fr;
  }

  body.admin-app .toolbar > .actions,
  body.student-app .section-heading > .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.admin-app .toolbar > .actions > *,
  body.admin-app .toolbar > .actions form,
  body.admin-app .toolbar > .actions .button,
  body.student-app .section-heading > .actions > * {
    width: 100%;
  }

  body.admin-app .calendar-wrap,
  body.admin-app .week-wrap,
  body.student-app .availability-scroll {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.student-app .availability-heading,
  body.student-app .availability-editor,
  body.student-app .availability-records {
    padding-inline: 1rem;
  }

  body.admin-app .responsive-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.admin-app .responsive-table > table {
    min-width: 620px;
  }

  body.admin-app .availability-remove,
  body.student-app .availability-remove {
    min-height: 44px;
  }
}

@media (hover: none) and (pointer: coarse) {
  body.admin-app .availability-slot,
  body.admin-app .week-event,
  body.student-app .availability-slot {
    overflow: visible;
  }

  body.admin-app .availability-slot-delete,
  body.admin-app .week-event-delete,
  body.student-app .availability-slot-delete {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    line-height: 1;
  }
}

@media (max-width: 520px) {
  body.admin-app .today-list::before {
    left: 57px;
  }

  body.admin-app .today-lesson {
    grid-template-columns: 43px 16px minmax(0, 1fr);
  }

  body.admin-app .today-time {
    font-size: .8rem;
  }

  body.admin-app .today-card {
    padding: .85rem;
  }

  body.admin-app .brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.admin-app .brand small {
    display: none;
  }

  body.admin-app .mark {
    width: 40px;
    height: 40px;
  }

  body.admin-app .nav-toggle {
    min-width: 42px;
    padding-inline: .65rem;
  }

  body.admin-app .stats {
    grid-template-columns: 1fr;
  }

  body.admin-app .toolbar > .actions,
  body.student-app .section-heading > .actions {
    grid-template-columns: 1fr;
  }

  body.admin-app .dashboard-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100svh - 1rem);
    padding: 1rem;
  }

  body.admin-app .dashboard-setting {
    align-items: flex-start;
  }

  body.student-app .portal-sidebar.is-open .portal-nav {
    grid-template-columns: 1fr;
  }

  body.student-app .portal-sidebar.is-open .portal-sidebar-footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.student-app .portal-sidebar.is-open .portal-tools {
    width: 100%;
  }

  body.student-app .portal-sidebar.is-open .portal-logout,
  body.student-app .portal-sidebar.is-open .portal-logout button {
    width: 100%;
  }

  body.student-app .portal-brand .profile-avatar,
  body.student-app .portal-brand .mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  body.student-app .onboarding-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  body.student-app .onboarding-actions > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.student-app .onboarding-actions .action,
  body.student-app .onboarding-skip {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.admin-app *,
  body.admin-login *,
  body.student-login *,
  body.student-setup *,
  body.student-app * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .skip-link,
  body.admin-app .nav-section a.active,
  body.student-app .portal-nav a.active {
    border: 2px solid ButtonText;
  }
}