/* =====================================================================
   MIND LINKER — Counselor matching flow styles (green/teal)
   + Home chat-starter hero. Reuses tokens.css.
   ===================================================================== */

/* ---------- HOME chat-starter hero ---------- */
.matchhero {
  position: relative; overflow: hidden; border-radius: 30px; padding: 26px;
  background: var(--grad-mesh); box-shadow: var(--sh-glow); color: oklch(23.2% 0.038 171.6);
}
.matchhero__noise { position: absolute; inset: 0; opacity: .4; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.matchhero__inner { position: relative; }
.matchhero__eyebrow { font: var(--fw-mono) 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: oklch(42.2% 0.078 171.3); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.matchhero__h { font: var(--fw-display) 25px var(--font-display); letter-spacing: -.03em; line-height: 1.18; color: oklch(23.2% 0.038 171.6); margin: 12px 0 0; text-wrap: balance; }
@media (min-width: 1024px) { .matchhero { padding: 32px; } .matchhero__h { font-size: 30px; } }
.matchhero__p { font: var(--fw-label) 14px var(--font-body); color: oklch(33.5% 0.057 173.6); margin: 10px 0 0; max-width: 460px; line-height: 1.6; }
/* fake chat-input bar that opens the chatbot */
.matchhero__bar {
  margin-top: 20px; width: 100%; display: flex; align-items: center; gap: 12px;
  background: oklch(100% 0 89.9 / 0.62); border: 1px solid oklch(100% 0 89.9 / 0.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 18px; padding: 14px 14px 14px 18px; cursor: pointer; text-align: left;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.matchhero__bar:hover { background: oklch(100% 0 89.9 / 0.78); box-shadow: 0 10px 28px oklch(29.2% 0.051 174.1 / 0.18); }
.matchhero__bar:active { transform: scale(.99); }
.matchhero__barph { flex: 1; font: var(--fw-label) 15px var(--font-body); color: oklch(43% 0.056 171.5); }
.matchhero__go { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center;
  background: var(--grad-signature); color: oklch(29.8% 0.055 171.9); box-shadow: 0 2px 6px oklch(46.8% 0.089 169.4 / .34), 0 6px 16px oklch(46.8% 0.089 169.4 / .4), 0 14px 28px oklch(61.8% 0.122 232.1 / .2), inset 0 1px 1px oklch(100% 0 0 / .5); }
.matchhero__go svg { width: 22px; height: 22px; }
.matchhero__assure { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.matchhero__assure span { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-strong) 12px var(--font-body); color: oklch(33.5% 0.057 173.6); white-space: nowrap; }
.matchhero__assure svg { width: 14px; height: 14px; }

/* shared bits */
.m-h2 { font: var(--fw-display) 26px var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; line-height: 1.18; }
@media (min-width: 1024px) { .m-h2 { font-size: 30px; } }
.m-sub { font: var(--fw-label) 14.5px var(--font-body); color: var(--ink-3); line-height: 1.6; margin: 8px 0 0; }
.m-eyebrow { font: var(--fw-mono) 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-500); white-space: nowrap; }
.m-dim { color: var(--ink-3); }
.hide-scroll { scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-center { display: flex; align-items: center; }

.mtag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 10px; border-radius: 999px; font: var(--fw-display) 12px var(--font-body); }
.mtag svg { flex: 0 0 auto; }
.m-keychip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; font: var(--fw-strong) 12.5px var(--font-body);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.m-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font: var(--fw-display) 12px var(--font-body);
  background: var(--green-100); color: var(--green-700); white-space: nowrap; }

/* buttons */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; cursor: pointer;
  font: var(--fw-display) 15px var(--font-body); padding: 13px 20px; border-radius: 15px; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border .2s ease; }
.m-btn:active { transform: translateY(1px); }
.m-btn--primary { background: var(--grad-signature); background-size: 160% 160%; color: oklch(29.8% 0.055 171.9); box-shadow: var(--sh-glow); }
.m-btn--primary:hover { background-position: 100% 50%; }
.m-btn--primary:disabled { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: not-allowed; border-color: var(--line); }
.m-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.m-btn--secondary:hover { border-color: var(--green-300); color: var(--green-600); }
.m-btn--ghost { background: transparent; color: var(--ink-2); border-color: transparent; padding: 10px 14px; }
.m-btn--ghost:hover { background: var(--surface-2); }
.m-btn--block { width: 100%; }
.m-btn--lg { padding: 16px 22px; font-size: 16px; border-radius: 16px; }

/* =====================================================================
   OVERLAY shell
   ===================================================================== */
.m-overlay { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column;
  animation: mOverlayIn .34s cubic-bezier(.22,.8,.28,1); }
@keyframes mOverlayIn { from { transform: translateY(14px); } to { transform: none; } }
.m-overlay__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m-overlay__scroll { flex: 1 1 auto; overflow-y: auto; }
.m-overlay__scroll.is-chat { overflow: hidden; display: flex; }

.m-x { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: border .18s, color .18s; }
.m-x:hover { border-color: var(--green-300); color: var(--green-600); }

.m-steps { display: flex; align-items: center; gap: 8px; }
.m-stepchip { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-display) 13px var(--font-body); color: var(--ink-3);
  padding: 7px 13px 7px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.m-stepchip__n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: var(--fw-mono) 11px var(--font-mono);
  background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); }
