:root{
  --bg:#fff9f1;
  --ink:#7b7b7b;
  --muted:#72727f;
  --card:#ffffff;
  --line:#ece5db;
  --red:#f55252;
  --blue:#55b8e8;
  --aqua:#74d7cf;
  --pink:#ef83b7;
  --green:#9bd56b;
  --yellow:#f4c54a;
  --orange:#f29a62;
  --shadow:0 14px 34px rgba(58,45,30,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Montserrat",Arial,sans-serif;background:
 radial-gradient(circle at 10% 0%,#fff3c9 0 12%,transparent 13%),
 radial-gradient(circle at 92% 8%,#daf7f1 0 10%,transparent 11%),
 var(--bg);color:var(--ink)}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding-bottom:36px}
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,249,241,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(123,123,123,.08)}
.brand{display:flex;justify-content:center;align-items:center;gap:9px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:14px 18px 13px 17px;background:#ffdf68;color:#f26522;font-size:24px;font-weight:900;transform:rotate(-2deg)}
.brand-title{font-weight:900;font-size:18px;line-height:1}
.brand-subtitle{font-size:12px;color:var(--muted);margin-top:3px}
.icon-btn{width:46px;height:46px;border:0;background:#fff;border-radius:16px 20px 15px 18px;box-shadow:var(--shadow);font-size:22px}
main{padding:14px}
.screen{display:none}
.screen.active{display:block;animation:pop .24s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid rgba(123,123,123,.08);box-shadow:var(--shadow);border-radius:27px 22px 30px 20px;padding:20px;margin-bottom:16px}
.hero{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#fff 0%,#fff6dc 100%)}
.hero h1,.nav-card h1,.finish-card h1{margin:0 0 7px;font-size:clamp(27px,6vw,40px);line-height:1.05}
.hero p{margin:0;color:var(--muted);font-size:16px}
.mascot{width:84px;height:84px;display:grid;place-items:center;font-size:48px;background:#dff7e9;border-radius:42% 58% 48% 52%/55% 43% 57% 45%;transform:rotate(-3deg);flex:0 0 auto}
h2{font-size:20px;margin:0 0 14px}
.start-grid,.destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.start-btn:last-child{grid-column:1/-1}
.wobbly{min-height:106px;border:0;padding:15px 14px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:900;font-size:17px;color:var(--ink);box-shadow:0 9px 0 rgba(123,123,123,.10),0 14px 26px rgba(123,123,123,.11);transition:.13s transform,.13s box-shadow}
.wobbly:active{transform:translateY(5px) rotate(0)!important;box-shadow:0 3px 0 rgba(123,123,123,.10)}
.start-btn{background:#dff7ef;border-radius:24px 34px 25px 31px;transform:rotate(-.8deg)}
.start-btn.alt{background:#fff0cc;border-radius:34px 22px 32px 25px;transform:rotate(.7deg)}
.start-btn.reg{background:#ffd9eb;border-radius:24px 36px 22px 35px;transform:rotate(-.3deg)}
.big-icon{font-size:32px}
.pictogram{display:block;object-fit:contain;flex:0 0 auto}
.big-pictogram{width:52px;height:52px;filter:drop-shadow(0 3px 4px rgba(123,123,123,.12))}
.quick-pictogram{width:42px;height:42px;margin:0 auto 3px}
.modal-choice-icon{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.modal-choice-inner{display:flex;align-items:center;gap:12px}

small{font-weight:700;color:#676777}
.hidden{display:none!important}
.room-card{background:linear-gradient(135deg,#ffffff,#f4fbff)}
.room-input-row{display:grid;grid-template-columns:92px 1fr;gap:10px}
#roomInput{width:100%;border:3px solid #d9eef8;border-radius:22px;padding:12px;font-size:30px;font-weight:900;text-align:center;color:var(--ink);outline:none}
#roomInput:focus{border-color:var(--blue)}
.primary-action,.secondary-action{border:0;border-radius:20px 26px 18px 25px;padding:14px 18px;font-weight:900;font-size:17px}
.primary-action{background:#7BC7C0;color:#fff;box-shadow:0 8px 0 #5EA8A2}
.primary-action:active{transform:translateY(5px);box-shadow:0 3px 0 #5EA8A2}
.secondary-action{background:#edf6ff;color:#1e5e9d}
.huge{min-height:62px;font-size:20px}
.room-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.room-chip{width:44px;height:44px;border:0;border-radius:15px 19px 14px 18px;background:#fff0d9;font-weight:900;font-size:18px;color:#7b7b7b}
.destination-grid{margin-bottom:10px}
.dest-btn{min-height:110px;flex-direction:column}
.dest-btn.toilet{background:#ffe8cf;transform:rotate(-.7deg)}
.dest-btn.exit{background:#dff6e4;transform:rotate(.7deg)}
.dest-btn.registry{background:#ffd9eb;transform:rotate(-.4deg)}
.dest-btn.feeding{background:#f5e4ff;transform:rotate(.5deg)}
.dest-btn.bio{background:#ffe3d5;grid-column:1/-1;min-height:92px;transform:rotate(-.2deg)}
.link-btn{display:block;margin:16px auto 0;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#7b7b7b;font-weight:800;padding:10px}
.danger{color:#b54a4a}
.nav-card{background:linear-gradient(135deg,#fff,#f5fbff)}
.nav-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:#8a8a94}
.progress-pill{background:#f1f1f4;padding:8px 12px;border-radius:999px;font-weight:900;white-space:nowrap}
.route-summary{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin:17px 0 8px}
.route-endpoint{display:flex;gap:9px;align-items:center;padding:12px 12px;border-radius:19px;font-weight:900;min-width:0}
.route-endpoint.from{background:#e5f1ff;border:2px solid #b6d8ff}
.route-endpoint.to{background:#fff0dc;border:2px solid #ffd099}
.route-endpoint span:last-child{min-width:0}
.route-endpoint small{display:block;font-size:10px;letter-spacing:.08em;color:#7b7b7b;margin-bottom:3px}
.route-endpoint strong{display:block;font-size:14px;line-height:1.15;overflow-wrap:anywhere}
.route-icon{font-size:25px;flex:0 0 auto}
.route-arrow{display:grid;place-items:center;font-size:30px;font-weight:900;color:#777}
.total-distance{margin:0 2px 12px;color:#7b7b7b;font-size:14px;font-weight:800}
.total-distance strong{color:#7BC7C0;font-size:17px}
.direction-block{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;margin:18px 0}
.direction-arrow{width:130px;height:130px;display:grid;place-items:center;border-radius:43% 57% 48% 52%/52% 46% 54% 48%;background:#ffdf68;font-size:92px;line-height:1;font-weight:900;box-shadow:0 10px 0 #e9c247;transform:rotate(-2deg);transition:.22s transform}
.instruction{font-size:clamp(22px,5.5vw,32px);line-height:1.1;font-weight:950}
.distance{margin-top:9px;color:#7BC7C0;font-size:24px;font-weight:900}
.nav-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 14px}
.quick-btn{min-height:72px;border:0;border-radius:18px 22px 17px 24px;background:#fff;box-shadow:var(--shadow);font-size:24px;padding:8px 4px}
.quick-btn span{display:block;font-size:10px;font-weight:900;margin-top:5px}
.resume-btn{width:100%;border:0;background:#fff1bc;border-radius:18px;padding:14px;font-weight:900;margin:0 0 14px}
.map-card{padding:0;overflow:hidden}
.map-card summary{list-style:none;padding:16px 18px;font-weight:900;cursor:pointer}
.map-card summary::-webkit-details-marker{display:none}
.map-wrap{background:#f3f3f3;overflow:auto;border-top:1px solid #eee;border-bottom:1px solid #eee}
#mapSvg{display:block;width:100%;min-width:680px;height:auto}
.map-legend{display:flex;gap:12px 18px;flex-wrap:wrap;padding:12px 18px;color:#7b7b7b;font-size:13px;font-weight:800}.scale-note{width:100%;font-size:12px;color:#888}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot.blue{background:#1273ea}.dot.orange{background:#ff7b00}
.finish-card{text-align:center;padding:34px 24px;background:linear-gradient(145deg,#fff,#fff2ca)}
.finish-mascot{font-size:48px}
.finish-badge{display:inline-block;margin:10px 0 16px;padding:8px 15px;border-radius:999px;background:#daf5df;color:#267a3d;font-weight:900}
.finish-card p{font-size:18px;color:#7b7b7b;line-height:1.45;margin-bottom:26px}
.modal{position:fixed;inset:0;background:rgba(123,123,123,.45);display:grid;place-items:end center;padding:14px;z-index:50}
.modal-card{width:min(720px,100%);background:#fff;border-radius:30px 30px 18px 18px;padding:24px;position:relative;box-shadow:0 24px 80px rgba(123,123,123,.30)}
.modal-close{position:absolute;right:14px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:#f3f3f3;font-size:28px}
.modal-choices{display:grid;gap:10px}
.modal-choice{border:0;background:#f7f7f8;border-radius:20px;padding:16px;text-align:left;font-weight:900;font-size:17px}
@media(max-width:560px){
  .app-shell{padding-bottom:24px}
  .topbar{padding:9px 10px}
  main{padding:10px}
  .card{padding:16px;border-radius:23px 18px 25px 17px}
  .start-grid,.destination-grid{grid-template-columns:1fr 1fr}
  .wobbly{min-height:96px;font-size:15px;padding:12px 8px}
  .big-icon{font-size:28px}
  .route-summary{grid-template-columns:1fr;gap:7px}.route-arrow{height:20px;transform:rotate(90deg);font-size:24px}.route-endpoint{padding:10px 12px}
  .direction-block{grid-template-columns:98px 1fr;gap:13px}
  .direction-arrow{width:98px;height:98px;font-size:70px}
  .nav-actions{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .quick-btn:nth-child(4),.quick-btn:nth-child(5){grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ===== v4: bear/footprints/arrow from Безымянный-2.pdf ===== */
.home-character{
  padding:10px 14px 14px;
  overflow:hidden;
  text-align:center;
  background:#ffffff;
}
.home-bear-hero{
  display:block;
  width:100%;
  height:auto;
  max-height:310px;
  object-fit:contain;
  object-position:center;
  border-radius:20px;
}
.where-pill{
  display:inline-block;
  max-width:94%;
  margin:8px auto 0;
  padding:9px 14px;
  border-radius:999px;
  background:#eef8f7;
  color:#7b7b7b;
  font-weight:850;
  font-size:14px;
}
.direction-arrow{
  width:130px;
  height:130px;
  border-radius:0;
  background:var(--arrow-color,#FFC928);
  box-shadow:none;
  filter:drop-shadow(0 7px 0 rgba(123,123,123,.12));
  -webkit-mask:url("assets/svg/arrow.svg") center / contain no-repeat;
  mask:url("assets/svg/arrow.svg") center / contain no-repeat;
  transform:rotate(0deg);
  transform-origin:center center;
}
#routeLine{
  stroke:#D5EDEB;
  stroke-width:9;
  opacity:.52;
}
.route-paw{
  pointer-events:none;
  transition:opacity .2s ease;
}
.paw-legend{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.paw-legend img{
  width:22px;
  height:22px;
  object-fit:contain;
}
@media(max-width:560px){
  .home-character{padding:8px 8px 12px}
  .home-bear-hero{max-height:230px}
  .where-pill{font-size:13px}
  .direction-arrow{width:98px;height:98px}
}


/* ===== v5: exact SVG assets supplied by the clinic ===== */
.clinic-brand{
  gap:10px;
  min-width:0;
}
.clinic-logo{
  display:block;
  width:132px;
  height:56px;
  object-fit:contain;
  flex:0 1 auto;
}
.navigator-word{
  color:#7b7b7b;
  font-size:20px;
  line-height:1;
  white-space:nowrap;
}
.infomat-pictogram{
  width:52px;
  height:52px;
  object-fit:contain;
  flex:0 0 auto;
}
.home-character{
  background:#fff;
  padding:8px 12px 14px;
}
.home-bear-hero{
  max-height:280px;
  width:100%;
  object-fit:contain;
  border-radius:0;
}
.direction-arrow{
  -webkit-mask:url("assets/svg/arrow.svg") center / contain no-repeat !important;
  mask:url("assets/svg/arrow.svg") center / contain no-repeat !important;
}
#routeLine{display:none!important}
.route-paw{pointer-events:none}
.paw-legend img{
  width:42px;
  height:34px;
  object-fit:contain;
}
.modal-choice-icon{
  width:52px;
  height:52px;
}
@media(max-width:620px){
  .topbar{grid-template-columns:44px minmax(0,1fr) 44px;gap:7px}
  .clinic-brand{gap:7px}
  .clinic-logo{width:104px;height:46px}
  .navigator-word{font-size:17px}
  .icon-btn{width:42px;height:42px;font-size:20px}
}
@media(max-width:400px){
  .clinic-logo{width:88px;height:41px}
  .navigator-word{font-size:15px}
}


/* SVG pictograms */
.svg-icon{
  display:block;
  object-fit:contain;
}
.big-svg-icon{
  width:54px;
  height:54px;
  flex:0 0 auto;
}
.quick-svg-icon{
  width:30px;
  height:30px;
  margin:0 auto 4px;
}


/* ===== v7: line route + navigation arrows ===== */
:root{
  --current:#7BC7C0;
  --goal:#EC6A40;
  --passed:#B8B8B8;
  --exit-red:#D94B43;
}

.home-bear-hero{
  max-height:225px !important;
  width:92% !important;
  margin:0 auto;
}
@media(max-width:560px){
  .home-bear-hero{
    max-height:185px !important;
    width:90% !important;
  }
}

/* Standard navigation-style pointer instead of the decorative arrow silhouette. */
.direction-arrow{
  width:112px !important;
  height:112px !important;
  background:var(--current) !important;
  -webkit-mask:none !important;
  mask:none !important;
  clip-path:polygon(50% 0%, 91% 100%, 50% 78%, 9% 100%);
  border-radius:0 !important;
  filter:drop-shadow(0 7px 0 rgba(123,123,123,.12));
  transform-origin:center center;
}
@media(max-width:560px){
  .direction-arrow{
    width:88px !important;
    height:88px !important;
  }
}

.dest-btn.exit{
  background:#fff4f2;
  border:2px solid rgba(217,75,67,.16);
}
.exit-word{
  color:var(--exit-red);
  font-size:27px;
  line-height:1;
  font-weight:950;
  letter-spacing:.035em;
}
.quick-exit{
  display:grid;
  place-items:center;
  background:#fff7f6;
}
.exit-word-small{
  color:var(--exit-red) !important;
  font-size:15px !important;
  line-height:1.05;
  font-weight:950 !important;
  letter-spacing:.025em;
}

.route-endpoint.from{
  background:#edf9f8;
  border:2px solid var(--current);
}
.route-endpoint.to{
  background:#fff0ea;
  border:2px solid var(--goal);
}
.total-distance strong,
.distance{
  color:var(--current) !important;
}

#routeLine{display:none!important}
#routeLineAhead,
#routeLinePassed{
  vector-effect:non-scaling-stroke;
}
.turn-arrow-disc{
  filter:drop-shadow(0 3px 3px rgba(123,123,123,.20));
}
.dot.current{background:var(--current)}
.dot.goal{background:var(--goal)}
.line-sample{
  display:inline-block;
  width:28px;
  height:0;
  border-top:5px solid;
  border-radius:999px;
  margin-right:7px;
  vertical-align:3px;
}
.line-sample.route{border-color:var(--current)}
.line-sample.passed{border-color:var(--passed)}
.turn-sample{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--goal);
  color:#fff;
  margin-right:6px;
  font-size:14px;
  font-weight:900;
}


/* ===== v8 refinements ===== */
.brand.clinic-brand{
  align-items:flex-start;
}
.navigator-word{
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.05em;
  margin-top:10px;
  color:#7b7b7b;
}
.clinic-logo{
  width:44px;
  height:auto;
  margin-top:2px;
}
.home-icon-btn{
  display:grid;
  place-items:center;
  padding:0;
}
.home-icon-img{
  width:27px;
  height:27px;
  object-fit:contain;
}
.home-bear-hero{
  max-height:168px !important;
  width:78% !important;
  margin:0 auto;
}
@media(max-width:560px){
  .navigator-word{
    margin-top:12px;
    font-size:16px;
  }
  .home-bear-hero{
    max-height:140px !important;
    width:74% !important;
  }
}

.finish-plane-bear{
  display:block;
  width:min(220px,68%);
  height:auto;
  margin:0 auto 10px;
}
.finish-badge{
  background:#fff0ea !important;
  color:#EC6A40 !important;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

#routeLineAhead,
#routeLinePassed{
  vector-effect:non-scaling-stroke;
}
#routeLineAhead{ stroke:#7BC7C0; }
#routeLinePassed{ stroke:#B8B8B8; }

.direction-arrow{
  width:104px !important;
  height:104px !important;
}
@media(max-width:560px){
  .direction-arrow{
    width:82px !important;
    height:82px !important;
  }
}

/* Keep map labels readable and closer to Gotham-like weight */
#mapSvg text{
  font-family:"Montserrat",Arial,sans-serif;
  font-weight:700;
}


/* ===== v10b: latest requested refinements ===== */
:root{
  --route-red:#E94B3C;
  --route-passed:#B8B8B8;
  --brand-pink:#E678A9;
}

/* Logo keeps its intended scale; NAVIGATOR is medium and slightly lower. */
.brand.clinic-brand{
  align-items:center !important;
  gap:12px !important;
}
.clinic-logo{
  width:124px !important;
  height:54px !important;
  margin-top:0 !important;
  object-fit:contain;
}
.navigator-word{
  font-size:21px !important;
  font-weight:500 !important;
  line-height:1 !important;
  margin-top:13px !important;
  letter-spacing:.055em !important;
  color:#7b7b7b !important;
}

/* Main bear smaller again. */
.home-bear-hero{
  max-height:118px !important;
  width:58% !important;
  margin:0 auto !important;
}

/* Exact user-provided speaker + pink home control. */
.home-icon-btn,.voice-icon-btn{
  position:relative;
  display:grid !important;
  place-items:center;
  padding:0 !important;
}
.home-icon-img{
  width:29px !important;
  height:29px !important;
  object-fit:contain;
}
.voice-icon-img{
  width:29px;
  height:29px;
  object-fit:contain;
}
.voice-slash{
  position:absolute;
  color:#E94B3C;
  font-size:36px;
  line-height:1;
  font-weight:800;
  transform:rotate(-12deg);
  pointer-events:none;
}

/* Top route cards use simple colored circles. */
.route-status-dot{
  width:23px;
  height:23px;
  border-radius:50%;
  flex:0 0 23px;
  box-shadow:0 0 0 5px rgba(255,255,255,.88);
}
.current-dot{ background:#7BC7C0; }
.goal-dot{ background:#EC6A40; }
.route-endpoint.from{
  border-color:#7BC7C0 !important;
  background:#f0fbfa !important;
}
.route-endpoint.to{
  border-color:#EC6A40 !important;
  background:#fff3ee !important;
}
.route-endpoint small{
  font-weight:600 !important;
  letter-spacing:.035em;
}

/* Red navigation arrow and thinner line. */
.direction-arrow{
  background:var(--route-red) !important;
}
#routeLineAhead{
  stroke:var(--route-red) !important;
  stroke-width:4 !important;
  vector-effect:non-scaling-stroke;
}
#routeLinePassed{
  stroke:var(--route-passed) !important;
  stroke-width:4 !important;
  vector-effect:non-scaling-stroke;
}
.line-sample.route{ border-color:var(--route-red) !important; }
.line-sample.passed{ border-color:var(--route-passed) !important; }
.turn-sample{ background:var(--route-red) !important; }

@media(max-width:620px){
  .clinic-logo{width:106px !important;height:48px !important}
  .navigator-word{font-size:17px !important;margin-top:12px !important}
  .home-bear-hero{max-height:104px !important;width:54% !important}
}
@media(max-width:400px){
  .clinic-logo{width:94px !important;height:44px !important}
  .navigator-word{font-size:15px !important;margin-top:11px !important}
  .home-bear-hero{max-height:96px !important;width:52% !important}
}


/* ===== v10d icon size adjustment ===== */
/* Infomat: 52 / 1.5 ≈ 35 px */
.infomat-pictogram{
  width:35px !important;
  height:35px !important;
}

/* Registry: 52 × 1.5 = 78 px */
.registry-pictogram{
  width:78px !important;
  height:78px !important;
}


/* ===== v10e: route title and repeat button ===== */
.route-title-wrap{
  display:flex;
  align-items:center;
  gap:11px;
}
.route-title-steps{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 auto;
}
.repeat-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.repeat-speaker-icon{
  width:27px;
  height:27px;
  object-fit:contain;
}
@media(max-width:560px){
  .route-title-steps{
    width:41px;
    height:41px;
  }
}


/* ===== v11: simplified child navigator ===== */
.nav-destination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px 20px;
  margin-bottom:12px;
}
.nav-destination h1{
  margin:0;
  font-size:clamp(27px,6vw,38px);
  line-height:1.05;
  font-weight:700;
  color:#7b7b7b;
}
.progress-pill{
  flex:0 0 auto;
  background:#f3f3f3;
  color:#7b7b7b;
  font-weight:600;
  padding:8px 12px;
}

.nav-map-card{
  padding:0 !important;
  overflow:hidden;
  margin-bottom:12px;
}
.nav-map-wrap{
  position:relative;
  overflow:hidden !important;
  min-height:340px;
  background:#fff;
}
#mapSvg{
  display:block;
  width:100%;
  height:340px;
  min-width:0 !important;
  transition:none;
}
.map-overview-btn{
  position:absolute;
  right:12px;
  bottom:12px;
  border:0;
  border-radius:18px;
  padding:10px 14px;
  background:rgba(255,255,255,.94);
  color:#7b7b7b;
  font-weight:600;
  box-shadow:0 5px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(6px);
}

.instruction-card{
  margin-bottom:12px;
  padding:16px 18px 18px;
}
.simple-direction{
  margin:0 0 14px;
  grid-template-columns:96px 1fr;
  gap:16px;
}
.simple-direction .direction-arrow{
  width:88px !important;
  height:88px !important;
  background:#E94B3C !important;
}
.instruction-copy{
  min-width:0;
}
.instruction{
  font-size:clamp(25px,6vw,34px);
  font-weight:700;
  text-transform:uppercase;
  color:#7b7b7b;
}
.distance{
  margin-top:4px;
  color:#E94B3C !important;
  font-size:29px;
  font-weight:700;
}
.simple-actions{
  grid-template-columns:1fr 1.4fr;
}
.repeat-action{
  min-height:60px;
}
.repeat-speaker-icon{
  width:26px;
  height:26px;
}
.child-quick-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:9px;
}
.child-quick-grid .quick-btn{
  min-height:76px;
}
.more-dots{
  display:block;
  font-size:27px;
  line-height:.7;
  color:#7BC7C0;
  letter-spacing:2px;
  margin-bottom:8px;
  font-weight:700;
}

/* Map markers and route are deliberately minimal. */
#routeLineAhead{
  stroke:#E94B3C !important;
  stroke-width:4 !important;
  vector-effect:non-scaling-stroke;
}
#routeLinePassed{
  stroke:#B8B8B8 !important;
  stroke-width:4 !important;
  vector-effect:non-scaling-stroke;
}
.turn-marker{
  transition:opacity .18s ease;
}
.turn-arrow-disc{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
}

/* Remove old duplicated navigation UI if stale rules leak through. */
.route-summary,.total-distance,.map-legend,.route-title-steps,.eyebrow{
  display:none !important;
}

@media(max-width:560px){
  .nav-map-wrap{min-height:310px}
  #mapSvg{height:310px}
  .simple-direction{grid-template-columns:82px 1fr;gap:13px}
  .simple-direction .direction-arrow{width:76px !important;height:76px !important}
  .simple-actions{grid-template-columns:1fr}
}


/* ===== v12: cleaner finish screen ===== */
.finish-card{
  padding-top:28px !important;
  padding-bottom:30px !important;
}
.finish-plane-bear{
  width:min(205px,62%) !important;
  margin-bottom:8px !important;
}
.finish-badge{
  background:transparent !important;
  color:#EC6A40 !important;
  font-size:clamp(22px,5vw,30px) !important;
  font-weight:700 !important;
  line-height:1.08;
  padding:0 !important;
  margin:6px 0 12px !important;
  letter-spacing:.02em !important;
}
.finish-card #finishTitle{
  color:#7b7b7b;
  margin:0 0 24px !important;
  font-weight:700;
}
.finish-card #finishHomeBtn{
  min-width:min(320px,100%);
  margin:0 auto;
}


/* ===== v13: button typography ===== */
/* Slightly smaller final "НА ГЛАВНУЮ" text. */
.finish-card #finishHomeBtn{
  font-size:18px !important;
}

/* "ПОКАЗАТЬ ПУТЬ" matches the same font size as "НА ГЛАВНУЮ". */
.route-start-action{
  font-size:18px !important;
  text-transform:uppercase;
  font-weight:900;
}


/* ===== v14: infomat cards + rounded destination cards ===== */

/* Both infomat plaques use the exact peach color from the supplied Home icon. */
.start-btn.infomat-card,
.start-btn.alt.infomat-card{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  background:#F7BA9A !important;
  transform:none !important;
  border-radius:28px !important;
  padding:18px 14px !important;
  overflow:hidden;
}

/* The infomat icon sits in the same position on both cards:
   14 px from the top and 14 px from the right edge. */
.infomat-card .infomat-pictogram{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:35px !important;
  height:35px !important;
  margin:0 !important;
}

/* Text is centered against the entire plaque, independently of the icon. */
.infomat-card .infomat-label{
  width:100%;
  display:block;
  text-align:center;
  line-height:1.18;
  padding:10px 25px 0;
}
.infomat-card .infomat-label small{
  display:block;
  margin-top:6px;
  text-align:center;
}

/* On the cabinet/destination page all destination plaques have clean,
   identical rounding instead of different irregular corner shapes. */
.destination-grid .dest-btn,
.destination-grid .dest-btn.toilet,
.destination-grid .dest-btn.exit,
.destination-grid .dest-btn.registry,
.destination-grid .dest-btn.feeding,
.destination-grid .dest-btn.bio{
  border-radius:28px !important;
  transform:none !important;
}

/* The cabinet selection card follows the same softer rounded language. */
.room-card{
  border-radius:28px !important;
}

@media(max-width:560px){
  .infomat-card .infomat-pictogram{
    top:12px !important;
    right:12px !important;
  }
  .infomat-card .infomat-label{
    padding-left:20px;
    padding-right:20px;
  }
  .destination-grid .dest-btn{
    border-radius:24px !important;
  }
}


/* ===== v15: infomat colors + feeding icon ===== */

/* Infomat 1: restore the soft translucent-looking green plaque. */
.start-btn.infomat-card[data-start="i1"]{
  background:#dff7ef !important;
}

/* Infomat 2: only the right plaque gets a soft translucent red tint,
   matching the gentle visual density of the registry plaque. */
.start-btn.infomat-card[data-start="i2"]{
  background:rgba(236,106,64,.18) !important;
}

/* Feeding pictogram on the destination-selection page
   matches the enlarged registry pictogram. */
.feeding-pictogram{
  width:78px !important;
  height:78px !important;
}


/* ===== v16 ===== */
.repeat-action{color:#7b7b7b !important;}

.room-chip[data-room="1"]{background:#C1DDB6 !important;}

.room-chip[data-room="2"],
.room-chip[data-room="3"],
.room-chip[data-room="4"],
.room-chip[data-room="7"]{background:#AAD8D4 !important;}

.room-chip[data-room="5"],
.room-chip[data-room="6"]{background:#BCD9F3 !important;}

.room-chip[data-room="8"]{background:#F1DEB3 !important;}

.room-chip[data-room="9"],
.room-chip[data-room="10"],
.room-chip[data-room="11"],
.room-chip[data-room="12"],
.room-chip[data-room="13"]{background:#F7BA9A !important;}

.room-chip{color:#7b7b7b !important;}


/* ===== v17: route toilet plaque + bear plaque tint ===== */

/* На экране маршрута плашка «Туалет» повторяет цвет страницы выбора маршрута. */
.child-quick-grid .quick-btn[data-special="toilet"]{
  background:#FFE8CF !important;
  color:#7b7b7b !important;
}
.child-quick-grid .quick-btn[data-special="toilet"] span{
  color:#7b7b7b !important;
}

/* Плашка с медведем: 50% тонировка бежевым цветом фоновой подложки (#FFF9F1). */
.home-character{
  background:rgba(255,249,241,.50) !important;
}


/* ===== v18: room colors at 50% opacity ===== */
.room-chip[data-room="1"]{
  background:rgba(193,221,182,.50) !important; /* #C1DDB6 */
}

.room-chip[data-room="2"],
.room-chip[data-room="3"],
.room-chip[data-room="4"],
.room-chip[data-room="7"]{
  background:rgba(170,216,212,.50) !important; /* #AAD8D4 */
}

.room-chip[data-room="5"],
.room-chip[data-room="6"]{
  background:rgba(188,217,243,.50) !important; /* #BCD9F3 */
}

.room-chip[data-room="8"]{
  background:rgba(241,222,179,.50) !important; /* #F1DEB3 */
}

.room-chip[data-room="9"],
.room-chip[data-room="10"],
.room-chip[data-room="11"],
.room-chip[data-room="12"],
.room-chip[data-room="13"]{
  background:rgba(247,186,154,.50) !important; /* #F7BA9A */
}


/* ===== v24: stable Gotham Pro typography on mobile ===== */
:root{
  --app-font:"Montserrat",Arial,sans-serif;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
option{
  font-family:var(--app-font) !important;
}

button,
input,
select,
textarea{
  font:inherit !important;
  font-family:var(--app-font) !important;
}

h1,h2,h3,h4,h5,h6,
p,span,small,strong,b,label,
.start-btn,.room-chip,.dest-btn,.quick-btn,
.primary-action,.secondary-action,.link-btn,.resume-btn,
.instruction,.distance,.progress-pill,.finish-badge,
.navigator-word,.infomat-label{
  font-family:var(--app-font) !important;
}

body{
  font-synthesis:none;
}


/* ===== v25: Montserrat + mobile-first header/footer ===== */
:root{
  --app-font:"Montserrat",Arial,sans-serif;
}

html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
option{
  font-family:var(--app-font) !important;
}

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

/* Let the footer logo naturally sit at the bottom of short phone screens. */
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:0 !important;
}
main{
  flex:1 0 auto;
}

/* Cleaner header: only NAVIGATOR in the center. */
.topbar{
  grid-template-columns:52px minmax(0,1fr) 52px !important;
}
.clinic-brand{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:center !important;
  margin:0 !important;
}
.navigator-word{
  width:100%;
  margin:0 !important;
  text-align:center;
  font-family:var(--app-font) !important;
  font-size:29px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
  color:#7b7b7b !important;
}

/* Logo is now placed below the current page content. */
.app-footer{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
}
.footer-clinic-logo{
  display:block;
  width:150px;
  max-width:46vw;
  height:auto;
  object-fit:contain;
}

/* Old header-logo rules can no longer affect layout. */
.topbar .clinic-logo{
  display:none !important;
}

/* Child-facing wording block. */
#startChooser > h2{
  text-align:center;
}
.where-pill{
  font-family:var(--app-font) !important;
}

/* Phone proportions. */
@media(max-width:620px){
  .topbar{
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    padding:10px 10px !important;
  }
  .navigator-word{
    font-size:25px !important;
    letter-spacing:.06em !important;
  }
  .footer-clinic-logo{
    width:132px;
    max-width:48vw;
  }
  .app-footer{
    padding-top:17px;
    padding-bottom:calc(17px + env(safe-area-inset-bottom));
  }
}

@media(max-width:400px){
  .navigator-word{
    font-size:22px !important;
    letter-spacing:.045em !important;
  }
  .footer-clinic-logo{
    width:120px;
  }
}


/* ===== v26: Montserrat weight normalization ===== */

/* Обычный текст: Normal вместо Thin/Light. */
body,
p,
span,
small,
label,
input,
select,
textarea,
option,
.infomat-label,
.where-pill,
.distance,
.progress-pill{
  font-weight:400 !important;
}

/* Заголовки и акцентные элементы: Medium вместо Bold/Black. */
h1,h2,h3,h4,h5,h6,
button,
.start-btn,
.room-chip,
.dest-btn,
.quick-btn,
.primary-action,
.secondary-action,
.resume-btn,
.navigator-word,
.instruction,
.finish-badge,
.exit-word-small{
  font-weight:500 !important;
}

/* Убираем любые более тяжёлые веса, которые могли остаться в старых стилях. */
strong,
b{
  font-weight:500 !important;
}

/* «ЗАКОНЧИТЬ МАРШРУТ» — нейтральный серый. */
#stopRouteBtn{
  color:#7B7B7B !important;
  font-weight:400 !important;
}


/* ===== v27: bold key labels + room modal ===== */

/* Всплывающая плашка выбора кабинета. */
.choice-modal .modal-card,
.choice-modal .choice-card,
#choiceModal .modal-card,
#choiceModal .choice-card{
  background:#F7BA9A !important;
}

/* Заголовок всплывающей плашки. */
#choiceModal h2,
#choiceModal h3,
#choiceModal .modal-title,
#choiceModal .choice-title{
  font-weight:700 !important;
  color:#7B7B7B !important;
}

/* Bold — только для указанных пользователем элементов. */
#startChooser > h2,
.start-btn .infomat-label,
.start-btn[data-start="registry"],
.route-start-action,
.room-chip,
#nextStepBtn,
#destTitle,
#distanceText{
  font-weight:700 !important;
}

/* Если названия стартовых точек лежат прямо в span. */
.start-btn > span:not(.infomat-pictogram),
.start-btn .infomat-label{
  font-weight:700 !important;
}

/* Точка назначения на карточках/маршруте. */
.nav-destination h1,
.destination-title,
.target-title,
#finishTitle{
  font-weight:700 !important;
}

/* Расстояние на маршруте. */
.distance,
#distanceText{
  font-weight:700 !important;
}


/* ===== v28: larger clinic logo ===== */
.footer-clinic-logo{
  width:255px !important;
  max-width:72vw !important;
  transform:translateY(-8px);
}

.app-footer{
  padding-top:10px !important;
}

@media(max-width:620px){
  .footer-clinic-logo{
    width:220px !important;
    max-width:68vw !important;
    transform:translateY(-7px);
  }
  .app-footer{
    padding-top:8px !important;
  }
}

@media(max-width:400px){
  .footer-clinic-logo{
    width:205px !important;
    max-width:70vw !important;
    transform:translateY(-6px);
  }
}


/* ===== v29: exit, room-number placeholder, current-status weight ===== */

/* «ВЫХОД» — Bold на странице выбора и на маршруте. */
.exit-word,
.exit-word-small{
  font-weight:700 !important;
}

/* Символ № в поле номера кабинета — строго по центру плашки. */
#roomInput{
  text-align:center !important;
  padding-left:0 !important;
  padding-right:0 !important;
  -moz-appearance:textfield;
  appearance:textfield;
}

#roomInput::placeholder{
  text-align:center !important;
  color:#7B7B7B;
  opacity:1;
  font-weight:500;
}

/* Убираем стрелки number-input, чтобы визуальный центр не смещался. */
#roomInput::-webkit-inner-spin-button,
#roomInput::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Поле «Сейчас: ...» — заметно плотнее, но не Black. */
#whereText.is-current-status{
  font-weight:600 !important;
}


/* ===== v30: status/progress weight + optical logo centering ===== */

/* И стартовая подсказка, и статус «Сейчас: ...» — один стиль. */
#whereText,
#whereText.is-current-status{
  font-weight:600 !important;
}

/* «1 из 3» / прогресс маршрута — плотнее. */
.progress-pill,
#progressText{
  font-weight:600 !important;
}

/*
  Оптическое центрирование логотипа:
  центрируем не по полной ширине SVG, а визуально по слову «детская».
  Поэтому логотип слегка смещён влево.
*/
.footer-clinic-logo{
  transform:translate(-14px,-8px) !important;
}

@media(max-width:620px){
  .footer-clinic-logo{
    transform:translate(-12px,-7px) !important;
  }
}

@media(max-width:400px){
  .footer-clinic-logo{
    transform:translate(-10px,-6px) !important;
  }
}


/* ===== v31: final home button weight ===== */
#finishHomeBtn{
  font-weight:700 !important;
}


/* ===== v32: ticket room card bold ===== */
/* «Кабинет» и номер рядом с кнопкой «ПОКАЗАТЬ ПУТЬ». */
.room-card,
.room-card label,
.room-card .room-label,
#roomInput{
  font-weight:700 !important;
}


/* ===== v33: status plaque + stronger optical logo shift ===== */

/* Плашка «Сначала выбери, где ты сейчас» / «Сейчас: ...». */
#whereText{
  background:#EC6A40 !important;
  color:#FFFFFF !important;
  font-weight:600 !important;
}

/* На случай, если внутренние элементы наследуют старый цвет. */
#whereText *,
.where-pill,
.where-pill *{
  color:#FFFFFF !important;
}

/* Ещё сильнее сдвигаем логотип влево для визуального центра по слову «детская». */
.footer-clinic-logo{
  transform:translate(-26px,-8px) !important;
}

@media(max-width:620px){
  .footer-clinic-logo{
    transform:translate(-23px,-7px) !important;
  }
}

@media(max-width:400px){
  .footer-clinic-logo{
    transform:translate(-20px,-6px) !important;
  }
}


/* ===== v34: bear typography, mobile logo position, room3/feeding fix ===== */

/* Текст на плашке с Мишкой — строго Montserrat Bold, без засечек. */
.home-character,
.home-character *,
.hero-copy,
.hero-copy *,
.bear-card,
.bear-card *,
.character-card,
.character-card *{
  font-family:"Montserrat",Arial,sans-serif !important;
}

.home-character,
.home-character *,
.hero-copy,
.hero-copy *,
.bear-card,
.bear-card *,
.character-card,
.character-card *{
  font-weight:700 !important;
  font-style:normal !important;
}

/* На телефоне логотип поднимаем выше, чтобы он не выходил за нижний край. */
@media(max-width:620px){
  .app-footer{
    padding-top:0 !important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    transform:translateY(-18px);
  }

  .footer-clinic-logo{
    transform:translate(-23px,-12px) !important;
  }
}

/* На узких телефонах поднимаем ещё немного. */
@media(max-width:400px){
  .app-footer{
    transform:translateY(-24px);
    padding-bottom:calc(6px + env(safe-area-inset-bottom)) !important;
  }

  .footer-clinic-logo{
    transform:translate(-20px,-14px) !important;
  }
}

/* На финальном экране даём чуть меньше нижнего воздуха,
   чтобы логотип был виден целиком. */
#finishScreen{
  padding-bottom:8px !important;
}


/* ===== v35: mobile safe zone for infomat icon/text ===== */
@media(max-width:620px){

  /* Чуть выше плашки, чтобы текст и пиктограмма не конфликтовали. */
  .start-btn.infomat-card{
    min-height:108px !important;
    padding-top:16px !important;
    padding-bottom:14px !important;
  }

  /* На телефоне пиктограмма чуть компактнее. */
  .infomat-card .infomat-pictogram{
    width:29px !important;
    height:29px !important;
    top:12px !important;
    right:12px !important;
  }

  /*
    Симметричная безопасная зона слева/справа.
    Текст остаётся по центру всей плашки, но не может залезть под иконку.
  */
  .infomat-card .infomat-label{
    box-sizing:border-box;
    width:100% !important;
    padding-left:56px !important;
    padding-right:56px !important;
    padding-top:14px !important;
    text-align:center !important;
    transform:translateY(4px);
  }

  .infomat-card .infomat-label small{
    display:block;
    margin-top:5px;
    text-align:center !important;
  }
}

@media(max-width:400px){
  .start-btn.infomat-card{
    min-height:104px !important;
  }

  .infomat-card .infomat-pictogram{
    width:28px !important;
    height:28px !important;
    top:11px !important;
    right:11px !important;
  }

  .infomat-card .infomat-label{
    padding-left:52px !important;
    padding-right:52px !important;
    padding-top:13px !important;
    transform:translateY(4px);
  }
}


/* ===== v36: bear greeting always Montserrat on mobile ===== */
.bear-visual-wrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.bear-visual-wrap .home-bear-hero{
  display:block;
  position:relative;
  z-index:1;
}

.bear-greeting{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  transform:translate(23%,-45%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  white-space:nowrap;

  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  font-style:normal !important;
  color:#7B7B7B !important;
  text-align:center;
  line-height:1.12;
  font-size:clamp(13px,2.1vw,21px);
}

.bear-greeting span{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  font-style:normal !important;
  color:#7B7B7B !important;
}

/* On phones we position the greeting independently from SVG font rendering. */
@media(max-width:620px){
  .bear-greeting{
    transform:translate(21%,-46%);
    font-size:15px !important;
    line-height:1.1;
  }
}

@media(max-width:400px){
  .bear-greeting{
    transform:translate(19%,-46%);
    font-size:14px !important;
  }
}


/* ===== v37: exact bear-plaque overlay + corrected route branch ===== */

/*
  В v36 текст позиционировался относительно всей карточки,
  хотя Мишка на телефоне занимает только 52–54% ширины.
  Теперь wrapper имеет ровно ширину картинки, поэтому текст
  остаётся на плашке на iPhone и Android.
*/
.bear-visual-wrap{
  position:relative !important;
  width:100% !important;
  margin:0 auto !important;
  display:block !important;
}

.bear-visual-wrap .home-bear-hero{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  position:relative !important;
  z-index:1 !important;
}

/* Контейнер надписи охватывает именно изображение Мишки. */
.bear-greeting{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  transform:none !important;
  display:block !important;
  pointer-events:none !important;

  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  font-style:normal !important;
  color:#FFFFFF !important;
  line-height:1 !important;
  text-align:center !important;
}

/*
  Позиции повторяют область исходной плашки внутри bear.svg,
  но надпись немного сдвинута левее и выше, как запрошено.
*/
.bear-greeting span{
  position:absolute !important;
  display:block !important;
  width:max-content !important;
  max-width:48% !important;
  white-space:nowrap !important;

  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  font-style:normal !important;
  color:#FFFFFF !important;
  text-shadow:none !important;
}

.bear-greeting span:first-child{
  left:66% !important;
  top:14% !important;
  transform:translateX(-50%) !important;
}

.bear-greeting span:last-child{
  left:66% !important;
  top:35% !important;
  transform:translateX(-50%) !important;
}

/* Телефон: wrapper ровно той же ширины, что раньше занимал сам SVG. */
@media(max-width:620px){
  .bear-visual-wrap{
    width:54% !important;
    max-width:54% !important;
  }

  .bear-visual-wrap .home-bear-hero{
    width:100% !important;
    max-height:104px !important;
  }

  .bear-greeting span{
    font-size:11px !important;
    letter-spacing:0 !important;
  }

  .bear-greeting span:first-child{
    left:64% !important;
    top:10% !important;
  }

  .bear-greeting span:last-child{
    left:64% !important;
    top:31% !important;
  }
}

@media(max-width:400px){
  .bear-visual-wrap{
    width:52% !important;
    max-width:52% !important;
  }

  .bear-visual-wrap .home-bear-hero{
    width:100% !important;
    max-height:96px !important;
  }

  .bear-greeting span{
    font-size:10px !important;
  }

  .bear-greeting span:first-child{
    left:63% !important;
    top:9% !important;
  }

  .bear-greeting span:last-child{
    left:63% !important;
    top:30% !important;
  }
}


/* ===== v38: modal colors, footer per screen, remove resume ===== */

/* 1. Invalid room number: custom red plaque with white text. */
#choiceModal.room-number-notice .modal-card{
  background:#EC6A40 !important;
}

#choiceModal.room-number-notice #modalTitle{
  color:#FFFFFF !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:700 !important;
  text-align:center;
  padding:12px 40px 10px;
  margin:0;
}

#choiceModal.room-number-notice #modalChoices{
  display:none !important;
}

#choiceModal.room-number-notice .modal-close{
  color:#FFFFFF !important;
  background:rgba(255,255,255,.18) !important;
}

/* 5. Text in all normal choice sheets: gray #7b7b7b. */
#choiceModal:not(.room-number-notice) #modalTitle,
#choiceModal:not(.room-number-notice) .modal-choice,
#choiceModal:not(.room-number-notice) .modal-choice strong,
#choiceModal:not(.room-number-notice) .modal-choice small,
#choiceModal:not(.room-number-notice) .modal-choice span{
  color:#7B7B7B !important;
}

/* 4. The resume button is intentionally removed. */
#resumeBtn{
  display:none !important;
}

/*
  2,3,6. Mobile footer position is screen-specific:
  - main/start page: higher so it fits the viewport;
  - cabinet/destination selection: lower so it clears "Изменить точку старта";
  - route: lower so it clears "Закончить маршрут";
  - finish: higher so it fits the viewport.
*/
@media(max-width:620px){
  body[data-screen="home"][data-home-mode="start"] .app-footer{
    transform:translateY(-34px) !important;
  }

  body[data-screen="home"][data-home-mode="destination"] .app-footer{
    transform:translateY(10px) !important;
  }

  body[data-screen="nav"] .app-footer{
    transform:translateY(12px) !important;
  }

  body[data-screen="finish"] .app-footer{
    transform:translateY(-34px) !important;
  }
}

@media(max-width:400px){
  body[data-screen="home"][data-home-mode="start"] .app-footer{
    transform:translateY(-40px) !important;
  }

  body[data-screen="home"][data-home-mode="destination"] .app-footer{
    transform:translateY(12px) !important;
  }

  body[data-screen="nav"] .app-footer{
    transform:translateY(14px) !important;
  }

  body[data-screen="finish"] .app-footer{
    transform:translateY(-40px) !important;
  }
}

/* ===== v62: ONE fixed-design mobile layout for every phone ===== */

/* Font: one family everywhere. */
:root{
  --app-font:"Montserrat",Arial,sans-serif;
}

html.mobile-ui,
html.mobile-ui body,
html.mobile-ui body *,
html.mobile-ui button,
html.mobile-ui input,
html.mobile-ui select,
html.mobile-ui textarea{
  font-family:var(--app-font) !important;
  font-style:normal !important;
}

html.mobile-ui{
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

html.mobile-ui body{
  margin:0 !important;
  overflow-x:hidden !important;
  background:#fff9f1 !important;
}

/* Outer frame gets physical phone width from JS.
   Inner shell is ALWAYS the same 390px design. */
html.mobile-ui #deviceFrame{
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

html.mobile-ui .app-shell{
  width:390px !important;
  max-width:390px !important;
  min-width:390px !important;
  min-height:100vh !important;
  padding:10px 14px 14px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  background:#fff9f1 !important;
}

/* Header plaque = exact width of content. */
html.mobile-ui .topbar{
  width:100% !important;
  min-height:54px !important;
  margin:0 0 12px !important;
  padding:6px 8px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  gap:8px !important;
  align-items:center !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
}

html.mobile-ui .icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:7px !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

html.mobile-ui .home-icon-img,
html.mobile-ui .voice-icon-img{
  width:27px !important;
  height:27px !important;
  pointer-events:none !important;
}

html.mobile-ui .navigator-word{
  margin:0 !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.045em !important;
  white-space:nowrap !important;
  text-align:center !important;
}

html.mobile-ui main{
  width:100% !important;
  min-width:0 !important;
  flex:1 0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

html.mobile-ui .screen,
html.mobile-ui .screen.active{
  width:100% !important;
  min-width:0 !important;
}

html.mobile-ui .card{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  border-radius:24px !important;
}

/* Bear / greeting card */
html.mobile-ui .home-character.card{
  padding:14px 15px 16px !important;
  margin-bottom:13px !important;
}

html.mobile-ui .bear-visual-wrap,
html.mobile-ui .home-bear-hero{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  pointer-events:none !important;
}

html.mobile-ui #whereText{
  display:flex !important;
  width:fit-content !important;
  max-width:92% !important;
  min-height:38px !important;
  margin:8px auto 0 !important;
  padding:8px 16px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#EC6A40 !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* Where are you */
html.mobile-ui #startChooser{
  padding:18px !important;
}

html.mobile-ui #startChooser > h2{
  margin:0 0 16px !important;
  font-size:23px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

html.mobile-ui .start-grid{
  gap:12px !important;
}

html.mobile-ui .start-btn.infomat-card,
html.mobile-ui .start-btn.alt.infomat-card{
  min-height:120px !important;
  padding:16px !important;
}

html.mobile-ui .infomat-card .infomat-pictogram{
  width:31px !important;
  height:31px !important;
  top:12px !important;
  right:12px !important;
  pointer-events:none !important;
}

html.mobile-ui .infomat-card .infomat-label{
  width:100% !important;
  padding:17px 54px 0 !important;
  transform:none !important;
  text-align:center !important;
  font-size:19px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  box-sizing:border-box !important;
}

html.mobile-ui .infomat-card .infomat-label small{
  display:block !important;
  margin-top:7px !important;
  font-size:14px !important;
  line-height:1.08 !important;
  font-weight:500 !important;
}

html.mobile-ui .start-btn.reg{
  min-height:94px !important;
  padding:14px 16px !important;
  font-size:19px !important;
  font-weight:700 !important;
}

/* Cabinet selection */
html.mobile-ui #destinationPanel{
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
}

html.mobile-ui .room-card{
  padding:18px !important;
  margin-bottom:13px !important;
}

html.mobile-ui .room-card h2{
  margin:0 0 14px !important;
  font-size:23px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

html.mobile-ui .room-input-row{
  display:grid !important;
  grid-template-columns:82px minmax(0,1fr) !important;
  gap:9px !important;
  width:100% !important;
}

html.mobile-ui #roomInput,
html.mobile-ui #goRoomBtn{
  min-width:0 !important;
  height:54px !important;
  min-height:54px !important;
  box-sizing:border-box !important;
  font-size:18px !important;
  font-weight:700 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Two PHYSICAL rows: row 1 = 1..7, row 2 = 8..13. */
html.mobile-ui #roomChips{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  gap:8px !important;
  margin-top:14px !important;
  overflow:visible !important;
}

html.mobile-ui .room-chip-line{
  display:grid !important;
  width:100% !important;
  gap:7px !important;
  margin:0 !important;
  overflow:visible !important;
}

html.mobile-ui .room-chip-line:first-child{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}

html.mobile-ui .room-chip-line:last-child{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}

html.mobile-ui .room-chip{
  width:100% !important;
  min-width:0 !important;
  height:54px !important;
  min-height:54px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:15px !important;
  font-size:19px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

/* Destination cards */
html.mobile-ui .destination-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:11px !important;
}

html.mobile-ui .dest-btn{
  min-width:0 !important;
  min-height:112px !important;
  padding:14px !important;
  box-sizing:border-box !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

html.mobile-ui .dest-btn strong,
html.mobile-ui .dest-btn .dest-title,
html.mobile-ui .dest-btn > span{
  font-size:17px !important;
  line-height:1.12 !important;
}

html.mobile-ui .dest-btn small,
html.mobile-ui .dest-btn .dest-sub{
  font-size:13px !important;
  line-height:1.08 !important;
}

html.mobile-ui #changeStartBtn{
  min-height:46px !important;
  margin-top:7px !important;
  padding:10px 4px !important;
  font-size:15px !important;
}

/* Route */
html.mobile-ui .nav-destination{
  padding:16px 17px !important;
  margin-bottom:11px !important;
}

html.mobile-ui .nav-destination h1{
  font-size:27px !important;
  line-height:1.1 !important;
}

html.mobile-ui .progress-pill,
html.mobile-ui #progressText{
  padding:8px 10px !important;
  font-size:15px !important;
}

html.mobile-ui .nav-map-wrap{
  min-height:285px !important;
}

html.mobile-ui #mapSvg{
  height:285px !important;
}

html.mobile-ui .instruction-card{
  padding:17px 17px 18px !important;
}

html.mobile-ui .simple-direction{
  display:grid !important;
  grid-template-columns:86px minmax(0,1fr) !important;
  gap:13px !important;
  align-items:center !important;
}

html.mobile-ui .simple-direction .direction-arrow{
  width:80px !important;
  height:80px !important;
}

html.mobile-ui #instructionText{
  font-size:25px !important;
  line-height:1.04 !important;
}

html.mobile-ui #distanceText{
  font-size:28px !important;
  font-weight:700 !important;
}

html.mobile-ui .simple-actions{
  gap:9px !important;
}

html.mobile-ui .simple-actions button{
  min-height:62px !important;
  padding:11px !important;
  font-size:17px !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

html.mobile-ui .child-quick-grid{
  gap:8px !important;
}

html.mobile-ui .child-quick-grid .quick-btn{
  min-height:80px !important;
  padding:9px !important;
  font-size:14px !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

html.mobile-ui #stopRouteBtn{
  min-height:44px !important;
  padding:9px 4px !important;
  font-size:15px !important;
}

/* Finish */
html.mobile-ui .finish-card{
  padding:22px 19px 24px !important;
}

html.mobile-ui .finish-plane-bear{
  width:225px !important;
  max-width:225px !important;
}

html.mobile-ui .finish-badge{
  font-size:25px !important;
  line-height:1.08 !important;
}

html.mobile-ui #finishTitle{
  font-size:29px !important;
}

html.mobile-ui #finishHomeBtn{
  min-height:62px !important;
  font-size:19px !important;
  font-weight:700 !important;
}

/* Logo in normal flow, same place on iPhone and Android. */
html.mobile-ui .app-footer{
  position:static !important;
  width:100% !important;
  min-height:86px !important;
  margin:8px 0 0 !important;
  padding:8px 0 !important;
  transform:none !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}

html.mobile-ui .footer-clinic-logo{
  width:185px !important;
  max-width:185px !important;
  height:auto !important;
  transform:translateX(-12px) !important;
  pointer-events:none !important;
}

/* Modal is outside visual scaling semantics only through its own fixed design. */
html.mobile-ui .modal{
  font-family:var(--app-font) !important;
}

html.mobile-ui .modal-card{
  width:360px !important;
  max-width:360px !important;
  border-radius:26px 26px 18px 18px !important;
  padding:20px !important;
}

html.mobile-ui .modal-choice{
  min-height:60px !important;
  font-size:17px !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}


/* ===== v63: logo closer + compact status pill ===== */

/*
  v62 finally has the correct phone scale.
  The logo was far below because the fixed 390px design shell was still forced
  to at least 100vh of the browser's CSS viewport before scaling.
  On some Android browsers that viewport is much taller than the visible phone.
  Let the mobile shell use its real content height instead.
*/
html.mobile-ui .app-shell{
  min-height:0 !important;
  height:auto !important;
}

/* Keep the logo immediately after the current page content. */
html.mobile-ui .app-footer{
  min-height:68px !important;
  margin-top:2px !important;
  padding-top:2px !important;
  padding-bottom:4px !important;
}

/* Slightly raise the logo optically without overlapping controls. */
html.mobile-ui .footer-clinic-logo{
  transform:translate(-12px,-6px) !important;
}

/* Smaller orange status plaque under the bear. */
html.mobile-ui #whereText{
  min-height:30px !important;
  margin-top:5px !important;
  padding:5px 13px !important;
  font-size:13px !important;
  line-height:1.08 !important;
}

/* Keep current-status and initial-status identical in size. */
html.mobile-ui #whereText.is-current-status{
  min-height:30px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}


/* ===== v64: sticky navigator header + equal room-chip widths ===== */

/*
  Keep the navigator plaque visible while the user scrolls.
  It stays inside the same 390px mobile design, so iPhone/Android retain
  the successful v62/v63 proportions.
*/
html.mobile-ui .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  margin-bottom:12px !important;
  background:#FFF9F1 !important;
}

/* A little breathing room/shadow while the header floats over content. */
html.mobile-ui .topbar::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:-7px;
  height:7px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(58,45,30,.08),
    rgba(58,45,30,0)
  );
}

/*
  Both cabinet rows use the SAME seven-column grid.
  First row = 7 buttons.
  Second row = 6 buttons + one intentionally empty column on the right.
  Therefore every room plaque has exactly the same width in both rows.
*/
html.mobile-ui .room-chip-line:first-child,
html.mobile-ui .room-chip-line:last-child{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}

/* Keep the second row aligned from the left; seventh slot simply stays empty. */
html.mobile-ui .room-chip-line:last-child{
  justify-content:start !important;
}


/* ===== v65: real fixed mobile header + larger equal room chips ===== */

/*
  The header is physically moved outside #deviceFrame on mobile.
  It is no longer inside the transformed 390px design, therefore it can be
  genuinely fixed to the browser viewport.
*/
html.mobile-ui .mobile-fixed-topbar{
  position:fixed !important;
  top:max(8px, env(safe-area-inset-top)) !important;
  left:14px !important;
  right:14px !important;
  width:auto !important;
  min-height:56px !important;
  margin:0 !important;
  padding:7px 9px !important;
  z-index:1000 !important;

  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  gap:8px !important;
  align-items:center !important;

  background:#FFF9F1 !important;
  border-radius:22px !important;
  box-shadow:0 7px 20px rgba(58,45,30,.10) !important;
  box-sizing:border-box !important;
}

/* No fake sticky behavior remains on the moved bar. */
html.mobile-ui .mobile-fixed-topbar::after{
  content:none !important;
}

html.mobile-ui .mobile-fixed-topbar .navigator-word{
  font-size:25px !important;
  line-height:1 !important;
}

html.mobile-ui .mobile-fixed-topbar .icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
}

/*
  Room buttons:
  both rows use the same 7-column geometry.
  Row 2 simply has an empty seventh column.
*/
html.mobile-ui #roomChips{
  gap:9px !important;
  margin-top:16px !important;
}

html.mobile-ui .room-chip-line{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:8px !important;
}

html.mobile-ui .room-chip-line:first-child,
html.mobile-ui .room-chip-line:last-child{
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}

html.mobile-ui .room-chip{
  height:60px !important;
  min-height:60px !important;
  border-radius:17px !important;
  font-size:20px !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

/* "ЕЩЁ МЕСТА" button / plaque: larger and neutral gray text. */
html.mobile-ui #morePlacesBtn,
html.mobile-ui [data-more-places],
html.mobile-ui .more-places-btn{
  color:#7B7B7B !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
}

html.mobile-ui #morePlacesBtn *,
html.mobile-ui [data-more-places] *,
html.mobile-ui .more-places-btn *{
  color:#7B7B7B !important;
  font-size:18px !important;
  font-weight:700 !important;
}


/* ===== v66: Android title, room proportions, iPhone header clearance ===== */

/* 1. Android: restore a larger NAVIGATOR title in the fixed header. */
html.android-ui.mobile-ui .mobile-fixed-topbar .navigator-word{
  font-size:29px !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
}

/* 2. Room-number plaques: keep equal width but make them lower / closer to square. */
html.mobile-ui .room-chip{
  height:46px !important;
  min-height:46px !important;
  border-radius:14px !important;
  font-size:18px !important;
}

/*
  3. iPhone: the fixed navigator header was overlapping the bear.
  Give the scaled content extra real top clearance only on iOS.
*/
html.ios-ui.mobile-ui #deviceFrame{
  padding-top:84px !important;
  box-sizing:border-box !important;
}

/* Android keeps the existing v65 spacing. */
html.android-ui.mobile-ui #deviceFrame{
  padding-top:72px !important;
  box-sizing:border-box !important;
}

/*
  4. "ЕЩЁ МЕСТА":
  uppercase, gray and the same text size as destination labels such as "Туалет".
*/
html.mobile-ui #morePlacesBtn,
html.mobile-ui [data-more-places],
html.mobile-ui .more-places-btn{
  color:#7B7B7B !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  text-transform:uppercase !important;
}

html.mobile-ui #morePlacesBtn *,
html.mobile-ui [data-more-places] *,
html.mobile-ui .more-places-btn *{
  color:#7B7B7B !important;
  font-size:17px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
}


/* ===== v67: header platform correction + exact quick-label sizing ===== */

/*
  iPhone: header size was already correct.
  The JS scaler now reserves real space below it, so it no longer covers the bear.
*/
html.ios-ui.mobile-ui .mobile-fixed-topbar{
  top:max(8px, env(safe-area-inset-top)) !important;
  left:14px !important;
  right:14px !important;
  min-height:56px !important;
  padding:7px 9px !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  gap:8px !important;
}

html.ios-ui.mobile-ui .mobile-fixed-topbar .navigator-word{
  font-size:25px !important;
}

html.ios-ui.mobile-ui .mobile-fixed-topbar .icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
}

/*
  Android: the app content is scaled from the fixed 390px design.
  The header sits OUTSIDE that scaled frame, so it must use the same
  --phone-scale or it looks much smaller than the rest of the interface.
*/
html.android-ui.mobile-ui .mobile-fixed-topbar{
  top:calc(max(8px, env(safe-area-inset-top)) * var(--phone-scale, 1)) !important;
  left:calc(14px * var(--phone-scale, 1)) !important;
  right:calc(14px * var(--phone-scale, 1)) !important;

  min-height:calc(56px * var(--phone-scale, 1)) !important;
  padding:
    calc(7px * var(--phone-scale, 1))
    calc(9px * var(--phone-scale, 1)) !important;

  grid-template-columns:
    calc(44px * var(--phone-scale, 1))
    minmax(0,1fr)
    calc(44px * var(--phone-scale, 1)) !important;

  gap:calc(8px * var(--phone-scale, 1)) !important;
  border-radius:calc(22px * var(--phone-scale, 1)) !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .navigator-word{
  font-size:calc(25px * var(--phone-scale, 1)) !important;
  line-height:1 !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .icon-btn{
  width:calc(42px * var(--phone-scale, 1)) !important;
  height:calc(42px * var(--phone-scale, 1)) !important;
  min-width:calc(42px * var(--phone-scale, 1)) !important;
  min-height:calc(42px * var(--phone-scale, 1)) !important;
  padding:calc(7px * var(--phone-scale, 1)) !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .home-icon-img,
html.android-ui.mobile-ui .mobile-fixed-topbar .voice-icon-img{
  width:calc(27px * var(--phone-scale, 1)) !important;
  height:calc(27px * var(--phone-scale, 1)) !important;
}

/*
  "ЕЩЁ МЕСТА" must match the adjacent "Туалет" label exactly.
  Base .quick-btn span is 10px in this fixed 390px design.
*/
html.mobile-ui .child-quick-grid .quick-btn > span,
html.mobile-ui #morePlacesBtn > span{
  font-size:10px !important;
  line-height:1.05 !important;
  font-weight:700 !important;
}

html.mobile-ui #morePlacesBtn,
html.mobile-ui #morePlacesBtn *{
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn > span:last-child{
  text-transform:uppercase !important;
  font-size:10px !important;
}

/* Decorative dots stay visual, but do not enlarge the label. */
html.mobile-ui #morePlacesBtn .more-dots{
  font-size:18px !important;
  line-height:.8 !important;
  margin-top:0 !important;
}


/* ===== v68: v30 navigator plaque style + exact "Еще места" style ===== */

/*
  NAVIGATOR plaque: use the successful v30 mobile proportions exactly.
  v30 mobile:
    grid columns 44 / 1fr / 44
    padding 10px
    title 25px
    buttons 42px
*/
html.mobile-ui .mobile-fixed-topbar{
  min-height:auto !important;
  padding:10px 10px !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  gap:7px !important;
  border-radius:0 !important;

  /* v30 visual surface */
  background:rgba(255,249,241,.92) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  border:0 !important;
  border-bottom:1px solid rgba(123,123,123,.08) !important;
  box-shadow:none !important;
}

html.mobile-ui .mobile-fixed-topbar .navigator-word{
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  color:#7B7B7B !important;
}

html.mobile-ui .mobile-fixed-topbar .icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:0 !important;
}

html.mobile-ui .mobile-fixed-topbar .home-icon-img{
  width:29px !important;
  height:29px !important;
}

html.mobile-ui .mobile-fixed-topbar .voice-icon-img{
  width:29px !important;
  height:29px !important;
}

/*
  IMPORTANT:
  Do not separately magnify the Android header anymore.
  It should use the same v30 visual size as iPhone.
*/
html.android-ui.mobile-ui .mobile-fixed-topbar,
html.ios-ui.mobile-ui .mobile-fixed-topbar{
  min-height:auto !important;
  padding:10px 10px !important;
  grid-template-columns:44px minmax(0,1fr) 44px !important;
  gap:7px !important;
  border-radius:0 !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .navigator-word,
html.ios-ui.mobile-ui .mobile-fixed-topbar .navigator-word{
  font-size:25px !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .icon-btn,
html.ios-ui.mobile-ui .mobile-fixed-topbar .icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  padding:0 !important;
}

html.android-ui.mobile-ui .mobile-fixed-topbar .home-icon-img,
html.android-ui.mobile-ui .mobile-fixed-topbar .voice-icon-img,
html.ios-ui.mobile-ui .mobile-fixed-topbar .home-icon-img,
html.ios-ui.mobile-ui .mobile-fixed-topbar .voice-icon-img{
  width:29px !important;
  height:29px !important;
}

/*
  "Еще места" uses the SAME text style as sibling "Туалет".
  Both are .quick-btn > span, so one shared selector controls them.
*/
html.mobile-ui .child-quick-grid .quick-btn > span{
  font-size:14px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
  text-transform:none !important;
}

/* Dots: smaller, centered, and independent from the label size. */
html.mobile-ui #morePlacesBtn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn .more-dots{
  display:block !important;
  width:100% !important;
  margin:0 0 2px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:.75 !important;
  letter-spacing:.08em !important;
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn > span:last-child{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
  text-transform:none !important;
}


/* ===== v69: one fixed 390px header design for all phones ===== */

/*
  The header is no longer platform-specific.
  #fixedHeaderDesign is a 390px design canvas scaled by the exact same
  --phone-scale as the main app. This guarantees identical iPhone/Android size.
*/
html.mobile-ui #fixedHeaderFrame{
  background:transparent !important;
}

html.mobile-ui #fixedHeaderDesign{
  box-sizing:border-box !important;
}

html.mobile-ui #fixedHeaderDesign .topbar{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;

  width:362px !important;          /* same 14px side margins inside 390 */
  height:54px !important;
  min-height:54px !important;

  margin:0 14px !important;
  padding:6px 8px !important;

  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 42px !important;
  gap:8px !important;
  align-items:center !important;

  background:rgba(255,249,241,.96) !important;
  border:1px solid rgba(123,123,123,.08) !important;
  border-radius:22px !important;
  box-shadow:0 6px 16px rgba(58,45,30,.08) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;

  box-sizing:border-box !important;
  z-index:auto !important;
}

html.mobile-ui #fixedHeaderDesign .topbar::after{
  content:none !important;
}

html.mobile-ui #fixedHeaderDesign .navigator-word{
  margin:0 !important;
  width:100% !important;
  text-align:center !important;

  color:#7B7B7B !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

html.mobile-ui #fixedHeaderDesign .icon-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:6px !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

html.mobile-ui #fixedHeaderDesign .home-icon-img,
html.mobile-ui #fixedHeaderDesign .voice-icon-img{
  width:27px !important;
  height:27px !important;
  pointer-events:none !important;
}

/* Kill ALL old platform-specific header overrides. */
html.android-ui.mobile-ui .mobile-fixed-topbar,
html.ios-ui.mobile-ui .mobile-fixed-topbar,
html.mobile-ui .mobile-fixed-topbar{
  all:unset;
}

/* More places label exactly like Toilet, dots small + centered */
html.mobile-ui .child-quick-grid .quick-btn > span{
  font-size:14px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn .more-dots{
  display:block !important;
  width:100% !important;
  margin:0 0 1px !important;
  padding:0 !important;
  text-align:center !important;
  font-size:11px !important;
  line-height:.8 !important;
  letter-spacing:.06em !important;
  color:#7B7B7B !important;
}

html.mobile-ui #morePlacesBtn > span:last-child{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  color:#7B7B7B !important;
  text-transform:none !important;
}


/* ===== v70: EXIT is always red ===== */

/* Main destination / route / modal / quick-button exit labels */
.exit-word,
.exit-word-small,
.exit-label,
[data-special="exit"],
[data-special="exit"] *,
.exit-btn,
.exit-btn *,
.exit-choice,
.exit-choice *,
#exitBtn,
#exitBtn *,
#exitChoice,
#exitChoice *,
.nav-exit,
.nav-exit *{
  color:#EC6A40 !important;
}

/* If the route title itself becomes "ВЫХОД", keep it red too. */
body[data-screen="nav"] .nav-destination.exit,
body[data-screen="nav"] .nav-destination.exit *,
body[data-screen="nav"] .route-destination.exit,
body[data-screen="nav"] .route-destination.exit *,
body[data-screen="nav"] [data-destination="exit"],
body[data-screen="nav"] [data-destination="exit"] *{
  color:#EC6A40 !important;
}