/* ══ 1. HIDE ALL WP CHROME ══════════════════════════════════════════════════ */
#adminmenumain,#adminmenuback,#adminmenuwrap,
#wpadminbar,#wpfooter,#update-nag,.update-nag,
.notice,.error,.updated,.is-dismissible,
#screen-meta,#screen-meta-links,
#wpbody>#wpcontent .notice { display:none !important }

#wpcontent,#wpbody,#wpbody-content { margin:0 !important; padding:0 !important }
html,body { overflow:hidden !important }

/* ══ 2. TOKENS ═══════════════════════════════════════════════════════════════ */
:root {
  --bg:#F6F7F9; --sur:#fff; --bdr:#E4E7EC; --bdr-s:#F0F2F5;
  --t1:#0F172A;  --t2:#475569; --t3:#94A3B8;
  --acc:#0D7377; --acc-h:#0A5E62; --acc-l:#E6F4F5;
  --ok:#059669;  --ok-l:#D1FAE5;
  --r:10px; --rl:14px;
}

/* ══ 3. FULL-SCREEN SHELL ════════════════════════════════════════════════════ */
#serb-onboarding-root {
  position:fixed; inset:0; z-index:999999;
  width:100vw; height:100vh;
  display:flex;
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px; line-height:1.5; color:var(--t1);
  box-sizing:border-box;
}
#serb-onboarding-root *, #serb-onboarding-root *::before, #serb-onboarding-root *::after {
  box-sizing:border-box;
}

/* ══ 4. RESET WP BLEEDING STYLES INSIDE ROOT ════════════════════════════════ */
#serb-onboarding-root input,
#serb-onboarding-root select,
#serb-onboarding-root textarea,
#serb-onboarding-root button {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  font-size:13px !important;
  border-radius:var(--r) !important;
  box-shadow:none !important;
  outline:none;
}
/* WP gives inputs a blue focus outline — kill it */
#serb-onboarding-root input:focus,
#serb-onboarding-root textarea:focus { box-shadow:none !important; outline:none !important }
/* WP forces p margins */
#serb-onboarding-root p { margin:0 }

/* ══ 5. LEFT PANEL ══════════════════════════════════════════════════════════ */
.serb-onb-left {
  width:256px; flex-shrink:0;
  background:var(--sur); border-right:1px solid var(--bdr);
  display:flex; flex-direction:column; overflow-y:auto;
}
.serb-onb-brand {
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 14px; border-bottom:1px solid var(--bdr-s);
}
.serb-onb-logo {
  width:34px; height:34px; border-radius:8px; background:var(--acc);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; flex-shrink:0;
}
.serb-onb-brand-text strong { display:block; color:var(--acc); font-weight:700; font-size:13px; letter-spacing:-.2px }
.serb-onb-brand-text span   { display:block; color:var(--t3); font-size:11px; margin-top:1px }

