/* Палітра й елементи Studio з HYDRA LINK: та сама шапка, вкладки, меню фільтра і кнопки. */
:root{color-scheme:dark;--page:#141416;--panel:#1d1e21;--field:#282a2f;--line:#33353b;--row-line:#292b30;--accent:#dd0031;--text:#f2f3f5;--muted:#a3a8b1;--disabled:#777e89;--podium:#e85575;font-family:"Microsoft New Tai Lue","Segoe UI",Arial,sans-serif;font-size:14px;background:var(--page);color:var(--text);font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0;background:var(--page)}button,select{font:inherit}button,a,select{touch-action:manipulation}button,a{cursor:pointer}button:disabled{cursor:default}[hidden]{display:none!important}:focus-visible{outline:2px solid #e84b70;outline-offset:3px}
.shell{width:100%;max-width:1180px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(24px,env(safe-area-inset-left))}
header{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:16px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;flex-shrink:0}.brand img{display:block;width:34px;height:34px;object-fit:contain}
/* Висота великих літер HYDRA рівно 16 px, як у LINK; підпис SCOREBOARD довший за LINK, тому з меншим трекінгом він не ширший за HYDRA. */
.brand-name{display:flex;flex-direction:column;align-items:flex-start;font-size:22.85px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.2px;position:relative;top:.65px}.brand-subtitle{display:block;padding-inline-start:1px;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:1.25px;line-height:1}
@supports(text-box-trim:trim-both){.brand-name{top:.15px;gap:5px}.brand-title,.brand-subtitle{text-box-trim:trim-both;text-box-edge:cap alphabetic}}
main{padding:22px 0 36px;min-height:calc(100svh - 143px)}.eyebrow{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:1px}.muted{color:var(--muted)}.small{font-size:12px;line-height:1.6}h1{font-size:27px;line-height:1.2;font-weight:600;letter-spacing:-.6px;margin:0;overflow-wrap:anywhere}h2{font-size:14px;line-height:1.4;font-weight:600;margin:0}p{line-height:1.6}
button{border-radius:8px;min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--field);color:var(--text);font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:9px}button:hover:enabled{background:#32353c}button:active:enabled{background:#3b3f47}
/* Вкладки дошок: три однакові цілі, CPU і DRAM відкривають Coming soon. */
.test-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 22px}.test-tabs button{flex-direction:column;justify-content:flex-start;gap:5px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);min-width:0;min-height:64px;padding:10px 4px 13px;font-size:12px;position:relative}.test-tabs button:hover:enabled{background:var(--panel)}.test-tabs button[aria-pressed=true]{border-color:var(--line);background:var(--panel);color:var(--text)}.test-tabs button[aria-pressed=true]:after{content:"";position:absolute;bottom:3px;left:calc(50% - 16px);width:32px;height:2px;border-radius:2px;background:var(--accent)}.test-name{font-weight:600}.test-description{font-size:11px;font-weight:400;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 1px 16px}.section-heading>div{min-width:0}.section-heading p{margin:6px 0 0;overflow-wrap:anywhere}.stats{flex-shrink:0;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;text-align:right;padding-bottom:3px}
.board-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0;overflow:hidden}.board-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.filter{display:flex;flex-direction:column;gap:7px;width:min(320px,100%);min-width:0}.share{display:flex;align-items:center;gap:10px;flex-shrink:0}.share button{min-height:44px;font-size:12px;padding:8px 12px}.copy-status{font-size:11px;line-height:1.3;color:#a3d9be;text-align:right}.copy-status:empty{display:none}.copy-status.error{color:#ff8ca8}
/* Меню фільтра — той самий listbox, що в LINK (dropdown.js). */
.hydra-dropdown{width:100%;min-width:0}.dropdown-trigger{display:grid;grid-template-columns:minmax(0,1fr) 10px;gap:10px;width:100%;min-width:0;min-height:44px;border:1px solid transparent;border-radius:7px;background:var(--field);color:var(--text);padding:10px 11px;font-size:14px;text-align:left;font-weight:400}.dropdown-trigger:hover:enabled,.dropdown-trigger:active:enabled{background:#30333a;border-color:#494d57}.dropdown-trigger[aria-expanded=true]{border-color:#854052}.dropdown-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);justify-self:center;align-self:center;opacity:.75}.dropdown-trigger[aria-expanded=true] .dropdown-arrow{transform:translateY(2px) rotate(225deg)}.dropdown-menu{position:fixed;z-index:1000;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#666d78 var(--panel);padding:4px;border:1px solid #454951;border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 10px 26px #0007;font-size:14px}.dropdown-option{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:12px;padding:10px;min-height:44px;line-height:1.4;border-radius:5px;cursor:pointer}.dropdown-option>span:first-child{overflow-wrap:anywhere}.dropdown-option[aria-selected=true]{background:#342129;color:#f3c5d0}.dropdown-option.active{background:#34373f;color:var(--text)}.dropdown-check{text-align:center;color:#f0a0b5}
/* Таблиця як у вкладці ED: #, Player, GPU, Silicon, CPU, Score; місця 1–3 — світло-червоний номер і білий скор. */
.board{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;font-variant-numeric:tabular-nums}.board th{color:var(--muted);font-size:11px;font-weight:400;letter-spacing:.4px;text-align:center;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.board td{padding:12px;border-bottom:1px solid var(--row-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.board tbody tr:last-child td{border-bottom:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.col-pick{width:44px;padding-left:0!important;padding-right:0!important}.col-pick input{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--accent);cursor:pointer}.col-pick input:disabled{cursor:default;opacity:.35}
/* Як таблиця ED у HYDRA: усі колонки по центру, ширини в пропорції FillWeight (#, Silicon, Score — 45; Player, GPU,
   CPU — 100). Змішане вирівнювання ліворуч/праворуч притискало Silicon до CPU і робило відступи нерівними. */
tr.run td{text-align:center}.col-place{width:10%}.col-user{width:22%}.col-gpu{width:22%}.col-silicon{width:10%}.col-cpu{width:22%}.col-score{width:10%}
.board td.col-user,.board td.col-score{color:var(--text)}.board td.col-score{font-weight:600}.col-user .name{display:block;overflow:hidden;text-overflow:ellipsis}.col-user .sub{display:none}
.podium td.col-place{color:var(--podium);font-weight:600}.podium td.col-score{color:#fff}
tr.run{cursor:pointer}tr.run:hover td{background:#23252a}tr.run:focus-visible{outline:2px solid #e84b70;outline-offset:-2px}tr.run.is-open td{background:#342129;border-bottom-color:transparent}tr.run.is-open td.col-place,tr.run.is-open td.col-score,tr.run.is-open td.col-user{color:#fff}
.run-details td{background:#2a1c22;white-space:normal;padding:4px 18px 16px}.run-details dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px;margin:0}.run-details dt{color:#c9a3ad;font-size:11px;margin:0 0 3px}.run-details dd{margin:0;color:var(--text);font-size:13px;overflow-wrap:anywhere}@media(min-width:721px){.run-details .column-field{display:none}}
/* Деталі прогону й порівняння — як Show more і Compare HYDRA: SCORE і FPS, місце чипа, налаштування, графік із вибором
   каналу (лінії #1 і #2 кольорами HYDRA) і Min / Avg / Max / Median під ним. */
.run-detail{display:flex;flex-direction:column;gap:14px;padding-top:12px}.detail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}.figures{display:flex;gap:28px}.figure{display:flex;flex-direction:column;gap:2px}.figure span{color:#c9a3ad;font-size:11px}.figure strong{font-size:20px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.chip-rank{margin:0;color:#f0a0b5;font-size:13px}.settings{margin:0;font-size:13px;color:var(--text);line-height:1.6;overflow-wrap:anywhere}.settings .muted{color:#c9a3ad}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-head .hydra-dropdown{width:min(260px,62%)}.chart-head .dropdown-trigger{min-height:36px;padding:7px 10px;font-size:13px}.chart{min-width:0}.chart-svg{display:block;max-width:100%}.chart-svg .grid{stroke:#3a2b31;stroke-width:1}.chart-svg .tick{fill:var(--muted);font-size:10px;font-family:inherit}.chart-svg .cursor{stroke:#8e8e96;stroke-width:1;stroke-dasharray:3 3}.chart-readout{margin:0 0 6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.6em;overflow-wrap:anywhere}.chart-empty{margin:6px 0;font-size:12px}
.chart-stats{border-collapse:collapse;margin-top:8px;font-size:12px;font-variant-numeric:tabular-nums;width:100%;table-layout:auto}.chart-stats th{color:var(--muted);font-weight:400;font-size:11px;text-align:right;padding:4px 8px 4px 0}.chart-stats th:first-child{text-align:left}.chart-stats td{text-align:right;padding:4px 8px 4px 0;color:var(--text);white-space:nowrap}.chart-stats td.stats-name{text-align:left;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.run-details dl{margin-top:2px}
.compare-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;margin:0 0 16px;min-width:0}.compare-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.compare-head .quiet{color:var(--muted);background:transparent;border-color:transparent;min-height:36px;padding:6px 10px;font-size:12px}.compare-head .quiet:hover{color:var(--text);background:var(--field)}.compare-scroll{overflow-x:auto}.compare-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;margin-bottom:14px}.compare-table th,.compare-table td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--row-line);vertical-align:top}.compare-table thead th{font-size:13px;font-weight:600;border-bottom-color:var(--line);overflow-wrap:anywhere}.compare-table tbody th{color:var(--muted);font-weight:400;font-size:12px;width:120px;white-space:nowrap}.compare-table td{color:var(--text);overflow-wrap:anywhere}.compare-table td.better{color:#90ee90}.compare-panel .chart-head{margin-bottom:6px}
.share #compare-open{min-width:104px}
.board-state{padding:38px 18px;text-align:center}.board-state p{margin:0 0 14px}.board-state p:last-child{margin:0}.updated{margin:12px 1px 0;font-variant-numeric:tabular-nums}.updated:empty{display:none}
.placeholder{background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center;padding:36px 18px}.placeholder-mark{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 16px;border:1px solid var(--line);border-radius:12px;font-size:19px;color:var(--muted)}.coming-soon{display:inline-flex;border:1px solid var(--line);border-radius:20px;padding:5px 9px;font-size:11px;color:var(--muted);margin:4px 0}.placeholder .small{max-width:300px;margin:10px auto 12px}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px;padding:20px 0;border-top:1px solid var(--line)}footer span{text-align:right}
@media(min-width:1120px){.shell{padding-left:40px;padding-right:40px}.dropdown-trigger,.dropdown-menu{font-size:13px}.dropdown-option{min-height:36px;padding-top:8px;padding-bottom:8px}}
/* Вузький екран: GPU переходить під ім'я гравця, Silicon і CPU — у розгорнутий рядок. */
@media(max-width:720px){.col-gpu,.col-silicon,.col-cpu{display:none}.col-user{width:auto}.col-user .sub{display:block;margin-top:3px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}tr.run.is-open .col-user .sub{color:#e4bbc6}.col-place{width:44px}.col-score{width:96px}.col-pick{width:36px}.figures{gap:20px}}
@media(max-width:480px){.shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}header{min-height:74px}main{padding-top:18px}.section-heading{flex-direction:column;align-items:flex-start;gap:8px}.stats{text-align:left;padding:0}h1{font-size:25px}.board-toolbar{flex-wrap:wrap;padding:14px}.filter{width:100%}.share{width:100%;justify-content:flex-end}.board td{padding:11px 8px}.board th{padding:10px 8px}.col-score{width:84px}.col-place{width:38px}.run-details td{padding:4px 14px 14px}.run-details dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.col-pick{width:32px}.figures{gap:16px}.figure strong{font-size:18px}.compare-panel{padding:14px}.compare-table tbody th{width:84px}.chart-head{flex-wrap:wrap}.chart-head .hydra-dropdown{width:100%}.share{flex-wrap:wrap}}