/* ============================================================================
   dedcom 95 — ретро-версия лендинга: рабочий стол, окна, панель задач.
   Отдельная тема, основной лендинг не затрагивает. Без внешних запросов.
   ========================================================================== */

:root {
  --desk: #0e7f7f;
  --face: #c0c4c8;          /* «пластик» окон */
  --face-hi: #ffffff;
  --face-lo: #3c4046;
  --face-mid: #868c92;
  --navy: #000080;
  --navy-2: #1084d0;
  --sel: #000080;
  --ink: #14161a;
  --accent: #b23c17;
  --ui: "Tahoma", "MS Sans Serif", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas,
          "DejaVu Sans Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { height: 100%; }
body {
  font: 12.5px/1.5 var(--ui);
  color: var(--ink);
  background: var(--desk);
  overflow: hidden;
}

button { font: inherit; color: inherit; }
img, svg { display: block; }

:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }
.win :focus-visible, .taskbar :focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------- бевелы -- */
.r-out {
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  box-shadow: inset 1px 1px 0 #e8ecef, inset -1px -1px 0 var(--face-mid);
}
.sunken {
  background: #fff;
  border: 2px solid;
  border-color: var(--face-mid) var(--face-hi) var(--face-hi) var(--face-mid);
  box-shadow: inset 1px 1px 0 var(--face-lo);
}

.b95 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 84px;
  padding: 4px 14px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  box-shadow: inset 1px 1px 0 #e8ecef, inset -1px -1px 0 var(--face-mid);
  cursor: pointer; user-select: none;
  text-decoration: none; color: var(--ink);
  font-size: 12px;
}
.b95:active, .b95[aria-pressed="true"], .b95[aria-selected="true"] {
  border-color: var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  box-shadow: inset 1px 1px 0 var(--face-mid);
  translate: 1px 1px;
}

/* --------------------------------------------------------- рабочий стол -- */
#desktop {
  position: fixed; inset: 0 0 38px 0;
  overflow: hidden;
}

