:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; --bg:#0c0d10; --panel:#15171c; --line:#2a2e37; --muted:#969eae; --blue:#4f72f4; --orange:#f47b22; }
* { box-sizing:border-box; }
body { margin:0; background:#07080a; color:#f4f5f7; }
button { font:inherit; color:inherit; border:0; cursor:pointer; }
.app-shell { width:min(100%, 700px); margin:auto; padding:24px 18px 42px; }
.topbar,.section-heading,.location-row,.editor-actions,.selected-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar { padding-bottom:24px; }
.eyebrow { margin:0 0 6px; color:#778091; font-size:11px; font-weight:700; letter-spacing:.16em; }
h1,h2,p { margin:0; } h1 { font-size:25px; letter-spacing:.01em; } h2 { font-size:18px; }
.step-badge,.status-pill,.required-mark { border:1px solid var(--line); border-radius:999px; color:#bec5d2; font-size:12px; padding:6px 10px; white-space:nowrap; }
.status-pill.is-good { color:#86dfa0; border-color:#285a39; background:#10251a; } .status-pill.is-muted { color:#9299a7; }
section { background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:14px; padding:18px; }
.location-row { margin-top:18px; align-items:flex-end; } .coordinates { display:grid; gap:4px; min-width:0; } .coordinates strong { font-size:15px; font-variant-numeric:tabular-nums; } .coordinates span,.helper-text { color:var(--muted); font-size:12px; }
.field-label { display:block; margin-top:18px; margin-bottom:7px; color:#dce1e9; font-size:13px; font-weight:600; } .field-label span { color:#ff8b3d; } .text-input { width:100%; padding:11px 12px; border:1px solid #3b4350; border-radius:8px; outline:none; background:#20242b; color:#f4f5f7; font-size:14px; } .text-input:focus { border-color:#6f8dff; box-shadow:0 0 0 3px #4f72f422; } .text-input::placeholder { color:#747d8b; }
.secondary-button { background:#252a34; border:1px solid #3b4350; border-radius:9px; padding:10px 13px; white-space:nowrap; } .button-icon { color:#7fa1ff; margin-right:5px; font-size:18px; vertical-align:-1px; }
.map-preview { height:140px; margin:16px 0 10px; position:relative; overflow:hidden; border-radius:10px; border:1px solid #303743; background:#202830; }
.map-grid { position:absolute; inset:0; opacity:.35; background:linear-gradient(35deg,transparent 47%,#6a7884 48%,#6a7884 50%,transparent 51%),linear-gradient(-35deg,transparent 47%,#596773 48%,#596773 50%,transparent 51%); background-size:70px 70px; }
.road { position:absolute; background:#3e4b55; border:5px solid #5a6670; } .road-a { width:120%; height:32px; left:-10%; top:56%; transform:rotate(-12deg); } .road-b { width:38px; height:120%; left:61%; top:-10%; transform:rotate(22deg); }
.map-pin { position:absolute; width:28px; height:28px; left:48%; top:39%; border-radius:50% 50% 50% 0; background:var(--orange); transform:rotate(-45deg); box-shadow:0 0 0 7px #f47b2233; } .map-pin span { position:absolute; width:8px; height:8px; left:10px; top:10px; border-radius:50%; background:#fff; }
.map-label { position:absolute; color:#aeb8c2; background:#12171cbb; padding:4px 6px; border-radius:4px; font-size:10px; } .label-a { left:12px; top:14px; } .label-b { right:12px; bottom:14px; }
.editor { position:relative; min-height:290px; margin-top:16px; overflow:hidden; border:1px solid #343943; border-radius:10px; background:#24262b; outline:none; }
.photo,.photo-placeholder { display:block; width:100%; height:290px; object-fit:cover; } .photo-placeholder { display:grid; place-content:center; justify-items:center; gap:7px; color:#d3d7df; background:linear-gradient(135deg,#323944,#1b2028); } .placeholder-mark { display:grid; place-items:center; width:44px; height:44px; border:1px dashed #8b94a1; border-radius:50%; font-size:30px; font-weight:200; color:#b4bdca; } .photo-placeholder span { color:#929baa; font-size:12px; }
.hidden { display:none !important; } .overlay { position:absolute; touch-action:none; user-select:none; cursor:grab; } .overlay.selected { filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px #fff); } .parking-marker { left:47%; top:40%; width:86px; height:86px; transform:translate(-50%,-50%); } .parking-marker img,.heading-marker img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.heading-marker { left:57%; top:38%; width:74px; height:108px; transform:translate(-50%,-50%) rotate(0deg); transform-origin:50% 80%; }
.turn-icon { position:absolute; display:grid; place-items:center; width:54px; height:54px; color:#fff; font-size:44px; line-height:1; cursor:grab; text-shadow:0 2px 5px #000; } .turn-icon.selected { color:#ff9b5b; }
.photo-list { display:flex; gap:9px; overflow-x:auto; padding:12px 0 2px; min-height:0; } .photo-card { position:relative; flex:0 0 76px; height:62px; overflow:hidden; border:2px solid transparent; border-radius:7px; background:#252a32; cursor:pointer; } .photo-card.active { border-color:#ff8b3d; } .photo-card img { width:100%; height:100%; object-fit:cover; } .photo-card .remove-photo { position:absolute; right:3px; top:3px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#d94e56; color:white; font-size:14px; line-height:1; }
.editor-hint { position:absolute; left:10px; bottom:9px; padding:5px 8px; border-radius:5px; background:#050609aa; color:#d7dbe2; font-size:11px; }
.editor-actions { justify-content:flex-start; margin-top:12px; } .tool-button { display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #343a45; border-radius:8px; background:#20242b; color:#e2e5eb; font-size:13px; } .tool-button:hover,.secondary-button:hover { background:#2b313b; } .tool-icon { color:#ff8b3d; font-size:19px; }
.turn-palette { display:flex; justify-content:space-between; gap:5px; margin-top:10px; padding:9px; border:1px solid #353b46; border-radius:9px; background:#1e2229; } .turn-palette button { display:grid; justify-items:center; gap:2px; min-width:52px; padding:5px; border-radius:6px; background:transparent; color:#fff; font-size:26px; } .turn-palette button:hover { background:#323944; } .turn-palette span { color:#adb4c0; font-size:10px; }
.selected-tools { margin-top:14px; padding-top:12px; border-top:1px solid #2a2e36; } .selected-tools > span { color:#8992a1; font-size:12px; } .fine-tools { display:flex; gap:5px; } .fine-tools button { width:30px; height:30px; border:1px solid #363d48; border-radius:6px; background:#22262e; color:#f0f2f6; font-size:18px; } .fine-tools button:hover { background:#343b47; } .fine-tools .danger-tool { color:#ff8d8d; }
.checklist { display:grid; gap:10px; padding:15px 18px; } .check-item { display:flex; align-items:center; gap:9px; color:#b8bec9; font-size:13px; } .check-dot { color:#7b8593; font-size:20px; line-height:1; } .check-dot.done { color:#72d893; }
.save-button { width:100%; padding:14px; border-radius:10px; background:var(--blue); color:white; font-size:16px; font-weight:700; box-shadow:0 8px 22px #4f72f433; } .save-button:disabled { background:#343a49; color:#858d9b; box-shadow:none; cursor:not-allowed; } .save-message { min-height:20px; padding-top:10px; text-align:center; color:#82dfa0; font-size:13px; }
.visually-hidden { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
@media (max-width:480px) { .app-shell { padding:18px 12px 30px; } section { padding:15px; } .location-row { align-items:stretch; flex-direction:column; } .secondary-button { width:100%; } .editor-actions { gap:5px; } .tool-button { flex:1; justify-content:center; padding:9px 3px; } .tool-button span:last-child { font-size:11px; } .turn-palette button { min-width:0; flex:1; } .selected-tools { align-items:flex-start; flex-direction:column; } }