.serb-onb-steps { list-style:none; margin:0; padding:10px; flex:1 }
.serb-onb-steps li {
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:8px; transition:background .15s;
}
.serb-onb-steps .num {
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0; line-height:1;
}
.serb-onb-steps .lbl { font-size:12.5px; line-height:1.3 }
.serb-onb-steps li.done   .num { background:var(--acc); color:#fff }
.serb-onb-steps li.done   .lbl { color:var(--t2) }
.serb-onb-steps li.active     { background:var(--acc-l) }
.serb-onb-steps li.active .num { background:var(--acc); color:#fff }
.serb-onb-steps li.active .lbl { color:var(--acc); font-weight:700 }
.serb-onb-steps li.upcoming .num { background:var(--sur); color:var(--t3); border:1px solid var(--bdr) }
.serb-onb-steps li.upcoming .lbl { color:var(--t3) }

.serb-onb-exit { padding:10px 16px 16px; border-top:1px solid var(--bdr-s) }
.serb-onb-exit a { color:var(--t3); text-decoration:none; font-size:12px; transition:color .15s }
.serb-onb-exit a:hover { color:var(--t2) }

/* ══ 6. RIGHT PANEL ═════════════════════════════════════════════════════════ */
.serb-onb-right {
  flex:1; min-width:0; overflow-y:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 24px 48px;
}
.serb-onb-card {
  width:100%; max-width:500px;
  background:var(--sur); border:1px solid var(--bdr); border-radius:var(--rl);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  animation:cardIn .22s ease both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ══ 7. PROGRESS BAR ════════════════════════════════════════════════════════ */
.serb-onb-progress {
  height:3px; background:var(--bdr-s); overflow:hidden;
  border-radius:var(--rl) var(--rl) 0 0;
}
.serb-onb-progress span {
  display:block; height:100%; background:var(--acc);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ══ 8. CARD INNER PADDING ══════════════════════════════════════════════════ */
.inner { padding:24px 24px 0 }

/* ══ 9. STEP TITLE + SUBTITLE ═══════════════════════════════════════════════ */
.serb-onb-title {
  font-size:18px !important; font-weight:700 !important;
  color:var(--t1) !important; margin:0 0 6px !important;
  padding:0 !important; border:none !important; letter-spacing:-.3px;
  line-height:1.3;
}
.serb-onb-sub {
  font-size:13px !important; color:var(--t2) !important;
  margin:0 0 20px !important; line-height:1.55;
}

/* ══ 10. FIELD GROUPS ═══════════════════════════════════════════════════════ */
.field {
  margin-bottom:16px;
}
/* Label above each field */
.field > label,
.fl-lbl {
  display:block !important;
  font-size:11px !important; font-weight:700 !important;
  color:var(--t2) !important;
  margin:0 0 6px !important; padding:0 !important;
  text-transform:uppercase; letter-spacing:.05em;
  line-height:1;
}
/* Hint text below field */
.fl-hint {
  display:block; font-size:11px; color:var(--t3);
  margin:5px 0 0; line-height:1.4;
}
/* 2-col grid */
.field-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* ══ 11. TEXT INPUTS ════════════════════════════════════════════════════════ */
#serb-onboarding-root .input {
  display:block !important;
  width:100% !important;
  padding:9px 12px !important;
  background:#fff !important;
  border:1px solid var(--bdr) !important;
  border-radius:var(--r) !important;
  font-size:13px !important; color:var(--t1) !important;
  line-height:1.4 !important;
  transition:border-color .15s !important;
  box-shadow:none !important;
  height:auto !important;
  margin:0 !important;
}
#serb-onboarding-root .input:focus {
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px rgba(13,115,119,.1) !important;
}
#serb-onboarding-root textarea.input { resize:vertical; min-height:90px }

/* ══ 12. CUSTOM DROPDOWN ════════════════════════════════════════════════════ */
.serb-dd { position:relative; user-select:none }
.serb-dd__btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border:1px solid var(--bdr); border-radius:var(--r);
  padding:9px 12px; cursor:pointer;
  font-size:13px; color:var(--t1);
  transition:border-color .15s;
}
.serb-dd__btn:hover { border-color:var(--acc) }
.serb-dd.open .serb-dd__btn { border-color:var(--acc); border-radius:var(--r) var(--r) 0 0 }
.serb-dd__chev {
  font-size:11px; color:var(--t3); flex-shrink:0; display:inline-block;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.serb-dd.open .serb-dd__chev { transform:rotate(180deg) }
.serb-dd__list {
  position:absolute; left:0; right:0; top:100%; z-index:500;
  background:#fff; border:1px solid var(--acc); border-top:none;
  border-radius:0 0 var(--r) var(--r);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.serb-dd.open .serb-dd__list { max-height:220px; opacity:1; overflow-y:auto }
.serb-dd__opt {
  padding:9px 12px; font-size:13px; color:var(--t2);
  cursor:pointer; transition:background .1s, color .1s;
  border-top:1px solid var(--bdr-s);
}
.serb-dd__opt:first-child { border-top:none }
.serb-dd__opt:hover  { background:var(--acc-l); color:var(--acc-h) }
.serb-dd__opt.active { background:var(--acc-l); color:var(--acc-h); font-weight:600 }

/* ══ 13. MODE CARDS ═════════════════════════════════════════════════════════ */
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:4px }
.mode-card {
  border:1px solid var(--bdr); border-radius:var(--rl); padding:16px 12px;
  cursor:pointer; background:var(--sur); transition:border-color .15s, background .15s;
  text-align:center;
}
.mode-card:hover { border-color:var(--acc) }
.mode-card.selected { border:2px solid var(--acc); background:var(--acc-l) }
.mode-card .ic {
  width:34px; height:34px; border-radius:9px; background:var(--acc-l);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.mode-card .ic .dashicons { color:var(--acc); font-size:18px !important; width:18px !important; height:18px !important }
.mode-card strong { display:block; color:var(--t1); font-weight:700; font-size:13px; margin-bottom:4px }
.mode-card span   { display:block; color:var(--t2); font-size:12px; line-height:1.4 }

/* ══ 13.1. MODE ADDON CHECKBOX ═══════════════════════════════════════════════ */
.mode-addon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bdr-s);
}
.mode-addon input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--acc);
}
.mode-addon span {
  font-size: 11px;
  color: var(--t2);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.mode-addon span:hover { color: var(--acc) }

/* ══ 14. WORKING HOURS TABLE ════════════════════════════════════════════════ */
.hours {
  border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden;
  margin-top:4px;
}
.hours-hdr {
  display:grid; grid-template-columns:100px 1fr 1fr 50px; gap:10px; align-items:center;
  padding:8px 14px; background:var(--bg); border-bottom:1px solid var(--bdr);
  font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.06em;
}
.hours-row {
  display:grid; grid-template-columns:100px 1fr 1fr 50px; gap:10px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--bdr-s); background:var(--sur);
  transition:background .15s;
}
.hours-row:last-child { border-bottom:none }
.hours-row.off { background:var(--bg) }
.hday     { font-size:13px; font-weight:600; color:var(--t1) }
.hday.off { color:var(--t3) }
.hclosed  { font-size:12px; color:var(--t3); grid-column:2/4; text-align:center }

