/*
 * Училище+ — Lights Out
 * A single palette for the whole product. Component declarations consume these
 * roles directly, with their original light values as fallbacks in styles.css.
 * Text roles never assign backgrounds. Do not add legacy dark override layers.
 */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-surface: #000000;
  --theme-raised: #16181c;
  --theme-hover: #202327;
  --theme-selected: #16181c;
  --theme-border: #2f3336;
  --theme-control-border: #536471;
  --theme-text: #e7e9ea;
  --theme-muted: #9ba1a6;
  --theme-subtle: #8b9298;
  --theme-accent: #1d9bf0;
  --theme-accent-hover: #49aff3;
  --theme-on-accent: #000000;
  --theme-success: #66d9a5;
  --theme-success-soft: #08291c;
  --theme-warning: #ffd166;
  --theme-warning-soft: #2b2208;
  --theme-danger: #ff8b98;
  --theme-danger-soft: #310d16;
  --theme-purple: #c1a5ff;
  --theme-purple-soft: #241731;
  --theme-overlay: rgba(91,112,131,.4);
  --theme-knob: #e7e9ea;
  --theme-shadow: none;
  --theme-elevation: 0 0 0 1px #2f3336, 0 10px 34px rgba(0,0,0,.65);
  --theme-focus-ring: 0 0 0 2px #000000, 0 0 0 4px #1d9bf0;
  --theme-decoration: none;
  background: var(--theme-surface);
  color: var(--theme-text);
}

/* A common foreground prevents user-agent button text from remaining black. */
html[data-theme="dark"] :where(body, button, input, textarea, select, option) {
  color: var(--theme-text);
}
html[data-theme="dark"] :where(body, #app, .app-shell, .page-area, .admin-shell, .admin-page, .admin-main, .admin-content) {
  background-color: var(--theme-surface);
}
html[data-theme="dark"] ::selection { background: #1d9bf0; color: #000; }
html[data-theme="dark"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}
html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--theme-muted);
  opacity: 1;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--theme-text);
  -webkit-box-shadow: 0 0 0 1000px var(--theme-raised) inset !important;
  caret-color: var(--theme-accent);
}
html[data-theme="dark"] :where(input, textarea, select) { caret-color: var(--theme-accent); }
html[data-theme="dark"] option { background: var(--theme-raised); }
html[data-theme="dark"] :where(button:disabled, input:disabled, select:disabled, textarea:disabled) { cursor: not-allowed; }

/* Flat timeline, neutral chrome and blue underline navigation. */
html[data-theme="dark"] :is(.sidebar, .admin-sidebar, .settings-sidebar, .mobile-bottom-nav) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :is(.topbar, .admin-topbar) {
  background: rgba(0,0,0,.9) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}
