:root{--panel-width:360px;--bg:#f3f5f7;--panel:#fff;--line:#d8dfe6;--text:#18212a;--subtle:#586574;--accent:#d03a30;--error:#b42318}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh;overflow-x:hidden}.app{grid-template-columns:minmax(300px, var(--panel-width)) minmax(0, 1fr);gap:16px;min-height:100vh;padding:16px;display:grid}.panel,.mapCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 22px #0f172a0d}.panel{padding:18px 18px 16px;overflow:auto}.panel h1{margin:0 0 10px;font-size:1.35rem;line-height:1.35}.lead{color:var(--subtle);margin:0 0 16px;font-size:.96rem;line-height:1.6}.grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.field{gap:6px;display:grid}.fieldSpacing{margin-bottom:2px}.field.span-2{grid-column:span 2}.distancesSection{margin:14px 0}.distancesHeader{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.distancesHeader label{color:var(--subtle);font-size:.88rem}.smallBtn{background:var(--accent);color:#fff;border-color:var(--accent);padding:4px 10px;font-size:.82rem}.smallBtn:hover{background:#c23329}.distancesList{gap:8px;display:grid}.distanceItem{grid-template-columns:1fr auto;align-items:center;gap:8px;display:grid}.distanceItem input{padding:8px 12px}.distanceItem .removeBtn{color:var(--subtle);background:#f1f5f9;border-color:#dde4ea;padding:6px 10px;font-size:.85rem}.distanceItem .removeBtn:hover{color:var(--error);background:#fef3f2;border-color:#fecaca}.distanceField{gap:4px;display:grid}.distanceItem.invalid .distanceInput{background:#fef8f7;border-color:#f0b4b4}.invalidHint{color:var(--error);padding-left:2px;font-size:.78rem;display:none}.distanceItem.invalid .invalidHint{display:block}label{color:var(--subtle);font-size:.88rem}input,button{font:inherit}input[type=number],input[type=text]{width:100%;color:var(--text);background:#fff;border:1px solid #bcc8d4;border-radius:10px;padding:10px 12px}input[type=color]{background:#fff;border:1px solid #bcc8d4;border-radius:10px;width:100%;height:42px;padding:4px}button{color:var(--text);cursor:pointer;background:#fff;border:1px solid #b8c4cf;border-radius:10px;padding:10px 12px}button:hover{background:#f7fafc}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:#c23329}.actions,.exports,.viewActions{gap:10px;margin-top:14px;display:grid}.actions{grid-template-columns:1fr 1fr}.actions .primary,.actions .secondary,.viewActions button,.exports button{min-height:44px}.viewActions,.exports{grid-template-columns:1fr 1fr}.meta{border:1px solid var(--line);background:#fafbfd;border-radius:10px;margin-top:14px;padding:12px;font-size:.9rem;line-height:1.65}.meta strong{min-width:4.8em;display:inline-block}.status{color:#334155;background:#f1f5f9;border-radius:10px;margin-top:14px;padding:12px;font-size:.92rem;line-height:1.55}.status[data-type=error]{color:var(--error);background:#fef3f2}.notes{color:var(--subtle);margin-top:14px;font-size:.88rem;line-height:1.6}.notes summary{cursor:pointer;color:var(--text);font-weight:600}.notes .inner{padding-top:10px}.notes p{margin:0 0 10px}.mapCard{grid-template-rows:auto 1fr;min-height:calc(100vh - 32px);display:grid;overflow:hidden}.mapHeader{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 10px;display:flex}.mapHeader h2{margin:0;font-size:1rem}.mapHeader .small{color:var(--subtle);font-size:.88rem}.mapWrap{background:#eef2f5;height:calc(100vh - 92px);min-height:640px;position:relative}#map{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.zoomButtons{gap:8px;display:grid;position:absolute;top:14px;right:14px}.zoomButtons button{background:#fffffff2;width:44px;height:44px;font-size:1.2rem;font-weight:700}.footerText{color:#475569;background:#ffffffe0;border-radius:8px;padding:8px 10px;font-size:.8rem;line-height:1.5;position:absolute;bottom:12px;left:14px}code{background:#eef2f5;border-radius:6px;padding:.1em .35em}a{color:var(--accent)}@media (max-width:980px){.app{grid-template-columns:1fr}.mapCard{min-height:auto}.mapWrap{height:68vh;min-height:520px}}@media (max-width:640px){.grid,.actions,.viewActions,.exports{grid-template-columns:1fr}.field.span-2{grid-column:span 1}.mapHeader{flex-direction:column;align-items:flex-start}.mapWrap{min-height:420px}}