/* RACE CONTROL — game shell (agent GAME) */
:root { --g-ease: cubic-bezier(.2,.8,.2,1); --g-glass: rgba(10,14,23,.78); }
#app { position: fixed; inset: 0; overflow: hidden; }
.gi { display: block; flex: none; }
.gi-wrap { display: inline-flex; }
.sp { flex: 1; }
.muted { color: var(--text-3); }
.pos { color: var(--green); } .neg { color: #ff6b6b; }

/* ---------- screens ---------- */
.menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s; z-index: 0; }
.menu-bg.hide { opacity: 0; }
.screen { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: translateY(10px); transition: opacity .38s var(--g-ease), transform .38s var(--g-ease); display: flex; flex-direction: column; }
.screen.in { opacity: 1; transform: none; }
.screen.out { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.panel-screen { background: linear-gradient(90deg, rgba(3,4,9,.93) 0%, rgba(3,4,9,.86) 55%, rgba(3,4,9,.74) 100%); backdrop-filter: blur(2px); }

/* ---------- buttons ---------- */
.g-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); padding: 8px 16px; border-radius: 5px; font: 600 13px var(--font); letter-spacing: .04em; cursor: pointer; transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; white-space: nowrap; }
.g-btn:hover { background: var(--panel-3); border-color: #3c4d73; }
.g-btn:active { transform: translateY(1px); }
.g-btn.primary { background: linear-gradient(180deg, #f0140d, #c70500); border-color: #ff3b30; color: #fff; box-shadow: 0 4px 18px rgba(225,6,0,.25); }
.g-btn.primary:hover { background: linear-gradient(180deg, #ff2a22, #d80600); box-shadow: 0 6px 24px rgba(225,6,0,.38); }
.g-btn.ghost { background: transparent; }
.g-btn.danger { background: #2a0707; border-color: #7a1616; color: #ff8080; }
.g-btn.danger:hover { background: #3a0909; border-color: var(--red); }
.g-btn.sm { padding: 5px 11px; font-size: 12px; }
.g-btn.lg { padding: 11px 22px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.g-btn[disabled] { opacity: .4; pointer-events: none; }
.g-iconbtn { appearance: none; background: transparent; border: 0; color: var(--text-2); cursor: pointer; padding: 4px; border-radius: 4px; display: grid; place-items: center; }
.g-iconbtn:hover { color: #fff; background: var(--panel-3); }
.g-back { appearance: none; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line-2); color: var(--text-2); padding: 7px 14px 7px 10px; border-radius: 5px; font: 600 12.5px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.g-back:hover { color: #fff; border-color: #3c4d73; background: var(--panel-2); }
.g-sub { font: 700 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.g-sub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.g-sub.sm { margin: 12px 0 6px; }
.g-p { color: var(--text-2); line-height: 1.6; margin: 0 0 10px; font-size: 14px; }
.g-note { color: var(--text-3); font-size: 12.5px; line-height: 1.55; margin: 8px 0 0; }
.g-pre { background: var(--bg); border: 1px solid var(--line); padding: 10px; border-radius: 4px; color: #ff8080; white-space: pre-wrap; font-size: 12px; }
.badge { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 7px; font: 700 10.5px var(--mono); letter-spacing: 0; }
.g-input { width: 100%; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text); padding: 10px 12px; border-radius: 5px; font: 600 15px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
.g-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225,6,0,.15); }
.g-input.err { border-color: var(--red); animation: g-shake .3s; }
@keyframes g-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* segmented */
.g-seg { display: flex; gap: 4px; background: var(--bg-1); border: 1px solid var(--line); padding: 3px; border-radius: 6px; flex-wrap: wrap; }
.g-seg-b { appearance: none; flex: 1; min-width: 70px; display: flex; flex-direction: column; align-items: center; gap: 1px; background: transparent; border: 1px solid transparent; color: var(--text-2); padding: 7px 10px; border-radius: 4px; cursor: pointer; font: 600 13px var(--font); transition: all .15s; position: relative; }
.g-seg-b:hover { color: #fff; background: var(--panel-2); }
.g-seg-b.on { background: var(--panel-3); border-color: var(--accent); color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.g-seg-b.locked { opacity: .45; cursor: not-allowed; }
.g-seg-lock { position: absolute; top: 4px; right: 5px; color: var(--text-3); }
.g-seg-d { font: 500 10.5px var(--font); color: var(--text-3); letter-spacing: .02em; }
.g-seg-b.on .g-seg-d { color: var(--text-2); }
.g-seg.sm .g-seg-b { padding: 4px 9px; min-width: 50px; font-size: 12px; }

/* slider / toggle rows */
.g-slider { display: grid; grid-template-columns: 1fr 180px 52px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.g-slider-l { color: var(--text); font-weight: 600; }
.g-slider-v { color: var(--text-2); text-align: right; font-size: 12px; }
.g-slider input { accent-color: var(--accent); width: 100%; }
.g-row-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.g-row-l { font-weight: 600; }
.g-row-d { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.g-toggle { appearance: none; width: 42px; height: 22px; border-radius: 11px; background: var(--panel-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.g-toggle-k { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform .2s var(--g-ease), background .2s; }
.g-toggle.on { background: rgba(0,210,106,.18); border-color: var(--green); }
.g-toggle.on .g-toggle-k { transform: translateX(20px); background: var(--green); }

/* ---------- modal ---------- */
.g-modal-back { position: fixed; inset: 0; z-index: 900; background: rgba(2,3,7,.6); backdrop-filter: blur(5px); display: grid; place-items: center; opacity: 0; transition: opacity .2s; padding: 24px; }
.g-modal-back.in { opacity: 1; }
.g-modal { width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: linear-gradient(180deg, #111827, #0b101b); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset; transform: translateY(14px) scale(.98); transition: transform .25s var(--g-ease); overflow: hidden; }
.g-modal.wide { width: min(980px, 100%); }
.g-modal-back.in .g-modal { transform: none; }
.g-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line); position: relative; }
.g-modal-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.g-modal-title { flex: 1; font: 700 15px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.g-modal-body { padding: 18px 20px; overflow: auto; }
.g-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.2); flex-wrap: wrap; }

/* ---------- toasts ---------- */
.g-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 950; display: flex; flex-direction: column; gap: 8px; width: 380px; pointer-events: none; }
.g-toast { pointer-events: auto; position: relative; display: flex; gap: 10px; padding: 11px 13px 13px; background: rgba(13,18,29,.96); border: 1px solid var(--line-2); border-left: 3px solid var(--text-3); border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: g-toast-in .35s var(--g-ease); overflow: hidden; cursor: pointer; backdrop-filter: blur(6px); }
.g-toast.out { animation: g-toast-out .3s var(--g-ease) forwards; }
@keyframes g-toast-in { from { transform: translateX(110%); opacity: 0; } }
@keyframes g-toast-out { to { transform: translateX(110%); opacity: 0; } }
.g-toast-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--panel-3); color: var(--text-2); }
.g-toast.k-good { border-left-color: var(--green); } .g-toast.k-good .g-toast-ic { background: rgba(0,210,106,.15); color: var(--green); }
.g-toast.k-bad { border-left-color: var(--red); } .g-toast.k-bad .g-toast-ic { background: rgba(255,45,45,.15); color: #ff6b6b; }
.g-toast.k-hint { border-left-color: var(--yellow); } .g-toast.k-hint .g-toast-ic { background: rgba(255,212,0,.13); color: var(--yellow); }
.g-toast.k-warn { border-left-color: var(--orange); } .g-toast.k-warn .g-toast-ic { color: var(--orange); }
.g-toast.k-info { border-left-color: var(--blue); } .g-toast.k-info .g-toast-ic { color: #7aa8ff; }
.g-toast-body { flex: 1; min-width: 0; }
.g-toast-title { font: 700 13px var(--font); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.g-toast-pts { margin-left: auto; font-size: 12px; font-weight: 700; }
.g-toast-text { color: var(--text-2); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.g-toast-reason { color: var(--text-3); font-size: 12px; line-height: 1.45; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-style: italic; }
.g-toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; color: var(--line-2); transform-origin: left; animation: g-toast-bar linear forwards; }
@keyframes g-toast-bar { to { transform: scaleX(0); } }

/* ---------- boot ---------- */
.boot-screen { align-items: center; justify-content: center; background: rgba(3,4,9,.55); cursor: default; }
.boot-center { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boot-mark { animation: g-pulse 2.2s ease-in-out infinite; }
@keyframes g-pulse { 50% { filter: drop-shadow(0 0 18px rgba(225,6,0,.55)); } }
.boot-title { font: 900 44px var(--font); letter-spacing: .32em; padding-left: .32em; }
.boot-bar { width: 320px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ff6a3d); animation: g-load 1.4s var(--g-ease) forwards; }
.loading-screen .boot-bar i { animation: g-loadloop 1s ease-in-out infinite; width: 40%; }
@keyframes g-load { to { width: 100%; } }
@keyframes g-loadloop { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.boot-log { font-size: 11.5px; color: var(--text-3); min-height: 100px; width: 320px; line-height: 1.7; }
.boot-log div { animation: g-fade .25s; }
.boot-log div::before { content: '> '; color: var(--accent); }
@keyframes g-fade { from { opacity: 0; } }
.boot-press { margin-top: 8px; font: 600 12px var(--font); letter-spacing: .25em; text-transform: uppercase; color: var(--text-2); opacity: 0; transition: opacity .5s; }
.boot-screen.ready { cursor: pointer; }
.boot-screen.ready .boot-press { opacity: 1; animation: rc-blink 1.6s ease-in-out infinite; }
.loading-screen { align-items: center; justify-content: center; background: var(--bg); }
.load-c { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.load-t { font: 600 13px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }

/* ---------- main menu ---------- */
.menu-screen { flex-direction: row; }
.menu-left { width: min(560px, 44vw); padding: 7vh 0 4vh 6vw; display: flex; flex-direction: column; }
.menu-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 6vh; animation: g-slide-in .7s var(--g-ease) both; }
.menu-title { margin: 0; font: 900 54px/0.95 var(--font); letter-spacing: .08em; display: flex; flex-direction: column; }
.menu-title span { color: transparent; -webkit-text-stroke: 1.2px #fff; letter-spacing: .12em; }
.menu-subtitle { white-space: nowrap; margin-top: 10px; font: 600 13px var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); }
@keyframes g-slide-in { from { opacity: 0; transform: translateX(-24px); } }
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item { appearance: none; display: flex; align-items: center; gap: 14px; text-align: left; background: transparent; border: 0; border-left: 2px solid transparent; color: var(--text); padding: 11px 16px 11px 14px; cursor: pointer; position: relative; animation: g-slide-in .5s var(--g-ease) both; transition: background .2s, border-color .2s, padding .2s; border-radius: 0 6px 6px 0; }
.menu-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(225,6,0,.16), transparent 80%); opacity: 0; transition: opacity .2s; border-radius: inherit; }
.menu-item:hover { border-left-color: var(--accent); padding-left: 20px; }
.menu-item:hover::before { opacity: 1; }
.menu-ic { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-2); background: rgba(13,18,29,.6); flex: none; position: relative; transition: all .2s; }
.menu-item:hover .menu-ic { color: #fff; border-color: var(--accent); background: rgba(225,6,0,.12); }
.menu-item.primary .menu-ic { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 20px rgba(225,6,0,.35); }
.menu-tx { flex: 1; display: flex; flex-direction: column; position: relative; }
.menu-tx b { font: 700 17px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.menu-tx small { color: var(--text-3); font-size: 12.5px; margin-top: 1px; }
.menu-item.minor { padding-top: 6px; padding-bottom: 6px; }
.menu-item.minor .menu-ic { width: 40px; height: 26px; border: 0; background: none; }
.menu-item.minor .menu-tx b { font-size: 13px; color: var(--text-2); }
.menu-arrow { color: var(--accent); opacity: 0; transform: translateX(-8px); transition: all .2s; position: relative; }
.menu-item:hover .menu-arrow { opacity: 1; transform: none; }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; color: var(--text-3); font-size: 11px; padding-top: 20px; }
.menu-right { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding: 5vh 4vw; gap: 16px; }
.menu-live { display: flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(10,14,23,.6); }
.menu-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.menu-card { margin-top: auto; width: 320px; background: var(--g-glass); border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; backdrop-filter: blur(8px); animation: g-fade .8s .4s both; }
.menu-card-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.menu-card-h b { display: block; font-size: 15px; } .menu-card-h small { color: var(--text-2); }
.menu-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.menu-card-row label { color: var(--text-3); } .menu-card-row .meter { width: 140px; }

.avatar { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2b3956, #121a29); border: 2px solid var(--accent); font-family: var(--font); font-weight: 900; letter-spacing: .04em; color: #fff; flex: none; box-shadow: 0 0 0 3px rgba(225,6,0,.12); }
.avatar.xl { width: 88px; height: 88px; font-size: 32px; }
.avatar.sm { width: 36px; height: 36px; font-size: 13px; }
.avatar.boss { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,123,255,.12); }
.meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .8s var(--g-ease); }
.meter.rep i { background: linear-gradient(90deg, var(--blue), #64c4ff); }
.meter.xp i { background: linear-gradient(90deg, var(--accent), #ff8a00); }

/* ---------- generic screen head ---------- */
.scr-head { display: flex; align-items: center; gap: 18px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,18,29,.7), rgba(13,18,29,.2)); flex: none; flex-wrap: wrap; }
.scr-head-t h2 { margin: 0; font: 800 22px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.scr-head-t small { color: var(--text-3); font-size: 12.5px; }

/* ---------- setup ---------- */
.setup-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 6px 32px 24px; overflow: auto; }
.setup-main { min-width: 0; }
.trk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trk-card { appearance: none; text-align: left; background: rgba(13,18,29,.75); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px; cursor: pointer; color: var(--text); transition: all .2s var(--g-ease); position: relative; overflow: hidden; }
.trk-card:hover { border-color: #3c4d73; transform: translateY(-2px); }
.trk-card.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(225,6,0,.1), rgba(13,18,29,.85)); box-shadow: 0 8px 30px rgba(225,6,0,.15); }
.trk-card.on::after { content: 'GEWÄHLT'; position: absolute; top: 10px; right: 10px; font: 700 9.5px var(--mono); letter-spacing: .12em; color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 3px; }
.trk-svg { height: 130px; color: #c8d3ea; }
.trk-info b { display: block; font-size: 15px; } .trk-info small { color: var(--text-3); font-size: 12px; }
.trk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.trk-stats label { display: block; font: 600 9.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field { margin-top: 18px; }
.field-l { font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; }
.setup-side { background: rgba(13,18,29,.8); border: 1px solid var(--line-2); border-radius: 8px; padding: 2px 18px 18px; align-self: start; position: sticky; top: 0; margin-top: 8px; }
.setup-side .g-btn { width: 100%; margin-top: 18px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sum-row label { color: var(--text-3); flex: none; }
.sum-row span { text-align: right; color: var(--text); }

/* ---------- new career ---------- */
.nc-body { flex: 1; display: grid; place-items: center; overflow: auto; padding: 20px; }
.nc-card { width: min(620px, 100%); background: rgba(13,18,29,.85); border: 1px solid var(--line-2); border-radius: 10px; padding: 24px 28px; box-shadow: var(--shadow); }
.nc-badge { display: flex; gap: 18px; align-items: center; padding: 16px; border: 1px dashed var(--line-2); border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px); }
.nc-badge-t { display: flex; flex-direction: column; }
.nc-badge-t small { font: 700 10px var(--mono); letter-spacing: .2em; color: var(--text-3); }
.nc-badge-t b { font: 900 22px var(--font); letter-spacing: .2em; }
.nc-badge-t span { font-size: 11px; color: var(--accent-2); letter-spacing: .1em; }
.nc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nc-card > .g-btn { width: 100%; margin-top: 22px; }
.rank-ladder { display: flex; gap: 6px; }
.rank-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11px; color: var(--text-3); }
.rank-step i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 700 11px var(--mono); font-style: normal; }
.rank-step.on i { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(225,6,0,.5); }
.rank-step.on { color: #fff; }
.rank-step.done i { background: rgba(0,210,106,.15); border-color: var(--green); color: var(--green); }
.rank-ladder.v { flex-direction: column; gap: 0; }
.rank-ladder.v .rank-step { flex-direction: row; text-align: left; gap: 10px; padding: 5px 0; position: relative; }
.rank-ladder.v .rank-step small { display: block; color: var(--text-3); font-size: 10.5px; }
.rank-ladder.v .rank-step span { font-size: 12.5px; font-weight: 600; }

/* ---------- career hub ---------- */
.ch-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr 360px; gap: 22px; padding: 4px 32px 22px; overflow: auto; }
.ch-col { min-width: 0; }
.ch-profile { display: flex; align-items: center; gap: 14px; padding: 18px 0 8px; }
.ch-prof-t b { display: block; font-size: 18px; } .ch-prof-t span { display: block; color: var(--accent-2); font-weight: 700; font-size: 13px; letter-spacing: .04em; } .ch-prof-t small { color: var(--text-3); }
.ch-xp { margin-top: 12px; }
.ch-xp-h { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.ch-xp-h label { color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 10.5px; }
.ch-xp small { color: var(--text-3); font-size: 11.5px; display: block; margin-top: 4px; }
.warn-t { color: var(--orange) !important; display: flex !important; align-items: center; gap: 4px; }
.unlocks { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); }
.ch-event { margin-top: 18px; background: linear-gradient(160deg, rgba(225,6,0,.12), rgba(13,18,29,.9) 40%); border: 1px solid var(--line-2); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow); }
.ch-ev-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.ch-round { color: var(--accent-2); font-weight: 700; letter-spacing: .1em; }
.ch-event h3 { margin: 6px 0 10px; font: 800 26px var(--font); letter-spacing: .03em; }
.ch-ev-mid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.ch-ev-svg { height: 160px; }
.obj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.obj-list li { display: flex; align-items: center; gap: 8px; } .obj-list li .gi { color: var(--accent-2); }
.ch-ev-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ch-chart-card { margin-top: 6px; }
.hist-chart svg { height: auto; max-height: 220px; display: block; }
.chart-legend { display: flex; gap: 18px; font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.chart-legend span::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.lg-r::before { background: var(--accent); } .lg-b::before { background: var(--blue); }
.chart-empty { padding: 30px; text-align: center; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: 8px; font-size: 13px; }
.ch-cal { display: flex; flex-direction: column; gap: 2px; }
.cal-row { display: grid; grid-template-columns: 26px 44px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; font-size: 13px; }
.cal-row.cur { background: rgba(225,6,0,.1); border: 1px solid rgba(225,6,0,.4); }
.cal-row.next { opacity: .6; }
.cal-n { color: var(--text-3); font-size: 11px; }
.cal-svg { height: 26px; }
.cal-name small { display: block; color: var(--text-3); font-size: 11px; }
.cal-tag { font: 700 9.5px var(--mono); letter-spacing: .1em; color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 3px; }
.cal-grade { font: 900 15px var(--font); width: 34px; text-align: center; }
.g-a { color: var(--green); } .g-b { color: #9be15d; } .g-c { color: var(--yellow); } .g-d { color: var(--orange); } .g-f { color: var(--red); }
.ch-inbox { display: flex; flex-direction: column; gap: 4px; }
.mail-row { appearance: none; display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(13,18,29,.7); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 5px; cursor: pointer; transition: border-color .15s; }
.mail-row:hover { border-color: #3c4d73; }
.mail-row.unread { border-left: 3px solid var(--blue); }
.mail-row.unread b { color: #fff; }
.mail-row b { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row small { color: var(--text-3); font-size: 11px; }
.mail-t { min-width: 0; flex: 1; }
.mail-ic { color: var(--text-3); } .mail-row.k-warning .mail-ic, .mail-row.k-demotion .mail-ic { color: var(--orange); } .mail-row.k-promotion .mail-ic { color: var(--yellow); }
.mail-from { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.mail-from small { display: block; color: var(--text-3); font-size: 12px; }
.mail-body p { margin: 0 0 4px; line-height: 1.6; color: var(--text-2); }

/* ---------- scenarios ---------- */
.scn-body { flex: 1; overflow: auto; padding: 20px 32px 28px; }
.scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.scn-card { appearance: none; text-align: left; display: flex; flex-direction: column; background: rgba(13,18,29,.82); border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; color: var(--text); cursor: pointer; transition: all .2s var(--g-ease); animation: g-rise .4s var(--g-ease) both; position: relative; overflow: hidden; }
.scn-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-2); transition: background .2s; }
.scn-card:hover { transform: translateY(-3px); border-color: #3c4d73; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.scn-card:hover::before { background: var(--accent); }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } }
.scn-top { display: flex; align-items: center; gap: 8px; }
.scn-n { font-size: 20px; font-weight: 700; color: var(--text-3); }
.scn-cat { font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); border: 1px solid rgba(255,59,48,.4); padding: 1px 6px; border-radius: 3px; }
.scn-svg { height: 64px; margin: 6px 0; opacity: .9; }
.scn-title { font: 700 16px var(--font); letter-spacing: .02em; }
.scn-goal { color: var(--text-2); font-size: 12.5px; line-height: 1.5; margin: 6px 0 10px; flex: 1; }
.scn-foot { display: flex; gap: 6px; font-size: 11px; color: var(--text-3); }
.scn-best { margin-left: auto; color: var(--text-2); }
.scn-diff { display: flex; align-items: center; gap: 10px; }
.scn-diff .field-l { margin: 0; }
.stars { display: inline-flex; gap: 2px; color: #2b3956; }
.stars .on { color: var(--yellow); filter: drop-shadow(0 0 4px rgba(255,212,0,.5)); }
.stars .on .gi { fill: currentColor; }
.brief { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
.brief-k { font-size: 11px; color: var(--accent-2); letter-spacing: .2em; font-weight: 700; }
.brief-text { font-size: 15px; line-height: 1.65; color: var(--text); margin: 8px 0 14px; }
.brief-goal { display: flex; gap: 12px; padding: 12px 14px; background: rgba(225,6,0,.08); border: 1px solid rgba(225,6,0,.35); border-radius: 6px; color: var(--accent-2); }
.brief-goal p { margin: 2px 0 0; color: var(--text); line-height: 1.5; }
.brief-goal b { color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.brief-tips { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.6; font-size: 13px; }
.brief-stars { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 11.5px; color: var(--text-3); }
.brief-stars > span { display: inline-flex; align-items: center; gap: 4px; }
.brief-svg { height: 170px; margin-bottom: 8px; }

/* ---------- settings / monitors / compendium ---------- */
.set-body { flex: 1; overflow: auto; padding: 4px 32px 30px; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 1200px; }
.mon-body { flex: 1; overflow: auto; padding: 4px 32px 30px; }
.lay-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lay-big { appearance: none; text-align: left; background: rgba(13,18,29,.82); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px; color: var(--text); cursor: pointer; transition: all .2s; }
.lay-big:hover { border-color: #3c4d73; }
.lay-big.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lay-big .lay-diag { height: 120px; }
.lay-big-t { margin-top: 10px; } .lay-big-t b { display: block; } .lay-big-t small { color: var(--text-3); }
.lay-big p { color: var(--text-2); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.lay-diag { display: grid; gap: 3px; background: var(--bg); padding: 4px; border-radius: 4px; border: 1px solid var(--line); }
.lay-diag i { background: var(--panel-3); border-radius: 2px; display: grid; place-items: center; font: 600 9px var(--font); font-style: normal; color: var(--text-3); overflow: hidden; text-transform: uppercase; letter-spacing: .05em; }
.lay-diag i.v-cctv { background: #1d2a45; color: #8fb0ff; } .lay-diag i.v-trackmap { background: #13302a; color: #6fe0b5; } .lay-diag i.v-stewards { background: #2b1d3d; color: #c79bff; } .lay-diag i.v-control { background: #3a1616; color: #ff8a80; }
.lay-menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.lay-card { appearance: none; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); border-radius: 6px; padding: 8px; cursor: pointer; text-align: left; }
.lay-card.on { border-color: var(--accent); }
.lay-card .lay-diag { height: 80px; margin-bottom: 6px; }
.lay-card b { display: block; font-size: 12.5px; } .lay-card small { color: var(--text-3); font-size: 11px; }
.mon-multi { display: flex; align-items: center; gap: 30px; margin-top: 10px; }
.mon-multi > div { flex: 1; }
.mon-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mon-set { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mon-set-h { display: flex; gap: 10px; }
.mon-set-h small { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.4; }
.mon-n { font-size: 28px; font-weight: 700; color: var(--accent-2); line-height: 1; }
.mon-set-w { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mon-chip { font-size: 11.5px; color: var(--text-2); padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; }
.mon-single { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mon-b { appearance: none; display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); padding: 7px 10px; border-radius: 4px; font: 600 12px var(--font); cursor: pointer; }
.mon-b:hover { border-color: var(--accent); }
.keys { display: flex; flex-direction: column; gap: 6px; }
.keys.cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.keys-r { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); }
kbd { display: inline-block; min-width: 92px; text-align: center; font: 700 11.5px var(--mono); background: linear-gradient(180deg, #1b263d, #111a2b); border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 4px; padding: 3px 8px; color: #fff; }
.keys.cols kbd { min-width: 70px; }
.comp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 18px 32px 24px; }
.comp-nav { display: flex; flex-direction: column; gap: 3px; }
.comp-nav-b { appearance: none; text-align: left; background: transparent; border: 0; border-left: 2px solid var(--line); color: var(--text-2); padding: 9px 14px; font: 600 14px var(--font); cursor: pointer; transition: all .15s; }
.comp-nav-b:hover { color: #fff; border-left-color: #3c4d73; }
.comp-nav-b.on { color: #fff; border-left-color: var(--accent); background: linear-gradient(90deg, rgba(225,6,0,.12), transparent); }
.comp-content { overflow: auto; background: rgba(13,18,29,.75); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 28px 24px; max-width: 980px; }
.comp-content h3 { font: 800 22px var(--font); letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 10px; }
.comp-item { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: g-fade .3s; }
.comp-item b { display: block; font-size: 15px; margin-bottom: 3px; }
.comp-item p { margin: 0; color: var(--text-2); line-height: 1.65; font-size: 14px; }
.flag-sw { flex: none; margin-top: 2px; }
.pen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pen { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; align-items: center; font-size: 13px; padding: 6px 10px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px; }
.pen .mono { color: var(--accent-2); font-weight: 700; }
.pen i { grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, var(--yellow), var(--red)); border-radius: 2px; }
.credits p { line-height: 1.6; }

/* ---------- report ---------- */
.rep-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 32px 22px; gap: 18px; overflow: auto; }
.rep-top { display: grid; grid-template-columns: 240px 1fr 300px; gap: 22px; }
.rep-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.04), rgba(13,18,29,.85) 70%); border: 1px solid var(--line-2); border-radius: 10px; padding: 18px; }
.rep-grade { font: 900 108px/1 var(--font); letter-spacing: -.02em; animation: g-grade 1s .25s var(--g-ease) both; text-shadow: 0 0 40px currentColor; }
@keyframes g-grade { 0% { opacity: 0; transform: scale(2.2); filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); } }
.rep-pct { font-size: 20px; color: var(--text-2); margin-top: 4px; }
.rep-hero-l { margin-top: 6px; font: 700 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.rep-mid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rep-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rep-cat { background: rgba(13,18,29,.8); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.rep-cat.na { opacity: .55; }
.rep-cat-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; }
.rep-cat small { color: var(--text-3); font-size: 11px; }
.rep-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 7px 0 5px; }
.rep-bar i { display: block; height: 100%; width: 0; border-radius: 3px; animation: g-bar .9s var(--g-ease) forwards; }
.rep-bar i.hi { background: var(--green); } .rep-bar i.mid { background: var(--yellow); } .rep-bar i.lo { background: var(--red); }
@keyframes g-bar { to { width: var(--w); } }
.rep-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.kpi { border-left: 2px solid var(--accent); padding: 2px 10px; }
.kpi label { display: block; font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.kpi b { font-size: 16px; }
.rep-side { background: rgba(13,18,29,.85); border: 1px solid var(--line-2); border-radius: 10px; padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rep-side .g-btn { margin-top: auto; }
.obj-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.obj-res li { display: flex; gap: 8px; align-items: center; }
.obj-res li.ok .gi { color: var(--green); } .obj-res li.no { color: var(--text-3); } .obj-res li.no .gi { color: var(--red); }
.rep-xp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.rep-xp label { display: block; font: 700 10px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rep-xp b { font-size: 18px; }
.rep-banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; font-size: 13px; animation: g-rise .5s 1.2s both; }
.rep-banner.promo { background: rgba(255,212,0,.1); border: 1px solid rgba(255,212,0,.5); color: var(--yellow); }
.rep-banner.demo, .rep-banner.warn { background: rgba(255,138,0,.1); border: 1px solid rgba(255,138,0,.5); color: var(--orange); }
.rep-banner b { color: #fff; }
.rep-scn-t { font-size: 17px; }
.rep-stars { margin: 10px 0; } .rep-stars .stars span { animation: g-star .5s var(--g-ease) both; } .rep-stars .stars span:nth-child(2) { animation-delay: .25s; } .rep-stars .stars span:nth-child(3) { animation-delay: .5s; }
@keyframes g-star { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.rep-side small { color: var(--text-3); }
.rep-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-review { background: rgba(13,18,29,.85); border: 1px solid var(--line-2); border-radius: 10px; display: flex; flex-direction: column; min-height: 260px; }
.rep-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 10px; }
.rep-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); padding: 11px 14px; font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rep-tab.on { color: #fff; border-bottom-color: var(--accent); }
.rep-tab-body { padding: 4px 4px 8px; overflow: auto; }
.rep-table-w { overflow: auto; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-table th { text-align: left; font: 700 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 9px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #0d121d; }
.rep-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rep-table tr:hover td { background: rgba(255,255,255,.015); }
.rep-table td small { color: var(--text-3); }
.rep-table td small.acc, .rep-table td small.late { display: block; margin-top: 2px; }
.rep-table td small.late { color: var(--orange); }
.rep-table td.reason { color: var(--text-2); font-size: 12px; line-height: 1.5; max-width: 420px; }
.rep-table td.pts { font-weight: 700; text-align: right; }
.vd { display: inline-block; font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid; white-space: nowrap; }
.vd-good { color: var(--green); border-color: rgba(0,210,106,.5); background: rgba(0,210,106,.08); }
.vd-ok { color: #9be15d; border-color: rgba(155,225,93,.4); }
.vd-mid { color: var(--yellow); border-color: rgba(255,212,0,.4); }
.vd-bad { color: #ff6b6b; border-color: rgba(255,45,45,.45); background: rgba(255,45,45,.07); }
.rep-empty { padding: 30px; text-align: center; color: var(--text-3); }
.rep-log { display: flex; flex-direction: column; }
.log-r { display: grid; grid-template-columns: 60px 200px 1fr 60px; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; border-left: 2px solid transparent; }
.log-r.k-good { border-left-color: var(--green); } .log-r.k-bad { border-left-color: var(--red); } .log-r.k-hint { border-left-color: var(--yellow); }
.log-r > span:nth-child(3) { color: var(--text-2); }
.log-r .pts { text-align: right; font-weight: 700; }

/* ---------- session: HUD ---------- */
.session-screen { background: var(--bg); }
.hud { flex: none; height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 10px 0 0; background: linear-gradient(180deg, #0f1522, #0a0e17); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.hud::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent 30%); }
.hud-brand { display: flex; align-items: center; gap: 10px; height: 100%; padding-right: 14px; border-right: 1px solid var(--line); min-width: 0; max-width: 300px; }
.hud-logo { height: 100%; width: 46px; display: grid; place-items: center; background: var(--accent); font: 900 16px var(--font); letter-spacing: .04em; flex: none; }
.hud-brand-t { min-width: 0; }
.hud-brand-t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-brand-t small { color: var(--text-3); font-size: 11px; letter-spacing: .04em; }
.hud-phase { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 4px; font: 800 13px var(--font); letter-spacing: .12em; background: var(--panel-2); border: 1px solid var(--line-2); min-width: 150px; justify-content: center; transition: all .25s; }
.hud-phase i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.hud-phase.k-green { color: var(--green); border-color: rgba(0,210,106,.45); background: rgba(0,210,106,.08); }
.hud-phase.k-yellow { color: #111; background: var(--yellow); border-color: var(--yellow); }
.hud-phase.k-yellow i { background: #111; box-shadow: none; animation: rc-blink .8s steps(2) infinite; }
.hud-phase.k-sc { color: #111; background: var(--sc); border-color: var(--sc); animation: g-hudpulse 1.2s ease-in-out infinite; }
.hud-phase.k-sc i { background: #111; }
.hud-phase.k-vsc { color: var(--sc); border: 2px solid var(--sc); background: rgba(255,176,0,.08); }
.hud-phase.k-red { color: #fff; background: var(--red); border-color: var(--red); animation: g-hudpulse 1s ease-in-out infinite; }
.hud-phase.k-chq { color: #111; background: repeating-conic-gradient(#fff 0 25%, #ddd 0 50%) 0 0 / 12px 12px; border-color: #fff; }
.hud-phase.k-neutral { color: var(--text-2); }
@keyframes g-hudpulse { 50% { filter: brightness(1.25); } }
.hud-kv { display: flex; flex-direction: column; line-height: 1.15; }
.hud-kv label { font: 700 9.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.hud-kv > span, .hud-kv div > span { font-size: 15px; font-weight: 600; }
.hud-w { flex-direction: row; align-items: center; gap: 8px; }
.hud-w .hud-wic { color: var(--text-2); }
.hud-w div span { font-size: 13px !important; white-space: nowrap; }
.hud-w label { display: block; }
.hud-sp { flex: 1; }
.hud-score span { color: var(--yellow); }
.hud-paused { display: none; font: 800 11px var(--mono); letter-spacing: .16em; color: #111; background: var(--yellow); padding: 4px 9px; border-radius: 3px; animation: rc-blink 1.2s steps(2) infinite; }
.is-paused .hud-paused { display: block; }
.hud-ts { display: flex; background: var(--bg); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; }
.hud-ts-b { appearance: none; background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--text-2); width: 36px; height: 30px; display: grid; place-items: center; cursor: pointer; font-size: 12px; font-weight: 700; }
.hud-ts-b:last-child { border-right: 0; }
.hud-ts-b:hover { color: #fff; background: var(--panel-2); }
.hud-ts-b.on { background: var(--accent); color: #fff; }
.hud-ts-b[disabled] { opacity: .25; pointer-events: none; }
.hud-icons { display: flex; gap: 2px; }
.hud-ib { appearance: none; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--text-2); cursor: pointer; }
.hud-ib:hover { color: #fff; background: var(--panel-2); border-color: var(--line-2); }
.hud-menu { color: #fff; }

/* ---------- desk ---------- */
.desk { flex: 1; min-height: 0; position: relative; padding: 6px; }
.desk-grid { position: absolute; inset: 6px; display: grid; gap: 6px; }
.desk-cell { position: relative; min-width: 0; min-height: 0; display: flex; }
.desk-host { flex: 1; min-width: 0; min-height: 0; display: flex; }
.desk-host > * { flex: 1; min-width: 0; min-height: 0; }
.desk-host > .rc-panel { width: 100%; }
.g-fallback { display: grid; place-items: center; color: var(--text-3); font-size: 12px; }
.desk-gutters { position: absolute; inset: 0; pointer-events: none; }
.desk-gutter { position: absolute; pointer-events: auto; z-index: 4; }
.desk-gutter.col { width: 8px; cursor: col-resize; }
.desk-gutter.row { height: 8px; cursor: row-resize; }
.desk-gutter::after { content: ''; position: absolute; background: var(--accent); opacity: 0; transition: opacity .15s; }
.desk-gutter.col::after { left: 3px; width: 2px; top: 0; bottom: 0; }
.desk-gutter.row::after { top: 3px; height: 2px; left: 0; right: 0; }
.desk-gutter:hover::after { opacity: .7; }
body.desk-dragging { user-select: none; }
body.desk-dragging.col { cursor: col-resize; } body.desk-dragging.row { cursor: row-resize; }
body.desk-dragging iframe, body.desk-dragging canvas { pointer-events: none; }
.desk-slot-ov { position: absolute; inset: 0; display: none; place-items: center; background: rgba(5,7,12,.72); border: 2px dashed var(--line-2); border-radius: var(--r); z-index: 3; backdrop-filter: blur(2px); }
.desk-editing .desk-slot-ov { display: grid; }
.desk-slot-ov.drop { border-color: var(--accent); background: rgba(225,6,0,.15); }
.desk-slot-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.desk-slot-k { font-size: 26px; font-weight: 700; color: var(--text-3); }
.desk-slot-sel { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); padding: 6px 10px; border-radius: 4px; font: 600 13px var(--font); }
.desk-palette { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; background: rgba(13,18,29,.96); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; gap: 6px; align-items: center; box-shadow: var(--shadow); flex-wrap: wrap; max-width: 92%; }
.desk-editing .desk-palette { display: flex; }
.desk-pal-l { font: 700 10.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.desk-chip { display: flex; align-items: center; gap: 4px; padding: 4px 9px 4px 5px; background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 4px; font-size: 12px; cursor: grab; color: var(--text); }
.desk-chip:hover { border-color: var(--accent); }

/* banners, holds, drawers */
.sess-banner { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); z-index: 20; pointer-events: none; }
.sess-banner-i { padding: 10px 40px; font: 900 26px var(--font); letter-spacing: .3em; border-radius: 4px; animation: g-banner .4s var(--g-ease); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.sess-banner-i.out { animation: g-banner-out .45s forwards; }
@keyframes g-banner { from { opacity: 0; transform: scaleX(.3); } }
@keyframes g-banner-out { to { opacity: 0; transform: translateY(-10px); } }
.sess-banner-i.k-green { background: var(--green); color: #002b14; }
.sess-banner-i.k-sc { background: var(--sc); color: #1c1200; }
.sess-banner-i.k-vsc { background: #111; color: var(--sc); border: 3px solid var(--sc); }
.sess-banner-i.k-red { background: var(--red); color: #fff; }
.sess-banner-i.k-chq { background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 22px 22px; color: transparent; -webkit-text-stroke: 0; }
.sess-banner-i.k-chq span { background: #111; color: #fff; padding: 2px 14px; }
.hold-ind { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 30; background: rgba(13,18,29,.96); border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 18px 12px; font: 800 13px var(--font); letter-spacing: .14em; overflow: hidden; }
.hold-ind i { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: currentColor; animation: g-load linear forwards; }
.hold-ind.k-sc { color: var(--sc); } .hold-ind.k-red { color: var(--red); }
.hold-ind.done { background: currentColor; } .hold-ind.done span { color: #111; }
.dev-drawer { position: absolute; left: 0; top: 58px; bottom: 6px; z-index: 15; display: flex; transform: translateX(-110%); visibility: hidden; transition: transform .3s var(--g-ease), visibility 0s .3s; pointer-events: none; }
.dev-drawer.open { transform: none; visibility: visible; transition: transform .3s var(--g-ease); }
.hud-ib.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.dev-body { width: 300px; background: rgba(10,14,23,.98); border: 1px solid var(--line-2); border-left: 0; border-radius: 0 8px 8px 0; padding: 4px 14px 14px; overflow: auto; pointer-events: auto; box-shadow: var(--shadow); }
.dev-tab { display: none; pointer-events: auto; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border: 0; padding: 14px 7px; border-radius: 0 6px 6px 0; font: 700 11px var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 18px rgba(225,6,0,.35); }
.dev-tab .gi { transform: rotate(90deg); }
.dev-h { font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 6px; }
.dev-p { font-size: 12px; color: var(--text-3); margin: 0 0 8px; line-height: 1.45; }
.dev-list { display: flex; flex-direction: column; gap: 3px; }
.dev-b { appearance: none; display: flex; flex-direction: column; text-align: left; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: 4px; cursor: pointer; font: 600 12.5px var(--font); }
.dev-b small { color: var(--text-3); font-size: 9.5px; }
.dev-b:hover { border-color: var(--accent); background: var(--panel-3); }
.dev-row { display: flex; gap: 6px; flex-wrap: wrap; }
.obj-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 60px; z-index: 14; width: min(560px, 60vw); background: rgba(10,14,23,.95); border: 1px solid rgba(225,6,0,.5); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; transition: width .3s; }
.obj-head { appearance: none; width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(225,6,0,.12); border: 0; color: var(--text); padding: 7px 12px; cursor: pointer; font: 700 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.obj-head .gi { color: var(--accent-2); }
.obj-chev { transform: rotate(-90deg); transition: transform .2s; }
.obj-panel.min { width: 200px; }
.obj-panel.min .obj-body { display: none; }
.obj-panel.min .obj-chev { transform: rotate(90deg); }
.obj-body { padding: 8px 14px 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.obj-body p { margin: 0; } .obj-body ul { margin: 0; padding-left: 18px; }
.stewards-drawer { position: absolute; right: 0; top: 58px; bottom: 6px; width: min(760px, 62vw); z-index: 16; display: flex; transform: translateX(105%); transition: transform .28s var(--g-ease); box-shadow: -20px 0 50px rgba(0,0,0,.55); }
.stewards-drawer.open { transform: none; }
.sd-host { flex: 1; display: flex; min-width: 0; }
.sd-host > * { flex: 1; min-width: 0; }
.sd-close { position: absolute; top: 3px; right: 6px; z-index: 2; }
.pause-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pause-stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; }
.pause-stat label { display: block; font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pause-stat b { font-size: 16px; }
.is-paused .desk { filter: saturate(.75); }

/* ---------- tutorial coach marks ---------- */
.coach-layer { position: fixed; inset: 0; z-index: 800; pointer-events: none; transition: opacity .3s; }
.coach-layer.out { opacity: 0; }
.coach-hole { position: absolute; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(2,3,7,.68); border: 2px solid var(--accent); transition: all .45s var(--g-ease); animation: g-coach 1.8s ease-in-out infinite; }
.coach-layer.center .coach-hole { box-shadow: 0 0 0 9999px rgba(2,3,7,.78); border: 0; }
@keyframes g-coach { 50% { border-color: rgba(255,59,48,.4); } }
.coach-card { position: absolute; width: 400px; pointer-events: auto; background: linear-gradient(180deg, #131b2c, #0c111c); border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: 8px; padding: 16px 18px 12px; box-shadow: 0 24px 60px rgba(0,0,0,.65); transition: left .45s var(--g-ease), top .45s var(--g-ease); }
.coach-layer.center .coach-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 520px; }
.coach-k { font-size: 10.5px; color: var(--accent-2); letter-spacing: .16em; font-weight: 700; }
.coach-title { font: 800 19px var(--font); margin: 4px 0 8px; }
.coach-text { color: var(--text-2); line-height: 1.6; font-size: 13.5px; }
.coach-text b { color: #fff; }
.coach-card.min .coach-text { max-height: 4.8em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
.coach-wait { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; background: rgba(255,212,0,.08); border: 1px solid rgba(255,212,0,.35); border-radius: 5px; color: var(--yellow); font: 600 12.5px var(--font); }
.coach-wait.on { display: flex; }
.coach-spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: g-spin .8s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
.coach-btns { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.coach-prog { display: flex; gap: 3px; margin-top: 12px; }
.coach-prog i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.coach-prog i.done { background: var(--green); } .coach-prog i.cur { background: var(--accent); }

/* ---------- responsive (laptop 1366) ---------- */
@media (max-width: 1500px) {
  .ch-body { grid-template-columns: 260px 1fr 310px; gap: 16px; padding: 4px 22px 18px; }
  .ch-ev-mid { grid-template-columns: 200px 1fr; }
  .ch-event h3 { font-size: 22px; }
  .rep-top { grid-template-columns: 200px 1fr 260px; }
  .rep-grade { font-size: 84px; }
  .rep-kpis { grid-template-columns: repeat(3, 1fr); }
  .lay-grid, .lay-menu { grid-template-columns: repeat(3, 1fr); }
  .keys.cols { grid-template-columns: repeat(3, 1fr); }
  .setup-body { grid-template-columns: 1fr 300px; padding: 4px 22px 18px; gap: 20px; }
  .trk-svg { height: 100px; }
  .scr-head { padding: 14px 22px; }
  .menu-title { font-size: 44px; }
  .menu-left { padding-top: 5vh; }
  .menu-brand { margin-bottom: 4vh; }
  .menu-item { padding-top: 8px; padding-bottom: 8px; }
  .hud { gap: 12px; }
  .hud-brand { max-width: 220px; }
  .hud-phase { min-width: 120px; padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 1400px) {
  .hud-kv.hud-w { display: none; }
}
@media (max-height: 800px) {
  .menu-tx small { font-size: 11.5px; }
  .menu-ic { width: 34px; height: 34px; }
  .menu-item { padding-top: 6px; padding-bottom: 6px; }
  .menu-tx b { font-size: 15px; }
}

/* roster editor */
.set-wide { grid-column: 1 / -1; }
.ros { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ros-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: 13px; }
.ros-intro b { color: var(--text); }
.ros-lock { color: var(--sc); font-size: 12.5px; }
.ros-team { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; padding: 12px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--tcol) 14%, var(--panel)), var(--panel) 45%); border: 1px solid var(--line); border-left: 4px solid var(--tcol); border-radius: 8px; }
.ros-th { display: flex; gap: 14px; align-items: center; }
.ros-em { display: inline-flex; }
.ros-tf { display: grid; grid-template-columns: 2fr .7fr .6fr .6fr; gap: 8px 10px; flex: 1; min-width: 0; }
.ros-tf .ros-f:nth-child(5), .ros-tf .ros-f:nth-child(6) { grid-column: span 2; }
.ros-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ros-f > span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.ros input, .ros select { width: 100%; min-width: 0; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text); border-radius: 5px; padding: 5px 8px; font: 600 13px var(--font); }
.ros input[type=color] { padding: 2px; height: 30px; cursor: pointer; }
.ros input:focus, .ros select:focus { outline: none; border-color: var(--tcol); }
.ros-drv { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ros-d { display: grid; grid-template-columns: 54px 58px 1fr 1fr; gap: 6px; }
.ros-d input { font-family: var(--mono); font-size: 12.5px; }
.ros-d input.w2 { font-family: var(--font); }
@media (max-width: 1100px) { .ros-team { grid-template-columns: 1fr; } .ros-tf { grid-template-columns: 1fr 1fr; } }