.wb, .wb * { box-sizing: border-box; }
.wb { --wb-green: #25715c; --wb-green-soft: #eaf5ef; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: clip; margin: 0 0 24px; color: var(--text); }
.wb[hidden], .wb-discovery[hidden] { display:none !important; }
.wb-new { font-size: 9px; letter-spacing: .08em; margin-left: 5px; color: var(--accent); }
.wb-launch { flex-shrink:0; padding:14px 20px; border-radius:9px; background:var(--text); color:var(--surface); font-size:13px; font-weight:700; text-decoration:none; }
.wb-launch span { color:inherit; margin-left:12px; }
.wb-discovery { margin-top:20px; }
.wb-steps { display:flex; gap:20px; list-style:none; margin:0; padding:0 34px 24px; }
.wb-steps li { flex:1; display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.5; color:var(--muted); }
.wb-steps b { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border-radius:50%; color:var(--accent); background:var(--surface-2); }
@media(max-width:560px) { .wb-steps { flex-direction:column; gap:12px; padding:0 18px 22px; } .wb-launch { text-align:center; } .product-nav { flex-wrap:wrap; } }
.props-page .tool-tabs button { width:auto; white-space:nowrap; flex:1 0 auto; }
.wb-more { width:100%; min-height:44px; border:1px solid var(--line); border-radius:9px; color:var(--accent-2); background:var(--surface-2); cursor:pointer; font-size:12px; font-weight:700; }
.wb-discovery { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 16px; padding:22px 26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(110deg, var(--surface), var(--surface-2)); }
.wb-discovery span, .wb-eyebrow { font-size:10px; font-weight:800; letter-spacing:.13em; color:var(--accent); }
.wb-discovery strong { display:block; font:800 18px Manrope, sans-serif; margin:7px 0; }
.wb-discovery p { margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
.wb-discovery button { flex-shrink:0; padding:14px 20px; color:var(--surface); background:var(--text); border:0; border-radius:9px; cursor:pointer; font-weight:700; }
.wb-discovery button span { margin-left:12px; font-size:20px; color:inherit; }
.wb-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:34px; background:radial-gradient(ellipse at 90% 20%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%); }
.wb-header h2 { font:800 clamp(32px,4vw,48px)/1.15 Manrope,sans-serif; letter-spacing:-.05em; margin:12px 0; }
.wb-header h2 span { color:var(--accent); }
.wb-header p { margin:0; font-size:15px; color:var(--muted); }
.wb-status { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:30px; padding:10px 14px; color:var(--muted); font-size:12px; }
.wb-status i { height:7px; width:7px; background:var(--accent); border-radius:50%; flex-shrink:0; }
.wb-modebar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 28px; border-block:1px solid var(--line); }
.wb-modebar > span { color:var(--muted); font-size:11px; }
.wb-segments { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.wb-segments button { flex:1; padding:10px 13px; border:0; border-radius:7px; background:transparent; font-weight:700; font-size:12px; color:var(--muted); cursor:pointer; min-height:44px; }
.wb-segments button[aria-pressed=true] { background:var(--surface); color:var(--text); box-shadow:0 1px 4px #0000000d; }
.wb-summary { display:flex; align-items:center; gap:26px; padding:22px 30px; border-bottom:1px solid var(--line); }
.wb-summary > div { display:grid; gap:5px; flex-shrink:0; }
.wb-summary strong { font:800 28px Manrope,sans-serif; font-variant-numeric:tabular-nums; }
.wb-summary span { color:var(--muted); font-size:11px; }
.wb-summary p { margin:0 0 0 auto; max-width:400px; font-size:12px; color:var(--muted); line-height:1.6; }
.wb-workspace { display:grid; grid-template-columns:minmax(290px,.85fr) minmax(0,1.35fr); }
.wb-lineup { min-width:0; padding:24px; background:var(--surface-2); border-right:1px solid var(--line); }
.wb-pitch { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-around; gap:22px; min-height:390px; padding:52px 12px 36px; border-radius:15px; background:repeating-linear-gradient(0deg,#e6efe8 0px,#e6efe8 70px,#eaf2eb 70px,#eaf2eb 140px); border:1px solid #c9d9cd; }
.wb-pitch::before { content:''; position:absolute; inset:16px; border:1px solid #6e947740; border-radius:3px; pointer-events:none; }
.wb-pitch::after { content:''; position:absolute; top:16px; left:32%; width:36%; height:45px; border:1px solid #6e947740; pointer-events:none; }
.wb-pitch-center { position:absolute; width:90px; height:90px; border:1px solid #6e947740; border-radius:50%; left:calc(50% - 45px); top:calc(50% - 45px); pointer-events:none; }
.wb-pitch-caption { position:absolute; top:26px; left:28px; right:28px; font-size:9px; letter-spacing:.1em; color:#527360; display:flex; justify-content:space-between; }
.wb-pitch-line { position:relative; z-index:1; display:flex; justify-content:center; flex-wrap:wrap; gap:5px; }
.wb-player { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:6px 2px; flex:1 1 54px; max-width:100px; background:transparent; border:1px solid transparent; border-radius:9px; color:#173b2a; cursor:pointer; min-height:78px; }
.wb-player.is-focused { background:#fff9; border-color:#437b61; }
.wb-shirt { display:grid; place-items:center; width:29px; height:31px; border-radius:6px 6px 10px 10px; background:#fff; box-shadow:0 2px 5px #25433220; font-size:10px; font-weight:800; }
.wb-player strong { font-size:10px; line-height:1.3; max-width:100%; overflow-wrap:anywhere; }
.wb-player small { font-size:9px; }
.wb-player:disabled { cursor:default; opacity:1; }
.wb-goalkeeper { position:absolute; bottom:14px; width:100%; left:0; text-align:center; font-size:9px; color:#527360; }
.wb-controls { display:grid; gap:15px; padding-top:18px; }
.wb-control-row { display:grid; grid-template-columns:.85fr 1.15fr; gap:10px; }
.wb label { display:grid; gap:7px; color:var(--muted); font-size:11px; line-height:1.4; }
.wb select, .wb input:not([type=range]) { width:100%; min-width:0; height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface); font-size:12px; font-family:inherit; }
.wb button:focus-visible, .wb input:focus-visible, .wb select:focus-visible, .wb summary:focus-visible, .wb-discovery button:focus-visible { outline:3px solid var(--accent-2); outline-offset:3px; }
.wb-help { margin:0; font-size:12px; color:var(--muted); }
.wb-editor { display:grid; gap:16px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:13px; line-height:1.5; }
.wb-editor > span, .wb-editor-idle span { color:var(--muted); font-size:12px; }
.wb-editor label:has(input[type=range]) { display:flex; flex-wrap:wrap; justify-content:space-between; }
.wb-editor input[type=range] { flex-basis:100%; width:100%; accent-color:var(--wb-green); min-height:28px; }
.wb-editor output { font-weight:800; color:var(--text); }
.wb-reset { border:0; background:none; color:var(--muted); padding:12px; cursor:pointer; font-size:12px; text-decoration:underline; }
.wb-method { margin-top:22px; font-size:12px; color:var(--muted); line-height:1.65; }
.wb-method summary, .wb-evidence summary { cursor:pointer; padding:10px 0; }
.wb-results { padding:24px; min-width:0; }
.wb-results-head { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:20px; }
.wb-results-head h3 { margin:6px 0 0; font:800 21px Manrope,sans-serif; letter-spacing:-.025em; }
.wb-results-head select { max-width:156px; }
.wb-result { border:1px solid var(--line); border-radius:15px; padding:22px; margin-bottom:16px; background:var(--surface); }
.wb-result-qualified { border-color:var(--wb-green); }
.wb-result-top { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; }
.wb-result h3 { margin:7px 0 5px; font:800 20px Manrope,sans-serif; letter-spacing:-.025em; }
.wb-result-top p { font-size:12px; color:var(--muted); margin:0; }
.wb-change { flex-shrink:0; padding:7px 8px; background:var(--surface-2); border-radius:7px; font-size:11px; font-weight:800; }
.wb-up { color:var(--wb-green); }
.wb-down { color:#b35035; }
.wb-compare { display:grid; grid-template-columns:1fr auto 1fr 1.2fr; align-items:center; gap:12px; margin:20px 0 14px; padding:16px 0; border-block:1px solid var(--line); }
.wb-compare > div, .wb-price-grid > div { display:grid; gap:5px; min-width:0; }
.wb-compare span, .wb-price-grid span { font-size:9px; letter-spacing:.06em; color:var(--muted); }
.wb-compare strong { font:800 25px Manrope,sans-serif; font-variant-numeric:tabular-nums; }
.wb-compare small, .wb-price-grid small { font-size:10px; color:var(--muted); line-height:1.5; }
.wb-reason { color:var(--muted); line-height:1.6; font-size:12px; }
.wb-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:12px 0; }
.wb-price-grid strong { font:800 23px Manrope,sans-serif; font-variant-numeric:tabular-nums; }
.wb-verdict { display:grid; gap:5px; padding:12px 14px; background:var(--surface-2); border-radius:9px; font-size:12px; margin:8px 0 16px; }
.wb-verdict span { font-size:11px; color:var(--muted); }
.wb-verdict.is-qualified { background:var(--wb-green-soft); color:var(--wb-green); }
.wb-current-price { display:grid !important; grid-template-columns:1fr 130px; align-items:center; gap:12px; }
.wb-evidence { margin-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.6; }
.wb-evidence p { margin:9px 0; }
.wb-input-error { color:var(--danger); font-size:11px; }
.wb-empty { padding:36px 24px; color:var(--muted); line-height:1.6; }
.wb-empty h3, .wb-empty h2 { color:var(--text); }
html[data-theme=dark] .wb { --wb-green:#8ddeae; --wb-green-soft:#183f32; }
html[data-theme=dark] .wb-pitch { background:repeating-linear-gradient(0deg,#18392f 0px,#18392f 70px,#1b3d31 70px,#1b3d31 140px); border-color:#315c47; }
html[data-theme=dark] .wb-player { color:#ebf5ed; }
html[data-theme=dark] .wb-shirt { background:#315946; color:#ecf9f0; }
html[data-theme=dark] .wb-player.is-focused { background:#34694980; border-color:#9bd6ae; }
html[data-theme=dark] .wb-pitch-caption, html[data-theme=dark] .wb-goalkeeper { color:#aad1b6; }
html[data-theme=dark] .wb-down { color:#ffae93; }
@media(max-width:850px) { .wb-workspace { grid-template-columns:1fr; } .wb-lineup { border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:20px; } .wb-controls { padding-top:0; align-content:start; } .wb-method { grid-column:1/-1; margin-top:0; } .wb-summary p { max-width:260px; } }
@media(max-width:560px) { .wb-header { padding:24px 18px; display:block; } .wb-header h2 { font-size:36px; } .wb-status { margin-top:18px; font-size:11px; } .wb-modebar { padding:12px; flex-direction:column; align-items:stretch; } .wb-modebar > span { text-align:center; } .wb-summary { padding:18px; gap:22px; flex-wrap:wrap; } .wb-summary p { max-width:none; flex-basis:100%; margin:0; } .wb-lineup { display:block; padding:14px; } .wb-controls { padding-top:18px; } .wb-method { margin-top:15px; } .wb-pitch { min-height:365px; } .wb-results { padding:16px 12px; } .wb-results-head h3 { font-size:18px; } .wb-results-head select { max-width:138px; font-size:11px; } .wb-result { padding:16px 12px; } .wb-result h3 { font-size:18px; } .wb-compare { gap:8px; } .wb-compare strong { font-size:22px; } .wb-current-price { grid-template-columns:1fr 110px; } .wb-discovery { padding:20px; flex-direction:column; align-items:stretch; } .wb-discovery button { text-align:left; } .wb-discovery button span { float:right; } }