/* ============================================================
   MyOcto — phone demos, password gate, tweaks panel
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PHONE FRAME
   ───────────────────────────────────────────────────────────── */
.mo-demos__head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); }

/* customer / provider switch */
.mo-sideswitch {
  display: inline-flex; padding: 4px; gap: 3px; border-radius: var(--r-full);
  background: var(--mo-bg-3); border: 1px solid var(--mo-line); margin: 0 auto;
}
.mo-sideswitch__btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  color: var(--mo-mute); padding: 9px 22px; border-radius: var(--r-full);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.mo-sideswitch__btn svg { width: 16px; height: 16px; }
.mo-sideswitch__btn[aria-pressed="true"] { background: var(--mo-cta-bg); color: var(--mo-cta-fg); }

.mo-phone-stage { display: flex; justify-content: center; gap: clamp(28px, 5vw, 64px); align-items: flex-start; margin-top: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.mo-phone-side { display: none; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 360px; }
.mo-phone-side.is-active { display: flex; }

.mo-phone {
  position: relative; width: 320px; max-width: 86vw; aspect-ratio: 320 / 660;
  background: #0b0b0c; border-radius: 46px; padding: 11px;
  box-shadow: var(--mo-shadow-pop), 0 0 0 1px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
:root[data-theme="ocean"] .mo-phone { box-shadow: 0 40px 80px -28px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05); }
.mo-phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: var(--mo-bg); display: flex; flex-direction: column;
}
.mo-phone__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #0b0b0c; border-radius: 0 0 16px 16px; z-index: 20;
}
.mo-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 22px 6px; font-size: 12px; font-weight: 600; color: var(--mo-ink);
  flex-shrink: 0;
}
.mo-statusbar__dots { display: flex; gap: 4px; align-items: center; }
.mo-statusbar svg { width: 16px; height: 12px; }

/* screen scaffolding */
.mo-app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mo-appbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 18px 12px; flex-shrink: 0;
}
.mo-appbar__back {
  appearance: none; border: 0; background: var(--mo-bg-2); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mo-ink);
  transition: background var(--dur) var(--ease-out); flex-shrink: 0;
}
.mo-appbar__back:hover { background: var(--mo-bg-3); }
.mo-appbar__back svg { width: 16px; height: 16px; }
.mo-appbar__title { font-family: var(--font-display); font-size: 19px; line-height: 1.05; white-space: nowrap; }
.mo-appbar__sub { font-size: 11px; color: var(--mo-mute); }
.mo-appbar__brand { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 17px; }
.mo-appbar__brand .mo-mark { width: 18px; height: 18px; }

.mo-screen { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 20px; -webkit-overflow-scrolling: touch; }
.mo-screen::-webkit-scrollbar { width: 0; }
.mo-screenset { position: relative; flex: 1; min-height: 0; display: flex; }
.mo-pane { display: none; flex-direction: column; flex: 1; min-height: 0; animation: mo-pane-in 0.42s var(--ease-out); }
.mo-pane.is-active { display: flex; }
@keyframes mo-pane-in { from { transform: translateX(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mo-pane { animation: none; } }

/* progress dots */
.mo-progress { display: flex; gap: 6px; justify-content: center; padding: 4px 0 10px; flex-shrink: 0; }
.mo-progress__d { width: 6px; height: 6px; border-radius: 50%; background: var(--mo-line); transition: all var(--dur) var(--ease-out); }
.mo-progress__d.is-on { background: var(--mo-accent); width: 18px; border-radius: 3px; }

/* NEED screen */
.mo-need__greet { font-family: var(--font-display); font-size: 27px; line-height: 1.16; margin: 10px 0 8px; }
.mo-need__hint { font-size: 13.5px; color: var(--mo-mute); margin-bottom: 18px; }
.mo-need__input {
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; height: 50px;
  background: var(--mo-card); border: 1px solid var(--mo-line); border-radius: var(--r-md);
  margin-bottom: 16px;
}
.mo-need__input svg { width: 18px; height: 18px; color: var(--mo-mute); flex-shrink: 0; }
.mo-need__input input { flex: 1; border: 0; background: transparent; font: 400 14.5px var(--font-body); color: var(--mo-ink); outline: none; min-width: 0; }
.mo-need__input input::placeholder { color: var(--mo-mute-soft); }
.mo-need__go { appearance: none; border: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--mo-cta-bg); color: var(--mo-cta-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.mo-need__go svg { width: 17px; height: 17px; color: currentColor; }
.mo-need__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mo-mute); margin: 6px 0 12px; }
.mo-chips { display: flex; flex-direction: column; gap: 9px; }
.mo-chip {
  appearance: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: var(--mo-card); border: 1px solid var(--mo-line); border-radius: var(--r-md);
  font: 500 14px var(--font-body); color: var(--mo-ink);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out);
}
.mo-chip:hover { border-color: var(--mo-accent); }
.mo-chip:active { transform: scale(0.99); }
.mo-chip__ic { width: 22px; height: 22px; color: var(--mo-accent); flex-shrink: 0; }
.mo-chip__ic svg { width: 100%; height: 100%; }
.mo-chip__arrow { margin-left: auto; color: var(--mo-mute); }
.mo-chip__arrow svg { width: 16px; height: 16px; }

