body.flow { background: linear-gradient(160deg, #e6f4f1, #f6f8f7 40%); min-height: 100vh; min-height: 100dvh; }
.shell { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); display: flex; flex-direction: column; }
@media (min-width: 640px) {
  body.flow { padding: 32px 16px; }
  .shell { min-height: 0; height: min(860px, calc(100vh - 64px)); border-radius: 28px; box-shadow: 0 30px 80px rgba(15,31,28,.14); overflow: hidden; border: 1px solid var(--line); }
  .stage { overflow-y: auto; }
}
.bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: .4rem;
  padding: calc(.6rem + env(safe-area-inset-top)) .7rem .6rem; background: rgba(246,248,247,.92); backdrop-filter: blur(14px); }
.bar-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(15,31,28,.08); }
.bar-btn:active { transform: scale(.94); }
.bar-title { text-align: center; line-height: 1.2; min-width: 0; }
.bar-title b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title small { color: var(--muted); font-size: .8rem; }
.progress { height: 3px; background: var(--line); }
.progress i { display: block; height: 100%; width: 20%; background: var(--c); transition: width .35s ease, background .3s; border-radius: 0 3px 3px 0; }
.stage { flex: 1; padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); position: relative; }
.screen.in-right { animation: inR .28s cubic-bezier(.2,.8,.2,1); }
.screen.in-left { animation: inL .28s cubic-bezier(.2,.8,.2,1); }
@keyframes inR { from { opacity: 0; transform: translateX(28px); } }
@keyframes inL { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .screen.in-right, .screen.in-left { animation: none; } }
.hint { color: var(--muted); margin: .2rem 0 1rem; }

.svc-list { display: flex; flex-direction: column; gap: .7rem; }
.svc-item { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.svc-item:active { transform: scale(.98); }
.svc-item:hover { box-shadow: 0 6px 20px rgba(15,31,28,.08); }
.svc-ico { width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--c) 14%, white); display: grid; place-items: center; flex: none; }
.svc-ico i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.svc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.svc-txt b { font-size: 1.05rem; }
.svc-txt small { color: var(--muted); font-size: .82rem; }
.svc-txt em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--c); }
.chev { font-size: 1.6rem; color: #b5c0bc; }

.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.month-nav h3 { margin: 0; font-size: 1.15rem; }
.flow .cal-grid { gap: 5px; }
.flow .cal-dow span { font-size: .75rem; }
.flow .day { border-radius: 11px; }
.flow .day small { font-size: .62rem; }
.flow .day.sel { background: var(--c); color: #fff; }
.flow .legend { font-size: .75rem; }
.sched-note { font-size: .82rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; margin-top: 1rem; }

.flow .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.flow h4 { margin: 1.2rem 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.flow .slot { padding: .85rem 0; font-size: 1.02rem; border-radius: 14px; }
.skeleton { height: 220px; border-radius: 16px; background: linear-gradient(90deg, #eef2f1 25%, #f7f9f8 50%, #eef2f1 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

.flow .summary { background: #fff; border: 1px solid var(--line); }
.flow .summary i { background: var(--c); }
.flow input, .flow textarea { font-size: 16px; }
.cta-dock { position: sticky; bottom: 0; padding: .6rem 0 calc(.2rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.cta-dock .btn { padding: 1rem; font-size: 1.05rem; background: var(--c); }

.flow .ticket { background: #fff; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; }
.flow .ticket-actions { flex-direction: column; }
.flow .ticket-actions .btn { width: 100%; }
.flow .tg-box { flex-wrap: wrap; }