.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-dim);
  font: 700 11.5px/1 var(--sans, sans-serif);
}

.theme-picker select {
  min-height: 44px;
  max-width: 112px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
}

.theme-picker-login {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 10;
}

html[data-theme="light"] {
  --bg:#ffffff;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --surface-3:#f2f2f2;
  --border:#767676;
  --border-strong:#000000;
  --text:#000000;
  --text-dim:#222222;
  /* Экран входа держит СВОЙ набор переменных и зовёт приглушённый текст `--dim`,
     а не `--text-dim`, как остальное приложение. Без этой строки подпись на
     логине оставалась бы светло-серой по белому. */
  --dim:#222222;
  --text-mute:#4a4a4a;
  --accent:#000000;
  --accent-dim:#ffffff;
  --accent-line:#000000;
  --work:#000000;
  --work-dim:#ffffff;
  --ready:#000000;
  --ready-dim:#ffffff;
  --off:#4a4a4a;
  --off-dim:#ffffff;
  --warn:#000000;
  --warn-dim:#ffffff;
  --plan:#000000;
  --plan-dim:#ffffff;
  --done:#000000;
  --done-dim:#ffffff;
  --seg-empty:#ffffff;
  --fail:#000000;
  --fail-dim:#ffffff;
  --term-bg:#ffffff;
  --article-bg:#ffffff;
  --article-panel:#ffffff;
  --article-text:#000000;
  --article-dim:#4a4a4a;
  --article-rule:#767676;
  --quote-accent:#000000;
  --quote-bg:#ffffff;
  --hairline:#767676;
  --ring-focus:0 0 0 2px #000000;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body[data-v="office"],
html[data-theme="light"] body[data-v="tasks"],
html[data-theme="light"] body[data-v="chat"],
html[data-theme="light"] body[data-v="server"],
html[data-theme="light"] .app,
html[data-theme="light"] .content,
html[data-theme="light"] .view {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html[data-theme="light"],
html[data-theme="light"]::before,
html[data-theme="light"]::after,
html[data-theme="light"] body,
html[data-theme="light"] body::before,
html[data-theme="light"] body::after,
html[data-theme="light"] body *,
html[data-theme="light"] body *::before,
html[data-theme="light"] body *::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  scroll-behavior: auto !important;
}

html[data-theme="light"] body *,
html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] a {
  color: #000000 !important;
}

html[data-theme="light"] a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .sub,
html[data-theme="light"] .title small,
html[data-theme="light"] .live,
html[data-theme="light"] .rl,
html[data-theme="light"] .task,
html[data-theme="light"] .meta,
html[data-theme="light"] .mt,
html[data-theme="light"] .dialog-search-help,
html[data-theme="light"] .dialog-search-state,
html[data-theme="light"] .article-heading p,
html[data-theme="light"] .server-health,
html[data-theme="light"] .server-loading {
  color: #4a4a4a !important;
}

html[data-theme="light"] .appbar,
html[data-theme="light"] .card,
html[data-theme="light"] .tsum,
html[data-theme="light"] .tsec,
html[data-theme="light"] .trow,
html[data-theme="light"] .threadwrap,
html[data-theme="light"] .threadbar,
html[data-theme="light"] .stream,
html[data-theme="light"] .composer,
html[data-theme="light"] .serverbar,
html[data-theme="light"] .serverstage,
html[data-theme="light"] .servercanvas,
html[data-theme="light"] .serverstage iframe,
html[data-theme="light"] .server-loading,
html[data-theme="light"] .dialog-search,
html[data-theme="light"] .dialog-search-panel,
html[data-theme="light"] .dialog-search-head,
html[data-theme="light"] .dialog-search-results,
html[data-theme="light"] .article-view,
html[data-theme="light"] .article-panel,
html[data-theme="light"] .article-header,
html[data-theme="light"] .article-tools,
html[data-theme="light"] .article-content,
html[data-theme="light"] .article-fallback,
html[data-theme="light"] .attmenu,
html[data-theme="light"] .attmenu-card,
html[data-theme="light"] .attprev,
html[data-theme="light"] .attprev-card,
html[data-theme="light"] .lightbox,
html[data-theme="light"] .login-card {
  background-color: #ffffff !important;
  border-color: #767676 !important;
}