.m-stepchip.on { color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); border-color: transparent; box-shadow: 0 2px 5px oklch(56.3% 0.116 162.8 / .26), 0 4px 12px oklch(64.7% 0.134 162.2 / .3); }
.m-stepchip.on .m-stepchip__n { background: oklch(100% 0 89.9 / 0.55); color: oklch(29.8% 0.055 171.9); border-color: transparent; }
.m-stepchip.done { color: var(--green-700); background: var(--green-50); border-color: transparent; }
.m-stepchip.done .m-stepchip__n { background: var(--green-500); color: oklch(100% 0 89.9); border-color: transparent; }
@media (max-width: 520px) { .m-stepchip { padding: 6px 10px 6px 6px; font-size: 12px; } }

/* generic stage wrapper */
.m-stage { width: 100%; max-width: 720px; margin: 0 auto; padding: 28px 20px 60px; }
@media (min-width: 1024px) { .m-stage { padding: 40px 24px 72px; } }
.m-results, .m-load, .m-success { display: flex; flex-direction: column; }
.m-load, .m-success { align-items: center; padding-top: 56px; }
.m-booking { max-width: 1040px; }

/* =====================================================================
   CHAT
   ===================================================================== */
.m-chat { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; }
.m-chat__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.m-chat__id { display: flex; align-items: center; gap: 12px; }
.m-chat__name { display: flex; align-items: center; gap: 8px; font: var(--fw-display) 15.5px var(--font-body); color: var(--ink); }
.m-aimark { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font: var(--fw-mono) 10px var(--font-mono); letter-spacing: .08em; color: var(--teal-600); background: var(--teal-50); padding: 3px 7px; border-radius: 999px; }
.m-chat__sub { font: var(--fw-label) 12.5px var(--font-body); color: var(--ink-3); margin-top: 2px; }
.m-chat__bar { flex: 0 0 auto; height: 4px; margin: 0 18px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.m-chat__bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-signature); transition: width .5s cubic-bezier(.22,.8,.28,1); }
.m-chat__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 16px; }
.m-chat__inner { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 14px; }
.m-anon { display: flex; align-items: center; gap: 8px; align-self: center; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font: var(--fw-label) 12px var(--font-body); text-align: center; }
.m-anon svg { color: var(--green-500); flex: 0 0 auto; }
.m-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.m-row.me { justify-content: flex-end; }
.m-aibubmark { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); box-shadow: 0 2px 5px oklch(56.3% 0.116 162.8 / .3), 0 5px 12px oklch(64.7% 0.134 162.2 / .35); }
.m-bub { padding: 13px 16px; border-radius: 18px; font: var(--fw-label) 15px var(--font-body); line-height: 1.55; max-width: 76%; }
.m-bub--sys { background: var(--surface); color: var(--ink); border: 1px solid var(--line-soft); border-bottom-left-radius: 6px; box-shadow: var(--sh-1); }
.m-bub--me { background: var(--grad-signature); color: oklch(29.8% 0.055 171.9); border-bottom-right-radius: 6px; font-weight: var(--fw-strong); }
.m-typing { display: inline-flex; gap: 5px; align-items: center; }
.m-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .5; animation: mDot 1.2s infinite; }
.m-typing i:nth-child(2) { animation-delay: .2s; } .m-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes mDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: .9; } }
.m-chipdeck { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.m-replychip { border: 1.5px solid var(--green-200); background: var(--surface); color: var(--green-700); cursor: pointer;
  font: var(--fw-strong) 14px var(--font-body); padding: 11px 16px; border-radius: 999px; transition: background .16s, transform .1s, border .16s; }
.m-replychip:hover { background: var(--green-50); border-color: var(--green-400); }
.m-replychip:active { transform: scale(.97); }
.m-cta-find { margin-top: 8px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font: var(--fw-display) 16px var(--font-display); color: oklch(29.8% 0.055 171.9); padding: 16px; border-radius: 16px;
  background: var(--grad-signature); box-shadow: var(--sh-glow); }
.m-chat__input { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--bg); }
.m-modetgl { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.m-modetgl.on { background: var(--teal-50); border-color: var(--teal-300); color: var(--teal-600); }
.m-field { flex: 1 1 auto; min-width: 0; font: var(--fw-label) 15px var(--font-body); padding: 13px 16px; border-radius: 14px; background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); }
.m-field::placeholder { color: var(--ink-3); }
.m-field:focus { outline: none; border-color: var(--teal-400); background: var(--surface); box-shadow: 0 0 0 4px oklch(72.2% 0.119 187.2 / 0.16); }
.m-send { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; border: none; cursor: pointer; display: grid; place-items: center; color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); box-shadow: 0 2px 6px oklch(56.3% 0.116 162.8 / .35), 0 6px 14px oklch(64.7% 0.134 162.2 / .4), 0 12px 26px oklch(61.8% 0.122 232.1 / .22); }
.m-send:disabled { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.m-voicepill { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  padding: 13px; border-radius: 14px; border: 1.5px solid var(--teal-300); background: var(--teal-50); color: var(--teal-700); font: var(--fw-strong) 14px var(--font-body); }
.m-recdot { width: 8px; height: 8px; border-radius: 50%; background: oklch(62.9% 0.178 25.6); animation: mPulse 1.1s infinite; }
@keyframes mPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* =====================================================================
   ORB / LOADING
   ===================================================================== */
.m-orb { border-radius: 50%; position: relative;
  background: radial-gradient(36% 32% at 32% 26%, oklch(100% 0 89.9) 0%, oklch(100% 0 89.9 / 0) 44%), radial-gradient(120% 120% at 30% 22%, oklch(94.8% 0.041 163.2), oklch(72% 0.128 172.5) 60%, oklch(46.8% 0.089 169.4));
  box-shadow: inset -10px -16px 30px oklch(29.2% 0.052 174.7 / 0.4), 0 26px 50px oklch(41.9% 0.076 171.9 / 0.4); }
@keyframes mBreath { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
.m-load__steps { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.m-loadstep { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-1); opacity: .55; transition: opacity .4s, border .4s, box-shadow .4s; }
.m-loadstep.active { opacity: 1; border-color: var(--green-300); box-shadow: var(--sh-2); }
.m-loadstep.done { opacity: 1; }
.m-loadstep__ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--green-600); }
.m-loadstep.done .m-loadstep__ic { background: var(--green-500); color: oklch(100% 0 89.9); }
.m-loadstep.active .m-loadstep__ic { background: var(--green-100); color: var(--green-700); }
.m-loadstep__t { font: var(--fw-display) 15.5px var(--font-body); color: var(--ink); }
.m-loadstep__d { font: var(--fw-label) 12.5px var(--font-body); color: var(--ink-3); margin-top: 2px; }
.m-spin { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 2.5px solid var(--green-100); border-top-color: var(--green-500); animation: mSpin .8s linear infinite; }
@keyframes mSpin { to { transform: rotate(360deg); } }

