:root{
  --bg:#f7f7f9; --card:#fff; --muted:#475569; --line:#e2e8f0; --accent:#10b981; --accent-dark:#059669; --shadow:0 10px 20px rgba(0,0,0,.12);
  --danger:#ef4444; --danger-dark:#b91c1c; --mask:rgba(15,23,42,.45);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:#0f172a; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif; }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.title{ font-weight:800; font-size:20px; display:flex; align-items:center; gap:8px; }
.title .guide{ font-size:12px; padding:4px 8px; border-radius:999px; background:#eef2ff; border:1px solid #c7d2fe; cursor:pointer; }
.row{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
@media(min-width:900px){ .row{ grid-template-columns:1fr 1fr 1fr; } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.card h3{ margin:0 0 8px 0; font-size:16px; font-weight:700; }
.label{ font-size:12px; color:#1f2937; display:block; margin:6px 0 4px; }
.input, .select, .btn{ border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:14px; background:#f8fafc; }
.input, .select{ width:100%; }
.small{ font-size:12px; color:#64748b; }
.small.step{ display:block; margin-top:6px; }
.flex{ display:flex; align-items:center; gap:8px; }
.split{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.spacer{ flex:1; }
.hr{ height:1px; background:var(--line); margin:8px 0; }
.kv{ display:flex; align-items:center; justify-content:space-between; margin:4px 0; font-size:14px; }
.badge{ background:#e2e8f0; font-size:12px; padding:2px 6px; border-radius:999px; }
.chip{ font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f5f9; border:1px solid var(--line); cursor:pointer; user-select:none; }
.chip.active{ background:var(--accent); border-color:var(--accent-dark); color:#fff; }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent-dark); font-weight:700; }
.stage-card{ position:relative; }
.toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.stage{ position:relative; width:100%; height:460px; border-radius:12px; overflow:hidden; background:#f3f4f6; box-shadow:inset 0 0 0 1px #e5e7eb; cursor:default; }
.stage.crosshair{ cursor:crosshair; }
.photo{ position:absolute; top:0; left:0; user-select:none; pointer-events:none; transform-origin:top left; }
.grid{ position:absolute; inset:0; pointer-events:none; background-size:60px 60px;
        background-image:linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
                         linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px); }
.overlay{ position:absolute; border:2px solid rgba(16,185,129,.9); background:rgba(16,185,129,.25); box-shadow:var(--shadow); cursor:move; z-index:10; }
.overlay .size{ position:absolute; top:-22px; left:0; background:rgba(15,23,42,.92); color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; }
.handle{ position:absolute; width:12px; height:12px; background:var(--accent); border:2px solid #064e3b; border-radius:50%; }
.handle.nw{ top:-6px; left:-6px; cursor:nwse-resize }
.handle.ne{ top:-6px; right:-6px; cursor:nesw-resize }
.handle.sw{ bottom:-6px; left:-6px; cursor:nesw-resize }
.handle.se{ bottom:-6px; right:-6px; cursor:nwse-resize }
.handle.n{ top:-6px; left:50%; transform:translateX(-50%); cursor:ns-resize }
.handle.s{ bottom:-6px; left:50%; transform:translateX(-50%); cursor:ns-resize }
.handle.w{ left:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize }
.handle.e{ right:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize }
.ruler{ position:absolute; background:rgba(15,23,42,.92); color:#fff; font-size:11px; padding:2px 4px; border-radius:6px; pointer-events:none; }
.footer-note{ margin-top:8px; font-size:12px; color:#64748b; }
.err{ position:fixed; right:12px; bottom:12px; display:none; background:#fff; border:1px solid #fecaca; padding:8px 10px; border-radius:10px; box-shadow:var(--shadow); white-space:pre-wrap; max-width:520px; }
.calib-line{ position:absolute; border-top:3px solid #ef4444; z-index:12; transform-origin:left center; }
.calib-label{ position:absolute; background:#ef4444; color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; z-index:12; transform:translate(-50%, -140%); }
.calib-dot{ position:absolute; width:12px; height:12px; background:#ef4444; border:2px solid #7f1d1d; border-radius:50%; z-index:13; cursor:grab; }
.modal-mask{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:100; }
.modal{ background:#fff; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); width:min(520px, calc(100% - 40px)); padding:16px; }
.modal h4{ margin:0 0 8px 0; font-size:16px; font-weight:800; }
.modal .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.tour{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.5); z-index:200; }
.tour .box{ background:#fff; border:1px solid var(--line); border-radius:14px; width:min(560px, calc(100% - 40px)); padding:16px; box-shadow:var(--shadow); }
.tour h4{ margin:0 0 8px 0; font-size:16px; font-weight:800; }
.tour .steps{ font-size:12px; color:#475569; line-height:1.55; }
.tour .nav{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.table{ width:100%; border-collapse:collapse; margin-top:6px; }
.table th, .table td{ font-size:12px; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
.table th{ color:#334155; }
.table tfoot td{ font-weight:700; }