:root{
    --coral:#F05A4A; --indigo:#6A88FF; --scarlet:#FF4B3E; --navy:#0F172A;
    --ice:#ECF2F9; --white:#FFFFFF; --sand:#F6C78A;
    --cyan:#41D6D3; --pink:#EE87A7;
    --bg:#F9FAFB; --text:#111827; --muted:#6B7280; --border:#E5E7EB; --chip:#F3F4F6;
    --ring:#D1D5DB; --angle:#E5E7EB;
}
*{box-sizing:border-box}
.wrap{max-width:1200px; margin:auto; background:var(--white); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.04)}
h3{margin:0 0 6px; font-size:22px; color:var(--text)}
.sub{color:var(--muted); font-size:14px; margin-bottom:14px}

.card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:12px}
.card h3{margin:0 0 10px; font-size:15px; color:var(--text); display:flex; align-items:center; gap:8px}
.card h3 img{width:18px; height:18px}
.chartWrap{position:relative; height:520px}
#radar{display:block; width:100% !important; height:100% !important}
.divider{height:1px; background:var(--border); margin:14px 0}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.input{flex:1; min-width:260px; border:1px solid var(--border); padding:8px 10px; border-radius:10px; font-size:14px; background:#fff}

.pickerGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.pickerCol{display:flex; flex-direction:column; gap:10px}
.pickerCol label{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--chip); cursor:pointer; color:var(--text)}
.pickerCol label.disabled{opacity:.45; pointer-events:none}
.pickerCol input[type="checkbox"]{transform:scale(1.05)}

.muted{color:var(--muted); font-size:11px}
.flag{display:inline-block; margin-left:6px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06)}

.toggle{display:flex; align-items:center; justify-content:space-between; gap:14px; width:260px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff}
.toggle__label{display:flex; align-items:center; gap:8px; color:#374151; font-size:14px}
.toggle input{appearance:none; -webkit-appearance:none; width:0; height:0; position:absolute; opacity:0}
.toggle__slider{position:relative; width:46px; height:24px; background:#E5E7EB; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.toggle__slider::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.15)}
.toggle input:checked + .toggle__slider{background:var(--scarlet)}
.toggle input:checked + .toggle__slider::after{left:25px}

@media (max-width: 920px){
    .pickerGrid{grid-template-columns:1fr}
    .toggle{width:100%}
}