/* Toggle button for hours */
.htog {
  width:36px; height:20px; border-radius:10px; background:var(--bdr);
  position:relative; cursor:pointer; border:none; padding:0;
  transition:background .2s; flex-shrink:0; justify-self:center;
  display:block;
}
.htog.on { background:var(--acc) }
.htog::after {
  content:''; width:16px; height:16px; background:#fff; border-radius:50%;
  position:absolute; top:2px; left:2px;
  transition:left .18s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.htog.on::after { left:18px }
.serb-dd.hh-open, .serb-dd.hh-close { flex:1; min-width:0 }

/* ══ 15. PAYMENT OPTIONS ════════════════════════════════════════════════════ */
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px }
.pay-opt {
  border:1px solid var(--bdr); border-radius:var(--r); padding:14px;
  cursor:pointer; background:var(--sur); transition:border-color .15s, background .15s;
}
.pay-opt:hover { border-color:var(--acc) }
.pay-opt.sel   { border:2px solid var(--acc); background:var(--acc-l) }
.pay-opt strong { display:block; font-size:13px; font-weight:700; color:var(--t1); margin-bottom:3px }
.pay-opt span   { display:block; font-size:12px; color:var(--t2) }
/* Stripe fields slide */
.stripe-fields {
  overflow:hidden; transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.stripe-fields.hide { max-height:0 !important; opacity:0; pointer-events:none }

/* ══ 16. GCAL STEPS ═════════════════════════════════════════════════════════ */
.gcal-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:20px }
.gcal-step  { display:flex; gap:10px; align-items:flex-start }
.gcal-n {
  width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.gcal-step-text strong { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:3px }
.gcal-step-text span   { display:block; font-size:12px; color:var(--t2); line-height:1.5 }

/* ══ 17. NUDGE BANNER ═══════════════════════════════════════════════════════ */
.serb-nudge {
  background:var(--acc-l); border:1px solid #b2d8da; border-radius:var(--r);
  padding:11px 14px; display:flex; align-items:flex-start; gap:10px;
  margin-top:16px; margin-bottom:4px;
  animation:nudgeIn .3s .05s ease both;
}
@keyframes nudgeIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
.serb-nudge-ic { color:var(--acc); font-size:15px; flex-shrink:0; margin-top:1px }
.serb-nudge .title { font-size:12px; font-weight:700; color:var(--acc-h); margin-bottom:2px }
.serb-nudge .desc  { font-size:12px; color:var(--acc); line-height:1.45 }
.serb-nudge .desc a { color:var(--acc-h); font-weight:700; text-decoration:underline; cursor:pointer }

/* ══ 18. ADVANCED TOGGLE ROW ════════════════════════════════════════════════ */
.adv-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px solid var(--bdr); border-radius:var(--r);
  background:var(--sur);
}
.adv-row-text strong { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:3px }
.adv-row-text span   { display:block; font-size:12px; color:var(--t3); line-height:1.4 }

