/* Shared app-like visual language for phone screens. Desktop layout remains unchanged. */
@media(max-width:767.98px){
 .app-shell{--surface:#fff;--surface-blue:#f1f6ff;--ink:#102a58;--muted:#607594;--line:#dce7f6;--blue:#1768ea;--green:#12965c;--gold:#ffc938;--radius-card:24px;background:#f3f6fb;color:var(--ink)}
 .app-shell>header{z-index:1040;position:relative}
 .app-shell .navbar{box-shadow:0 3px 18px #163b741c!important}
 .app-shell main.container{max-width:100%;padding:14px 12px 12px;margin-top:0!important;margin-bottom:12px!important}
 .app-shell main>.container{padding-inline:0}
 .app-shell main h1,.app-shell main h2,.app-shell main h3,.app-shell main h4,.app-shell main h5,.app-shell main h6{color:var(--ink);letter-spacing:-.02em}
 .app-shell main h1,.app-shell main h2{font-weight:850;line-height:1.65}
 .app-shell main p.text-muted,.app-shell main small.text-muted{color:var(--muted)!important}
 .app-shell main .card{border:1px solid var(--line)!important;border-radius:var(--radius-card)!important;background-color:var(--surface);background-image:radial-gradient(ellipse at 100% 0,rgba(86,155,255,.11),transparent 32%),radial-gradient(ellipse at 0 100%,rgba(106,174,255,.075),transparent 32%);box-shadow:0 7px 24px rgba(30,75,139,.09)!important;overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease}
 .app-shell main .card-header{padding:16px 18px!important;border-bottom:1px solid #e3ecf8!important;border-radius:var(--radius-card) var(--radius-card) 0 0!important;background:linear-gradient(120deg,#edf4ff,#fff)!important;color:var(--ink)!important}
 .app-shell main .card-header h1,.app-shell main .card-header h2,.app-shell main .card-header h3,.app-shell main .card-header h4,.app-shell main .card-header h5,.app-shell main .card-header h6{color:var(--ink)!important;font-size:1rem;line-height:1.8}
 .app-shell main .card-header .bi{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:#e1edff;color:var(--blue);font-size:20px;vertical-align:middle}
 .app-shell main .card-body{padding:clamp(16px,4.5vw,22px)!important}
 .app-shell main .card .card{background-color:#f8faff;background-image:none;box-shadow:none!important;border-color:#e0e9f5!important;border-radius:18px!important}
 .app-shell main .card .card-header{border-radius:18px 18px 0 0!important}
 .app-shell main .btn:not(.btn-close):not(.btn-link){min-height:46px;padding:.68rem 1rem;border-radius:15px;font-weight:750;line-height:1.55;white-space:normal;box-shadow:0 3px 11px rgba(31,82,157,.08);transition:filter .16s ease,box-shadow .16s ease,background-color .16s ease}
 .app-shell main .btn:active:not(:disabled){filter:brightness(.94)}
 .app-shell main .btn-primary{background:linear-gradient(112deg,#3d91f6,#205be8);border-color:#3078ed;color:#fff;box-shadow:0 8px 20px #2e72e83b!important}
 .app-shell main .btn-success{background:linear-gradient(112deg,#20b875,#0a9359);border-color:#149e64;color:#fff}
 .app-shell main .btn-warning{background:linear-gradient(112deg,#ffdf74,#ffc733);border-color:#ffcf46;color:#243353}
 .app-shell main .btn-outline-primary,.app-shell main .btn-outline-secondary,.app-shell main .btn-outline-success,.app-shell main .btn-outline-danger,.app-shell main .btn-outline-dark{background:#fff}
 .app-shell main .btn-outline-primary{border-color:#397cff;color:#205bd2}
 .app-shell main .btn-outline-success{border-color:#21a36a;color:#138456}
 .app-shell main .btn-outline-danger{border-color:#ef5268;color:#d5324c}
 .app-shell main .btn-light{border-color:#dce7f5;color:#28456d}
 .app-shell main .btn-sm{min-height:42px;padding:.5rem .8rem;font-size:.84rem}
 .app-shell main .form-control,.app-shell main .form-select,.app-shell main textarea.form-control,.app-shell main .input-group-text{min-height:48px;border-radius:14px!important;border-color:#d6e1ef;background-color:#fff;color:var(--ink);box-shadow:0 2px 8px #193b6a08}
 .app-shell main textarea.form-control{min-height:100px}
 .app-shell main .form-control:focus,.app-shell main .form-select:focus{border-color:#6ba0f7;box-shadow:0 0 0 4px #4c8bf322}
 .app-shell main .form-label{color:#27436b;font-weight:750;margin-bottom:7px}
 .app-shell main .form-text,.app-shell main .text-muted{line-height:1.85}
 .app-shell main .input-group>.form-control,.app-shell main .input-group>.form-select{min-width:0}
 .app-shell main .input-group-text{padding-inline:12px;background:#f2f6fc;color:#456284}
 .app-shell main .badge{font-weight:700;line-height:1.55}
 .app-shell main .alert{border:1px solid var(--line);border-radius:18px;padding:16px;background:#f6f9ff;color:#294567}
 .app-shell main .accordion-item{border:1px solid var(--line);border-radius:18px!important;overflow:hidden;background:#fff;margin-bottom:12px}
 .app-shell main .accordion-button{min-height:58px;background:#f6f9ff;color:var(--ink);font-weight:800;box-shadow:none;padding:14px 16px}
 .app-shell main .accordion-button:not(.collapsed){background:#eaf2ff;color:#174eae}
 .app-shell main .accordion-body{padding:16px}
 .app-shell main .list-group-item{padding:14px 16px;border-color:#e4ecf6;background:rgba(255,255,255,.88)}
 .app-shell main .modal-content{border:1px solid var(--line)!important;border-radius:24px!important;overflow:hidden;box-shadow:0 24px 72px #0d255333}
 .app-shell main .modal-header{padding:17px 18px;border-bottom-color:#e3ecf8}
 .app-shell main .modal-footer{padding:14px 18px;gap:8px}
 .app-shell main table{--bs-table-bg:transparent}
 .app-shell main .table-responsive{border-radius:16px}
 .app-shell main .progress{border-radius:999px;background:#e6edf7}
 .app-shell main .progress-bar{border-radius:999px;background:linear-gradient(90deg,#21b87b,#078b56)!important}
 .app-shell main hr{border-color:#dce6f3;opacity:1}
 .app-shell main .trip-dashboard>.d-flex{gap:10px;margin-bottom:18px!important}
 .app-shell main .trip-dashboard>.d-flex h3{font-size:1.28rem}
 .app-shell main .trip-dashboard>.d-flex>.btn{min-width:112px;max-width:46%;min-height:48px}
 .app-shell main .trip-history-item>.card-body{padding:17px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important}
 .app-shell main .trip-history-item .bg-light{background:#f2f6fc!important}
 .app-shell main .trip-history-item .trip-preparation-card{border-color:#deebf6!important;background:linear-gradient(145deg,#f2f8ff,#fff)!important}
 .app-shell main .trip-dashboard .trip-card-actions .btn{min-height:42px}
 .app-shell main .trip-dashboard .trip-card-actions .badge{padding:.5rem .7rem}
 .app-shell main .trip-preparation-card .preparation-item{border-color:#e0e9f4;border-radius:13px;background:#fff;box-shadow:0 2px 8px #22457308}
 .app-shell main .preparation-item label{font-size:.86rem}
 .app-shell main .preparation-item label>small{color:#4e6685}
 .app-shell main .table>:not(caption)>*>*{padding:.65rem .55rem;vertical-align:middle}
 .app-shell main .pagination .page-link{min-width:42px;min-height:42px;display:grid;place-items:center;border-radius:12px;margin-inline:2px;color:#205bd2}
 .app-shell main .avatar,.app-shell main #avatarPreview{border:3px solid #e5efff;box-shadow:0 4px 15px #27579620!important}
 .app-shell main .row.g-2>.col-4>.p-3.border.rounded-3{border-radius:17px!important;border-color:#dce8f6!important;background:linear-gradient(145deg,#f2f7ff,#fff)!important;box-shadow:0 3px 12px #26558b0a}
 .app-shell main .container[style*="max-width"]{max-width:100%!important}
}
@media(max-width:380px){
 .app-shell{--radius-card:21px}
 .app-shell main.container{padding-inline:10px}
 .app-shell main .card-body{padding:15px!important}
 .app-shell main .btn:not(.btn-close):not(.btn-link){padding-inline:.78rem}
 .app-shell main .trip-history-heading{gap:7px;padding:13px}
 .app-shell main .trip-history-tag{font-size:.65rem;padding-inline:6px}
}
@media(prefers-reduced-motion:reduce){.app-shell main .card,.app-shell main .btn{transition:none!important}}

.create-trip-back{font-weight:750;box-shadow:0 3px 12px #2f67d314}

/* Shared image-led card headers across profile, finance, notifications and trips. */
@media(max-width:767.98px){
 .app-shell main .profile-summary-card{background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f8fbff)!important;background-position:center top,center!important;background-repeat:no-repeat;background-size:100% auto,cover!important;padding-top:24px!important}
 .app-shell main .profile-summary-card .profile-stat-card{border:1px solid #d9e6f6!important;border-radius:17px!important;background:linear-gradient(145deg,#f2f7ff,#fff)!important;box-shadow:0 4px 14px #214c8414!important;min-height:95px}
 .app-shell main .hms-card-banner{position:relative;isolation:isolate;overflow:hidden;min-height:130px;border:1px solid #d9e6f6!important;border-radius:20px!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f8fbff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% auto,cover!important}
 .app-shell main .financial-card-banner{display:flex;flex-direction:column;gap:12px;padding:18px!important}
 .app-shell main .financial-card-banner h5{font-size:1rem;line-height:1.7;margin:0}
 .app-shell main .financial-card-banner .row{background:rgba(241,246,255,.88)!important;border:1px solid #dfe9f7;border-radius:16px!important;padding:10px!important;row-gap:8px!important}
 .app-shell main .financial-card-body{background:#f5f8fd!important;padding:16px!important}
 .app-shell main .hms-notification-card{padding:13px!important;border:1px solid #d9e6f6!important;border-radius:20px!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#fbfcff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% auto,cover!important}
 .app-shell main .notif-card-heading{position:relative;isolation:isolate;margin:-3px -3px 10px!important;padding:20px 8px 12px;border-bottom:1px solid #e5edf8;border-radius:16px 16px 10px 10px;color:#102a58}
 .app-shell main .notif-card-heading .fw-bold{color:#102a58!important}
 .app-shell main .notif-item .text-secondary{color:#4c6381!important;line-height:1.85}
 .app-shell main .trip-history-item{border:1px solid #dbe7f7!important;border-radius:22px!important;background:#fff!important;overflow:hidden;box-shadow:0 8px 22px #193e7012!important}
 .app-shell main .trip-history-item.is-latest{border:2px solid #259b6d!important}
 .app-shell main .trip-history-item>.card-body{background:transparent!important;background-image:none!important}
 .app-shell main .trip-history-item .trip-card-date{display:none}
}

@media(max-width:767.98px){
 .app-shell main .hms-balance-summary-card{min-height:150px;color:#102a58!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f7faff)!important;background-position:center top,center!important;background-repeat:no-repeat;background-size:100% auto,cover!important;border:1px solid #d9e6f6!important}
 .app-shell main .hms-balance-summary-card{color:#102a58!important}.app-shell main .hms-balance-summary-card>.small{color:#536781!important;opacity:1!important}.app-shell main .hms-balance-summary-card h2{color:#102a58!important}.app-shell main .hms-balance-summary-card .badge{background:#e8f1ff!important;color:#2454a6!important;backdrop-filter:none!important}
 .app-shell main .hms-balance-member-card{border:1px solid #d9e6f6!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 14px #214c8412!important}
}

/* Shared image headers also apply on desktop; mobile rules above only tune spacing. */
.app-shell main .profile-summary-card{background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f8fbff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 170px,cover!important;padding-top:30px!important}
.app-shell main .profile-summary-card .profile-stat-card{border:1px solid #d9e6f6!important;border-radius:17px!important;background:linear-gradient(145deg,#f2f7ff,#fff)!important;box-shadow:0 4px 14px #214c8414!important;min-height:95px}
.app-shell main .hms-card-banner{position:relative;isolation:isolate;overflow:hidden;min-height:125px;border:0!important;border-bottom:1px solid #e3ecf8!important;border-radius:20px 20px 0 0!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f8fbff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 150px,cover!important}
.app-shell main .financial-card-banner{display:flex;flex-direction:column;gap:12px;padding:20px!important}
.app-shell main .financial-card-banner h5{font-size:1rem;line-height:1.7;margin:0}
.app-shell main .financial-card-banner .financial-trip-stats{background:rgba(241,246,255,.88)!important;border:1px solid #dfe9f7;border-radius:16px!important;padding:10px!important;row-gap:8px!important}
.app-shell main .financial-mobile-date{display:none}
.app-shell main .financial-card-body{background:#f5f8fd!important;padding:16px!important}
.app-shell main .hms-notification-card{padding:13px!important;border:1px solid #d9e6f6!important;border-radius:20px!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#fbfcff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 130px,cover!important}
.app-shell main .notif-card-heading{position:relative;isolation:isolate;margin:-3px -3px 10px!important;padding:20px 8px 12px;border-bottom:1px solid #e5edf8;border-radius:16px 16px 10px 10px;color:#102a58}
.app-shell main .notif-card-heading .fw-bold{color:#102a58!important}
.app-shell main .hms-balance-summary-card,.app-shell main .hms-balance-member-card{background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f7faff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 150px,cover!important;border:1px solid #d9e6f6!important}
.app-shell main .hms-balance-summary-card h2{color:#102a58!important}
.app-shell main .notif-item>.d-flex>.btn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex:0 0 42px!important;aspect-ratio:1/1;border-radius:50%!important;padding:0!important;display:grid!important;place-items:center!important;align-self:flex-start}
@media(max-width:767.98px){.app-shell main .financial-card-banner{min-height:110px;padding:15px!important}.app-shell main .financial-card-banner .financial-trip-title{margin-bottom:0!important;font-size:.94rem}.app-shell main .financial-mobile-date{display:block;margin-inline-start:27px;margin-top:2px;font-size:.68rem;line-height:1.4;color:#71839a;font-weight:600}.app-shell main .financial-trip-stats{display:none!important}.app-shell main .hms-balance-member-card{background-image:none!important}}

/* Decorative blue artwork for the new-trip form header on desktop and mobile. */
.app-shell main .create-trip-card{overflow:hidden}
.app-shell main .create-trip-card-header{min-height:142px;display:flex;align-items:flex-start;justify-content:center;padding:30px 22px 16px!important;border:0!important;border-radius:22px 22px 0 0!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f8fbff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 150px,cover!important;color:#102a58!important;text-align:center}
.app-shell main .create-trip-card-header h5{color:#102a58!important;font-size:1.04rem;line-height:1.8}
@media(max-width:767.98px){.app-shell main .create-trip-card-header{min-height:120px;padding:24px 16px 12px!important;background-size:100% 130px,cover!important}.app-shell main .create-trip-card-header h5{font-size:.9rem}}

/* Image-led top treatment for both sign-in steps. */
.app-shell main .auth-form-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #d9e6f6!important;border-radius:24px!important;background-color:#fff!important;background-image:url('/images/trip-card-header.png'),linear-gradient(145deg,#fff,#f7faff)!important;background-position:center top,center!important;background-repeat:no-repeat!important;background-size:100% 175px,cover!important;box-shadow:0 10px 28px #20467516!important}
.app-shell main .auth-form-card .card-body{position:relative;z-index:1}
@media(max-width:767.98px){.app-shell main .auth-form-card{background-size:100% 165px,cover!important;border-radius:22px!important}.app-shell main .auth-form-card .card-body{padding:16px!important}}