:root{
  --bg:#f3fbf6;
  --card:#ffffff;
  --muted:#5a7c6e;
  --green:#18b058;
  --green2:#0f8f4f;
  --band:#2b915f;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --radius: 16px;
}
/*{box-sizing:border-box}*/
body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#0a2e22}
.page{max-width:520px;margin:0 auto;padding:18px 14px 30px}
.hero{text-align:center;padding:10px 10px 0}
.hero h1{margin:0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:.2px}
.hero p{margin:8px 0 0;color:var(--muted);font-size:13px}

.modeWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px auto 16px; max-width:520px}
.modeCard{
  border:2px solid transparent;
  background:var(--card);
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  text-align:center;
  cursor:pointer;
}
.modeCard.active{
  border-color:rgba(24,176,88,.8);
  background:#eafff2;
}
.modeIcon{
  width:38px;height:38px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#e8f6ef;color:#0d7d44;font-size:18px;margin-bottom:8px
}
.modeCard.active .modeIcon{background:#1dbb5f;color:white}
.modeTitle{display:block;font-weight:800;margin-top:2px}
.modeMeta{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

.previewBand{
  background:var(--band);
  border-radius:18px;
  padding:20px 0 26px;
  box-shadow:var(--shadow);
}
.frameStage{
  width:min(520px, 92vw);
  margin:0 auto;
  position:relative;
  display:flex;
  justify-content:center;
}
#stage{
  width:100%;
  height:auto;
  border-radius:22px;
  background:transparent;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.navArrow{
  position:absolute;
  bottom:10px; /* aligned to bottom of frame like reference */
  width:36px;height:36px;border-radius:999px;
  border:none;background:#fff;color:#123;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  opacity:.95;
}
.navArrow.left{left:-10px}
.navArrow.right{right:-10px}

.pickerCard{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:16px auto 12px;
  padding:12px 12px 8px;
  max-width:520px;
}
.pickerTitle{font-size:13px;color:#1e4b39;font-weight:700;margin:4px 2px 10px;text-align:center}
.thumbRow{display:flex;gap:10px;justify-content:center;align-items:center}
.thumbRow button{
  border:none;background:transparent;padding:0;cursor:pointer;
}
.thumb{
  width:74px;height:74px;border-radius:12px;
  overflow:hidden;
  border:2px solid transparent;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
  background:#e8f6ef;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.active{border-color:rgba(24,176,88,.95)}
.pager{text-align:center;color:var(--muted);font-size:12px;margin-top:8px}

.controlCard{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  max-width:520px;
  margin:0 auto;
  padding:14px;
}
#fileInput{display:none}
.uploadBar{
  display:flex;gap:10px;align-items:center;justify-content:center;
  border:1px solid #d8eee2;border-radius:12px;
  padding:12px 10px;cursor:pointer;
  color:#1a3e30;font-weight:600;
}
.uploadIcon{font-size:16px}
.sliderBlock{margin-top:12px}
.sliderHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sliderLabel{font-size:13px;color:#1e4b39;font-weight:700}
.sliderValue{font-size:12px;color:var(--muted)}
input[type="range"]{width:100%}
/* nicer range */
input[type="range"]{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:#dff3e9;outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px;
  background:var(--green);border:3px solid #ffffff;box-shadow:0 8px 14px rgba(0,0,0,.16);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:999px;background:var(--green);border:3px solid #fff;
}

.miniBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini{
  border:1px solid #d8eee2;background:#fff;border-radius:12px;
  padding:10px;font-weight:700;cursor:pointer;color:#1a3e30;
}
.cta{
  width:100%;
  margin-top:12px;
  border:none;
  background:linear-gradient(180deg, var(--green) 0%, var(--green2) 100%);
  color:#fff;
  border-radius:12px;
  padding:14px 12px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(24,176,88,.28);
}
.secondaryRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.secondary{
  border:1px solid #d8eee2;background:#fff;border-radius:12px;
  padding:10px;font-weight:700;cursor:pointer;color:#1a3e30;
}
.admin{
  margin-top:10px;
  width:100%;
  border:none;
  background:#e9f6ef;
  border-radius:12px;
  padding:10px;
  color:#0c6a3a;
  font-weight:700;
  cursor:pointer;
}
.footerNote{text-align:center;margin-top:14px;color:#0a2e22;font-weight:700;font-size:12px}

@media (max-width:420px){
  .hero h1{font-size:22px}
  .thumb{width:66px;height:66px}
  .navArrow{bottom:8px}
}


/* Tuning to match original spacing: bigger preview, less band padding */
.previewBand{padding:14px 0 18px;}
.frameStage{width:min(520px, 94vw);} 
.previewBand{background:linear-gradient(180deg,#2b915f 0%, #2a8c5c 65%, #2b915f 100%);} 
.navArrow.left{left:-14px}
.navArrow.right{right:-14px}



/* =========================
   POLISH PASS (UI parity)
   ========================= */

/* Tighter hero spacing like reference */
.hero{padding-top:6px}
.hero h1{font-size:24px}
.hero p{margin-top:6px}

/* Mode cards: softer, cleaner, with active dot */
.modeWrap{margin-top:14px;margin-bottom:12px}
.modeCard{
  position:relative;
  border:1px solid #e3efe8;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  padding:14px 12px 12px;
}
.modeCard.active{
  border:2px solid rgba(24,176,88,.75);
  background:#e9fff2;
}
.modeCard.active::after{
  content:"";
  position:absolute;
  width:10px;height:10px;border-radius:999px;
  right:10px; top:10px;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(24,176,88,.18);
}
.modeIcon{
  width:40px;height:40px;
  background:#eaf6ef;
}
.modeCard.active .modeIcon{background:var(--green);}

/* Preview band: less padding, frame fills more of the band */
.previewBand{
  padding:12px 0 14px !important;
  border-radius:20px;
}
.frameStage{
  //width:min(680px, 96vw) !important;
}

/* Canvas card: slightly sharper, closer to reference */
#stage{
  border-radius:18px;
}

/* Arrows: sit on bottom edge of the frame, slightly outside */
.navArrow{
  bottom:-10px !important;
  width:38px;height:38px;
  font-size:22px;
}
.navArrow.left{left:-18px !important}
.navArrow.right{right:-18px !important}

/* Frame picker: tighter spacing and slightly smaller thumbs */
.pickerCard{
  padding:10px 12px 8px;
  margin-top:14px;
}
.pickerTitle{margin-bottom:8px}
.thumb{
  width:68px;height:68px;
  border-radius:12px;
}
.thumbRow{gap:12px}

/* Controls card: tighter like original */
.controlCard{padding:14px}
.uploadBar{padding:12px}
.cta{border-radius:12px}

/* Small screen balance */
@media (max-width:420px){
  .frameStage{width:94vw !important}
  .navArrow{bottom:-8px !important}
  .thumb{width:64px;height:64px}
}