:root{--ink: #101317;--muted: #5a6472;--faint: #8b95a3;--line: #dfe5ee;--paper: #fff;--paper-2: #f5f7fa;--accent: #14324f;--radius: 8px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper-2);font-size:15px}button{font:inherit;color:inherit;cursor:pointer}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--accent);color:#fff}.bar h1{margin:0;font-size:15px;font-weight:650;letter-spacing:.04em}.bar .spacer{margin-left:auto}.bar button{background:#ffffff1a;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:6px;padding:6px 12px;font-size:13px}.bar button:hover{background:#fff3}.bar button.primary{background:#fff;color:var(--accent);font-weight:650;border-color:#fff}.titleInput{font:inherit;font-size:13px;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px 10px;color:#fff;min-width:220px}.titleInput::placeholder{color:#fff9}.notice{padding:8px 16px;background:#fff8e7;border-bottom:1px solid #e8d5a8;font-size:13px}.work{display:flex;flex:1;min-height:0;align-items:stretch;gap:14px;padding:14px}.palette{width:252px;flex:none;display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:13px;align-self:flex-start;max-height:100%;overflow-y:auto}.kitRail{width:186px}.palette h2{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}.palette section>button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:12.5px;margin-bottom:5px}.palette section>button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.palette section>button:disabled{opacity:.4;cursor:not-allowed}.hint{font-size:11.5px;color:var(--muted);margin:0 0 8px;line-height:1.4}.segmented{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}.segmented button{flex:1;min-width:42px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:5px 6px;font-size:11.5px;text-transform:capitalize}.segmented button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.teamBlock{margin-bottom:10px}.teamName{font-size:11.5px;font-weight:650;margin-bottom:4px}.teamName span{font-weight:400;color:var(--faint)}.numRow{display:flex;gap:3px;margin-bottom:4px;flex-wrap:wrap}.numBtn{background:none;border:1.5px solid transparent;border-radius:8px;padding:2px;line-height:0}.numBtn:hover{border-color:var(--line);background:var(--paper-2)}.numBtn.on{border-color:var(--accent);background:#eaf0f6}.lineKey{margin-left:auto;flex:none;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:4px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center}.lineBtn.on .lineKey{color:var(--accent);border-color:var(--accent)}.lineBtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px;margin-bottom:5px}.lineBtn>svg{flex:none}.lineBtn>span{flex:1;min-width:0}.lineBtn.on{border-color:var(--accent);background:#eaf0f6;font-weight:600}.kitGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.kitBtn{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:6px 4px;font-size:10.5px}.kitBtn.on{border-color:var(--accent);background:#eaf0f6;font-weight:600}.stage{flex:1;display:flex;justify-content:center;align-items:stretch;min-width:0;min-height:0}.canvas{width:100%;height:100%;min-height:0;border:1px solid var(--line);border-radius:var(--radius);touch-action:none}.canvas{user-select:none;-webkit-user-select:none}.canvas text{user-select:none;-webkit-user-select:none}.canvas.tool-select{cursor:default}.canvas.tool-player,.canvas.tool-kit{cursor:copy}.canvas.tool-line{cursor:crosshair}.selRing{fill:none;stroke:#2f80ed;stroke-width:3;stroke-dasharray:5 4}.canvas .token,.canvas.tool-select .lineHit{cursor:grab}.lineMark>:not(.lineHit){pointer-events:none}.foot{display:flex;gap:20px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}@media(max-width:1000px){.work{flex-direction:column}.palette,.kitRail{width:100%;max-height:none;align-self:auto}.canvas{height:auto;aspect-ratio:auto;min-height:60vh}.app{height:auto;overflow:visible}.work{flex-direction:column;padding:10px}.palette,.kitRail{width:100%;max-height:none}.kitGrid,.kitRail .kitGrid{grid-template-columns:repeat(3,1fr)}}@media print{@page{margin:12mm}html,body,#root{height:auto}.app{display:block;height:auto;overflow:visible}.bar,.palette,.kitRail,.foot,.notice{display:none!important}.work{display:block;height:auto;min-height:0;padding:0}.stage{display:block;height:auto;min-height:0}.canvas{display:block;width:100%;height:auto;max-height:9in;margin:0 auto;border:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.printTitle{display:block!important}.handle,.handleBend,.selRing,.marquee,.snapRing,.chrome{display:none!important}}.printTitle{display:none;margin:0 0 8px;font-size:15px;font-weight:650}.colorRow{margin-bottom:8px}.colorLabel{font-size:11.5px;font-weight:650;display:block;margin-bottom:4px}.swatches{display:flex;gap:4px;flex-wrap:wrap}.swatch{width:22px;height:22px;border-radius:5px;border:2px solid transparent;box-shadow:inset 0 0 0 1px #0000002e;padding:0}.swatch.on{border-color:var(--accent)}.swatchCustom{background:linear-gradient(135deg,#f66,#6cf,#6f9);cursor:pointer}.marquee{fill:#2f80ed1f;stroke:#2f80ed;stroke-width:2;stroke-dasharray:6 4}.sidedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}.sidedGrid .kitBtn{font-size:12px;font-weight:600;padding:7px 4px}.sidedCustom{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;padding:8px;margin-bottom:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px}.sidedCustom label{font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px}.sidedCustom input{font:inherit;font-size:12.5px;width:52px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:#fff}.sidedCustom>span{font-size:12px;color:var(--faint);padding-bottom:6px}.sidedCustom .tmplBtn{width:auto;flex:1;margin:0;text-align:center}.sectionSplit{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--line)}.shirtRow{margin-bottom:10px}.shirtBtn{min-width:26px;padding:3px 5px;font-size:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:5px}.shirtBtn.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:650}.tmplBtn{display:block;width:100%;text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:12px;margin-bottom:5px}.tmplBtn:hover{border-color:var(--accent);background:#eaf0f6}.chromeBox{fill:none;stroke:#2f80ed;stroke-width:2;stroke-dasharray:6 4}.chromeMember{fill:none;stroke:#2f80ed;stroke-width:1.4;stroke-opacity:.55;pointer-events:none}.chromeCorner{fill:#2f80ed;stroke:#fff;stroke-width:1.5;cursor:nwse-resize}.chromeArm{stroke:#2f80ed;stroke-width:2}.chromeKnob{fill:#fff;stroke:#2f80ed;stroke-width:2.2;cursor:grab}.chromeKnobIcon{fill:none;stroke:#2f80ed;stroke-width:2;stroke-linecap:round;pointer-events:none}.chromeKnobArrow{fill:#2f80ed;pointer-events:none}.chrome{pointer-events:none}.chrome .chromeKnob,.chrome .chromeCorner{pointer-events:auto}.handle{fill:#fff;stroke:#2f80ed;stroke-width:2.5;cursor:grab}.handleBend{fill:#2f80ed;stroke:#fff}.snapRing{fill:#2f80ed29;stroke:#2f80ed;stroke-width:3;pointer-events:none}.labelInput{width:100%;font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:6px 9px;margin-bottom:6px;background:#fff}.labelInput:focus{outline:2px solid var(--accent);outline-offset:1px}
