:root {
  --bg:#dfeaf3; --panel:#0d1828; --panel2:#132238; --border:#2a405a; --text:#f8fafc;
  --muted:#9fb0c3; --accent:#35aee2; --paper:#f7f9f7; --ink:#223044;
}

*{box-sizing:border-box}

html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg)}

body{color:var(--text)}

.app{display:grid;grid-template-columns:330px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}

.sidebar{background:linear-gradient(180deg,#0b1524,#101c2e);padding:18px 16px;border-right:1px solid var(--border);overflow:auto;height:100%;min-height:0;overscroll-behavior:contain}

.brand{display:flex;gap:11px;align-items:center;margin-bottom:15px}

.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:#071522;font-weight:900}

h1{font-size:18px;line-height:1.25;margin:0}

.sub{font-size:11px;color:var(--muted);margin-top:4px}

.sep{height:1px;background:var(--border);margin:15px 0}

.layer{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;min-height:38px;border-radius:9px;padding:4px 6px}

.layer input{width:17px;height:17px;accent-color:var(--accent)}

.layer label{font-size:13px;cursor:pointer}

.count{font-size:10px;border:1px solid var(--border);border-radius:99px;color:var(--muted);padding:2px 6px}

button{border:1px solid var(--border);background:#15243a;color:white;padding:8px 10px;border-radius:9px;font-weight:700;cursor:pointer}

button:hover{background:#1d304b}

button.primary{background:var(--accent);border-color:transparent;color:#062132}

button:disabled{opacity:.4;cursor:not-allowed}

.quiz{background:#111f32;border:1px solid #31506d;border-radius:12px;padding:11px}

.quiz-q{font-size:13px;font-weight:800;line-height:1.4;min-height:38px}

.feedback{font-size:11px;line-height:1.45;color:var(--muted);min-height:32px;margin-top:8px}

.feedback.ok{color:#70db95}

.feedback.bad{color:#ff98a5}

.quiz-footer{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:7px}

.note{font-size:10px;line-height:1.5;color:#8fa2b7}

.main{position:relative;min-width:0;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 42%,#edf4f8 0,#dbe8f1 48%,#cadce8 100%)}

.toolbar button{background:white;color:#21364c;border-color:#c6d5e0;min-width:40px}

.stage{width:100%;height:100%;min-height:0;display:grid;place-items:center;padding:30px 52px}

.country{fill:none;stroke:#405a6f;stroke-width:2.1;pointer-events:none}

.physio-macro-label{font-size:10px;font-weight:900;fill:#1d3345;text-anchor:middle}

.physio-meso-label{font-size:8px;font-weight:800;fill:#233a4c;text-anchor:middle}

.map-label{font-size:12px;font-weight:750;fill:#172a3d;paint-order:stroke;stroke:#f8fbfc;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}

.river-label{fill:#0d5c92;font-style:italic;font-size:14px;font-weight:900}

.region-label{font-size:14px;font-weight:900;fill:#1d3447}

.quiz-mode .map-label{display:none!important}

.info{position:absolute;z-index:4;right:16px;bottom:16px;width:min(390px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:#0c1726ed;border:1px solid #36506a;border-radius:14px;padding:14px 15px;box-shadow:0 14px 40px #0b1b2d35;backdrop-filter:blur(8px)}

.info-top{display:flex;justify-content:space-between;gap:10px}

.matura{border-left:3px solid #f1c75b;background:#f1c75b12;padding:7px 9px;border-radius:0 7px 7px 0}

.close{background:transparent;border:0;padding:0 4px;font-size:20px;color:#b6c6d5}

.woj-gis-label{font-size:11px;font-weight:900;fill:#1f3748;text-anchor:middle}

.woj-capital-label{font-size:8px;font-weight:750;fill:#4e6575;text-anchor:middle}

.woj-label{font-size:9px;fill:#253b4e;text-anchor:middle}

.soil-label{font-size:9px;fill:#382F26}

.climate-main-label{font-size:12px;font-weight:900;fill:#203D4B;text-anchor:middle}

.climate-side-label{font-size:9px;fill:#385B68;text-anchor:middle}

.accuracy-box{font-size:10px;line-height:1.5;color:#d7e4ef;background:#122238;border:1px solid #31506d;border-radius:10px;padding:10px}

.agri-region-label{font-size:9px;font-weight:900;fill:#473D28;text-anchor:middle}

.hydro-river-label{font-size:13px;font-weight:900;fill:#075985;text-anchor:middle}

.hydro-lake-label{font-size:10px;font-weight:900;fill:#07506F;text-anchor:middle}

.hydro-basin-label{font-size:12px;font-weight:900;fill:#284A5E;text-anchor:middle}

.subregion-label{font-size:13px!important;font-weight:900!important}

.belt-label{font-size:15px;font-weight:900;fill:#203548;text-anchor:middle}

.belt-label.small{font-size:13px}

.lake-label{font-size:11px;font-weight:900;fill:#0f5173;text-anchor:start}

.region-label.long{font-size:12px}

.info-tip{font-size:10px;line-height:1.5;color:#d7e4ef;background:#122238;border:1px solid #31506d;border-radius:10px;padding:10px}

.reason-box.hidden,.result-box.hidden{display:none!important}

.reason-box,.result-box{margin-top:9px;padding:9px 10px;border-radius:8px}

.reason-box{background:#2f80ed13;border-left:3px solid #5fb5e4}

.result-box{background:#4caf5013;border-left:3px solid #6cc58a}

.result-box .reason-title{color:#9fe0b2}

.reason-box p,.result-box p{margin:0!important;color:#e1e9f2!important}

.theme-label{font-size:9px;text-anchor:middle}

.soil-label{fill:#51422f}

.climate-label{fill:#315469}

.agri-label{fill:#5a4625}

.city-label{font-size:10px;fill:#20384d}

.route-label{font-size:11px;fill:#9a4d05}

.subregion-area{fill:url(#detailHatch)!important;fill-opacity:.92;stroke:#50306d;stroke-width:2.4;stroke-dasharray:6 3;cursor:pointer;transition:.16s}

.subregion-area:hover{stroke:#241334;stroke-width:3.4}

.subregion-area.selected{stroke:#1e1028;stroke-width:4}

.opacity-row{display:grid;grid-template-columns:54px minmax(0,1fr) 38px;align-items:center;gap:8px;margin:8px 0;font-size:11px;color:#cbd9e6}

.opacity-row input{width:100%;accent-color:var(--accent)}

.opacity-row span{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

.compact-actions button{font-size:10px;padding:7px 8px}

.label-row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;color:#d5e2ee}

.label-row input{width:16px;height:16px;accent-color:var(--accent)}

@media(max-width:900px){
  .app{display:flex;flex-direction:column;height:auto;overflow:visible}
  .main{order:-1;height:auto;min-height:0}
  .sidebar{height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--border)}
  .stage{height:auto;min-height:0;padding:86px 8px 18px}
  .main svg#mapSvg{width:min(760px,100%);max-height:none}
  .main .toolbar{top:8px;left:8px}
  .main .pill{top:58px;left:8px;right:8px;width:auto;max-width:none;text-align:center}
  .info{position:fixed;left:8px;right:8px;bottom:8px;width:auto;max-height:52vh;overflow:auto}
  .map-legend{position:static;width:auto;max-width:none;margin:0 8px 10px}
}

.map-mount{width:100%;display:grid;place-items:center}

/* Legenda jako nakładka na mapie (lustro legend z panelu bocznego) */
.map-legend{position:absolute;z-index:3;left:16px;bottom:16px;width:min(300px,calc(100% - 32px));max-height:min(46%,320px);overflow:auto;background:#0c1726ed;border:1px solid #36506a;border-radius:14px;padding:10px 12px;box-shadow:0 14px 40px #0b1b2d35;backdrop-filter:blur(8px);font-size:10px;color:#c8d5e3}
.map-legend.collapsed{max-height:none;overflow:hidden;width:auto;padding:6px 10px}
.map-legend.collapsed .map-legend-body{display:none}
.map-legend-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.map-legend-title{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#9ed9f2}
.map-legend-toggle{background:transparent;border:0;padding:0 2px;font-size:14px;line-height:1;color:#b6c6d5;cursor:pointer}
.map-legend-body{margin-top:8px;display:grid;gap:8px}
.map-legend-body .legend{grid-template-columns:1fr 1fr 1fr}
.map-legend-body .socio-legend{margin:0}
.map-legend-body>[hidden]{display:none!important}
.map-legend-empty{color:#8fa2b7;line-height:1.45}