:root {
  --ink: #0e1b2a;
  --muted: #5d6b7c;
  --line: #dfe6ee;
  --soft: #f4f8f7;
  --brand: #007964;
  --brand-dark: #003f42;
  --brand-mid: #09947d;
  --gold: #f5a623;
  --blue: #246bca;
  --danger: #d92d20;
  --success: #10935d;
  --white: #fff;
  --shadow: 0 22px 60px rgba(13, 35, 48, 0.18);
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 121, 100, 0.12), transparent 28rem),
    linear-gradient(135deg, #f8fbfb 0%, #edf3f1 54%, #f8fafc 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.shell {
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(280px, 470px);
  gap: 48px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 34px;
}

.phone {
  width: min(100%, 390px);
  height: min(844px, calc(100vh - 40px));
  min-height: 680px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(29, 47, 62, 0.12);
  border-radius: 34px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding: 10px 22px 0;
  font-size: 12px;
  font-weight: 800;
  position: relative;
  z-index: 4;
}

.status-icons {
  letter-spacing: 1px;
}

.screen {
  height: calc(100% - 34px);
  overflow: hidden;
}

.view {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.scroll {
  overflow-y: auto;
  padding: 14px 22px 100px;
}

.centered {
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}

.splash {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 63, 66, 0.98), rgba(0, 121, 100, 0.92)),
    linear-gradient(140deg, #00464a, #078970);
}

.logo-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  color: currentColor;
}

.brand-name {
  margin: 0;
  font-size: 42px;
  line-height: 0.95;
  letter-spacing: 2px;
  font-weight: 900;
}

.brand-name span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 8px;
  font-weight: 700;
}

.tagline {
  margin: 28px 0 0;
  font-size: 18px;
  font-weight: 800;
}

.header {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  min-height: 52px;
  padding: 4px 16px 0;
}

.header h2 {
  margin: 0;
  text-align: center;
  font-size: 15px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}

.top-hero {
  padding: 8px 22px 18px;
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
  color: white;
  border-radius: 0 0 22px 22px;
}

.top-hero .header {
  padding: 0;
  color: white;
}

.top-hero h2 {
  margin: 16px 0 4px;
  font-size: 20px;
}

.top-hero p,
.subtle {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.top-hero p {
  color: rgba(255, 255, 255, 0.82);
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 24px;
  color: var(--muted);
  background: white;
  font-size: 13px;
}

.title {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.08;
  font-weight: 900;
}

.accent {
  color: var(--brand);
}

.house-art {
  width: 100%;
  height: 172px;
  margin: 22px 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(9, 148, 125, 0.12), transparent 70%),
    #ecf7f5;
  position: relative;
  overflow: hidden;
}