/* ══ 19. DONE STEP ══════════════════════════════════════════════════════════ */
.serb-done { text-align:center; padding:8px 0 20px }
.serb-done-icon {
  width:52px; height:52px; border-radius:50%; background:var(--ok-l);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn { from { opacity:0; transform:scale(.5) } to { opacity:1; transform:scale(1) } }
.serb-done-icon .dashicons { color:var(--ok); font-size:24px !important; width:24px !important; height:24px !important }
.serb-shortcode {
  background:var(--bg); color:var(--acc-h);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:10px 16px; border-radius:var(--r); border:1px solid var(--bdr);
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.03em;
  margin-bottom:20px;
}
.pro-card { border:1px solid var(--bdr); border-radius:var(--rl); overflow:hidden; text-align:left }
.pro-card-hd { background:var(--acc); padding:14px 18px; display:flex; align-items:center; gap:10px }
.pro-card-hd .dashicons { color:rgba(255,255,255,.8); font-size:18px !important; width:18px !important; height:18px !important }
.pro-card-hd-title { font-size:14px; font-weight:700; color:#fff }
.pro-card-hd-sub   { font-size:11px; color:rgba(255,255,255,.6); margin-top:2px }
.pro-feats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px 18px; background:var(--sur) }
.pro-feat  { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--t2) }
.pro-feat .dashicons { color:var(--ok); font-size:14px !important; width:14px !important; height:14px !important }
.pro-foot  { padding:12px 18px; border-top:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; background:var(--bg) }

/* ══ 20. BUTTONS ════════════════════════════════════════════════════════════ */
#serb-onboarding-root .btn {
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--bdr); background:var(--sur); color:var(--t1);
  border-radius:var(--r); padding:9px 18px;
  font-size:13px !important; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
  font-family:inherit !important; letter-spacing:-.1px;
  text-decoration:none; line-height:1.4;
}
#serb-onboarding-root .btn:hover { border-color:var(--acc); color:var(--acc) }
#serb-onboarding-root .btn--pri  { background:var(--acc); color:#fff !important; border-color:var(--acc) }
#serb-onboarding-root .btn--pri:hover { background:var(--acc-h); border-color:var(--acc-h) }
#serb-onboarding-root .btn--text { background:transparent; border:none; color:var(--t3); font-size:12px !important; padding:4px 0 }
#serb-onboarding-root .btn--text:hover { color:var(--t2); border:none }
#serb-onboarding-root .btn[disabled] { opacity:.4; cursor:not-allowed }
#serb-onboarding-root .btn--upgrade  { background:var(--acc); color:#fff !important; border-color:var(--acc) }
#serb-onboarding-root .btn--upgrade:hover { background:var(--acc-h) }

/* ══ 21. FOOTER ═════════════════════════════════════════════════════════════ */
.serb-onb-footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 24px 20px; border-top:1px solid var(--bdr-s);
  background:var(--sur); border-radius:0 0 var(--rl) var(--rl);
}

