/* Reversible engineering-desk skin. All rules are server-flag scoped.
 * Existing light/dark and the independent MkDocs oldschool layout are preserved.
 * Unslop methodology: Damir Sokolovsky (@heydamir), CC BY 4.0.
 */
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) {
  --bg: #111315;
  --surface: #191c20;
  --line: #343a42;
  --text: #eef0f2;
  --muted: #abb2bb;
  --blue: #9bc5f2;
  --lime: #c8ff5a;
  --ui-panel: #20242a;
  --ui-input: #14171b;
  --ui-soft: #252c34;
  --ui-code: #101317;
  --ui-on-accent: #17210a;
  background: var(--bg);
}
html[data-ui-design="new"][data-course-theme="light"]:not([data-course-layout="oldschool"]) {
  --bg: #f2f3f1;
  --surface: #ffffff;
  --line: #cbd0ca;
  --text: #222923;
  --muted: #59635b;
  --blue: #285f91;
  --lime: #4e7018;
  --ui-panel: #e9ede6;
  --ui-input: #f8faf6;
  --ui-soft: #e2e8df;
  --ui-code: #edf0e9;
  --ui-on-accent: #ffffff;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body {
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(button, input, select, textarea) {
  border-radius: 8px;
  font-weight: 500;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(h1, h2, h3, h4) {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(a, button) {
  transition-property: color, background-color, border-color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(a, button):hover {
  transform: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(b, strong) {
  font-weight: 600;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-header {
  background: var(--bg);
  border-color: var(--line);
  backdrop-filter: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-user > strong, .course-back-link, .course-header-actions a, .course-header-actions button, .course-user button) {
  font-weight: 500;
  font-size: 12px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-hero, .lesson-hero) {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-hero-grid, .login-grid, .login-main::after) {
  display: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.login-card h1, .course-hero h1, .lesson-hero h1) {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.login-card h1 em, .course-hero h1 em) {
  color: var(--text);
  font-style: normal;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.login-card > p, .course-hero p, .lesson-markdown, .login-side > p) {
  color: var(--muted);
  line-height: 1.75;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.login-form input, .admin-filters input, .admin-filters select, .admin-reply-form textarea, .admin-settings-form input:not([type="checkbox"]), .admin-settings-form select) {
  background: var(--ui-input);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body .button {
  min-height: 44px;
  padding: 12px 20px;
  background: var(--lime);
  color: var(--ui-on-accent);
  border: 1px solid var(--lime);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body .button:hover {
  filter: brightness(1.08);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.login-form label > span, .course-progress-card span, .course-season-number, .course-status, .lesson-position small, .lesson-meta span, .admin-thread-status, .admin-chat-side b, .admin-settings-card > div > span, .student-subscription-card > div > span) {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-progress-card, .student-subscription-card, .student-community-card, .student-oldschool-preference, .lesson-support, .lesson-homework, .admin-settings-card, .admin-user-card, .admin-user-detail, .admin-user-item, .login-terminal) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.student-community-card > div > span, .student-community-card p, .student-community-card small) {
  color: var(--muted);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-progress-card, .student-community-card) {
  padding: 24px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-season-head strong, .course-section-heading h2) {
  font-weight: 500;
  letter-spacing: -.02em;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-lesson {
  background: var(--surface);
  border-color: var(--line);
  padding-top: 16px;
  padding-bottom: 16px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-lesson[href]:hover {
  background: var(--ui-panel);
  box-shadow: inset 2px 0 var(--lime);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-lesson-copy strong {
  font-weight: 500;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-status.approved {
  background: var(--lime);
  color: var(--ui-on-accent);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.lesson-meta, .lesson-loading, .lesson-note, .lesson-markdown blockquote) {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.lesson-markdown pre, .lesson-markdown code, .terminal-body) {
  background: var(--ui-code);
  border-color: var(--line);
  color: var(--text);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .lesson-markdown pre code {
  background: transparent;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .lesson-markdown h2::before {
  color: var(--muted);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-inbox, .admin-chat-list, .admin-users-sidebar, .admin-lesson-tabs, .admin-thread, .admin-thread-head, .admin-thread-messages) {
  background: var(--bg);
  border-color: var(--line);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-inbox > header, .admin-filters, .admin-reply-form, .admin-settings-main > header, .admin-user-detail > header) {
  background: var(--surface);
  border-color: var(--line);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-chat-item, .admin-user-item, .admin-lesson-tabs button, .admin-mode-nav button) {
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
  font-weight: 500;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-chat-item:hover, .admin-user-item:hover, .admin-lesson-tabs button:hover, .admin-mode-nav button:hover) {
  background: var(--ui-panel);
  color: var(--text);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-chat-item.active, .admin-user-item.active, .admin-lesson-tabs button.active, .admin-mode-nav button.active) {
  background: var(--ui-soft);
  color: var(--text);
  border-color: var(--muted);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.admin-settings-main, .admin-users-main, .admin-payments-main, .admin-storage-main, .admin-activity-main, .admin-news-main, .admin-certificates-main) {
  background: var(--bg);
  color: var(--text);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-card {
  padding: 24px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-card h2 {
  margin-top: 8px;
  font-size: 24px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-card p {
  color: var(--muted);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-switch > span {
  background: var(--ui-soft);
  border-color: var(--line);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-switch input:checked + span::after {
  background: var(--ui-on-accent);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-switch input:checked + span {
  background: var(--lime);
  border-color: var(--lime);
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-switch input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
/* Shared chat, moderation, payment lists and tools keep their geometry and state colours. */
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-roadmap, .admin-payments-summary article, .admin-payments-layout > section, .admin-payments-layout > aside, .admin-news-form, .admin-news-list article, .admin-storage-card, .admin-storage-detail > article, .admin-storage-diagnostics, .activity-summary article, .activity-export, .activity-history, .activity-events, .education-document-modal > section, .education-document-form, .education-document-settings, .education-document-history article, .global-chat-dialog, .admin-student-workspace, .admin-global-readonly, .admin-pinned-note) {
  background: var(--surface);
  box-shadow: none;
  border-radius: 12px;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.global-chat-dialog > header, .education-document-modal > section > header, .lesson-chat-context, .student-chat-history-note, .admin-progress-seasons, .admin-progress-seasons button.active, .global-chat-compose-closed) {
  background: var(--ui-panel);
  border-color: var(--line);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(textarea, select, [contenteditable="true"], input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"])) {
  background: var(--ui-input);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.global-chat-button, .global-chat-form [type="submit"], .admin-reply-form [type="submit"], .admin-settings-form > footer button, .admin-profile-form > button, .education-document-actions button.primary, .admin-progress-table td button.approved) {
  background: var(--lime);
  color: var(--ui-on-accent);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.chat-emoji-panel, .chat-format-popover, .chat-message-markdown pre, .chat-message-markdown code:not(pre code), .chat-message blockquote, .chat-message-markdown blockquote, .admin-block-select-options) {
  background: var(--ui-code);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-settings-form + .admin-settings-form {
  margin-top: 24px;
}
/* Ancillary public pages keep their real content and layout, without decorative chrome. */
html[data-ui-design="new"] body:not(.course-body):not(.lf-unslop) {
  background: var(--bg);
  color: var(--text);
}
html[data-ui-design="new"] body:not(.course-body):not(.lf-unslop) :is(.header, .footer, .section) {
  background: var(--bg);
  border-color: var(--line);
  box-shadow: none;
}
html[data-ui-design="new"] body:not(.course-body):not(.lf-unslop) :is(h1, h2, h3) {
  font-weight: 500;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-nav-submenu {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 8px 24px #0003;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-page .admin-nav-group > summary {
  font-weight: 500;
}
html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-page :is(.admin-nav-group.is-active, .admin-nav-group[open]) > summary {
  background: var(--ui-panel);
  border-color: var(--line);
  color: var(--text);
}
@media (max-width: 1200px) {
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-page .course-nav {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-page .admin-mode-nav {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
  }
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .admin-header-meta {
    margin-left: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 900px) {
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-header-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) :is(.course-progress-card, .student-community-card, .admin-settings-card) {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-design="new"]:not([data-course-layout="oldschool"]) .course-body :is(a, button) {
    transition-duration: 0s;
  }
}