:root{--navy:#173b52;--navy2:#1d5675;--muted:#657f8d;--blue:#1268a8;--pink:#12bd70;--edge:#d5e9ef;--soft:#f3f8ff}*{box-sizing:border-box}body{margin:0;color:var(--navy);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{min-height:100dvh;max-width:720px;margin:auto;position:relative;overflow:hidden;background:radial-gradient(ellipse at 106% 29%,#e8f4ff 0,transparent 30%),#fff}.app:before{content:"";position:absolute;right:-200px;top:210px;width:430px;height:510px;border:75px solid #eaf4ff;border-radius:50%;pointer-events:none;opacity:.75}.content{position:relative;padding:25px 24px 112px}.brand-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px}.brand{line-height:1.05;white-space:nowrap}.brand-name{font-size:clamp(20px,5vw,29px);letter-spacing:-1.4px}.brand-name strong{font-weight:800}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;vertical-align:middle;background:var(--pink);border-radius:50%;color:#fff;font-weight:900;font-style:italic;margin:0 3px;transform:rotate(-12deg)}.brand-strip{background:linear-gradient(100deg,#59b5e1,#183668 60%,#dc0078);color:white;font-size:clamp(11px,2.9vw,16px);font-style:italic;border-radius:50px;padding:3px 13px;margin-top:3px;max-width:max-content}.brand-strip strong{font-weight:800}.circle-btn{border:0;border-radius:50%;background:#e8f1ff;color:var(--navy);width:48px;height:48px;display:grid;place-items:center}.icon{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.circle-btn .icon{width:25px;height:25px}h1{font-size:clamp(39px,10vw,54px);letter-spacing:-2.6px;line-height:1.03;margin:0 0 7px;font-weight:800}h2{font-size:clamp(24px,5vw,29px);font-weight:800;letter-spacing:-.6px}.subtitle{color:var(--muted);font-size:clamp(19px,4.5vw,24px);line-height:1.2;margin:0 0 25px;max-width:340px}.panel{border:1px solid #a9cdfd;border-radius:16px;background:#fff;box-shadow:0 8px 16px rgba(25,64,126,.045)}.journey-panel{padding:16px;margin-bottom:24px}.journey-panel.active{border-color:#aee3bf;background:#fbfffb}.journey-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.pill{color:#fff;background:var(--blue);border-radius:40px;padding:6px 12px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700}.pill.active{background:#166d2a}.pill .icon{width:17px;height:17px}.ref{font-size:13px;white-space:nowrap}.journey-main{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:center;margin:14px 0}.stops{position:relative;padding-left:35px}.stops:before{position:absolute;content:"";left:11px;top:17px;bottom:17px;border-left:2px dashed var(--navy)}.stop{position:relative;margin:0 0 15px}.stop:last-child{margin-bottom:0}.stop:before{position:absolute;content:"";left:-31px;top:7px;width:15px;height:15px;border-radius:50%;border:3px solid var(--navy);background:#fff}.stop:first-child:before{background:var(--blue);border-color:var(--blue)}.active .stop:first-child:before{background:#17722d;border-color:#17722d}.stop strong{display:block;font-size:18px;line-height:1.15}.stop small{display:block;font-size:13px;color:var(--muted);line-height:1.25;margin-top:3px}.journey-side{padding:10px;background:#f5f9ff;border-radius:11px;min-height:104px}.journey-side .icon{width:26px;height:26px}.side-top{display:flex;align-items:flex-start;gap:7px}.side-top small{display:block;color:var(--muted);font-size:12px}.side-top strong{font-size:18px;line-height:1.15}.side-bottom{border-top:1px solid #ccd8e7;margin-top:8px;padding-top:7px;font-size:12px;color:var(--muted)}.side-bottom b{display:inline-block;color:var(--navy);font-size:12px}.plate{background:#ffda27;border-radius:4px;padding:3px 6px;font-weight:800;color:#172f57!important;margin-top:2px}.primary-btn{width:100%;border:0;background:#1268a8;color:white;border-radius:10px;min-height:49px;padding:11px 45px 11px 15px;position:relative;text-align:center;font-size:16px;font-weight:650}.primary-btn .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:19px;height:19px}.primary-btn:disabled{opacity:.55;cursor:not-allowed}.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 15px}.action-card{border-radius:13px;padding:13px 10px 14px;text-align:left;border:1px solid #c8dfff;background:#f8fbff;color:var(--navy);min-height:126px;position:relative}.action-card.issue{border-color:#ffd5e2;background:#fffbfd}.action-card.trips{border-color:#e3d5ff;background:#fdfaff}.action-card .bubble{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#dcecff;color:#1c5baf;margin-bottom:8px}.action-card.issue .bubble{background:#ffe0eb;color:#b52056}.action-card.trips .bubble{background:#ebe0ff;color:#503096}.action-card .chevron{position:absolute;top:21px;right:9px;width:15px;height:15px}.action-card strong{display:block;font-size:14px;line-height:1.15}.action-card small{display:block;color:var(--muted);font-size:12px;line-height:1.26;margin-top:4px}.help-card{width:100%;display:flex;align-items:center;gap:15px;text-align:left;padding:13px 15px;background:#fff;color:var(--navy);border:1px solid var(--edge);border-radius:13px}.help-card .bubble{display:grid;place-items:center;border-radius:50%;width:43px;height:43px;background:#e7f0ff;flex:none}.help-card strong{font-size:17px}.help-card small{display:block;color:var(--muted);font-size:13px}.help-card>.icon{margin-left:auto;width:18px;height:18px}.scene{position:relative;margin:18px -24px -1px;width:calc(100% + 48px);height:auto;display:block}.bottom-nav{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-around;align-items:stretch;background:#fff;box-shadow:0 -5px 18px #28497615;padding:8px 4px max(8px,env(safe-area-inset-bottom));min-height:71px}.bottom-nav button{border:0;background:none;color:#657695;font-size:11px;display:grid;place-items:center;gap:2px;min-width:65px;position:relative}.bottom-nav button.selected{color:var(--navy);font-weight:700}.bottom-nav button.selected:after{content:"";position:absolute;bottom:-2px;height:3px;width:34px;background:var(--pink);border-radius:3px}.bottom-nav .icon{width:23px;height:23px}.login .content{padding-top:30px}.login .brand-row{justify-content:center;margin-bottom:65px}.login .subtitle{max-width:none;margin-bottom:28px}.login .form-label{font-weight:700}.field{border:1px solid #bdcce5;border-radius:10px;padding:5px 7px;background:#fff;min-height:30px;color:var(--navy)}.field:focus{border-color:#397ee2;box-shadow:0 0 0 3px #cfe3ff}.field::placeholder{color:#7887a1}.login .primary-btn{margin:10px 0 22px}.login .form-group{margin-bottom:17px}.phone-row{display:flex}.phone-row select{width:100px;border-radius:10px 0 0 10px;background:#f4f9ff}.phone-row input{min-width:0;flex:1;border-radius:0 10px 10px 0;border-left:0}.lock-note{display:flex;gap:14px;color:var(--muted);font-size:14px;margin:5px 0 12px}.lock-note .bubble{background:#dff6ff;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;color:var(--navy);flex:none}.fine-print{font-size:12px;color:var(--muted);margin-left:57px}.auth-art{margin-top:55px;max-height:240px;object-fit:cover}.page-title{display:flex;align-items:center;gap:13px;margin-bottom:19px}.back-btn{background:#eef5ff;border:0;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:var(--navy)}.page-title h1{font-size:30px;letter-spacing:-1px;margin:0}.subpage .brand-row{margin-bottom:25px}.section-copy{color:var(--muted);font-size:14px;margin:-8px 0 20px}.form-card{padding:18px}.form-card label{display:block;font-weight:650;font-size:13px;margin-bottom:6px}.form-card .form-control,.form-card .form-select{border-color:#cbd8ed;padding:11px;border-radius:9px;color:var(--navy);margin-bottom:15px}.form-card textarea{min-height:95px}.form-card .primary-btn{margin-top:5px}.journey-list{display:grid;gap:13px}.list-item{padding:17px;text-align:left;color:var(--navy);width:100%;border:1px solid var(--edge);border-radius:14px;background:white}.list-item .row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.list-item strong{font-size:17px}.list-item small{color:var(--muted);display:block;margin-top:4px}.detail-map{height:210px;border-radius:15px;background:linear-gradient(125deg,#eaf4fb,#e0f0e8);position:relative;overflow:hidden;margin-bottom:16px}.detail-map:before,.detail-map:after{content:"";position:absolute;transform:rotate(-30deg);background:#fff;box-shadow:0 0 0 8px #c8dce3}.detail-map:before{width:500px;height:17px;left:-60px;top:67px}.detail-map:after{width:420px;height:12px;left:25px;top:158px;transform:rotate(27deg)}.route-line{position:absolute;z-index:1;left:27%;top:41%;width:51%;height:42%;border-left:5px solid #276cce;border-bottom:5px solid #276cce;border-radius:0 0 0 70px;transform:rotate(-21deg)}.map-pin{position:absolute;z-index:2;padding:5px 8px;background:white;border-radius:20px;color:var(--navy);font-size:12px;font-weight:700;box-shadow:0 3px 9px #233e5840}.map-pin.one{left:15%;top:22%}.map-pin.two{right:8%;bottom:20%}.info-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e4eaf5;padding:13px 0;font-size:14px}.info-row span{color:var(--muted)}.info-row strong{text-align:right}.empty-panel{text-align:center;padding:26px 16px 15px;margin-bottom:27px}.empty-icon{width:88px;height:88px;border-radius:50%;background:#eaf4ff;display:grid;place-items:center;margin:0 auto 9px;color:var(--navy)}.empty-icon .icon{width:46px;height:46px}.empty-panel h2{margin:5px 0}.empty-panel p{color:var(--muted);margin-bottom:18px}.faq details{border-bottom:1px solid #e2eafb;padding:14px 0}.faq summary{font-weight:700;cursor:pointer}.faq p{color:var(--muted);font-size:14px;margin:9px 0 0}.app-toast{position:fixed;z-index:20;left:50%;bottom:90px;transform:translateX(-50%);max-width:min(90%,390px);width:max-content;padding:11px 16px;background:#183966;color:#fff;border-radius:9px;box-shadow:0 5px 20px #172d5680;display:none;font-size:14px}.app-toast.show{display:block}.demo-banner{background:#fff4d9;color:#503e12;padding:7px 16px;text-align:center;font-size:12px;position:relative;z-index:2}.demo-controls{display:flex;gap:5px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--muted)}.demo-controls button{border:1px solid #bad0ef;background:#fff;border-radius:15px;padding:3px 8px;color:var(--navy)}.demo-controls button.selected{background:#1268a8;color:#fff}.muted{color:var(--muted)}@media(max-width:370px){.content{padding-left:16px;padding-right:16px}.scene{margin-left:-16px;width:calc(100% + 32px)}.journey-main{grid-template-columns:1fr}.journey-side{min-height:0}.actions{gap:5px}.action-card{padding:10px 6px}.action-card strong{font-size:12px}.action-card small{font-size:11px}}@media(min-width:650px){.content{padding-left:42px;padding-right:42px}.scene{margin-left:-42px;width:calc(100% + 84px)}.action-card{min-height:145px}.action-card strong{font-size:16px}.action-card small{font-size:13px}.journey-main{gap:32px}}
.app{display:flex;flex-direction:column}.app>.content{flex:1;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:720px;min-height:72px;z-index:10;flex:none;padding-bottom:max(8px,env(safe-area-inset-bottom));border-top:1px solid #e7edfa}
.app:has(input:focus,textarea:focus,select:focus) .bottom-nav{display:none}

/* Compact phone layout: keep real-size controls and reduce decorative space. */
@media (max-width: 600px) {
  .app > .content { padding: 14px 18px calc(88px + env(safe-area-inset-bottom)); }
  .brand-row { margin-bottom: 17px; gap: 10px; }
  .brand-name { font-size: clamp(18px, 5vw, 22px); letter-spacing: -.8px; }
  .brand-mark { width: 25px; height: 25px; margin: 0 2px; }
  .brand-strip { font-size: 11px; padding: 2px 10px; }
  .circle-btn { width: 42px; height: 42px; }
  .home-screen h1, .login h1 { font-size: 30px; letter-spacing: -1.8px; margin-bottom: 3px; }
  .home-screen .subtitle, .login .subtitle { font-size: 14px; line-height: 1.2; margin-bottom: 15px; }
  .journey-panel { padding: 12px; margin-bottom: 16px; }
  .journey-main { margin: 11px 0; }
  .stop { margin-bottom: 12px; }
  .stop strong { font-size: 16px; }
  .stop small { font-size: 12px; }
  .journey-side { padding: 8px; min-height: 0; }
  .side-top strong { font-size: 16px; }
  .side-top small, .side-bottom { font-size: 11px; }
  .pill { font-size: 12px; padding: 5px 10px; }
  .primary-btn { min-height: 30px; font-size: 15px; padding-top: 5px; padding-bottom: 5px; }
  .home-screen h2 { font-size: 25px; margin-bottom: 7px !important; }
  .actions { gap: 7px; margin: 5px 0 11px; }
  .action-card { padding: 10px 8px; min-height: 112px; }
  .action-card .bubble { width: 35px; height: 35px; margin-bottom: 6px; }
  .action-card .bubble .icon { width: 21px; height: 21px; }
  .action-card strong { font-size: 12px; }
  .action-card small { font-size: 11px; }
  .help-card { padding: 9px 11px; min-height: 56px; }
  .help-card .bubble { width: 36px; height: 36px; }
  .help-card strong { font-size: 15px; }
  .help-card small { font-size: 12px; }
  .scene { width: calc(100% + 36px); height: 105px; margin: 12px -18px 0; object-fit: cover; object-position: center bottom; }
  .empty-panel { padding: 15px 12px 12px; margin-bottom: 18px; }
  .empty-icon { width: 64px; height: 64px; margin-bottom: 5px; }
  .empty-icon .icon { width: 34px; height: 34px; }
  .empty-panel p { font-size: 14px; margin-bottom: 12px; }
  .bottom-nav { min-height: 66px; padding-top: 6px; }
  .bottom-nav .icon { width: 21px; height: 21px; }
  .login .brand-row { margin-bottom: 36px; }
  .login .primary-btn { margin: 3px 0 6px; }
  .login .form-group { margin-bottom: 12px; }
  .login .lock-note { font-size: 13px; }
  .login .auth-art { margin-top: 26px; }
  .subpage .brand-row { margin-bottom: 19px; }
}
@media (max-width: 600px) and (max-height: 780px) {
  .home-screen .scene, .login .auth-art { display: none; }
  .home-screen .content { padding-top: 10px; }
  .home-screen .brand-row { margin-bottom: 11px; }
  .home-screen .journey-panel { margin-bottom: 11px; }
}
@media (max-width: 350px) {
  .app > .content { padding-left: 12px; padding-right: 12px; }
  .brand-name { font-size: 17px; }
  .brand-mark { width: 22px; height: 22px; }
  .home-screen h1 { font-size: 25px; }
  .scene { width: calc(100% + 24px); margin-left: -12px; }
}

/* Booking selector from the supplied Book transport mockup. */
.book-screen .content { display: flex; flex-direction: column; }
.book-screen h1 { font-size: clamp(22px, 8vw, 48px); letter-spacing: -1.7px; margin: 0 0 5px; }
.book-screen .subtitle { max-width: none; font-size: clamp(14px, 4vw, 20px); margin-bottom: 25px; }
.book-screen h2 { font-size: clamp(22px, 5vw, 27px); margin: 0 0 12px; }
.book-screen section + section { margin-top: 26px; }
.booking-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.booking-option { display: flex; align-items: center; min-width: 0; min-height: 118px; padding: 13px; gap: 11px; border: 1px solid #bddcff; background: #f9fcff; color: var(--navy); border-radius: 12px; text-align: left; }
.booking-option.purple { background: #fcfaff; border-color: #dfcaff; }
.booking-option.pink { background: #fff9fc; border-color: #ffcbdc; }
.booking-option.cyan { background: #f7fdff; border-color: #b9e8fa; }
.booking-icon { display: grid; place-items: center; width: 53px; height: 53px; flex: none; border-radius: 50%; color: #1466c8; background: #e3f0ff; }
.purple .booking-icon { color: #5522a2; background: #eee3ff; }
.pink .booking-icon { color: #a22167; background: #ffe2ed; }
.cyan .booking-icon { color: #0e82bd; background: #def5ff; }
.booking-icon .icon { width: 31px; height: 31px; }
.booking-text { flex: 1; min-width: 0; }
.booking-text strong { display: block; font-size: 16px; line-height: 1.16; }
.booking-text small { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); margin-top: 4px; }
.booking-option .booking-arrow { width: 17px; height: 17px; flex: none; }
.booking-option:focus-visible { outline: 3px solid #1268a8; outline-offset: 2px; }
.book-screen .booking-scene { margin-top: auto; min-height: 105px; max-height: 185px; object-fit: cover; object-position: center bottom; }
@media (max-width: 600px) {
  .book-screen .brand-row { margin-bottom: 22px; }
  .book-screen h1 { font-size: clamp(22px, 8vw, 40px); }
  .book-screen .subtitle { font-size: 14px; margin-bottom: 23px; }
  .book-screen h2 { font-size: 22px; margin-bottom: 10px; }
  .book-screen section + section { margin-top: 24px; }
  .booking-grid { gap: 8px; }
  .booking-option { min-height: 98px; padding: 9px; gap: 7px; }
  .booking-icon { width: 39px; height: 39px; }
  .booking-icon .icon { width: 24px; height: 24px; }
  .booking-text strong { font-size: 12px; }
  .booking-text small { font-size: 11px; line-height: 1.25; }
  .booking-option .booking-arrow { width: 13px; height: 13px; }
  .book-screen .booking-scene { height: 125px; min-height: 75px; margin-top: auto; }
}
@media (max-width: 600px) and (max-height: 780px) {
  .book-screen .brand-row { margin-bottom: 14px; }
  .book-screen .subtitle { margin-bottom: 15px; }
  .book-screen section + section { margin-top: 14px; }
  .booking-option { min-height: 86px; }
  .book-screen .booking-scene { height: 85px; min-height: 55px; }
}
@media (max-width: 350px) {
  .booking-option { gap: 5px; padding: 7px; }
  .booking-icon { width: 34px; height: 34px; }
  .booking-text strong { font-size: 11px; }
  .booking-text small { font-size: 10px; }
  .booking-option .booking-arrow { width: 11px; }
}

/* Six-step booking, journey list and management screens. */
.wizard h1,.journeys-screen h1,.journey-detail h1,.subpage>.content>h1{font-size:clamp(20px,7vw,43px);letter-spacing:-1.4px}
.wizard .subtitle,.journeys-screen .subtitle,.journey-detail .subtitle,.subpage>.content>.subtitle{font-size:14px;margin:3px 0 16px}
.wizard-progress{display:flex;justify-content:space-between;align-items:center;position:relative;margin:8px 5px 18px}
.wizard-progress:before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:#d6e4fa;z-index:0}
.wizard-progress span{position:relative;z-index:1;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#e7effb;color:#63718e;font-weight:700}
.wizard-progress .done{background:#1268a8;color:#fff}.wizard-progress .current{background:#1164dd;color:#fff}
.wizard-form h2{font-size:19px;margin:2px 0 14px}.wizard-form h2:not(:first-child){margin-top:16px}
.wizard-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.wizard-buttons .primary-btn{min-height:45px}
.outline-btn{border:1px solid #1268a8;color:#1254b4;background:white;border-radius:9px;min-height:44px;padding:8px 14px;font-weight:650}
.choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 16px}
.choice-row label{padding:12px;border:1px solid #cddffb;border-radius:10px;font-size:13px;font-weight:650;display:flex;align-items:center;gap:7px}
.choice-row input,.check-row input{accent-color:#1263d6}.vehicle-choices label{font-size:12px}.vehicle-choices .icon{width:18px;height:18px}
.check-row{display:flex;align-items:center;gap:10px;border:1px solid #d5e9ef;border-radius:8px;padding:10px;margin-bottom:8px!important;font-size:13px}
.text-link{border:0;background:none;padding:0;color:#1361c9;text-decoration:underline;font-size:13px;margin:-8px 0 14px}
.passenger-card{border:1px solid #cbdfff;border-radius:11px;padding:13px;margin:12px 0}
.passenger-card legend{float:none;width:auto;font-weight:700;font-size:15px;padding:0 4px;margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wizard-form h2 button{float:right;background:none;border:0;color:#1265d3;font-size:13px;font-weight:600}
.wizard-form>p{color:#637493;font-size:14px;border-bottom:1px solid #e6ecf7;padding-bottom:10px}
.confirmation{text-align:center;padding:30px 20px}.confirmation h2{font-size:22px}.confirmation p{color:#637493}.success-badge{width:75px;height:75px;border-radius:50%;background:#12a46e;display:grid;place-items:center;color:#fff;font-size:44px;margin:0 auto 16px}
.journey-tabs{display:flex;gap:5px;margin:8px 0 14px}.journey-tabs button{flex:1;border:1px solid #bdd9ff;background:#fff;border-radius:9px;color:#204076;min-height:41px;padding:5px 3px;font-size:12px}.journey-tabs button.selected{background:#1268a8;color:#fff}.journey-tabs b{background:#e7f0ff;color:#173b76;border-radius:15px;padding:2px 6px;margin-left:3px}
.journey-search{margin:0 0 15px}.journeys-screen h2{font-size:20px}.journey-tile{display:block}.status-chip{display:inline-block;border-radius:20px;background:#e8f4ff;color:#144a9f;font-size:12px;padding:3px 9px;text-transform:capitalize}.status-chip.active,.status-chip.confirmed,.status-chip.upcoming{background:#e1faed;color:#13714c}.status-chip.cancelled{background:#ffe7ea;color:#a62241}
.trip-summary{display:flex;align-items:center;gap:10px;margin:13px 0;line-height:1.2}.trip-date{border-right:1px solid #d7e5fa;padding-right:8px;font-size:12px;max-width:84px;flex:none}.trip-places{display:grid;gap:3px;flex:1;min-width:0}.trip-places strong{font-size:14px}.trip-places span{font-size:11px;color:#677693}.trip-vehicle{width:88px;flex:none;text-align:center;font-size:11px}.trip-vehicle .icon{display:block;margin:auto;color:#2058ae;width:29px;height:29px}
.management-list{display:grid;gap:10px;margin:14px 0}.management-list .help-card{min-height:70px}.management-list .help-card small{margin-top:3px}.cancel-warning{background:#fff9ef;border:1px solid #ffcf80;padding:13px;border-radius:9px;margin-bottom:16px;font-size:14px}.cancel-warning p{margin:4px 0 0;color:#6a5b44}.danger-btn{background:#df1350}
@media(max-width:600px){.wizard-form{padding:14px}.wizard-form .form-control,.wizard-form .form-select{padding:9px;margin-bottom:11px}.wizard-progress{margin-bottom:14px}.journeys-screen .scene,.subpage .scene{height:95px}.trip-vehicle{width:68px}.trip-date{max-width:72px}.trip-places strong{font-size:12px}.journey-tabs button{font-size:11px}}
@media(max-width:350px){.trip-vehicle{width:51px}.trip-date{max-width:60px}.trip-places span{display:none}.journey-tabs b{margin:0}.choice-row{grid-template-columns:1fr 1fr}}

/* Operos brand asset from the current admin portal. */
.app{overflow:clip}.brand-row{position:sticky;top:0;z-index:6;padding:5px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}.brand{min-width:0;line-height:1}.operos-logo{display:block;width:min(315px,100%);height:auto;object-fit:contain;object-position:left center}.login .brand-row{justify-content:center}.login .operos-logo{width:min(340px,100%)}
.booking-option.pink{background:#f6fff9;border-color:#b9ebd1}.pink .booking-icon{color:#118657;background:#ddf8e9}
@media(max-width:600px){.brand-row{min-height:42px}.brand{max-width:calc(100% - 55px)}.operos-logo{width:min(270px,100%)}.login .brand{max-width:100%}.login .operos-logo{width:min(295px,100%)}}
@media(max-width:350px){.operos-logo{width:min(230px,100%)}}

/* The native shell already keeps the WebView above Android/iOS system controls. */
.bottom-nav{padding-bottom:8px;min-height:60px}
.app>.content{padding-bottom:78px}
@media (display-mode:standalone){
  .bottom-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .app>.content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){
  .app>.content{padding:10px 16px 72px}
  .brand-row{min-height:36px;margin-bottom:12px;padding:2px 0}
  .operos-logo{width:min(215px,100%)}
  .login .operos-logo{width:min(235px,100%)}
  .circle-btn{width:40px;height:40px}
  .circle-btn .icon{width:22px;height:22px}
  .home-screen h1,.login h1{font-size:20px;letter-spacing:-1.1px;margin-bottom:3px}
  .home-screen .subtitle,.login .subtitle{font-size:12px;line-height:1.2;margin-bottom:12px}
  .home-screen h2,.book-screen h2{font-size:19px;margin-bottom:7px!important}
  .demo-controls{margin-bottom:9px;font-size:11px}
  .demo-controls button{font-size:11px;padding:2px 7px}
  .journey-panel{padding:11px;margin-bottom:12px}
  .journey-main{margin:9px 0}
  .stop{margin-bottom:9px}
  .stop strong{font-size:15px}
  .stop small{font-size:11px}
  .journey-side{min-height:0;padding:8px}
  .side-top strong{font-size:15px}
  .pill{font-size:11px;padding:4px 9px}
  .ref{font-size:11px}
  .primary-btn{min-height:30px;font-size:14px;padding:4px 35px 8px 12px}
  .actions{margin:4px 0 9px}
  .action-card{min-height:98px}
  .bottom-nav{min-height:58px;padding:4px 4px 6px}
  .bottom-nav button{font-size:10px;gap:1px;min-width:0;min-height:44px}
  .bottom-nav .icon{width:19px;height:19px}
  .bottom-nav button.selected:after{bottom:0}
  .book-screen h1{font-size:20px}
  .book-screen .subtitle{font-size:12px;margin-bottom:17px}
  .book-screen section+section{margin-top:17px}
  .booking-option{min-height:88px}
  .page-title h1,.wizard h1,.journeys-screen h1,.journey-detail h1,.subpage>.content>h1{font-size:18px}
  .wizard .subtitle,.journeys-screen .subtitle,.journey-detail .subtitle,.subpage>.content>.subtitle{font-size:12px}
  .scene{margin-left:-16px;width:calc(100% + 32px)}
}
@media (max-width:600px) and (display-mode:standalone){
  .app>.content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .bottom-nav{padding-bottom:max(6px,env(safe-area-inset-bottom))}
}
@media (max-width:350px){.operos-logo{width:min(195px,100%)}}