:root { --bg:#0f1216; --panel:#171b21; --line:#2a313b; --text:#e6e9ee; --dim:#98a2b1; --accent:#ffb300; --bad:#ff6b6b; --good:#6bd68f; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; } .brand .logo { height: 34px; width: auto; display: block; } .brand span { color: var(--dim); }
nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
nav button { background: none; border: 0; color: var(--dim); padding: 8px 12px; border-radius: 6px; font: inherit; cursor: pointer; white-space: nowrap; }
nav button.on { color: #111; background: var(--accent); font-weight: 600; } nav button:hover:not(.on) { color: var(--text); background: #222932; }
#status { color: var(--dim); font-size: 13px; text-align: right; min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bad { color: var(--bad); }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--dim); border-top-color: var(--accent); border-radius: 50%; margin-right: 7px; animation: sp .8s linear infinite; vertical-align: -1px; } @keyframes sp { to { transform: rotate(360deg); } }
main { display: flex; height: calc(100% - 48px); }
#viewWrap, #benchWrap { flex: 1; position: relative; min-width: 0; } #view { width: 100%; height: 100%; display: block; touch-action: none; }
#benchWrap iframe { width: 100%; height: 100%; border: 0; background: #000; }
[hidden] { display: none !important; }
.hintbar { position: absolute; left: 10px; bottom: 8px; color: var(--dim); font-size: 12px; pointer-events: none; text-shadow: 0 1px 2px #000; }
aside { width: 430px; max-width: 46vw; overflow-y: auto; padding: 16px 18px 40px; background: var(--panel); border-left: 1px solid var(--line); }
#stage[data-step="test"] aside { width: 300px; }
h2 { margin: 0 0 8px; font-size: 20px; } h3 { margin: 20px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); } h3 em { text-transform: none; letter-spacing: 0; font-weight: 400; }
p { margin: 8px 0; } .hint { color: var(--dim); font-size: 12.5px; } .warn { color: #ffb3b3; background: #3a1d1d; border-radius: 6px; padding: 6px 9px; font-size: 13px; } .ok { color: var(--good); }
a { color: var(--accent); }
.drop { display: block; border: 2px dashed #3a4350; border-radius: 12px; padding: 38px 16px; text-align: center; cursor: pointer; color: var(--dim); margin: 14px 0; } .drop:hover, .drop.busy { border-color: var(--accent); color: var(--text); } .drop input { display: none; }
.tips { padding-left: 18px; color: var(--dim); } summary { cursor: pointer; color: var(--dim); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .row label { color: var(--dim); }
select, input, textarea, button { font: inherit; color: var(--text); background: #0f1318; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
button { cursor: pointer; background: #222932; } button:hover { border-color: var(--accent); } button.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; padding: 8px 14px; }
input[type=color] { padding: 0; width: 34px; height: 28px; background: none; } input[type=range] { padding: 0; width: 70px; }
.f { display: block; margin: 9px 0; } .f > span { display: block; font-weight: 600; font-size: 13px; } .f span em, .f label em { color: var(--dim); font-weight: 400; font-style: normal; font-size: 12px; } .f input:not([type=range]), .f select, .f textarea { width: 100%; margin-top: 3px; } .f small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.three { display: flex; gap: 6px; } .three input { min-width: 0; } .three select { width: auto !important; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--dim); font-size: 13px; margin: 8px 0; } .facts b { color: var(--text); }
#legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: -1px; } .show { color: var(--dim); font-size: 13px; } .show label { color: var(--dim); }
.selbar { background: #2a2113; border: 1px solid #5a4210; border-radius: 8px; padding: 7px 10px; margin: 8px 0; }
#pfilter { width: 100%; margin: 6px 0; }
.plist { border: 1px solid var(--line); border-radius: 8px; max-height: 46vh; overflow-y: auto; }
.g { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid #1f252d; cursor: pointer; } .g:hover { background: #1d232b; } .g.sel { background: #2a2113; }
.gn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gn em { color: var(--dim); font-style: normal; } .gt { color: var(--dim); font-size: 12px; width: 52px; text-align: right; } .g select { width: 150px; padding: 2px 4px; font-size: 12.5px; }
.calc { width: 100%; border-collapse: collapse; margin: 8px 0; } .calc td { padding: 3px 6px; border-bottom: 1px solid #1f252d; } .calc td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; } .calc.small { font-size: 12.5px; color: var(--dim); }
.src { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 9px; } .src.g { background: #1c3a28; color: var(--good); } .src.d { background: #1f3045; color: #8ec5ff; } .src.a { background: #3a2f14; color: #ffd27a; }
.big { display: flex; gap: 14px; flex-wrap: wrap; background: #0f1318; border-radius: 8px; padding: 10px 12px; } .big b { font-size: 20px; } .big small { color: var(--dim); }
.mat { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; } .mn { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn em { color: var(--dim); font-style: normal; font-size: 12px; } .mat label { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 4px; }
@media (max-width: 800px) { main { flex-direction: column; } aside { width: 100%; max-width: none; height: 52%; border-left: 0; border-top: 1px solid var(--line); } #stage[data-step="test"] aside { width: 100%; height: 30%; } #viewWrap, #benchWrap { flex: none; height: 48%; } header { gap: 8px; } #status { display: none; } }

.nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.grp { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .grp:hover { background: #1d232b; }
.grp.has { border-color: #8a6a1d; background: #231d10; } .grp.act { border-color: var(--accent); background: #2a2113; }
.grp .sw, .sw { display: inline-block; width: 26px; height: 20px; border-radius: 4px; border: 1px solid #00000066; flex: none; vertical-align: -4px; }
.gn2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gname { width: 100%; background: none; border: 0; border-bottom: 1px dashed var(--line); padding: 1px 2px; } .grp em { color: var(--dim); font-style: normal; font-size: 12px; }
.grp .x { padding: 1px 7px; } .grp input[type=checkbox] { padding: 0; }
.tune { display: grid; grid-template-columns: 112px 1fr 52px auto; align-items: center; gap: 6px; margin: 5px 0; } .tune span { font-size: 13px; } .tune input[type=range] { width: 100%; } .tune input[type=text] { width: 52px; text-align: right; } .tune em { color: var(--dim); font-style: normal; font-size: 11px; min-width: 20px; }
#stage[data-step="test"] aside { width: 360px; }
.drop.small { padding: 12px 14px; margin: 8px 0; border-radius: 8px; }
.grp .ren { padding: 1px 6px; opacity: .6; } .grp .ren:hover { opacity: 1; } .gnt { cursor: pointer; }
/* review page */
#stage[data-step="review"] aside { width: 440px; } #listWrap { flex: 1; overflow: auto; padding: 18px 22px; } .login { max-width: 420px; margin: 8vh auto; } .login input { width: 100%; margin: 8px 0; }
.rtab { width: 100%; border-collapse: collapse; margin-top: 10px; } .rtab th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px; padding: 4px 8px; } .rtab td { padding: 7px 8px; border-top: 1px solid #1f252d; } .rtab tbody tr { cursor: pointer; } .rtab tbody tr:hover { background: #1d232b; } .rtab small { color: var(--dim); }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 9px; background: #222932; } .pill.new { background: #1f3045; color: #8ec5ff; } .pill.reviewing { background: #3a2f14; color: #ffd27a; } .pill.accepted { background: #1c3a28; color: var(--good); } .pill.declined { background: #3a1d1d; color: #ffb3b3; } .pill.rev { background: #2d2540; color: #c9b3ff; }
.prev { width: 100%; border-radius: 8px; margin: 8px 0; } .note { background: #1d232b; border-radius: 8px; padding: 8px 10px; } .rep { white-space: pre-wrap; font-size: 12px; color: var(--dim); max-height: 40vh; overflow: auto; } textarea { width: 100%; font: 12px/1.4 ui-monospace, monospace; }
.remember { display: block; margin: 6px 0 12px; color: var(--dim); } .remember small { display: block; margin-left: 22px; }
a.btn { display: inline-block; background: #222932; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; color: var(--text); text-decoration: none; } a.btn:hover { border-color: var(--accent); }

.filebtn { cursor: pointer; } .pic { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .pic em, .dec em { color: var(--dim); font-style: normal; font-size: 12px; }
.dec { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 6px 0; cursor: pointer; } .dec.act { border-color: var(--accent); }
.mat-name { color: var(--text); font-size: 12.5px; max-width: 55%; text-align: right; } .mat-name em { color: var(--dim); font-style: normal; }

#showall { position: absolute; right: 12px; bottom: 10px; background: #222932cc; backdrop-filter: blur(4px); } #viewWrap { position: relative; }
#ctxmenu { position: fixed; z-index: 50; background: #1b2028; border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 30px #000a; min-width: 210px; } #ctxmenu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 5px; } #ctxmenu button:hover { background: #2a3340; }
.g.has { background: #231d10; }