/* ══ 22. UTILS ══════════════════════════════════════════════════════════════ */
.serb-divider { height:1px; background:var(--bdr); margin:16px 0 }

/* ══ 23. TOAST ══════════════════════════════════════════════════════════════ */
.serb-toast {
  position:fixed; top:20px; left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff; border:1px solid var(--bdr); color:var(--t1);
  padding:9px 18px; border-radius:var(--r);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  font-size:13px; z-index:1000001; opacity:0;
  transition:opacity .2s ease, transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.serb-toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* ══ 24. RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:800px) {
  #serb-onboarding-root { flex-direction:column }
  .serb-onb-left {
    width:100%; height:auto; border-right:none; border-bottom:1px solid var(--bdr);
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
  }
  .serb-onb-brand { display:none }
  .serb-onb-steps { display:flex; flex-direction:row; gap:4px; padding:8px 10px; flex:1; overflow-x:auto }
  .serb-onb-steps li { flex-shrink:0; padding:5px 10px; border-radius:20px; white-space:nowrap }
  .serb-onb-steps li.upcoming { display:none }
  .serb-onb-exit  { padding:8px 12px; border-top:none; display:flex; align-items:center; white-space:nowrap }
  .serb-onb-right { padding:16px 12px 32px }
  .mode-grid        { grid-template-columns:1fr }
  .pay-grid         { grid-template-columns:1fr }
  .field-row-2      { grid-template-columns:1fr }
  .hours-hdr        { display:none }
  .hours-row        { grid-template-columns:80px 1fr 1fr 44px; padding:8px 10px; gap:8px }
  .pro-feats        { grid-template-columns:1fr }
}
@media (max-width:480px) {
  .serb-onb-right { padding:12px 8px 24px }
  .serb-onb-card  { border-radius:var(--r) }
  .inner          { padding:18px 16px 0 }
  .serb-onb-footer { padding:12px 16px 16px }
}

/* ══ 25. RELAUNCH — existing data banner & limit notice ═════════════════════ */
.serb-relaunch-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #E6F4F5;
  border: 1.5px solid var(--acc, #0D7377);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.serb-relaunch-banner__ic {
  color: var(--acc, #0D7377);
  font-size: 22px;
  flex-shrink: 0;
}
.serb-relaunch-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.serb-relaunch-banner__body strong {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
}
.serb-relaunch-banner__body span {
  font-size: 12px;
  color: #475569;
}
.serb-relaunch-banner__skip {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}

.serb-limit-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFF7ED;
  border: 1.5px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.serb-limit-notice .dashicons {
  color: #D97706;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.serb-limit-notice > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.serb-limit-notice strong {
  font-size: 13px;
  font-weight: 700;
  color: #92400E;
}
.serb-limit-notice span {
  font-size: 12px;
  color: #78350F;
}

/* ══ 26. EXIT SETUP BUTTON (POST form, styled like a link) ══════════════════ */
.serb-onb-exit-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  opacity: .7;
  text-decoration: none;
}
.serb-onb-exit-btn:hover { opacity: 1; text-decoration: underline; }

/* ══ 27. STEP LOADING OVERLAY ═══════════════════════════════════════════════ */
#serb-step-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.serb-step-loading--visible {
  opacity: 1 !important;
  pointer-events: all !important;
}
.serb-step-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E4E7EC;
  border-top-color: #0D7377;
  border-radius: 50%;
  animation: serbSpin .6s linear infinite;
}
@keyframes serbSpin { to { transform: rotate(360deg); } }