/* =====================================================================
   RESULTS
   ===================================================================== */
.m-results__head { margin-bottom: 18px; }
.m-results__head .m-h2 { margin: 8px 0 10px; }
.m-presetline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.m-cardlist { display: flex; flex-direction: column; gap: 16px; }
.m-cscard { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 26px; padding: 20px; box-shadow: var(--sh-1); animation: mRise .5s cubic-bezier(.22,.8,.28,1) both; }
.m-cscard.best { border-color: transparent; box-shadow: 0 0 0 2px var(--green-400), var(--sh-2); }
@keyframes mRise { from { transform: translateY(14px); } to { transform: none; } }
.m-bestflag { position: absolute; top: -11px; left: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font: var(--fw-display) 11.5px var(--font-body); color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 6px oklch(56.3% 0.116 162.8 / .35), 0 6px 14px oklch(64.7% 0.134 162.2 / .4), 0 12px 26px oklch(61.8% 0.122 232.1 / .22); }
.m-cs-top { display: flex; align-items: flex-start; gap: 14px; }
.m-cs-name { display: flex; align-items: center; gap: 7px; font: var(--fw-display) 18px var(--font-body); color: var(--ink); }
.m-verify { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--green-500); color: oklch(100% 0 89.9); }
.m-cs-title { font: var(--fw-label) 13px var(--font-body); color: var(--ink-3); margin-top: 3px; }
.m-cs-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.m-cs-match { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-matchring .ring__val { font: var(--fw-display) 16px var(--font-display); color: var(--ink); }
.m-matchnum small { font-size: 10px; color: var(--ink-3); }
.m-cs-matchlbl { font: var(--fw-mono) 10.5px var(--font-mono); letter-spacing: .1em; color: var(--ink-3); }
.m-cs-why { margin-top: 16px; padding: 15px; border-radius: 18px; background: color-mix(in srgb, var(--teal-50) 70%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal-200) 50%, transparent); }
.m-cs-why__h { display: flex; align-items: center; gap: 8px; font: var(--fw-display) 13.5px var(--font-body); color: var(--teal-700); margin-bottom: 8px; }
.m-cs-why__h svg { color: var(--teal-500); flex: 0 0 auto; }
.m-cs-why__p { font: var(--fw-label) 13.5px var(--font-body); color: var(--teal-800); line-height: 1.6; margin: 0; }
.m-cs-metric { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 11px; font: var(--fw-label) 12.5px/1.4 var(--font-body); color: var(--teal-700); }
.m-cs-metric b { font: var(--fw-display) 15.5px var(--font-display); color: var(--teal-600); letter-spacing: -.02em; }
.m-cs-reason { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font: var(--fw-label) 13.5px/1.55 var(--font-body); color: var(--ink-2); }
.m-cs-reason svg { color: var(--teal-500); flex: 0 0 auto; margin-top: 3px; }
.m-cs-cta { margin-top: 16px; justify-content: center; }
.m-cs-keys { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.m-cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.m-cs-quote { font: var(--fw-strong) 14px var(--font-body); color: var(--ink-2); font-style: italic; margin: 0; flex: 1 1 200px; }
.m-rematch { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; }
.m-rematch .m-dim { color: var(--ink-3); font-weight: var(--fw-strong); }
@media (min-width: 560px) { .m-cs-foot .m-btn { flex: 0 0 auto; } }

/* =====================================================================
   BOOKING
   ===================================================================== */
.m-book__head { margin-bottom: 18px; }
.m-book__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .m-book__grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.m-book__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.m-book__aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 900px) { .m-book__aside { position: sticky; top: 18px; } }
.m-bcard { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 22px; padding: 20px; box-shadow: var(--sh-1); }
.m-blabel { font: var(--fw-display) 14px var(--font-body); color: var(--ink); margin: 0 0 14px; }
.m-modepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.m-modecard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; text-align: left;
  padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); transition: border .18s, background .18s, transform .1s; }
