/*
  Тема «Ретро» (ADR-0054, ui/standard.md).

  Вторая тема — не перекраска, а облегчение по вычислениям. Значения ролей
  взяты из измеренного образца владельца (предложение
  product-contour/auth-and-light-themes-proposal.md, раздел 4.1): бумага и
  чернила, три шрифтовые роли, линии вместо рамок и теней, состояния инверсией
  и штриховкой, точки перестроения 900 и 600 точек.

  Обязательное условие темы (ADR-0054, п. 5): ноль теней, ноль размытий, ноль
  градиентов, ноль анимаций на постоянном цикле. Переходы только по
  background, color и opacity. Поэтому тема не задаёт «похожие» эффекты, а
  обнуляет тяжёлые приёмы полной темы и заменяет их линиями и фоном.

  Файл подключается после dashboard.css и workarea.css: тема ложится
  переменными и переопределениями на общую разметку. Разметка и поведение
  при этом не дублируются.
*/

/* ====== Значения ролей ======
   Палитра и шрифтовые роли те же, что в стандарте: два опорных цвета
   (бумага и чернила) и производные оттенки линий и состояний. Новых ролей не
   заводится. */
:root[data-theme="retro"]{
  --bg:#f2f1ee;
  --paper:#f2f1ee;
  --ink:#16181c;
  --ink-2:#3b4048;
  /* --muted затемнён с #71767e (контраст 4,04) до #62676e: на бумаге #f2f1ee
     прежнее значение не проходило порог 4,5 для мелкого кегля 9,5–10 пт
     (нарушение color-contrast, серьёзно). Новое значение даёт 5,05 на бумаге и
     не ниже 4,53 на фонах наведения (#e7e5e0, #e9e8e4). Роль та же, состав
     элементов тот же: меняется только значение роли, как и требует раздел 8.4
     предложения product-contour/ui-domain-proposal.md. */
  --muted:#62676e;
  --muted-2:#9aa0a8;
  --line:#d2d4d7;
  --line-2:#16181c;
  --card-bg:#f2f1ee;
  --hover:#e7e5e0;
  --hover-2:#e9e8e4;
  --bar:#c3c6ca;
  --font-display:Georgia,"Times New Roman",Times,serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --gold:#16181c;
  --gold-2:#16181c;
  --cyan:#3b4048;
  --cyan-2:#16181c;
  --green:#16181c;
  --red:#16181c;
  --amber:#3b4048;
  --gold-glow:transparent;
}

/* ====== Обнуление тяжёлых приёмов полной темы ======
   Эти приёмы измерены в полной теме (раздел 4.1.7 предложения): 37 теней,
   48 градиентов, размытия, свечения, 29 анимаций, 40 скруглений и 22
   перехода. В облегчённой теме их ноль. Правило ниже гарантирует ноль
   независимо от того, какие объявления остались в подключаемых файлах: тема
   не обязана переписывать каждый селектор полной темы поимённо. */
:root[data-theme="retro"] *,
:root[data-theme="retro"] *::before,
:root[data-theme="retro"] *::after{
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  animation:none !important;
  border-radius:0 !important;
  background-image:none !important;
  transition-property:background-color,color,opacity !important;
  transition-duration:.13s !important;
  transition-timing-function:linear !important;
}
:root[data-theme="retro"] *{
  transition-delay:0s !important;
}

/* Анимации постоянного цикла и объёмная сцена в облегчённой теме не
   участвуют вовсе: непрерывной перерисовки нет. */
:root[data-theme="retro"] .stars,
:root[data-theme="retro"] .stars::after,
:root[data-theme="retro"] .rays,
:root[data-theme="retro"] .halo,
:root[data-theme="retro"] .halo.outer,
:root[data-theme="retro"] .rings{
  display:none !important;
}

/* ====== Основа страницы ====== */
:root[data-theme="retro"] body{
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:auto;
}
:root[data-theme="retro"] .stage{
  background:var(--paper);
}
:root[data-theme="retro"] .scene.dim,
:root[data-theme="retro"] .wa-scene.dim{
  transform:none;
  opacity:.42;
  filter:none;
}

/* ====== Голова ======
   Двойная линия снизу — приём образца (3px double чернилами). */
