/* Vibe Arena — «Ретро-ОС».
   Сайт — рабочий стол: каждая страница — окно, навигация — меню «Пуск» и панель задач.
   Объём рисуют четыре цвета рамки (--hi, --lt, --sh, --dk). Текст — Inter (читаемость важнее
   пиксельных шрифтов), код и логи — JetBrains Mono. */

@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-21FF, U+2212, U+2215, U+FEFF; }
@font-face { font-family: "JBM"; font-weight: 400; font-display: swap;
  src: url(/static/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212; }
@font-face { font-family: "JBM"; font-weight: 400; font-display: swap;
  src: url(/static/fonts/jetbrains-mono-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1; }
@font-face { font-family: "JBM"; font-weight: 700; font-display: swap;
  src: url(/static/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2212; }
@font-face { font-family: "JBM"; font-weight: 700; font-display: swap;
  src: url(/static/fonts/jetbrains-mono-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1; }

:root {
  --desk: #008080;
  --face: #c0c0c0;
  --hi: #ffffff;
  --lt: #dfdfdf;
  --sh: #808080;
  --dk: #0a0a0a;
  --field: #ffffff;
  --ink: #000000;
  --ink-2: #3a3a3a;
  --navy: #000080;
  --title: linear-gradient(90deg, #000080, #1084d0);
  --title-off: linear-gradient(90deg, #808080, #b5b5b5);
  --link: #0000a8;
  --ok: #007a00;
  --bad: #c00000;
  --warn: #a35f00;
  --tip: #ffffe1;
  --raised: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--sh), inset 2px 2px var(--lt);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--sh), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
  --window: inset -1px -1px var(--dk), inset 1px 1px var(--lt), inset -2px -2px var(--sh), inset 2px 2px var(--hi);
  --shallow: inset -1px -1px var(--hi), inset 1px 1px var(--sh);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JBM", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 7h10l3 3h15v18H2z' fill='%23f2c200' stroke='%23000'/%3E%3Cpath d='M2.5 12.5h27' stroke='%23a07800'/%3E%3C/svg%3E");
  --icon-arena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='1.5' y='6.5' width='12' height='15' fill='%231f3fbf' stroke='%23000'/%3E%3Crect x='18.5' y='6.5' width='12' height='15' fill='%23e0b000' stroke='%23000'/%3E%3Cpath d='M14 14h4' stroke='%23000' stroke-width='2'/%3E%3Crect x='4' y='24' width='24' height='3' fill='%23808080'/%3E%3C/svg%3E");
  --icon-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2.5' y='3.5' width='27' height='20' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='5' y='6' width='10' height='7' fill='%23008080'/%3E%3Crect x='17' y='6' width='10' height='7' fill='%231f3fbf'/%3E%3Crect x='5' y='15' width='10' height='6' fill='%23e0b000'/%3E%3Crect x='17' y='15' width='10' height='6' fill='%23c00000'/%3E%3Crect x='12' y='24' width='8' height='3' fill='%23808080'/%3E%3Crect x='8' y='27' width='16' height='2' fill='%23000'/%3E%3C/svg%3E");
  --icon-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5.5' y='2.5' width='21' height='27' fill='%23fff' stroke='%23000'/%3E%3Crect x='6' y='3' width='20' height='5' fill='%23007a00'/%3E%3Cpath d='M6 13.5h20M6 18.5h20M6 23.5h20M13.5 8v21' stroke='%23007a00'/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.5 9.5h15l-2 19h-11z' fill='%23dfdfdf' stroke='%23000'/%3E%3Crect x='6.5' y='5.5' width='19' height='4' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M12.5 12v14M16 12v14M19.5 12v14' stroke='%23808080'/%3E%3C/svg%3E");
  --icon-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3.5' y='4.5' width='25' height='17' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='6' y='7' width='20' height='12' fill='%23008080'/%3E%3Crect x='12' y='22' width='8' height='4' fill='%23808080'/%3E%3Crect x='8.5' y='26.5' width='15' height='3' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='11' r='6' fill='%23f2c200' stroke='%23000'/%3E%3Cpath d='M5.5 29.5c0-7 5-11 10.5-11s10.5 4 10.5 11z' fill='%231f3fbf' stroke='%23000'/%3E%3C/svg%3E");
  --icon-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='%23808080' stroke='%23000' stroke-width='5' stroke-dasharray='4 3.85'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%23c0c0c0' stroke='%23000'/%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='10' cy='16' r='6.5' fill='%23f2c200' stroke='%23000'/%3E%3Ccircle cx='9' cy='16' r='2' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M16.5 14.5h13v3h-3v3h-3v-3h-7z' fill='%23f2c200' stroke='%23000'/%3E%3C/svg%3E");
  --icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23ffffe1' stroke='%23000'/%3E%3Cpath d='M12 12.5a4 4 0 1 1 5.5 3.7c-1 .5-1.5 1.2-1.5 2.3v1.5' fill='none' stroke='%23000080' stroke-width='3'/%3E%3Crect x='14.5' y='22' width='3' height='3' fill='%23000080'/%3E%3C/svg%3E");
  --icon-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 8.5a11 11 0 1 0 12 0' fill='none' stroke='%23c00000' stroke-width='3'/%3E%3Cpath d='M16 3v13' stroke='%23c00000' stroke-width='3'/%3E%3C/svg%3E");
  --icon-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.5' y='1.5' width='15' height='13' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='1' y='2' width='14' height='3' fill='%23000080'/%3E%3Crect x='3' y='7' width='4' height='5' fill='%23e0b000'/%3E%3Crect x='9' y='7' width='4' height='5' fill='%23008080'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Crect width='20' height='24' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h19v1H1v22H0z' fill='%23fff'/%3E%3Cpath d='M19 0h1v24H0v-1h19z' fill='%230a0a0a'/%3E%3Cpath d='M18 1h1v22H1v-1h17z' fill='%23808080'/%3E%3Cpath d='M6 10h8l-4 4z' fill='%23000'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--desk); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--navy); color: #fff; }
a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 .9em; }
b, strong { font-weight: 700; }
code, pre, kbd { font-family: var(--mono); }
code { font-size: .88em; background: var(--field); border: 1px solid var(--sh); padding: 0 4px; white-space: nowrap; }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; }
.dim { color: #555; }
.eyebrow { font-size: 13px; color: var(--ink-2); }

/* полосы прокрутки как в 95-м */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-corner { background: var(--face); }

/* --- рабочий стол и окна --- */
.desktop { min-height: 100vh; padding: 20px 20px 60px; }
.win { position: relative; background: var(--face); box-shadow: var(--window); padding: 3px; min-width: 0; }
.tb { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 3px 0 6px; background: var(--title); color: #fff; user-select: none; }
.tb h1, .tb h2 { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ico { flex: none; width: 16px; height: 16px; background: var(--icon-app) center / contain no-repeat; }
.tb-img { flex: none; width: 18px; height: 18px; border: 1px solid #fff; object-fit: cover; }
.tb-sp { flex: 1; }
.tbb { flex: none; display: grid; place-items: center; width: 20px; height: 18px; background: var(--face); box-shadow: var(--raised); color: #000;
  font: 700 12px/1 var(--sans); text-decoration: none; }
.tbb + .tbb { margin-left: -4px; }
.tbb:nth-last-child(1) { margin-left: 2px; }
a.tbb:active { box-shadow: var(--sunken); }
.win.inactive > .tb { background: var(--title-off); color: #e4e4e4; }
.wb { padding: 14px 16px 16px; }
.menubar { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 0 3px; font-size: 14px; }
.menubar a, .menubar span { padding: 2px 8px; color: #000; text-decoration: none; }
.menubar a:hover { background: var(--navy); color: #fff; }
.sbar { display: flex; gap: 3px; margin-top: 2px; font-size: 13px; }
.sbar > span { flex: 1 1 auto; min-width: 0; padding: 2px 8px; box-shadow: var(--shallow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar > span:first-child { flex: none; }

/* окно страницы */
.win.main { max-width: 1080px; margin: 0 auto; }
.win.main.staff { max-width: 1320px; }
.win.main > .wb { padding: 22px 26px 26px; }
.desktop.wide { padding: 0 0 40px; }
.win.main.wide { max-width: none; height: calc(100vh - 40px); display: flex; flex-direction: column; }
.win.main.wide > .wb { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.desktop.dialog { display: grid; place-items: center; padding: 20px 20px 60px; }
.win.main.dialog { width: min(560px, 100%); margin: 0; }

/* --- панель задач и «Пуск» --- */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 40px; display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 3px; background: var(--face); box-shadow: inset 0 1px var(--lt), inset 0 2px var(--hi); }
.start { position: relative; }
.start > summary { list-style: none; }
.start > summary::-webkit-details-marker { display: none; }
.startbtn { height: 31px; padding: 0 10px 0 6px; font-weight: 800; }
.start[open] > .startbtn { box-shadow: var(--sunken); }
.flag { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2l6-1v6H1z' fill='%23e33'/%3E%3Cpath d='M9 1l6-1v7H9z' fill='%233b3'/%3E%3Cpath d='M1 9h6v6l-6-1z' fill='%2336f'/%3E%3Cpath d='M9 9h6v7l-6-1z' fill='%23fc0'/%3E%3C/svg%3E") center / contain no-repeat; }
.startmenu { position: absolute; left: -2px; bottom: 36px; display: flex; min-width: 270px; background: var(--face); box-shadow: var(--window); padding: 3px; }
.startmenu .band { width: 32px; display: flex; align-items: flex-end; justify-content: center; padding: 10px 0; background: linear-gradient(0deg, var(--navy), #1084d0);
  color: var(--face); writing-mode: vertical-rl; transform: rotate(180deg); font: 400 20px/1 var(--sans); letter-spacing: .02em; }
.startmenu .band b { color: #fff; font-weight: 900; }
.startmenu ul { list-style: none; margin: 0; padding: 2px 0; flex: 1; }
.startmenu li a, .startmenu li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 16px 7px 8px; border: 0; background: none;
  color: #000; font: 400 14.5px var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.startmenu li a:hover, .startmenu li button:hover, .startmenu li a:focus-visible { background: var(--navy); color: #fff; outline: 0; }
.startmenu li form { margin: 0; }
.startmenu .sep { height: 0; margin: 3px 2px; border-top: 1px solid var(--sh); border-bottom: 1px solid var(--hi); }
.ico16, .ico32 { flex: none; display: block; background: center / contain no-repeat; }
.ico16 { width: 22px; height: 22px; }
.ico32 { width: 40px; height: 40px; }
img.ico16, img.ico32 { object-fit: cover; border: 1px solid #000; }
.i-folder { background-image: var(--icon-folder); } .i-arena { background-image: var(--icon-arena); } .i-wall { background-image: var(--icon-wall); }
.i-sheet { background-image: var(--icon-sheet); } .i-trash { background-image: var(--icon-trash); } .i-desk { background-image: var(--icon-desk); }
.i-user { background-image: var(--icon-user); } .i-gear { background-image: var(--icon-gear); } .i-key { background-image: var(--icon-key); }
.i-help { background-image: var(--icon-help); } .i-off { background-image: var(--icon-off); }
.tasks { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.task { flex: 0 1 auto; min-width: 0; max-width: 170px; height: 31px; display: flex; align-items: center; padding: 0 12px; background: var(--face); box-shadow: var(--raised);
  color: #000; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.on { box-shadow: var(--sunken); font-weight: 700; background: repeating-conic-gradient(var(--face) 0 25%, #e8e8e8 0 50%) 0 0 / 2px 2px; }
.tray { flex: none; display: flex; align-items: center; gap: 12px; height: 31px; padding: 0 10px; box-shadow: var(--shallow); font-size: 13px; white-space: nowrap; }
.tray .cm { display: flex; align-items: center; gap: 6px; color: #000; font-weight: 600; text-decoration: none; }
.tray .cm img { width: 22px; height: 22px; border: 1px solid #000; object-fit: cover; }
.tray .cm:hover span { text-decoration: underline; }
.tray .who { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ph i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1px solid #000; background: var(--ok); vertical-align: -1px; }
.ph.dev i, .ph.voting i { animation: blink 1.6s steps(2, start) infinite; }
.ph.freeze i { background: #f2c200; }
.ph.results i { background: var(--navy); }
@keyframes blink { 50% { background: #9fdc9f; } }
@media (prefers-reduced-motion: reduce) { .ph i { animation: none !important; } }
.countdown { font-variant-numeric: tabular-nums; }

/* --- элементы --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 16px; border: 0; background: var(--face);
  box-shadow: var(--raised); color: #000; font: 600 14.5px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:active:not(:disabled) { box-shadow: var(--sunken); padding-top: 2px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.primary { box-shadow: 0 0 0 1px var(--dk), var(--raised); }
.btn.primary:active:not(:disabled) { box-shadow: 0 0 0 1px var(--dk), var(--sunken); }
.btn.small { min-height: 28px; padding: 0 10px; font-size: 13.5px; }
.btn:disabled { color: var(--sh); text-shadow: 1px 1px 0 var(--hi); cursor: default; }

input, textarea, select { width: 100%; padding: 7px 9px; border: 0; border-radius: 0; background: var(--field); box-shadow: var(--sunken);
  color: #000; font: 400 15px/1.4 var(--sans); }
input:focus, textarea:focus, select:focus { outline: 1px dotted #000; outline-offset: -5px; }
input:disabled, textarea:disabled, select:disabled { background: var(--face); color: #555; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; background: var(--field) var(--select-arrow) right 2px center / 20px 24px no-repeat; cursor: pointer; }
input[type=checkbox] { width: auto; box-shadow: none; accent-color: var(--navy); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 24px; padding: 0; background: transparent; box-shadow: none; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--field); box-shadow: var(--shallow); }
input[type=range]::-moz-range-track { height: 4px; background: var(--field); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 21px; margin-top: -9px; background: var(--face); box-shadow: var(--raised); }
input[type=range]::-moz-range-thumb { width: 11px; height: 21px; border: 0; border-radius: 0; background: var(--face); box-shadow: var(--raised); }
label { display: block; margin: 14px 0 5px; font-size: 14px; font-weight: 600; }
label .muted { font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0; }

/* группа (рамка с подписью на линии) */
.card { position: relative; margin-top: 14px; padding: 22px 16px 16px; border: 1px solid var(--sh); box-shadow: 1px 1px 0 var(--hi), inset 1px 1px 0 var(--hi); }
.card > h2:first-of-type { position: absolute; top: -.72em; left: 10px; max-width: calc(100% - 20px); margin: 0; padding: 0 6px; background: var(--face);
  font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:not(:has(> h2)):has(table) { padding: 0; border: 0; box-shadow: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions.center { justify-content: center; }
.inline { display: inline-flex; gap: 8px; align-items: center; }
.inline input { width: auto; min-width: 120px; }

.flash { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 9px 12px; background: var(--tip); border: 1px solid #000; font-size: 14.5px; }
.flash::before { content: "i"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff;
  font: italic 700 13px/1 Georgia, serif; }
.flash.bad::before { content: "×"; background: var(--bad); font: 700 15px/1 var(--sans); }
.desktop.home > .flash { grid-column: 1 / -1; margin: 0; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; background: var(--face); box-shadow: var(--shallow); color: #000;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: 1px; text-decoration: none; }
.badge::before { content: ""; width: 8px; height: 8px; border: 1px solid #000; background: var(--sh); }
.badge.live::before { background: #2bb32b; }
.badge.failed::before { background: var(--bad); }
.badge.building::before, .badge.queued::before { background: #f2c200; }
.badge.owner::before, .badge.admin::before, .badge.judge::before { background: var(--navy); }

ul.star { margin: 0; padding-left: 20px; list-style: square; }
ul.star li { margin: 6px 0; }
ul.star li::marker { color: var(--navy); }
ul.star b { font-weight: 600; }

table { width: 100%; border-collapse: collapse; background: var(--field); box-shadow: var(--sunken); }
th, td { padding: 8px 10px; text-align: left; vertical-align: top; }
td { border-bottom: 1px solid #e2e2e2; }
th { padding: 5px 10px; background: var(--face); box-shadow: var(--raised); font-size: 13px; font-weight: 600; white-space: nowrap; }
tr:hover > td { background: #eef0ff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

pre.log, .term { margin: 0; padding: 12px 14px; max-height: 420px; overflow: auto; background: #000; color: #c0c0c0; box-shadow: var(--sunken);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
pre.code { margin: 12px 0 0; padding: 10px 12px; overflow-x: auto; background: var(--field); box-shadow: var(--sunken); font-size: 13.5px; line-height: 1.6; white-space: pre; }
pre.code .k { font-weight: 700; }
pre.code .c { color: #666; }

.progress, .meter { height: 22px; padding: 3px; background: var(--field); box-shadow: var(--sunken); }
.progress > div, .meter > div { height: 100%; min-width: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 9px, transparent 9px 11px); }
.meter { width: 130px; height: 16px; padding: 2px; margin: 6px 0 0 auto; }

.tabs { display: flex; flex-wrap: wrap; padding-left: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--hi); box-shadow: 0 1px 0 var(--lt); }
.tabs a { position: relative; padding: 5px 14px 4px; margin-top: 3px; background: var(--face); color: #000; font-size: 14px; text-decoration: none;
  box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--sh); }
.tabs a.on { z-index: 1; margin: 0 -2px -1px; padding: 7px 16px 6px; font-weight: 700; }
.tabs .count { color: var(--bad); margin-left: 4px; }
.seg { display: inline-flex; gap: 2px; }
.seg a { min-width: 32px; padding: 2px 8px; text-align: center; background: var(--face); box-shadow: var(--raised); color: #000; font-size: 13.5px; text-decoration: none; }
.seg a.on { box-shadow: var(--sunken); font-weight: 700; background: repeating-conic-gradient(var(--face) 0 25%, #e8e8e8 0 50%) 0 0 / 2px 2px; }

.section { margin-top: 28px; }
.section-head { margin-bottom: 10px; font-size: 16px; font-weight: 700; }

/* --- главная: значки и окна --- */
.desktop.home { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.icons { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 4px; }
.dicon { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; color: #fff; font-size: 13px; font-weight: 500;
  line-height: 1.25; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #000; }
.dicon:hover, .dicon:focus-visible { outline: 1px dotted #fff; outline-offset: 0; }
.dicon img.ico32 { border: 2px solid #fff; box-shadow: 2px 2px 0 #000; }
.windows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.w-arena { margin-top: 56px; margin-left: -34px; }
.w-notes { margin-left: 28px; }
.w-cm { margin-top: -18px; }
.w-projects, .w-faq { grid-column: 1 / -1; }
.w-faq { max-width: 860px; }
.hero-title { margin: 4px 0 12px; font-size: 40px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.lead { font-size: 16px; }
.fill { margin-top: 20px; }
.fill .small { margin-bottom: 4px; }
.pair { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; color: #000; text-decoration: none; }
.pane { display: block; padding: 3px; background: var(--field); box-shadow: var(--sunken); }
.pane img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pane span { display: block; padding: 4px 2px 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair .vs { text-align: center; font-weight: 800; }
.w-arena .actions { margin-top: 14px; }
.notepad { margin: 0 1px 1px; padding: 10px 12px; max-height: 330px; overflow: auto; background: var(--field); box-shadow: var(--sunken);
  font: 13.5px/1.6 var(--mono); white-space: pre-wrap; }
.cm-box { display: flex; gap: 16px; align-items: center; }
.cm-box > img { flex: none; width: 104px; height: 104px; object-fit: cover; border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
.cm-box p { margin-bottom: 10px; }
.cm-name { font-size: 18px; font-weight: 800; }
.cm-name .muted { font-size: 14px; font-weight: 500; }
.tabpane { padding: 12px 16px; margin-top: -16px; box-shadow: var(--raised); }
[data-tabs] .tabs { border: 0; box-shadow: none; }
ol.steps { margin: 0; padding-left: 22px; }
ol.steps li { margin: 8px 0; }
.disk { display: flex; gap: 24px; align-items: center; margin-bottom: 14px; }
.pie { flex: none; width: 124px; height: 124px; border-radius: 50%; border: 1px solid #000; box-shadow: 0 6px 0 -1px #505050, 0 6px 0 0 #000; }
.legend { list-style: none; margin: 0; padding: 0; min-width: 190px; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.legend i { width: 14px; height: 14px; border: 1px solid #000; }
.legend b { margin-left: auto; padding-left: 16px; font-variant-numeric: tabular-nums; }
.addr { display: flex; align-items: center; gap: 8px; padding: 3px 2px 6px; font-size: 13.5px; }
.addr .field { flex: 1; min-width: 0; padding: 3px 8px; background: var(--field); box-shadow: var(--sunken); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr input { flex: 0 1 260px; padding: 4px 8px; font-size: 14px; }
.explorer { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 18px 14px; margin: 0 1px 1px; padding: 16px;
  background: var(--field); box-shadow: var(--sunken); }
.exp { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #000; font-size: 13.5px; text-align: center; text-decoration: none; }
.exp .thumb { width: 100%; box-shadow: 0 0 0 1px var(--sh); }
.exp > span { padding: 1px 4px; font-weight: 600; }
.exp small { color: #555; font-size: 12.5px; line-height: 1.35; }
.exp:hover > span, .exp:focus-visible > span { background: var(--navy); color: #fff; }
.exp:focus-visible { outline: 0; }
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--face); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sh); font-size: 40px; font-weight: 800; }
.wb.faq { margin: 0 1px 1px; padding: 8px 16px; background: var(--field); box-shadow: var(--sunken); }
.faq summary { position: relative; padding: 6px 0 6px 24px; list-style: none; cursor: pointer; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; position: absolute; left: 2px; top: 10px; width: 11px; height: 11px; border: 1px solid var(--sh); background: var(--field);
  font: 700 11px/9px var(--mono); text-align: center; }
.faq details[open] summary::before { content: "−"; }
.faq summary:hover { text-decoration: underline; }
.faq details p { margin: 0 0 8px 8px; padding: 0 0 2px 16px; border-left: 1px dotted var(--sh); color: var(--ink-2); }

/* --- окна с сайтами --- */
.frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.framebox { display: flex; flex-direction: column; min-height: 0; padding: 3px; background: var(--face); box-shadow: var(--window); }
.framebar { display: flex; align-items: center; gap: 10px; min-height: 26px; padding: 0 3px 0 8px; background: var(--title); color: #fff; font-size: 13.5px; }
.framebar b { flex-shrink: 0; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.framebar .muted { min-width: 0; color: #cfd8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.framebar .spacer { flex: 1; }
.framebar a:not(.btn) { color: #fff; font-size: 13px; white-space: nowrap; }
.framebar .btn { min-height: 20px; padding: 0 8px; font-size: 12.5px; }
.desc { max-height: 64px; overflow: auto; padding: 5px 8px; font-size: 13px; color: #222; }
.framebox .viewport { flex: 1; min-height: 0; padding: 2px; background: #fff; box-shadow: var(--sunken); }

.wall { flex: 1; min-height: 0; display: grid; gap: 8px; }
.wall > *, .arena > *, .project > *, .judge-layout > * { min-width: 0; }
.wall.c1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, 1fr); }
.wall.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
.wall.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
.wall.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }

/* --- проект и судья --- */
.project { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 8px; }
.judge-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 8px; }
.side { overflow: auto; margin: 0; padding: 16px 18px; border: 0; background: var(--field); box-shadow: var(--sunken); }
.side h1 { font-size: 22px; }
.side.card > h2:first-of-type { position: static; max-width: none; padding: 0; background: none; white-space: normal; }
.side .text { white-space: pre-wrap; }
.note { margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--navy); background: #f2f2f2; white-space: pre-wrap; }
.side .note { background: #f4f4f8; }
.note.hidden-note { opacity: .55; border-left-style: dashed; }
.crit { display: grid; grid-template-columns: 1fr 44px; gap: 10px; align-items: center; margin: 0 0 8px; }
.crit .val { text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.group { margin: 20px 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--sh); font-size: 13.5px; font-weight: 800; }
.total { font-size: 36px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-size: 14px; font-weight: 400; }
.check input { margin-top: 4px; }

/* --- арена --- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
#board { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arena { flex: 1; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); }
.arena .vs { display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.arena .framebox.picked .framebar { background: linear-gradient(90deg, #006400, #2fa84f); }
/* размеры панели голосования не зависят от текста таймера: кнопка, сдвинувшаяся перед нажатием, его не засчитывает */
.votebar { display: grid; grid-template-columns: minmax(0, 1fr) 12em minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; }
.votebar .btn { width: 100%; min-height: 44px; font-size: 15px; }
.votebar #skip { min-height: 32px; margin-top: 4px; }
/* нажатая кнопка панели не меняет размер — иначе защита приняла бы нажатие за сдвиг кнопки */
.votebar .btn:active:not(:disabled) { padding-top: 0; }
/* пара: живой — один сайт, у второго — скриншот с кнопкой «Открыть» (см. arena.html) */
.framebox .viewport { position: relative; }
.cover { display: flex; position: absolute; inset: 2px; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 0; border: 0; background: #f2f2f2; cursor: pointer; overflow: hidden; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .55; }
.cover .btn { position: relative; }
.framebox.live .cover { display: none; }
.pairtabs { display: none; gap: 6px; }
.pairtabs .btn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pairtabs .btn.on { box-shadow: var(--sunken); font-weight: 800; }
/* страница арены не прокручивается: всё по высоте экрана, лишнее обрезано (overflow: clip — не
   прокручиваемый блок), — живой сайт не прокрутит страницу, чтобы спрятать кнопки или соседа */
html.fixedpage, html.fixedpage body { height: 100%; overflow: hidden; }
.desktop.arenapage { height: 100dvh; min-height: 0; overflow: clip; }
.win.main.arenapage { height: 100%; }
.timer { margin-top: 4px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; height: 2.6em; overflow: hidden; line-height: 1.3; }

/* --- итоги --- */
table.sheet td, table.sheet th { border: 1px solid #c8c8c8; }
table.sheet th { border-color: var(--sh); }
tr.top > td { background: #ffffd6; }
.rank { font-size: 20px; font-weight: 800; color: #555; }
tr.top .rank { color: #000; }
.ptitle { font-weight: 700; }
.score { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.noms { list-style: none; margin: 0; padding: 4px 14px; background: var(--field); box-shadow: var(--sunken); }
.noms li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #e2e2e2; }
.noms li:last-child { border-bottom: 0; }
.noms .who { font-weight: 700; }

/* --- вход и диалоги --- */
.dlg { display: flex; gap: 16px; align-items: flex-start; }
.dlg-ico { flex: none; width: 48px; height: 48px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.dlg-body { flex: 1; min-width: 0; }
.dlg-body h2 { font-size: 17px; }
.dlg-err { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bad); color: #fff; font: 700 26px/1 var(--sans);
  border: 1px solid #000; }
input.code { font: 700 26px/1.2 var(--mono); letter-spacing: .18em; padding: 10px 12px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dlg-actions .btn { min-width: 96px; }

/* --- админка --- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.statgrid > div { padding: 10px 12px; background: var(--field); box-shadow: var(--sunken); }
.statgrid b { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.statgrid span { font-size: 13px; }
.card.risk-high { border-left: 4px solid var(--bad); }
.card.risk-medium { border-left: 4px solid #f2c200; }
.card.risk-low { border-left: 4px solid var(--sh); }
.flags { margin: 10px 0 0; padding-left: 18px; list-style: square; }
td.outlier { color: var(--bad); font-weight: 700; }
code.copy { user-select: all; word-break: break-all; white-space: normal; }
.phasebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.phasebar .step { padding: 4px 12px; background: var(--face); box-shadow: var(--raised); font-size: 14px; }
.phasebar .step.done { color: var(--sh); text-shadow: 1px 1px 0 var(--hi); }
.phasebar .step.on { background: var(--navy); color: #fff; box-shadow: var(--sunken); font-weight: 700; }
.phasebar .arrow { color: #555; }

@media (max-width: 1099px) {
  .windows { grid-template-columns: 1fr; }
  .windows > .win { margin: 0 !important; }
}
@media (max-width: 900px) {
  body { font-size: 14.5px; }
  .desktop { padding: 8px 8px 52px; }
  .desktop.home { grid-template-columns: 1fr; gap: 12px; }
  .icons { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 0; }
  .dicon { width: 78px; font-size: 12px; }
  .win.main > .wb { padding: 14px 14px 18px; }
  .grid2, .project, .judge-layout { grid-template-columns: 1fr; }
  .win.main.wide { height: auto; min-height: calc(100vh - 40px); }
  .arena { grid-template-columns: 1fr; padding-bottom: 140px; }
  /* телефон: сайты — вкладками, виден один (живой) */
  .pairtabs { display: flex; }
  .arena .vs, .arena .framebox:not(.live) { display: none; }
  .win.main.arenapage { height: 100%; min-height: 0; }
  .win.main.arenapage .arena { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .win.main.arenapage .framebox { height: auto; }
  .win.main.arenapage .desc { max-height: 40px; }
  /* кнопки голоса — у нижнего края экрана: прокрутка страницы (её может вызвать и сайт в окне) их не двигает */
  .votebar { position: fixed; left: 8px; right: 8px; bottom: 46px; z-index: 40; background: var(--face);
             box-shadow: var(--raised); padding: 6px; gap: 6px; grid-template-columns: minmax(0, 1fr) 8em minmax(0, 1fr); }
  .votebar .btn { min-width: 0; padding: 6px 8px; font-size: 14px; white-space: normal; line-height: 1.2; }
  .votebar #skip { min-height: 30px; font-size: 13px; }
  .votebar .btn:active:not(:disabled) { padding-top: 6px; }
  .votebar .timer { font-size: 12px; }
  .arena .vs { padding: 6px 0; }
  .arena .framebox, .project .framebox, .judge-layout .framebox { height: 70vh; }
  .wall { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .wall .framebox { height: 60vh; }
  .hero-title { font-size: 30px; }
  .disk { flex-direction: column; align-items: flex-start; }
  .cm-box { align-items: flex-start; }
  .cm-box > img { width: 72px; height: 72px; }
  .explorer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 10px; }
  .tasks { display: none; }
  .taskbar { justify-content: space-between; }
  .tray .who, .tray .cm span { display: none; }
  .sbar > span:not(:first-child) { display: none; }
}

.nickfield { display: flex; align-items: center; gap: 2px; }
.nickfield span { white-space: nowrap; color: var(--ink-2); }
.nickfield input { flex: 1; min-width: 0; }