:root{color:#111827;--shell-side-margin: clamp(18px, calc(18px + (100vw - 1320px)*.2267) , 220px);--shell-width: calc(100vw - (var(--shell-side-margin) * 2));--desktop-content-height: min(812px, calc(100vh - 118px) , calc(var(--shell-width) * .504));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#eef2f0;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.appShell{min-height:100vh;padding:26px 18px 8px;background:radial-gradient(circle at 14% 10%,rgba(15,118,110,.08),transparent 28%),linear-gradient(135deg,#f8fafc,#eef4f1 48%,#f7f9fb)}.topBar{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(520px,1.45fr) auto;gap:18px;align-items:center;margin:0 auto 10px;width:var(--shell-width)}.brandLockup{display:flex;align-items:center;gap:14px;min-width:0}.brandMark{display:grid;flex:0 0 auto;width:40px;height:40px;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px) 13px 9px / 14px 44px no-repeat,linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px) 26px 9px / 14px 44px no-repeat,linear-gradient(180deg,#13985c,#065f35);box-shadow:inset 0 0 0 2px #ffffff57,0 12px 22px #064e3b38}.brandMark span{color:#fff;font-family:Georgia,serif;font-size:25px;font-weight:700}.eyebrow{margin:0 0 2px;color:#0f8f59;font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;color:#101828;font-size:1.48rem;line-height:1.05;text-transform:uppercase}.formationControls{display:flex;justify-content:center;gap:18px;min-width:0}.controlGroup{display:grid;gap:5px;min-width:0}.controlGroup>span{display:flex;align-items:center;justify-content:center;gap:10px;color:#6b7280;font-size:.68rem;font-weight:700;text-transform:uppercase;white-space:nowrap}.controlGroup>span:before,.controlGroup>span:after{display:block;width:82px;height:1px;background:#e1e6e4;content:""}.moreGroup>span:before,.moreGroup>span:after{width:48px}.buttonRow{display:flex;gap:10px}.formationButton,.ghostButton,.primaryButton,.selectWrap select,.saveButton,.deleteButton,.iconButton{min-height:52px;border:1px solid #d5dce0;border-radius:8px;background:#fff;color:#111827;box-shadow:0 10px 24px #0f172a0a}.formationButton{min-width:82px;min-height:38px;padding:0 16px;font-size:.94rem;font-weight:800}.formationButton.active,.primaryButton{border-color:#087f4f;color:#fff;background:linear-gradient(180deg,#078a54,#006b3f);box-shadow:0 18px 32px #006b3f3d}.selectWrap{position:relative;display:block}.selectWrap select{width:100%;min-width:184px;min-height:38px;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 42px 0 18px;font-weight:650}.selectWrap svg{position:absolute;top:50%;right:18px;pointer-events:none;transform:translateY(-50%)}.topActions{display:flex;gap:10px;justify-content:flex-end}.ghostButton,.primaryButton,.textButton,.darkToolButton{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}.ghostButton,.primaryButton{min-height:38px;padding:0 18px;font-weight:750}.workspace{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(360px,.94fr);gap:14px;align-items:stretch;width:var(--shell-width);margin:0 auto}.pitchPanel{position:relative;justify-self:stretch;overflow:hidden;width:100%;height:var(--desktop-content-height);aspect-ratio:auto;min-height:0;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 28%),linear-gradient(135deg,#135e26,#2f8b35);box-shadow:0 26px 70px #0a402542}.pitchPanel.dark{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 34%),linear-gradient(135deg,#061711,#123a22)}.pitchPanel:before{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,#ffffff0b 0,#ffffff0b 70px,#00000009 70px,#00000009 140px);content:""}.pitchToolbar{position:absolute;top:18px;left:22px;z-index:4}.compactSelect select{min-width:138px;min-height:46px;border:0;color:#fff;background:#08120fdb;box-shadow:0 16px 36px #00000038}.compactSelect svg{color:#fff}.pitch{position:absolute;top:50px;right:38px;bottom:62px;left:38px;touch-action:none}.pitchLine{position:absolute;border-color:#ffffff8f;pointer-events:none}.outerLine{top:0;right:0;bottom:0;left:0;border:4px solid rgba(255,255,255,.58)}.halfLine{top:50%;left:0;width:100%;border-top:4px solid rgba(255,255,255,.58)}.centerCircle{top:50%;left:50%;width:25%;aspect-ratio:1;border:4px solid rgba(255,255,255,.58);border-radius:999px;transform:translate(-50%,-50%)}.topBox,.bottomBox{left:28%;width:44%;height:16%;border:4px solid rgba(255,255,255,.58)}.topBox{top:0}.bottomBox{bottom:0}.topGoalBox,.bottomGoalBox{left:39%;width:22%;height:8%;border:4px solid rgba(255,255,255,.58)}.topGoalBox{top:0}.bottomGoalBox{bottom:0}.topArc,.bottomArc{left:41%;width:18%;aspect-ratio:1;border:4px solid rgba(255,255,255,.58);border-radius:50%}.topArc{top:11%;clip-path:inset(50% 0 0 0)}.bottomArc{bottom:11%;clip-path:inset(0 0 50% 0)}.corner{width:34px;height:34px;border:4px solid rgba(255,255,255,.58);border-radius:999px}.topLeft{top:-17px;left:-17px}.topRight{top:-17px;right:-17px}.bottomLeft{bottom:-17px;left:-17px}.bottomRight{right:-17px;bottom:-17px}.playerMarker{position:absolute;z-index:2;display:grid;width:128px;place-items:center;padding:0;background:transparent;transform:translate(-50%,-50%);transition:filter .16s ease,opacity .16s ease,transform .16s ease;-webkit-user-select:none;user-select:none;touch-action:none}.playerMarker:hover,.playerMarker.selected{z-index:8;filter:drop-shadow(0 0 18px rgba(255,255,255,.52));transform:translate(-50%,-50%) scale(1.08)}.playerMarker.dimmed{opacity:.58}.playerDisc{display:grid;width:62px;height:62px;place-items:center;border:2px solid rgba(255,255,255,.82);border-radius:50%;color:#fff;background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,#222b25,#0d1512);box-shadow:0 16px 34px #0000005c;font-size:1.42rem;font-weight:850}.playerName{display:block;max-width:132px;min-width:84px;margin-top:-2px;padding:6px 10px;overflow:hidden;border:1px solid rgba(15,23,42,.12);border-radius:8px;color:#111827;background:#fffffff5;box-shadow:0 10px 22px #00000029;font-size:.82rem;font-weight:800;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.pitchOptions{position:absolute;right:22px;bottom:20px;left:22px;z-index:4;display:flex;justify-content:space-between;gap:14px}.segmentedControl,.darkToolButton{overflow:hidden;border-radius:10px;background:#08120fdb;box-shadow:0 16px 36px #0003}.segmentedControl{display:flex;padding:0}.segmentedControl button,.darkToolButton{min-height:46px;padding:0 18px;color:#fff;background:transparent;font-weight:760}.segmentedControl button.active{background:#037957}.editorPanel{display:flex;flex-direction:column;height:auto;max-height:var(--desktop-content-height);min-height:0;overflow:auto;padding:20px;border:1px solid rgba(15,23,42,.1);border-radius:20px;background:#ffffffe0;box-shadow:0 24px 68px #0f172a14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.matchImportPanel{display:grid;gap:10px;margin:0 0 16px;padding-top:16px;border-top:1px solid #e5e7eb}.matchImportHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#0f7a50}.matchImportHeader div{display:grid;gap:1px}.matchImportHeader span{color:#64748b;font-size:.75rem;font-weight:800;text-transform:uppercase}.matchImportHeader strong{color:#111827;font-size:.94rem}.matchImportGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.matchImportGrid label{display:grid;gap:4px;min-width:0}.matchImportGrid label span{color:#64748b;font-size:.76rem;font-weight:750}.matchImportGrid input,.matchSelect select{width:100%;min-width:0;min-height:38px;border:1px solid #d8dee3;border-radius:8px;outline:none;color:#111827;background:#fff;box-shadow:inset 0 1px 2px #0f172a08}.matchImportGrid input{padding:0 10px}.loadSideControl{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #d8dee3;border-radius:8px;background:#fff}.loadSideControl button{min-height:34px;color:#475569;background:transparent;font-size:.84rem;font-weight:850}.loadSideControl button.active{color:#fff;background:#087f4f}.matchImportActions{display:grid;grid-template-columns:auto auto minmax(130px,1fr);gap:8px}.ghostMiniButton,.primaryMiniButton,.lineupLoadButtons button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border-radius:8px;font-size:.88rem;font-weight:800;white-space:nowrap}.ghostMiniButton{padding:0 14px;border:1px solid #d8dee3;color:#111827;background:#fff}.primaryMiniButton{padding:0 16px;color:#fff;background:#087f4f}.matchResults{display:grid;gap:10px}.matchSelect select{padding:0 40px 0 12px;font-weight:700}.matchResultCard{display:grid;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc}.matchResultCard>div:first-child{display:grid;gap:2px}.matchResultCard strong{color:#111827;font-size:.94rem}.matchResultCard span,.matchImportStatus{color:#64748b;font-size:.82rem;font-weight:650}.lineupLoadButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lineupLoadButtons button{padding:0 10px;border:1px solid rgba(8,127,79,.28);color:#087f4f;background:#fff}.matchImportStatus{margin:0}.tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:14px;border-bottom:1px solid #e5e7eb}.tabs button{position:relative;min-height:44px;color:#374151;background:transparent;font-weight:800;text-transform:uppercase}.tabs button.active{color:#07824f}.tabs button.active:after{position:absolute;right:0;bottom:-1px;left:0;height:3px;border-radius:999px;background:#07824f;content:""}.playerRows{display:grid;gap:8px}.playerRow{display:grid;grid-template-columns:40px minmax(0,1fr) 62px 44px;gap:9px;align-items:center;min-height:42px}.substituteRow{grid-template-columns:40px minmax(0,1fr) 62px 40px}.playerRow input,.libraryPanel input,.librarySelect select{width:100%;min-height:40px;border:1px solid #d8dee3;border-radius:8px;outline:none;color:#111827;background:#fff;box-shadow:inset 0 1px 2px #0f172a08;transition:border-color .14s ease,box-shadow .14s ease}.playerRow input{padding:0 12px}.playerRow input:focus,.libraryPanel input:focus,.matchImportGrid input:focus,.selectWrap select:focus{border-color:#099268;box-shadow:0 0 0 4px #09926824}.rowBadge{display:grid;width:38px;height:38px;place-items:center;border-radius:999px;color:#fff;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.16),transparent 26%),linear-gradient(145deg,#1f2937,#080d14);box-shadow:0 8px 18px #0f172a38;font-weight:850}.playerRow.selected .rowBadge{background:linear-gradient(145deg,#0f9f68,#006b3f);box-shadow:0 0 0 4px #09926824,0 8px 18px #0f172a38}.numberInput{text-align:center}.roleLabel{color:#008451;font-size:.86rem;font-weight:850;text-align:center}.iconButton,.saveButton,.deleteButton{display:grid;width:40px;min-width:40px;min-height:40px;place-items:center;padding:0}.panelActions{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;margin:16px 0;padding-top:4px}.textButton{min-height:34px;padding:0;color:#008451;background:transparent;font-weight:760}.libraryPanel{display:grid;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid #e5e7eb}.libraryHeader{display:flex;align-items:center;gap:10px;color:#334155;font-size:.94rem;font-weight:800}.saveGrid{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:10px}.libraryPanel input{padding:0 14px}.librarySelect select{min-width:100%;padding-left:14px;font-weight:600}.saveButton{border-color:#087f4f;color:#fff;background:#087f4f}.deleteButton{color:#9f1239;background:#fff7f8}.emptyState{margin:10px 0;color:#64748b;font-weight:650;text-align:center}@media(max-width:1320px){.topBar{grid-template-columns:auto minmax(0,1fr) auto}.topActions{justify-content:flex-start;grid-column:3;grid-row:1}.formationControls{grid-column:2;grid-row:1;justify-content:flex-start;gap:14px}.controlGroup>span{display:none}.workspace{grid-template-columns:1fr}.pitchPanel,.editorPanel{min-height:0}.pitchPanel{aspect-ratio:auto;justify-self:center;width:min(100%,max(560px,calc(124vh - 134px)));height:auto;aspect-ratio:1.24 / 1}.editorPanel{height:auto;max-height:none;overflow:visible}}@media(max-width:820px){.topBar{grid-template-columns:1fr}.topActions,.formationControls{grid-column:1;grid-row:auto}.appShell{padding:16px}.formationControls,.buttonRow,.topActions{flex-wrap:wrap}.controlGroup>span{justify-content:flex-start}.controlGroup>span:before,.controlGroup>span:after{width:42px}.formationButton{min-width:104px}.pitchPanel{width:min(100%,max(420px,calc(116vh - 190px)));height:auto;aspect-ratio:1.18 / 1;border-radius:16px}.pitch{top:76px;right:18px;bottom:82px;left:18px}.playerMarker{width:116px}.playerDisc{width:56px;height:56px;font-size:1.25rem}.playerName{min-width:76px;max-width:106px;padding:6px 8px;font-size:.72rem}.pitchOptions{right:18px;left:18px;flex-wrap:wrap}.editorPanel{padding:18px;border-radius:16px}.matchImportGrid{grid-template-columns:1fr}.playerRow{grid-template-columns:40px minmax(0,1fr) 58px 42px;gap:8px}.substituteRow{grid-template-columns:40px minmax(0,1fr) 58px 40px}.rowBadge{width:38px;height:38px}.roleLabel{font-size:.75rem}}@media(max-width:540px){.brandLockup{align-items:flex-start}.brandMark{width:46px;height:54px}.formationButton,.selectWrap select,.ghostButton,.primaryButton{min-height:46px}.selectWrap select{min-width:100%}.controlGroup,.moreGroup,.topActions,.ghostButton,.primaryButton{width:100%}.pitchPanel{width:100%;height:auto;aspect-ratio:1.12 / 1}.tabs button{font-size:.8rem}.matchImportActions,.lineupLoadButtons{grid-template-columns:1fr}.matchImportActions{display:grid}.playerRow,.substituteRow{grid-template-columns:38px minmax(0,1fr) 54px}.roleLabel,.substituteRow .iconButton{grid-column:2 / -1;justify-self:end}.panelActions{display:grid;justify-content:stretch}}