/* DISCOVER screen */
.mo-map {
  position: relative; height: 132px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px;
  background: var(--mo-bg-2); border: 1px solid var(--mo-line);
}
.mo-map svg { width: 100%; height: 100%; }
.mo-map__pin { fill: var(--mo-accent); }
.mo-map__me { fill: var(--mo-cta-bg); }
.mo-needbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
  background: var(--mo-accent-soft); border-radius: var(--r-full); font-size: 12.5px; color: var(--mo-accent); font-weight: 600;
}
:root[data-theme="ocean"] .mo-needbar { color: var(--mo-dark-accent); }
.mo-needbar svg { width: 14px; height: 14px; flex-shrink: 0; }
.mo-prov {
  appearance: none; width: 100%; text-align: left; cursor: pointer; margin-bottom: 10px;
  display: flex; gap: 13px; padding: 14px; background: var(--mo-card); border: 1px solid var(--mo-line);
  border-radius: var(--r-md); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mo-prov:hover { border-color: var(--mo-accent); box-shadow: var(--mo-shadow-card); }
.mo-prov:active { transform: scale(0.995); }
.mo-prov__av { width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: #fff; }
.mo-prov__main { flex: 1; min-width: 0; }
.mo-prov__row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mo-prov__name { font-family: var(--font-display); font-size: 17px; line-height: 1.1; color: var(--mo-ink); white-space: nowrap; }
.mo-prov__price { font-family: var(--font-display); font-size: 18px; color: var(--mo-ink); white-space: nowrap; }
.mo-prov__price small { font-family: var(--font-body); font-size: 10px; color: var(--mo-mute); font-weight: 600; }
.mo-prov__svc { font-size: 12.5px; color: var(--mo-mute-strong); margin: 1px 0 7px; }
.mo-prov__meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--mo-mute); }
.mo-prov__stars { display: inline-flex; align-items: center; gap: 4px; color: var(--mo-ink); font-weight: 600; }
.mo-prov__stars svg { width: 13px; height: 13px; color: var(--mo-accent-2); }
.mo-prov__trust { display: inline-flex; align-items: center; gap: 4px; color: var(--mo-success); font-weight: 600; }
.mo-prov__trust svg { width: 13px; height: 13px; }
.mo-prov__dist { margin-left: auto; }

