/* Shared mini-app: the same real profile, journeys and parcel actions on every surface. */
body.mini-app {
  --red: #e72842;
  --navy: #292830;
  --muted: #85818b;
  --line: #eee9ec;
  --city-road-ink: #e72b43;
  --app-bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--host-safe-bottom, 0px));
  color: var(--navy);
  background: #faf8f9;
  background-image: radial-gradient(ellipse at 100% 0%, #ffe7eaa6, transparent 35%), radial-gradient(ellipse at 0% 80%, #fff0f4a6, transparent 45%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 0;
  overflow-x: clip;
}
.mini-app *, .mini-app *::before, .mini-app *::after { box-sizing: border-box; }
.mini-app button, .mini-app .button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; white-space: normal; overflow-wrap: break-word; line-height: 1.4; }
.mini-app button { transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mini-app button:focus-visible, .mini-app a:focus-visible, .mini-app input:focus-visible, .mini-app textarea:focus-visible, .mini-app summary:focus-visible { outline: 3px solid #f48b9c; outline-offset: 4px; }
.mini-app button:disabled { opacity: .4; cursor: default; }
.mini-app button:not(:disabled):active, .mini-app a.button:active { transform: scale(.97); }
.mini-app .app-icon { width: 22px; height: 22px; flex: 0 0 22px; display: inline-block; vertical-align: middle; }
.mini-app .app-header { max-width: 1192px; border: 0; padding: 30px 36px 22px; margin: auto; gap: 18px; }
.mini-app .brand { gap: 12px; font-size: 23px; letter-spacing: -.8px; }
.mini-app .brand b { color: var(--red); font-weight: 750; }
.mini-app .brand img { width: 45px; height: 45px; border-radius: 15px; box-shadow: 0 5px 14px #e7284224; }
.mini-app .brand small { font-size: 10px; color: #8d8289; letter-spacing: .35px; margin-top: 4px; }
.mini-app .header-links { gap: 14px; }
.mini-app .city-header { display: flex; gap: 7px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 11px 15px; color: #76616b; font-size: 12px; max-width: 210px; }
.mini-app .city-header .app-icon { width: 16px; height: 16px; flex-basis: 16px; color: var(--red); }
.mini-app .account-avatar { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: linear-gradient(145deg, #fff, #ffe3e9); border: 1px solid #f1c9d2; color: #ae354e; font-size: 16px; font-weight: 650; }
.mini-app .app-host-label { font-size: 11px; color: #8b7f86; }
.mini-app .app-main { max-width: 1192px; padding: 8px 36px 28px; }

/* The status uses the actual next publication or booking; art is decorative. */
.mini-app .journey-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 306px; border-radius: 32px; padding: 34px 38px; background: linear-gradient(118deg, #b91636 0%, #e62a44 52%, #fa626c 100%); color: #fff; box-shadow: 0 16px 42px #c5213b22, inset 0 1px 0 #ffffff55; }
.mini-app .journey-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -95px; top: -210px; border-radius: 50%; background: radial-gradient(circle, #ffffff28, #ffffff00 67%); pointer-events: none; }
.mini-app .journey-hero::after { content: ""; position: absolute; inset: 0; border: 1px solid #ffffff38; border-radius: inherit; pointer-events: none; }
.mini-app .hero-orbit { position: absolute; width: 550px; height: 550px; top: -265px; right: -140px; border-radius: 50%; border: 1px solid #ffffff0a; box-shadow: none; pointer-events: none; }
.mini-app .hero-copy { position: relative; width: 56%; max-width: 580px; z-index: 2; }
.mini-app .hero-greeting { display: block; color: #ffe6eb; font-size: 12px; letter-spacing: .2px; margin-bottom: 24px; }
.mini-app .hero-status-line { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 500; letter-spacing: .2px; color: #ffe3e9; margin-bottom: 10px; }
.mini-app .status-signal { display: inline-block; height: 6px; width: 6px; flex: 0 0 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #ffffff16; }
.mini-app .status-signal.confirmed { background: #a5f2c4; box-shadow: 0 0 0 4px #b8ffd426; }
.mini-app .status-signal.pending { background: #ffe39d; }
.mini-app .status-signal.unavailable { background: #d7d3d7; }
.mini-app .journey-hero h1 { max-width: 540px; font-size: clamp(27px, 3.2vw, 43px); line-height: 1.06; font-weight: 650; letter-spacing: -1.6px; margin: 0; color: #fff; }
.mini-app .hero-route { font-size: 13px; color: #ffe4e8; line-height: 1.6; margin: 13px 0 24px; max-width: 380px; }
.mini-app .hero-bottom { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.mini-app .hero-profile { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #ffffff3b; border-radius: 99px; padding: 8px 11px; background: #ffffff14; color: #fff0f3; font-size: 10px; font-weight: 550; backdrop-filter: blur(8px); }
.mini-app .hero-profile .app-icon { width: 14px; height: 14px; flex-basis: 14px; }
.mini-app .hero-open { display: inline-flex; align-items: center; gap: 7px; background: none; color: #fff; padding: 8px 0; font-size: 11px; }
.mini-app .hero-open .app-icon { width: 15px; height: 15px; flex-basis: 15px; }
.mini-app .hero-messengers { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #ffe5eb; }
.mini-app .hero-messengers img { border-radius: 50%; box-shadow: 0 2px 8px #7b102d33; }
.mini-app .hero-city { position: absolute; width: 51%; right: -14px; bottom: 26px; color: #fff; pointer-events: none; transform-origin: 70% 80%; animation: city-arrive .9s cubic-bezier(.2,.8,.2,1) both; }
.mini-app .hero-city > svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px #aa102d1c); }
.mini-app .hero-city-name { display: block; text-align: right; margin: 1px 40px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.25px; }
.mini-app .hero-city-name small { display: block; color: #ffccd6; font-size: 10px; font-weight: 400; margin-top: 4px; letter-spacing: .2px; }
.mini-app .hero-city .city-stars { animation: city-lights 5s ease-in-out infinite alternate; }
.mini-app .journey-hero-compact { min-height: 230px; padding-top: 26px; padding-bottom: 26px; }
.mini-app .journey-hero-compact .hero-greeting { margin-bottom: 18px; }
.mini-app .journey-hero-compact h1 { font-size: 31px; }
.mini-app .journey-hero-compact .hero-route { margin-bottom: 15px; }
.mini-app .journey-hero-compact .hero-city { width: 43%; bottom: 19px; }

/* All main sections stay in sight; phones have a safe-area-aware five-item dock. */
.mini-app .app-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; overflow: visible; padding: 0; margin: 25px 0 32px; }
.mini-app .app-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 15px 8px; min-height: 50px; border-radius: 15px; border: 1px solid #eee7ec; background: #ffffffb8; color: #8b7d86; transform: none; font-size: 11px; font-weight: 550; position: relative; min-width: 0; }
.mini-app .app-tabs button span { transform: none; }
.mini-app .app-tabs button .app-icon { width: 18px; height: 18px; flex-basis: 18px; }
.mini-app .app-tabs button.active { background: linear-gradient(130deg, #df2040, #f04557); color: white; border-color: transparent; box-shadow: 0 7px 18px #d62f442b; }
.mini-app .app-tabs button:not(.active):hover { transform: translateY(-2px); background: #fff; border-color: #e9cbd3; box-shadow: 0 6px 18px #7537470a; }
.mini-app .nav-active-dot { display: none; }
.mini-app .app-shortcuts { display: none; }
.mini-app .app-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 22px; }
.mini-app .eyebrow { color: #bb7a8b; font-size: 9px; letter-spacing: 1.8px; font-weight: 650; }
.mini-app .app-section-heading h2 { font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -.9px; margin: 8px 0 7px; }
.mini-app .app-section-heading p { color: #8a7f88; font-size: 12px; margin: 0; line-height: 1.6; }
.mini-app .section-symbol { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid #f0dce3; background: linear-gradient(145deg, #fff, #ffeef1); color: #d74a64; border-radius: 17px; transform: rotate(-6deg); }
.mini-app .section-symbol .app-icon { width: 25px; height: 25px; }
.mini-app .app-content { min-height: 260px; }
.mini-app .card { background: #fffffff2; border: 1px solid #eee6ec; border-radius: 26px; padding: 29px; box-shadow: 0 5px 22px #6e284105; animation: app-arrive .38s cubic-bezier(.2,.7,.2,1) both; }
.mini-app .card h2 { font-size: 22px; font-weight: 650; letter-spacing: -.6px; line-height: 1.2; }
.mini-app .card h3 { font-weight: 600; }
.mini-app .intro { margin: 0 0 18px; gap: 14px; align-items: center; }
.mini-app .intro h2 { margin-bottom: 6px; }
.mini-app .intro p { font-size: 12px; line-height: 1.6; color: #93858e; margin: 0; }
.mini-app .intro > .button { flex: 0 0 auto; }
.mini-app .hint { color: #8d838c; font-size: 12px; line-height: 1.7; }
.mini-app .button { min-height: 44px; border-radius: 13px; border: 1px solid #e9dfe6; background: #fff; color: #776270; padding: 12px 17px; font-size: 12px; font-weight: 550; max-width: 100%; }
.mini-app .button.primary { background: linear-gradient(115deg, #dc2442, #f2475a); color: #fff; border-color: transparent; box-shadow: 0 7px 18px #e4284220; }
.mini-app .button.green { background: linear-gradient(120deg, #287b60, #40a17b); color: #fff; border-color: transparent; box-shadow: 0 7px 18px #287b6017; }
.mini-app .button:not(:disabled):hover { box-shadow: 0 7px 18px #77384915; border-color: #d5b0bc; }
.mini-app .button.primary:hover { box-shadow: 0 8px 20px #d62e4435; }
.mini-app .button.publish,
.mini-app .button.publish:not(:disabled):hover { background: #d72b48; border-color: #d72b48; color: #fff; box-shadow: none; filter: none; }
.mini-app .button.publish:focus-visible { outline: 2px solid #9c1434; outline-offset: 3px; }
.mini-app .chips { gap: 9px; margin: 15px 0 21px; }
.mini-app .chips button { min-height: 43px; border: 1px solid #ede4ea; background: #faf7f9; color: #8c7e88; border-radius: 12px; font-weight: 500; padding: 11px 16px; font-size: 12px; max-width: 100%; }
.mini-app .chips button.active, .mini-app .pro-content .chips button[aria-pressed="true"] { color: #bb2140; border-color: #efb9c5; background: #ffedf1; box-shadow: inset 0 0 0 1px #ffffff80; }
.mini-app .route-choices { gap: 12px; margin: 22px 0 16px; }
.mini-app .route-choice { position: relative; overflow: hidden; padding: 23px; min-height: 110px; background: linear-gradient(140deg, #fff, #fcf5f8); border: 1px solid #ecdee5; border-radius: 19px; }
.mini-app .route-choice::after { content: ""; width: 95px; height: 95px; border: 18px solid #efb3c20e; border-radius: 50%; position: absolute; right: -30px; bottom: -50px; pointer-events: none; }
.mini-app .route-choice small { color: #a38a96; font-size: 11px; margin-bottom: 9px; }
.mini-app .route-choice b { font-size: 20px; line-height: 1.2; letter-spacing: -.5px; color: #6d4f5d; }
.mini-app .route-choice.active { background: linear-gradient(140deg, #fff3f6, #ffe7ed); border-color: #eda6b8; box-shadow: 0 5px 15px #d25c7710; }
.mini-app .route-choice.active b { color: #bc2d4d; }
.mini-app .route-choice:not(:disabled):hover { transform: translateY(-3px); border-color: #e8a7b7; }
.mini-app .route-more button { min-height: 44px; padding: 13px; background: #faf6f9; border-radius: 12px; color: #8a7280; font-size: 12px; }
.mini-app .board-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mini-app .board-days button { padding: 11px 7px; }
.mini-app .board-heading { padding: 13px 0 15px; border-bottom-color: #f1e7ed; }
.mini-app .board-heading h3 { font-size: 14px; line-height: 1.45; }
.mini-app .board-heading small { color: #a5909c; font-size: 11px; }
.mini-app .publication { border-bottom: 1px solid #f0e8ee; gap: 18px; padding: 23px 0; }
.mini-app .publication time { letter-spacing: -.8px; font-size: 25px; color: #493c48; }
.mini-app .publication time small { color: #a38e9c; font-size: 10px; font-weight: 450; line-height: 1.8; }
.mini-app .publication h3 { font-size: 14px; line-height: 1.5; margin: 2px 0 6px; letter-spacing: -.25px; }
.mini-app .publication p { font-size: 12px; line-height: 1.6; color: #92818e; }
.mini-app .publication .button { min-height: 41px; padding: 10px 15px; font-size: 11px; }
.mini-app .status { background: #edf8f2; border: 1px solid #def1e7; padding: 5px 9px; color: #438268; border-radius: 7px; font-size: 9px; line-height: 1.4; margin-bottom: 4px; }
.mini-app .status.closed { background: #f5f0f3; border-color: #ece3e8; color: #a28e9a; }
.mini-app .empty { padding: 40px 15px; color: #a5909d; font-size: 12px; line-height: 1.8; }
.mini-app .empty::before { content: ""; display: block; width: 42px; height: 24px; margin: 0 auto 17px; border: 1.5px dashed #e9c2ce; border-top: 0; border-radius: 0 0 50% 50%; transform: rotate(-6deg); }
.mini-app .compact-details { border-top-color: #f1e7ed; padding: 19px 0; }
.mini-app .compact-details summary { font-size: 12px; color: #946c80; }
.mini-app .note, .mini-app .summary { background: linear-gradient(120deg, #fcf3f7, #fbf7f9); border: 1px solid #f2e7ed; color: #927a87; border-radius: 16px; padding: 17px 19px; font-size: 11px; line-height: 1.7; }
.mini-app .note:empty, .mini-app .error:empty { display: none; }
.mini-app .summary div { font-size: 12px; gap: 18px; }
.mini-app .summary span { color: #a58d9b; }
.mini-app .summary b { color: #6c5362; }
.mini-app .error { color: #c32547; }
.mini-app label { font-size: 12px; line-height: 1.55; color: #806475; margin: 20px 0 9px; }
.mini-app input, .mini-app textarea { background: #fdfbfd; border: 1px solid #ebdfe7; border-radius: 12px; min-height: 46px; padding: 13px 14px; font-size: 15px; color: #634859; box-shadow: inset 0 2px 3px #a6758a03; }
.mini-app input::placeholder, .mini-app textarea::placeholder { color: #c0aeb9; }
.mini-app input[type="checkbox"] { min-height: 18px; accent-color: var(--red); }
.mini-app input:focus, .mini-app textarea:focus { border-color: #e7a3b7; }
.mini-app .actions { margin-top: 24px; gap: 10px; align-items: stretch; }
.mini-app .condition { border-top-color: #f0e4eb; }
.mini-app .condition h3 { font-size: 13px; }
.mini-app .condition-row { gap: 9px; }
.mini-app .condition-row button { min-height: 44px; padding: 11px 13px; background: #fcf7fa; border-color: #efdee8; font-size: 11px; color: #916d81; }
.mini-app .child-item, .mini-app .ordered-point { background: #f8f1f6; color: #8b6a80; border: 1px solid #f0e2eb; }
.mini-app .child-item button, .mini-app .ordered-point button { min-height: 32px; }

/* Form progress remains legible; no step removes access to earlier choices. */
.mini-app .layout { grid-template-columns: 210px minmax(0,1fr); gap: 22px; }
.mini-app .steps { border: 1px solid #f0dce5; background: linear-gradient(145deg, #fff2f6, #fffafc); border-radius: 23px; padding: 20px 18px; }
.mini-app .step { color: #b99eac; }
.mini-app .step b { border-color: #ebcfdb; color: #b1849a; flex: 0 0 29px; }
.mini-app .step.active { color: #c33154; }
.mini-app .step.active b { background: linear-gradient(135deg, #d72a4c, #f14d63); color: #fff; border-color: transparent; }
.mini-app .step.done b { background: #fff; border-color: #f1d9e3; color: #b94867; }
.mini-app .steps p { color: #b293a3; font-size: 10px; border-top-color: #efdae4; line-height: 1.7; }
.mini-app .create-role { padding: 5px; gap: 5px; border-radius: 17px; background: #f0e9ef; display: inline-flex; margin: 0 0 23px; }
.mini-app .create-role button { border: 0; background: transparent; min-width: 155px; color: #aa919f; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mini-app .create-role button.active { color: #be3156; background: #fff; box-shadow: 0 2px 8px #8d486b0b; }
.mini-app .create-role .app-icon { width: 18px; height: 18px; flex-basis: 18px; }
.mini-app .point-grid { gap: 10px; }
.mini-app .point-grid button { min-height: 48px; border-color: #eddee7; border-radius: 12px; color: #8c7181; line-height: 1.5; padding: 12px 13px; }
.mini-app .point-grid button.active { border-color: #eaa6bb; color: #b82851; background: #fff0f5; }
.mini-app .times { gap: 8px; }
.mini-app .times button { min-height: 42px; padding: 10px 4px; background: #fbf7fa; border-color: #f0e3eb; color: #a38298; font-variant-numeric: tabular-nums; }
.mini-app .times button.active { background: linear-gradient(120deg, #df2849, #f24962); color: #fff; border-color: transparent; }
.mini-app .parcel-roles { gap: 15px; margin: 24px 0; }
.mini-app .parcel-roles button { padding: 27px; background: linear-gradient(145deg, #fff, #fff0f4); border-color: #ecdce4; position: relative; min-height: 145px; border-radius: 21px; }
.mini-app .parcel-roles button::before { content: "↗"; display: block; font-size: 24px; color: #d86888; margin-bottom: 16px; }
.mini-app .parcel-roles button:nth-child(2) { background: linear-gradient(145deg, #fff, #f7f2fc); }
.mini-app .parcel-roles button:nth-child(2)::before { content: "↪"; color: #a886c4; }
.mini-app .parcel-roles b { font-size: 17px; color: #8d4967; margin-bottom: 7px; }
.mini-app .parcel-roles span { font-size: 12px; color: #ae8e9f; }
.mini-app .parcel-roles button:hover { transform: translateY(-3px); border-color: #e1a1b8; }
.mini-app .profile-grid { gap: 22px; }
.mini-app .profile-city { border-bottom-color: #f0e2eb; }
.mini-app .profile-city b { color: #80526a; }
.mini-app .profile-city small { color: #b28e9f; }
.mini-app .case-message { background: #f8f2f7; color: #8c7183; }
.mini-app .case-message.own { background: #ffedf4; }
.mini-app .action-confirmation { background: #fff4ed; border-color: #ecc3a9; }
.mini-app .success .checkmark { background: #ecf8f1; color: #40906d; box-shadow: 0 0 0 9px #eff9f550; animation: status-pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
.mini-app footer { color: #b29ba9; margin: 34px 0 0; padding: 8px 0 12px; }
.mini-app footer > span { color: #b07b91; font-size: 12px; font-weight: 550; }
.mini-app footer > span b { color: #db526f; }
.mini-app footer p { font-size: 10px; line-height: 1.8; margin: 8px 0 0; }
.mini-app .app-logout { margin-top: 14px; background: none; color: #b16f8a; font-size: 11px; padding: 10px; }
.mini-app #ride-toast { bottom: calc(22px + env(safe-area-inset-bottom,0px)); border: 1px solid #ffffff30; background: #3c2439ed; backdrop-filter: blur(18px); box-shadow: 0 10px 30px #4b1e3826; z-index: 100; }

/* City selection has original local symbols instead of generic repeated cards. */
.mini-app .city-layout { max-width: 790px; padding: 12px 28px 45px; margin: 20px auto; }
.mini-app .city-card h1 { margin: 13px 0; color: #6a3852; font-size: 36px; }
.mini-app .city-choices { gap: 12px; }
.mini-app .city-choices button { overflow: hidden; position: relative; min-height: 100px; padding: 18px 20px 18px 128px; border-radius: 19px; color: #a8456d; background: linear-gradient(125deg, #fff6fa, #fff); border-color: #efdde6; }
.mini-app .city-choices button.active { border-color: #e99db8; background: linear-gradient(125deg, #ffe7f0, #fff7fb); }
.mini-app .city-choice-art { position: absolute; width: 150px; left: -17px; bottom: 13px; color: #d86b92; pointer-events: none; opacity: .65; --city-road-ink: #fff2f7; }
.mini-app .city-choice-art > svg { display: block; width: 100%; height: auto; }
.mini-app .city-choice-name { min-width: 0; margin-right: auto; }
.mini-app .city-choice-name b { font-size: 16px; font-weight: 600; letter-spacing: -.35px; }
.mini-app .city-choice-name small { display: block; color: #b88b9f; font-size: 10px; margin-top: 7px; font-weight: 400; }
.mini-app .city-choice-arrow { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; margin-left: 10px; border-radius: 50%; background: #f9e6ef; color: #cc648c; }
.mini-app .city-choice-arrow .app-icon { width: 17px; height: 17px; }

/* The website sign-in remains a fully usable fallback outside a messenger. */
.mini-app .login-layout { max-width: 1192px; padding: 35px 36px 50px; gap: 65px; }
.mini-app .login-art { color: #e32a49; min-height: 500px; }
.mini-app .login-art h1 { font-size: 64px; font-weight: 600; letter-spacing: -3px; color: #b92d50; line-height: 1.03; }
.mini-app .login-art p { color: #b291a1; line-height: 1.8; }
.mini-app .login-road { color: var(--red); transform: rotate(-7deg); }
.mini-app .login-road .road-ribbon { stroke: #e84465; }
.mini-app .login-road .road-markings { stroke: #ffe8ef; }
.mini-app .login-card { padding: 35px; border-radius: 27px; }
.mini-app .login-card p, .mini-app .signin-steps { color: #a08294; line-height: 1.75; }
.mini-app .signin-methods button { border-color: #efdfe7; border-radius: 15px; padding: 17px; }
.mini-app .signin-methods b { color: #80526b; }
.mini-app .signin-first { background: #fcf0f6; color: #a1748a; border: 1px solid #f4e0ea; }
.mini-app .signin-first p { margin-bottom: 0; }
.mini-app .signin-text { color: #c46789; min-height: 44px; }
.mini-app .signin-bot { background: #fdf7fb; border-color: #efdee8; }
.mini-app .signin-open { min-height: 44px; }
.mini-app .login-card #code { font-size: 27px; letter-spacing: 4px; }
.mini-app .boot { color: #c54569; font-size: 14px; }
.mini-app .mini-auth-error { max-width: 540px; margin: 10vh auto; padding: 30px 26px; border: 1px solid #f0c9d8; border-radius: 24px; background: linear-gradient(140deg,#fff,#fff0f5); color: #8b4c67; line-height: 1.7; box-shadow: 0 12px 35px #9d426713; }
.mini-app .mini-auth-error h1 { font-size: 27px; line-height: 1.15; color: #ad3155; }
.mini-app .mini-auth-error p { font-size: 13px; }
.mini-app .mini-auth-error a { color: #b8325a; }
html[data-messenger] .mini-app .app-header { padding-top: max(20px, env(safe-area-inset-top,0px), var(--host-safe-top,0px)); }
html[data-messenger] .mini-app .app-main,html[data-messenger] .mini-app .app-header { padding-left: max(17px, env(safe-area-inset-left,0px), var(--host-safe-left,0px)); padding-right: max(17px, env(safe-area-inset-right,0px), var(--host-safe-right,0px)); }

@keyframes app-arrive { from { opacity: .3; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes city-arrive { from { opacity: 0; transform: translateY(13px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes city-lights { from { opacity: .35; } to { opacity: .85; } }
@keyframes status-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 1300px) {
  .mini-app .journey-hero { min-height: 335px; padding: 42px; }
  .mini-app .journey-hero-compact { min-height: 246px; padding: 28px 38px; }
}
@media (max-width: 950px) {
  .mini-app .app-header { padding: 24px 25px 20px; }
  .mini-app .app-main { padding: 6px 25px 26px; }
  .mini-app .app-tabs button { flex-direction: column; gap: 6px; font-size: 10px; }
  .mini-app .hero-copy { width: 63%; }
  .mini-app .hero-city { width: 49%; right: -37px; bottom: 24px; opacity: .85; }
  .mini-app .journey-hero { padding: 30px; }
  .mini-app .journey-hero h1 { font-size: 36px; }
  .mini-app .journey-hero-compact h1 { font-size: 30px; }
  .mini-app .layout { grid-template-columns: minmax(0,1fr); }
  .mini-app .steps { display: flex; position: static; gap: 5px; padding: 11px; justify-content: space-between; border-radius: 17px; }
  .mini-app .step { width: auto; gap: 7px; font-size: 10px; padding: 9px 4px; }
  .mini-app .step b { flex-basis: 25px; width: 25px; height: 25px; }
  .mini-app .steps p { display: none; }
}
@media (max-width: 650px) {
  .mini-app .app-header { padding: 20px 19px 18px; gap: 10px; }
  .mini-app .brand { font-size: 20px; gap: 9px; letter-spacing: -.6px; }
  .mini-app .brand img { width: 38px; height: 38px; border-radius: 13px; }
  .mini-app .brand small { font-size: 8px; letter-spacing: .1px; }
  .mini-app .header-links { gap: 8px; }
  .mini-app .account-avatar { width: 35px; height: 35px; font-size: 13px; }
  .mini-app .city-header { padding: 9px 10px; font-size: 10px; max-width: 150px; min-height: 36px; }
  .mini-app .city-header .app-icon { width: 13px; height: 13px; flex-basis: 13px; }
  .mini-app .app-main { padding: 2px 17px calc(100px + var(--app-bottom)); }
  .mini-app .journey-hero { border-radius: 25px; min-height: 353px; padding: 23px 23px 118px; }
  .mini-app .hero-copy { width: 100%; max-width: none; }
  .mini-app .hero-greeting { margin-bottom: 20px; font-size: 11px; }
  .mini-app .hero-status-line { font-size: 9px; margin-bottom: 10px; max-width: 100%; }
  .mini-app .journey-hero h1 { font-size: 32px; max-width: 320px; letter-spacing: -1.2px; line-height: 1.05; }
  .mini-app .hero-route { font-size: 11px; max-width: 275px; margin: 12px 0 15px; line-height: 1.55; }
  .mini-app .hero-bottom { gap: 12px; align-items: center; }
  .mini-app .hero-profile { font-size: 9px; padding: 7px 9px; }
  .mini-app .hero-profile .app-icon { width: 12px; height: 12px; flex-basis: 12px; }
  .mini-app .hero-messengers { font-size: 8px; gap: 4px; }
  .mini-app .hero-messengers img { width: 14px; height: 14px; }
  .mini-app .hero-open { font-size: 10px; }
  .mini-app .hero-city { width: 72%; right: -5px; bottom: 15px; opacity: .95; }
  .mini-app .hero-city-name { font-size: 11px; margin-right: 23px; margin-top: 0; }
  .mini-app .hero-city-name small { font-size: 8px; margin-top: 3px; }
  .mini-app .journey-hero-compact { min-height: 204px; padding: 21px 22px; }
  .mini-app .journey-hero-compact .hero-copy { width: 100%; }
  .mini-app .journey-hero-compact .hero-greeting { margin-bottom: 15px; font-size: 10px; }
  .mini-app .journey-hero-compact h1 { font-size: 25px; max-width: 280px; }
  .mini-app .journey-hero-compact .hero-route { font-size: 10px; max-width: 235px; margin: 10px 0 14px; }
  .mini-app .journey-hero-compact .hero-city { width: 42%; bottom: 15px; right: -20px; opacity: .18; }
  .mini-app .journey-hero-compact .hero-city-name { display: none; }
  .mini-app .app-shortcuts { display: flex; gap: 9px; margin: 13px 0 26px; }
  .mini-app .app-shortcuts button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 12px; flex: 1 1 auto; background: #fff; border: 1px solid #efe4ea; border-radius: 12px; color: #a17b91; font-size: 10px; }
  .mini-app .app-shortcuts button.active { color: #b42f55; background: #fff0f5; border-color: #ecc0d0; }
  .mini-app .app-shortcuts button > .app-icon { width: 15px; height: 15px; flex-basis: 15px; }
  .mini-app .app-shortcuts button > .app-icon:last-child { width: 11px; flex-basis: 11px; margin-left: auto; }
  .mini-app .app-shortcuts button b { font-size: 8px; font-weight: 650; padding: 2px 4px; border: 1px solid #f1d3e0; border-radius: 4px; margin-left: 3px; }
  .mini-app .app-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; gap: 0; margin: 0; padding: 9px 10px var(--app-bottom); background: #ffffffed; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid #f0dfe8; box-shadow: 0 -8px 35px #6f224309; border-radius: 20px 20px 0 0; }
  .mini-app .app-tabs button { min-height: 50px; font-size: 8px; font-weight: 550; gap: 5px; border: 0; border-radius: 12px; padding: 7px 3px; color: #b19caa; background: none; }
  .mini-app .app-tabs button .app-icon { width: 21px; height: 21px; flex-basis: 21px; }
  .mini-app .app-tabs button.active { background: #fff0f5; color: #d22f57; box-shadow: none; }
  .mini-app .app-tabs button span { display: block; width: 100%; text-align: center; line-height: 1.3; }
  .mini-app .app-tabs .nav-secondary { display: none; }
  .mini-app .app-tabs button:not(.active):hover { background: #fff5f9; transform: none; box-shadow: none; }
  .mini-app .app-section-heading { margin-bottom: 18px; gap: 12px; }
  .mini-app .app-section-heading h2 { font-size: 26px; letter-spacing: -.7px; margin: 7px 0 7px; }
  .mini-app .app-section-heading .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .mini-app .app-section-heading p { font-size: 10px; max-width: 250px; }
  .mini-app .section-symbol { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; }
  .mini-app .section-symbol .app-icon { width: 21px; height: 21px; }
  .mini-app .card { padding: 22px 18px; border-radius: 22px; }
  .mini-app .card h2 { font-size: 21px; }
  .mini-app .intro { display: flex; align-items: flex-start; gap: 10px; }
  .mini-app .intro h2 { font-size: 20px; }
  .mini-app .intro p { font-size: 10px; }
  .mini-app .intro > .button { padding: 10px; font-size: 9px; min-height: 39px; max-width: 106px; }
  .mini-app .chips { gap: 8px; }
  .mini-app .chips button { min-height: 43px; padding: 11px 12px; font-size: 11px; }
  .mini-app .route-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
  .mini-app .route-choice { min-height: 100px; padding: 17px 13px; border-radius: 16px; }
  .mini-app .route-choice b { font-size: 16px; line-height: 1.25; }
  .mini-app .route-choice small { font-size: 9px; margin-bottom: 8px; }
  .mini-app .route-choice em { display: none; }
  .mini-app .route-more { grid-template-columns: minmax(0,1fr); }
  .mini-app .board-days { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .mini-app .board-days button { font-size: 9px; padding: 10px 5px; min-height: 40px; }
  .mini-app .board-days button:nth-child(n+4) { font-size: 10px; }
  .mini-app .board-heading { display: flex; align-items: flex-start; gap: 10px; }
  .mini-app .board-heading h3 { font-size: 12px; }
  .mini-app .board-heading small { flex: 0 0 64px; font-size: 9px; line-height: 1.5; margin: 2px 0 0; text-align: right; }
  .mini-app .publication { grid-template-columns: 54px minmax(0,1fr); gap: 12px; padding: 20px 0; }
  .mini-app .publication time { font-size: 21px; }
  .mini-app .publication time small { font-size: 8px; }
  .mini-app .publication h3 { font-size: 13px; }
  .mini-app .publication p { font-size: 11px; }
  .mini-app .publication > .button { grid-column: 2; justify-self: start; }
  .mini-app .publication .button { min-height: 40px; font-size: 10px; padding: 10px 14px; }
  .mini-app .pro-content .publication { grid-template-columns: minmax(0,1fr); }
  .mini-app .pro-publication-actions { justify-content: flex-start; gap: 8px; }
  .mini-app .pro-publication-actions > .button { min-height: 44px; font-size: 11px; }
  .mini-app .note, .mini-app .summary { padding: 15px; font-size: 10px; border-radius: 14px; }
  .mini-app .summary div { font-size: 10px; gap: 12px; }
  .mini-app .summary b { max-width: 68%; }
  .mini-app .button { font-size: 11px; padding: 12px 15px; }
  .mini-app .actions { gap: 9px; }
  .mini-app .actions > .button { flex: 1 1 130px; }
  .mini-app .actions .primary { margin-left: 0; }
  .mini-app .hint { font-size: 11px; }
  .mini-app label { font-size: 11px; }
  .mini-app input, .mini-app textarea { font-size: 16px; }
  .mini-app .form-row { flex-direction: column; gap: 0; }
  .mini-app .layout { gap: 15px; }
  .mini-app .steps { padding: 8px; gap: 3px; }
  .mini-app .step { font-size: 0; justify-content: center; padding: 7px 3px; flex: 1; gap: 5px; }
  .mini-app .step.active { font-size: 9px; flex: 2.5; min-width: 0; }
  .mini-app .step b { font-size: 10px; flex-basis: 23px; width: 23px; height: 23px; }
  .mini-app .step.active b { flex-basis: 23px; }
  .mini-app .create-role { display: flex; width: 100%; margin-bottom: 19px; }
  .mini-app .create-role button { min-width: 0; flex: 1; font-size: 11px; padding: 12px 8px; }
  .mini-app .point-grid { gap: 9px; }
  .mini-app .point-grid button { font-size: 11px; min-height: 47px; padding: 11px; }
  .mini-app .times { gap: 7px; }
  .mini-app .times button { font-size: 12px; padding: 11px 3px; }
  .mini-app .condition-row { gap: 8px; }
  .mini-app .condition-row button { min-height: 44px; font-size: 10px; }
  .mini-app .parcel-roles { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .mini-app .parcel-roles button { padding: 22px; min-height: 132px; }
  .mini-app .parcel-roles button::before { margin-bottom: 11px; }
  .mini-app .parcel-roles b { font-size: 17px; }
  .mini-app .parcel-roles span { font-size: 11px; }
  .mini-app .profile-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .mini-app .profile-city { flex-direction: row; align-items: center; gap: 9px; }
  .mini-app .profile-city .button { font-size: 10px; padding: 10px 12px; }
  .mini-app .contact-actions { gap: 9px; }
  .mini-app .contact-actions .button { min-width: 0; flex: 1 1 130px; }
  .mini-app .city-layout { margin: 0 auto; padding: 7px 17px 25px; }
  .mini-app .city-card h1 { font-size: 30px; }
  .mini-app .city-choices button { min-height: 94px; padding: 18px 14px 18px 91px; }
  .mini-app .city-choice-art { width: 110px; left: -17px; bottom: 19px; }
  .mini-app .city-choice-name b { font-size: 14px; }
  .mini-app .city-choice-name small { font-size: 9px; line-height: 1.6; }
  .mini-app .city-choice-arrow { width: 29px; height: 29px; flex-basis: 29px; margin-left: 6px; }
  .mini-app .login-layout { padding: 0 19px 30px; gap: 16px; grid-template-columns: minmax(0,1fr); }
  .mini-app .login-art { min-height: 205px; padding: 12px 5px; }
  .mini-app .login-art h1 { font-size: 43px; letter-spacing: -1.8px; }
  .mini-app .login-art p { font-size: 11px; }
  .mini-app .login-card { padding: 23px 19px; margin-top: 0; }
  .mini-app .signin-methods button { padding: 16px 13px; }
  .mini-app .signin-methods b { font-size: 13px; }
  .mini-app .signin-bot { grid-template-columns: 102px minmax(0,1fr); gap: 10px; padding: 10px; }
  .mini-app .signin-qr { width: 102px; height: 102px; }
  .mini-app .signin-bot p { font-size: 10px; }
  .mini-app .signin-bot .signin-open { font-size: 9px; gap: 4px; padding: 9px 5px; }
  .mini-app .signin-open img { width: 15px; height: 15px; }
  .mini-app footer { margin-top: 27px; }
  .mini-app #ride-toast { bottom: calc(88px + var(--app-bottom)); font-size: 11px; max-width: calc(100% - 35px); }
}
@media (max-width: 360px) {
  .mini-app .app-header { padding-left: 14px; padding-right: 14px; }
  .mini-app .brand { font-size: 18px; gap: 7px; }
  .mini-app .brand img { width: 34px; height: 34px; border-radius: 11px; }
  .mini-app .brand small { font-size: 7px; }
  .mini-app .city-header { max-width: 126px; font-size: 9px; padding: 8px; }
  .mini-app .account-avatar { display: none; }
  .mini-app .app-main { padding-left: 12px; padding-right: 12px; }
  .mini-app .journey-hero { min-height: 345px; padding-left: 20px; padding-right: 20px; }
  .mini-app .journey-hero h1 { font-size: 29px; }
  .mini-app .journey-hero-compact { min-height: 203px; padding-bottom: 20px; }
  .mini-app .journey-hero-compact h1 { font-size: 25px; }
  .mini-app .hero-profile { font-size: 8px; }
  .mini-app .hero-bottom { gap: 9px; }
  .mini-app .hero-messengers { font-size: 7px; }
  .mini-app .card { padding-left: 16px; padding-right: 16px; }
  .mini-app .app-section-heading h2 { font-size: 24px; }
  .mini-app .route-choices { grid-template-columns: minmax(0,1fr); }
  .mini-app .route-choice { padding: 16px; min-height: 86px; }
  .mini-app .route-choice b { font-size: 17px; }
  .mini-app .board-days button { font-size: 8px; }
  .mini-app .app-tabs button { font-size: 7.5px; }
  .mini-app .app-shortcuts button { font-size: 9px; padding-left: 10px; padding-right: 10px; }
  .mini-app .city-choices button { padding-left: 73px; }
  .mini-app .city-choice-art { width: 90px; }
  .mini-app .city-choice-name b { font-size: 13px; }
  .mini-app .city-choice-name small { font-size: 8px; }
  .mini-app .signin-bot { grid-template-columns: 85px minmax(0,1fr); gap: 8px; }
  .mini-app .signin-qr { width: 85px; height: 85px; }
}
.mini-app .pro-routes>h3,.mini-app .pro-runs>h3 { font-size: 14px; color: #967084; margin: 22px 0 12px; }
.mini-app .pro-routes>.publication:first-of-type { padding-top: 14px; }
.mini-app .pro-runs { margin-top: 26px; }
.mini-app .pro-bottom-actions { padding-top: 10px; margin-top: 22px; }
.mini-app .pro-bottom-actions>.primary { margin-left: 0; }
.mini-app .pro-save-form { border-top: 1px solid #efdee8; margin-top: 24px; padding-top: 23px; }
.mini-app .pro-save-form h3 { font-size: 17px; color: #88546c; }
.mini-app .pro-save-choices { min-width: 0; border: 0; padding: 0; margin: 18px 0; }
.mini-app .pro-save-choices legend { font-size: 11px; color: #a38898; margin-bottom: 9px; }
.mini-app .pro-save-choice { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #eedde7; background: #fdf8fb; border-radius: 13px; margin: 9px 0; min-width: 0; cursor: pointer; }
.mini-app .pro-save-choice:has(input:checked) { border-color: #e9adc2; background: #fff0f6; }
.mini-app .pro-save-choice input { width: 17px; height: 17px; min-height: 17px; padding: 0; flex: 0 0 17px; accent-color: #dc365d; }
.mini-app .pro-save-choice span { min-width: 0; }
.mini-app .pro-save-choice b { display: block; font-size: 12px; line-height: 1.55; font-weight: 550; }
.mini-app .pro-save-choice small { display: block; font-size: 10px; color: #b18d9f; margin-top: 4px; }
.mini-app .pro-save-choice b { overflow-wrap: anywhere; }
.mini-app .pro-archive { margin-top: 22px; }
.mini-app .pro-archive summary,.mini-app .pro-save-history summary { min-height: 32px; }
.mini-app .pro-save-history { padding-bottom: 0; }
.mini-app .pro-save-form { border-top: 0; padding-top: 0; }
.mini-app .route-choice::after { max-width: 100%; pointer-events: none; }
/* A desktop phone preview uses the same breakpoint rules as a real phone. */
html.phone-preview { background: radial-gradient(ellipse at top, #f7e6ed, #e8e6eb 70%); }
html.phone-preview body.mini-app { box-shadow: 0 0 0 9px #fff7fa90, 0 22px 80px #582d4830; }
html.phone-preview .mini-app .app-tabs { left: 50%; right: auto; width: min(390px,100%); transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .mini-app *, .mini-app *::before, .mini-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mini-app button:not(:disabled):active, .mini-app a.button:active { transform: none; }
}

/* Route creation asks for its data before offering Save. */
.mini-app .pro-point-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0; }
.mini-app .pro-point-choices .button { margin:0;min-width:0;width:100%;padding:11px 9px;font-size:12px; }
.mini-app #pro-create .route-choices { margin-top:16px; }
.mini-app #pro-create .pro-bottom-actions { margin-top:24px; }

/* City art blends into the card, without a rectangular landscape plate. */
.mini-app .hero-city .city-illustration {
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
 filter:none;
}

/* Compact messenger surfaces. The ordinary website keeps its established sizes. */
body.mini-compact {
 --muted:#716874;
 --compact-ink:#39323c;
 --compact-gap:12px;
}
body.mini-compact .app-header { padding:12px 16px 10px; gap:9px; }
body.mini-compact .brand { font-size:18px; gap:8px; letter-spacing:-.45px; flex:0 1 auto; min-width:0; }
body.mini-compact .brand img { width:32px; height:32px; border-radius:11px; }
body.mini-compact .brand small { font-size:8px; margin-top:2px; }
body.mini-compact .header-links { gap:7px; flex:0 1 auto; min-width:0; }
body.mini-compact .city-header { min-height:44px; padding:9px 10px; max-width:175px; font-size:11px; gap:5px; }
body.mini-compact .city-header span { min-width:0; overflow-wrap:normal; word-break:normal; }
body.mini-compact .city-header .app-icon { width:13px; height:13px; flex-basis:13px; }
body.mini-compact .account-avatar { width:32px; height:32px; flex:0 0 32px; font-size:12px; }
body.mini-compact .app-main { padding:0 14px calc(92px + var(--app-bottom)); }
body.mini-compact .journey-hero { min-height:0; padding:17px 18px; border-radius:22px; box-shadow:0 8px 24px #c5213b14; }
body.mini-compact .hero-copy,body.mini-compact .journey-hero-compact .hero-copy { width:100%; max-width:none; }
body.mini-compact .hero-greeting { margin:0 0 7px; font-size:10px; }
body.mini-compact .hero-status-line { font-size:10px; line-height:1.3; margin-bottom:7px; }
body.mini-compact .journey-hero h1 { font-size:27px; line-height:1.08; letter-spacing:-.8px; max-width:96%; }
body.mini-compact .hero-route { margin:8px 0 9px; font-size:12px; line-height:1.45; color:#fff4f6; max-width:100%; }
body.mini-compact .hero-bottom { gap:10px; min-height:32px; }
body.mini-compact .hero-profile { font-size:10px; padding:6px 9px; color:white; }
body.mini-compact .hero-open { min-height:36px; font-size:11px; }
body.mini-compact .hero-messengers { font-size:10px; }
body.mini-compact .hero-city { width:49%; right:-11px; bottom:-7px; opacity:.16; animation:none; }
body.mini-compact .hero-city-name { display:none; }
body.mini-compact .journey-hero-compact { padding:13px 17px; }
body.mini-compact .journey-hero-compact .hero-greeting { display:none; }
body.mini-compact .journey-hero-compact h1 { font-size:23px; }
body.mini-compact .journey-hero-compact .hero-route { font-size:11px; margin:6px 0; }
body.mini-compact .journey-hero-compact .hero-profile { padding:4px 7px; font-size:9px; }
body.mini-compact .journey-hero-compact .hero-bottom { min-height:27px; }
body.mini-compact .journey-hero-compact .hero-city { width:39%; right:-8px; bottom:-10px; opacity:.12; }
body.mini-compact .app-shortcuts { gap:8px; margin:10px 0 16px; }
body.mini-compact .app-shortcuts button { min-height:44px; font-size:11px; padding:9px 11px; }
body.mini-compact .app-section-heading { gap:10px; margin-bottom:12px; }
body.mini-compact .app-section-heading .eyebrow { display:none; }
body.mini-compact .app-section-heading h2 { font-size:23px; margin:0 0 4px; letter-spacing:-.55px; }
body.mini-compact .app-section-heading p { font-size:12px; line-height:1.4; max-width:100%; color:#776975; }
body.mini-compact .section-symbol { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
body.mini-compact .section-symbol .app-icon { width:19px; height:19px; }
body.mini-compact .card { padding:17px 15px; border-radius:19px; animation:none; }
body.mini-compact .card + .card { margin-top:12px; }
body.mini-compact .card h2 { font-size:20px; line-height:1.2; margin-bottom:9px; }
body.mini-compact .card h3 { font-size:15px; margin-bottom:9px; }
body.mini-compact .intro { margin-bottom:12px; gap:9px; }
body.mini-compact .intro p,body.mini-compact .hint { font-size:12px; line-height:1.5; color:#796d78; }
body.mini-compact .card > .hint { margin:0 0 13px; }
body.mini-compact .intro > .button { min-height:44px; max-width:126px; font-size:11px; }
body.mini-compact label { font-size:12px; color:#665661; margin:12px 0 7px; }
body.mini-compact input,body.mini-compact textarea { min-height:44px; padding:10px 12px; color:#463740; }
body.mini-compact .button,body.mini-compact .chips button,body.mini-compact .point-grid button,body.mini-compact .times button { min-height:44px; font-size:12px; padding:10px 11px; }
body.mini-compact .button { color:#69505f; border-radius:12px; box-shadow:none; }
body.mini-compact .button.primary,body.mini-compact .button.green { color:#fff; box-shadow:none; }
body.mini-compact .button.primary:hover,body.mini-compact .button.green:hover { box-shadow:none; }
body.mini-compact .chips { margin:10px 0 13px; gap:7px; }
body.mini-compact .chips button { color:#75616f; }
body.mini-compact .route-choices { grid-template-columns:minmax(0,1fr); gap:7px; margin:12px 0; }
body.mini-compact .route-choice { min-height:63px; padding:11px 13px; border-radius:13px; overflow:visible; }
body.mini-compact .route-choice small { font-size:11px; margin:0 0 3px; color:#846b77; }
body.mini-compact .route-choice b { display:flex; gap:7px; align-items:center; justify-content:space-between; font-size:16px; line-height:1.25; letter-spacing:-.25px; color:#60434f; overflow-wrap:normal; word-break:normal; }
body.mini-compact .route-choice b span { min-width:0; }
body.mini-compact .route-choice b i { flex:0 0 21px; font-style:normal; font-size:19px; text-align:center; }
body.mini-compact .route-choice em { display:block; position:absolute; right:12px; top:50%; margin-top:-12px; float:none; font-size:19px; }
body.mini-compact .route-choice::after { display:none; }
body.mini-compact .route-choice,body.mini-compact .route-more button,body.mini-compact .chips button { overflow-wrap:normal; word-break:normal; hyphens:none; }
body.mini-compact .route-more { grid-template-columns:minmax(0,1fr); gap:7px; }
body.mini-compact .route-more button { min-height:44px; line-height:1.45; padding:10px 12px; font-size:12px; }
/* Long stop names and the selected checkmark share one stable, readable grid. */
body.mini-compact .point-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px; align-items:stretch; }
body.mini-compact .point-grid button { display:flex; align-items:center; min-width:0; width:100%; min-height:60px; padding:10px; color:#715565; font-size:12px; line-height:1.4; text-align:left; overflow-wrap:anywhere; word-break:normal; }
body.mini-compact .times { margin:12px 0; gap:6px; }
body.mini-compact .times button { padding:10px 2px; font-size:13px; color:#725768; }
body.mini-compact .times button.active { color:#fff; }
body.mini-compact .board-days { gap:6px; margin-top:13px; }
body.mini-compact .board-days button { min-height:44px; font-size:11px; padding:9px 4px; }
body.mini-compact .board-heading { padding:10px 0; }
body.mini-compact .board-heading h3 { font-size:14px; }
body.mini-compact .board-heading small { font-size:11px; color:#7d6775; }
body.mini-compact .publication { gap:9px 11px; padding:15px 0; }
body.mini-compact .publication p { font-size:12px; line-height:1.5; color:#776370; margin:5px 0; }
body.mini-compact .publication h3 { font-size:14px; line-height:1.4; }
body.mini-compact .publication .button { min-height:44px; padding:10px 13px; font-size:12px; }
body.mini-compact .status { font-size:10px; color:#30664e; }
body.mini-compact .status.closed { color:#77616e; }
body.mini-compact .empty { padding:23px 8px; font-size:12px; color:#806d7b; }
body.mini-compact .empty::before { margin-bottom:11px; }
body.mini-compact .actions { margin-top:16px; gap:8px; }
body.mini-compact .note,body.mini-compact .summary { padding:12px; margin:13px 0; font-size:12px; line-height:1.5; color:#75606d; }
body.mini-compact .summary { gap:8px; }
body.mini-compact .summary div { font-size:12px; gap:10px; }
body.mini-compact .summary span { color:#7d6775; }
body.mini-compact .summary b { max-width:70%; color:#593d4e; }
body.mini-compact .compact-details { padding:13px 0; }
body.mini-compact .compact-details summary { min-height:36px; display:flex; align-items:center; font-size:12px; color:#755266; }
body.mini-compact .compact-details[open] summary { margin-bottom:10px; }
body.mini-compact .create-role { margin-bottom:13px; padding:4px; border-radius:13px; }
body.mini-compact .create-role button { min-height:44px; font-size:12px; padding:9px 7px; }
body.mini-compact .parcel-roles { gap:9px; margin:13px 0; }
body.mini-compact .parcel-roles button { min-height:0; padding:16px; border-radius:14px; }
body.mini-compact .parcel-roles button::before { float:right; margin:0 0 0 10px; font-size:20px; }
body.mini-compact .parcel-roles b { font-size:16px; margin-bottom:5px; }
body.mini-compact .parcel-roles span { font-size:12px; line-height:1.5; color:#866475; }
body.mini-compact .condition { padding:13px 0; }
body.mini-compact .condition h3 { font-size:14px; }
body.mini-compact .condition-row button { min-height:44px; font-size:12px; }
body.mini-compact .profile-grid { gap:12px; }
body.mini-compact .profile-grid > .card { margin:0; }
body.mini-compact .city-layout { padding:4px 14px 20px; }
body.mini-compact .city-choices { gap:9px; margin:15px 0; }
body.mini-compact .city-choices button { min-height:79px; padding:13px 12px 13px 80px; }
body.mini-compact .city-choice-art { width:98px; bottom:13px; left:-18px; }
body.mini-compact .city-choice-name b { font-size:15px; overflow-wrap:normal; word-break:normal; }
body.mini-compact .city-choice-name small { font-size:10px; margin-top:3px; color:#876575; }
body.mini-compact .city-choice-arrow { width:28px; height:28px; flex-basis:28px; }
body.mini-compact .pro-routes > h3,body.mini-compact .pro-runs > h3 { margin:16px 0 8px; font-size:14px; }
body.mini-compact .pro-runs,body.mini-compact .pro-archive { margin-top:16px; }
body.mini-compact .pro-bottom-actions { padding-top:0; margin-top:15px; }
body.mini-compact footer { margin:20px 0 0; padding:5px 0 8px; }

/* Previous choices stay as compact, editable rows above the next open section. */
body.mini-compact .journey-flow { display:grid; gap:9px; min-width:0; }
body.mini-compact .flow-stage { min-width:0; border:1px solid #eadee4; background:#fff; border-radius:15px; overflow:clip; scroll-margin-block:15px 110px; }
body.mini-compact .flow-stage-header { width:100%; min-width:0; min-height:52px; display:flex; align-items:center; text-align:left; gap:10px; background:none; color:#674b5d; padding:11px 13px; border-radius:14px; }
body.mini-compact .flow-stage-header b { font-size:13px; font-weight:600; line-height:1.35; }
body.mini-compact .flow-stage-header small,body.mini-compact .flow-summary { display:block; color:#85717e; font-size:12px; line-height:1.4; font-weight:400; overflow-wrap:break-word; margin-top:2px; }
body.mini-compact .flow-stage-header > span { min-width:0; }
body.mini-compact .flow-stage-header > i { flex:0 0 auto; font-style:normal; margin-left:auto; color:#b35a77; }
body.mini-compact .flow-stage.active,body.mini-compact .flow-stage.is-active,body.mini-compact .flow-stage[aria-current="step"] { border-color:#e2aabb; background:#fffafd; box-shadow:0 4px 18px #b4385e06; }
body.mini-compact .flow-content { padding:3px 13px 14px; min-width:0; }
body.mini-compact .flow-content > h2:first-child { font-size:18px; margin-top:0; }
body.mini-compact .flow-content > .hint { margin:0 0 11px; }
body.mini-compact .flow-content .card { border:0; padding:0; border-radius:0; background:none; box-shadow:none; }
body.mini-compact .flow-next { margin-top:14px; }
body.mini-compact .flow-next .button { width:100%; }
body.mini-compact .flow-stage:focus-visible { outline:2px solid #bf3659; outline-offset:3px; }

/* Route-connected art: only the illustrations move, never labels or controls. */
body.mini-compact .journey-art { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; min-width:0; height:100px; margin:0 0 13px; overflow:hidden; color:#cc4a6a; background:linear-gradient(135deg,#fff7fa,#fff 55%,#fdf5f8); border-radius:14px; pointer-events:none; }
body.mini-compact .journey-art-place { position:relative; min-width:0; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; padding:0 3px 8px; z-index:1; }
body.mini-compact .journey-art-picture { position:absolute; bottom:23px; left:0; width:100%; }
body.mini-compact .journey-art-picture .city-illustration { display:block; width:100%; height:auto; }
body.mini-compact .journey-art-place > span { font-size:10px; font-weight:550; line-height:1.25; color:#8c5269; text-align:center; max-width:100%; overflow-wrap:normal; }
body.mini-compact .journey-art-connection { position:absolute; left:10%; bottom:14px; width:80%; height:43px; stroke:#d88a9e; stroke-width:1.2; stroke-dasharray:3 5; opacity:.5; }
body.mini-compact .journey-art-connection circle { fill:#fff5f8; stroke-dasharray:none; stroke-width:1.5; }
body.mini-compact .journey-art--create .journey-art-origin .journey-art-picture { width:96%; left:-4%; bottom:24px; }
body.mini-compact .journey-art--create .journey-art-destination .journey-art-picture { width:113%; left:-7%; bottom:22px; }
body.mini-compact .journey-art--find { height:82px; margin-top:2px; }
body.mini-compact .journey-art--find .journey-art-origin .journey-art-picture { width:85%; left:9%; }
body.mini-compact .journey-art--find .journey-art-destination .journey-art-picture { width:100%; left:-4%; }
body.mini-compact .journey-art--pro { height:89px; background:linear-gradient(120deg,#fff8fb,#faf7fd); }
body.mini-compact .journey-art--pro .journey-art-origin .journey-art-picture { width:91%; left:-3%; }
body.mini-compact .journey-art--pro .journey-art-destination .journey-art-picture { width:104%; left:-5%; }
body.mini-compact .journey-art--parcels { height:86px; background:linear-gradient(120deg,#fff8f4,#fff5f9); }
body.mini-compact .journey-art--parcels .journey-art-origin .journey-art-picture { width:103%; left:-10%; }
body.mini-compact .journey-art--parcels .journey-art-destination .journey-art-picture { width:89%; left:5%; }
body.mini-compact .journey-art--mine,body.mini-compact .journey-art--detail { height:76px; margin-bottom:9px; }
body.mini-compact .journey-art--mine .journey-art-picture,body.mini-compact .journey-art--detail .journey-art-picture { width:82%; left:7%; }
body.mini-compact [data-mini-motion] { transform:translate3d(var(--mini-motion-x,0px),var(--mini-motion-y,0px),0) rotate(var(--mini-motion-rotate,0deg)); transform-origin:50% 85%; }
body.mini-compact .city-stars { animation:none; }

/* Main-screen road/weather fits one readable optional strip, using actual freshness. */
body.mini-compact .journey-conditions { display:grid; gap:7px; margin:11px 0 15px; padding:11px 12px; border:1px solid #eadfe5; background:#ffffffd9; border-radius:14px; color:#5f4b58; font-size:12px; line-height:1.4; }
body.mini-compact .journey-conditions-head { display:flex; align-items:center; justify-content:space-between; gap:9px; }
body.mini-compact .journey-conditions-head b { font-size:12px; font-weight:600; }
body.mini-compact .journey-conditions-head small { font-size:10px; color:#8b7482; }
body.mini-compact .journey-condition { display:flex; align-items:flex-start; gap:7px; min-width:0; }
body.mini-compact .journey-condition > span { min-width:0; }
body.mini-compact .journey-condition p { margin:0; }
body.mini-compact .journey-condition small { color:#826c79; font-size:11px; line-height:1.4; }
body.mini-compact .journey-weather { display:flex; align-items:center; gap:7px; padding-top:7px; border-top:1px solid #eee6eb; font-size:12px; color:#735c6b; }

@media (max-width:360px) {
 body.mini-compact .app-header { padding-left:12px; padding-right:12px; }
 body.mini-compact .brand { font-size:16px; gap:6px; }
 body.mini-compact .brand img { width:29px; height:29px; }
 body.mini-compact .brand small { font-size:7px; }
 body.mini-compact .city-header { max-width:150px; padding:8px; font-size:10px; }
 body.mini-compact .account-avatar { display:none; }
 body.mini-compact .app-main { padding-left:11px; padding-right:11px; }
 body.mini-compact .journey-hero h1 { font-size:25px; }
 body.mini-compact .journey-hero-compact h1 { font-size:22px; }
 body.mini-compact .route-choice b { font-size:15px; }
 body.mini-compact .journey-art { gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
 body.mini-compact [data-mini-motion] { transform:none !important; }
}

body.mini-compact .conditions-widget { display:grid; gap:8px; margin:10px 0 15px; padding:11px 12px; border:1px solid #eadfe5; background:#ffffffdb; border-radius:14px; color:#66515f; font-size:12px; line-height:1.4; }
body.mini-compact .conditions-widget h2,body.mini-compact .conditions-widget h3 { margin:0; font-size:12px; line-height:1.4; color:#604654; }
body.mini-compact .conditions-weather { display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; font-size:12px; }
body.mini-compact .conditions-roads { display:grid; gap:7px; }
body.mini-compact .conditions-road { min-width:0; font-size:12px; line-height:1.4; }
body.mini-compact .conditions-road > p { margin:2px 0 0; }
body.mini-compact .conditions-stamp,body.mini-compact .conditions-time { font-size:10px; line-height:1.35; color:#917c89; }
body.mini-compact .conditions-status { color:#806b78; font-size:11px; line-height:1.4; }
body.mini-compact .conditions-road.is-unavailable,body.mini-compact .conditions-road[data-fresh="false"] { color:#8d8089; }
html[data-messenger] body.mini-compact .app-header { padding-top:max(12px,env(safe-area-inset-top,0px),var(--host-safe-top,0px)); padding-left:max(14px,env(safe-area-inset-left,0px),var(--host-safe-left,0px)); padding-right:max(14px,env(safe-area-inset-right,0px),var(--host-safe-right,0px)); }
html[data-messenger] body.mini-compact .app-main { padding-left:max(14px,env(safe-area-inset-left,0px),var(--host-safe-left,0px)); padding-right:max(14px,env(safe-area-inset-right,0px),var(--host-safe-right,0px)); }
body.mini-compact .flow-content > .summary { display:none; }
body.mini-compact .flow-arrival { animation:flow-reveal .7s ease both; }
body.mini-compact .conditions-road { display:flex; align-items:flex-start; gap:6px; }
body.mini-compact .conditions-road-copy { flex:1; min-width:0; }
body.mini-compact .conditions-road-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; font-weight:550; }
body.mini-compact .conditions-road-heading .conditions-time { flex:0 0 auto; font-size:12px; color:#5e4352; }
body.mini-compact .conditions-status { display:inline; font-size:11px; }
body.mini-compact .conditions-road-stamp { float:right; margin-left:6px; font-size:9px; color:#8a7582; }
body.mini-compact .conditions-detail { display:block; font-size:10px; line-height:1.4; }
body.mini-compact .conditions-temperature { white-space:nowrap; }
body.mini-compact .conditions-heading { font-size:11px; color:#735467; }
body.mini-compact .conditions-temperatures { display:flex; gap:6px; flex-wrap:wrap; }
@keyframes flow-reveal { from{box-shadow:0 0 0 3px #e94a6d24} to{box-shadow:0 0 0 0 #e94a6d00} }
@media(prefers-reduced-motion:reduce){body.mini-compact .flow-arrival{animation:none}}

body.mini-compact fieldset.flow-form-stage { margin:0; padding:0; min-inline-size:0; }
body.mini-compact .flow-form-stage[hidden],body.mini-compact .flow-content[hidden] { display:none; }
body.mini-compact .flow-form-legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body.mini-compact .flow-form-stage .flow-content > h2:first-child { display:none; }
body.mini-compact .flow-form-stage .flow-next > .button { width:100%; }

body.mini-compact .conditions-weather { display:block; }
body.mini-compact .conditions-temperatures { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
body.mini-compact .conditions-temperature { font-size:12px; line-height:1.45; white-space:nowrap; }
body.mini-compact .conditions-temperature strong { color:#59414f; font-weight:650; margin-left:3px; }
body.mini-compact .conditions-separator { color:#c5a8b6; }
body.mini-compact .conditions-stamp { display:block; margin-top:3px; }
body.mini-compact .conditions-heading { padding-top:7px; border-top:1px solid #eee5eb; font-size:12px; color:#674a5c; }
body.mini-compact .conditions-road { display:flex; align-items:flex-start; gap:7px; }
body.mini-compact .conditions-indicator { flex:0 0 13px; font-size:10px; line-height:1.8; }
body.mini-compact .conditions-road-copy { flex:1; min-width:0; }
body.mini-compact .conditions-road-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 9px; font-size:12px; color:#674a59; line-height:1.4; }
body.mini-compact .conditions-road-heading > span { min-width:0; }
body.mini-compact .conditions-road-heading .conditions-time { color:#5d3e4f; white-space:nowrap; font-size:12px; font-weight:650; line-height:1.4; }
body.mini-compact .conditions-status { display:inline; font-size:11px; line-height:1.5; color:#85717e; }
body.mini-compact .conditions-detail { display:block; font-size:11px; line-height:1.5; color:#806776; }
body.mini-compact .conditions-road-stamp { display:inline; margin-left:6px; font-size:10px; color:#9b8794; white-space:nowrap; }

body.mini-compact .journey-datetime { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:9px; }
body.mini-compact .journey-datetime > div { min-width:0; }
body.mini-compact .journey-datetime input { width:100%; min-width:0; min-inline-size:0; max-width:100%; }
body.mini-compact .time-pages { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:9px; margin:-3px 0 11px; }
body.mini-compact .time-pages .button { width:44px; min-height:44px; padding:3px; font-size:24px; font-weight:400; line-height:1; background:#fff9fc; }
body.mini-compact .time-pages > span { text-align:center; font-size:11px; line-height:1.4; color:#826575; font-variant-numeric:tabular-nums; }

body.mini-compact .parcel-essential > b, body.mini-compact .parcel-essential > small { display:block; }
body.mini-compact .parcel-essential { margin:10px 0; }
body.mini-compact .parcel-essential > p { margin:7px 0; }
/* 118: search audience uses the same external role switch as creation. */
body.mini-compact .find-role-switch {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  width:100%;
  gap:4px;
  box-sizing:border-box;
}
body.mini-compact .find-role-switch button {
  min-width:0;
  min-height:44px;
  padding:9px 5px;
  gap:5px;
  font-size:12px;
  line-height:1.3;
}
body.mini-compact .find-role-switch button span {
  min-width:0;
  white-space:normal;
  overflow-wrap:normal;
}
body.mini-compact .find-role-switch .app-icon {
  width:16px;
  height:16px;
  flex:0 0 16px;
}