:root { --blue:#1269d3; --cyan:#12bddd; --ink:#14243a; --muted:#66758b; --line:#d8e1ec; --wash:#f5f8fc; }
* { box-sizing:border-box; }
body { margin:0; background:#eef3f8; color:var(--ink); font:14px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-width:1120px; min-height:100vh; background:#fff; }
.topbar { height:68px; display:flex; align-items:center; gap:18px; padding:0 28px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-size:25px; font-weight:750; letter-spacing:.2px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:linear-gradient(135deg,#1675e0,#0752b5); color:#fff; font-size:15px; }
.contact-info { display:flex; flex-direction:column; gap:2px; min-width:184px; padding-left:16px; border-left:1px solid #dce5ef; color:#50667f; font-size:11px; line-height:1.25; letter-spacing:.1px; }.contact-info span:first-child { color:#16705e; font-weight:700; }
.local-badge { padding:7px 12px; color:#117158; background:#effbf6; border:1px solid #a9e4cd; border-radius:16px; font-weight:600; }
.status { margin-left:auto; color:var(--muted); font-size:13px; }
.steps { height:60px; display:flex; justify-content:center; align-items:center; gap:46px; border-bottom:1px solid var(--line); color:#6c788a; font-size:16px; font-weight:650; }
.step { display:flex; gap:10px; align-items:center; }.step b { display:grid; place-items:center; width:27px; height:27px; border:1px solid #b9c7d8; border-radius:50%; font-size:14px; }.step.active { color:#155cbc; }.step.active b { color:#fff; border-color:#1671d8; background:#1671d8; }.steps i { color:#92a0b1; font-size:28px; font-style:normal; font-weight:300; }
.workspace { display:grid; grid-template-columns:300px minmax(470px,1fr) 440px; min-height:calc(100vh - 160px); }
.left-panel,.right-panel { padding:21px; background:#fbfcfe; }.left-panel { border-right:1px solid var(--line); }.right-panel { border-left:1px solid var(--line); }
.drop-zone { position:relative; min-height:250px; border:2px dashed #2581ed; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#234365; background:#fbfdff; text-align:center; transition:.15s; cursor:pointer; }.file-input { position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }.drop-zone.dragging { background:#e9f4ff; border-color:#0d62cb; transform:scale(.99); }.drop-icon { color:var(--blue); font-size:55px; line-height:1; margin-bottom:14px; }.drop-zone strong { font-size:21px; }.drop-zone small { margin-top:8px; color:var(--muted); }
.demo-btn { width:100%; margin-top:10px; padding:8px; border:0; color:#35658e; background:transparent; text-decoration:underline; font-size:12px; }.demo-btn:hover { color:var(--blue); }
.card { margin-top:20px; padding:20px 22px 22px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 4px 12px rgba(31,64,105,.04); }.card h2 { margin:0 0 20px; font-size:18px; }.field { margin:13px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#314056; }.field select,.unit-input { width:68%; }.field select,.unit-input input { height:38px; padding:0 11px; border:1px solid #cbd7e5; border-radius:7px; color:#23364c; background:#fff; }.unit-input { position:relative; display:flex; }.unit-input input { width:100%; padding-right:36px; }.unit-input em { position:absolute; right:11px; top:9px; color:#6a7a8d; font-style:normal; }.switch-row,.check-row { display:flex; align-items:center; gap:9px; margin:15px 0; color:#314056; }.switch-row { justify-content:space-between; }.switch-row input { appearance:none; width:42px; height:23px; border-radius:13px; background:#b9c5d5; transition:.2s; }.switch-row input:checked { background:var(--blue); }.switch-row input::after { content:""; display:block; width:17px; height:17px; border-radius:50%; background:#fff; margin:3px; transition:.2s; }.switch-row input:checked::after { transform:translateX(19px); }.check-row input { width:18px; height:18px; accent-color:var(--blue); }.primary-btn { width:100%; margin-top:23px; padding:15px; border:0; border-radius:8px; background:linear-gradient(90deg,#0d61c8,#137bea); color:#fff; box-shadow:0 8px 18px rgba(19,105,211,.18); font-size:19px; font-weight:700; }.primary-btn span { margin-right:10px; border:2px solid #fff; border-radius:50%; padding:0 4px; font-size:13px; }
.measure-note { margin:11px 0 -3px; color:#718198; font-size:11px; line-height:1.55; }.reset-params-btn { width:100%; margin-top:10px; border:0; color:#55708c; background:transparent; font-size:12px; text-decoration:underline; }.reset-params-btn:hover { color:#1266cb; }
.marker-card { padding-top:16px; }.marker-card h2 { margin-bottom:4px; }.marker-card > p { margin:0 0 13px; color:#718198; font-size:11px; line-height:1.5; }.marker-btn { width:100%; padding:10px; border:1px solid #2a7bd9; border-radius:7px; color:#1266cb; background:#f5faff; font-weight:650; }.marker-btn.active { border-color:#e7ae20; color:#795e11; background:#fff9e8; }.marker-list { max-height:112px; margin-top:10px; overflow:auto; border-top:1px solid #edf1f5; color:#56677c; font-size:12px; }.marker-list > span { display:block; padding:9px 0; color:#8996a7; }.marker-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #edf1f5; }.marker-row button,.text-btn { border:0; background:transparent; color:#74849a; font-size:12px; text-decoration:underline; }.marker-row button:hover,.text-btn:hover { color:#1266cb; }.text-btn { margin:7px 0 0; padding:0; }
.canvas-panel { padding:21px 22px 16px; min-width:0; }.panel-heading { display:flex; justify-content:space-between; gap:10px; }.panel-heading h1 { margin:0; font-size:20px; }.panel-heading p { margin:3px 0 16px; color:var(--muted); font-size:12px; }.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; }.tool { min-width:104px; padding:9px 12px; border:1px solid #ced9e7; border-radius:7px; color:#38485d; background:#fff; }.tool.active { color:var(--blue); border-color:#2479db; background:#f4f9ff; box-shadow:inset 0 0 0 1px #d7eaff; }.toolbar-spacer { flex:1; }.zoom-tools { display:flex; align-items:center; border:1px solid #ced9e7; border-radius:7px; overflow:hidden; background:#fff; }.zoom-btn,.zoom-level { height:35px; border:0; background:#fff; color:#3e5065; }.zoom-btn { width:33px; font-size:19px; }.zoom-level { min-width:53px; border-left:1px solid #e1e8f1; border-right:1px solid #e1e8f1; font-size:12px; }.zoom-btn:hover,.zoom-level:hover { background:#f3f8ff; color:#1266cb; }.canvas-wrap { position:relative; height:calc(100vh - 290px); min-height:420px; border:1px solid #d3deeb; border-radius:10px; display:flex; align-items:flex-start; justify-content:flex-start; overflow:auto; background:#f6f8fb; }.canvas-wrap.empty { background:linear-gradient(135deg,#fafcff,#f1f6fb); }.canvas-wrap canvas { display:block; flex:0 0 auto; cursor:crosshair; outline:none; }.empty-state { display:flex; flex-direction:column; align-items:center; gap:8px; color:#60718a; }.empty-state span { font-size:44px; color:#98adc8; }.empty-state strong { font-size:16px; }.empty-state small { font-size:12px; }.canvas-footer { display:flex; justify-content:space-between; margin-top:12px; color:#718096; font-size:12px; }
.empty-state[hidden] { display:none; }
.compact p { margin-bottom:12px; }.summary-grid { display:grid; grid-template-columns:1fr 1fr 1.65fr; gap:12px; margin-bottom:18px; }.summary-card,.profile-card { min-height:109px; border:1px solid #d5dfeb; border-radius:9px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.summary-card b { color:var(--blue); font-size:39px; line-height:1; }.summary-card span { margin-top:8px; color:#55657b; }.profile-card { padding:8px; align-items:stretch; }.profile-card span { color:#536176; font-size:12px; }.profile-card canvas { width:100%; height:74px; }
.table-wrap { overflow:auto; border:1px solid #ced9e7; border-radius:9px; background:#fff; max-height:calc(100vh - 390px); min-height:340px; } table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; } th { position:sticky; top:0; background:#f7faff; color:#34465d; font-weight:650; white-space:normal; } th,td { padding:11px 3px; border-right:1px solid #dce4ee; border-bottom:1px solid #dce4ee; text-align:center; } td { white-space:nowrap; } th:last-child,td:last-child { border-right:0; } td { color:#273c55; } th small { font-weight:400; color:#728196; }.placeholder-row td { height:230px; color:#8997a8; }.result-actions { display:flex; gap:16px; margin-top:20px; }.result-actions button { flex:1; min-height:52px; border:1px solid #2377d8; border-radius:8px; background:#fff; color:#1362c8; font-size:16px; font-weight:700; }.result-actions button:hover,.tool:hover { background:#f2f8ff; }
footer { min-height:32px; padding:7px 20px; border-top:1px solid var(--line); color:#8a98a9; text-align:center; font-size:12px; background:#fff; }.legal-link { border:0; padding:0; color:#587b9e; background:transparent; text-decoration:underline; font-size:inherit; }.legal-link:hover { color:#1266cb; }.legal-dialog { width:min(560px,calc(100vw - 32px)); padding:0; border:1px solid #cbd8e8; border-radius:13px; box-shadow:0 20px 60px rgba(25,51,87,.26); color:var(--ink); }.legal-dialog::backdrop { background:rgba(20,36,58,.38); }.legal-dialog-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #e0e7f0; }.legal-dialog-header h2 { margin:0; font-size:18px; }.legal-dialog-header button { width:30px; height:30px; border:0; border-radius:6px; color:#63758b; background:transparent; font-size:24px; line-height:1; }.legal-dialog-header button:hover { color:#173f68; background:#eef5fc; }.legal-dialog-body { padding:18px 22px 6px; color:#3d4e63; line-height:1.7; }.legal-dialog-body p { margin:0 0 14px; }.legal-dialog-body code { padding:1px 5px; border-radius:4px; background:#edf3f9; color:#294a6f; }.legal-dialog-actions { display:flex; justify-content:flex-end; padding:12px 22px 20px; }.primary-dialog-btn { padding:9px 16px; border:0; border-radius:7px; color:#fff; background:#1269d3; font-weight:650; }
@media (max-width:1240px) { .workspace { grid-template-columns:280px minmax(450px,1fr) 410px; }.left-panel,.right-panel { padding:16px; }.summary-grid { gap:7px; } }