/* CHOOSE / detail sheet */
.mo-detail { display: flex; flex-direction: column; gap: 0; }
.mo-detail__hero { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.mo-detail__av { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; color: #fff; }
.mo-detail__name { font-family: var(--font-display); font-size: 25px; line-height: 1.05; }
.mo-detail__svc { font-size: 13px; color: var(--mo-mute-strong); }
.mo-detail__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mo-line); border: 1px solid var(--mo-line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.mo-detail__stat { background: var(--mo-card); padding: 13px 10px; text-align: center; }
.mo-detail__stat b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--mo-ink); }
.mo-detail__stat span { font-size: 10.5px; color: var(--mo-mute); letter-spacing: 0.03em; }
.mo-reviews { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mo-review { padding: 13px 15px; background: var(--mo-bg-2); border-radius: var(--r-md); }
.mo-review__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mo-review__who { font-size: 12.5px; font-weight: 600; color: var(--mo-ink); }
.mo-review__stars { display: inline-flex; gap: 2px; margin-left: auto; }
.mo-review__stars svg { width: 12px; height: 12px; color: var(--mo-accent-2); }
.mo-review__txt { font-size: 13px; color: var(--mo-mute-strong); line-height: 1.45; }
.mo-detail__foot { margin-top: auto; padding-top: 12px; }

/* CONNECT screen — the payoff */
.mo-connect { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 14px 6px; }
.mo-connect__seal { width: 76px; height: 76px; border-radius: 50%; background: var(--mo-accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; }
.mo-connect__seal svg { width: 36px; height: 36px; color: var(--mo-accent); }
:root[data-theme="ocean"] .mo-connect__seal svg { color: var(--mo-dark-accent); }
@media (prefers-reduced-motion: no-preference) {
  .mo-pane.is-active .mo-connect__seal { animation: mo-pop 0.5s var(--ease-out) both; }
  .mo-connect__seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mo-accent); opacity: 0; }
  .mo-pane.is-active .mo-connect__seal::after { animation: mo-ring 0.9s var(--ease-out) 0.2s; }
}
@keyframes mo-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mo-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
.mo-connect__h { font-family: var(--font-display); font-size: 28px; line-height: 1.08; margin-bottom: 8px; }
.mo-connect__h em { font-style: italic; color: var(--mo-accent); }
.mo-connect__p { font-size: 13.5px; color: var(--mo-mute-strong); max-width: 30ch; margin-bottom: 20px; }
.mo-contactcard { width: 100%; background: var(--mo-card); border: 1px solid var(--mo-line); border-radius: var(--r-md); padding: 16px; display: flex; align-items: center; gap: 13px; text-align: left; margin-bottom: 14px; }
.mo-contactcard__av { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: #fff; }
.mo-contactcard__name { font-family: var(--font-display); font-size: 18px; line-height: 1; }
.mo-contactcard__num { font-size: 13px; color: var(--mo-mute-strong); font-variant-numeric: tabular-nums; margin-top: 3px; }
.mo-connect__note { font-size: 11.5px; color: var(--mo-mute); line-height: 1.5; max-width: 32ch; }
.mo-connect__note em { font-style: italic; color: var(--mo-accent); }

/* caption under phone */
.mo-phone-cap { text-align: center; max-width: 320px; }
.mo-phone-cap__t { font-family: var(--font-display); font-size: 19px; margin-bottom: 4px; }
.mo-phone-cap__s { font-size: 13px; color: var(--mo-mute); }
.mo-restart { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--mo-accent); background: none; border: 0; cursor: pointer; font-weight: 600; }
.mo-restart svg { width: 13px; height: 13px; }

/* PROVIDER tools */
.mo-tabs { display: flex; gap: 2px; padding: 4px; background: var(--mo-bg-2); border-radius: var(--r-full); margin: 0 18px 4px; flex-shrink: 0; }
.mo-tab { appearance: none; border: 0; background: transparent; flex: 1; cursor: pointer; padding: 8px 4px; border-radius: var(--r-full); font: 600 11px var(--font-body); color: var(--mo-mute); transition: all var(--dur) var(--ease-out); }
.mo-tab[aria-pressed="true"] { background: var(--mo-card); color: var(--mo-ink); box-shadow: var(--mo-shadow-card); }
.mo-ptab { display: none; flex-direction: column; gap: 14px; }
.mo-ptab.is-active { display: flex; animation: mo-pane-in 0.36s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .mo-ptab.is-active { animation: none; } }

.mo-store__head { display: flex; gap: 13px; align-items: center; }
.mo-store__av { width: 60px; height: 60px; border-radius: 17px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 26px; color: #fff; }
.mo-store__name { font-family: var(--font-display); font-size: 23px; line-height: 1.05; }
.mo-store__svc { font-size: 12.5px; color: var(--mo-mute-strong); }
.mo-avail { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: var(--mo-bg-2); border-radius: var(--r-md); }
.mo-avail__l { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--mo-ink); }
.mo-avail__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mo-success); }
.mo-avail.is-off .mo-avail__dot { background: var(--mo-mute-soft); }
.mo-avail.is-off .mo-avail__l { color: var(--mo-mute); }
.mo-switch { position: relative; width: 44px; height: 26px; border: 0; border-radius: 999px; background: var(--mo-success); cursor: pointer; padding: 0; transition: background var(--dur) var(--ease-out); flex-shrink: 0; }
.mo-switch.is-off { background: var(--mo-line); }
.mo-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform var(--dur) var(--ease-out); }
.mo-switch.is-off i { transform: translateX(18px); transform: translateX(-0px); }
.mo-switch i { transform: translateX(18px); }
.mo-switch.is-off i { transform: translateX(0); }
.mo-svclist { display: flex; flex-direction: column; gap: 8px; }
.mo-svc { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--mo-card); border: 1px solid var(--mo-line); border-radius: var(--r-sm); }
.mo-svc__n { font-size: 13.5px; color: var(--mo-ink); font-weight: 500; }
.mo-svc__p { font-family: var(--font-display); font-size: 17px; color: var(--mo-ink); }
.mo-svc__p small { font-family: var(--font-body); font-size: 10px; color: var(--mo-mute); font-weight: 600; }
.mo-yours { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--mo-accent-soft); font-size: 12px; color: var(--mo-accent); font-weight: 600; line-height: 1.4; }
:root[data-theme="ocean"] .mo-yours { color: var(--mo-dark-accent); }
.mo-yours svg { width: 15px; height: 15px; flex-shrink: 0; }