#icons {
  position: absolute; inset: 10px auto 6px 10px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 96px);
  gap: 4px 10px;
  align-content: start;
}
.icon {
  width: 92px;
  background: none; border: none; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px 4px;
  color: #fff;
}
.icon .ic { width: 34px; height: 34px; filter: drop-shadow(1px 1px 0 rgba(0, 20, 20, .45)); }
.icon > span {
  font-size: 11.5px; line-height: 1.25; text-align: center;
  padding: 1px 4px;
  text-shadow: 1px 1px 0 rgba(0, 25, 25, .8);
}
.icon.sel > span { background: var(--sel); outline: 1px dotted #fff; text-shadow: none; }

/* ----------------------------------------------------------------- окна -- */
.win {
  position: absolute;
  display: none;
  flex-direction: column;
  min-width: 300px;
  max-width: calc(100vw - 12px);
  padding: 3px;
  z-index: 20;
}
.win.show { display: flex; }
.win[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .win.show { animation: wopen .1s ease-out; }
  @keyframes wopen { from { scale: .97; opacity: .6; } }
}
.win.max { left: 2px !important; top: 2px !important; width: calc(100% - 4px) !important; }
.win.max .win-body { max-height: none; flex: 1; }
.win.max { height: calc(100% - 4px); }

.tbar {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
  color: #fff;
  user-select: none;
  touch-action: none;
}
.win:not(.active) .tbar {
  background: linear-gradient(90deg, #6f7377, #a7abaf);
  color: #e9e9e9;
}
.tbar-ico { width: 15px; height: 15px; }
.tbar-title {
  flex: 1;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-btn {
  width: 19px; height: 17px; min-width: 0; padding: 0;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.tb-btn svg { width: 9px; height: 9px; }

.win-body {
  margin-top: 3px;
  padding: 11px;
  overflow: auto;
  max-height: min(72dvh, 640px);
  background: var(--face);
  scrollbar-color: var(--face-mid) var(--face);
}
.win-body.tight { padding: 7px; }

/* «блокнотное» окно */
.pad {
  font: 12.5px/1.65 var(--mono);
  padding: 10px 12px;
  white-space: pre-wrap;
}

.win h3 { font-size: 13px; margin-bottom: 6px; }
.win p { margin-bottom: 8px; }
.muted { color: #4c5158; }
.win a { color: var(--navy); }
.win a:hover { color: var(--accent); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* групбоксы «Возможности» */
.gb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
@media (max-width: 760px) { .gb-grid { grid-template-columns: 1fr; } }
fieldset.gb {
  border: 2px groove #f0f2f4;
  padding: 6px 9px 8px;
  min-width: 0;
}
.gb legend { font-weight: 700; font-size: 12px; padding: 0 4px; }
.gb p { font-size: 12px; margin: 0; color: #333; }

.statusbar {
  margin-top: 9px;
  display: flex; gap: 4px;
}
.statusbar span {
  flex: 1;
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-mid) var(--face-hi) var(--face-hi) var(--face-mid);
}

/* чекбоксы «Безопасность» */
.chk { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; margin-bottom: 9px; }
.chk .box {
  width: 15px; height: 15px; margin-top: 2px;
  background: #fff;
  border: 2px solid;
  border-color: var(--face-mid) var(--face-hi) var(--face-hi) var(--face-mid);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0a5c2c;
}
.chk b { font-size: 12.5px; }
.chk p { grid-column: 2; font-size: 12px; margin: 0; color: #333; }

.warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fdf3d1;
  border: 1px solid #b49b46;
  padding: 8px 10px;
  margin-top: 11px;
  font-size: 12px;
}
.warn .wi { font-size: 20px; line-height: 1; }

/* таблица-«листвью» */
.lv { width: 100%; border-collapse: collapse; background: #fff; }
.lv th {
  text-align: left; font-weight: 400; font-size: 11.5px;
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-hi) var(--face-mid) var(--face-mid) var(--face-hi);
  padding: 2px 8px;
}
.lv td { font-size: 12px; padding: 4px 8px; border-bottom: 1px solid #e6e9ec; vertical-align: top; }
.lv td:first-child { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; color: #223; }

/* листинги */
.lst-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 6px;
  background: var(--face);
  font-size: 11.5px;
}
.lst {
  background: #0a0d12;
  color: #c9d4e4;
  font: 11.5px/1.7 var(--mono);
  padding: 8px 11px;
  overflow-x: auto;
  margin: 0;
}
.lst .cm { color: #6b7688; }
.lst .kw { color: #ffb08a; font-weight: 600; }
.copy { min-width: 0; padding: 2px 10px; font-size: 11px; }
.copy.ok { color: #0a5c2c; }

/* FAQ */
.faq details { border-bottom: 1px solid #d4d8dc; padding: 2px 0; }
.faq summary {
  list-style: none; cursor: pointer;
  font-weight: 700; font-size: 12.5px;
  padding: 6px 4px;
  display: flex; gap: 8px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸"; color: var(--navy); }
.faq details[open] summary::before { content: "▾"; }
.faq details p { font-size: 12px; padding: 0 4px 8px 20px; margin: 0; color: #333; }

/* паспорт */
.plate dl { display: grid; grid-template-columns: max-content 1fr; font-size: 12px; }
.plate dt {
  font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: #43484e;
  padding: 6px 10px 5px;
  border-top: 1px solid #e0e3e6;
}
.plate dd { padding: 5px 10px 5px 0; border-top: 1px solid #e0e3e6; font-family: var(--mono); font-size: 11.5px; }
.plate dt:first-of-type, .plate dd:first-of-type { border-top: 0; }

/* --------------------------------------------------------- окно-консоль -- */
.term-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.term-tab { min-width: 0; padding: 3px 10px; font-size: 11.5px; }
.term-status { margin-left: auto; font: 11px var(--mono); color: #43484e; }

.term-viewport {
  container-type: inline-size;
  overflow: auto;
  background: #0a0d12;
}
.term-screen {
  display: block;
  padding: 10px 12px 8px;
  font-family: var(--mono);
  font-size: clamp(7px, 1.62cqw, 13.5px);
  line-height: 1.3;
  white-space: pre;
  color: #aab7d0;
}
.t-frame { color: #2e3d55; }
.t-title { color: #7dd3fc; }
.t-cyan  { color: #67e8f9; }
.t-grn   { color: #4ade80; }
.t-amb   { color: #fcd34d; }
.t-dim   { color: #4d5a75; }
.t-txt   { color: #c3cee2; }
.t-bar   { color: #38bdf8; }
.t-sel   { background: #14384d; color: #e0f2fe; }
.t-mark  { color: #4ade80; }
.t-fnum  { color: #8fa3c8; }
.t-fbtn  { background: #123f54; color: #a5f3fc; }
.t-inv   { background: #4ade80; color: #06281a; font-weight: 600; }

/* ---------------------------------------------------------- панель задач -- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 38px;
  z-index: 400;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px;
  background: var(--face);
  border-top: 1px solid var(--face-hi);
  box-shadow: 0 -1px 0 var(--face-mid);
}
#startbtn { font-weight: 700; min-width: 0; padding: 3px 12px 3px 8px; }
#startbtn img { width: 17px; height: 17px; border-radius: 3px; }

#tasks { flex: 1; display: flex; gap: 5px; overflow: hidden; }
.task {
  min-width: 0; max-width: 176px; flex: 0 1 176px;
  justify-content: flex-start;
  padding: 3px 9px;
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task svg { width: 14px; height: 14px; flex: none; }

#clock {
  font: 12px var(--mono);
  padding: 4px 12px;
  white-space: nowrap;
}

/* меню «Пуск» */
#startmenu {
  position: fixed; left: 4px; bottom: 42px;
  width: 252px;
  z-index: 500;
  display: none;
  padding: 3px;
}
#startmenu.open { display: flex; }
.sm-side {
  writing-mode: vertical-rl; rotate: 180deg;
  background: linear-gradient(0deg, var(--navy), var(--navy-2));
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em;
  padding: 10px 4px;
  display: flex; align-items: center;
}
.sm-list { flex: 1; display: flex; flex-direction: column; padding: 2px; }
.sm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border: none; background: none; text-align: left; cursor: default;
  font-size: 12.5px; text-decoration: none; color: var(--ink);
  min-width: 0;
}
.sm-item svg { width: 19px; height: 19px; flex: none; }
.sm-item:hover { background: var(--sel); color: #fff; }
.sm-sep { border-top: 1px solid var(--face-mid); border-bottom: 1px solid var(--face-hi); margin: 3px 2px; }

/* --------------------------------------------------- бут-экран и финал -- */
#boot {
  position: fixed; inset: 0; z-index: 900;
  background: #050607;
  color: #c9d1c9;
  font: 13.5px/1.9 var(--mono);
  padding: 6vh 7vw;
  cursor: pointer;
}
#boot .ln { opacity: 0; animation: bln .05s forwards; animation-delay: var(--t); }
@keyframes bln { to { opacity: 1; } }
#boot .ok { color: #39d353; }
#boot .hint { color: #4c5a4c; margin-top: 2.2em; }
@media (prefers-reduced-motion: reduce) { #boot { display: none; } }

#off {
  position: fixed; inset: 0; z-index: 950;
  background: #000;
  display: none;
  place-items: center;
  text-align: center;
  padding: 6vw;
  color: #ffa04d;
  font: 700 clamp(17px, 3vw, 28px)/1.6 var(--mono);
  cursor: pointer;
}
#off.show { display: grid; }
#off small { display: block; margin-top: 1.4em; font-size: .55em; font-weight: 400; color: #7c5a3c; }

/* ------------------------------------------------------------- мобильное -- */
@media (max-width: 720px) {
  #icons { grid-template-rows: repeat(auto-fill, 92px); gap: 2px 4px; inset: 6px auto 4px 4px; }
  .icon { width: 82px; }
  .win { min-width: 0; }
  .win-body { max-height: calc(100dvh - 118px); }
  .task { flex-basis: 120px; }
}

/* скроллбары в духе эпохи (webkit) */
.win-body::-webkit-scrollbar, .term-viewport::-webkit-scrollbar, .lst::-webkit-scrollbar {
  width: 15px; height: 15px;
}
.win-body::-webkit-scrollbar-track, .term-viewport::-webkit-scrollbar-track, .lst::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#fff 0% 25%, #c0c4c8 0% 50%) 0 0 / 4px 4px;
}
.win-body::-webkit-scrollbar-thumb, .term-viewport::-webkit-scrollbar-thumb, .lst::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}

/* ------------------------------------------ название на рабочем столе -- */
/* Видимый H1 для людей и поисковиков: в правом нижнем углу стола, под окнами. */
.wm {
  position: absolute; inset-inline-end: 16px; inset-block-end: 12px; z-index: 1;
  max-width: min(440px, 62vw);
  font: 700 18px/1.25 var(--ui); color: #fff; text-align: end;
  text-shadow: 1px 1px 0 rgba(0, 25, 25, .8);
  pointer-events: none;
}
.wm small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; }
@media (max-width: 720px) { .wm { font-size: 14px; max-width: 70vw; } }
.tm { font-size: 11px; margin-top: 8px; }
.doc-links { padding-left: 20px; margin-bottom: 8px; }
.doc-links li { margin-bottom: 4px; }