:root[data-theme="retro"] .head{
  border-bottom:3px double var(--line-2);
  padding-bottom:12px;
}
:root[data-theme="retro"] .brand .mini{
  color:var(--muted);
  letter-spacing:4px;
}
:root[data-theme="retro"] .brand .logo{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--ink);
  color:var(--ink);
}
:root[data-theme="retro"] .brand .sub{
  color:var(--ink-2);
}
:root[data-theme="retro"] .brand .line{
  background:var(--line-2);
  height:1px;
  width:56px;
}
:root[data-theme="retro"] .head-note{
  color:var(--muted);
}

/* ====== Состояния: инверсия, штриховка, утолщение ====== */
:root[data-theme="retro"] .state{
  background:var(--paper);
  border:1px solid var(--line-2);
  padding:8px 12px;
}
:root[data-theme="retro"] .state .dot,
:root[data-theme="retro"] .state.err .dot,
:root[data-theme="retro"] .state.wait .dot,
:root[data-theme="retro"] .state.live.off .dot,
:root[data-theme="retro"] .state.live.on .dot,
:root[data-theme="retro"] .state.live.pending .dot{
  width:8px;
  height:8px;
  border-radius:0;
  background:var(--ink);
}
:root[data-theme="retro"] .state-text{
  color:var(--ink);
}
:root[data-theme="retro"] .state-sub{
  color:var(--muted);
}
/* Состояние «норма» — инверсия: чернильный фон, бумажный текст. */
:root[data-theme="retro"] .state.ok,
:root[data-theme="retro"] .state.live.on{
  background:var(--ink);
}
:root[data-theme="retro"] .state.ok .state-text,
:root[data-theme="retro"] .state.live.on .state-text{
  color:var(--paper);
}
:root[data-theme="retro"] .state.ok .state-sub,
:root[data-theme="retro"] .state.live.on .state-sub{
  color:var(--line);
}
:root[data-theme="retro"] .state.ok .dot,
:root[data-theme="retro"] .state.live.on .dot{
  background:var(--paper);
}
/* Состояние «внимание» — штриховая рамка. */
:root[data-theme="retro"] .state.wait,
:root[data-theme="retro"] .state.live.pending{
  border-style:dashed;
  border-color:var(--muted);
}
/* Состояние «отказ» — рамка с утолщением слева. */
:root[data-theme="retro"] .state.err,
:root[data-theme="retro"] .state.live.off{
  border-left:4px solid var(--ink);
}

/* ====== Полоса показателей: сетка линиями ======
   Приём образца: линии между ячейками — не рамки на каждой ячейке, а фон
   зазора между ними. */
