*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f9f9f9;--bg2:#f0f0f0;--surface:#fff;--border:rgba(0,0,0,0.12);--text:#222;--text2:#666;--text3:#aaa;--input-bg:#fff}
.dark{--bg:#1c1c1e;--bg2:#2c2c2e;--surface:#2c2c2e;--border:rgba(255,255,255,0.1);--text:#e0e0e0;--text2:#aaa;--text3:#555;--input-bg:#3a3a3c}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans,sans-serif);transition:background .2s,color .2s}
.topbar{display:flex;align-items:center;gap:6px;padding:.45rem .75rem;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;margin-bottom:.75rem}
.tab-seg{display:flex;gap:3px;background:var(--bg2);border-radius:8px;padding:3px;flex:1}
.tab-seg button{flex:1;font-size:12px;font-weight:500;padding:5px 8px;border:none;border-radius:6px;cursor:pointer;background:transparent;color:var(--text2);transition:background .15s,color .15s}
.tab-seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.theme-seg{display:flex;gap:3px;background:var(--bg2);border-radius:8px;padding:3px;flex-shrink:0}
.theme-seg button{font-size:11px;font-weight:500;padding:4px 9px;border:none;border-radius:6px;cursor:pointer;background:transparent;color:var(--text2);transition:background .15s,color .15s}
.theme-seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.app{display:grid;grid-template-columns:240px 1fr;gap:1rem;align-items:start}
.panel{display:flex;flex-direction:column;gap:.6rem}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:.85rem 1rem;transition:background .2s}
.sec{font-size:11px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.field{display:flex;flex-direction:column;gap:3px;margin-bottom:.4rem}
.field label{font-size:12px;color:var(--text2)}
.field input,.field select{width:100%;font-size:12px;padding:5px 7px;background:var(--input-bg);color:var(--text);border:0.5px solid var(--border);border-radius:6px;outline:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rg{display:flex;flex-direction:column;gap:4px}
.rg label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer}
.btn{width:100%;padding:7px;font-size:12px;font-weight:500;cursor:pointer;border:0.5px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text)}
.btn:hover{filter:brightness(1.05)}
.btn-p{background:#1a5c2a;color:#fff;border-color:#1a5c2a}
.btn-export{background:#4a3fa0;color:#fff;border-color:#4a3fa0}
.btn-sm{padding:4px 10px;font-size:11px;width:auto}
.conv-seg{display:flex;gap:3px;background:var(--bg2);border-radius:8px;padding:3px}
.conv-seg button{flex:1;font-size:11px;font-weight:500;padding:5px 6px;border:none;border-radius:6px;cursor:pointer;background:transparent;color:var(--text2);text-align:center;line-height:1.4}
.conv-seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:10px;margin-left:4px}
.badge-nav{background:#dbeafe;color:#1e40af}.badge-pvg{background:#fef3c7;color:#92400e}
.dark .badge-nav{background:#1e3a5f;color:#93c5fd}.dark .badge-pvg{background:#78350f;color:#fcd34d}
.conv-box{background:var(--bg2);border-radius:8px;padding:.5rem .75rem;font-size:11px;color:var(--text2);margin-top:.4rem;line-height:1.7}
.conv-box b{color:var(--text)}
.obs-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:0.5px solid var(--border);font-size:12px}
.obs-row:last-child{border:none}
#map{width:100%;height:175px;border-radius:8px;border:0.5px solid var(--border);cursor:crosshair}
canvas{display:block;width:100%;border-radius:8px;border:0.5px solid var(--border)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.5rem;padding-top:.5rem;border-top:0.5px solid var(--border)}
.leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2)}
.leg-sw{width:20px;height:3px;border-radius:2px;display:inline-block}
.pvgis-wrap{display:flex;flex-direction:column;gap:.75rem}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.metric{background:var(--surface);border:0.5px solid var(--border);border-radius:10px;padding:.65rem .85rem}
.metric-val{font-size:18px;font-weight:500;color:var(--text);line-height:1.1}
.metric-lbl{font-size:11px;color:var(--text2);margin-top:2px}
.metric-sub{font-size:10px;color:var(--text3);margin-top:1px}
.month-table{width:100%;border-collapse:collapse;font-size:12px}
.month-table th{font-size:11px;color:var(--text2);font-weight:500;text-align:left;padding:4px 6px;border-bottom:0.5px solid var(--border)}
.month-table td{padding:4px 6px;color:var(--text);border-bottom:0.5px solid var(--border)}
.month-table tr:last-child td{border:none;font-weight:500}
.bar-bg{background:var(--bg2);border-radius:3px;height:8px;position:relative;width:100px}
.bar-fill{height:8px;border-radius:3px;background:#1a5c2a;position:absolute;left:0;top:0}
.pvgis-chart-wrap{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:.85rem 1rem}
.note{font-size:10px;color:var(--text3);line-height:1.5;padding:.4rem .6rem;background:var(--bg2);border-radius:6px}
.ss-wrap{display:flex;flex-direction:column;gap:.75rem}
.badge-ok{background:#d1fae5;color:#065f46}.badge-fail{background:#fee2e2;color:#991b1b}.badge-warn{background:#fef3c7;color:#92400e}
.dark .badge-ok{background:#064e3b;color:#6ee7b7}.dark .badge-fail{background:#7f1d1d;color:#fca5a5}.dark .badge-warn{background:#78350f;color:#fcd34d}
.warn-box{background:#fee2e2;border:0.5px solid #fca5a5;border-radius:8px;padding:.6rem .8rem;font-size:12px;color:#991b1b;line-height:1.6}
.dark .warn-box{background:rgba(127,29,29,0.25);border-color:#991b1b;color:#fca5a5}
.ok-box{background:#d1fae5;border:0.5px solid #6ee7b7;border-radius:8px;padding:.6rem .8rem;font-size:12px;color:#065f46;line-height:1.6}
.dark .ok-box{background:rgba(6,78,59,0.25);border-color:#065f46;color:#6ee7b7}
.hint-box{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:.6rem .8rem;font-size:12px;color:var(--text2);line-height:1.6}
.ss-table{width:100%;border-collapse:collapse;font-size:12px}
.ss-table th{font-size:11px;color:var(--text2);font-weight:500;text-align:left;padding:4px 6px;border-bottom:0.5px solid var(--border)}
.ss-table td{padding:4px 6px;color:var(--text);border-bottom:0.5px solid var(--border)}
.ss-table tr.opt-row td{font-weight:500}
.ss-table tr:last-child td{border:none}

/* ── payment gate overlay ── */
#gate-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}
.gate-box{background:var(--surface);border:0.5px solid var(--border);border-radius:16px;padding:2rem 2rem 1.5rem;width:320px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,0.25)}
.gate-title{font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:.3rem}
.gate-sub{font-size:.8rem;color:var(--text2);line-height:1.5;margin-bottom:1.25rem}
.gate-input{width:100%;font-size:1.5rem;letter-spacing:.25em;text-align:center;padding:.5rem;background:var(--input-bg);color:var(--text);border:0.5px solid var(--border);border-radius:8px;outline:none;margin-bottom:.75rem}
.gate-btn{width:100%;padding:.65rem;font-size:.875rem;font-weight:600;background:#1a5c2a;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-bottom:.6rem}
.gate-btn:hover{filter:brightness(1.1)}
.gate-err{font-size:.75rem;color:#c0392b;min-height:1.2em;margin-bottom:.5rem}
.gate-link{font-size:.8rem;color:var(--text2);text-decoration:none}
.gate-link:hover{color:var(--text)}
.lang-sel{font-size:11px;font-weight:500;padding:4px 8px;background:var(--bg2);color:var(--text2);border:0.5px solid var(--border);border-radius:8px;cursor:pointer;flex-shrink:0;outline:none}
.lang-sel:hover,.lang-sel:focus{color:var(--text)}