style.css

:root{
  --bg: #f7f7f7;
  --paper: #ffffff;
  --ink: #1b1b1b;
  --muted: #666;
  --primary: #2563eb;
  --danger: #c62828;
  --border: #e3e3e3;
  --shadow: rgba(0,0,0,0.08);
  --grid: #e9e9e9;
  --selection: #4f46e5;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.topbar{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand{ display:flex; align-items:center; gap:8px; min-width:180px; }
.brand .logo{ font-size:20px; }
.brand .title{ font-weight:700; letter-spacing:0.2px; }

.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tool-group{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); padding:6px; border-radius:8px; }
.tool-group.color-group{ gap:8px; }
.color-label{ font-weight:600; color:var(--muted); margin-right:2px; }
.colors{ display:flex; gap:4px; }
.swatch{
  width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow: 0 0 0 1px var(--border);
  cursor:pointer;
}
.swatch.active{ box-shadow: 0 0 0 2px var(--selection); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  padding:6px 10px; border-radius:8px; cursor:pointer; transition:.15s;
  text-decoration:none; font-weight:600;
}
.btn:hover{ box-shadow:0 1px 6px var(--shadow); }
.btn.primary{ background: var(--primary); color:#fff; border-color: var(--primary); }
.btn.danger{ background: var(--danger); color:#fff; border-color: var(--danger); }
.btn input{ display:none; }

.tool-btn{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
}
.tool-btn.active{ outline: 2px solid var(--selection); }

.slider{ display:inline-flex; align-items:center; gap:6px; padding:0 4px; }
.slider input[type="range"]{ width:140px; }

.help details{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
.help summary{ cursor:pointer; font-weight:600; color:var(--muted); }

.stage{ padding:12px; }
.canvas-wrap{
  position: relative; width: 100%; height: calc(100vh - 220px);
  min-height: 420px; background: #fff; border:1px solid var(--border);
  border-radius: 10px; box-shadow: 0 2px 10px var(--shadow); overflow: hidden;
}
.map-img{
  position:absolute; inset:0; margin:auto; max-width:none; max-height:none; image-rendering: auto;
  user-select:none; pointer-events:none;
}
.overlay-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  cursor: crosshair; outline:none;
}
.drop-zone{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  color:#555; font-weight:700; background: rgba(37,99,235,0.06); border:2px dashed #9bb6ff; pointer-events:none;
}

.text-editor{
  position:absolute; min-width: 60px; min-height: 28px; resize: none;
  border:1px dashed var(--primary); background: rgba(255,255,255,0.9);
  padding:4px 6px; border-radius:6px; box-shadow: 0 2px 8px var(--shadow);
  font: 600 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

.palette{
  border-top:1px solid var(--border);
  background:#fff; position: sticky; bottom:0; z-index: 40;
}
.palette-inner{ display:flex; align-items:center; gap:14px; padding:10px 12px; }
.palette-title{ font-weight:700; color:var(--muted); }
.icons{ display:flex; gap:10px; flex-wrap:wrap; }
.icon-item{
  width:72px; min-height:72px; background:#fafafa; border:1px solid var(--border); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:6px; cursor:grab;
}
.icon-item:active{ cursor:grabbing; }
.icon-item img{ max-width: 42px; max-height: 42px; image-rendering: auto; }
.icon-item .name{ width:100%; text-align:center; font-size:12px; color:#333; border:none; background:transparent; outline:none; }
.icon-item .name:focus{ background:#fff; border:1px solid var(--border); border-radius:6px; }

.canvas-wrap.pan-mode .overlay-canvas{ cursor: grab; }
.canvas-wrap.pan-mode .overlay-canvas:active{ cursor: grabbing; }

@media (max-width: 980px){
  .toolbar{ gap:6px; }
  .tool-group{ padding:4px; }
  .tool-btn{ width:32px; height:32px; }
  .slider input[type="range"]{ width:100px; }
}