html[data-theme="dark"] :is(.sidebar-nav > a, .admin-sidebar nav > a, .admin-nav a, .settings-sidebar nav > a) {
  color: var(--theme-text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :is(.sidebar-nav > a, .admin-sidebar nav > a, .admin-nav a, .settings-sidebar nav > a):hover {
  background: var(--theme-hover) !important;
}
html[data-theme="dark"] :is(.sidebar-nav > a.active, .admin-sidebar nav > a.active, .admin-nav a.active, .settings-sidebar nav > a.active) {
  background: var(--theme-selected) !important;
  color: var(--theme-text) !important;
  font-weight: 800;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.top-search, .composer-launcher-main > button) {
  background: var(--theme-raised) !important;
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
  border-radius: 999px !important;
}
html[data-theme="dark"] :is(.notification-button, .user-menu) {
  background: transparent !important;
  color: var(--theme-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :is(.notification-button, .user-menu):hover,
html[data-theme="dark"] .user-menu.is-open { background: var(--theme-hover) !important; }
html[data-theme="dark"] :is(.feed-tabs, .profile-content-tabs) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="dark"] :is(.feed-tabs > a, .feed-tabs > button, .profile-content-tabs > a) {
  background: transparent !important;
  color: var(--theme-muted) !important;
}
html[data-theme="dark"] :is(.feed-tabs > a, .feed-tabs > button, .profile-content-tabs > a):hover { background: var(--theme-raised) !important; }
html[data-theme="dark"] :is(.feed-tabs > a.active, .feed-tabs > button.active, .profile-content-tabs > a.active) { color: var(--theme-text) !important; }
html[data-theme="dark"] :is(.feed-tabs > a.active, .feed-tabs > button.active, .profile-content-tabs > a.active)::after {
  background: var(--theme-accent) !important;
  height: 4px !important;
}
html[data-theme="dark"] :is(.post-card, .poll-feed-card) {
  background: var(--theme-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--theme-border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #feed-list {
  border-inline: 1px solid var(--theme-border);
}
html[data-theme="dark"] :is(.composer, .rail-card, .quote-card, .operator-feed-control, .profile-hero, .settings-panel-card) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .post-interactions { border-color: var(--theme-border) !important; }
html[data-theme="dark"] :is(.post-interactions button, .comment-actions button) { color: var(--theme-muted); }
html[data-theme="dark"] :is(.post-interactions button, .comment-actions button):hover { color: var(--theme-accent) !important; }
html[data-theme="dark"] :is(.post-interactions .save-button.active, .post-card.bookmarked .save-button) { color: var(--theme-warning) !important; }
html[data-theme="dark"] .post-interactions .save-button.active svg { fill: var(--theme-warning) !important; stroke: var(--theme-warning) !important; }
html[data-theme="dark"] .post-interactions .reaction-main.active { color: var(--theme-accent) !important; }
html[data-theme="dark"] .post-interactions .reaction-main.reaction-love { color: var(--theme-danger) !important; }
html[data-theme="dark"] .comment > .comment-content { background: transparent !important; }
html[data-theme="dark"] .comment-bubble {
  background: var(--theme-raised) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border);
  box-shadow: none !important;
}
html[data-theme="dark"] .comment-bubble p { color: var(--theme-text) !important; }
html[data-theme="dark"] .comment-reaction-summary { background: var(--theme-raised) !important; }

/* Buttons and real form controls retain semantic states and visible outlines. */
html[data-theme="dark"] :is(.primary-button, .landing-primary, .lp-primary, .crop-save, .composer-modal-submit) {
  background: var(--theme-accent) !important;
  color: var(--theme-on-accent) !important;
  border-color: var(--theme-accent) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :is(.primary-button, .landing-primary, .lp-primary, .crop-save, .composer-modal-submit):hover {
  background: var(--theme-accent-hover) !important;
}
html[data-theme="dark"] :is(.primary-button, .landing-primary, .lp-primary, .crop-save, .composer-modal-submit) :is(span, strong, .svg-icon) { color: inherit !important; }
html[data-theme="dark"] :is(.secondary-button, .search-follow, .audience-select, .branded-select) {
  color: var(--theme-text) !important;
  border-color: var(--theme-control-border) !important;
}
html[data-theme="dark"] :is(.danger-button) { background: var(--theme-danger) !important; color: #000 !important; }
html[data-theme="dark"] :is(.danger-soft, .danger-text, .text-danger, .post-actions-menu .danger, .profile-dropdown-logout) { color: var(--theme-danger) !important; }
html[data-theme="dark"] :is(.notice, .pending-access, .registration-school-note, .registration-privacy-summary) {
  background: var(--theme-raised) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :is(.notice.warning, .notice.pending-access) { border-left-color: var(--theme-warning) !important; }
html[data-theme="dark"] :is(.notice.error, .form-message.error) { color: var(--theme-danger) !important; }
html[data-theme="dark"] :is(.theme-switch, .settings-toggle, .toggle-switch) { background: var(--theme-control-border) !important; }
html[data-theme="dark"] :is(.theme-switch.on, .settings-toggle.on, .toggle-switch.on) { background: var(--theme-accent) !important; }
html[data-theme="dark"] :is(.theme-switch > b, .settings-toggle > b) { background: var(--theme-knob) !important; }
html[data-theme="dark"] input[type="checkbox"]:checked { background: var(--theme-accent) !important; border-color: var(--theme-accent) !important; }
html[data-theme="dark"] input[type="checkbox"]:checked::before { border-color: var(--theme-on-accent) !important; }
html[data-theme="dark"] input[type="range"] { accent-color: var(--theme-accent); }

/* Neutral brand panels. Real uploaded covers keep their photographs. */
html[data-theme="dark"] :is(.welcome-panel, .sidebar-promo, .filter-rework-hero, .school-management-hero, .profile-settings-hero, .privacy-clean-header, .poll-builder-head, .poll-builder-hero, .lp-hero-shell, .lp-school-section, .lp-safety-card) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .welcome-panel { border: 1px solid var(--theme-border) !important; }
html[data-theme="dark"] .welcome-panel blockquote { color: var(--theme-muted) !important; }
html[data-theme="dark"] :is(.welcome-panel, .sidebar-promo, .lp-hero-shell)::before,
html[data-theme="dark"] :is(.welcome-panel, .sidebar-promo, .lp-hero-shell)::after { background: none !important; border-color: transparent !important; }
html[data-theme="dark"] .welcome-panel.has-school-cover,
html[data-theme="dark"] .sidebar-promo.has-school-cover {
  background: linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.65)), var(--school-cover) center/cover !important;
}
html[data-theme="dark"] :is(.auth-surface, .public-surface, .auth-stage-login, .auth-main, .auth-card, .register-surface, .landing-page, .landing-pro, .lp-page, .legal-page, .startup-fallback, .startup-failure) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .auth-visual { background: #16181c !important; }
html[data-theme="dark"] .auth-visual::after { background: linear-gradient(180deg,transparent,#000) !important; }
html[data-theme="dark"] :is(.brand-mark-image, .brand-logo-image, .startup-brand-image, .startup-full-brand-image) { filter: brightness(0) invert(1) !important; }
html[data-theme="dark"] :is(.sidebar-logo-link, .admin-logo-link, .mobile-brand-image-wrap) { background: transparent !important; box-shadow: none !important; }

/* Menus sit above the timeline with a border; nested text remains unboxed. */
html[data-theme="dark"] :is(.modal-card, .profile-dropdown, .popover, .notification-popover, .post-actions-menu, .profile-more-menu, .reaction-picker, .badge-info-popover, .image-crop-card, .cookie-notice, .toast) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  box-shadow: var(--theme-elevation) !important;
}
html[data-theme="dark"] :is(.modal-backdrop, .image-crop-backdrop, .sidebar-scrim.show) { background: var(--theme-overlay) !important; }
html[data-theme="dark"] :is(.post-composer-text, .post-composer-add-row, .composer-audience-static) { color: var(--theme-text) !important; }
html[data-theme="dark"] .post-composer-add-row { background: var(--theme-raised) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] .notification-popover-item.unread { background: #031e30 !important; }
html[data-theme="dark"] :is(.notification-badge, .nav-count, .unread-badge) { background: var(--theme-accent) !important; color: #000 !important; }

/* Filled controls use a contrasting label, including progress and search. */
html[data-theme="dark"] :is(.sidebar-promo a, .segmented button.active, .registration-progress > span.active b, .registration-progress > span.done b, .poll-wizard-progress > span.active b) { color: var(--theme-on-accent) !important; }
html[data-theme="dark"] .avatar-fallback { background: var(--theme-raised) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] :is(.privacy-clean-switch, .compact-switch > span) { background: var(--theme-control-border) !important; }
html[data-theme="dark"] :is(.privacy-clean-switch i, .compact-switch > span::before, .compact-switch > span::after) { background: var(--theme-knob) !important; }
html[data-theme="dark"] .privacy-toggle-row.is-on .privacy-clean-switch,
html[data-theme="dark"] .compact-switch input:checked + span { background: var(--theme-accent) !important; }
html[data-theme="dark"] .privacy-toggle-row input:focus-visible + .privacy-clean-switch { outline: 2px solid var(--theme-accent); outline-offset: 3px; }

/* Readable social UI type: secondary information remains legible at phone size. */
html[data-theme="dark"] :is(.post-author strong, .user-menu strong, .school-mini-link strong, .school-list-row strong, .profile-dropdown strong) { font-size: 14px !important; }
html[data-theme="dark"] :is(.post-author small, .user-menu small, .school-mini-link small, .school-list-row small, .composer-launcher-hint, .post-meta, .profile-dropdown small) { font-size: 12px !important; color: var(--theme-muted) !important; }
html[data-theme="dark"] :is(.post-interactions button, .feed-tabs > a, .composer-launcher-actions button) { font-size: 14px !important; }
html[data-theme="dark"] .comment-bubble strong { font-size: 13px !important; }
html[data-theme="dark"] .comment-bubble p { font-size: 14px !important; line-height: 1.5 !important; }
html[data-theme="dark"] .comment-actions :is(button, small) { font-size: 11px !important; }
html[data-theme="dark"] .privacy-row-copy strong { font-size: 14px !important; }
html[data-theme="dark"] :is(.privacy-row-copy small, .privacy-clean-section-title p, .settings-title p) { font-size: 12px !important; line-height: 1.45 !important; }
html[data-theme="dark"] .composer-launcher-actions .svg-icon { color: var(--theme-accent) !important; }
html[data-theme="dark"] .welcome-panel {
  display: block !important;
  min-height: 0 !important;
  padding: 24px !important;
}
html[data-theme="dark"] .welcome-copy { width: 100% !important; max-width: none !important; }
html[data-theme="dark"] .welcome-copy h1 { max-width: none !important; font-size: 27px !important; }
html[data-theme="dark"] .welcome-copy > p { max-width: none !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--theme-muted) !important; }
html[data-theme="dark"] .welcome-stats { gap: 0 !important; }
html[data-theme="dark"] .welcome-stats > span { background: transparent !important; border: 0 !important; border-right: 1px solid var(--theme-border) !important; border-radius: 0 !important; min-width: 0 !important; padding: 0 18px !important; }
html[data-theme="dark"] .welcome-stats > span:first-child { padding-left: 0 !important; }
html[data-theme="dark"] .welcome-stats > span:last-child { border-right: 0 !important; }
html[data-theme="dark"] .welcome-stats small { font-size: 11px !important; color: var(--theme-muted) !important; }
html[data-theme="dark"] .welcome-panel blockquote { position: static !important; float: none !important; inset: auto !important; transform: none !important; display: block !important; width: auto !important; max-width: none !important; margin: 16px 0 0 !important; font-size: 13px !important; text-align: left !important; }
html[data-theme="dark"] .welcome-panel blockquote br { display: none; }
html[data-theme="dark"] .rail-heading { font-size: 17px !important; line-height: 1.3 !important; }
html[data-theme="dark"] .rail-heading > a { font-size: 11px !important; white-space: nowrap; }
html[data-theme="dark"] :is(.admin-section, .poll-builder-card, .auth-card) :is(label > span:first-child, .field > span, .poll-question-label, .poll-question-kind) { font-size: 12px !important; }
html[data-theme="dark"] :is(.admin-user-card-person strong, .admin-user-card-facts strong, .admin-section-title p, .poll-builder-head p, .role-hierarchy p, .role-hierarchy small) { font-size: 13px !important; line-height: 1.45 !important; }
html[data-theme="dark"] :is(.admin-user-card-person small, .admin-user-card-facts small, .poll-builder-toolbar small, .poll-builder-destinations small, .poll-builder-question small) { font-size: 11px !important; line-height: 1.4 !important; }
html[data-theme="dark"] .admin-user-card-facts { gap: 14px !important; }
html[data-theme="dark"] .admin-user-card-facts > :is(div, span) { min-width: 0; overflow-wrap: anywhere; }
html[data-theme="dark"] .admin-user-card-facts strong { white-space: normal; }
@media (min-width: 1181px) {
  html[data-theme="dark"] .admin-user-card { grid-template-columns: minmax(180px,1fr) minmax(390px,1.4fr) auto auto; }
}
html[data-theme="dark"] :is(.auth-form input, .auth-form select, .auth-card button) { font-size: 14px !important; }
@media (min-width: 1181px) {
  html[data-theme="dark"] .content-grid.with-right { grid-template-columns: minmax(0,1fr) 330px !important; }
}
@media (min-width: 901px) {
  html[data-theme="dark"] .topbar .mobile-menu { display: none !important; }
}

/* Both theme previews show their actual palette, regardless of active theme. */
.theme-choice [data-theme-choice="dark"]::before { background: linear-gradient(#16181c 0 18px, #000 18px 100%) !important; border-color: #2f3336 !important; }
.theme-choice [data-theme-choice="light"]::before { background: linear-gradient(#fff 0 18px, #f4f8fd 18px 100%) !important; }
html[data-theme="dark"] .theme-choice button.active { border-color: var(--theme-accent) !important; box-shadow: 0 0 0 1px var(--theme-accent) !important; }

@media (max-width: 760px) {
  html[data-theme="dark"] #feed-list { border-inline: 0; }
  html[data-theme="dark"] .post-card { padding-inline: 14px !important; }
  html[data-theme="dark"] .mobile-bottom-nav { border-top: 1px solid var(--theme-border) !important; }
  html[data-theme="dark"] .welcome-panel { padding: 16px !important; }
  html[data-theme="dark"] .welcome-copy h1 { font-size: 20px !important; }
  html[data-theme="dark"] .welcome-copy > p { font-size: 12px !important; }
  html[data-theme="dark"] .reference-feed-tabs { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; overflow: visible !important; }
  html[data-theme="dark"] .reference-feed-tabs.platform-tabs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html[data-theme="dark"] .reference-feed-tabs > a { padding: 12px 5px !important; min-width: 0 !important; gap: 4px !important; font-size: 11px !important; white-space: normal !important; text-align: center !important; }
  html[data-theme="dark"] .reference-feed-tabs > a .svg-icon { width: 17px !important; height: 17px !important; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] *, html[data-theme="dark"] *::before, html[data-theme="dark"] *::after { scroll-behavior: auto !important; }
}