*{box-sizing:border-box;margin:0;padding:0}
body.cs-body{
  font-family:'Mukta',system-ui,sans-serif;
  background:#EDEAE0;
  color:#233021;
  display:flex;
  justify-content:center;
  min-height:100vh;
}
.cs-app{
  width:100%;
  max-width:420px;
  min-height:100vh;
  background:#FFFCF5;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}
.cs-top{
  background:linear-gradient(180deg,#E8F5E9 0%,#FFFCF5 85%);
  padding:14px 16px 12px;
  border-radius:0 0 26px 26px;
}
.cs-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cs-avatar{
  width:40px;height:40px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:0 3px 10px rgba(0,0,0,.08);flex-shrink:0;
}
.cs-title-block{flex:1;text-align:center;min-width:0}
.cs-soft{font-size:12px;color:#4a5a4a;font-weight:600}
.cs-title-block h1{
  font-family:'Baloo 2',sans-serif;
  font-size:22px;line-height:1.1;color:#111;font-weight:800;
}
.cs-support{
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.08);flex-shrink:0;
}
.cs-logo-wrap{margin:10px 0 8px;text-align:center}
.cs-logo-wrap img{width:100%;max-height:70px;object-fit:contain}
.cs-loc{
  width:100%;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;color:#1B5E20;
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:4px 6px;margin-bottom:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-search-fake{
  background:#fff;border:1.6px solid rgba(27,94,32,.25);border-radius:24px;
  padding:10px 14px;display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(27,94,32,.08);
}
.cs-search-fake input{
  border:0;outline:0;flex:1;font-family:inherit;font-size:13.5px;background:transparent;color:#233021;
}
.cs-main{padding:14px 14px 20px;flex:1}
.cs-card{
  background:#fff;border-radius:18px;padding:18px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);border:1px solid #E7E1D2;margin-bottom:12px;
}
.cs-outside{text-align:center}
.cs-emoji{font-size:42px;margin-bottom:8px}
.cs-outside h2,.cs-inside h2{
  font-family:'Baloo 2',sans-serif;font-size:18px;color:#1B5E20;margin-bottom:6px;
}
.cs-outside p,.cs-inside p{font-size:12.5px;color:#666;line-height:1.4;margin-bottom:12px}
.cs-actions{display:flex;flex-direction:column;gap:8px}
.cs-btn{
  display:block;text-align:center;text-decoration:none;border-radius:14px;
  padding:12px 14px;font-weight:700;font-size:13.5px;font-family:inherit;
}
.cs-btn.primary{background:linear-gradient(120deg,#FF7A00,#FFA940);color:#fff}
.cs-btn.ghost{background:#EDF6EE;color:#1B5E20}
.cs-link{
  margin-top:12px;border:0;background:none;color:#FF7A00;font-weight:700;
  font-size:12.5px;cursor:pointer;font-family:inherit;
}
.cs-badge-live{
  display:inline-block;background:#E8F5E9;color:#1B5E20;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:8px;
}
.cs-alert{
  background:#FDECEA;color:#B71C1C;border-radius:10px;padding:8px 10px;
  font-size:12px;margin-bottom:10px;
}
.cs-area-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-area{cursor:pointer}
.cs-area input{position:absolute;opacity:0;pointer-events:none}
.cs-area span{
  display:flex;flex-direction:column;gap:2px;
  background:#F8FAF7;border:1.5px solid #E7E1D2;border-radius:14px;
  padding:10px;min-height:58px;transition:all .15s;
}
.cs-area strong{font-size:12.5px;color:#1B5E20}
.cs-area small{font-size:10px;color:#888}
.cs-area input:checked + span,
.cs-area.is-submitting span{
  border-color:#FF7A00;background:#FFF6EC;box-shadow:0 0 0 2px rgba(255,122,0,.15);
}
.cs-empty{text-align:center;padding:10px 0}
.cs-promo{
  margin-top:4px;border-radius:16px;padding:16px;
  background:linear-gradient(120deg,#FF7A00,#FFA940);color:#fff;position:relative;overflow:hidden;
}
.cs-promo h3{font-family:'Baloo 2',sans-serif;font-size:16px}
.cs-promo p{font-size:11.5px;opacity:.95;margin-top:4px;max-width:70%}
.cs-promo-emoji{position:absolute;right:10px;bottom:8px;font-size:28px}
.cs-foot{
  text-align:center;padding:10px 12px 18px;font-size:11.5px;
  color:#8B5E34;font-weight:600;
}

/* --- Auto-locate gate --- */
.cs-locating{text-align:center;padding:28px 18px}
.cs-locating h2{
  font-family:'Baloo 2',sans-serif;font-size:18px;color:#1B5E20;margin-bottom:6px;
}
.cs-locating p{font-size:12.5px;color:#666;line-height:1.4;margin-bottom:14px}
.cs-pulse{
  width:74px;height:74px;margin:0 auto 14px;border-radius:50%;
  background:#E8F5E9;display:flex;align-items:center;justify-content:center;
  font-size:32px;position:relative;
}
.cs-pulse img{width:40px;height:40px;object-fit:contain}
.cs-pulse::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:3px solid rgba(46,125,50,.35);
  animation:csPulse 1.4s ease-out infinite;
}
@keyframes csPulse{
  0%{transform:scale(.85);opacity:1}
  100%{transform:scale(1.35);opacity:0}
}
.cs-status{
  display:inline-block;background:#FFF6EC;color:#8B5E34;
  font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;
}
.cs-retry{
  margin-top:14px;width:100%;border:0;cursor:pointer;border-radius:14px;
  padding:12px 14px;font-weight:700;font-size:13.5px;font-family:inherit;
  background:#EDF6EE;color:#1B5E20;
}
button.cs-area{
  border:1.5px solid #E7E1D2;background:#F8FAF7;border-radius:14px;
  padding:10px;min-height:58px;display:flex;flex-direction:column;gap:2px;
  align-items:flex-start;text-align:left;font-family:inherit;transition:all .15s;
}
button.cs-area:active{
  border-color:#FF7A00;background:#FFF6EC;box-shadow:0 0 0 2px rgba(255,122,0,.15);
}
.cs-area-pin{font-size:13px}
.cs-area-name{font-size:12.5px;font-weight:700;color:#1B5E20}
.cs-area-pin-code{font-size:10px;color:#888}
.cs-top-mini .cs-logo-wrap{margin-bottom:0}