/* ══ 28. NATIVE SELECT (timezone — replaces 400-item custom dropdown) ═══════ */
.serb-native-select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--bdr, #E4E7EC);
  border-radius: var(--r, 8px);
  font-size: 13px;
  color: var(--t1, #0F172A);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.serb-native-select:focus {
  outline: none;
  border-color: var(--acc, #0D7377);
  box-shadow: 0 0 0 3px rgba(13,115,119,.12);
}

/* ══ 29. TIMEZONE PICKER — searchable custom dropdown ═══════════════════════ */
.serb-tz-picker { position: relative; }

.serb-tz-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--bdr, #E4E7EC);
  border-radius: var(--r, 8px);
  cursor: pointer;
  font-size: 13px;
  color: var(--t1, #0F172A);
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
}
.serb-tz-picker.open .serb-tz-btn,
.serb-tz-btn:focus {
  outline: none;
  border-color: var(--acc, #0D7377);
  box-shadow: 0 0 0 3px rgba(13,115,119,.12);
}
.serb-tz-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serb-tz-chev {
  font-size: 11px;
  color: var(--t3, #94A3B8);
  margin-left: 8px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.serb-tz-picker.open .serb-tz-chev { transform: rotate(180deg); }

.serb-tz-drop {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--acc, #0D7377);
  border-radius: var(--r, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
  overflow: hidden;
}
.serb-tz-drop.open { display: block; }

.serb-tz-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--bdr, #E4E7EC);
}
.serb-tz-search {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--bdr, #E4E7EC);
  border-radius: 6px;
  font-size: 13px;
  color: var(--t1, #0F172A);
  font-family: inherit;
  box-sizing: border-box;
  background: var(--bg, #F6F7F9);
  transition: border-color .15s;
}
.serb-tz-search:focus {
  outline: none;
  border-color: var(--acc, #0D7377);
  background: #fff;
}
.serb-tz-search::placeholder { color: var(--t3, #94A3B8); }

.serb-tz-list {
  max-height: 224px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.serb-tz-opt {
  padding: 0 14px;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--t1, #0F172A);
  cursor: pointer;
  transition: background .1s;
  outline: none;
}
.serb-tz-opt:hover,
.serb-tz-opt:focus { background: var(--acc-l, #E6F4F5); }
.serb-tz-opt.sel {
  background: var(--acc-l, #E6F4F5);
  color: var(--acc, #0D7377);
  font-weight: 600;
}
.serb-tz-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--t3, #94A3B8);
  text-align: center;
}
.serb-tz-list::-webkit-scrollbar { width: 4px; }
.serb-tz-list::-webkit-scrollbar-thumb { background: var(--bdr,#E4E7EC); border-radius: 4px; }

/* ══ 30. MODE GRID — 2×2 for 4 cards ═══════════════════════════════════════ */
.mode-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

/* ══ 31. SLOT MODE CARDS ════════════════════════════════════════════════════ */
.slot-mode-grid { display:grid !important; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px }
.slot-mode-card {
  border:1px solid var(--bdr) !important; border-radius:var(--rl) !important; padding:14px !important;
  cursor:pointer; background:var(--sur) !important; transition:border-color .15s, background .15s;
  display:flex !important; align-items:flex-start; gap:12px;
}
.slot-mode-card:hover { border-color:var(--acc) }
.slot-mode-card.selected { border:2px solid var(--acc); background:var(--acc-l) }
.slot-mode-card .smc-ic {
  width:32px; height:32px; border-radius:8px; background:var(--acc-l);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.slot-mode-card.selected .smc-ic { background:rgba(13,115,119,.18) }
.slot-mode-card .smc-ic .dashicons { color:var(--acc); font-size:16px !important; width:16px !important; height:16px !important }
.slot-mode-card .smc-body { min-width:0 }
.slot-mode-card strong { display:block; color:var(--t1); font-weight:700; font-size:13px; margin-bottom:3px }
.slot-mode-card span   { display:block; color:var(--t2); font-size:11px; line-height:1.4 }

/* ══ 32. DOCS STEP (STEP 0) ════════════════════════════════════════════════ */
.serb-onboarding-root--docs { display:block !important; }
.serb-onboarding-root--docs .serb-onb-right {
  width:100%; max-width:620px; margin:60px auto; padding:0 16px;
}
.serb-onboarding-root--docs .serb-onb-card {
  padding:32px;
}