.house-art::before {
  content: "";
  position: absolute;
  left: 52px;
  bottom: 26px;
  width: 160px;
  height: 100px;
  background:
    linear-gradient(135deg, transparent 24px, #0f3542 25px 76px, transparent 77px)
      5px 0 / 96px 54px no-repeat,
    linear-gradient(#fff, #fff) 38px 46px / 118px 64px no-repeat,
    linear-gradient(#74c7bd, #74c7bd) 64px 66px / 18px 34px no-repeat,
    linear-gradient(#17475b, #17475b) 106px 64px / 34px 8px no-repeat,
    linear-gradient(#17475b, #17475b) 106px 82px / 34px 8px no-repeat;
}

.house-art::after {
  content: "";
  position: absolute;
  right: 46px;
  bottom: 26px;
  width: 42px;
  height: 88px;
  border-radius: 20px 20px 6px 6px;
  background: #1f8d99;
  box-shadow: 0 34px 0 -13px #f4a340;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8e1e8;
}

.dot.active {
  background: var(--brand);
}

.btn {
  border: 0;
  border-radius: 10px;
  min-height: 50px;
  padding: 0 18px;
  color: white;
  background: var(--brand);
  font-weight: 800;
}

.btn.secondary {
  color: var(--brand);
  background: #e7f5f2;
}

.btn.ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}

.btn.danger {
  background: var(--danger);
}

.stack {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field span,
.label {
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--ink);
  background: white;
}

.field textarea {
  min-height: 92px;
  resize: none;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.role-grid,
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.choice,
.service-row,
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.choice {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 82px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 800;
}

.choice.active {
  border-color: var(--brand);
  background: #e9f7f4;
  color: var(--brand);
}

.choice svg,
.service-icon {
  width: 28px;
  height: 28px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 12px;
  font-size: 14px;
  font-weight: 900;
}

.link-btn {
  border: 0;
  padding: 0;
  color: var(--brand);
  background: none;
  font-size: 12px;
  font-weight: 900;
}

.category-grid .choice {
  border: 0;
  min-height: 72px;
}

.service-list {
  display: grid;
  gap: 8px;
}

.service-row {
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 11px 12px;
}

.service-row h3,
.card h3 {
  margin: 0 0 3px;
  font-size: 14px;
}

.service-row p,
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.card {
  padding: 14px;
}

.booking-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
}

.avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #0d7667, #233e54);
  font-weight: 900;
}

.avatar.large {
  width: 64px;
  height: 64px;
  font-size: 18px;
}

.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px dashed #b8c8d5;
  border-radius: 8px;
  background: #f7faf9;
}

.avatar-uploader .btn {
  min-height: 40px;
}

.pill {
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--success);
  background: #e8f7ed;
  font-size: 11px;
  font-weight: 900;
}

.pill.success {
  color: var(--success);
  background: #e8f7ed;
}

.pill.warning {
  color: #9c6700;
  background: #fff3d6;
}

.pill.danger {
  color: var(--danger);
  background: #ffe8e5;
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.tabbar button {
  display: grid;
  place-items: center;
  gap: 3px;
  border: 0;
  color: #687789;
  background: none;
  font-size: 11px;
  font-weight: 700;
}

.tabbar .active {
  color: var(--brand);
}

.footer-action {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), white 16%);
  padding-top: 24px;
}

.summary {
  display: grid;
  gap: 12px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.summary-row strong:last-child,
.price {
  color: var(--brand);
  font-weight: 900;
}

.note {
  border-radius: 8px;
  padding: 12px;
  color: #26504e;
  background: #eaf7f5;
  font-size: 12px;
  line-height: 1.45;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 22px -22px -10px;
  padding: 12px 16px 18px;
  background: #dfe3e7;
}

.keypad button {
  height: 45px;
  border: 0;
  border-radius: 8px;
  background: white;
  font-size: 22px;
  font-weight: 800;
}

.otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 22px 0;
}

.otp span {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-weight: 800;
}

.processing {
  color: white;
  background: var(--brand-dark);
}

.processing .subtle {
  color: rgba(255, 255, 255, 0.78);
}

.phone-card {
  width: 88px;
  height: 138px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  margin: 0 auto 40px;
}

.spinner-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 32px;
}

.spinner-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-mid);
}

.check {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: white;
  background: #1aa85f;
  font-size: 42px;
  font-weight: 900;
}

.map {
  min-height: 260px;
  border-radius: 12px;
  background:
    linear-gradient(34deg, transparent 42%, rgba(36, 107, 202, 0.16) 43% 47%, transparent 48%),
    linear-gradient(132deg, transparent 32%, rgba(0, 121, 100, 0.18) 33% 38%, transparent 39%),
    repeating-linear-gradient(90deg, #edf2f5 0 30px, #f8fafb 31px 64px);
  position: relative;
  overflow: hidden;
}

.map-pin {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--brand);
  box-shadow: 0 8px 20px rgba(0, 79, 74, 0.22);
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: white;
}

.route {
  position: absolute;
  left: 124px;
  top: 36px;
  width: 96px;
  height: 170px;
  border-left: 6px solid var(--brand);
  border-bottom: 6px solid var(--brand);
  border-radius: 0 0 0 28px;
  transform: rotate(17deg);
}

.vendor-banner {
  border-radius: 12px;
  padding: 14px;
  color: white;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.steps {
  display: grid;
  gap: 10px;
}

.step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background: var(--brand);
  font-weight: 900;
}

.progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ecef;
}

