/* СОВМЕСТНО. Shared appearance layer; existing layouts and teaching paper stay intact. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eff6f6;
  --card: #ffffff;
  --text: #172e34;
  --muted: #526b72;
  --line: #c8dfe1;
  --primary: #087d89;
  --primary-2: #066d78;
  --soft: #e0f1f2;
  --surface-subtle: #eaf4f4;
  --success: #236b4a;
  --warning: #815915;
  --danger: #a63645;
  --studio-accent: #b9e7e6;
  --studio-primary-fill: #087d89;
  --studio-primary-hover: #066772;
  --primary-ink: #ffffff;
  --studio-success-bg: #e6f3eb;
  --studio-warning-bg: #fbf0da;
  --studio-danger-bg: #fbecef;
  --studio-header: #ffffff;
  --desktop-page: #eff6f6;
  --desktop-sidebar: #f7fbfb;
  --desktop-hover: #e2f0f1;
  --switch-off: #7b8e93;
  --switch-on: #209863;
  --ribbon-opacity: .32;
  --floating-shadow: 0 12px 32px #00000022;
  --radius: 12px;
  --shadow: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #00161c;
  --card: #062128;
  --text: #eef8fa;
  --muted: #a6c4cc;
  --line: #194650;
  --primary: #65dce3;
  --primary-2: #8be9ee;
  --soft: #0a343d;
  --surface-subtle: #082b33;
  --success: #89dfb5;
  --warning: #f1c47d;
  --danger: #ffb4b5;
  --studio-accent: #63d6dd;
  --studio-primary-fill: #4fd2dc;
  --studio-primary-hover: #79e2e9;
  --primary-ink: #002a32;
  --studio-success-bg: #0b352c;
  --studio-warning-bg: #352d1d;
  --studio-danger-bg: #3b242d;
  --studio-header: #062128;
  --desktop-page: #00161c;
  --desktop-sidebar: #031b22;
  --desktop-hover: #0b3440;
  --switch-off: #577780;
  --switch-on: #209863;
  --ribbon-opacity: .74;
  --floating-shadow: 0 14px 40px #00000055;
  --shadow: none;
}
/* Aliases used by older CRM surfaces and the server entry/access pages. */
:root {
  --panel: var(--card);
  --border: var(--line);
  --ink: var(--text);
  --field: var(--card);
  --accent: var(--primary);
  --accent-hover: var(--studio-primary-hover);
  --focus: var(--primary);
  --error: var(--danger);
  --positive-bg: var(--studio-success-bg);
  --positive-text: var(--success);
  --warning-bg: var(--studio-warning-bg);
  --warning-text: var(--warning);
  --negative-bg: var(--studio-danger-bg);
  --negative-text: var(--danger);
  --selection-bg: var(--studio-primary-fill);
}
html, body { background-color: var(--bg); color: var(--text); }
html { scrollbar-color: var(--line) var(--bg); }
::selection { background: var(--soft); color: var(--text); }
input, textarea, [contenteditable] { caret-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
a { text-underline-offset: .2em; }
option, optgroup { background: var(--card); color: var(--text); }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: .025em; }
.brand-sub, .profile-role, .sidebar-footer .local-badge,
.sidebar-footer .theme-control > span, .sidebar-footer .backup-status { font-size: 12px; }
.studio-brand-mark,
[data-theme="dark"] .studio-brand-mark { color: var(--primary); background: var(--soft); border-color: var(--line); }
.sidebar, [data-theme="dark"] .sidebar { background: var(--desktop-sidebar); }
.sidebar .nav-btn.active, [data-theme="dark"] .sidebar .nav-btn.active {
  background: var(--soft); color: var(--primary); border-color: transparent;
}
.topbar, [data-theme="dark"] .topbar { background: var(--studio-header); backdrop-filter: none; }
.card, .auth-panel { box-shadow: none; border-color: var(--line); }
.btn-primary, [data-theme="dark"] .btn-primary, .primary-button,
[data-theme="dark"] .primary-button {
  background: var(--studio-primary-fill); color: var(--primary-ink); border-color: transparent;
}
.btn-primary:hover:not(:disabled), [data-theme="dark"] .btn-primary:hover:not(:disabled),
.primary-button:hover:not(:disabled), [data-theme="dark"] .primary-button:hover:not(:disabled) {
  background: var(--studio-primary-hover); color: var(--primary-ink); box-shadow: none;
}
.metric-link:hover .card { border-color: var(--primary); box-shadow: none; }
.btn-light, .btn-ghost, .small-btn, .icon-btn,
[data-theme="dark"] .btn-light, [data-theme="dark"] .btn-ghost,
[data-theme="dark"] .small-btn, [data-theme="dark"] .icon-btn {
  color: var(--text); background: var(--card); border-color: var(--line);
}
.small-btn.selected, .segmented .selected, .tabs button.selected,
[data-theme="dark"] .small-btn.selected, [data-theme="dark"] .segmented .selected,
[data-theme="dark"] .tabs button.selected {
  background: var(--soft) !important; color: var(--primary) !important;
}
.btn-danger, .small-btn.danger, [data-theme="dark"] .btn-danger, [data-theme="dark"] .small-btn.danger {
  color: var(--danger); background: var(--studio-danger-bg); border-color: transparent;
}
.badge.primary, [data-theme="dark"] .badge.primary { color: var(--primary); background: var(--soft); }
.badge.success, .calendar-event.done, [data-theme="dark"] .badge.success, [data-theme="dark"] .calendar-event.done {
  color: var(--success); background: var(--studio-success-bg);
}
.badge.warning, [data-theme="dark"] .badge.warning { color: var(--warning); background: var(--studio-warning-bg); }
.badge.danger, [data-theme="dark"] .badge.danger { color: var(--danger); background: var(--studio-danger-bg); }
.action-menu > div, .portal-more-menu, .time-popover, .subject-dialog-card,
.board-menu-panel, .board-color-picker, .board-icons .board-menu-panel, .board-download-menu > div {
  background: var(--card); color: var(--text); border-color: var(--line); box-shadow: var(--floating-shadow);
}
.modal-card, [data-theme="dark"] .modal-card { box-shadow: var(--floating-shadow); }
.calendar-grid, .calendar-day, .calendar-day.today, .calendar-event,
[data-theme="dark"] .calendar-day, [data-theme="dark"] .calendar-event {
  color: var(--text); border-color: var(--line);
}
.calendar-day.today, [data-theme="dark"] .calendar-day.today { background: var(--soft); }
.calendar-event, [data-theme="dark"] .calendar-event { background: var(--soft); }
.schedule-card, [data-theme="dark"] .schedule-card { color: var(--text); background: var(--card); }
.metric-value, .time-block, .agenda-time, .access-code, .student-invitation-code {
  font-variant-numeric: tabular-nums;
}
.studio-day { position: relative; isolation: isolate; }
.studio-day::before {
  content: ""; position: absolute; inset: -12px 0 0; z-index: -1; pointer-events: none;
  background: url("./teal-ribbon.webp") no-repeat 55% 48% / auto 220%;
  opacity: var(--ribbon-opacity);
}
.portal-hero { background: var(--soft); color: var(--text); border-color: var(--line); }
.portal-hero p, .portal-hero small { color: var(--muted); }
.portal-nav, [data-theme="dark"] .portal-nav { color: var(--text); background: var(--card); }
.quick-link, [data-theme="dark"] .quick-link { color: var(--text); background: var(--surface-subtle); }
.quick-link:hover, [data-theme="dark"] .quick-link:hover { color: var(--text); background: var(--soft); }
.student-choice, [data-theme="dark"] .student-choice { color: var(--text); background: var(--surface-subtle); }
/* Native inputs retain checked/disabled/indeterminate values and form submission. */
input[type="checkbox"], .check-field input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  position: relative; display: inline-block !important; flex: 0 0 42px;
  width: 42px !important; min-width: 42px !important; max-width: 42px !important;
  height: 24px !important; min-height: 24px !important; padding: 0 !important;
  border: 1px solid var(--switch-off) !important; border-radius: 999px !important;
  background: var(--switch-off) !important; vertical-align: middle; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px #00000035;
  transform: translateX(0); transition: transform .18s ease;
}
input[type="checkbox"]:checked {
  border-color: var(--switch-on) !important; background: var(--switch-on) !important;
}
input[type="checkbox"]:checked::before { transform: translateX(18px); }
input[type="checkbox"]:indeterminate { background: var(--switch-off) !important; }
input[type="checkbox"]:indeterminate::before { transform: translateX(9px); }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
input[type="checkbox"][hidden] { display: none !important; }
.theme-segmented { background: var(--surface-subtle); border: 1px solid var(--line); }
.theme-segmented::before { background: var(--card); box-shadow: none; }
.theme-segmented button { color: var(--muted); }
.theme-segmented button[aria-checked="true"] { color: var(--primary); }
.workspace-theme-control { display: none; }
.workspace-theme-control > summary {
  display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; list-style: none;
}
.workspace-theme-control > summary::-webkit-details-marker { display: none; }
details.workspace-theme-control > summary::before,
details.workspace-theme-control > summary::after { content: none; display: none; }
.workspace-theme-control > summary::marker { content: ""; }
.workspace-theme-control > summary svg { width: 21px; height: 21px; }
.workspace-theme-control:not([open]) > .theme-control { display: none; }
.workspace-theme-control[open] > .theme-control {
  display: grid; position: absolute; left: 0; bottom: calc(100% + 8px); padding: 10px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
}
body.board-mode .workspace-theme-control, body.student-mode .workspace-theme-control,
.entry-theme-control {
  display: block; position: fixed; left: 16px; bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 65; padding: 7px; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
}
.workspace-theme-control .theme-control { margin: 0; }
.workspace-theme-control .theme-control > span { display: none; }
body.board-mode .workspace-theme-control { display: none; }
.entry-theme-control { display: grid; gap: 5px; }
.entry-theme-control > span { font-size: 12px; color: var(--muted); }
.entry-theme-buttons { display: flex; gap: 2px; }
.entry-theme-buttons button {
  display: grid; place-items: center; min-width: 36px; min-height: 36px;
  padding: 7px; color: var(--muted); background: transparent; border: 0; border-radius: 7px;
}
.entry-theme-buttons svg { width: 20px; height: 20px; }
.entry-theme-buttons button[aria-checked="true"] { color: var(--primary); background: var(--soft); }
.entry-theme-buttons button:hover { background: var(--surface-subtle); }
.auth-intro { position: relative; isolation: isolate; }
.auth-intro::before {
  content: ""; position: absolute; inset: -80px -15% -80px 0; z-index: -1; pointer-events: none;
  background: url("./teal-ribbon.webp") no-repeat center / contain; opacity: .1;
}
.auth-panel { background: var(--card); color: var(--text); }
.site-footer { padding-bottom: 56px; }
.access-page { padding-bottom: 120px; }
.wordmark { letter-spacing: .025em; font-size: 21px; }
/* Theme changes affect editor chrome, never saved canvas colors or imported pages. */
#boardWorkspace .board-header,
#boardWorkspace .board-left-rail,
#boardWorkspace .board-subject-dock,
#boardWorkspace .board-zoom-controls,
#boardWorkspace .board-menu-panel,
#boardWorkspace .board-color-picker,
[data-theme="dark"] #boardWorkspace .board-header,
[data-theme="dark"] #boardWorkspace .board-left-rail,
[data-theme="dark"] #boardWorkspace .board-subject-dock,
[data-theme="dark"] #boardWorkspace .board-zoom-controls,
[data-theme="dark"] #boardWorkspace .board-menu-panel,
[data-theme="dark"] #boardWorkspace .board-color-picker {
  background: var(--card); color: var(--text); border-color: var(--line);
}
#boardWorkspace .board-icon-button, #boardWorkspace .board-menu-link,
#boardWorkspace .board-dropdown > summary, #boardWorkspace .board-menu-heading {
  color: var(--text); background-color: var(--card);
}
#boardWorkspace .board-icon-button.selected,
#boardWorkspace .favorite-btn.selected,
#boardWorkspace .board-subject-tabs button[aria-pressed="true"],
[data-theme="dark"] #boardWorkspace .board-icon-button.selected {
  color: var(--primary) !important; background: var(--soft) !important;
}
#boardWorkspace .board-icon-button:hover, #boardWorkspace .board-menu-link:hover {
  color: var(--primary); background-color: var(--soft);
}
#boardWorkspace #boardSaveState { color: var(--success); background: var(--studio-success-bg); }
#boardWorkspace #boardSaveState[data-state="error"] { color: var(--danger); background: var(--studio-danger-bg); }
@media (max-width: 820px) {
  .profile-pill, [data-theme="dark"] .profile-pill { padding: 6px; }
  body:not(.board-mode) .workspace-theme-control {
    display: block; position: fixed; left: 8px; bottom: calc(var(--mobile-dock-height, 4rem) + env(safe-area-inset-bottom) + 8px);
    z-index: 65; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  }
  body.student-mode .workspace-theme-control { bottom: max(10px, env(safe-area-inset-bottom)); }
  .entry-theme-control { left: 12px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .entry-theme-control > span { display: none; }
  .wordmark { font-size: 18px; }
  .studio-day::before { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="checkbox"]::before { transition: none; }
}
@media (pointer: coarse) {
  .workspace-theme-control > summary { width: 44px; height: 44px; }
  .entry-theme-buttons button { min-width: 44px; min-height: 44px; }
}
@media (forced-colors: active) {
  input[type="checkbox"] { appearance: auto !important; -webkit-appearance: auto !important; }
  input[type="checkbox"]::before { display: none; }
}
@media print {
  .workspace-theme-control, .entry-theme-control, .studio-day::before { display: none !important; }
}

/* Reference refinement, 26 October: the existing controls and layout are retained. */
:root { --control-line: #4e8790; --menu-surface: #ffffff; }
:root[data-theme="dark"] { --control-line: #397b87; --menu-surface: #092b34; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
.topbar h1 { letter-spacing: -.025em; }
.card, .auth-panel { border-radius: 12px; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .auth-panel {
  background: linear-gradient(135deg, #07252c, var(--card) 70%);
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .sidebar { background: #031b22; }
.sidebar .nav-btn { transition: background-color .14s ease, color .14s ease; }
.sidebar .nav-btn.active, [data-theme="dark"] .sidebar .nav-btn.active {
  box-shadow: inset 3px 0 0 var(--primary);
  background: var(--soft); color: var(--text);
}
.sidebar .nav-btn.active .nav-icon { color: var(--primary); }
.sidebar .nav-group { border-color: var(--line); }
.brand-name { letter-spacing: -.02em; }
.btn-primary, .primary-button {
  font-weight: 650; border: 1px solid transparent;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .primary-button { border-color: #64e0e5; }
:is(.btn-light, .btn-ghost, .small-btn, .icon-btn):hover:not(:disabled) {
  border-color: var(--control-line); background: var(--soft);
}
:is(.field input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
    .field select, .field textarea, .search, .input-field input, .input-field select) {
  background-color: var(--bg); border-color: var(--control-line);
}
:is(input, select, textarea):disabled { opacity: .6; }
.action-menu > div, .portal-more-menu, .time-popover, .subject-dialog-card,
.board-menu-panel, .board-color-picker, .board-icons .board-menu-panel,
.board-download-menu > div, .modal-card, [data-theme="dark"] .modal-card {
  background: var(--menu-surface); border-color: var(--control-line);
}
:is(.badge.success,.badge.warning,.badge.danger) { border: 1px solid currentColor; }
.studio-day {
  min-height: 148px; padding: 24px; margin-bottom: 24px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); gap: 20px;
}
.studio-day::before {
  inset: 0; border-radius: inherit;
  background-position: right 48%; background-size: auto 235%;
  opacity: var(--ribbon-opacity);
  mask-image: linear-gradient(90deg, transparent 22%, #000 74%);
}
.studio-day strong { font-size: 27px; line-height: 1.2; letter-spacing: -.025em; }
.studio-day small { margin-top: 12px; font-size: 14px; color: var(--muted); }
.studio-day-date {
  position: relative; align-self: flex-start; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--muted); font-size: 13px;
}
.dashboard-schedule .dashboard-lesson {
  padding: 16px; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-subtle);
}
.dashboard-schedule .dashboard-lesson:last-child { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dashboard-lesson .name-link { font-weight: 650; }
.dashboard-lesson .list-item-sub { color: var(--muted); }
.dashboard-finances .metric-value { font-weight: 700; letter-spacing: -.025em; }
.quick-link { text-align: left; }
.portal-hero {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.portal-nav { border: 1px solid var(--line); }
.portal-nav button.active { color: var(--primary); background: var(--soft); }
.auth-intro::before { opacity: .26; }
.auth-intro h1 { color: var(--text); }
.auth-panel { border-color: var(--control-line); }
.primary-button { color: var(--primary-ink); }
.password-toggle:hover { background: var(--soft); }
table thead th { background: var(--surface-subtle); color: var(--muted); }
table tbody tr:hover { background: var(--surface-subtle); }
#boardWorkspace .board-header { border-bottom-color: var(--line); }
#boardWorkspace .board-left-rail,
#boardWorkspace .board-zoom-controls { border-color: var(--control-line); }
/* The white drawing paper, stored ink, tool positions and all menus are untouched. */
@media (min-width: 821px) {
  body { font-size: 14px; }
  .topbar h1 { font-size: 28px; }
  .topbar p { font-size: 13px; }
  .brand-name { font-size: 19px; }
  .sidebar .nav-btn { font-size: 14px; }
  .card h2, .section-head h2 { font-size: 18px; }
  .dashboard-tools .quick-links { gap: 12px; }
  .dashboard-tools .quick-link, .dashboard-tools .quick-link:first-child {
    padding: 16px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface-subtle);
  }
  .dashboard-tools .quick-link:last-child { border-right: 1px solid var(--line); }
  .dashboard-tools .quick-link:hover { border-color: var(--primary); background: var(--soft); }
  .dashboard-finances .metric-value { font-size: 26px; }
}
@media (max-width: 820px) {
  .studio-day { min-height: 134px; padding: 20px; flex-wrap: wrap; gap: 16px; }
  .studio-day strong { font-size: 24px; }
  .studio-day small { font-size: 13px; max-width: 28ch; }
  .studio-day::before { opacity: .24; background-size: auto 160%; }
  .studio-day-date { font-size: 12px; padding: 4px 8px; }
  .dashboard-schedule .dashboard-lesson { padding: 12px; }
  .dashboard-schedule .dashboard-lesson:last-child { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar .nav-btn { transition: none; } }
@media (forced-colors: active) {
  .sidebar .nav-btn.active { outline: 1px solid Highlight; }
  .studio-day::before { display: none; }
}

/* Shared rhythm for equivalent workspace blocks and authentication forms. */
:root { --space-field: 8px; --space-control: 12px; --space-group: 16px; --space-section: 24px; }
.auth-form, .password-form { gap: var(--space-group); }
.input-field { gap: var(--space-field); }
.access-section { padding-block: var(--space-section); }
.access-section > p { margin-block: 0 var(--space-group); }
.access-section > p:last-child { margin-bottom: 0; }
.access-page h2 { margin-bottom: var(--space-group); }
.access-row { padding-block: var(--space-group); }
.share-link { margin-block: var(--space-group); }
body:not(.board-mode) .form-grid { gap: var(--space-group); }
body:not(.board-mode) .dashboard-layout, body:not(.board-mode) .dashboard-side { gap: var(--space-section); }
.dashboard-layout > .section, .dashboard-side > .section { margin-block: 0; }
@media (max-width: 820px) {
  .studio-day { padding: var(--space-group); margin-bottom: var(--space-group); }
  body:not(.board-mode) .dashboard-layout, body:not(.board-mode) .dashboard-side { gap: var(--space-group); }
}

/* Approved people/infinity logo. Transparent artwork works on both themes. */
.studio-brand-mark, [data-theme="dark"] .studio-brand-mark {
  width: 44px; height: 34px; border: 0; border-radius: 0; background: transparent;
}
.studio-brand-mark img { display: block; width: 44px; height: auto; }
.wordmark .brand-symbol { display: block; width: 52px; height: auto; flex-shrink: 0; }
@media (max-width: 700px) { .wordmark .brand-symbol { width: 44px; } }

@media (min-width: 821px) { .sidebar .brand { padding-inline: 0; gap: 8px; } }