@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #FFF1EC;
  --stroke: #F0E9DF;
  --text: #201A13;
  --text-dim: #8A8072;
  --text-faint: #B5AC9C;
  --aktif: #2FAE60;
  --aktif-dim: #E3F6EB;
  --nonaktif: #C9C0B2;
  --brand: #FF6B4A;
  --brand-dim: #FFE7DF;
  --shadow: 0 8px 24px -10px rgba(32,26,19,.12);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'JetBrains Mono', monospace; }
.display{ font-family:'Poppins', sans-serif; }

#app{
  max-width:480px; margin:0 auto; min-height:100vh;
  background:var(--bg); position:relative;
  display:flex; flex-direction:column;
  padding-bottom:88px;
}

header{
  padding:20px 18px 6px; position:sticky; top:0; z-index:20;
  background:var(--bg);
}
.brand-row{ display:flex; align-items:baseline; justify-content:space-between; }
.brand{ font-family:'Poppins'; font-weight:700; font-size:20px; letter-spacing:-0.01em; color:var(--text); }
.brand span{ color:var(--brand); }
.tagline{ font-size:12px; color:var(--text-faint); margin-top:2px; }

.mode-toggle{
  display:flex; gap:4px; background:var(--surface); border:1px solid var(--stroke);
  border-radius:14px; padding:4px; margin-top:14px; box-shadow:var(--shadow);
}
.mode-toggle button{
  flex:1; border:none; background:transparent; color:var(--text-dim);
  font-family:'Inter'; font-weight:600; font-size:13px; padding:10px 0;
  border-radius:10px; cursor:pointer; transition:all .2s ease;
}
.mode-toggle button.active{ background:var(--brand); color:#fff; }

main{ flex:1; padding:0 18px; }
.loading{ text-align:center; color:var(--text-faint); font-size:13px; padding:40px 0; }

.section-label{
  font-family:'Poppins'; font-size:14.5px; font-weight:600;
  color:var(--text); margin:22px 0 12px;
}

/* Kategori chip */
.cat-row{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 4px; scrollbar-width:none; }
.cat-row::-webkit-scrollbar{ display:none; }
.cat-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:56px; background:none; border:none; cursor:pointer; }
.cat-circle{ width:50px; height:50px; border-radius:15px; background:var(--surface); border:1px solid var(--stroke); display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:var(--shadow); overflow:hidden; padding:6px; }
.cat-circle img{ width:100%; height:100%; object-fit:contain; }
.cat-chip.active .cat-circle{ background:var(--surface); border-color:var(--brand); border-width:2px; box-shadow:0 8px 20px -6px rgba(255,107,74,.5); }
.cat-label{ font-size:10px; color:var(--text-dim); font-weight:500; }
.cat-chip.active .cat-label{ color:var(--brand); font-weight:700; }

.cat-picker-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:2px; }
.cat-picker-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--surface); border:1.5px solid var(--stroke);
  padding:10px 4px; cursor:pointer; border-radius:14px;
}
.cat-picker-icon-wrap{
  width:44px; height:44px; border-radius:50%; background:#FFFFFF;
  border:1px solid var(--stroke); display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:5px;
}
.cat-picker-item img{ width:100%; height:100%; object-fit:contain; }
.cat-picker-item span{ font-size:9.5px; color:var(--text); font-weight:600; text-align:center; line-height:1.2; }
.cat-picker-item.picked{ border-color:var(--brand); border-width:2px; background:var(--brand-dim); }
.cat-picker-item.picked .cat-picker-icon-wrap{ border-color:var(--brand); }
.cat-picker-item.picked span{ color:var(--brand); font-weight:700; }

.selected-cat-strip{ display:flex; flex-wrap:wrap; gap:6px; }
.selected-cat-pill{
  display:inline-flex; align-items:center; gap:5px; background:var(--brand-dim);
  color:var(--brand); font-size:11px; font-weight:600; padding:5px 6px 5px 10px; border-radius:999px;
}
.selected-cat-pill button{
  background:rgba(255,107,74,.2); border:none; color:var(--brand); border-radius:50%;
  width:16px; height:16px; font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}

/* Story / pengikut */
.stories{
  display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px;
  scrollbar-width:none;
}
.stories::-webkit-scrollbar{ display:none; }
.story{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:62px; cursor:pointer; background:none; border:none; color:var(--text);
}
.story-ring{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:21px; position:relative;
  background:var(--surface); border:2.5px solid var(--nonaktif);
  transition:border-color .25s ease; overflow:hidden;
}
.story.on .story-ring{ border-color:var(--aktif); box-shadow:0 0 0 2px var(--bg), 0 0 14px -2px rgba(47,174,96,.4); }
.story-name{ font-size:10.5px; color:var(--text-dim); max-width:64px; text-align:center; line-height:1.2; }
.story.on .story-name{ color:var(--text); font-weight:600; }