.m-modecard:active { transform: scale(.98); }
.m-modecard__ic { margin-bottom: 4px; }
.m-modecard__t { font: var(--fw-display) 15px var(--font-body); color: var(--ink); }
.m-modecard__s { font: var(--fw-label) 12px var(--font-body); color: var(--ink-3); }
.m-map { position: relative; height: 130px; border-radius: 16px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; }
.m-map__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: .6; }
.m-map__pin { position: relative; color: var(--green-600); }
.m-map__note { position: absolute; bottom: 8px; right: 10px; font: var(--fw-mono) 11px var(--font-mono); color: var(--ink-3); }
.m-infostrip { padding: 14px 16px; border-radius: 16px; background: var(--cyan-50); color: var(--cyan-700); font: var(--fw-label) 13.5px var(--font-body); border: 1px solid color-mix(in srgb, var(--cyan-200) 60%, transparent); }
.m-datestrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; min-width: 0; }
.m-datecell { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 10px 0; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); transition: border .16s, background .16s; }
.m-datecell.on { border-color: var(--green-500); background: var(--green-50); }
.m-datenum { font: var(--fw-display) 17px var(--font-display); color: var(--ink); }
.m-slotgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 9px; }
.m-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 11px; border-radius: 13px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: var(--fw-display) 14px var(--font-display); transition: border .16s, background .16s; }
.m-slot.off { opacity: .4; cursor: not-allowed; }
.m-slotlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 13px; }
.m-slotleg { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-label) 12px/1 var(--font-body); color: var(--ink-3); white-space: nowrap; }
.m-slotleg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.m-slotleg--dim { opacity: .6; }
.m-slotdots { display: flex; gap: 4px; }
.m-sdot { width: 5px; height: 5px; border-radius: 50%; }
.m-sumrows { display: flex; flex-direction: column; gap: 11px; }
.m-sumrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: var(--fw-label) 14px var(--font-body); color: var(--ink); }
.m-sumrow .m-dim { font-size: 13px; }
.m-consent { display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer; border: none; background: none; padding: 11px 0; text-align: left; }
.m-switch { width: 46px; height: 28px; flex: 0 0 auto; border-radius: 999px; background: var(--line); position: relative; transition: background .22s; }
.m-switch.on { background: var(--green-500); }
.m-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: oklch(100% 0 89.9); box-shadow: 0 2px 5px oklch(38% 0.06 166 / .25); transition: transform .22s; }
.m-switch.on .m-knob { transform: translateX(18px); }

