:root{
  --bg:#f4f4f4;--panel:#fff;--text:#111;--muted:#666;--line:#d7d7d7;--accent:#222;
  --danger:#9b1c1c;--ok:#165c2d;--shadow:0 8px 24px rgba(0,0,0,.08)
}
[data-theme="dark"]{--bg:#111;--panel:#1c1c1c;--text:#f5f5f5;--muted:#aaa;--line:#444;--accent:#eee}
[data-theme="red"]{--bg:#090000;--panel:#150000;--text:#b33;--muted:#722;--line:#3b1010;--accent:#c33}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
header{position:sticky;top:0;z-index:10;background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px;box-shadow:var(--shadow)}
.header-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
h1{font-size:1.25rem;margin:0}
small,.muted{color:var(--muted)}
main{max-width:1180px;margin:20px auto;padding:0 14px 40px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 6;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.card.full{grid-column:1/-1}
.card.third{grid-column:span 4}
h2{font-size:1rem;margin:0 0 14px}
label{display:block;font-size:.9rem;margin:10px 0 6px}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text)}
textarea{min-height:90px;resize:vertical}
button{padding:10px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
button.primary{background:var(--accent);color:var(--bg);font-weight:700}
button.danger{border-color:var(--danger);color:var(--danger)}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline>*{flex:1}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-group label{display:flex;gap:6px;align-items:center;margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:9px}
.radio-group input{width:auto}
.result{font-size:1.8rem;font-weight:800;line-height:1.2;margin:6px 0 12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:10px}
.kpi b{display:block;font-size:1.15rem;margin-top:4px}
.alert{padding:10px 12px;border-radius:9px;margin:8px 0;border:1px solid var(--line)}
.alert.warn{border-color:#a86f00}
.alert.error{border-color:var(--danger)}
.alert.ok{border-color:var(--ok)}
.zone-strip{display:grid;grid-template-columns:repeat(11,minmax(92px,1fr));gap:3px;overflow-x:auto;padding-bottom:4px}
.zone{min-height:118px;border:2px solid transparent;border-radius:6px;padding:5px;text-align:center;font-size:.72rem;display:flex;flex-direction:column;justify-content:space-between}
.zone.selected{border-color:#ff7a00;box-shadow:0 0 0 2px rgba(255,122,0,.22)}
.zone.reference{outline:2px dashed #2c7a3f;outline-offset:-5px}
.zone .zone-name{font-weight:700}
.zone .zone-values{font-size:.72rem;line-height:1.35;font-weight:700}
.zone .zone-values span{display:block}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.hidden{display:none!important}
footer{padding:20px;text-align:center;color:var(--muted)}
@media(max-width:820px){
  .card,.card.third{grid-column:1/-1}.kpis{grid-template-columns:repeat(2,1fr)}
}
@media print{
  header .toolbar,button,.no-print{display:none!important}
  body{background:white;color:black}
  .card{box-shadow:none;break-inside:avoid}
  main{max-width:none;margin:0}
}

.button-like{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.button-like:hover{filter:brightness(.96)}
.primary-like{background:var(--accent);color:var(--bg);font-weight:800}
.file-picker{
  position:absolute;
  width:1px;
  height:1px;
  opacity:.01;
  overflow:hidden;
}