:root{--bg:#eef3f7;--surface:#fff;--surface-dark:#101820;--text:#17202a;--muted:#657386;--line:#d9e2ea;--accent:#1570ef;--accent-soft:#1570ef1f;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}button,canvas{font:inherit}.app-shell{grid-template-columns:minmax(0,1fr) 300px;gap:18px;min-height:100svh;padding:18px;display:grid}.viewport-panel{border:1px solid var(--line);background:var(--surface);border-radius:12px;grid-template-rows:auto minmax(420px,1fr) auto;min-width:0;display:grid;position:relative;overflow:hidden;box-shadow:0 20px 60px #10182014}.top-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;display:flex}.top-bar p,.top-bar h1{margin:0}.top-bar p{color:var(--accent);text-transform:uppercase;font-size:13px;font-weight:800}.top-bar h1{margin-top:4px;font-size:30px;line-height:1}.top-bar>span{border:1px solid var(--line);color:var(--muted);background:var(--accent-soft);border-radius:999px;flex:none;padding:8px 12px;font-size:13px;font-weight:800}.goordinate-canvas{cursor:grab;touch-action:none;width:100%;height:100%;min-height:420px;display:block}.goordinate-canvas:active{cursor:grabbing}.cell-toolbar{border-top:1px solid var(--line);background:#ffffffe0;flex-wrap:wrap;gap:8px;padding:12px;display:flex}.tool-group{flex-wrap:wrap;gap:8px;display:flex}.toolbar-settings{display:contents}.debug-toggle,.selected-cell-chip{display:none}.survey-wizard{z-index:12;pointer-events:none;place-items:center;display:grid;position:absolute;inset:74px 18px 92px}.survey-wizard-panel{pointer-events:auto;background:#fffffff5;border:1px solid #1570ef3d;border-radius:10px;width:min(420px,100%);padding:18px;box-shadow:0 24px 70px #10182033}.survey-wizard-panel span{color:var(--accent);text-transform:uppercase;font-size:12px;font-weight:900}.survey-wizard-panel h2{margin:6px 0 14px;font-size:28px;line-height:1.05}.survey-wizard-panel label{color:var(--muted);gap:7px;font-size:13px;font-weight:900;display:grid}.survey-wizard-panel input{border:1px solid var(--line);min-height:48px;color:var(--text);border-radius:8px;padding:0 12px;font-size:16px;font-weight:800}.survey-wizard-panel button{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:8px;width:100%;min-height:50px;margin-top:12px;font-size:14px;font-weight:900}.motion-tuning{grid-template-columns:repeat(2,minmax(180px,1fr));gap:8px;min-width:min(100%,430px);display:grid}.motion-options{grid-template-columns:repeat(2,minmax(160px,1fr));gap:8px;min-width:min(100%,430px);display:grid}.five-point-calibration{gap:8px;min-width:min(100%,640px);display:grid}.calibration-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.calibration-tool{color:#6b21a8;cursor:pointer;background:#faf5ff;border:1px solid #7c3aed47;border-radius:8px;min-height:44px;padding:0 14px;font-size:13px;font-weight:900}.calibration-reference-grid{grid-template-columns:repeat(5,minmax(94px,1fr));gap:8px;display:grid}.calibration-reference{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6px;min-height:44px;padding:8px;display:grid}.calibration-reference strong{color:#fff;background:#101820;border-radius:50%;place-items:center;width:26px;height:26px;font-size:13px;display:grid}.calibration-reference label{color:var(--muted);gap:3px;font-size:10px;font-weight:900;display:grid}.calibration-reference input{border:1px solid var(--line);width:100%;min-width:0;min-height:30px;color:var(--text);border-radius:7px;padding:0 6px;font-size:13px;font-weight:800}.motion-options label{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);border-radius:8px;align-items:center;gap:10px;padding:0 12px;font-size:13px;font-weight:900;display:flex}.motion-options input{width:18px;height:18px;accent-color:var(--accent)}.tuning-segment{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.tuning-segment.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-tool{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);text-transform:capitalize;cursor:pointer;border-radius:8px;padding:0 10px;font-size:12px;font-weight:900}.motion-tuning label{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--muted);border-radius:8px;grid-template-columns:auto minmax(90px,1fr) 44px;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:900;display:grid}.motion-tuning input{width:100%;accent-color:var(--accent)}.motion-tuning strong{color:var(--text);font-variant-numeric:tabular-nums;text-align:right}.mode-group,.cell-type-group{min-width:0}.cell-tool{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:800;display:inline-flex}.mode-tool{border:1px solid var(--line);color:#fff;cursor:pointer;background:#101820;border-radius:8px;min-height:44px;padding:0 16px;font-size:13px;font-weight:900}.live-motion-tool{color:#166534;cursor:pointer;background:#f0fdf4;border:1px solid #16a34a57;border-radius:8px;min-height:44px;padding:0 16px;font-size:13px;font-weight:900}.accuracy-tool{color:#9a3412;cursor:pointer;background:#fff7ed;border:1px solid #dc26263d;border-radius:8px;min-height:44px;padding:0 14px;font-size:13px;font-weight:900}.trail-tool{color:#075985;cursor:pointer;background:#f0f9ff;border:1px solid #0ea5e947;border-radius:8px;min-height:44px;padding:0 14px;font-size:13px;font-weight:900}.settings-tool{color:#334155;cursor:pointer;background:#f8fafc;border:1px solid #65738652;border-radius:8px;min-height:44px;padding:0 14px;font-size:13px;font-weight:900}.cell-tool:hover,.cell-tool.active,.mode-tool:hover,.mode-tool.active,.live-motion-tool:hover,.accuracy-tool:hover,.trail-tool:hover,.calibration-tool:hover,.settings-tool:hover,.preset-tool:hover,.preset-tool.active{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}.mode-tool.active,.live-motion-tool.active,.accuracy-tool.active,.trail-tool.active,.calibration-tool.active,.settings-tool.active,.preset-tool.active{background:var(--accent);color:#fff}.cell-tool:focus-visible,.mode-tool:focus-visible,.live-motion-tool:focus-visible,.accuracy-tool:focus-visible,.trail-tool:focus-visible,.calibration-tool:focus-visible,.settings-tool:focus-visible,.preset-tool:focus-visible{outline-offset:2px;outline:3px solid #1570ef47}.cell-tool:disabled,.mode-tool:disabled,.live-motion-tool:disabled,.accuracy-tool:disabled,.trail-tool:disabled,.calibration-tool:disabled,.calibration-reference input:disabled{cursor:not-allowed;opacity:.45}.cell-tool span{background:#fff;border:1px solid #1018202e;border-radius:4px;width:12px;height:12px}.cell-swatch{background:#fff;border:1px solid #1018202e;border-radius:4px;width:14px;height:14px}.cell-swatch.road{background:#8a929c}.cell-swatch.building{background:#8b5cf6}.cell-swatch.grass{background:#22a06b}.cell-swatch.water{background:#0ea5e9}.cell-tool.road span{background:#8a929c}.cell-tool.building span{background:#8b5cf6}.cell-tool.grass span{background:#22a06b}.cell-tool.water span{background:#0ea5e9}.status-panel{background:var(--surface-dark);color:#fff;border:1px solid #ffffff14;border-radius:12px;align-self:start;gap:10px;padding:16px;display:grid;box-shadow:0 20px 60px #10182029}.status-panel div{background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;justify-content:space-between;align-items:center;gap:14px;min-height:44px;padding:10px 12px;display:flex}.status-panel .status-wide{align-items:start;display:grid}.status-panel span{color:#9fb0c2;font-size:13px;font-weight:800}.status-panel strong{font-variant-numeric:tabular-nums;font-size:18px}.status-panel .status-wide strong{font-size:13px;line-height:1.35}@media (width<=860px){.app-shell{grid-template-columns:1fr}.status-panel{align-self:auto}}@media (width<=560px){html,body,#root{height:100%;overflow:hidden}.app-shell{grid-template-rows:minmax(0,1fr);gap:0;min-height:100dvh;padding:8px 8px 142px;overflow:hidden}.viewport-panel{border-radius:10px;grid-template-rows:auto minmax(0,1fr);min-height:0}.top-bar{flex-direction:row;align-items:center;gap:8px;padding:8px 10px}.top-bar h1{font-size:20px}.top-bar p{display:none}.top-bar>span{padding:5px 8px;font-size:11px}.goordinate-canvas{min-height:0}.cell-toolbar{z-index:20;padding:10px 10px calc(10px + env(safe-area-inset-bottom));border:1px solid var(--line);background:#fffffff5;border-bottom:0;border-radius:14px 14px 0 0;grid-template-columns:1fr;gap:8px;display:grid;position:fixed;bottom:0;left:10px;right:10px;box-shadow:0 -18px 46px #1018202e}.survey-wizard{align-items:start;padding-top:12px;inset:52px 14px 156px}.survey-wizard-panel{padding:14px}.survey-wizard-panel h2{font-size:23px}.tool-group{min-width:0}.mode-group{order:2;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.live-motion-group{order:1;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.selected-cell-chip{border:1px solid var(--line);min-height:46px;color:var(--text);text-transform:capitalize;background:#fff;border-radius:8px;order:3;justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:900;display:flex}.toolbar-settings{border-top:1px solid var(--line);order:4;max-height:36dvh;padding-top:8px;display:none;overflow:auto}.toolbar-settings.open{gap:8px;display:grid}.motion-tuning,.motion-options{grid-template-columns:1fr;min-width:0}.five-point-calibration{min-width:0}.calibration-actions,.calibration-reference-grid{grid-template-columns:1fr}.accuracy-test-group,.trail-group{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.cell-type-group{display:none}.cell-tool,.mode-tool,.live-motion-tool,.accuracy-tool,.trail-tool,.calibration-tool,.settings-tool,.preset-tool{touch-action:manipulation;justify-content:center;min-height:50px}.cell-tool{flex:none;min-width:116px;padding:0 12px}.mode-tool,.live-motion-tool,.accuracy-tool,.trail-tool,.settings-tool{width:100%}.live-motion-tool:first-child{grid-column:1/-1;min-height:56px}.status-panel{z-index:30;border-radius:10px;max-height:calc(100dvh - 210px);padding:10px;display:none;position:fixed;top:52px;left:10px;right:10px;overflow:auto}.status-panel.open{display:grid}.status-panel div{min-height:34px;padding:7px 9px}.status-panel strong{font-size:15px}.debug-toggle{z-index:40;min-width:74px;min-height:40px;color:var(--accent);background:#fffffff0;border:1px solid #1570ef4d;border-radius:8px;justify-content:center;align-items:center;font-size:13px;font-weight:900;display:inline-flex;position:fixed;top:10px;right:10px;box-shadow:0 12px 28px #10182029}.debug-toggle.active{background:var(--accent);color:#fff}}