html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .schip,
html[data-theme="light"] .backend-opt,
html[data-theme="light"] .server-tab,
html[data-theme="light"] .server-icon,
html[data-theme="light"] .dialog-search-mode,
html[data-theme="light"] .dialog-search-result,
html[data-theme="light"] .article-action,
html[data-theme="light"] .article-search,
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

html[data-theme="light"] .login-card button,
html[data-theme="light"] .dialog-search-submit,
html[data-theme="light"] .ap-btns button,
html[data-theme="light"] .attmenu-card button {
  border: 1px solid #000000 !important;
  border-radius: 8px !important;
  min-height: 44px !important;
}

html[data-theme="light"] button:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] [tabindex]:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

html[data-theme="light"] .card {
  border: 1px solid #767676 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .card::before,
html[data-theme="light"] .i-work,
html[data-theme="light"] .i-ready,
html[data-theme="light"] .i-off,
html[data-theme="light"] .sd.work,
html[data-theme="light"] .sd.ready,
html[data-theme="light"] .backend-dot,
html[data-theme="light"] .live i,
html[data-theme="light"] .recdot {
  background-color: #000000 !important;
}

html[data-theme="light"] .sd.off {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
}

html[data-theme="light"] .schip.on,
html[data-theme="light"] .backend-opt.on,
html[data-theme="light"] .server-tab.on,
html[data-theme="light"] .dialog-search-mode[aria-pressed="true"] {
  background-color: #ffffff !important;
  border: 2px double #000000 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .msg.out .bubble {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

html[data-theme="light"] .msg.in .bubble,
html[data-theme="light"] .msg.sys .bubble {
  background-color: #ffffff !important;
  border: 1px solid #767676 !important;
  color: #000000 !important;
}

html[data-theme="light"] .msg.push-target .bubble {
  outline: 3px double #000000 !important;
  outline-offset: 2px !important;
}

html[data-theme="light"] .msg .quote,
html[data-theme="light"] blockquote {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

html[data-theme="light"] .msg .voice {
  --voice-fill:#000000;
  --voice-rail:#767676;
}

html[data-theme="light"] .msg .vseek::-webkit-slider-runnable-track,
html[data-theme="light"] .msg .vseek::-moz-range-track,
html[data-theme="light"] .msg .vseek::-moz-range-progress {
  background-color: #000000 !important;
}

html[data-theme="light"] .msg .vseek::-webkit-slider-thumb,
html[data-theme="light"] .msg .vseek::-moz-range-thumb {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
}

html[data-theme="light"] .composer .send,
html[data-theme="light"] .composer .iconbtn,
html[data-theme="light"] .msg .vplay {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
}

html[data-theme="light"] .notifbanner,
html[data-theme="light"] .pushbar,
html[data-theme="light"] .replybar,
html[data-theme="light"] .recbar,
html[data-theme="light"] .toast,
html[data-theme="light"] .livepanel,
html[data-theme="light"] .recipients,
html[data-theme="light"] .media-panel {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

html[data-theme="light"] .logo {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
}

html[data-theme="light"] .logo i {
  background-color: #000000 !important;
}

html[data-theme="light"] .err,
html[data-theme="light"] .failtag {
  color: #000000 !important;
  border-bottom: 2px dashed #000000 !important;
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 700px) {
  .theme-picker > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .theme-picker select {
    max-width: 104px;
  }
}

/* --- Дошито при переносе с v87 на v101 -------------------------------------
   За десять дней во фронте появились переменные и правила, о которых светлый
   блок ветки 1.6 не знал. Найдено аудитом каскада (evidence/mode_cascade_audit.py),
   а не глазами: пузыри сообщений и три новых элемента оставались тёмными, а
   `.pb-on`/`.sched-go` красили почти чёрный текст поверх чёрной в этом режиме
   кнопки — то есть были нечитаемы, а не просто некрасивы. */
html[data-theme="light"] {
  --in-bubble:#f2f2f2;
  --out-grad:linear-gradient(180deg,#e4e4e4,#dcdcdc);
}

html[data-theme="light"] .pb-on,
html[data-theme="light"] .sched-go {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .pin-cnt {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .sched-when {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  color-scheme: light !important;
}