.mo-rep__big { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--mo-bg-2); border-radius: var(--r-md); }
.mo-rep__score { font-family: var(--font-display); font-size: 50px; line-height: 0.9; color: var(--mo-ink); }
.mo-rep__stars svg { width: 16px; height: 16px; color: var(--mo-accent-2); }
.mo-rep__count { font-size: 12px; color: var(--mo-mute); margin-top: 3px; }

.mo-crm { display: flex; flex-direction: column; gap: 8px; }
.mo-crm__row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--mo-card); border: 1px solid var(--mo-line); border-radius: var(--r-sm); }
.mo-crm__av { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; color: #fff; }
.mo-crm__n { font-size: 13.5px; font-weight: 600; color: var(--mo-ink); }
.mo-crm__d { font-size: 11.5px; color: var(--mo-mute); }
.mo-crm__tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mo-success); }

.mo-earn__big { text-align: center; padding: 22px; background: var(--mo-dark-bg); color: var(--mo-dark-fg); border-radius: var(--r-md); }
.mo-earn__big b { display: block; font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--mo-dark-fg); }
.mo-earn__big span { font-size: 12px; color: var(--mo-dark-mute); }
.mo-earn__keep { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--mo-dark-accent); font-weight: 600; }
.mo-earn__rows { display: flex; flex-direction: column; gap: 1px; background: var(--mo-line); border: 1px solid var(--mo-line); border-radius: var(--r-sm); overflow: hidden; }
.mo-earn__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--mo-card); font-size: 13px; }
.mo-earn__row span { color: var(--mo-mute-strong); }
.mo-earn__row b { font-family: var(--font-display); font-size: 16px; color: var(--mo-ink); }

.mo-member { padding: 18px; background: var(--mo-bg-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 12px; }
.mo-member__row { display: flex; align-items: center; justify-content: space-between; }
.mo-member__status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--mo-success); }
.mo-member__status .mo-avail__dot { background: var(--mo-success); }
.mo-member__big { font-family: var(--font-display); font-size: 22px; color: var(--mo-ink); }
.mo-member__note { font-size: 12px; color: var(--mo-mute-strong); line-height: 1.5; }
.mo-member__note em { color: var(--mo-accent); font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   PASSWORD GATE
   ───────────────────────────────────────────────────────────── */
.mo-gate {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: var(--mo-dark-bg); color: var(--mo-dark-fg); padding: 24px;
}
.mo-gate.is-hidden { display: none; }
.mo-gate__inner { width: 100%; max-width: 380px; text-align: center; }
.mo-gate__mark { width: 64px; height: 64px; margin: 0 auto 26px; }
.mo-gate__mark .m-core { fill: var(--mo-dark-fg); }
.mo-gate__mark .m-arm { stroke: var(--mo-dark-accent); }
.mo-gate__mark .m-node { fill: var(--mo-dark-accent); }
.mo-gate__name { font-family: var(--font-display); font-size: 34px; line-height: 1; margin-bottom: 8px; }
.mo-gate__name em { font-style: italic; color: var(--mo-dark-accent); }
.mo-gate__tag { font-size: 13px; color: var(--mo-dark-mute); margin-bottom: 32px; letter-spacing: 0.02em; }
.mo-gate__form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.mo-gate__field { display: flex; flex-direction: column; gap: 6px; }
.mo-gate__field label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mo-dark-mute); }
.mo-gate__field input {
  height: 50px; padding: 0 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.05); border: 1px solid var(--mo-dark-line); color: var(--mo-dark-fg);
  font: 400 15px var(--font-body); outline: none; transition: border-color var(--dur) var(--ease-out);
}
.mo-gate__field input::placeholder { color: rgba(255,255,255,0.3); }
.mo-gate__field input:focus { border-color: var(--mo-dark-accent); }
.mo-gate__btn {
  height: 50px; margin-top: 6px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--mo-dark-accent); color: #06202b; font: 600 15px var(--font-body);
  transition: opacity var(--dur) var(--ease-out);
}
:root[data-theme="ocean"] .mo-gate__btn { color: #06202b; }
.mo-gate__btn:hover { opacity: 0.9; }
.mo-gate__err { font-size: 12.5px; color: #FF8A6B; min-height: 16px; text-align: center; margin-top: 2px; }
.mo-gate__hint { font-size: 11px; color: var(--mo-dark-mute); margin-top: 22px; line-height: 1.6; }
.mo-gate__hint code { font-family: var(--font-mono); color: var(--mo-dark-accent); }
.mo-gate__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mo-dark-mute); margin-bottom: 24px; }
.mo-gate__lock svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────────────────────────
   TWEAKS PANEL (vanilla host)
   ───────────────────────────────────────────────────────────── */
