/* Form2WhatsApp — client dashboard (styles carried over from the approved prototype) */
:root{
  --line2:#EEF0EF;
  --mint:#E8F8EE;
  --green:#22C55E;
  --green-h:#16A34A;
  --ink:#1F2937;
  --ink-2:#4B5563;
  --muted:#6B7280;
  --line:#E5E7EB;
  --line-2:#D1D5DB;
  --bg:#FFFFFF;
  --soft:#F3F4F6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font:inherit;color:inherit}
a{color:var(--green-h);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:38px;height:38px;border-radius:9px;display:block}
.logo span{font-weight:600;font-size:18px;letter-spacing:-.3px}
.logo span b{font-weight:600;color:var(--green-h)}
.topbar .help{font-size:14px;color:var(--muted);font-weight:500}
.topbar .help:hover{color:var(--ink)}

/* ---------- page ---------- */
.page{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px 60px;
}
.card{
  width:100%;
  max-width:420px;
}
.card-inner{
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px 32px 32px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.mark{
  width:64px;height:64px;border-radius:14px;display:block;margin:0 auto 20px;
}
.card-inner h1{
  font-size:24px;font-weight:600;text-align:center;letter-spacing:-.4px;margin-bottom:8px;
}
.card-inner .sub{
  text-align:center;color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:28px;
}
.card-inner .sub b{color:var(--ink);font-weight:500;word-break:break-all}

.field{margin-bottom:18px}
.field label{
  display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px;
}
.input{
  width:100%;height:48px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;
  font-size:15px;transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{color:#9CA3AF}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.input.err{border-color:#EF4444}

.btn{
  width:100%;height:48px;border-radius:8px;
  font-size:15px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s,border-color .15s;
}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-h)}
.btn-green:disabled{background:#A7E3BF;cursor:not-allowed}
.btn-out{background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.btn-out:hover{background:var(--soft)}
.btn svg{width:19px;height:19px;flex:none}

.divider{
  display:flex;align-items:center;gap:14px;
  margin:22px 0;color:#9CA3AF;font-size:13px;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}

.msg{
  font-size:13px;color:#DC2626;margin-top:8px;display:none;
}
.msg.show{display:block}

/* ---------- OTP ---------- */
.otp{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:8px;
}
.otp input{
  width:60px;
  height:64px;
  flex:0 0 60px;
  padding:0;
  text-align:center;
  font-size:26px;
  font-weight:600;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
  -moz-appearance:textfield;
}
.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp input:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.otp input.filled{border-color:var(--green);background:#F0FDF4}
.otp.shake{animation:shake .35s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

.timer{
  text-align:center;font-size:13px;color:var(--muted);margin:16px 0 22px;
}
.timer b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.timer button{color:var(--green-h);font-weight:500;font-size:13px}
.timer button:hover{text-decoration:underline}
.timer button:disabled{color:#9CA3AF;cursor:not-allowed;text-decoration:none}

.back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);font-weight:500;margin-bottom:18px;
}
.back:hover{color:var(--ink)}
.back svg{width:15px;height:15px}

.foot-note{
  text-align:center;font-size:13px;color:var(--muted);margin-top:22px;line-height:1.6;
}
.legal{
  text-align:center;font-size:12px;color:#9CA3AF;margin-top:20px;line-height:1.6;
}

.step{display:none}
.step.on{display:block}

@media (max-width:480px){
  .topbar{padding:0 18px;height:62px}
  .card-inner{padding:28px 20px 24px;border:none;box-shadow:none}
  .page{padding:16px 12px 40px;align-items:flex-start}
  .otp{gap:10px}
  .otp input{width:56px;flex:0 0 56px;height:60px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════ DASHBOARD ══════════ */
#screen-app{display:none;min-height:100vh;flex-direction:column;background:#fff}
#screen-app.on{display:flex}
body.app-mode{display:block}

.app-top{
  height:72px;display:flex;align-items:center;gap:14px;
  padding:0 28px;background:#fff;
  position:sticky;top:0;z-index:40;
}
.app-logo{width:36px;height:36px;border-radius:10px;flex:none;display:block}
.ws-switch{
  display:flex;align-items:center;gap:9px;
  height:44px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.ws-switch:hover{background:var(--soft)}
.ws-switch .fold{width:18px;height:18px;stroke-width:1.8;color:var(--ink-2)}
.ws-switch .chev{width:15px;height:15px;stroke-width:2;color:var(--muted)}
.app-top .grow{flex:1}
.top-link{
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:500;color:var(--ink);
  padding:8px 12px;border-radius:8px;
}
.top-link:hover{background:var(--soft)}
.top-link svg{width:18px;height:18px;stroke-width:1.8}

.app-body{padding:34px 28px 60px;max-width:1360px;width:100%;margin:0 auto}

.hello-row{
  display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap;
}
.hello{
  font-size:34px;font-weight:600;letter-spacing:-.8px;
  display:flex;align-items:center;gap:10px;
}
.hello .wave{font-size:30px}
.hello-row .grow{flex:1;min-width:20px}
.people{display:flex;align-items:center;gap:8px}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:#0E3B24;color:#fff;
  display:grid;place-items:center;
  font-size:13px;font-weight:600;
  background-size:cover;
}
.add-person{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
}
.add-person:hover{background:var(--soft)}
.add-person svg{width:19px;height:19px;stroke-width:1.8}

.search-box{position:relative;width:300px}
.search-box svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--muted);stroke-width:2;
}
.search-box input{
  width:100%;height:46px;padding:0 14px 0 40px;
  border:1px solid var(--line-2);border-radius:10px;
  font-size:14.5px;background:#fff;
}
.search-box input::placeholder{color:#9CA3AF}
.search-box input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15)}

.btn-new{
  height:46px;padding:0 20px;border-radius:10px;
  background:var(--green);color:#fff;
  font-size:14.5px;font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.btn-new:hover{background:var(--green-h)}
.btn-new svg{width:18px;height:18px;stroke-width:2.4}

/* ---- form grid ---- */
.forms-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
.fcard{
  background:var(--soft);border-radius:14px;
  padding:22px 24px 16px;
  min-height:186px;
  display:flex;flex-direction:column;
  position:relative;
  transition:background .15s;
}
.fcard:hover{background:#EBEDEF}
.fcard-head{display:flex;align-items:flex-start;gap:10px}
.fcard-title{
  font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.3;
  flex:1;min-width:0;word-break:break-word;
}
.fcard-tools{display:flex;align-items:center;gap:2px;flex:none;margin-top:-2px}
.tool{
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;color:var(--ink-2);
}
.tool:hover{background:rgba(0,0,0,.06)}
.tool svg{width:17px;height:17px;stroke-width:1.9}
.tool.pin-btn{opacity:0;transition:opacity .12s}
.fcard:hover .pin-btn{opacity:1}
.tool.pin-btn.pinned{opacity:1;color:var(--ink)}
.tool.pin-btn.pinned svg{fill:currentColor}

.fcard-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);font-size:14px;margin-top:6px;
  align-self:flex-start;max-width:100%;
}
.fcard-link:hover{color:var(--green-h);text-decoration:none}
.fcard-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard-link svg{width:14px;height:14px;stroke-width:2;flex:none}

.fcard-foot{
  display:flex;align-items:center;gap:26px;
  margin-top:auto;padding-top:20px;
}
.fact{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.fact:hover{color:var(--green-h)}
.fact svg{width:17px;height:17px;stroke-width:1.9}
.count{
  background:var(--green);color:#fff;
  font-size:12.5px;font-weight:500;
  padding:2px 9px;border-radius:20px;
  margin-left:2px;
}

/* ---- dropdown ---- */
.menu{
  position:absolute;top:52px;right:20px;z-index:30;
  background:#fff;border-radius:12px;
  box-shadow:0 4px 6px -2px rgba(16,24,40,.06), 0 12px 28px -6px rgba(16,24,40,.18);
  padding:8px;min-width:190px;display:none;
}
.menu.on{display:block}
.menu button{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:10px 12px;border-radius:8px;
  font-size:15px;font-weight:400;color:var(--ink);text-align:left;
}
.menu button:hover{background:var(--soft)}
.menu button svg{width:18px;height:18px;stroke-width:1.8;color:var(--ink-2);flex:none}
.menu button.danger{color:#DC2626}
.menu button.danger svg{color:#DC2626}

@media (max-width:900px){
  .forms-grid{grid-template-columns:minmax(0,1fr)}
  .search-box{width:200px}
  .hello{font-size:28px}
  .app-body{padding:24px 18px 50px}
  .app-top{padding:0 18px}
}

/* ══════════ PUBLIC FORM PAGE ══════════ */
#screen-form{display:none;min-height:100vh;background:#F1F2F3;padding:40px 20px 80px}
#screen-form.on{display:block}

.form-shell{
  max-width:1100px;margin:0 auto;
  background:#fff;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:48px 60px 56px;
}
.form-title{
  font-size:31px;font-weight:600;letter-spacing:-.3px;text-align:left;
  color:#2B2B2B;margin-bottom:26px;line-height:1.3;
}
.form-banner{
  width:100%;display:block;border:1px solid #E5E7EB;margin-bottom:44px;
}

.q{margin-bottom:42px}
.q-label{
  font-size:17.5px;color:#1F2937;font-weight:600;margin-bottom:14px;display:block;
  line-height:1.4;
}
.q-label .star{color:#E5484D;margin-right:5px}
.q-input{
  width:100%;height:52px;padding:0 15px;
  border:1px solid #DCDCDC;border-radius:4px;background:#fff;
  font-size:15px;color:#2B2B2B;
  transition:border-color .15s, box-shadow .15s;
}
.q-input::placeholder{color:#B0B0B0}
.q-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}

/* phone field */
.q-phone{display:flex;height:52px;border:1px solid #DCDCDC;border-radius:4px;overflow:hidden;background:#fff}
.q-phone:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.flag-btn{
  display:flex;align-items:center;gap:6px;
  padding:0 12px;border-right:1px solid #ECECEC;background:#fff;flex:none;
}
.flag-btn:hover{background:#FAFAFA}
.flag{
  width:22px;height:15px;border-radius:2px;flex:none;
  background:linear-gradient(#FF9933 0 33.33%, #FFFFFF 33.33% 66.66%, #138808 66.66% 100%);
  border:1px solid #E2E2E2;position:relative;
}
.flag::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border:1px solid #1B3A8C;border-radius:50%;
}
.flag-btn .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #6B7280}
.q-phone input{
  flex:1;min-width:0;border:none;padding:0 15px;font-size:15px;background:transparent;
}
.q-phone input:focus{outline:none}

/* upload */
.upload-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border:1px solid #DCDCDC;border-radius:4px;
  background:#fff;font-size:15px;color:#3F3F3F;
}
.upload-btn:hover{background:#FAFAFA;border-color:#C4C4C4}
.upload-btn svg{width:17px;height:17px;stroke-width:1.9}
.file-name{font-size:14px;color:var(--muted);margin-top:10px;display:none}
.file-name.show{display:block}

/* submit */
.submit-wa{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 26px;border-radius:4px;
  background:#1BA94C;color:#fff;font-size:16px;font-weight:500;
  margin-top:8px;
}
.submit-wa:hover{background:#178F41}
.submit-wa svg{width:21px;height:21px;fill:currentColor}

/* back to dashboard (prototype only) */
.form-back{
  position:fixed;left:20px;top:20px;z-index:60;
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 15px;border-radius:8px;
  background:#fff;border:1px solid var(--line-2);
  font-size:13.5px;font-weight:500;color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.form-back:hover{background:var(--soft)}
.form-back svg{width:15px;height:15px;stroke-width:2}

.form-foot{text-align:center;font-size:13px;color:#9CA3AF;margin-top:26px}

@media (max-width:768px){
  #screen-form{padding:16px 12px 60px}
  .form-shell{padding:28px 20px 34px;border-radius:0}
  .form-title{font-size:23px}
  .form-banner{margin-bottom:32px}
  .q{margin-bottom:28px}
  .form-back{position:static;margin:0 auto 14px;display:flex;width:max-content}
}

/* rating + choice rows on the public form */
.q .b-stars{gap:10px;color:#D9DEDB}
.q .b-stars svg{width:36px;height:36px;cursor:pointer;transition:color .12s}
.q .b-stars span:hover svg{color:#FFE082}
.q .b-opt{gap:13px;margin-bottom:13px;font-size:16px;color:#3F3F3F;font-weight:400}
.q .b-opt input[type=radio],
.q .b-opt input[type=checkbox]{width:20px;height:20px}
.form-title + .q-label{margin-top:-10px}
.form-sub{font-size:16px;color:var(--muted);line-height:1.6;margin:-14px 0 30px;text-align:left}

/* long catalogue lists */
.q .b-opt{align-items:flex-start}
.q .b-opt input{margin-top:2px;flex:none}
.q .b-opt span{line-height:1.5}
.form-sub b{color:var(--ink)}

/* section headings inside a form */
.form-title.section{font-size:25px;margin:38px 0 22px;color:#2B2B2B;text-align:left}

/* ══════════ BUILDER ══════════ */
#screen-build{display:none;background:#fff;flex-direction:column}
#screen-build.on{
  display:flex;
  height:100vh;height:100dvh;   /* fills the window, so only the canvas scrolls */
  overflow:hidden;
}
.b-top,.b-tabs{flex:none}

.b-top{
  height:72px;display:flex;align-items:center;gap:14px;padding:0 26px;
  border-bottom:1px solid var(--line);background:#fff;
}
.b-back{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--ink)}
.b-back:hover{background:var(--soft)}
.b-back svg{width:20px;height:20px;stroke-width:2}
.b-name{font-size:21px;font-weight:600;letter-spacing:-.3px;padding:4px 8px;border-radius:6px;outline:none}
.b-name:focus{background:#F0FDF4;box-shadow:0 0 0 2px var(--green)}

.b-tabs{
  display:flex;align-items:center;gap:6px;padding:0 26px;
  border-bottom:1px solid var(--line);background:#fff;height:74px;
}
.b-tab{
  display:flex;align-items:center;gap:9px;
  padding:0 22px;height:73px;
  font-size:16px;font-weight:500;color:var(--ink);
  border-bottom:3px solid transparent;
}
.b-tab svg{width:19px;height:19px;stroke-width:1.9}
.b-tab.on{color:var(--green-h);border-color:var(--green)}
.b-tabs .grow{flex:1}

.b-publish{display:flex;height:44px;border-radius:8px;overflow:hidden}
.b-publish .main{background:var(--green);color:#fff;padding:0 22px;font-size:15px;font-weight:500;display:flex;align-items:center}
.b-publish .main:hover{background:var(--green-h)}
.b-publish .caret{background:var(--green);color:#fff;width:40px;display:grid;place-items:center;border-left:1px solid rgba(255,255,255,.28)}
.b-publish .caret:hover{background:var(--green-h)}
.b-publish .caret svg{width:15px;height:15px;stroke-width:2.6}
.b-obtn{
  display:flex;align-items:center;gap:9px;height:44px;padding:0 17px;
  border:1px solid var(--line-2);border-radius:8px;font-size:15px;font-weight:400;background:#fff;
}
.b-obtn:hover{background:var(--soft)}
.b-obtn svg{width:18px;height:18px;stroke-width:1.8}

/* ---- workspace ---- */
.b-wrap{display:flex;flex:1;min-height:0;overflow:hidden}

.b-panel{
  width:300px;flex:none;border-right:1px solid var(--line);
  display:flex;flex-direction:column;background:#fff;
}
.b-panel.hidden{display:none}
.b-panel-h{
  display:flex;align-items:center;padding:20px 22px 16px;
}
.b-panel-h b{font-size:19px;font-weight:600;letter-spacing:-.2px;flex:1}
.b-close{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.b-close:hover{background:var(--soft);color:var(--ink)}
.b-close svg{width:19px;height:19px;stroke-width:2}

.b-ptabs{display:flex;border-bottom:1px solid var(--line)}
.b-ptab{
  flex:1;padding:14px 0;font-size:16px;font-weight:500;color:var(--ink);
  border-bottom:3px solid transparent;margin-bottom:-1px;
}
.b-ptab.on{color:var(--green-h);border-color:var(--green)}

.b-list{flex:1;overflow-y:auto;padding:6px 0}
.b-item{
  display:flex;align-items:center;gap:16px;
  padding:16px 22px;width:100%;text-align:left;
  border-bottom:1px solid #F2F4F3;cursor:grab;
}
.b-item:hover{background:#F7FAF8}
.b-item .ic{width:22px;flex:none;color:var(--ink-2);display:grid;place-items:center}
.b-item .ic svg{width:20px;height:20px;stroke-width:1.7}
.b-item .ic .num{font-size:11px;font-weight:600;letter-spacing:-.3px}
.b-item .nm{flex:1;font-size:16px;font-weight:400}
.b-item .dots{color:#C7CDCA;flex:none}
.b-item .dots svg{width:17px;height:17px}
.b-item.dragging{opacity:.5}

/* ---- canvas ---- */
.b-canvas{
  flex:1;min-width:0;background:#F1F2F3;
  overflow-y:auto;overscroll-behavior:contain;padding:34px 40px 120px;
}
.b-sheet{
  max-width:900px;margin:0 auto;background:#fff;
  padding:44px 52px 56px;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.b-empty{
  border:2px dashed #D3DAD6;border-radius:8px;
  padding:60px 20px;text-align:center;color:var(--muted);font-size:15px;
}
.b-empty b{display:block;font-size:17px;color:var(--ink);font-weight:500;margin-bottom:6px}

.b-field{
  position:relative;padding:16px 18px;border-radius:6px;margin-bottom:14px;
  transition:background .12s;
}
.b-field:hover{background:#F2F3F4}
.b-field.picked{background:#F2F3F4;box-shadow:inset 0 0 0 1px #DFE4E1}
.b-field.drag-over{box-shadow:inset 0 3px 0 var(--green)}
.b-field.dragging{opacity:.4}

.b-tools{
  position:absolute;top:8px;right:52px;
  display:none;gap:8px;z-index:5;
}
.b-field:hover .b-tools,.b-field.picked .b-tools{display:flex}
.b-tools button{
  width:38px;height:38px;border-radius:7px;
  border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;color:var(--ink);
}
.b-tools button:hover{background:var(--soft)}
.b-tools button.del{background:#EF4444;border-color:#EF4444;color:#fff}
.b-tools button.del:hover{background:#DC2626}
.b-tools svg{width:18px;height:18px;stroke-width:1.9}

.b-grip{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:6px;
  display:none;place-items:center;color:#B9C2BD;cursor:grab;
}
.b-field:hover .b-grip,.b-field.picked .b-grip{display:grid}
.b-grip:hover{background:rgba(0,0,0,.05);color:var(--ink-2)}
.b-grip svg{width:18px;height:18px}

.b-lab{
  font-size:17.5px;color:#1F2937;font-weight:600;margin-bottom:14px;display:block;
  padding:2px 4px;border-radius:4px;outline:none;
}
.b-lab:focus{background:#F0FDF4;box-shadow:0 0 0 2px var(--green)}
.b-lab .star{color:#E5484D;margin-right:5px}
.b-req{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--muted);margin-left:10px;vertical-align:middle;
}
.b-req input{accent-color:var(--green)}

.b-in{
  width:100%;height:52px;border:1px solid #DCDCDC;border-radius:4px;background:#fff;
  padding:0 15px;font-size:15px;pointer-events:none;
}
.b-in.area{height:96px;padding-top:14px}
.b-opt{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:15px;color:#3F3F3F;font-weight:400}
.b-opt .box{width:19px;height:19px;border:1.5px solid #C4C4C4;flex:none}
.b-opt .box.round{border-radius:50%}
.b-opt .txt{padding:2px 5px;border-radius:4px;outline:none}
.b-opt .txt:focus{background:#F0FDF4;box-shadow:0 0 0 2px var(--green)}
.b-opt .rm{color:#C4C4C4;font-size:17px;line-height:1}
.b-opt .rm:hover{color:#E5484D}
.b-addopt{font-size:14px;color:var(--green-h);font-weight:500;padding:3px 0}
.b-addopt:hover{text-decoration:underline}

.b-title-blk{
  font-size:31px;font-weight:600;letter-spacing:-.3px;color:#2B2B2B;text-align:left;
  padding:4px 6px;border-radius:5px;outline:none;line-height:1.3;
}
.b-title-blk:focus{background:#F0FDF4;box-shadow:0 0 0 2px var(--green)}
.b-img-blk{width:100%;display:block;border:1px solid #E5E7EB}
.b-img-ph,.b-vid-ph{
  border:1px dashed #D3DAD6;border-radius:6px;padding:40px;text-align:center;
  color:var(--muted);font-size:14px;background:#FAFBFA;
}
.b-page-blk{
  display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.b-page-blk::before,.b-page-blk::after{content:"";flex:1;height:1px;background:#D8DEDA}
.b-stars{display:flex;gap:7px;color:#D4D8D6}
.b-stars svg{width:29px;height:29px}
.b-upl{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid #DCDCDC;border-radius:4px;font-size:15px;color:#3F3F3F;background:#fff;
}
.b-upl svg{width:17px;height:17px;stroke-width:1.9}

.b-drop{
  border:2px dashed var(--green);background:#F0FDF4;border-radius:8px;
  padding:26px;text-align:center;color:var(--green-h);font-size:14.5px;font-weight:500;
  margin-bottom:14px;display:none;
}
.b-drop.on{display:block}

.b-open-panel{
  position:fixed;left:20px;bottom:24px;z-index:50;
  display:none;align-items:center;gap:8px;height:42px;padding:0 18px;
  border-radius:8px;background:var(--green);color:#fff;font-size:14.5px;font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.b-open-panel.on{display:flex}

@media (max-width:900px){
  .b-panel{width:240px}
  .b-sheet{padding:26px 18px 34px}
  .b-canvas{padding:18px 12px 80px}
  .b-tabs{overflow-x:auto}
}

.b-field.is-section .b-title-blk{font-size:25px}

/* ══════════ SHARE / RESPONSES / SETTINGS ══════════ */
.b-view{display:none;flex:1;min-height:0;overflow-y:auto}
.b-view.on{display:block}
#v-build.on{display:flex;flex-direction:column;overflow:hidden}   /* build tab: canvas scrolls, not the page */

/* left rail shared by Share + Settings */
.rail-wrap{display:flex;min-height:100%}
.rail-nav{width:300px;flex:none;padding:22px 18px}
.rail-nav button{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 18px;border-radius:10px;margin-bottom:6px;
  font-size:16px;font-weight:500;color:var(--ink);text-align:left;
}
.rail-nav button:hover{background:var(--soft)}
.rail-nav button.on{background:#EBF9F0;color:var(--green-h)}
.rail-nav svg{width:21px;height:21px;stroke-width:1.8;flex:none}
.rail-body{flex:1;min-width:0;padding:26px 40px 70px}

.sec-h{font-size:20px;font-weight:600;letter-spacing:-.2px;margin-bottom:7px}
.sec-p{font-size:15.5px;color:var(--muted);margin-bottom:22px}
.hr{height:1px;background:var(--line);margin:38px 0}

.copybar{display:flex;max-width:840px;border-radius:8px;overflow:hidden;border:1px solid var(--line-2)}
.copybar input{flex:1;min-width:0;border:none;background:var(--soft);padding:0 18px;height:56px;font-size:16px}
.copybar input:focus{outline:none}
.copybar button{background:var(--green);color:#fff;padding:0 34px;font-size:16px;font-weight:500}
.copybar button:hover{background:var(--green-h)}

.socials{display:flex;gap:16px}
.soc{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff}
.soc svg{width:26px;height:26px;fill:currentColor}
.soc.fb{background:#3B5998}.soc.tw{background:#55ACEE}.soc.li{background:#0077B5}
.soc:hover{filter:brightness(1.08)}

.codebox{
  max-width:840px;background:#F7F8F8;border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:13px;line-height:1.7;color:#374151;white-space:pre-wrap;word-break:break-all;
}
.qr-big{
  width:200px;height:200px;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;
}
.qr-big i{display:block;width:100%;height:100%;background:repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0/22px 22px}

/* ---- responses ---- */
.rs-body{padding:24px 26px 70px}
.rs-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.rs-btn{
  height:48px;padding:0 22px;border:1px solid var(--line-2);border-radius:8px;
  background:#fff;font-size:16px;display:flex;align-items:center;gap:10px;
}
.rs-btn:hover{background:var(--soft)}
.rs-btn:disabled{color:#B6BFBA;cursor:not-allowed;background:#fff}
.rs-btn svg{width:18px;height:18px;stroke-width:1.9}
.rs-search{flex:1;min-width:200px;max-width:620px}
.rs-search input{width:100%;height:48px;border:1px solid var(--line-2);border-radius:8px;padding:0 16px;font-size:16px;background:#fff}
.rs-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.rs-date{position:relative}
.rs-date-btn{
  height:48px;border:1px solid var(--line-2);border-radius:8px;background:#fff;
  display:flex;align-items:center;gap:14px;padding:0 16px;font-size:16px;color:var(--ink);
}
.rs-date-btn.on{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.rs-date-btn .arw{color:var(--muted)}
.rs-date-btn svg{width:18px;height:18px;stroke-width:1.7;color:var(--muted)}

/* calendar */
.cal{
  position:absolute;right:0;top:56px;z-index:60;display:none;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px -8px rgba(16,24,40,.22);padding:16px 18px 14px;
}
.cal.on{display:block}
.cal-months{display:flex;gap:30px}
.cal-m{width:290px}
.cal-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:16px;font-weight:500}
.cal-h .t{flex:1;text-align:center}
.cal-h button{width:28px;height:28px;border-radius:6px;color:var(--muted);display:grid;place-items:center}
.cal-h button:hover{background:var(--soft);color:var(--ink)}
.cal-h svg{width:15px;height:15px;stroke-width:2}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-grid .dow{
  text-align:center;font-size:13.5px;color:var(--ink);padding:7px 0 9px;font-weight:400;
}
.cal-d{
  height:38px;display:grid;place-items:center;font-size:14.5px;cursor:pointer;color:var(--ink);
}
.cal-d.mute{color:#C9CFCC;cursor:default}
.cal-d.in{background:#E9F8EF}
.cal-d.edge{background:var(--green-h);color:#fff;border-radius:4px}
.cal-d:not(.mute):not(.edge):hover{background:var(--soft)}
.cal-quick{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line2)}
.cal-quick button{
  padding:8px 16px;border-radius:7px;background:#EBF9F0;color:var(--green-h);
  font-size:14.5px;font-weight:500;
}
.cal-quick button:hover{background:#D8F2E3}

.rs-tablewrap{border:1px solid var(--line);border-radius:8px;overflow-x:auto;background:#fff}
.rs-table{width:100%;border-collapse:collapse;min-width:1100px}
.rs-table th{
  text-align:left;font-size:16px;font-weight:500;color:var(--ink);
  padding:20px 22px;background:#FAFBFA;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line2);white-space:nowrap;
}
.rs-table th:last-child{border-right:none}
.rs-empty{padding:90px 0;text-align:center}
.rs-empty svg{width:88px;height:66px;margin-bottom:6px}
.rs-empty p{color:#A9B3AE;font-size:17px}
.rs-pager{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:24px}
.rs-pager button{
  width:42px;height:42px;border-radius:7px;border:1px solid transparent;
  color:var(--muted);display:grid;place-items:center;
}
.rs-pager button.on{border-color:var(--green);color:var(--green-h)}
.rs-pager button:disabled{color:#D4DAD7}
.rs-pager svg{width:15px;height:15px;stroke-width:2}

/* ---- settings rows ---- */
.set-row{display:flex;gap:32px;align-items:flex-start;margin-bottom:34px;max-width:1250px}
.set-lab{width:230px;flex:none;padding-top:14px;font-size:17px;color:var(--ink)}
.set-ctl{flex:1;min-width:0}
.set-in{
  width:100%;height:54px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:16px;background:#fff;
}
.set-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.13)}
.set-hint{font-size:15px;color:var(--muted);margin-top:12px;line-height:1.6}
.set-hint a{color:var(--green-h)}
.linkrow{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.linkrow .pre{
  padding:0 18px;height:54px;display:flex;align-items:center;
  color:var(--green-h);font-size:16px;border-right:1px solid var(--line-2);background:#fff;white-space:nowrap;
}
.linkrow input{flex:1;min-width:0;border:none;padding:0 16px;font-size:16px}
.linkrow input:focus{outline:none}
.sufrow{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.sufrow input{flex:1;min-width:0;border:none;padding:0 16px;height:54px;font-size:16px}
.sufrow input:focus{outline:none}
.sufrow .suf{
  padding:0 20px;display:flex;align-items:center;color:var(--green-h);
  font-size:16px;border-left:1px solid var(--line-2);white-space:nowrap;
}
.set-phone{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.set-phone .flag-btn{border-right:1px solid var(--line2);padding:0 14px;height:54px}
.set-phone input{flex:1;border:none;padding:0 16px;font-size:16px}
.set-phone input:focus{outline:none}
.set-sel{
  height:54px;border:1px solid var(--line-2);border-radius:8px;padding:0 16px;
  font-size:16px;background:#fff;min-width:230px;
}
.tog{width:64px;height:34px;border-radius:99px;background:var(--green);position:relative;flex:none;transition:background .18s}
.tog i{position:absolute;top:3px;left:33px;width:28px;height:28px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tog.off{background:#C9D5CE}
.tog.off i{left:3px}
.tog-row{display:flex;align-items:center;gap:16px;font-size:16px;color:var(--muted)}
.save-btn{
  height:52px;padding:0 34px;border-radius:8px;background:var(--soft);
  color:#B6BFBA;font-size:16px;font-weight:500;float:right;
}
.save-btn.live{background:var(--green);color:#fff}
.save-btn.live:hover{background:var(--green-h)}

.route-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1250px}
.rcard{border:1.5px solid var(--line-2);border-radius:10px;padding:34px 20px;text-align:center}
.rcard.on{border-color:var(--green);background:#F4FCF7}
.rcard svg{width:44px;height:44px;stroke-width:1.5;color:var(--ink-2);margin-bottom:14px}
.rcard.on svg{color:var(--green-h)}
.rcard b{font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.rcard .qm{width:17px;height:17px;border-radius:50%;border:1.4px solid var(--muted);color:var(--muted);font-size:11px;display:inline-grid;place-items:center}

.meta-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:18px}
.meta-tabs button{padding:10px 2px;font-size:16px;color:var(--ink);border-bottom:2px solid transparent;margin-bottom:-1px}
.meta-tabs button.on{color:var(--green-h);border-color:var(--green)}
.meta-drop{
  border:1px solid var(--line-2);border-radius:8px;padding:26px;max-width:1150px;
  display:grid;place-items:center;background:#fff;
}
.meta-drop img{max-width:360px;width:100%;border-radius:4px}

.empty-note{
  border:1px dashed var(--line-2);border-radius:10px;padding:56px 24px;text-align:center;
  color:var(--muted);font-size:15.5px;max-width:840px;
}
.empty-note b{display:block;color:var(--ink);font-size:17px;font-weight:500;margin-bottom:8px}

@media (max-width:900px){
  .rail-wrap{flex-direction:column}
  .rail-nav{width:auto;display:flex;gap:8px;overflow-x:auto;padding:14px}
  .rail-nav button{width:auto;white-space:nowrap;margin:0}
  .rail-body{padding:18px 14px 60px}
  .set-row{flex-direction:column;gap:10px}
  .set-lab{width:auto;padding-top:0}
  .route-cards{grid-template-columns:1fr}
  .cal-months{flex-direction:column;gap:18px}
  .cal{right:auto;left:0;max-width:94vw;overflow:auto}
}

/* ══════════ SHARE PANELS ══════════ */
.wa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1500px}
.wa-card{
  background:#EDF8E4;border-radius:14px;padding:30px 32px 18px;
  font-size:17px;line-height:1.65;color:var(--ink);position:relative;
}
.wa-card p{margin-bottom:17px}
.wa-card p:last-of-type{margin-bottom:8px}
.wa-card a{color:#3B82C4;text-decoration:none;word-break:break-all}
.wa-card a:hover{text-decoration:underline}
.wa-acts{display:flex;justify-content:flex-end;gap:20px;padding-top:6px}
.wa-acts button{color:var(--ink-2);display:grid;place-items:center;width:30px;height:30px;border-radius:6px}
.wa-acts button:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.wa-acts svg{width:24px;height:24px;stroke-width:1.6}

.snip{
  background:#F4F5F4;border-radius:8px;padding:20px 24px;max-width:1500px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:17px;color:#2B2B2B;white-space:nowrap;overflow-x:auto;
}
.snip::-webkit-scrollbar{height:9px}
.snip::-webkit-scrollbar-thumb{background:#C9CFCC;border-radius:9px}

.wm-row{display:flex;align-items:center;gap:16px;margin:22px 0 26px;flex-wrap:wrap}
.wm-row .lbl{font-size:17px;color:var(--ink)}
.wm-row input{
  width:330px;max-width:60vw;height:52px;border:none;background:#F4F5F4;border-radius:6px;
  padding:0 18px;font-size:17px;
}
.wm-row input:focus{outline:2px solid var(--green);outline-offset:-2px}
.wm-help{
  width:26px;height:26px;border-radius:50%;border:1.6px solid var(--muted);color:var(--muted);
  display:grid;place-items:center;font-size:14px;
}

.pos-row{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.bubble-ic{
  width:62px;height:62px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;flex:none;
}
.bubble-ic svg{width:32px;height:32px;fill:#fff}
.lr{display:flex;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.lr button{padding:11px 24px;font-size:17px;color:var(--ink);background:#fff}
.lr button.on{color:var(--green-h);box-shadow:inset 0 0 0 1.5px var(--green);border-radius:5px}

.widget-prev{
  border:1px solid var(--line);border-radius:8px;height:150px;max-width:640px;
  position:relative;margin-bottom:30px;background:#fff;
}
.widget-prev .tip{
  position:absolute;top:30px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:11px 18px;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.widget-prev .fab{
  position:absolute;bottom:24px;width:56px;height:56px;border-radius:50%;
  background:var(--green);display:grid;place-items:center;
}
.widget-prev .fab svg{width:29px;height:29px;fill:#fff}
.widget-prev.right .tip{right:80px}
.widget-prev.right .fab{right:24px}
.widget-prev.left .tip{left:80px}
.widget-prev.left .fab{left:24px}

.wp-btn{
  height:56px;padding:0 30px;border-radius:6px;background:var(--green);color:#fff;
  font-size:18px;font-weight:400;display:inline-flex;align-items:center;
}
.wp-btn:hover{background:var(--green-h)}

.qr-wrap{max-width:420px}
.qr-img{width:100%;display:block;image-rendering:pixelated}
.qr-btns{display:flex;gap:22px;margin-top:26px}
.qr-btns button{
  height:58px;padding:0 30px;border-radius:8px;font-size:18px;
  display:inline-flex;align-items:center;gap:12px;
}
.qr-btns .print{border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.qr-btns .print:hover{background:var(--soft)}
.qr-btns .dl{background:var(--green);color:#fff}
.qr-btns .dl:hover{background:var(--green-h)}
.qr-btns svg{width:22px;height:22px;stroke-width:1.8}

@media (max-width:1100px){ .wa-grid{grid-template-columns:1fr} }
@media (max-width:900px){
  .snip{font-size:14px;padding:14px 16px}
  .wa-card{font-size:15px;padding:22px 20px 12px}
  .wm-row input{width:100%}
}

/* ══════════ EDIT PANEL (right side) ══════════ */
.b-wrap.with-panel .b-canvas{padding-right:26px}
.ep{
  position:fixed;right:0;z-index:90;
  width:390px;max-width:94vw;
  background:#fff;border:1px solid var(--line);border-right:none;
  border-radius:12px 0 0 12px;
  box-shadow:-10px 0 34px -14px rgba(16,24,40,.28);
  display:none;flex-direction:column;
  max-height:calc(100vh - 24px);overflow-y:auto;
  transition:top .12s ease-out;
}
.ep.on{display:flex}
.ep-h{
  display:flex;align-items:center;gap:12px;padding:22px 24px 18px;
  position:sticky;top:0;background:#fff;z-index:2;
}
.ep-h b{font-size:20px;font-weight:600;letter-spacing:-.2px;flex:1}
.ep-body{padding:4px 24px 60px}

.ep-lab{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:600;color:var(--ink);margin:26px 0 12px;
}
.ep-lab:first-child{margin-top:0}
.ep-q{
  width:21px;height:21px;border-radius:50%;border:1.5px solid var(--muted);
  color:var(--muted);font-size:12px;display:grid;place-items:center;cursor:help;flex:none;
}
.ep-in{
  width:100%;height:54px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:16px;background:#fff;
}
.ep-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}

.ep-rt{border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.ep-rt-bar{display:flex;gap:6px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line2)}
.ep-rt-bar button{
  width:34px;height:34px;border-radius:6px;display:grid;place-items:center;
  font-size:17px;color:var(--ink);
}
.ep-rt-bar button:hover{background:var(--soft)}
.ep-rt-bar button.on{color:var(--green-h)}
.ep-rt-bar .b{font-weight:700}
.ep-rt-bar .i{font-style:italic;font-family:Georgia,serif}
.ep-rt-bar svg{width:19px;height:19px;stroke-width:1.9}
.ep-rt-area{
  min-height:118px;padding:16px;font-size:16px;background:#F4F5F4;outline:none;line-height:1.6;
}
.ep-rt-area:empty::before{content:attr(data-ph);color:#9CA3AF}

.ep-file{
  display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 22px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:17px;color:var(--ink);
}
.ep-file:hover{background:var(--soft)}
.ep-file svg{width:21px;height:21px;stroke-width:1.7}
.ep-thumb{margin-top:12px;max-width:100%;border:1px solid var(--line);border-radius:6px;display:block}

.ep-opt-head{display:flex;align-items:center;margin:26px 0 14px}
.ep-opt-head b{font-size:17px;font-weight:600;flex:1}
.ep-bulk{
  border:1px dashed var(--line-2);border-radius:7px;padding:7px 16px;
  font-size:15px;color:var(--ink-2);background:#fff;
}
.ep-bulk:hover{border-color:var(--muted);color:var(--ink)}
.ep-opt{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative}
.ep-grip{color:#C3CBC7;cursor:grab;flex:none;display:grid;place-items:center}
.ep-grip svg{width:20px;height:20px}
.ep-opt input{
  flex:1;min-width:0;height:52px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:16px;
}
.ep-opt input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.ep-omenu{
  width:52px;height:52px;border:1px solid var(--line-2);border-radius:8px;flex:none;
  display:grid;place-items:center;color:var(--ink);background:#fff;
}
.ep-omenu:hover{background:var(--soft)}
.ep-omenu.open{border-color:var(--green);color:var(--green-h)}
.ep-omenu svg{width:18px;height:18px}
.ep-pop{
  position:absolute;right:0;top:56px;z-index:20;background:#fff;border-radius:10px;
  box-shadow:0 6px 12px -4px rgba(16,24,40,.1), 0 16px 32px -8px rgba(16,24,40,.2);
  padding:8px;min-width:210px;display:none;
}
.ep-pop.on{display:block}
.ep-pop button{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;
  border-radius:7px;font-size:16px;text-align:left;color:var(--ink);
}
.ep-pop button:hover{background:var(--soft)}
.ep-pop button.danger{color:#E5484D}
.ep-pop svg{width:19px;height:19px;stroke-width:1.8;flex:none}
.ep-add{
  width:100%;height:54px;border:1px solid var(--line-2);border-radius:8px;
  font-size:17px;color:var(--ink);background:#fff;
}
.ep-add:hover{background:var(--soft)}
.ep-bulkbox{
  width:100%;min-height:150px;border:1px solid var(--line-2);border-radius:8px;
  padding:14px 16px;font-size:16px;line-height:1.7;resize:vertical;
}
.ep-bulkbox:focus{outline:none;border-color:var(--green)}

.ep-toggle-row{
  display:flex;align-items:center;gap:16px;margin:30px 0 6px;
  padding-top:26px;border-top:1px solid var(--line2);
}
.ep-toggle-row.plain{border-top:none;padding-top:0;margin-top:26px}
.ep-toggle-row b{flex:1;font-size:17px;font-weight:600}
.ep-sel{
  width:100%;height:54px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:16px;background:#fff;
}

@media (max-width:1350px){ .b-panel{width:250px} }

.b-sub{font-size:15px;color:var(--muted);margin:-4px 0 12px;line-height:1.55}
.b-in .ph{color:#B0B0B0;padding:0 15px;line-height:52px;display:block}
.b-datein{display:flex;align-items:center;justify-content:space-between}
.b-datein svg{width:20px;height:20px;stroke-width:1.7;color:#B0B0B0;margin-right:15px}
.b-opthint{font-size:16px;color:#9AA5A0;margin-top:12px}
.b-field.picked{background:#F7FDF9;box-shadow:inset 0 0 0 1.5px var(--green);border-radius:8px}

/* ══════════ LOGIC PANEL ══════════ */
.ep.wide{width:640px;max-width:94vw}
.lg-head{display:flex;align-items:center;gap:14px;margin:8px 0 26px}
.lg-head .col{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:500;color:var(--ink)}
.lg-head .col svg{width:22px;height:22px;stroke-width:1.8;color:var(--ink-2)}
.lg-head .c1{flex:0 0 300px}
.lg-head .c2{flex:1}

.lg-rule{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lg-sel{
  height:54px;border:1px solid var(--line-2);border-radius:8px;background:#fff;
  padding:0 14px;font-size:16px;color:var(--ink);min-width:0;
}
.lg-sel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.lg-op{flex:0 0 165px}
.lg-val{
  flex:1;min-width:0;height:54px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 14px;font-size:16px;background:#fff;
}
.lg-val:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.lg-val:disabled{background:#F6F7F6;color:#B6BFBA}
.lg-go{flex:0 0 150px}
.lg-del{
  width:54px;height:54px;flex:none;border:1px solid #F3C7C4;border-radius:8px;
  background:#fff;color:#E5484D;display:grid;place-items:center;
}
.lg-del:hover{background:#FEF2F2;border-color:#E5484D}
.lg-del svg{width:20px;height:20px;stroke-width:1.8}
.lg-add{
  display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 24px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:17px;color:var(--ink);
}
.lg-add:hover{background:var(--soft)}
.lg-add svg{width:19px;height:19px;stroke-width:2.2}
.lg-empty{font-size:16px;color:var(--muted);margin-bottom:20px}

/* ══════════ DELETE CONFIRM ══════════ */
.del-pop{
  position:absolute;top:50px;right:14px;z-index:30;width:420px;max-width:82vw;
  background:#fff;border-radius:12px;padding:22px 24px 18px;
  box-shadow:0 6px 14px -4px rgba(16,24,40,.1), 0 22px 44px -10px rgba(16,24,40,.24);
  display:none;text-align:left;
}
.del-pop.on{display:block}
.del-pop h4{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;margin-bottom:12px}
.del-pop .warn{
  width:26px;height:26px;border-radius:50%;background:#F5A623;color:#fff;flex:none;
  display:grid;place-items:center;font-size:16px;font-weight:700;
}
.del-pop p{font-size:16px;color:var(--ink-2);line-height:1.6;margin-bottom:20px}
.del-pop .acts{display:flex;justify-content:flex-end;gap:12px}
.del-pop .no{
  height:44px;padding:0 22px;border:1px solid var(--line-2);border-radius:7px;
  background:#fff;font-size:16px;color:var(--ink);
}
.del-pop .no:hover{background:var(--soft)}
.del-pop .yes{
  height:44px;padding:0 26px;border-radius:7px;background:var(--green);color:#fff;font-size:16px;
}
.del-pop .yes:hover{background:var(--green-h)}

/* page chip in canvas */
.pg-chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-2);border-radius:7px;padding:8px 15px;
  font-size:16px;color:var(--ink);background:#fff;float:right;margin-top:6px;
}
.pg-chip svg{width:18px;height:18px;stroke-width:1.8;color:var(--ink-2)}

/* narrow screens: the panel slides over the canvas instead of squeezing it */
.ep-h{border-bottom:1px solid var(--line2)}
.ep-backdrop{position:fixed;inset:0;background:rgba(10,32,24,.22);z-index:85;display:none}
.ep-backdrop.on{display:block}

@media (max-width:1200px){
  .ep{width:520px}
  .ep.wide{width:640px}
  .b-wrap.with-panel .b-canvas{padding-left:18px;padding-right:18px}
}
@media (max-width:760px){
  .lg-head .c1{flex:0 0 auto}
  .lg-rule{flex-wrap:wrap}
  .lg-op,.lg-go{flex:1 1 145px}
  .lg-val{flex:1 1 100%;order:5}
}

/* keep the hover toolbar off the label text */
.b-field .b-lab,
.b-field .b-title-blk{padding-right:180px}
.b-field .b-sub{padding-right:180px}

/* ══════════ TOP-BAR MENUS ══════════ */
.tb-wrap{position:relative}
.tb-menu{
  position:absolute;top:calc(100% + 10px);z-index:70;
  background:#fff;border-radius:12px;padding:10px;min-width:280px;display:none;
  box-shadow:0 4px 8px -3px rgba(16,24,40,.08), 0 16px 34px -8px rgba(16,24,40,.22);
}
.tb-menu.on{display:block}
.tb-menu.left{left:0}
.tb-menu.right{right:0}
.tb-menu button{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:12px 14px;border-radius:9px;font-size:16px;color:var(--ink);text-align:left;
}
.tb-menu button:hover{background:var(--soft)}
.tb-menu button svg{width:20px;height:20px;stroke-width:1.8;color:var(--ink-2);flex:none}
.tb-menu .sep{height:1px;background:var(--line2);margin:8px 4px}

/* workspace list */
.ws-item{
  display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:10px;
  width:100%;padding:13px 14px;border-radius:9px;
  font-size:17px;color:#1F2937;text-align:left;cursor:pointer;
}
.ws-item:hover{background:#F1FAF4}
.ws-item.on{background:#EBF9F0}
.ws-item .nm{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#1F2937;font-size:17px;line-height:1.4;
}
#ws-menu, #ws-menu2, #ws-menu3{width:340px;max-width:88vw}
.ws-gear{
  width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:var(--ink-2);
}
.ws-gear:hover{background:rgba(0,0,0,.07);color:var(--ink)}
.ws-gear svg{width:19px;height:19px;stroke-width:1.7}
.ws-new{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:8px;height:52px;border:1px solid var(--line-2);border-radius:9px;
  font-size:17px;color:var(--ink);background:#fff;
}
.ws-new:hover{background:var(--soft)}
.ws-new svg{width:19px;height:19px;stroke-width:2.2}
.lang-menu button{font-size:17px;padding:14px}
.top-link.act{color:var(--green-h);box-shadow:inset 0 -2px 0 var(--green)}

/* ══════════ MODAL ══════════ */
.modal-bg{
  position:fixed;inset:0;background:rgba(17,24,20,.45);z-index:120;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.on{display:flex}
.modal{
  background:#fff;border-radius:12px;width:100%;max-width:640px;
  box-shadow:0 24px 60px -12px rgba(16,24,40,.3);
}
.modal-h{
  display:flex;align-items:center;gap:14px;padding:26px 30px;
  border-bottom:1px solid var(--line2);
}
.modal-h b{flex:1;font-size:23px;font-weight:600;letter-spacing:-.3px}
.modal-h button{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.modal-h button:hover{background:var(--soft);color:var(--ink)}
.modal-h svg{width:22px;height:22px;stroke-width:2}
.modal-b{padding:30px}
.modal-b label{display:block;font-size:17px;color:var(--ink);margin-bottom:12px}
.modal-in{
  width:100%;height:56px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:17px;
}
.modal-in::placeholder{color:#B4BBB7}
.modal-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.modal-f{
  display:flex;justify-content:flex-end;gap:14px;padding:20px 30px;
  border-top:1px solid var(--line2);
}
.m-cancel{
  height:50px;padding:0 26px;border:1px solid var(--line-2);border-radius:8px;
  background:#fff;font-size:17px;color:var(--ink);
}
.m-cancel:hover{background:var(--soft)}
.m-go{height:50px;padding:0 32px;border-radius:8px;background:var(--green);color:#fff;font-size:17px}
.m-go:hover{background:var(--green-h)}
.m-err{color:#DC2626;font-size:14.5px;margin-top:10px;display:none}
.m-err.on{display:block}

/* ══════════ WORKSPACE SETTINGS ══════════ */
#screen-ws{display:none;min-height:100vh;background:#fff;flex-direction:column}
#screen-ws.on{display:flex}
.wsx{max-width:1300px;width:100%;margin:0 auto;padding:40px 28px 80px}
.wsx-h{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.wsx-h button{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--ink)}
.wsx-h button:hover{background:var(--soft)}
.wsx-h svg{width:24px;height:24px;stroke-width:2}
.wsx-h h2{font-size:30px;font-weight:600;letter-spacing:-.5px}
.wsx-lab{font-size:20px;font-weight:600;margin-bottom:16px}
.wsx-name{display:flex;gap:16px;max-width:920px;margin-bottom:44px}
.wsx-name input{
  flex:1;min-width:0;height:56px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 16px;font-size:17px;
}
.wsx-name input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.wsx-save{height:56px;padding:0 34px;border-radius:8px;background:var(--green);color:#fff;font-size:17px}
.wsx-save:hover{background:var(--green-h)}
.wsx-rule{height:1px;background:var(--line);margin:0 0 40px}
.wsx-mrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.wsx-mrow .wsx-lab{margin:0;flex:1}
.wsx-invite{
  height:56px;padding:0 28px;border-radius:8px;background:var(--green);color:#fff;
  font-size:17px;display:inline-flex;align-items:center;gap:11px;
}
.wsx-invite:hover{background:var(--green-h)}
.wsx-invite svg{width:20px;height:20px;stroke-width:2.2}
.wsx-table{width:100%;border-collapse:collapse;margin-bottom:44px}
.wsx-table th{
  text-align:left;font-size:18px;font-weight:400;color:var(--muted);
  padding:20px 24px;background:#FAFBFA;border-bottom:1px solid var(--line);
}
.wsx-table th:nth-child(2){border-left:1px solid var(--line2)}
.wsx-table td{padding:22px 24px;border-bottom:1px solid var(--line2);font-size:18px;vertical-align:middle}
.wsx-who{display:flex;align-items:center;gap:16px}
.wsx-who .av{width:52px;height:52px;font-size:17px}
.wsx-who b{display:block;font-size:19px;font-weight:400}
.wsx-who span{display:block;font-size:16px;color:var(--muted);margin-top:3px}
.wsx-rm{color:#E5484D;font-size:16px}
.wsx-rm:hover{text-decoration:underline}
.wsx-danger{
  border:1px solid #F5CFCB;background:#FEF3F2;border-radius:10px;
  padding:26px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.wsx-danger .tx{flex:1;min-width:240px}
.wsx-danger b{display:block;color:#DC2626;font-size:20px;font-weight:600;margin-bottom:8px}
.wsx-danger p{color:var(--ink-2);font-size:17px;line-height:1.5}
.wsx-del{
  height:56px;padding:0 28px;border:1px solid #E5484D;border-radius:8px;
  background:transparent;color:#DC2626;font-size:18px;
}
.wsx-del:hover{background:#FEE4E2}

@media (max-width:700px){
  .wsx{padding:24px 16px 60px}
  .wsx-h h2{font-size:23px}
  .wsx-name{flex-direction:column}
  .wsx-table th,.wsx-table td{padding:14px}
  .modal-b,.modal-h,.modal-f{padding-left:20px;padding-right:20px}
}

/* ══════════ ACCOUNT SETTINGS ══════════ */
#screen-acct{display:none;min-height:100vh;background:#fff;flex-direction:column}
#screen-acct.on{display:flex}
.acc-head{
  display:flex;align-items:center;gap:16px;padding:26px 28px;border-bottom:1px solid var(--line);
}
.acc-head button{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--ink)}
.acc-head button:hover{background:var(--soft)}
.acc-head svg{width:24px;height:24px;stroke-width:2}
.acc-head h2{font-size:27px;font-weight:600;letter-spacing:-.4px}
.acc-body{max-width:1000px;width:100%;margin:0 auto;padding:44px 28px 90px}
.acc-lab{font-size:18px;color:var(--ink);margin-bottom:12px}
.acc-in{
  width:100%;height:58px;border:1px solid var(--line-2);border-radius:8px;
  padding:0 18px;font-size:18px;background:#fff;margin-bottom:32px;
}
.acc-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.acc-phone{display:flex;height:58px;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;margin-bottom:36px}
.acc-phone .flag-btn{border-right:1px solid var(--line2);padding:0 15px}
.acc-phone input{flex:1;min-width:0;border:none;padding:0 18px;font-size:18px}
.acc-phone input:focus{outline:none}

.acc-radio{display:flex;align-items:center;gap:13px;margin-bottom:16px;cursor:pointer;font-size:18px}
.acc-radio input{width:22px;height:22px;accent-color:var(--green);cursor:pointer}
.dom-row{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;margin:6px 0 12px}
.dom-row .pre{
  padding:0 20px;height:58px;display:flex;align-items:center;
  color:var(--green-h);font-size:18px;border-right:1px solid var(--line-2);
}
.dom-row input{flex:1;min-width:0;border:none;padding:0 18px;font-size:18px}
.dom-row input:focus{outline:none}
.dom-row.off{opacity:.5}
.dom-hint{font-size:17px;color:var(--ink-2);margin-bottom:32px}
.dom-hint a{color:var(--green-h)}
.acc-save{height:56px;padding:0 34px;border-radius:8px;background:var(--green);color:#fff;font-size:18px}
.acc-save:hover{background:var(--green-h)}
.acc-rule{height:1px;background:var(--line);margin:46px 0}

.use-head{display:flex;align-items:center;margin-bottom:28px}
.use-head b{flex:1;font-size:22px;font-weight:600}
.use-up{
  display:inline-flex;align-items:center;gap:11px;height:52px;padding:0 22px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:17px;color:var(--ink);
}
.use-up:hover{background:var(--soft)}
.use-up svg{width:20px;height:20px;stroke-width:1.9}
.use-row{display:flex;align-items:baseline;margin-bottom:12px;font-size:19px}
.use-row b{flex:1;font-weight:400}
.use-row span{color:var(--ink)}
.use-bar{height:8px;border-radius:99px;background:#EDF0EE;margin-bottom:34px;overflow:hidden}
.use-bar i{display:block;height:100%;background:var(--green);border-radius:99px}

.del-acc h3{font-size:22px;font-weight:600;margin-bottom:10px}
.del-acc p{font-size:18px;color:var(--ink-2);margin-bottom:22px}
.del-warn{
  background:#FEF9E7;border:1px solid #F5E3B0;border-radius:8px;
  padding:22px 24px;font-size:18px;color:#4A4326;margin-bottom:24px;
}
.del-btn{
  height:56px;padding:0 28px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--soft);color:#AEB6B1;font-size:18px;cursor:not-allowed;
}
.del-btn.live{background:#fff;border-color:#E5484D;color:#DC2626;cursor:pointer}
.del-btn.live:hover{background:#FEE4E2}

/* billing */
.bill-card{
  border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin-bottom:22px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.bill-card .tx{flex:1;min-width:220px}
.bill-card b{display:block;font-size:21px;font-weight:600;margin-bottom:6px}
.bill-card p{color:var(--ink-2);font-size:17px}
.bill-tag{
  background:var(--mint);color:var(--green-h);font-size:15px;font-weight:600;
  padding:6px 14px;border-radius:99px;
}
@media (max-width:700px){
  .acc-body{padding:24px 16px 60px}
  .acc-head h2{font-size:22px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  —  loaded last so it wins over the desktop rules
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ---------- shared top bars ---------- */
  .app-top,.b-top{
    height:auto;min-height:60px;padding:10px 14px;gap:10px;flex-wrap:nowrap;
  }
  .app-logo{width:32px;height:32px}
  .ws-switch{
    height:40px;padding:0 11px;font-size:14px;gap:7px;
    max-width:46vw;overflow:hidden;
  }
  .ws-switch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ws-switch .fold{display:none}
  .top-link{font-size:14px;padding:7px 8px;gap:5px}
  .top-link svg{width:16px;height:16px}

  /* ---------- dashboard ---------- */
  .app-body{padding:18px 14px 60px}
  .hello-row{
    display:grid;grid-template-columns:1fr auto auto;
    grid-template-areas:"hi av inv" "search search search" "new new new";
    gap:12px;margin-bottom:22px;
  }
  .hello{grid-area:hi;font-size:24px;gap:7px}
  .hello .wave{font-size:22px}
  .hello-row .grow{display:none}
  .people{display:contents}
  .avatar{grid-area:av;width:34px;height:34px}
  .add-person{grid-area:inv}
  .search-box{grid-area:search;width:100%}
  .search-box input{height:44px;font-size:15px}
  .btn-new{grid-area:new;width:100%;justify-content:center;height:46px}

  .fcard{padding:18px 18px 14px;min-height:0;border-radius:12px}
  .fcard-title{font-size:17px}
  .fcard-link{font-size:13px}
  .fcard-foot{gap:18px;padding-top:16px}
  .fact{font-size:13.5px;gap:6px}
  .fact svg{width:16px;height:16px}
  .forms-grid{gap:14px}

  /* ---------- top-bar menus ---------- */
  .tb-menu{min-width:0;width:min(320px,88vw)}
  #ws-menu,#ws-menu2,#ws-menu3{width:min(320px,88vw)}
  .tb-menu.right{right:0}
  .tb-menu.left{left:0}

  /* ---------- builder chrome ---------- */
  .b-name{font-size:17px;max-width:44vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .b-tabs{
    height:auto;padding:0 10px;gap:2px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .b-tabs::-webkit-scrollbar{display:none}
  .b-tabs .grow{flex:0 0 6px}
  .b-tab{height:52px;padding:0 12px;font-size:14px;gap:6px;flex:none}
  .b-tab svg{width:16px;height:16px}
  .b-publish{height:38px;flex:none}
  .b-publish .main{padding:0 14px;font-size:14px}
  .b-publish .caret{width:30px}
  .b-obtn{height:38px;padding:0 11px;font-size:14px;gap:6px;flex:none}
  .b-obtn svg{width:15px;height:15px}

  /* ---------- builder workspace ---------- */
  .b-wrap{position:relative}
  .b-panel{
    position:absolute;top:0;bottom:0;left:0;z-index:95;
    width:min(300px,82vw);
    box-shadow:6px 0 26px -10px rgba(16,24,40,.3);
  }
  .b-canvas{padding:14px 10px 110px}
  .b-sheet{padding:22px 16px 30px}
  .b-open-panel{left:14px;bottom:16px;height:44px;font-size:14px}

  .b-field{padding:14px 12px}
  .b-field .b-lab,.b-field .b-title-blk,.b-field .b-sub{padding-right:0}
  .b-tools{position:static;display:none;justify-content:flex-end;margin-bottom:10px}
  .b-field:hover .b-tools,.b-field.picked .b-tools{display:flex}
  .b-tools button{width:34px;height:34px}
  .b-grip{display:none!important}
  .b-title-blk{font-size:24px}
  .b-field.is-section .b-title-blk{font-size:20px}
  .b-lab{font-size:16px}
  .b-in{height:48px}

  /* edit panel becomes a bottom sheet */
  .ep{
    top:auto!important;bottom:0;left:0;right:0;
    width:100%!important;max-width:100%!important;
    max-height:82vh;border-radius:16px 16px 0 0;
    border:1px solid var(--line);border-bottom:none;
    box-shadow:0 -10px 34px -12px rgba(16,24,40,.3);
  }
  .ep.wide{width:100%!important}
  .ep-h{padding:16px 18px 12px;position:sticky;top:0}
  .ep-h b{font-size:17px}
  .ep-body{padding:4px 18px 40px}
  .ep-lab{font-size:15.5px;margin:20px 0 10px}
  .ep-in,.ep-file,.ep-add,.ep-sel{height:48px;font-size:15px}
  .ep-opt input{height:46px;font-size:15px}
  .ep-omenu{width:46px;height:46px}
  .ep-toggle-row b{font-size:15.5px}

  /* logic panel */
  .lg-head{gap:10px;margin-bottom:18px}
  .lg-head .col{font-size:15px}
  .lg-head .c1{flex:1}
  .lg-rule{flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .lg-op,.lg-go{flex:1 1 44%;min-width:0}
  .lg-sel,.lg-val{height:46px;font-size:15px}
  .lg-val{flex:1 1 100%;order:5}
  .lg-del{width:46px;height:46px}
  .lg-add{height:46px;font-size:15px}

  .del-pop{right:6px;width:min(420px,92vw)}

  /* ---------- share / settings rails ---------- */
  .rail-nav{padding:10px 12px;gap:8px}
  .rail-nav button{padding:11px 14px;font-size:14.5px;gap:9px}
  .rail-nav svg{width:18px;height:18px}
  .rail-body{padding:18px 14px 60px}
  .sec-h{font-size:18px}
  .sec-p{font-size:14.5px;margin-bottom:18px}
  .copybar{flex-direction:column;border:none;gap:10px}
  .copybar input{border:1px solid var(--line-2);border-radius:8px;height:50px;font-size:15px}
  .copybar button{border-radius:8px;height:48px;font-size:15px;padding:0}
  .socials{gap:12px}
  .soc{width:48px;height:48px}
  .soc svg{width:22px;height:22px}
  .wa-card{padding:20px 18px 10px;font-size:15px;border-radius:12px}
  .snip{font-size:13px;padding:14px 15px}
  .wm-row{gap:10px;margin:16px 0 20px}
  .wm-row .lbl{font-size:15px}
  .wm-row input{width:100%;height:46px;font-size:15px}
  .widget-prev{height:120px}
  .qr-big{width:170px;height:170px}
  .qr-btns{flex-wrap:wrap;gap:12px}
  .qr-btns button{height:48px;font-size:15px;flex:1 1 45%;justify-content:center}
  .wp-btn{height:48px;font-size:15px}

  /* ---------- responses ---------- */
  .rs-body{padding:16px 14px 60px}
  .rs-bar{gap:10px;margin-bottom:16px}
  .rs-btn{height:42px;padding:0 14px;font-size:14px;flex:1 1 auto;justify-content:center}
  .rs-search{flex:1 1 100%;max-width:100%}
  .rs-search input{height:42px;font-size:15px}
  .rs-date{flex:1 1 100%}
  .rs-date-btn{width:100%;height:42px;font-size:14px;justify-content:center;gap:8px}
  .cal{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(360px,94vw);max-height:86vh;overflow:auto;
  }
  .cal-m{width:100%}
  .cal-d{height:34px;font-size:13.5px}
  .cal-quick{gap:8px}
  .cal-quick button{padding:7px 12px;font-size:13px}
  .rs-table th{font-size:14px;padding:14px 16px}
  .rs-empty{padding:60px 0}

  /* ---------- form settings rows ---------- */
  .set-row{flex-direction:column;gap:10px;margin-bottom:26px}
  .set-lab{width:auto;padding-top:0}
  .set-in,.set-sel,.linkrow .pre,.linkrow input,
  .sufrow input,.set-phone input{height:50px;font-size:15px}
  .linkrow{flex-wrap:wrap}
  .linkrow .pre{width:100%;border-right:none;border-bottom:1px solid var(--line-2);font-size:14px}
  .sufrow .suf{padding:0 14px;font-size:15px}
  .route-cards{grid-template-columns:1fr;gap:12px}
  .rcard{padding:22px 16px}
  .rcard svg{width:34px;height:34px;margin-bottom:10px}
  .save-btn{width:100%;height:48px;float:none;margin-top:18px}

  /* ---------- workspace settings ---------- */
  .wsx{padding:20px 14px 60px}
  .wsx-h{gap:10px;margin-bottom:26px}
  .wsx-h h2{font-size:21px}
  .wsx-lab{font-size:17px}
  .wsx-name{flex-direction:column;gap:10px;margin-bottom:32px}
  .wsx-name input,.wsx-save{height:50px;font-size:15px}
  .wsx-save{width:100%}
  .wsx-mrow{flex-wrap:wrap;gap:12px}
  .wsx-invite{height:46px;font-size:15px;width:100%;justify-content:center}
  .wsx-table th{font-size:14px;padding:12px 10px}
  .wsx-table td{padding:14px 10px;font-size:15px}
  .wsx-who{gap:11px}
  .wsx-who .av{width:38px;height:38px;font-size:13px}
  .wsx-who b{font-size:15.5px}
  .wsx-who span{font-size:13px;word-break:break-all}
  .wsx-danger{padding:20px 18px;gap:16px}
  .wsx-danger b{font-size:17px}
  .wsx-danger p{font-size:15px}
  .wsx-del{width:100%;height:48px;font-size:16px}

  /* ---------- account ---------- */
  .acc-head{padding:16px 14px}
  .acc-head h2{font-size:20px}
  .acc-body{padding:20px 14px 60px}
  .acc-lab{font-size:16px}
  .acc-in,.acc-phone,.dom-row,.dom-row .pre,.dom-row input{height:50px;font-size:15px}
  .acc-in{margin-bottom:24px}
  .acc-radio{font-size:15.5px}
  .acc-save,.use-up,.del-btn{height:48px;font-size:15px}
  .use-head b{font-size:18px}
  .use-row{font-size:16px}
  .del-acc h3{font-size:18px}
  .del-acc p,.del-warn{font-size:15px}
  .bill-card{padding:20px 18px;gap:14px}
  .bill-card b{font-size:18px}
  .bill-card p{font-size:15px}

  /* ---------- modals ---------- */
  .modal-h{padding:18px 18px}
  .modal-h b{font-size:19px}
  .modal-b{padding:20px 18px}
  .modal-in{height:50px;font-size:15px}
  .modal-f{padding:16px 18px;gap:10px}
  .m-cancel,.m-go{height:46px;font-size:15px;flex:1;padding:0}

  /* ---------- public form ---------- */
  #screen-form{padding:0 0 60px}
  .form-shell{padding:24px 16px 32px;border-radius:0;box-shadow:none}
  .form-title{font-size:24px;margin-bottom:20px}
  .form-title.section{font-size:20px;margin:30px 0 18px}
  .form-sub{font-size:15px;margin:-10px 0 22px}
  .q{margin-bottom:30px}
  .q-label{font-size:16px;margin-bottom:11px}
  .q-input,.q-phone{height:48px;font-size:15px}
  .q .b-stars svg{width:32px;height:32px}
  .q .b-opt{font-size:15px;margin-bottom:12px}
  .upload-btn,.submit-wa{height:48px;font-size:15px}
  .submit-wa{width:100%;justify-content:center}
  .form-back{position:static;margin:14px auto 0;display:flex;width:max-content}
  .form-foot{font-size:12px;padding:0 14px}
}

/* very small phones */
@media (max-width:400px){
  .ws-switch{max-width:38vw;font-size:13px}
  .top-link{font-size:13px;padding:6px}
  .hello{font-size:21px}
  .b-name{font-size:15.5px;max-width:38vw}
  .otp{gap:8px}
  .otp input{width:52px;flex:0 0 52px;height:56px;font-size:22px}
  .fcard-foot{gap:12px}
  .fact{font-size:12.5px}
  .form-shell{padding:20px 13px 28px}
  .form-title{font-size:22px}
}

/* touch devices: drag-and-drop is unavailable, so lean on tap-to-add */
@media (hover:none){
  .b-tools{display:flex!important}
  .b-item{cursor:pointer}
  .pin-btn{opacity:1!important}
}