.progress span {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: var(--brand);
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background: white;
}

.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.checklist span {
  border-radius: 999px;
  padding: 6px 8px;
  color: #435367;
  background: #f0f4f7;
  font-size: 11px;
  font-weight: 800;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric {
  display: grid;
  gap: 2px;
  min-height: 72px;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.metric.wide {
  grid-column: span 2;
}

.metric strong {
  color: var(--brand);
  font-size: 20px;
}

.metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 14px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
}

.segmented button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  font-weight: 900;
}

.segmented button.active {
  color: var(--brand);
  background: white;
}

.side-panel {
  display: grid;
  gap: 26px;
  max-width: 470px;
}

.side-panel h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 0.98;
}

.side-panel p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.flow-map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.flow-map button {
  min-height: 46px;
  border: 1px solid rgba(0, 121, 100, 0.18);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  padding: 10px;
}

.flow-map button.active {
  color: white;
  background: var(--brand);
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .phone {
    margin: 0 auto;
    height: calc(100vh - 28px);
  }

  .side-panel {
    display: none;
  }
}




/* Desktop SaaS Simulation Mode for WordPress Embed */
body {
  min-height: 100vh;
  overflow-x: hidden;
}

.desktop-shell,
.shell {
  width: 100%;
  max-width: 1440px;
  min-height: 1120px;
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) minmax(300px, 380px);
  gap: 28px;
  align-items: stretch;
}

.phone.desktop-app,
.phone {
  width: 100%;
  max-width: none;
  height: 1040px;
  min-height: 1040px;
  border-radius: 32px;
  border: 1px solid rgba(29, 47, 62, 0.10);
  background: #fff;
  box-shadow: 0 28px 80px rgba(13, 35, 48, 0.12);
}

.statusbar {
  height: 42px;
  padding: 14px 26px 0;
  border-bottom: 1px solid rgba(223,230,238,.75);
  background: rgba(255,255,255,.92);
}

.statusbar span:first-child::after {
  content: "  ·  Desktop Preview";
  color: var(--muted);
  font-weight: 700;
}

.screen {
  height: calc(100% - 42px);
}

.view {
  border-radius: 0 0 32px 32px;
}

.scroll {
  padding: 28px 34px 120px;
}

.top-hero {
  padding: 18px 34px 26px;
  border-radius: 0 0 34px 34px;
}

.header {
  padding: 10px 24px 0;
}

.title {
  font-size: 38px;
  max-width: 740px;
}

.subtle {
  font-size: 15px;
}

.category-grid,
.role-grid {
  grid-template-columns: repeat(4, 1fr);
}

.service-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 14px;
}

.service-row {
  min-height: 86px;
  border-radius: 18px;
  padding: 18px;
}

.card {
  border-radius: 18px;
  padding: 22px;
}

.booking-card {
  grid-template-columns: 56px 1fr auto;
}

.field input,
.field select,
.field textarea {
  min-height: 54px;
  border-radius: 16px;
  font-size: 15px;
}

.field textarea {
  min-height: 140px;
}

.btn {
  border-radius: 16px;
  min-height: 56px;
  font-size: 15px;
}

.choice {
  border-radius: 18px;
  min-height: 104px;
}

.tabbar {
  max-width: 700px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(223,230,238,.9);
  border-bottom: 0;
}

.side-panel {
  width: 100%;
  min-height: 1040px;
  border-radius: 32px;
  padding: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(29,47,62,.10);
  box-shadow: 0 28px 80px rgba(13,35,48,.08);
}

.flow-map {
  max-height: 760px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-right: 4px;
}

.flow-map button {
  min-height: 42px;
  border-radius: 14px;
  text-align: left;
  padding: 10px 12px;
}

.otp {
  max-width: 460px;
  margin: 24px auto;
}

.keypad {
  max-width: 500px;
  margin: 0 auto;
}

.summary,
.card.summary {
  max-width: none;
}

.split {
  gap: 16px;
}

@media (max-width: 1180px) {
  .desktop-shell,
  .shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .side-panel {
    min-height: auto;
  }

  .flow-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 420px;
  }
}