/* =====================================================================
   SUCCESS
   ===================================================================== */
.m-success__orb { position: relative; display: grid; place-items: center; }
.m-success__check { position: absolute; inset: 0; display: grid; place-items: center; color: oklch(100% 0 89.9); filter: drop-shadow(0 2px 6px oklch(29.8% 0.055 171.9 / 0.4)); }
.m-success__card { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 400px; margin-top: 24px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-2); }

/* =====================================================================
   VOICE-FIRST 마음 문진
   ===================================================================== */
.m-overlay__scroll.is-chat { justify-content: center; }
.m-voice { width: 100%; max-width: 600px; display: flex; flex-direction: column; height: 100%; padding: 0 20px; }
.m-voice__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 8px; }
.m-voice__title { display: flex; align-items: center; gap: 8px; font: var(--fw-display) 14px var(--font-body); color: var(--ink); white-space: nowrap; }
.m-logbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 8px 13px; font: var(--fw-strong) 13px var(--font-body); white-space: nowrap; transition: border .18s, color .18s; }
.m-logbtn:hover { border-color: var(--green-300); color: var(--green-600); }
.m-logbtn svg { flex: 0 0 auto; }
@media (max-width: 430px) { .m-logbtn span { display: none; } .m-logbtn { padding: 9px; } }

.m-voice__stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 8px 0; }
.m-voiceorb { position: relative; display: grid; place-items: center; transition: transform .45s cubic-bezier(.22,.8,.28,1); }
.m-voiceorb.listening { transform: scale(1.05); }
.m-voiceorb .m-orb { animation-duration: 5s; }
.m-voiceorb.listening .m-orb { animation-duration: 2.3s; }
.m-wave { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 26px; pointer-events: none; }
.m-wave i { width: 4px; height: 8px; border-radius: 999px; background: oklch(100% 0 89.9 / 0.92); box-shadow: 0 0 8px oklch(100% 0 89.9 / 0.55); animation: mWave 1s ease-in-out infinite; }
.m-wave i:nth-child(1) { animation-delay: 0s; } .m-wave i:nth-child(2) { animation-delay: .12s; }
.m-wave i:nth-child(3) { animation-delay: .24s; } .m-wave i:nth-child(4) { animation-delay: .36s; }
.m-wave i:nth-child(5) { animation-delay: .24s; } .m-wave i:nth-child(6) { animation-delay: .12s; } .m-wave i:nth-child(7) { animation-delay: 0s; }
@keyframes mWave { 0%, 100% { height: 7px; } 50% { height: 22px; } }
.m-voice__progress { font: var(--fw-mono) 13px var(--font-mono); color: var(--green-600); letter-spacing: .04em; }
.m-voice__progress span { color: var(--ink-3); }
.m-voice__q { font: var(--fw-display) 24px var(--font-display); letter-spacing: -.02em; color: var(--ink); line-height: 1.34; margin: 0; max-width: 440px; white-space: pre-line; text-wrap: balance; animation: mQIn .55s ease; }
@media (min-width: 1024px) { .m-voice__q { font-size: 28px; max-width: 540px; } }
@keyframes mQIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.m-voice__heard { display: inline-flex; align-items: center; max-width: 440px; font: var(--fw-label) 15px var(--font-body); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 9px 15px; border-radius: 14px; }
.m-caret { display: inline-block; width: 2px; height: 16px; background: var(--green-500); margin-left: 2px; animation: mBlink 1s step-end infinite; }
@keyframes mBlink { 50% { opacity: 0; } }