.vendor-list{ display:flex; flex-direction:column; gap:10px; }
.vendor-card{
  background:var(--surface); border:1px solid var(--stroke); border-radius:16px;
  padding:14px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow);
}
.vendor-emoji{
  width:46px; height:46px; border-radius:13px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0;
  background-size:cover; background-position:center;
}
.vendor-info{ flex:1; min-width:0; }
.vendor-name{ font-family:'Poppins'; font-weight:600; font-size:14px; color:var(--text); }
.vendor-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; color:var(--text-dim); }
.status-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.aktif{ background:var(--aktif); box-shadow:0 0 6px var(--aktif); }
.status-dot.nonaktif{ background:var(--nonaktif); }
.status-text.aktif{ color:var(--aktif); font-weight:600; }
.status-text.nonaktif{ color:var(--text-faint); }
.vendor-sub{ font-size:11px; color:var(--text-faint); margin-top:2px; }

.premium-badge{
  display:inline-block; background:linear-gradient(135deg, #FFD86B, #FF6B4A);
  color:#fff; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  vertical-align:middle; margin-left:3px;
}

.follow-btn{
  border:none; background:var(--surface-2); color:var(--brand);
  font-family:'Inter'; font-weight:700; font-size:11px; padding:8px 13px;
  border-radius:10px; cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:all .2s ease;
}
.follow-btn.following{ background:var(--brand); color:#fff; }

.toast{
  position:fixed; left:50%; top:14px; transform:translateX(-50%) translateY(-140%);
  max-width:440px; width:calc(100% - 36px); background:var(--aktif); color:#fff;
  border-radius:14px; padding:12px 14px; display:flex; gap:10px; align-items:center;
  font-size:13px; font-weight:600; z-index:100; box-shadow:0 10px 30px -8px rgba(0,0,0,.25);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{ transform:translateX(-50%) translateY(0); }

#map{
  width:100%; height:300px; border-radius:16px; margin-top:14px;
  border:1px solid var(--stroke);
}

.vendor-hero{
  background:var(--surface); border:1px solid var(--stroke); border-radius:20px;
  padding:22px 18px; text-align:center; margin-top:18px; box-shadow:var(--shadow);
}
.vendor-hero-emoji{
  font-size:36px; width:64px; height:64px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--surface-2); background-size:cover; background-position:center;
}
.vendor-hero-name{ font-family:'Poppins'; font-weight:700; font-size:16.5px; margin-top:8px; color:var(--text); }
.vendor-hero-status{ font-size:12.5px; margin-top:4px; color:var(--text-faint); }
.vendor-hero-status.live{ color:var(--aktif); font-weight:600; }

.photo-zone{
  border:1.5px dashed var(--stroke); border-radius:14px; padding:16px;
  text-align:center; color:var(--text-dim); font-size:12.5px; cursor:pointer; margin-top:16px;
}
.photo-zone img{ width:100%; border-radius:10px; margin-bottom:8px; display:block; }

.big-toggle{
  margin-top:18px; width:100%; border:none; border-radius:16px; padding:17px;
  font-family:'Inter'; font-weight:800; font-size:14.5px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:all .2s ease;
}
.big-toggle.off{ background:var(--brand); color:#fff; }
.big-toggle.on{ background:var(--aktif-dim); color:var(--aktif); border:1.5px solid var(--aktif); }
.big-toggle small{ font-weight:500; font-size:11px; opacity:.85; }

.duration-row{ display:flex; gap:8px; margin-top:14px; }
.duration-row button{
  flex:1; padding:9px 0; border-radius:10px; border:1.5px solid var(--stroke);
  background:transparent; color:var(--text-dim); font-family:'Inter'; font-weight:600;
  font-size:12px; cursor:pointer;
}
.duration-row button.picked{ border-color:var(--brand); color:var(--brand); background:var(--brand-dim); }

.setup-form{ display:flex; flex-direction:column; gap:10px; margin-top:14px; text-align:left; }
.setup-form input, .setup-form select{
  background:var(--bg); border:1px solid var(--stroke); border-radius:10px;
  padding:10px 12px; color:var(--text); font-family:'Inter'; font-size:13px;
}
.setup-form button{
  background:var(--brand); border:none; border-radius:10px; padding:11px;
  font-family:'Inter'; font-weight:700; color:#fff; cursor:pointer;
}

.emoji-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-top:2px; }
.emoji-choice{
  background:var(--bg); border:1.5px solid var(--stroke); border-radius:10px;
  font-size:19px; padding:8px 0; cursor:pointer; transition:all .15s ease;
}
.emoji-choice.picked{ border-color:var(--brand); background:var(--brand-dim); box-shadow:0 0 0 1px var(--brand); }

nav.bottom{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  max-width:480px; width:100%; background:var(--surface); border-top:1px solid var(--stroke);
  display:flex; padding:9px 18px 13px;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text-faint); font-size:10px; font-weight:600; cursor:pointer;
}
.nav-item.active{ color:var(--brand); }
.nav-icon{
  width:33px; height:33px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:16px; padding:5px;
}
.nav-icon img{ width:100%; height:100%; object-fit:contain; opacity:0.55; transition:opacity .2s ease; }
.nav-item.active .nav-icon{ background:var(--brand-dim); }
.nav-item.active .nav-icon img{ opacity:1; }