@media (max-width: 760px) {
  .desktop-shell,
  .shell {
    padding: 14px;
  }

  .phone.desktop-app,
  .phone {
    height: 980px;
    min-height: 980px;
    border-radius: 24px;
  }

  .side-panel {
    border-radius: 24px;
    padding: 20px;
  }

  .category-grid,
  .role-grid,
  .service-list {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 30px;
  }

  .scroll {
    padding: 20px 20px 110px;
  }

  .flow-map {
    grid-template-columns: 1fr;
  }
}


/* Customer | Vendor | Admin Tabs + Walkthrough + API Hooks */
.demo-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:18px 0;
  padding:6px;
  border-radius:18px;
  background:#edf6f3;
}
.demo-tabs button{
  border:0;
  min-height:42px;
  border-radius:14px;
  background:transparent;
  color:var(--brand-dark);
  font-weight:900;
}
.demo-tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  box-shadow:0 10px 26px rgba(0,63,66,.18);
}
.flow-section-title{
  margin:18px 0 10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.flow-buttons{
  display:grid;
  gap:8px;
}
.walkthrough-panel{
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg,#003f42,#007964);
  color:#fff;
  box-shadow:0 16px 40px rgba(0,63,66,.20);
}
.walkthrough-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.9;
}
.walkthrough-top button{
  border:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:18px;
  line-height:1;
}
.walkthrough-panel h3{
  margin:14px 0 6px;
  font-size:18px;
}
.walkthrough-panel p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.5;
}
.walkthrough-progress{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin-top:14px;
  overflow:hidden;
}
.walkthrough-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#fff;
}
.walkthrough-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
}
.walkthrough-controls button,
.walkthrough-reopen{
  border:0;
  border-radius:999px;
  min-height:38px;
  padding:0 14px;
  font-weight:900;
}
.walkthrough-controls button{
  color:var(--brand-dark);
  background:#fff;
}
.walkthrough-controls button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.walkthrough-controls strong{
  color:#fff;
  font-size:12px;
}
.walkthrough-reopen{
  width:100%;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  margin:14px 0;
}
.api-panel{
  margin-top:18px;
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(13,35,48,.08);
}
.api-panel-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}
.api-panel-title span{
  font-weight:900;
  color:var(--brand-dark);
}
.api-panel-title small{
  color:var(--muted);
  text-align:right;
}
.api-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.api-actions button{
  border:0;
  min-height:38px;
  border-radius:12px;
  background:#e9f7f4;
  color:var(--brand-dark);
  font-weight:900;
  font-size:12px;
}
.api-actions button:hover{
  color:#fff;
  background:var(--brand);
}
.api-log{
  margin-top:12px;
  max-height:180px;
  overflow:auto;
  padding:10px;
  border-radius:14px;
  background:#0e1b2a;
}
.api-log p{
  margin:0 0 8px;
  color:#c7f6ec;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:11px;
  line-height:1.45;
}
.api-log p:last-child{
  margin-bottom:0;
}
@media(max-width:1180px){
  .flow-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .api-actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .demo-tabs,
  .flow-buttons,
  .api-actions{
    grid-template-columns:1fr;
  }
}