.m-voice__chips { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 0; }
.m-voice__chipslbl { font: var(--fw-mono) 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.m-voice__chips .m-chipdeck { justify-content: center; }
.m-replychip:disabled { opacity: .5; cursor: default; }

.m-voice__control { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 calc(18px + env(safe-area-inset-bottom)); }
.m-micbtn { position: relative; width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: oklch(29.8% 0.055 171.9); background: var(--grad-signature); box-shadow: 0 3px 9px oklch(56.3% 0.116 162.8 / .38), 0 10px 26px oklch(64.7% 0.134 162.2 / .45), 0 20px 40px oklch(61.8% 0.122 232.1 / .26), inset 0 2px 1px oklch(100% 0 0 / .5); transition: transform .12s; }
.m-micbtn:active { transform: scale(.95); }
.m-micbtn:disabled { opacity: .5; cursor: default; }
.m-micbtn__ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green-400); animation: mRing 1.4s ease-out infinite; }
@keyframes mRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
.m-miccaption { font: var(--fw-strong) 13.5px var(--font-body); color: var(--ink-3); white-space: nowrap; }
.m-modeswitch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: none; background: none; color: var(--ink-2); font: var(--fw-strong) 13px var(--font-body); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.m-modeswitch:hover { background: var(--surface-2); color: var(--green-600); }
.m-textbar { width: 100%; max-width: 440px; display: flex; align-items: center; gap: 10px; }

/* conversation log overlay */
.m-logov { position: fixed; inset: 0; z-index: 90; background: oklch(20.7% 0.03 172.2 / 0.46); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; animation: scrimIn .28s ease; }
.m-logov__panel { width: min(440px, 100%); height: 100%; background: var(--bg); display: flex; flex-direction: column; box-shadow: -12px 0 44px oklch(25% 0.043 169.2 / 0.32); animation: mPanelIn .32s cubic-bezier(.22,.8,.28,1); }
@keyframes mPanelIn { from { transform: translateX(40px); } to { transform: none; } }
@media (max-width: 640px) { .m-logov { align-items: flex-end; justify-content: center; } .m-logov__panel { width: 100%; height: 86dvh; border-radius: 24px 24px 0 0; animation: sheetUp .36s cubic-bezier(.22,.85,.26,1); } }
.m-logov__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.m-logov__t { font: var(--fw-display) 17px var(--font-display); color: var(--ink); }
.m-logov__s { font: var(--fw-label) 12.5px var(--font-body); color: var(--ink-3); margin-top: 2px; }
.m-logov__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }

/* intro · saved preset */
.m-intro { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 44px; }
.m-intro__x { position: absolute; top: 0; right: 0; }
.m-intro__orb { display: grid; place-items: center; }
.m-presetcard { width: 100%; max-width: 380px; margin-top: 20px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-1); }
.m-presetcard__h { display: flex; align-items: center; gap: 8px; font: var(--fw-display) 13.5px var(--font-body); color: var(--ink); white-space: nowrap; }
.m-presetcard__h svg { color: var(--teal-500); flex: 0 0 auto; }
.m-presetcard__when { margin-left: auto; font: var(--fw-strong) 12px var(--font-body); color: var(--ink-3); white-space: nowrap; }
.m-presettags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }