:root { color-scheme: light; --ink:#15242e; --muted:#526a75; --line:#c6d2d6; --teal:#163d49; --teal-2:#1f5969; --paper:#fff; --ground:#edf1f3; --focus:#006eaa; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; font:14px "Segoe UI", "Yu Gothic UI", "Microsoft YaHei UI", Arial, sans-serif; background:var(--ground); color:var(--ink); }
button, select, input, textarea { font:inherit; }
button { min-height:32px; padding:6px 9px; border:1px solid #82979f; border-radius:4px; background:#fff; color:#15333d; cursor:pointer; }
button:hover { background:#eef7f8; } button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid #7bc9e6; outline-offset:2px; }
.toolbar { display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 14px; background:var(--teal); color:#fff; }
.brand { display:flex; align-items:center; gap:8px; min-width:max-content; }.brand strong { font-size:16px; }.mode { padding:3px 7px; border:1px solid #8faab1; color:#e6f6f8; font-size:12px; }
.workspace-nav { display:flex; align-items:center; gap:4px; }.workspace-link { padding:6px 8px; border:1px solid #7595a0; border-radius:4px; color:#edf9fb; text-decoration:none; font-size:12px; white-space:nowrap; }.workspace-link:hover,.workspace-link.active { background:var(--teal-2); color:#fff; }
.toolbar-actions { display:flex; align-items:center; justify-content:flex-end; flex:1; gap:7px; flex-wrap:wrap; }.plan-label,.language-control { display:flex; align-items:center; gap:5px; font-size:12px; }.toolbar select { min-height:32px; max-width:170px; background:#f9fcfc; }.plan-count { color:#dceff3; font-size:12px; white-space:nowrap; }
.mode-toolbar { display:flex; align-items:center; gap:7px; min-height:44px; padding:6px 14px; border-bottom:1px solid #b6c5ca; background:#f8fbfb; }.mode-toolbar button { min-width:92px; }.mode-label { color:var(--muted); font-size:12px; font-weight:700; }.mode-help { margin-left:auto; max-width:520px; color:#34545e; font-size:12px; line-height:1.35; }
main { height:calc(100vh - 129px); min-height:460px; display:grid; grid-template-columns:224px minmax(420px,1fr) 368px; }
aside { padding:12px; overflow:auto; background:var(--paper); border-right:1px solid var(--line); }.details { border-right:0; border-left:1px solid var(--line); } aside section { padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid #dce4e7; }
h2 { margin:2px 0 9px; font-size:15px; } aside label { display:block; margin:9px 0; }.workflow-card h2 + p { margin-top:-4px; }.workflow-card p { margin:0 0 11px; color:#36545f; font-size:12px; line-height:1.5; }.workflow-card p:last-child { margin-bottom:0; }
#mapWrap { position:relative; overflow:hidden; background:#bdc9ce; } canvas { width:100%; height:100%; display:block; cursor:crosshair; } #mapTip { position:absolute; left:10px; bottom:10px; max-width:330px; padding:6px 8px; border:1px solid #a7b4bb; background:#fffffff0; font-size:12px; line-height:1.35; pointer-events:none; }
footer { height:27px; padding:5px 10px; background:#1e3039; color:#e4eef1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }.tabs { display:flex; flex-wrap:wrap; gap:4px; margin:12px 0; }.tabs button { min-height:29px; padding:4px 7px; font-size:12px; }.panel label { margin:8px 0; }.panel input,.panel select,.panel textarea { display:block; width:100%; margin-top:3px; padding:6px; border:1px solid #94a5ad; border-radius:3px; }.panel textarea { min-height:70px; resize:vertical; }.record { padding:8px 0; border-top:1px solid #d6e0e4; }.legend { margin:9px 0 0; line-height:1.9; font-size:12px; }.campaign-summary { margin:6px 0 9px; color:#34515c; line-height:1.45; }.campaign-quick button { width:100%; margin:3px 0; }.campaign-actions { display:flex; gap:6px; margin-bottom:8px; }.point-actions { display:grid; grid-template-columns:1fr; gap:6px; margin-bottom:10px; }.measurement-summary { color:#145d3d; font-size:12px; }.campaign-note { margin:6px 0 10px; color:#51666f; line-height:1.45; }.campaign-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:6px; align-items:center; }.campaign-row span { overflow-wrap:anywhere; }.campaign-row small { color:#536a74; }.campaign-row button { min-height:29px; padding:4px 6px; font-size:12px; }.dot,.ring { display:inline-block; width:12px; height:12px; margin-right:5px; border:1px solid #26323a; vertical-align:-1px; }.dot { border-radius:50%; }.ring { border:3px solid #0878d1; border-radius:50%; }.selected { background:#ffcc00; }.measured { background:#13a45e; }.custom { background:#8138b4; }
@media (max-width:1320px) { .toolbar { align-items:flex-start; flex-wrap:wrap; }.toolbar-actions { justify-content:flex-start; }.workspace-nav { order:4; flex-basis:100%; }.mode-toolbar { min-height:50px; flex-wrap:wrap; }.mode-help { flex-basis:100%; margin-left:0; }.mode-toolbar + main { height:calc(100vh - 163px); } }
@media (max-width:1020px) { main { grid-template-columns:190px minmax(300px,1fr); }.details { position:absolute; top:129px; right:0; bottom:27px; width:min(390px,88vw); z-index:5; box-shadow:-2px 0 10px #0003; }.mode-toolbar + main .details { top:163px; } }
@media (max-width:700px) { body { font-size:15px; }.toolbar { padding:9px; gap:8px; }.brand { flex-basis:100%; justify-content:space-between; }.workspace-nav { width:100%; overflow:auto; padding-bottom:2px; }.toolbar-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }.toolbar-actions .plan-label { grid-column:1 / -1; }.toolbar-actions .plan-label select { flex:1; max-width:none; }.toolbar-actions .language-control { justify-self:end; }.toolbar-actions button { font-size:12px; padding:5px; }.mode-toolbar { padding:7px 9px; }.mode-label,.mode-help { display:none; }.mode-toolbar button { flex:1; min-width:0; padding:6px 3px; font-size:12px; } main,.mode-toolbar + main { height:calc(100vh - 207px); grid-template-columns:1fr; }.layers { display:none; }.details { top:auto !important; bottom:27px; width:min(390px,96vw); max-height:68vh; }.details h2 { font-size:14px; } #mapTip { max-width:250px; font-size:11px; } }