:root[data-theme="retro"] .summary{
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
:root[data-theme="retro"] .skpi{
  background:var(--paper);
  border:0;
}
:root[data-theme="retro"] .skpi .lbl,
:root[data-theme="retro"] .skpi .sub{
  color:var(--muted);
}
:root[data-theme="retro"] .skpi .val{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  background:none;
}

/* ====== Ядро сцены ======
   Объёмная сцена с кольцами и лучами в облегчённой теме заменяется плоской
   подписью: дорогая отрисовка не участвует. */
:root[data-theme="retro"] .core-text .label,
:root[data-theme="retro"] .core-text .subtitle{
  color:var(--muted);
}
:root[data-theme="retro"] .core-text .title{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  background:none;
}
:root[data-theme="retro"] .core-text .desc,
:root[data-theme="retro"] .core-text .desc b{
  color:var(--ink-2);
}

/* ====== Карточки-входы: линии вместо карточек с тенями ====== */
:root[data-theme="retro"] .entry{
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px 12px 9px;
  opacity:1;
}
:root[data-theme="retro"] .entry::before,
:root[data-theme="retro"] .entry::after{
  border-color:var(--line-2);
}
:root[data-theme="retro"] .entry:hover,
:root[data-theme="retro"] .entry:focus-visible{
  background:var(--hover);
  border-color:var(--line-2);
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
:root[data-theme="retro"] .entry:hover::before,
:root[data-theme="retro"] .entry:hover::after,
:root[data-theme="retro"] .entry:focus-visible::before,
:root[data-theme="retro"] .entry:focus-visible::after{
  border-color:var(--ink);
}
:root[data-theme="retro"] .entry .num{
  color:var(--muted);
}
:root[data-theme="retro"] .entry .icon{
  background:var(--paper);
  border:1px solid var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .entry:hover .icon{
  color:var(--paper);
  background:var(--ink);
}
:root[data-theme="retro"] .entry .title{
  color:var(--ink);
}
:root[data-theme="retro"] .entry .hint,
:root[data-theme="retro"] .entry .body{
  color:var(--ink-2);
}
:root[data-theme="retro"] .entry .foot{
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
:root[data-theme="retro"] .entry .foot .arr,
:root[data-theme="retro"] .entry:hover .foot .arr{
  color:var(--ink);
  transform:none;
}

/* ====== Подвал и нижняя полоса ====== */
:root[data-theme="retro"] .foot-bar{
  border-top:3px double var(--line-2);
  color:var(--muted);
}
:root[data-theme="retro"] .foot-bar b{
  color:var(--ink);
}
:root[data-theme="retro"] .band-note{
  color:var(--muted);
}
:root[data-theme="retro"] .launch-wrap .ready{
  color:var(--ink-2);
}
:root[data-theme="retro"] .launch-wrap .ready::before,
:root[data-theme="retro"] .launch-wrap .ready::after{
  background:var(--line-2);
  opacity:1;
}
:root[data-theme="retro"] .launch{
  background:var(--paper);
  border:1px solid var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .launch::before,
:root[data-theme="retro"] .launch::after{
  border-color:var(--ink);
}
:root[data-theme="retro"] .launch:hover,
:root[data-theme="retro"] .launch:focus-visible{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  outline:none;
}
:root[data-theme="retro"] .launch:hover .arrow{
  color:var(--paper);
  transform:none;
}

/* ====== Окно подробностей ====== */
:root[data-theme="retro"] .overlay{
  background:rgba(22,24,28,.55);
}
:root[data-theme="retro"] .shell{
  background:var(--paper);
  border:1px solid var(--line-2);
  transform:none;
}
:root[data-theme="retro"] .shell::before,
:root[data-theme="retro"] .shell::after{
  border-color:var(--ink);
}
:root[data-theme="retro"] .shell-head{
  background:var(--paper);
  border-bottom:3px double var(--line-2);
}
:root[data-theme="retro"] .back{
  border:1px solid var(--line-2);
  color:var(--ink-2);
}
:root[data-theme="retro"] .back:hover,
:root[data-theme="retro"] .back:focus-visible{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  outline:none;
}
:root[data-theme="retro"] .shell-head .h-lbl,
:root[data-theme="retro"] .shell-head .h-status{
  color:var(--muted);
}
:root[data-theme="retro"] .shell-head .h-name{
  color:var(--ink);
}
:root[data-theme="retro"] .shell-head .h-status .dot{
  background:var(--ink);
  border-radius:0;
}
:root[data-theme="retro"] .section.active{
  animation:none;
}

/* ====== Панели разделов ====== */
:root[data-theme="retro"] .opanel,
:root[data-theme="retro"] .work-panel{
  background:var(--paper);
  border:1px solid var(--line);
}
:root[data-theme="retro"] .opanel::before,
:root[data-theme="retro"] .opanel::after,
:root[data-theme="retro"] .work-panel::before,
:root[data-theme="retro"] .work-panel::after{
  border-color:var(--line-2);
}
:root[data-theme="retro"] .opanel h3,
:root[data-theme="retro"] .work-panel h3{
  color:var(--ink);
}
:root[data-theme="retro"] .opanel h3::before{
  background:var(--line-2);
  border-radius:0;
}
:root[data-theme="retro"] .opanel .hint,
:root[data-theme="retro"] .work-panel .wp-show,
:root[data-theme="retro"] .work-panel .wp-src,
:root[data-theme="retro"] .work-panel .wp-code{
  color:var(--ink-2);
}
:root[data-theme="retro"] .work-panels{
  gap:1px;
  background:var(--line);
}

/* ====== Крупные показатели: состояния линией и инверсией ====== */
:root[data-theme="retro"] .okpi .lbl,
:root[data-theme="retro"] .okpi .sub{
  color:var(--muted);
}
:root[data-theme="retro"] .okpi .val,
:root[data-theme="retro"] .okpi.ok .val,
:root[data-theme="retro"] .okpi.warn .val,
:root[data-theme="retro"] .okpi.err .val,
:root[data-theme="retro"] .okpi.info .val,
:root[data-theme="retro"] .okpi.gold .val{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  background:none;
}
/* «Норма» — инверсия, «внимание» — штриховая рамка, «отказ» — утолщение. */
:root[data-theme="retro"] .okpi.ok{
  background:var(--ink);
}
:root[data-theme="retro"] .okpi.ok .lbl,
:root[data-theme="retro"] .okpi.ok .sub,
:root[data-theme="retro"] .okpi.ok .val{
  color:var(--paper);
  -webkit-text-fill-color:var(--paper);
}
:root[data-theme="retro"] .okpi.warn{
  border-style:dashed;
  border-color:var(--muted);
}
:root[data-theme="retro"] .okpi.err{
  border-left:4px solid var(--ink);
}

/* ====== Метки ====== */
:root[data-theme="retro"] .tag,
:root[data-theme="retro"] .tag.ok,
:root[data-theme="retro"] .tag.warn,
:root[data-theme="retro"] .tag.err,
:root[data-theme="retro"] .tag.info,
:root[data-theme="retro"] .tag.gold{
  background:none;
  border:1px solid var(--line);
  color:var(--muted);
}
:root[data-theme="retro"] .tag::before{
  background:currentColor;
  border-radius:0;
}
:root[data-theme="retro"] .tag.ok{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
:root[data-theme="retro"] .tag.warn{
  border-style:dashed;
  border-color:var(--muted);
  color:var(--ink-2);
}
:root[data-theme="retro"] .tag.err{
  border-color:var(--ink);
  border-left:4px solid var(--ink);
  color:var(--ink);
}
:root[data-theme="retro"] .tag.info{
  border-color:var(--line);
  color:var(--ink-2);
}

/* ====== Таблица ====== */
:root[data-theme="retro"] .otable th,
:root[data-theme="retro"] .otable td{
  border-bottom:1px solid var(--line);
}
:root[data-theme="retro"] .otable th{
  background:var(--paper);
  color:var(--muted);
  border-bottom:1.5px solid var(--ink);
}
:root[data-theme="retro"] .otable th:hover{
  color:var(--ink);
}
:root[data-theme="retro"] .otable th .dir{
  color:var(--ink);
}
:root[data-theme="retro"] .otable tbody tr:hover{
  background:var(--hover-2);
}
:root[data-theme="retro"] .otable tbody td.mono{
  color:var(--ink-2);
}
:root[data-theme="retro"] .otable .fresh-day,
:root[data-theme="retro"] .otable .fresh-week{
  color:var(--ink);
  font-weight:600;
}

/* ====== Поля и кнопки: прямоугольные с рамкой, инверсия при наведении ====== */
:root[data-theme="retro"] .ofield label,
:root[data-theme="retro"] .ofield input,
:root[data-theme="retro"] .ofield select{
  color:var(--ink);
}
:root[data-theme="retro"] .ofield label{
  color:var(--muted);
}
:root[data-theme="retro"] .ofield input,
:root[data-theme="retro"] .ofield select{
  background:var(--paper);
  border:1px solid var(--line-2);
}
:root[data-theme="retro"] .ofield select{
  appearance:auto;
  -webkit-appearance:auto;
}
:root[data-theme="retro"] .ofield input:focus,
:root[data-theme="retro"] .ofield select:focus{
  border-color:var(--ink);
  outline:2px solid var(--ink);
  outline-offset:-2px;
  color:var(--ink);
}
:root[data-theme="retro"] .obtn,
:root[data-theme="retro"] .obtn.primary,
:root[data-theme="retro"] .obtn.sm,
:root[data-theme="retro"] .obtn.on{
  background:var(--paper);
  border:1px solid var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .obtn:hover,
:root[data-theme="retro"] .obtn:focus-visible,
:root[data-theme="retro"] .obtn.primary:hover,
:root[data-theme="retro"] .obtn.on{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
  outline:none;
}

/* ====== Легенда, дерево, граф, списки ====== */
:root[data-theme="retro"] .legend .lg{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-2);
}
:root[data-theme="retro"] .legend .lg:hover{
  background:var(--hover);
  border-color:var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .legend .lg i{
  border-radius:0;
}
:root[data-theme="retro"] .legend .lg small{
  color:var(--muted);
}
:root[data-theme="retro"] .tnode{
  color:var(--ink);
}
:root[data-theme="retro"] .tnode .tname,
:root[data-theme="retro"] .tnode.dir .tname{
  color:var(--ink);
}
:root[data-theme="retro"] .tnode .tmeta,
:root[data-theme="retro"] .tnode .tgl{
  color:var(--muted);
}
:root[data-theme="retro"] .tnode:hover{
  background:var(--hover);
}
:root[data-theme="retro"] .tree ul{
  border-left:1px solid var(--line);
}
:root[data-theme="retro"] .graph-wrap{
  background:var(--paper);
  border:1px solid var(--line);
}
:root[data-theme="retro"] .graph-wrap .glink{
  stroke:var(--line);
  stroke-width:.8;
}
:root[data-theme="retro"] .graph-wrap .glink.hot{
  stroke:var(--ink);
  stroke-width:1.6;
}
:root[data-theme="retro"] .graph-wrap .gnode circle{
  stroke:var(--ink);
}
:root[data-theme="retro"] .graph-wrap .gnode text{
  fill:var(--ink-2);
}
:root[data-theme="retro"] .graph-legend .k{
  color:var(--muted);
}
:root[data-theme="retro"] .graph-legend .k i{
  border-radius:0;
}
:root[data-theme="retro"] .dep-list li{
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
:root[data-theme="retro"] .dep-list li:hover{
  background:var(--hover-2);
  color:var(--ink);
}
:root[data-theme="retro"] .dep-list li .dir-arr{
  color:var(--ink);
}

/* ====== Диаграммы: в облегчённой теме заменяются таблицей и полосами ======
   Канвас диаграммы остаётся в разметке и не трогается: возврат к полной теме
   не требует пересборки разметки. Вместо диаграммы показывается таблица
   значений — числа и пояснения те же (ADR-0054). */
:root[data-theme="retro"] .chart-box{
  display:none;
}
:root[data-theme="retro"] .donut-box{
  display:none;
}
:root[data-theme="retro"] .retro-table{
  display:block;
}
.retro-table{
  display:none;
}

/* ====== Полосы: линия и чернильная заливка без свечения ====== */
:root[data-theme="retro"] .bars .bar-lbl,
:root[data-theme="retro"] .bars .bar-val{
  color:var(--ink-2);
}
:root[data-theme="retro"] .bars .bar-lbl i{
  border-radius:0;
}
:root[data-theme="retro"] .bars .bar-track{
  background:var(--line);
  border-radius:0;
  height:10px;
}
:root[data-theme="retro"] .bars .bar-fill,
:root[data-theme="retro"] .bars .bar-fill:last-child{
  background:var(--ink);
  border-radius:0;
  width:auto;
  transition:none;
}

/* ====== Шаги проверки ====== */
:root[data-theme="retro"] .osteps .s{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--muted);
}
:root[data-theme="retro"] .osteps .s .n{
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:0;
  color:var(--ink);
}
:root[data-theme="retro"] .osteps .s.active{
  border-color:var(--ink);
  color:var(--ink);
}
:root[data-theme="retro"] .osteps .s.active .n,
:root[data-theme="retro"] .osteps .s.done .n{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
:root[data-theme="retro"] .osteps .s.done{
  border-color:var(--ink);
  color:var(--ink);
}
:root[data-theme="retro"] .osteps .s.err{
  border-color:var(--ink);
  border-left:4px solid var(--ink);
  color:var(--ink);
}
:root[data-theme="retro"] .osteps .s.err .n{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--ink);
}

/* ====== Честная метка «нет данных»: штриховая рамка вместо заливки ====== */
:root[data-theme="retro"] .nodata{
  background:none;
  border:1px dashed var(--muted);
}
:root[data-theme="retro"] .nodata .nd-title,
:root[data-theme="retro"] .nodata .nd-why,
:root[data-theme="retro"] .nodata .nd-how,
:root[data-theme="retro"] .zero-note{
  color:var(--ink-2);
}
:root[data-theme="retro"] .nodata .nd-title{
  color:var(--muted);
}
:root[data-theme="retro"] .nodata .nd-title::before{
  background:var(--muted);
  border-radius:0;
}

/* ====== Схемы и карточки навыков ====== */
:root[data-theme="retro"] .mermaid-host{
  background:var(--paper);
  border:1px solid var(--line);
}
:root[data-theme="retro"] .skill-card{
  background:var(--paper);
  border:1px solid var(--line);
}
:root[data-theme="retro"] .skill-head .skill-name,
:root[data-theme="retro"] .skill-head .skill-count,
:root[data-theme="retro"] .skill-part b{
  color:var(--ink);
}
:root[data-theme="retro"] .skill-purpose{
  color:var(--ink-2);
}
:root[data-theme="retro"] .skill-part{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--muted);
}
:root[data-theme="retro"] .team-rules li{
  color:var(--ink-2);
}

/* Полоса внимания и отказ снимка получают роль состояния. */
:root[data-theme="retro"] .skpi.strip{
  border-left:4px solid var(--ink);
  background:var(--paper);
}
:root[data-theme="retro"] .skpi.strip .val{
  color:var(--ink);
}

/* ====== Экран входа ======
   Оформление окна входа в теме «Ретро»: прямоугольник с двойным
   подчёркиванием в голове и подвале, без движения. */
:root[data-theme="retro"] .login-overlay{
  background:rgba(242,241,238,.72);
}
:root[data-theme="retro"] .login-sheet{
  background:var(--paper);
  border:1px solid var(--line-2);
  transform:none;
}
:root[data-theme="retro"] .login-head,
:root[data-theme="retro"] .login-foot{
  border-bottom:3px double var(--line-2);
}
:root[data-theme="retro"] .login-foot{
  border-bottom:0;
  border-top:3px double var(--line-2);
}
:root[data-theme="retro"] .login-logo{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  background:none;
}
:root[data-theme="retro"] .login-sub,
:root[data-theme="retro"] .login-note{
  color:var(--muted);
}
:root[data-theme="retro"] .theme-switch{
  border:1px solid var(--line-2);
  background:var(--paper);
}
:root[data-theme="retro"] .theme-switch button{
  background:var(--paper);
  color:var(--ink-2);
  border:0;
}
:root[data-theme="retro"] .theme-switch button.on{
  background:var(--ink);
  color:var(--paper);
}
:root[data-theme="retro"] .login-action{
  background:var(--paper);
  border:1px solid var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .login-action:hover,
:root[data-theme="retro"] .login-action:focus-visible{
  background:var(--ink);
  color:var(--paper);
  outline:none;
}
:root[data-theme="retro"] .login-action.primary{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
:root[data-theme="retro"] .login-action.primary:hover{
  background:var(--paper);
  color:var(--ink);
}
:root[data-theme="retro"] .login-sheet label,
:root[data-theme="retro"] .login-sheet input,
:root[data-theme="retro"] .login-sheet select{
  color:var(--ink);
}
:root[data-theme="retro"] .login-sheet label{
  color:var(--muted);
}
:root[data-theme="retro"] .login-sheet input,
:root[data-theme="retro"] .login-sheet select{
  background:var(--paper);
  border:1px solid var(--line-2);
}
:root[data-theme="retro"] .login-sheet input:focus,
:root[data-theme="retro"] .login-sheet select:focus{
  border-color:var(--ink);
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
:root[data-theme="retro"] .login-msg{
  color:var(--ink-2);
  border-left:4px solid var(--ink);
}
:root[data-theme="retro"] .login-msg.warn{
  border-left:0;
  border:1px dashed var(--muted);
}
:root[data-theme="retro"] .copyright-sign{
  border:1px solid var(--line-2);
  color:var(--ink);
}
:root[data-theme="retro"] .device-result{
  border:1px solid var(--line);
  background:var(--paper);
}

/* ====== Точки перестроения темы ======
   Две точки, как в образце: 900 точек и 600 точек. */
@media (max-width:900px){
  :root[data-theme="retro"] .summary{
    grid-template-columns:repeat(2,1fr);
  }
  :root[data-theme="retro"] .work-panels{
    grid-template-columns:1fr;
  }
  :root[data-theme="retro"] .ogrid.c4{
    grid-template-columns:repeat(2,1fr);
  }
  :root[data-theme="retro"] .ogrid.c2w,
  :root[data-theme="retro"] .ogrid.c2n,
  :root[data-theme="retro"] .ogrid.c2,
  :root[data-theme="retro"] .ogrid.c3{
    grid-template-columns:1fr;
  }
  :root[data-theme="retro"] .osteps{
    grid-template-columns:1fr;
  }
}
@media (max-width:600px){
  :root[data-theme="retro"] .summary,
  :root[data-theme="retro"] .ogrid.c4,
  :root[data-theme="retro"] .bars .bar-row{
    grid-template-columns:1fr;
  }
  :root[data-theme="retro"] .bars .bar-row{
    gap:6px;
  }
  :root[data-theme="retro"] .bars .bar-val{
    text-align:left;
  }
}