/* Functional, work-oriented. No decorative extras. */
:root{
  --bg:#f1f3f5; --panel:#fff; --ink:#212529; --muted:#868e96; --line:#dee2e6;
  --brand:#1864ab; --brand-ink:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.4 system-ui,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--brand);color:var(--brand-ink)}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand .poc{font-size:11px;opacity:.85}
.stats{display:flex;flex-wrap:wrap;gap:6px;flex:1;justify-content:center}
.stat{background:rgba(255,255,255,.14);border-radius:6px;padding:3px 9px;display:flex;flex-direction:column;align-items:center;min-width:44px;border-bottom:3px solid var(--vc,transparent)}
.stat b{font-size:15px}
.stat span{font-size:10px;opacity:.9}
.warn{background:#fff3bf;color:#5c3c00;border-radius:6px;padding:4px 8px;font-size:12px;align-self:center}

/* layout */
.layout{display:flex;height:calc(100% - 49px)}
.mapwrap{position:relative;flex:1;min-width:0}
#map{position:absolute;inset:0}
.panel{width:390px;max-width:42vw;background:var(--panel);border-left:1px solid var(--line);overflow:auto}

/* legend */
.legend{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:11px;max-width:260px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.leg{display:flex;align-items:center;gap:6px}
.leg i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}

/* panel content */
.pad{padding:14px}
.muted{color:var(--muted)}
.small{font-size:12px}
h4{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:#495057}

.detail-head,.form-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kdr{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cadastre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:700}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.kv .k{color:var(--muted)}
.kv .v{text-align:right;font-weight:600}

/* verdict badge */
.badge{background:var(--vc,#adb5bd);color:#fff;font-weight:800;border-radius:6px;padding:4px 10px;font-size:16px;min-width:30px;text-align:center}
.badge.sm{font-size:13px;padding:2px 8px;min-width:24px}
.badge.none{background:#adb5bd;font-size:11px;font-weight:600}

/* history */
.history{display:flex;flex-direction:column;gap:6px}
.hist-row{display:flex;gap:10px;align-items:flex-start;padding:6px;background:#f8f9fa;border-radius:6px}
.hist-meta{flex:1}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 12px;border-radius:7px;cursor:pointer;font-size:13px}
.btn:hover{background:#f1f3f5}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.block{display:block;width:100%;margin:14px 0 4px}
.mini{border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px}

/* form */
.form label{display:block;margin:8px 0}
.lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.inp{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff}
.form-row.two{display:flex;gap:10px}
.form-row.two label{flex:1}

.grade-row{margin:8px 0}
.grade-lbl{font-size:13px;margin-bottom:4px;display:flex;gap:6px;align-items:center}
.tag{font-size:9px;text-transform:uppercase;letter-spacing:.03em;padding:1px 5px;border-radius:4px;background:#e7f5ff;color:#1864ab}
.tag.struct{background:#fff0f6;color:#a61e4d}
.grade-btns{display:flex;gap:5px}
.grade-btn{flex:1;padding:9px 0;border:1px solid var(--line);background:#fff;border-radius:7px;font-weight:700;cursor:pointer}
.grade-btn:hover{background:#f1f3f5}
.grade-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.check{display:flex !important;align-items:center;gap:8px;margin:6px 0}
.check input{width:18px;height:18px}

.suggestion{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f8f9fa;border:1px solid var(--line);border-radius:7px;padding:8px;margin:6px 0}
.sugg-code{background:var(--vc);color:#fff;font-weight:800;border-radius:5px;padding:2px 9px}
.verdict-btns{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.verdict-btn{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;border-left:5px solid var(--vc)}
.verdict-btn:hover{background:#f1f3f5}
.verdict-btn.on{background:var(--vc);color:#fff}
.verdict-btn b{font-size:16px;min-width:18px}

.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.form-err{color:#c92a2a;font-size:13px;margin:6px 0;min-height:1em}

@media (max-width:760px){
  .layout{flex-direction:column;height:calc(100% - 49px)}
  .mapwrap{height:52%}
  .panel{width:100%;max-width:none;height:48%;border-left:none;border-top:1px solid var(--line)}
  .stats{order:3;width:100%;justify-content:flex-start}
}