:root {
  --blue: #1254d8;
  --blue-hover: #0d43b1;
  --blue-soft: #edf3ff;
  --ink: #151922;
  --muted: #6c7380;
  --line: #dfe3e9;
  --surface: #fff;
  --workspace: #f2f4f7;
  --danger: #d62839;
  --shadow: 0 1px 2px rgba(18, 27, 45, .05), 0 10px 30px rgba(18, 27, 45, .04);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--workspace);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--workspace); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.topbar { height: 64px; padding: 0 22px; display: flex; align-items: center; gap: 28px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 760; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 18px; box-shadow: inset -7px 0 rgba(255,255,255,.14); }
.project-field { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; color: var(--muted); }
.project-field input { width: min(360px, 35vw); border: 0; border-bottom: 1px solid transparent; padding: 7px 4px; font-weight: 650; color: var(--ink); background: transparent; outline: none; }
.project-field input:focus { border-color: var(--blue); }
.save-state { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.save-dot { width: 7px; height: 7px; background: #079455; border-radius: 50%; }

.stepper { min-height: 76px; padding: 13px max(24px, 8vw); display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
.stepper > i { height: 1px; min-width: 28px; flex: 1; background: #cfd5dd; margin: 0 15px; }
.step { display: grid; grid-template-columns: 32px auto; grid-template-rows: auto auto; column-gap: 10px; border: 0; background: transparent; color: var(--muted); text-align: left; padding: 0; }
.step > span { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #bfc6d0; border-radius: 50%; font-weight: 750; font-size: 12px; }
.step strong { color: var(--ink); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.step small { font-size: 11px; margin-top: 2px; white-space: nowrap; }
.step.active > span, .step.complete > span { background: var(--blue); border-color: var(--blue); color: #fff; }

.workspace { display: grid; grid-template-columns: minmax(300px, 390px) minmax(460px, 1fr) minmax(260px, 310px); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); min-height: calc(100vh - 274px); }
.panel { background: var(--surface); }
.graphics-panel, .inspector-panel { min-width: 0; display: flex; flex-direction: column; }
.panel-heading { min-height: 78px; padding: 17px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1, h2, h3, p { margin: 0; }
.panel-heading h1, .panel-heading h2, .views-heading h2, .export-card h2 { font-size: 15px; letter-spacing: -.01em; }
.panel-heading p, .views-heading p, .export-card p { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.4; }

.button { min-height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 680; font-size: 13px; transition: .16s ease; }
.button.small { min-height: 34px; padding: 0 12px; font-size: 12px; }
.button.primary { background: var(--blue); color: #fff; box-shadow: 0 5px 12px rgba(18,84,216,.16); }
.button.primary:hover { background: var(--blue-hover); }
.button.secondary { border-color: var(--line); background: #fff; color: #313743; }
.button.secondary:hover { background: #f7f8fa; border-color: #c7cdd6; }
.button.danger { width: 100%; background: #fff; border-color: #f3b3ba; color: var(--danger); }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .step:focus-visible, .upload-tile:focus-visible { outline: 3px solid rgba(18,84,216,.2); outline-offset: 2px; }

.table-wrap { min-height: 250px; overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { height: 40px; color: var(--muted); font-size: 10px; text-align: left; font-weight: 700; border-bottom: 1px solid var(--line); }
th:first-child { width: 48px; padding-left: 18px; } th:nth-child(3) { width: 84px; } th:nth-child(4) { width: 58px; } th:last-child { width: 38px; }
td { height: 60px; font-size: 11px; border-bottom: 1px solid #e8ebef; vertical-align: middle; }
td:first-child { padding-left: 18px; color: var(--blue); font-weight: 750; }
tr.graphic-row { cursor: pointer; border-left: 3px solid transparent; }
tr.graphic-row:hover { background: #fafbfc; }
tr.graphic-row.active { background: var(--blue-soft); border-left-color: var(--blue); }
.editable { width: 100%; padding: 5px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); font-size: 11px; }
.editable:hover, .editable:focus { border-color: #bdc6d3; background: #fff; outline: none; }
.row-delete { width: 28px; height: 28px; border: 0; background: transparent; color: #8b92a0; border-radius: 4px; }
.row-delete:hover { color: var(--danger); background: #fff0f1; }
.table-footer { margin-top: auto; min-height: 41px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); }

.canvas-panel { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.canvas-toolbar { height: 56px; padding: 0 14px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.tool-group { display: flex; align-items: center; gap: 5px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #4b5260; }
.icon-button:hover, .icon-button.active { color: var(--blue); border-color: #8cb0f2; background: var(--blue-soft); }
.icon-button svg, .export-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.canvas-instruction { min-width: 0; display: flex; flex-direction: column; }
.canvas-instruction strong { font-size: 12px; }
.canvas-instruction span { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zoom-group { margin-left: auto; }
.zoom-group span { width: 42px; text-align: center; color: var(--muted); font-size: 11px; }
.zoom-group .icon-button { border: 0; width: 28px; }
.canvas-stage { position: relative; flex: 1; min-height: 430px; display: grid; place-items: center; overflow: hidden; background: #e9edf2; }
.canvas-stage.empty { background-image: linear-gradient(#e7ebf0 1px, transparent 1px), linear-gradient(90deg, #e7ebf0 1px, transparent 1px); background-size: 28px 28px; background-color: #f3f5f8; }
.empty-canvas { width: min(490px, 84%); text-align: center; padding: 42px; border: 1px dashed #b9c2cf; border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.empty-icon { width: 50px; height: 50px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); }
.empty-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-canvas h2 { font-size: 18px; letter-spacing: -.02em; }
.empty-canvas p { max-width: 380px; margin: 8px auto 20px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.empty-actions { display: flex; justify-content: center; gap: 8px; }
.image-viewport { position: absolute; inset: 18px; display: grid; place-items: center; overflow: auto; }
.image-transform { position: relative; max-width: 100%; max-height: 100%; transform-origin: center; transition: transform .15s ease; user-select: none; }
.image-transform img { display: block; max-width: 100%; max-height: calc(100vh - 340px); object-fit: contain; box-shadow: 0 12px 30px rgba(24,35,55,.14); }
.markers-layer { position: absolute; inset: 0; }
.marker { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(9,31,75,.35); cursor: grab; }
.marker:hover, .marker.selected { outline: 3px solid rgba(255,255,255,.8); box-shadow: 0 0 0 3px var(--blue), 0 7px 18px rgba(9,31,75,.28); }
.marker:active { cursor: grabbing; }

.inspector-panel { min-height: 0; }
.empty-inspector { padding: 30px 22px; text-align: center; color: var(--muted); }
.marker-preview { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 15px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 780; box-shadow: 0 7px 17px rgba(18,84,216,.2); }
.empty-inspector h3 { color: var(--ink); font-size: 14px; }
.empty-inspector p { margin-top: 7px; font-size: 11px; line-height: 1.55; }
.marker-inspector { padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.selected-marker-head { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.selected-marker-head > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; }
.selected-marker-head div { display: flex; flex-direction: column; min-width: 0; }
.selected-marker-head strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selected-marker-head small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.marker-inspector label { display: flex; flex-direction: column; gap: 6px; color: #444b57; font-weight: 650; font-size: 10px; }
.marker-inspector input, .marker-inspector select, .marker-inspector textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 9px 10px; color: var(--ink); background: #fff; font-size: 11px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-card { margin-top: auto; padding: 18px; border-top: 1px solid var(--line); background: #fafbfc; }
.export-card p { margin-bottom: 12px; }
.export-button { width: 100%; }

.views-strip { min-height: 132px; margin: 14px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 230px 1fr; overflow: hidden; box-shadow: var(--shadow); }
.views-heading { padding: 18px; border-right: 1px solid var(--line); }
.views-heading h2 span { color: var(--blue); }
.views-heading .button { margin-top: 13px; }
.views-list { padding: 12px; display: flex; gap: 10px; overflow-x: auto; }
.upload-tile, .view-tile { width: 174px; min-width: 174px; height: 104px; border: 1px dashed #bdc5d0; border-radius: 6px; background: #fafbfc; color: var(--muted); overflow: hidden; position: relative; }
.upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.upload-tile:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.upload-tile span { font-size: 22px; line-height: 1; }.upload-tile strong { margin-top: 7px; color: var(--ink); font-size: 11px; }.upload-tile small { margin-top: 4px; font-size: 9px; }
.view-tile { padding: 0; border-style: solid; background: #111; }
.view-tile.active { border: 2px solid var(--blue); box-shadow: 0 0 0 2px rgba(18,84,216,.15); }
.view-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.view-index { position: absolute; top: 6px; left: 6px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; font-weight: 750; }
.view-meta { position: absolute; inset: auto 0 0; padding: 15px 8px 6px; background: linear-gradient(transparent, rgba(5,9,18,.8)); color: #fff; font-size: 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-delete { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: none; place-items: center; border: 0; border-radius: 4px; background: rgba(255,255,255,.92); color: var(--danger); font-size: 14px; }
.view-tile:hover .view-delete { display: grid; }

.toast { position: fixed; left: 50%; bottom: 22px; z-index: 30; transform: translate(-50%, 18px); padding: 11px 16px; border-radius: 6px; background: #202631; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 12px; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #a61b2b; }
.busy { cursor: wait !important; opacity: .72; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 310px 1fr; }
  .inspector-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .inspector-panel .panel-heading { grid-column: 1 / -1; }
  .export-card { border-left: 1px solid var(--line); border-top: 0; }
  .image-transform img { max-height: 540px; }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 62px; padding: 12px 15px; flex-wrap: wrap; gap: 8px 16px; }
  .project-field { order: 3; width: 100%; }.project-field input { width: 100%; }.save-state { font-size: 0; }
  .stepper { padding: 11px 16px; justify-content: space-between; }
  .stepper > i { min-width: 8px; margin: 0 5px; }.step { grid-template-columns: 28px; }.step > span { width: 28px; height: 28px; }.step strong, .step small { display: none; }
  .workspace { display: flex; flex-direction: column; }
  .graphics-panel { min-height: 350px; }.canvas-stage { min-height: 420px; }.canvas-instruction span { display: none; }
  .inspector-panel { display: flex; }
  .views-strip { margin: 10px; grid-template-columns: 1fr; }.views-heading { border-right: 0; border-bottom: 1px solid var(--line); }.views-list { min-height: 128px; }
  .empty-canvas { padding: 28px 18px; }.empty-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }