:root{
  --bg:#ffffff;
  --panel:#fbfbfb;
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
  --accent:#1f6feb;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--bg);}
#app{display:flex; height:100%;}
#map{flex:1; min-width:0;}
#panel{
  width:380px;
  max-width:42vw;
  border-left:1px solid var(--border);
  background:var(--panel);
  display:flex;
  flex-direction:column;
}
#panel header{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--border);
  background:#fff;
}
h1{font-size:16px; margin:0 0 4px;}
.small{font-size:12px; color:var(--muted);}
#panel .content{padding:14px; overflow:auto; flex:1;}
.section{border:1px solid var(--border); background:#fff; border-radius:12px; padding:12px; margin-bottom:12px;}
.section h2{font-size:13px; margin:0 0 10px; display:flex; align-items:center; gap:8px;}
.badge{display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted);}
label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px;}
input[type="text"], select, textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:10px; font-size:13px; background:#fff;
}
textarea{min-height:76px; resize:vertical;}
.row{display:flex; gap:10px;}
.row > *{flex:1;}
.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  font-size:12px; padding:6px 10px; border:1px solid var(--border);
  border-radius:999px; cursor:pointer; user-select:none; background:#fff;
}
.tag.selected{border-color:var(--accent); color:var(--accent);}
.btnbar{display:flex; gap:8px; margin-top:10px;}
button{
  padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; font-size:13px;
}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
button.danger{border-color:#ffcccc; color:#b00020;}
hr{border:none; border-top:1px solid var(--border); margin:12px 0;}
.thumbgrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;}
.thumb{
  border:1px solid var(--border); border-radius:12px; padding:6px; background:#fff; cursor:pointer;
  display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;
}
.thumb img{width:100%; height:72px; object-fit:contain; background:#f6f6f6; border-radius:10px;}
.thumb .t{font-size:11px; color:#333;}
.thumb.selected{outline:2px solid var(--accent); border-color:var(--accent);}
.preview{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.preview .box{border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff;}
.preview img{width:100%; height:120px; object-fit:contain; background:#f6f6f6; border-radius:10px;}
.preview .cap{font-size:11px; color:var(--muted); margin-top:6px;}
.kv{font-size:12px; color:#333; display:grid; grid-template-columns: 140px 1fr; gap:6px 10px;}
.kv div:nth-child(odd){color:var(--muted);}
details summary{cursor:pointer; font-size:12px; color:var(--accent);}
.mini{font-size:12px; color:var(--muted);}
.footer{padding:10px 14px; border-top:1px solid var(--border); background:#fff; display:flex; gap:8px; justify-content:space-between; align-items:center;}
.pill{font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:#fff;}