:root{--navy:#071629;--navy2:#0f2440;--navy3:#172f4f;--orange:#ff9135;--orange2:#ffb36a;--ink:#0c2139;--muted:#64758c;--stroke:#dce5ef;--page:#f2f6fb;--white:#fff;--soft:#e9f3fc;--green:#189879;--red:#be5366}
*{box-sizing:border-box}body{margin:0;font:15px/1.46 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--page)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}svg{display:block}
.app{display:flex;min-height:100vh}.sidebar{width:248px;background:linear-gradient(170deg,#08172b,#11294a);color:#d5e1f2;padding:27px 17px 20px;display:flex;flex-direction:column;gap:25px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;margin:2px 9px 14px}.crest{width:47px;height:47px;border:2px solid var(--orange);border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:900;color:var(--orange);letter-spacing:-1px;background:#15304b}.brand strong{display:block;color:#fff;font-size:20px;letter-spacing:.7px}.brand small{display:block;color:#a6b6ca;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}.side-label{font-size:10px;letter-spacing:1.7px;color:#7895b7;text-transform:uppercase;padding:0 13px;margin-bottom:8px}.nav{display:grid;gap:5px}.nav button{width:100%;text-align:left;border:0;background:transparent;color:#b9c9da;padding:12px 13px;border-radius:9px;display:flex;align-items:center;gap:11px;font-weight:600;font-size:13px}.nav button.active,.nav button:hover{background:#1c3b5d;color:white}.nav button.active{box-shadow:inset 3px 0 var(--orange)}.nav .emoji{font-size:16px;width:23px;text-align:center}.side-bottom{margin-top:auto;background:#173254;border:1px solid #2a4568;border-radius:12px;padding:14px;font-size:12px;color:#b0c6dd}.side-bottom b{color:white}.side-bottom p{margin:6px 0 0}.small-tag{font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:5px 8px;border-radius:7px;background:#23496b;color:#dbeefa;white-space:nowrap}
.content{flex:1;min-width:0}.top{background:#fff;border-bottom:1px solid var(--stroke);height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px}.overline{font-size:10px;text-transform:uppercase;letter-spacing:1.7px;color:#8090a5;font-weight:800}.top h1{font-size:21px;line-height:1.1;margin:4px 0}.topright{display:flex;gap:9px;align-items:center}.tag{font-size:11px;border-radius:30px;background:#ebf4ff;color:#315983;padding:8px 12px;font-weight:800}.tag.orange{background:#fff1e4;color:#a45c11}.main{max-width:1720px;margin:0 auto;padding:28px 30px 70px}.welcome{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:22px}.welcome h2{font-size:25px;letter-spacing:-.65px;margin:0 0 5px}.welcome p{color:var(--muted);margin:0;font-size:13px}.btn{background:#fff;border:1px solid #c9d9e7;color:#203951;font-weight:750;border-radius:9px;padding:10px 15px;display:inline-flex;gap:8px;align-items:center;justify-content:center;line-height:1.3;font-size:13px}.btn:hover{border-color:#6c9dc3;background:#f5faff}.btn.primary{background:var(--orange);color:#171f2e;border-color:var(--orange)}.btn.primary:hover{background:#ffa451}.btn.dark{background:var(--navy2);border-color:var(--navy2);color:#fff}.btn.sm{padding:7px 10px;font-size:12px}.btn.ghost{border:0;background:transparent;color:#627b91}.btn.ghost:hover{background:#e9f1fa}.pill{display:inline-flex;align-items:center;gap:6px;color:#58718b;background:#eff4f9;padding:5px 8px;border-radius:6px;font-size:11px;font-weight:800}.dot{height:7px;width:7px;background:var(--orange);display:inline-block;border-radius:50%}.hint{font-size:12px;color:#7889a0}.panel{border:1px solid var(--stroke);background:white;border-radius:14px;box-shadow:0 4px 22px #0b2e5510;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid #e7edf4}.panel-head h3{font-size:14px;margin:0}.panel-head small{font-size:11px;color:#8494a5}.panel-body{padding:19px}.row{display:flex;gap:10px;align-items:center}.grow{flex:1;min-width:0}.field{padding:11px 13px;background:#fff;border:1px solid #d8e3ef;border-radius:8px;outline:none;min-width:0;color:#1d3450;font-size:13px}.field:focus{border-color:#f39748;box-shadow:0 0 0 3px #ff963526}.field.fill{width:100%}.label{color:#60738a;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:7px}.layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(350px,1.08fr);gap:18px;align-items:start}.video-box{background:#08192d;aspect-ratio:16/9;width:100%;display:grid;place-items:center;position:relative;color:#c8d6e6;overflow:hidden}.video-box iframe{width:100%;height:100%;border:0}.placeholder{text-align:center;padding:20px}.placeholder .play{font-size:37px;display:grid;place-items:center;margin:0 auto 10px;background:#193858;border:1px solid #416487;width:72px;height:72px;border-radius:20px;color:#f6a65c}.placeholder b{display:block;color:white}.placeholder span{font-size:12px;display:block;margin-top:5px}.videocontrol{padding:17px 20px;display:grid;gap:11px}.now-data{padding:14px 17px;background:#f5f9fd;border:1px solid #dce7f0;border-radius:10px}.now-data b{font-size:13px}.now-data p{font-size:12px;color:#637992;margin:4px 0 0}.darkstrip{background:linear-gradient(130deg,#0c2644,#17466b);color:white;padding:19px;border-radius:11px;display:flex;gap:14px;align-items:flex-start}.darkstrip h3{font-size:14px;margin:0 0 5px}.darkstrip p{color:#b9cfe1;font-size:12px;margin:0}.iconbox{background:#ffffff20;border:1px solid #ffffff29;padding:8px;border-radius:11px;font-size:23px}.shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shortcut{background:#f8fbfe;border:1px solid #e4edf5;padding:12px;border-radius:10px;min-width:0}.shortcut b{font-size:19px;display:block;color:#19395e}.shortcut span{font-size:11px;color:#72869c}
.board-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}.boardleft,.boardright{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.tabs{display:flex;border-radius:9px;overflow:hidden;border:1px solid #d7e2ed;background:#f8fafc}.tabs button{font-size:12px;font-weight:800;padding:9px 12px;background:transparent;color:#56728d;border:0;border-right:1px solid #d7e2ed}.tabs button:last-child{border:0}.tabs button.on{background:#183452;color:white}.stage{background:#eaf5fb;border:1px solid #c3dae8;border-radius:12px;overflow:hidden;touch-action:none}.stage svg{width:100%;height:auto;touch-action:none;cursor:default}.stage.compare{display:block}.stage.compare svg{min-width:0}.rink-header{display:flex;justify-content:space-between;padding:9px 13px;background:#f7fbfe;border-bottom:1px solid #dbe8f2;font-size:11px;color:#54718c;font-weight:800}.board-caption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:#718398}.team-circle{display:inline-flex;vertical-align:-2px;height:12px;width:12px;border-radius:50%;background:#ff8e30;border:2px solid #fff;box-shadow:0 0 0 1px #f2a05c}.team-circle.rival{background:#8495a7;box-shadow:0 0 0 1px #9cb1c1}.team-circle.puck{background:#172536;box-shadow:0 0 0 1px #172536}.range{width:100%;accent-color:#ff9135}.stepper{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:15px}.stepper input{flex:1}.status{font-size:11px;color:#607c93;min-width:45px}.board-info{background:#fff7ef;border-left:3px solid var(--orange);border-radius:7px;margin-top:14px;padding:12px 14px;font-size:12px;color:#865325}.board-info b{color:#713d19}.board-info p{margin:4px 0 0}.section-title{font-size:16px;margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between}.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.scene-item{text-align:left;background:#fff;border:1px solid #dfe7f0;border-radius:12px;padding:15px;min-height:107px;transition:.15s}.scene-item:hover{border-color:var(--orange);transform:translateY(-1px)}.scene-item.on{border-color:#e68b38;box-shadow:0 0 0 1px #e68b38}.scene-item .num{font-size:11px;color:#e47a1c;font-weight:800;letter-spacing:1px}.scene-item b{display:block;font-size:13px;margin-top:7px}.scene-item p{font-size:11px;margin:4px 0 0;color:#708298}.library{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);gap:18px}.stamp-list{display:grid;gap:8px}.stamp{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border-radius:9px;border:1px solid #e1eaf2;background:#fafcfe;padding:12px}.stamp:hover{background:#fff8f1;border-color:#edb37b}.time{background:#112e4b;color:white;font-weight:800;padding:8px;border-radius:7px;font-size:12px}.stamp b{font-size:12px}.stamp small{display:block;color:#6f8093;font-size:11px;margin-top:2px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stack{display:grid;gap:14px}.stack textarea{min-height:95px;resize:vertical}.empty{padding:24px;text-align:center;color:#72869c;font-size:13px;background:#f8fbfe;border:1px dashed #bfcfdf;border-radius:10px}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--stroke);padding:15px 18px;border-radius:12px;margin-top:23px}.statusbar strong{font-size:12px}.statusbar span{font-size:12px;color:#6e8298}.footer{font-size:11px;color:#8190a1;text-align:center;padding:25px 0 0}.section{display:none}.section.visible{display:block}.flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.flowstep{padding:19px;background:white;border:1px solid var(--stroke);border-radius:12px}.flowstep .n{font-size:25px;color:var(--orange);font-weight:900}.flowstep h3{font-size:13px;margin:5px 0}.flowstep p{font-size:12px;color:#74869b;margin:0}.notice{background:#fff3e5;border:1px solid #ffd6a6;border-radius:10px;padding:14px 16px;font-size:12px;color:#805a29}.break{margin-top:15px}.flexbetween{display:flex;justify-content:space-between;align-items:center;gap:15px}.pre{background:#102946;border:1px solid #2b5274;color:#d6e5f3;border-radius:10px;padding:20px;font-size:13px;line-height:1.8}.modalwrap{position:fixed;inset:0;background:#041527ae;display:none;justify-content:center;align-items:center;padding:20px;z-index:20}.modalwrap.show{display:flex}.modal{max-width:510px;width:100%;background:#fff;border-radius:16px;padding:28px;box-shadow:0 10px 45px #04162a35}.modal h2{margin:0 0 10px;font-size:20px}.modal p,.modal li{font-size:13px;color:#63788d}.modal .btn{margin-top:10px}.hidden{display:none!important}
@media(max-width:1270px){.sidebar{width:207px}.scene-grid{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:1fr}.library{grid-template-columns:1fr}}
@media(max-width:800px){.app{display:block}.sidebar{width:100%;padding:13px 14px;gap:0}.brand{margin:0 0 6px}.crest{width:35px;height:35px;font-size:13px}.brand strong{font-size:15px}.side-label,.side-bottom{display:none}.nav{display:flex;overflow-x:auto}.nav button{white-space:nowrap;font-size:11px;padding:9px 11px}.nav .emoji{width:auto}.top{height:auto;padding:18px 16px}.top h1{font-size:16px}.topright .tag:not(.orange){display:none}.main{padding:19px 13px 45px}.welcome{align-items:flex-start}.welcome h2{font-size:19px}.welcome p{font-size:12px}.panel-body{padding:14px}.panel-head{padding:14px}.layout{grid-template-columns:minmax(0,1fr)}.scene-grid{grid-template-columns:1fr 1fr}.flow-steps{grid-template-columns:1fr}.shortcuts{grid-template-columns:1fr 1fr 1fr}.stage.compare{grid-template-columns:1fr}.board-toolbar{align-items:flex-start}.formrow{grid-template-columns:1fr}}
@media(max-width:460px){.scene-grid{grid-template-columns:1fr}.btn{font-size:11px;padding:9px}.topright{display:none}.boardleft,.boardright{width:100%}.field{font-size:12px}.row{flex-wrap:wrap}}

/* Edytor numerów na koszulkach — v0.2 */
.roster-panel{margin:0 0 14px;background:linear-gradient(115deg,#f6faff,#fff);border:1px solid #d4e3ef;border-radius:11px;overflow:hidden}
.roster-panel summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:13px 15px;font-weight:800;font-size:13px;list-style:none;color:#1c3a59}
.roster-panel summary::-webkit-details-marker{display:none}.roster-panel summary .chev{color:#ed8730;font-size:17px;transition:transform .15s}.roster-panel[open] summary .chev{transform:rotate(180deg)}
.roster-description{font-size:11px;color:#6a8298;font-weight:500}.roster-content{padding:4px 15px 15px;border-top:1px solid #e4edf5}
.roster-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.roster-team{border:1px solid #e2eaf3;border-radius:9px;background:#fff;padding:12px}.roster-team h4{font-size:12px;margin:0 0 9px;display:flex;align-items:center;gap:6px}.roster-team h4 small{font-weight:500;color:#8191a2}
.roster-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.roster-item{min-width:0;display:grid;gap:4px}.roster-item label{font-size:10px;font-weight:800;color:#536b83;letter-spacing:.45px}
.roster-item input{width:100%;height:38px;text-align:center;padding:7px 4px;font-weight:900;font-size:16px;border-radius:8px;border:1px solid #cfdce7;background:#f8fbff;color:#122e48;outline:none}
.roster-item input:focus{border-color:#f49643;box-shadow:0 0 0 3px #ff953526}.roster-item input::placeholder{font-size:13px;font-weight:650;color:#b0becc}
.roster-item input[aria-invalid="true"]{border-color:#b94e58;background:#fff5f5}
.roster-foot{margin-top:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.roster-foot span{font-size:11px;color:#71859a}.roster-foot .roster-feedback{color:#347359;font-weight:650}.roster-foot .roster-feedback.error{color:#ac4052}
@media(max-width:1000px){.roster-grid{grid-template-columns:1fr}}
@media(max-width:700px){#compareSlot{grid-template-columns:1fr!important}}

/* v0.3: editor */
.new-flag{background:#ec9134;color:#15253d;border-radius:4px;padding:2px 5px;font-size:8px;margin-left:auto;font-weight:900;letter-spacing:.6px}
.creator-main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,.8fr);gap:16px;align-items:start}.editor-panel{min-width:0}
.ed-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.ed-toolbar .field{max-width:320px}.ed-step-list{display:flex;gap:7px;align-items:stretch;overflow:auto;padding:10px 1px 5px;scrollbar-width:thin}.ed-step{flex:0 0 auto;min-width:115px;max-width:160px;border:1px solid #ccdae7;background:#f7fafc;border-radius:9px;padding:8px 10px;text-align:left}.ed-step.on{border-color:#e78c37;background:#fff3e8;box-shadow:inset 0 0 0 1px #ec9135}.ed-step strong{display:block;font-size:12px}.ed-step span{display:block;font-size:10px;color:#70849b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ed-ice{background:#edf8fd;border-radius:13px;border:1px solid #bad1e1;overflow:hidden;touch-action:none;position:relative}.ed-ice svg{display:block;width:100%;touch-action:none}.ed-marker{cursor:grab;touch-action:none}.ed-marker:active{cursor:grabbing}.ed-ice .is-selected .maincirc{stroke:#fff6a8;stroke-width:6}
.ed-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:11px;color:#71859b;margin:9px 0 0}.ed-tip{padding:10px 12px;background:#eff7ff;border:1px solid #d7e9f8;border-radius:9px;color:#3b668a;font-size:12px;line-height:1.55}
.ed-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.ed-left{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ed-aside{display:grid;gap:15px}.ed-input-row{display:grid;grid-template-columns:55px 70px minmax(0,1fr) 38px;align-items:center;gap:6px;margin:5px 0}.ed-input-row .field{padding:9px 6px;width:100%;text-align:center}.ed-input-row .field.name{text-align:left}.ed-input-row .pos{font-size:11px;font-weight:900;color:#3d5a75}.ed-input-row .hide{width:17px;height:17px;accent-color:var(--orange)}.ed-names{max-height:350px;overflow:auto}.ed-file{display:none}.ed-actions{display:flex;flex-wrap:wrap;gap:8px}.ed-actions button{flex:1}.ed-pct{font-size:12px;color:#657f94;min-width:40px}.ed-footer{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.ed-footer .btn{white-space:nowrap}.ed-error{color:#b54d4d!important}.ed-loading{color:#196c8e!important}.ed-help{font-size:11px;color:#8397a8}.ed-muted{color:#7790a6;font-size:11px}.ed-ice:focus-visible{outline:3px solid #ff9135}
@media(max-width:1180px){.creator-main{grid-template-columns:1fr}.ed-aside{grid-template-columns:repeat(2,minmax(0,1fr))}.ed-aside .panel:first-child{grid-row:span 2}}
@media(max-width:850px){.sidebar{width:80px;padding:16px 8px}.brand{margin:2px 0;justify-content:center}.brand strong,.brand small,.side-label,.side-bottom,.nav button{font-size:0}.nav button{justify-content:center;padding:12px 5px}.nav .emoji{font-size:21px}.new-flag{display:none}.main{padding:17px 15px 35px}.top{padding:0 16px}}
@media(max-width:700px){.app{display:block}.sidebar{width:100%;position:sticky;top:0;z-index:40;padding:6px 8px;display:flex;flex-direction:row;gap:8px;align-items:center}.brand{margin:0}.brand .crest{width:34px;height:34px;font-size:13px}.sidebar .nav{display:flex;gap:3px;overflow:auto}.sidebar>div:nth-child(2){flex:1;min-width:0}.sidebar .nav button{min-width:42px}.sidebar .nav button.active{box-shadow:inset 0 -3px var(--orange)}.top{height:62px}.top h1{font-size:17px}.topright .tag:first-child{display:none}.welcome{flex-wrap:wrap}.layout,.library{grid-template-columns:1fr}.scene-grid{grid-template-columns:repeat(2,1fr)}.ed-aside{grid-template-columns:1fr}.ed-aside .panel:first-child{grid-row:auto}.ed-footer{grid-template-columns:1fr 1fr}.ed-row .btn{font-size:12px}.creator-main .panel-body{padding:13px}}

/* v0.4 – rysowanie tras i odtwarzacz czasu */
.ed-toolstrip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:11px;background:#f5f9fd;border:1px solid #e0eaf3;border-radius:10px}
.ed-toolstrip .btn.active-tool{background:#142f50;border-color:#142f50;color:#fff}
.ed-mode-help{flex:1;min-width:145px;font-size:11px;color:#577087}
.ed-timeline{background:#f4f8fc;border:1px solid #dce7f0;border-radius:12px;padding:13px 14px;margin:12px 0}
.ed-transport{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.ed-transport .ed-muted{display:flex;align-items:center;gap:6px;margin-left:auto}
.ed-transport select{padding:7px 9px;min-width:80px}
.ed-transport .ed-pct{min-width:121px;text-align:right;font-weight:800;color:#183857;font-variant-numeric:tabular-nums}
.ed-timeline .range{height:21px;cursor:pointer}.ed-time-labels{display:flex;gap:8px;justify-content:space-between;color:#8395a7;font-size:10px;font-weight:800}
.ed-ice.drawing-mode{cursor:crosshair}.ed-ice.drawing-mode .ed-marker{cursor:crosshair}
.ed-ice .ed-route{pointer-events:none}.ed-ice .ed-route-selected{filter:drop-shadow(0 0 4px #f5a05d)}
@media(max-width:610px){.ed-transport .ed-muted{margin-left:0}.ed-mode-help{width:100%;order:9}.ed-transport .ed-pct{width:100%;text-align:left}}