.mo-tweaks {
  position: fixed; right: 16px; bottom: 16px; z-index: 150; width: 268px;
  background: rgba(250, 249, 247, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 0.5px solid rgba(255,255,255,0.6); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 44px rgba(0,0,0,0.2);
  color: #29261b; font: 12px/1.4 var(--font-body); overflow: hidden;
}
:root[data-theme="ocean"] .mo-tweaks { background: rgba(18, 40, 58, 0.85); color: #eaf2f5; border-color: rgba(255,255,255,0.12); }
.mo-tweaks.is-hidden { display: none; }
.mo-tweaks__hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 10px 11px 15px; }
.mo-tweaks__hd b { font-size: 12.5px; font-weight: 600; }
.mo-tweaks__x { appearance: none; border: 0; background: transparent; color: inherit; opacity: 0.55; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.mo-tweaks__x:hover { background: rgba(0,0,0,0.06); opacity: 1; }
.mo-tweaks__body { padding: 0 15px 16px; display: flex; flex-direction: column; gap: 14px; }
.mo-tweaks__sect { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; }
.mo-tweaks__row { display: flex; flex-direction: column; gap: 8px; }
.mo-tweaks__lbl { display: flex; justify-content: space-between; align-items: baseline; }
.mo-tweaks__lbl span:first-child { font-weight: 500; }
.mo-tweaks__lbl span:last-child { opacity: 0.5; }
.mo-swatches { display: flex; gap: 7px; }
.mo-swatch {
  position: relative; flex: 1; height: 44px; border: 0; border-radius: 7px; cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.06);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); padding: 0;
}
.mo-swatch:hover { transform: translateY(-1px); }
.mo-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.18); }
:root[data-theme="ocean"] .mo-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #eaf2f5, 0 2px 6px rgba(0,0,0,0.3); }
.mo-swatch__strip { position: absolute; inset: 0; display: flex; }
.mo-swatch__strip i { flex: 1; }
.mo-swatch__nm { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 0; text-align: center; background: rgba(0,0,0,0.32); color: #fff; }
.mo-seg { display: flex; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.07); }
:root[data-theme="ocean"] .mo-seg { background: rgba(255,255,255,0.08); }
.mo-seg button { flex: 1; appearance: none; border: 0; background: transparent; color: inherit; font: 500 11px var(--font-body); padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.mo-seg button[aria-pressed="true"] { background: rgba(255,255,255,0.92); color: #29261b; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.mo-tweaks__toggle { display: flex; align-items: center; justify-content: space-between; }
.mo-tg { position: relative; width: 34px; height: 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.18); cursor: pointer; padding: 0; }
.mo-tg[data-on="1"] { background: #34c759; }
.mo-tg i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease-out); }
.mo-tg[data-on="1"] i { transform: translateX(14px); }
.mo-tw-select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 30px; padding: 0 28px 0 10px;
  border: 0.5px solid rgba(0,0,0,0.14); border-radius: 8px; background: rgba(255,255,255,0.6);
  color: inherit; font: 500 11.5px var(--font-body); cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
:root[data-theme="ocean"] .mo-tw-select { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.mo-tw-select:focus { border-color: rgba(0,0,0,0.3); }