:root{
  --bg:#FBF6EE;
  --surface:#FFFFFF;
  --surface-2:#F3EAD9;
  --text:#2B2118;
  --text-dim:#8A7B6C;
  --accent:#E0592A;
  --accent-ink:#FFFFFF;
  --accent-bg:#FCE7DC;
  --accent-2:#2F7A57;
  --accent-2-bg:#E4F2E9;
  --border:#E8DCC8;
  --danger:#B23A2E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1712; --surface:#241F19; --surface-2:#2E2820;
    --text:#F2E9DC; --text-dim:#B3A48F;
    --accent:#FF7A45; --accent-ink:#1B1712; --accent-bg:#3A2418;
    --accent-2:#4FBE85; --accent-2-bg:#1E3327;
    --border:#3A3226; --danger:#E36658;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1712; --surface:#241F19; --surface-2:#2E2820;
  --text:#F2E9DC; --text-dim:#B3A48F;
  --accent:#FF7A45; --accent-ink:#1B1712; --accent-bg:#3A2418;
  --accent-2:#4FBE85; --accent-2-bg:#1E3327;
  --border:#3A3226; --danger:#E36658;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  padding:0 16px 24px;
}
h1,h2,.display{
  font-family:Georgia, "Times New Roman", serif;
  text-wrap:balance;
}
a{color:var(--accent);}
button{font-family:inherit;}
input{font-family:inherit; color:var(--text);}

#app{max-width:640px; margin:0 auto;}

header.top{
  position:sticky; top:0; z-index:5;
  background:var(--bg);
  padding:16px 0 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
header.top .row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
header.top h1{font-size:1.5rem; font-weight:700; margin:0; line-height:1.15;}
header.top .sub{font-size:0.82rem; color:var(--text-dim); margin-top:4px;}
header.top .sub a{color:var(--text-dim); text-decoration:underline;}
.counter{
  flex-shrink:0; background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; font-size:0.78rem; font-weight:600; white-space:nowrap;
}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px; margin-bottom:16px;
}
.card h2{font-size:1.05rem; margin:0 0 12px; font-weight:600;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.02em; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase;}
.field input[type="text"]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); font-size:0.95rem;
}
.field input:focus, .chip:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:8px 13px; border-radius:999px; font-size:0.85rem; cursor:pointer; line-height:1.2;
}
.chip.is-active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;}
.chip.is-active.tag{background:var(--accent-2); border-color:var(--accent-2); color:var(--accent-ink);}

.photo-add{
  display:inline-flex; align-items:center; gap:8px;
  border:1px dashed var(--border); background:var(--surface-2); color:var(--text);
  padding:10px 14px; border-radius:10px; font-size:0.88rem; font-weight:600; cursor:pointer;
}
.photo-add svg{flex-shrink:0;}
.photo-add.disabled{opacity:0.45; pointer-events:none;}
.photo-strip{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.photo-thumb{position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--border);}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb .rm{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:0.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.submit-btn{
  width:100%; background:var(--accent); color:var(--accent-ink); border:none;
  padding:13px; border-radius:12px; font-size:0.98rem; font-weight:700; cursor:pointer; margin-top:4px;
}
.submit-btn:disabled{opacity:0.6; cursor:default;}
.status-line{font-size:0.8rem; color:var(--text-dim); margin-top:8px; min-height:1em;}
.status-line.error{color:var(--danger);}

.banner{
  border:1px solid var(--border); background:var(--surface-2); border-radius:12px;
  padding:12px 14px; font-size:0.85rem; color:var(--text-dim); margin-bottom:16px;
}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.filters .chip{font-size:0.78rem; padding:6px 11px;}

.stall-row{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border);}
.stall-row:last-child{border-bottom:none;}
.thumb-stack{flex-shrink:0; width:56px; height:56px; position:relative;}
.thumb-stack img{width:56px; height:56px; border-radius:10px; object-fit:cover; display:block; border:1px solid var(--border);}
.thumb-stack .more{
  position:absolute; bottom:-4px; right:-4px; background:var(--text); color:var(--bg);
  font-size:0.62rem; font-weight:700; border-radius:999px; padding:1px 5px;
}
.thumb-placeholder{
  width:56px; height:56px; border-radius:10px; background:var(--surface-2); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); flex-shrink:0;
}
.stall-content{flex:1; min-width:0;}
.stall-name{font-family:Georgia, serif; font-weight:600; font-size:1.02rem; margin:0 0 5px;}
.badge-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.badge{font-size:0.72rem; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--text-dim);}
.badge.price{background:var(--accent-bg); color:var(--accent);}
.badge.near{background:var(--accent-2-bg); color:var(--accent-2);}
.stall-notes{font-size:0.86rem; color:var(--text); margin:0 0 4px; word-break:break-word;}
.stall-meta-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.stall-meta{font-size:0.74rem; color:var(--text-dim); min-width:0;}
.row-actions{display:flex; gap:2px; flex-shrink:0;}
.edit-link{
  flex-shrink:0; background:none; border:none; color:var(--accent);
  font-size:0.78rem; font-weight:600; cursor:pointer; padding:4px 6px;
}
.delete-link{color:var(--danger);}
.delete-link.confirm{text-decoration:underline;}

.empty-state{padding:28px 10px; text-align:center; color:var(--text-dim); font-size:0.9rem;}