/* WordPress full-page no-scroll desktop demo layout */
html,
body{
  width:100%;
  min-height:1780px;
  height:auto;
  overflow:hidden !important;
}
body{
  display:block;
}
.desktop-shell,
.shell{
  width:100%;
  max-width:1600px;
  min-height:1720px !important;
  height:1720px !important;
  margin:0 auto;
  padding:32px;
  display:grid;
  grid-template-columns:minmax(820px,1fr) minmax(360px,430px);
  gap:30px;
  align-items:stretch;
  overflow:hidden !important;
}
.phone.desktop-app,
.phone{
  width:100%;
  max-width:none;
  height:1660px !important;
  min-height:1660px !important;
  overflow:hidden !important;
}
.screen{
  height:calc(100% - 42px) !important;
  overflow:hidden !important;
}
.view{
  height:100%;
  overflow:hidden !important;
}
.scroll{
  overflow:visible !important;
  height:auto !important;
  padding:28px 34px 140px;
}
.side-panel{
  min-height:1660px !important;
  height:1660px !important;
  overflow:hidden !important;
}
.flow-map{
  max-height:none !important;
  overflow:visible !important;
}
.flow-buttons{
  max-height:none !important;
  overflow:visible !important;
}
.api-log{
  max-height:none !important;
  overflow:visible !important;
}
@media(max-width:1180px){
  html,body{
    min-height:2300px;
  }
  .desktop-shell,
  .shell{
    grid-template-columns:1fr;
    min-height:2240px !important;
    height:2240px !important;
  }
  .phone.desktop-app,
  .phone{
    height:1220px !important;
    min-height:1220px !important;
  }
  .side-panel{
    min-height:900px !important;
    height:900px !important;
  }
  .flow-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  html,body{
    min-height:2600px;
  }
  .desktop-shell,
  .shell{
    padding:14px;
    min-height:2540px !important;
    height:2540px !important;
  }
  .phone.desktop-app,
  .phone{
    height:1380px !important;
    min-height:1380px !important;
  }
  .side-panel{
    min-height:1040px !important;
    height:1040px !important;
  }
  .flow-buttons,
  .api-actions,
  .demo-tabs{
    grid-template-columns:1fr;
  }
}


/* MULO app demo phone/tablet responsive patch */
@media (max-width: 1180px) {
  .shell,
  .desktop-shell {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    gap: 18px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .side-panel {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
@media (max-width: 767.98px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .shell,
  .desktop-shell {
    padding: 10px !important;
    gap: 14px !important;
  }
  .phone,
  .phone.desktop-app {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  .screen,
  .view {
    height: auto !important;
    min-height: 760px !important;
    overflow: visible !important;
  }
  .scroll {
    height: auto !important;
    overflow: visible !important;
    padding: 18px 16px 96px !important;
  }
  .top-hero,
  .header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .title {
    font-size: clamp(1.7rem, 9vw, 2.35rem) !important;
    line-height: 1.05 !important;
  }
  .category-grid,
  .role-grid,
  .service-list,
  .demo-tabs,
  .api-actions,
  .flow-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .booking-card {
    grid-template-columns: 44px 1fr !important;
  }
  .booking-card > *:last-child {
    grid-column: 1 / -1 !important;
  }
  .tabbar {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* MULO App Preview Stability + Edge/IE Responsive Fix */
html,body{width:100%!important;min-height:100%!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;-ms-overflow-style:auto;}
body{display:block!important;padding:0!important;}
.mulo-demo-loader{position:fixed;z-index:9999;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#003f42,#007964 60%,#f4f8f7);color:#fff;transition:opacity .35s ease,visibility .35s ease;}
.mulo-demo-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.mulo-loader-card{width:min(90vw,360px);padding:28px;border-radius:24px;background:rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.22);text-align:center;}
.mulo-loader-logo{font-size:34px;line-height:1;font-weight:950;letter-spacing:.08em;margin-bottom:18px;}
.mulo-loader-bar{height:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.24);}
.mulo-loader-bar span{display:block;width:45%;height:100%;border-radius:inherit;background:#fff;animation:muloLoad 1.1s infinite ease-in-out;}
.mulo-loader-card p{margin:14px 0 0;color:rgba(255,255,255,.9);font-weight:800;font-size:14px;}
@keyframes muloLoad{0%{transform:translateX(-110%);}100%{transform:translateX(240%);}}
.shell.desktop-shell,.desktop-shell,.shell{box-sizing:border-box!important;width:100%!important;max-width:1500px!important;min-height:100vh!important;height:auto!important;margin:0 auto!important;padding:clamp(14px,3vw,34px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(290px,420px)!important;gap:clamp(18px,3vw,34px)!important;align-items:start!important;overflow:visible!important;}
.phone.desktop-app,.phone{box-sizing:border-box!important;width:100%!important;max-width:980px!important;height:clamp(780px,92vh,980px)!important;min-height:720px!important;max-height:none!important;overflow:hidden!important;margin:0 auto!important;}
.screen{height:calc(100% - 42px)!important;overflow:hidden!important;}
.view{height:100%!important;overflow:hidden!important;}
.scroll{height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;padding-bottom:118px!important;}
.side-panel{position:sticky;top:18px;box-sizing:border-box!important;width:100%!important;max-width:420px!important;min-height:0!important;height:auto!important;overflow:visible!important;}
.flow-map{max-height:calc(100vh - 270px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:4px;}
.flow-buttons,.api-actions{display:grid!important;}
@media(max-width:1180px){.shell.desktop-shell,.desktop-shell,.shell{grid-template-columns:1fr!important;min-height:0!important}.side-panel{position:static!important;max-width:100%!important;order:-1!important}.flow-map{max-height:360px!important}.phone.desktop-app,.phone{height:860px!important;min-height:760px!important}}
@media(max-width:760px){.shell.desktop-shell,.desktop-shell,.shell{padding:10px!important;gap:12px!important}.side-panel h1{font-size:clamp(24px,8vw,34px)!important}.side-panel p{font-size:14px!important}.phone.desktop-app,.phone{border-radius:20px!important;height:820px!important;min-height:720px!important}.statusbar{height:36px!important;padding:10px 18px 0!important}.screen{height:calc(100% - 36px)!important}.scroll{padding:16px 16px 104px!important}.flow-map,.flow-buttons,.api-actions,.demo-tabs{grid-template-columns:1fr!important}}
@supports(-ms-ime-align:auto){.shell.desktop-shell,.desktop-shell,.shell{display:-ms-grid!important;-ms-grid-columns:1fr 30px 420px}.phone.desktop-app,.phone{-ms-grid-column:1}.side-panel{-ms-grid-column:3}}


/* Enhanced immersive demo controls */
.mulo-experience-toolbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:12px clamp(12px,2.2vw,28px);background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(14,27,42,.08);
  box-shadow:0 12px 30px rgba(13,35,48,.06);
}
.mulo-experience-brand{display:flex;flex-direction:column;gap:2px;min-width:150px;}
.mulo-experience-brand strong{font-size:15px;font-weight:950;color:var(--brand-dark);letter-spacing:.02em;}
.mulo-experience-brand span{font-size:11px;color:var(--muted);font-weight:750;}
.mulo-device-toggle,.mulo-demo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.mulo-device-toggle button,.mulo-demo-actions button{border:1px solid rgba(0,121,100,.18);background:#fff;color:var(--brand-dark);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:850;box-shadow:0 8px 20px rgba(13,35,48,.06);}
.mulo-device-toggle button.active,.mulo-demo-actions button:hover,.mulo-device-toggle button:hover{background:var(--brand);color:#fff;border-color:var(--brand);}
body.device-tablet .shell.desktop-shell{max-width:980px!important;grid-template-columns:minmax(0,720px)!important;justify-items:center!important;}
body.device-tablet .side-panel{position:static!important;max-width:720px!important;order:-1!important;}
body.device-tablet .phone.desktop-app{max-width:720px!important;height:860px!important;}
body.device-mobile .shell.desktop-shell{max-width:520px!important;grid-template-columns:1fr!important;padding:14px!important;}
body.device-mobile .side-panel{position:static!important;max-width:100%!important;order:-1!important;}
body.device-mobile .phone.desktop-app{max-width:430px!important;height:820px!important;min-height:720px!important;border-radius:28px!important;}
body.device-mobile .flow-map{max-height:260px!important;}
.mulo-demo-toast{position:fixed;right:18px;bottom:18px;z-index:70;max-width:min(340px,calc(100vw - 36px));padding:14px 16px;border-radius:18px;background:var(--brand-dark);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.22);font-weight:800;font-size:13px;opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
.mulo-demo-toast.is-visible{opacity:1;transform:translateY(0);}
@media(max-width:900px){.mulo-experience-toolbar{align-items:flex-start;flex-direction:column}.mulo-device-toggle,.mulo-demo-actions{justify-content:flex-start}.mulo-experience-brand{min-width:0}}
@media(max-width:560px){.mulo-experience-toolbar{padding:10px}.mulo-device-toggle button,.mulo-demo-actions button{padding:8px 10px;font-size:11px}.mulo-demo-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.mulo-demo-actions button{width:100%}.mulo-device-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.mulo-device-toggle button{width:100%}}
@supports(-ms-ime-align:auto){.mulo-experience-toolbar{position:relative;background:#fff}.mulo-device-toggle button,.mulo-demo-actions button{box-shadow:none}}

/* =========================================================
   MULO MVP Vendor Dashboard + Admin Panel UI Polish
   ========================================================= */
.mvp-scroll{padding-bottom:110px}.mvp-hero{padding:18px 22px 22px;color:#fff;background:linear-gradient(135deg,#003f42,#007964 68%,#13a78c);border-bottom-left-radius:28px;border-bottom-right-radius:28px;box-shadow:0 18px 34px rgba(0,63,66,.22)}.mvp-hero.inline{border-radius:24px;margin:0;padding:22px}.mvp-hero .header{padding:0;margin-bottom:10px}.mvp-hero h2{margin:4px 0;font-size:26px;line-height:1.05}.mvp-hero p{margin:0;color:rgba(255,255,255,.86)}.mvp-segmented{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);margin-top:16px}.mvp-segmented button{color:#fff}.mvp-segmented button.active{background:#fff;color:#007964}.mvp-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mvp-kpi-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.mvp-kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 10px 30px rgba(13,35,48,.07)}.mvp-kpi span{display:block;color:var(--muted);font-size:12px;font-weight:800}.mvp-kpi strong{display:block;font-size:23px;line-height:1.05;margin:4px 0;color:var(--ink)}.mvp-kpi small{color:var(--muted);font-weight:700}.mvp-kpi.success strong{color:var(--success)}.mvp-kpi.warning strong{color:#b7791f}.mvp-kpi.danger strong{color:var(--danger)}.mvp-kpi.gold strong{color:#bf7c00}.mvp-alert{border:1px solid rgba(0,121,100,.2);background:linear-gradient(135deg,rgba(0,121,100,.09),rgba(245,166,35,.12));padding:13px 15px;border-radius:16px;color:#0e3a36;font-size:13px}.mvp-job-card,.mvp-queue-item{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 12px 30px rgba(13,35,48,.08);color:var(--ink)}.mvp-job-card{grid-template-columns:auto 1fr auto auto}.mvp-job-card h3,.mvp-queue-item strong{margin:0}.mvp-job-card p,.mvp-queue-item p{margin:3px 0 0;color:var(--muted);font-size:12px}.mvp-job-icon{width:44px;height:44px;border-radius:15px;background:#e9f7f3;display:grid;place-items:center}.mvp-job-icon svg{width:23px;height:23px}.mvp-job-icon.large{width:56px;height:56px}.mvp-job-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mvp-job-tags span{font-size:10px;font-weight:800;color:#007964;background:#e9f7f3;border-radius:999px;padding:4px 8px}.mvp-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 10px 30px rgba(13,35,48,.06)}.mvp-panel h3{margin:0 0 12px}.mvp-progress-row{display:grid;gap:8px;margin:12px 0}.mvp-progress-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}.mvp-progress-row span{color:var(--muted);font-weight:700}.mvp-progress{height:9px;background:#edf3f1;border-radius:999px;overflow:hidden}.mvp-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#007964,#f5a623)}.mvp-job-head{display:flex;gap:14px;align-items:flex-start}.mvp-route-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(13,35,48,.06)}.mvp-route-card .map{border-radius:0;box-shadow:none}.mvp-route-meta{display:flex;justify-content:space-between;padding:12px 14px;font-size:13px}.mvp-route-meta span{color:var(--muted);font-weight:800}.mvp-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mvp-status-grid button,.mvp-admin-tabs button{border:1px solid var(--line);background:#f8fbfb;border-radius:12px;padding:10px 8px;font-weight:900;color:var(--ink)}.mvp-status-grid button.active,.mvp-admin-tabs button.active{background:#007964;color:#fff;border-color:#007964}.mvp-wallet{border-radius:26px;padding:22px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(245,166,35,.7),transparent 35%),linear-gradient(135deg,#003f42,#007964);box-shadow:var(--shadow)}.mvp-wallet h1{font-size:38px;margin:4px 0}.mvp-wallet p{color:rgba(255,255,255,.85)}.mvp-admin-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mvp-queue-item{grid-template-columns:auto 1fr auto}.section-title.compact{margin:0 0 12px}.mvp-review-card{padding:8px}.mvp-review-card .booking-card{box-shadow:none;border:0}.device-tablet .mvp-kpi-grid,.device-mobile .mvp-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:720px){.mvp-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mvp-job-card{grid-template-columns:auto 1fr}.mvp-job-card>strong,.mvp-job-card>.pill{grid-column:2}.mvp-admin-tabs{grid-template-columns:1fr}.mvp-hero h2{font-size:22px}}

/* MULO live theme page fix */
html, body.mulo-standalone-app-page { min-height: 100%; width: 100%; }
body.mulo-standalone-app-page { overflow-x: hidden; background: radial-gradient(circle at 12% 8%, rgba(245,166,35,.16), transparent 24rem), radial-gradient(circle at 88% 18%, rgba(0,121,100,.18), transparent 25rem), linear-gradient(135deg,#f8fbfa 0%,#edf6f3 52%,#ffffff 100%); }
body.mulo-standalone-app-page:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .08; background-image: linear-gradient(135deg, transparent 0 45%, rgba(0,121,100,.45) 45% 46%, transparent 46% 100%), radial-gradient(circle at 30% 20%, rgba(245,166,35,.7) 0 2px, transparent 3px); background-size: 72px 72px, 34px 34px; }
body.mulo-standalone-app-page .mulo-experience-toolbar { position: sticky; top: 0; min-height: 64px; }
body.mulo-standalone-app-page .side-panel { border: 1px solid rgba(0,121,100,.12); background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 30px; padding: clamp(18px,2.6vw,30px); box-shadow: 0 24px 70px rgba(13,35,48,.10); }
body.mulo-standalone-app-page .side-panel h1 { max-width: 12ch; letter-spacing: -.05em; }
body.mulo-standalone-app-page .phone { box-shadow: 0 30px 80px rgba(0,63,66,.18), 0 0 0 10px rgba(255,255,255,.45); }
body.mulo-standalone-app-page .btn, body.mulo-standalone-app-page button { touch-action: manipulation; }
@media (max-width: 1180px) { body.mulo-standalone-app-page .shell.desktop-shell { padding-top: 18px!important; } body.mulo-standalone-app-page .side-panel h1 { max-width: none; } }
@media (max-width: 760px) { body.mulo-standalone-app-page .mulo-experience-toolbar { position: relative; } body.mulo-standalone-app-page .side-panel { border-radius: 22px; padding: 16px; } body.mulo-standalone-app-page .phone.desktop-app, body.mulo-standalone-app-page .phone { width: 100%!important; max-width: 430px!important; margin-inline: auto!important; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .001ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .001ms!important; } }

/* MULO polished responsive app preview */
html,body{max-width:100%;overflow-x:hidden;}
.mulo-experience-toolbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);}
@media (max-width:820px){.mulo-experience-toolbar{gap:10px;align-items:flex-start}.mulo-experience-brand span{font-size:12px}.mulo-demo-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mulo-device-toggle{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}.shell{padding:14px!important}.side-panel{display:none!important}.phone{width:100%!important;max-width:420px;margin:auto;}}
@media (max-width:480px){.mulo-demo-actions{grid-template-columns:1fr}.phone{border-radius:24px!important}.statusbar{font-size:12px}}


.payment-row{grid-template-columns:54px 1fr 22px!important;border-radius:18px;box-shadow:0 10px 24px rgba(14,62,63,.08);}
.payment-logo-app{width:50px;height:38px;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 8px 18px rgba(14,62,63,.08)}

/* Mobile app logo refinement */
.payment-logo-app{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;width:62px!important;height:44px!important;object-fit:contain!important;}
.payment-row img[src*="halopesa"]{width:82px!important;height:38px!important;}
.payment-row img[src*="airtel"]{height:50px!important;}
.payment-row img[src*="mixx"]{border-radius:5px!important;}