/* Al Haitham Transport identity layer, built from Omani UI Atlas v3 tokens and assets. */
:root {
    --ou-white: #ffffff;
    --ou-ivory-50: #fffdf9;
    --ou-ivory-100: #f5eee3;
    --ou-ivory-200: #e9ddcc;
    --ou-sand-100: #efe0ca;
    --ou-sand-200: #dfc7a3;
    --ou-sand-300: #d8bd94;
    --ou-brown-500: #9a642f;
    --ou-brown-600: #7e4e26;
    --ou-teal-500: #087f73;
    --ou-teal-600: #05665e;
    --ou-gold-500: #b78a45;
    --ou-red-500: #b12a2a;
    --ou-green-500: #397a4b;
    --ou-blue-500: #2674a8;
    --ou-slate-600: #334155;
    --ou-slate-900: #111827;
    --ou-primary: var(--ou-brown-500);
    --ou-primary-hover: var(--ou-brown-600);
    --ou-secondary: var(--ou-teal-500);
    --ou-secondary-hover: var(--ou-teal-600);
    --ou-accent: var(--ou-gold-500);
    --ou-danger: var(--ou-red-500);
    --ou-success: var(--ou-green-500);
    --ou-info: var(--ou-blue-500);
    --ou-bg: var(--ou-ivory-100);
    --ou-surface: var(--ou-white);
    --ou-surface-2: var(--ou-ivory-50);
    --ou-surface-3: var(--ou-sand-100);
    --ou-text: var(--ou-slate-900);
    --ou-text-muted: var(--ou-slate-600);
    --ou-border: rgba(74, 55, 35, 0.22);
    --ou-border-strong: rgba(74, 55, 35, 0.36);
    --ou-shadow-sm: 0 6px 18px rgba(56, 41, 25, 0.1);
    --ou-shadow-md: 0 18px 46px rgba(56, 41, 25, 0.15);
    --ou-shadow-lg: 0 28px 78px rgba(56, 41, 25, 0.2);

    --color-primary: var(--ou-primary);
    --color-primary-content: #ffffff;
    --color-secondary: var(--ou-secondary);
    --color-secondary-content: #ffffff;
    --color-accent: var(--ou-gold-500);
    --color-accent-content: #241709;
    --color-success: var(--ou-success);
    --color-warning: #bf7b16;
    --color-error: var(--ou-danger);
    --color-base-100: var(--ou-surface);
    --color-base-200: var(--ou-bg);
    --color-base-300: var(--ou-sand-100);
    --color-base-content: var(--ou-text);

    --bg: var(--ou-bg);
    --bg-soft: var(--ou-surface-2);
    --panel: #ffffff;
    --panel-solid: var(--ou-surface);
    --ink: var(--ou-text);
    --muted: #475569;
    --muted-2: #64748b;
    --line: var(--ou-border);
    --line-strong: var(--ou-border-strong);
    --primary: var(--ou-primary);
    --primary-dark: var(--ou-primary-hover);
    --primary-soft: color-mix(in srgb, var(--ou-primary) 11%, var(--ou-surface));
    --success: var(--ou-success);
    --success-soft: color-mix(in srgb, var(--ou-success) 12%, var(--ou-surface));
    --accent: var(--ou-accent);
    --accent-soft: color-mix(in srgb, var(--ou-accent) 15%, var(--ou-surface));
    --danger: var(--ou-danger);
    --danger-soft: color-mix(in srgb, var(--ou-danger) 11%, var(--ou-surface));
    --warning: #9b6412;
    --shadow: var(--ou-shadow-md);
    --shadow-soft: var(--ou-shadow-sm);
}

html[lang='ar'],
html[dir='rtl'] {
    font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
}

html[lang='en'],
html[dir='ltr'] {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

body.omani-identity {
    background:
        radial-gradient(circle at 12% 8%, rgba(183, 138, 69, 0.11), transparent 25rem),
        radial-gradient(circle at 88% 85%, rgba(8, 127, 115, 0.09), transparent 28rem),
        linear-gradient(180deg, var(--ou-surface-2) 0%, var(--ou-bg) 52%, var(--ou-ivory-200) 100%);
    color: var(--ou-text);
}

body.omani-identity::before {
    display: block;
    opacity: 0.035;
    background-image: url('/vendor/omani-ui/patterns/sadu-diamond.svg');
    background-size: 88px 88px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body.omani-identity::after {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    height: 4px;
    pointer-events: none;
    content: '';
    background: linear-gradient(
        90deg,
        var(--ou-red-500) 0 33.333%,
        var(--ou-gold-500) 33.333% 66.666%,
        var(--ou-green-500) 66.666% 100%
    );
}

.omani-page-ornament {
    position: fixed;
    inset-block-start: 5.25rem;
    inset-inline-end: -3.5rem;
    z-index: -1;
    width: 15rem;
    height: 15rem;
    opacity: 0.035;
    pointer-events: none;
    background: url('/vendor/omani-ui/patterns/corner-rosette.svg') center / contain no-repeat;
}

.ou-icon {
    width: 1.25em;
    height: 1.25em;
    max-width: none;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    vertical-align: -0.18em;
}

.ou-illustration {
    display: block;
    width: 100%;
    height: auto;
}

::selection {
    background: rgba(8, 127, 115, 0.2);
}

:focus-visible {
    outline-color: var(--ou-secondary);
}

input,
select,
textarea {
    border-color: var(--ou-border-strong);
    background: #ffffff;
    color: var(--ou-text);
}

input::placeholder,
textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(8, 127, 115, 0.7);
    box-shadow: 0 0 0 4px rgba(8, 127, 115, 0.12);
}

.topbar {
    min-height: 80px;
    border-color: var(--ou-border);
    background: rgba(255, 253, 249, 0.98);
    box-shadow: 0 8px 30px rgba(56, 41, 25, 0.055);
}

.brand {
    color: var(--ou-text);
}

.brand::before,
.login-brand-icon {
    border: 1px solid rgba(154, 100, 47, 0.15);
    background-color: var(--ou-surface);
    box-shadow: 0 9px 22px rgba(126, 78, 38, 0.15);
}

.brand small,
.muted-copy,
.pwa-muted {
    color: var(--ou-text-muted);
}

.topnav > a:not(.language-switch):hover,
.link-button:hover {
    border-color: rgba(154, 100, 47, 0.16);
    color: var(--ou-primary-hover);
    background: var(--ou-surface-2);
}

.language-switch,
.login-language,
.pwa-language-toggle,
.student-desktop-lang,
.console-language-switch {
    border-color: rgba(8, 127, 115, 0.22);
    background: rgba(8, 127, 115, 0.09);
    color: var(--ou-secondary-hover);
}

.auth-panel,
.panel,
.trip-card,
.empty-state,
.console-panel,
.console-pair,
.console-empty,
.console-students,
.console-top,
.console-stat,
.console-map,
.console-metric,
.list-item,
.pwa-card,
.student-desktop-header,
.driver-desktop-header {
    border-color: var(--ou-border);
    background: #ffffff;
    box-shadow: var(--ou-shadow-sm);
}

.button,
button.primary:not(.btn),
a.primary:not(.btn),
.pwa-primary-button,
.driver-current-actions .primary {
    border-color: var(--ou-primary);
    background: linear-gradient(135deg, var(--ou-primary), var(--ou-primary-hover));
    color: #fff;
    box-shadow: 0 9px 20px rgba(126, 78, 38, 0.16);
}

.button:not(.primary):not(.danger):not(.warning) {
    border-color: rgba(154, 100, 47, 0.2);
    background: var(--ou-surface);
    color: var(--ou-primary-hover);
}

.button:hover,
button.primary:not(.btn):hover,
a.primary:not(.btn):hover {
    border-color: var(--ou-primary-hover);
    background: var(--ou-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

.badge,
.pwa-status-pill {
    border-color: rgba(8, 127, 115, 0.16);
    background: rgba(8, 127, 115, 0.09);
    color: var(--ou-secondary-hover);
}

.eyebrow {
    color: var(--ou-primary);
}

.flash {
    border-color: rgba(57, 122, 75, 0.22);
    background: rgba(57, 122, 75, 0.1);
    color: #285d38;
}

.flash.error {
    border-color: rgba(177, 42, 42, 0.22);
    background: rgba(177, 42, 42, 0.09);
    color: #8f2424;
}

/* Public gateway */
.home-page .shell {
    padding-block-start: clamp(1.4rem, 4vw, 3.25rem);
}

.public-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--ou-border);
    border-radius: 1.5rem;
    padding: clamp(1rem, 3vw, 2rem);
    background:
        linear-gradient(135deg, #fffdf9, #eadcc8),
        var(--ou-surface);
    box-shadow: var(--ou-shadow-md);
}

.public-hero::before {
    position: absolute;
    inset-block-start: -5rem;
    inset-inline-start: -5rem;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    opacity: 0.045;
    content: '';
    background: url('/vendor/omani-ui/patterns/rosette-12.svg') center / contain no-repeat;
}

.public-hero::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: -1;
    height: 7px;
    content: '';
    background: linear-gradient(90deg, var(--ou-primary), var(--ou-accent), var(--ou-secondary));
}

.hero-mark {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid rgba(154, 100, 47, 0.18);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, var(--ou-surface), var(--ou-sand-100));
    color: var(--ou-primary);
    box-shadow: 0 12px 26px rgba(126, 78, 38, 0.13);
}

.hero-mark::before,
.hero-mark::after {
    display: none;
}

.hero-mark .ou-icon {
    width: 2.15rem;
    height: 2.15rem;
}

.hero-content h1 {
    color: var(--ou-text);
    text-wrap: balance;
}

.public-visual {
    border-color: rgba(154, 100, 47, 0.19);
    background:
        linear-gradient(rgba(255, 253, 249, 0.82), rgba(234, 217, 189, 0.88)),
        url('/vendor/omani-ui/patterns/window-lattice.svg') center / 92px 92px repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), var(--ou-shadow-sm);
}

.visual-map {
    background-image:
        linear-gradient(rgba(74, 55, 35, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 55, 35, 0.055) 1px, transparent 1px);
}

.visual-route,
.visual-route::before {
    background: linear-gradient(90deg, var(--ou-secondary), var(--ou-primary));
}

.visual-route::after {
    background: linear-gradient(90deg, var(--ou-primary), var(--ou-accent));
}

.visual-stop.start {
    background: var(--ou-red-500);
}

.visual-stop.mid {
    background: var(--ou-accent);
}

.visual-stop.end {
    background: var(--ou-green-500);
}

.visual-bus {
    display: grid;
    place-items: center;
    background: var(--ou-secondary);
    color: #fff;
    box-shadow: 0 15px 34px rgba(8, 127, 115, 0.24);
}

.visual-bus::before,
.visual-bus::after {
    display: none;
}

.visual-bus .ou-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.visual-stats {
    border-color: rgba(154, 100, 47, 0.22);
    background: #fffdf9;
    box-shadow: var(--ou-shadow-sm);
}

.visual-stats strong {
    color: var(--ou-secondary);
}

.gateway-card {
    position: relative;
    overflow: hidden;
    border-color: var(--ou-border);
    background: #ffffff;
    box-shadow: var(--ou-shadow-sm);
}

.gateway-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gateway-card::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--ou-primary), var(--ou-accent), var(--ou-secondary));
}

.gateway-card > .ou-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-block-end: 0.7rem;
    color: var(--ou-secondary);
}

.gateway-card span {
    border-color: rgba(154, 100, 47, 0.16);
    background: rgba(154, 100, 47, 0.08);
    color: var(--ou-primary-hover);
}

/* Authentication and registration */
.login-page,
.registration-page {
    background:
        radial-gradient(circle at 12% 18%, rgba(183, 138, 69, 0.13), transparent 26rem),
        radial-gradient(circle at 88% 82%, rgba(8, 127, 115, 0.12), transparent 28rem),
        linear-gradient(rgba(245, 238, 227, 0.94), rgba(233, 221, 204, 0.94)),
        url('/vendor/omani-ui/patterns/sadu-diamond.svg') center / 92px 92px repeat;
}

.login-page .auth-shell {
    width: min(1180px, 100%);
}

.login-screen {
    gap: clamp(1rem, 2.6vw, 2rem);
}

.login-form-card,
.login-visual-panel,
.auth-panel {
    border-color: var(--ou-border);
    background: #ffffff;
    box-shadow: var(--ou-shadow-md);
}

.login-form-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--ou-primary);
}

.login-form-card::after,
.auth-panel::after {
    position: absolute;
    inset-block-start: -3.5rem;
    inset-inline-end: -3.5rem;
    width: 12rem;
    height: 12rem;
    opacity: 0.04;
    pointer-events: none;
    content: '';
    background: url('/vendor/omani-ui/patterns/corner-rosette.svg') center / contain no-repeat;
}

.login-brand-icon {
    display: grid;
    place-items: center;
    color: var(--ou-secondary);
}

.login-brand-icon::before,
.login-brand-icon::after {
    display: none;
}

.login-brand-icon .ou-icon {
    width: 1.7rem;
    height: 1.7rem;
}

.login-heading h1,
.login-visual-copy h2,
.auth-panel h1,
.form-section h2 {
    color: var(--ou-text);
}

.login-form input,
.auth-panel input,
.auth-panel select {
    border-color: var(--ou-border-strong);
    background: #ffffff;
}

.login-visual-panel {
    background:
        linear-gradient(145deg, #fffaf2, #ead9bd),
        var(--ou-surface);
}

.login-visual-illustration {
    display: grid;
    min-height: 14rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--ou-border);
    border-radius: 1rem;
    background: var(--ou-surface-2);
}

.login-visual-illustration .ou-illustration {
    width: min(100%, 34rem);
}

.login-role-list div {
    border-color: var(--ou-border);
    background: #ffffff;
}

.login-role-icon {
    display: grid;
    place-items: center;
    background: rgba(154, 100, 47, 0.1);
    color: var(--ou-primary);
}

.login-role-icon.driver {
    background: rgba(8, 127, 115, 0.1);
    color: var(--ou-secondary);
}

.login-role-icon.admin {
    background: rgba(183, 138, 69, 0.13);
    color: #946c2f;
}

.login-role-icon::before,
.login-role-icon::after {
    display: none;
}

.login-role-icon .ou-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.auth-panel {
    border-top: 4px solid var(--ou-primary);
}

.auth-panel::before {
    border: 1px solid rgba(154, 100, 47, 0.15);
    background-color: var(--ou-surface);
    box-shadow: 0 10px 24px rgba(126, 78, 38, 0.14);
}

.role-card {
    border-color: var(--ou-border);
    background: var(--ou-surface-2);
}

.role-card:has(input:checked) {
    border-color: var(--ou-secondary);
    background: rgba(8, 127, 115, 0.08);
    box-shadow: 0 0 0 3px rgba(8, 127, 115, 0.09);
}

.form-section,
.geo-picker,
.optional-details,
.auth-password-details {
    border-color: var(--ou-border);
    background: #f4ecdf;
}

/* Student and driver applications */
.student-pwa-app,
.driver-pwa-app {
    background:
        linear-gradient(rgba(245, 238, 227, 0.97), rgba(233, 221, 204, 0.97)),
        url('/vendor/omani-ui/patterns/window-lattice.svg') center / 108px 108px repeat;
}

.pwa-blue-header,
.driver-blue-header {
    background:
        linear-gradient(135deg, rgba(5, 102, 94, 0.98), rgba(8, 127, 115, 0.96) 55%, rgba(126, 78, 38, 0.96)),
        url('/vendor/omani-ui/patterns/sadu-chevron.svg') center / 96px 96px repeat;
    box-shadow: 0 18px 40px rgba(5, 102, 94, 0.18);
}

.student-desktop-header,
.driver-desktop-header,
.pwa-appbar {
    border-color: var(--ou-border);
    background: #fffdf9;
    box-shadow: var(--ou-shadow-sm);
}

.student-desktop-brand::before,
.pwa-avatar,
.driver-avatar {
    border-color: rgba(183, 138, 69, 0.28);
    box-shadow: 0 9px 20px rgba(126, 78, 38, 0.13);
}

.student-desktop-nav a:hover,
.student-desktop-nav a[aria-current='page'] {
    border-color: rgba(154, 100, 47, 0.18);
    background: rgba(154, 100, 47, 0.09);
    color: var(--ou-primary-hover);
}

.pwa-card,
.pwa-trip-card,
.pwa-route-card,
.pwa-settings-card,
.pwa-account-card,
.driver-current-card,
.driver-route-card,
.driver-readiness-card,
.driver-trip-card,
.driver-scan-card,
.driver-gps-card,
.driver-students-card {
    border-color: var(--ou-border);
    background: #ffffff;
    box-shadow: var(--ou-shadow-sm);
}

.pwa-next-trip,
.pwa-trip-summary,
.driver-current-card {
    border-top-color: var(--ou-primary);
}

.pwa-live-dot,
.driver-check-dot.ok {
    background: var(--ou-success);
    box-shadow: 0 0 0 5px rgba(57, 122, 75, 0.13);
}

.pwa-map-line,
.pwa-route-line,
.pwa-subscription-progress > span {
    background: linear-gradient(90deg, var(--ou-secondary), var(--ou-primary), var(--ou-accent));
}

.pwa-map-pin,
.transport-bus-marker,
.pwa-bus-icon {
    border-color: var(--ou-surface);
    background-color: var(--ou-secondary);
    color: #fff;
}

.pwa-bottom-nav,
.driver-bottom-nav {
    border-color: var(--ou-border);
    background: #fffdf9;
    box-shadow: 0 -12px 32px rgba(56, 41, 25, 0.08);
}

.pwa-bottom-nav a[aria-current='page'],
.driver-bottom-nav a[aria-current='page'] {
    color: var(--ou-primary);
}

.pwa-bottom-nav a[aria-current='page']::after,
.driver-bottom-nav a[aria-current='page']::after {
    background: var(--ou-accent);
}

.pwa-notification-icon,
.pwa-setting-icon,
.pwa-action-icon,
.pwa-empty-icon {
    border-color: rgba(154, 100, 47, 0.13);
    background: rgba(154, 100, 47, 0.09);
    color: var(--ou-primary);
}

/* Bus console */
.console-body {
    background:
        radial-gradient(circle at 8% 8%, rgba(183, 138, 69, 0.11), transparent 26rem),
        #e9ddcc;
}

.console-grid.console-road-dashboard {
    border-color: var(--ou-border);
    box-shadow: var(--ou-shadow-md);
}

.console-road-header,
.console-road-nav,
.console-route-sidebar {
    border-color: var(--ou-border);
    background: #fffdf9;
}

.console-side-brand > span,
.console-driver-avatar {
    background: linear-gradient(145deg, var(--ou-secondary), var(--ou-secondary-hover));
    box-shadow: 0 10px 24px rgba(8, 127, 115, 0.17);
}

.console-trip-status,
.console-current-phase {
    border-color: rgba(154, 100, 47, 0.18);
    background: linear-gradient(135deg, rgba(154, 100, 47, 0.1), rgba(183, 138, 69, 0.08));
}

.console-progress-bar i,
.console-gauge > span,
.console-passenger-gauge > span {
    background: linear-gradient(90deg, var(--ou-secondary), var(--ou-accent));
}

.console-road-nav a[aria-current='page'],
.console-road-nav .is-active {
    color: var(--ou-primary);
}

.console-emergency-button {
    background: linear-gradient(135deg, var(--ou-danger), #8e2222);
}

.leaflet-container {
    font-family: inherit;
}

.leaflet-control-zoom a,
.leaflet-control-layers,
.map-control-button {
    border-color: var(--ou-border);
    background-color: var(--ou-surface-2);
    color: var(--ou-primary-hover);
}

.qr-scan-card {
    border-color: var(--ou-border);
    background: var(--ou-surface);
    box-shadow: var(--ou-shadow-lg);
}

.qr-scan-head button {
    background: rgba(154, 100, 47, 0.09);
    color: var(--ou-primary);
}

@media (min-width: 761px) {
    .login-screen {
        grid-template-columns: minmax(360px, 0.82fr) minmax(420px, 1.18fr);
    }
}

@media (max-width: 760px) {
    body.omani-identity {
        background: var(--ou-bg);
    }

    body.omani-identity::before {
        display: block;
        opacity: 0.025;
    }

    .topbar {
        background: rgba(255, 253, 249, 0.97);
    }

    .public-hero {
        border-radius: 1.15rem;
        padding: 1rem;
    }

    .gateway-grid {
        grid-template-columns: 1fr;
    }

    .login-form-card {
        border-top-width: 4px;
        background: rgba(255, 253, 249, 0.98);
    }

    .auth-panel {
        border-radius: 1rem;
        margin-block: 1rem 5rem;
    }
}

/* Registration workflow */
.registration-page .shell {
    width: min(1120px, 100%);
}

.registration-flow-shell.auth-panel {
    max-width: 1040px;
    margin-block: clamp(1.25rem, 4vw, 3rem) 5rem;
    padding: clamp(1rem, 2.8vw, 2rem);
    border-top-width: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
}

.registration-flow-shell.auth-panel::before {
    display: none;
}

.registration-flow-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.registration-flow-header h1,
.registration-flow-header .muted-copy,
.registration-stage-header h2,
.registration-stage-header p,
.registration-review-note p {
    margin: 0;
}

.registration-flow-header h1 {
    margin-top: 0.12rem;
    font-size: clamp(1.75rem, 4vw, 2.45rem);
}

.registration-flow-header .muted-copy {
    margin-top: 0.35rem;
}

.registration-flow-logo {
    flex: 0 0 auto;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(154, 100, 47, 0.18);
    border-radius: 20px;
    background: #fff var(--platform-logo-url, url('/icons/icon.svg')) center / 46px no-repeat;
    box-shadow: 0 14px 30px rgba(126, 78, 38, 0.14);
}

.registration-flow-form {
    display: grid;
    gap: 1rem;
}

.registration-steps {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.35rem;
    border: 1px solid var(--ou-border);
    border-radius: 18px;
    padding: 0.85rem 0.65rem 0.75rem;
    background: linear-gradient(180deg, #fffdf9, #f8f1e7);
}

.registration-progress-line {
    position: absolute;
    inset-block-start: 2.55rem;
    inset-inline: 8.5%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #ded3c4;
}

.registration-progress-line > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ou-primary), var(--ou-secondary));
    transition: width 240ms ease;
}

.registration-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #5f6674;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.registration-step:disabled {
    cursor: default;
    opacity: 1;
}

.registration-step-number {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 4px solid #fffdf9;
    border-radius: 50%;
    background: #ddd2c3;
    color: #454c59;
    box-shadow: 0 0 0 1px #cbbda9;
    font-size: 0.88rem;
    font-weight: 950;
    transition: 180ms ease;
}

.registration-step.is-active .registration-step-number {
    background: var(--ou-secondary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(8, 127, 115, 0.13);
    transform: translateY(-1px);
}

.registration-step.is-complete .registration-step-number {
    background: var(--ou-primary);
    color: transparent;
    box-shadow: 0 0 0 3px rgba(154, 100, 47, 0.11);
}

.registration-step.is-complete .registration-step-number::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    content: '✓';
    font-size: 1rem;
}

.registration-step-copy {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
}

.registration-step-copy strong,
.registration-step-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registration-step-copy strong {
    color: #303745;
    font-size: 0.82rem;
    font-weight: 950;
}

.registration-step.is-active .registration-step-copy strong {
    color: var(--ou-secondary-hover);
}

.registration-step-copy small {
    color: #787f8d;
    font-size: 0.68rem;
    font-weight: 700;
}

.registration-stage {
    position: relative;
    min-height: 370px;
    border: 1px solid var(--ou-border);
    border-radius: 20px;
    padding: clamp(1rem, 2.6vw, 1.65rem);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 241, 0.98)),
        var(--ou-surface);
    box-shadow: 0 12px 32px rgba(61, 47, 30, 0.055);
}

.registration-stage[hidden],
.registration-step[hidden],
.registration-role-panel[hidden],
.registration-review-location[hidden] {
    display: none !important;
}

.registration-stage-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(201, 185, 161, 0.58);
    padding-bottom: 1rem;
}

.registration-stage-header h2 {
    color: #1e2836;
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
}

.registration-stage-header p {
    margin-top: 0.28rem;
    color: #667080;
    line-height: 1.65;
}

.registration-stage-index {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    background: rgba(154, 100, 47, 0.11);
    color: var(--ou-primary-hover);
    font-size: 0.92rem;
    font-weight: 950;
}

.role-grid-flow {
    gap: 1rem;
}

.role-card-flow {
    position: relative;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 132px;
    border-width: 2px;
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
}

.role-card-flow input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.role-card-flow:has(input:focus-visible) {
    outline: 3px solid rgba(8, 127, 115, 0.22);
    outline-offset: 3px;
}

.role-card-flow:has(input:checked) {
    border-color: var(--ou-secondary);
    background: linear-gradient(135deg, rgba(8, 127, 115, 0.09), #fff);
}

.role-card-symbol {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 17px;
    background: rgba(154, 100, 47, 0.11);
    color: var(--ou-primary-hover);
    font-size: 1.2rem;
    font-weight: 950;
}

.role-card-symbol.driver {
    background: rgba(8, 127, 115, 0.11);
    color: var(--ou-secondary-hover);
}

.role-card-copy strong {
    color: #1f2937;
    font-size: 1.04rem;
}

.role-card-copy small {
    color: #687181;
}

.role-card-status {
    align-self: start;
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 950;
    white-space: nowrap;
}

.role-card-status.is-open {
    background: rgba(57, 122, 75, 0.12);
    color: #28633a;
}

.role-card-status.is-closed {
    background: rgba(177, 42, 42, 0.1);
    color: #8e2222;
}

.role-card-flow.is-disabled {
    border-style: dashed;
    background: #f5f1eb;
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.76;
}

.registration-stage label {
    color: #343c49;
    font-weight: 850;
}

.registration-stage input,
.registration-stage select {
    min-height: 52px;
    margin-top: 0.35rem;
    border-color: #cfc1ae;
    border-radius: 13px;
    background: #fff;
    color: #202938;
}

.registration-stage input:focus,
.registration-stage select:focus {
    border-color: var(--ou-secondary);
    box-shadow: 0 0 0 3px rgba(8, 127, 115, 0.11);
}

.registration-contact-grid {
    align-items: end;
}

.registration-code-grid {
    grid-column: 1 / -1;
}

.registration-role-panel,
.registration-optional-details,
.registration-home-details {
    margin-top: 0;
}

.registration-geo-picker {
    margin-top: 0;
}

.registration-location-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.registration-flow-shell .geo-picker,
.registration-flow-shell .optional-details,
.registration-flow-shell .auth-password-details {
    border-color: #d7c8b5;
    background: #f8f1e7;
}

.registration-flow-shell .address-map {
    min-height: 260px;
    border-color: #cfc1ae;
}

.registration-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.registration-review-grid article {
    display: grid;
    gap: 0.3rem;
    border: 1px solid #d9ccba;
    border-radius: 15px;
    padding: 0.9rem;
    background: #fff;
}

.registration-review-grid article span {
    color: #727a87;
    font-size: 0.78rem;
    font-weight: 800;
}

.registration-review-grid article strong {
    color: #222c3a;
    line-height: 1.5;
}

.registration-review-location {
    grid-column: 1 / -1;
}

.registration-review-note {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1rem;
    border: 1px solid rgba(8, 127, 115, 0.2);
    border-radius: 14px;
    padding: 0.85rem;
    background: rgba(8, 127, 115, 0.07);
    color: #315d58;
}

.registration-review-note > span {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--ou-secondary);
    color: #fff;
    font-weight: 950;
}

.registration-flow-actions {
    display: grid;
    grid-template-columns: minmax(118px, auto) 1fr minmax(138px, auto);
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #ded2c1;
    padding-top: 1rem;
}

.registration-flow-actions .button,
.registration-flow-actions .primary {
    min-height: 48px;
    border-radius: 13px;
}

.registration-flow-position {
    color: #737b87;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 850;
}

.registration-submit {
    background: linear-gradient(135deg, var(--ou-secondary), #05665e);
}

.registration-auth-links {
    margin-top: 1.15rem;
    border-top: 1px solid #e2d8ca;
    padding-top: 1rem;
}

@media (max-width: 760px) {
    .registration-page .shell {
        padding: 0.75rem 0.75rem 5.5rem;
    }

    .registration-flow-shell.auth-panel {
        margin-block: 0.5rem 4.5rem;
        padding: 0.9rem;
        border-radius: 18px;
    }

    .registration-flow-header {
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .registration-flow-logo {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        background-size: 38px;
    }

    .registration-flow-header h1 {
        font-size: 1.55rem;
    }

    .registration-flow-header .muted-copy {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .registration-steps {
        grid-auto-columns: minmax(58px, 1fr);
        gap: 0.15rem;
        padding: 0.75rem 0.25rem 0.65rem;
        border-radius: 15px;
    }

    .registration-progress-line {
        inset-block-start: 2.15rem;
        inset-inline: 8%;
    }

    .registration-step-number {
        width: 36px;
        height: 36px;
        border-width: 3px;
    }

    .registration-step-copy strong {
        font-size: 0.7rem;
        line-height: 1.25;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .registration-step-copy small {
        display: none;
    }

    .registration-stage {
        min-height: 330px;
        border-radius: 16px;
        padding: 1rem;
    }

    .registration-stage-header {
        gap: 0.65rem;
    }

    .registration-stage-index {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .role-grid-flow,
    .registration-location-grid,
    .registration-review-grid {
        grid-template-columns: 1fr;
    }

    .role-card-flow {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 112px;
        padding: 0.85rem;
    }

    .role-card-symbol {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .role-card-status {
        position: absolute;
        inset-block-start: 0.7rem;
        inset-inline-end: 0.7rem;
    }

    .registration-review-location {
        grid-column: auto;
    }

    .registration-flow-actions {
        grid-template-columns: 1fr 1fr;
    }

    .registration-flow-position {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .registration-flow-actions .registration-back,
    .registration-flow-actions .registration-next,
    .registration-flow-actions .registration-submit {
        width: 100%;
    }

    .registration-flow-actions .registration-next,
    .registration-flow-actions .registration-submit {
        grid-column: 2;
    }

    .registration-auth-links {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Student portal — unified responsive information architecture */
.student-pwa-body {
    --student-pwa-max: 100%;
    --student-pwa-page-padding: clamp(0.8rem, 3vw, 1.15rem);
    background: #eee5d8;
}

.student-pwa-shell {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.student-pwa-app {
    background:
        radial-gradient(circle at 8% 4%, rgba(183, 138, 69, 0.12), transparent 22rem),
        radial-gradient(circle at 92% 20%, rgba(8, 127, 115, 0.09), transparent 26rem),
        linear-gradient(180deg, #fbf8f3 0%, #f4eee5 100%);
}

.student-pwa-app :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(8, 127, 115, 0.28);
    outline-offset: 3px;
}

.pwa-blue-header {
    min-height: 78px;
    padding: 0.55rem var(--student-pwa-page-padding);
    background:
        linear-gradient(135deg, rgba(5, 78, 73, 0.97), rgba(8, 127, 115, 0.96) 58%, rgba(126, 78, 38, 0.96)),
        url('/vendor/omani-ui/patterns/sadu-chevron.svg') center / 92px repeat;
    box-shadow: 0 10px 28px rgba(5, 78, 73, 0.18);
}

.pwa-appbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 66px;
    gap: 0.65rem;
}

.pwa-mobile-brand {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
}

.pwa-mobile-brand .pwa-bus-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.pwa-language-toggle,
.pwa-header-back {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 950;
    backdrop-filter: blur(10px);
}

.pwa-header-back i {
    width: 11px;
    height: 11px;
    border-block-start: 2px solid currentColor;
    border-inline-start: 2px solid currentColor;
    transform: rotate(-45deg);
}

[dir='rtl'] .pwa-header-back i {
    transform: rotate(45deg);
}

.pwa-title-stack strong {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
}

.pwa-title-stack small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-content {
    width: min(100%, 1280px);
    margin-inline: auto;
    gap: 0.9rem;
    padding: 1rem var(--student-pwa-page-padding) calc(6.8rem + env(safe-area-inset-bottom));
}

.pwa-card,
.pwa-page-intro,
.pwa-live-strip,
.pwa-trip-card,
.pwa-notification-item,
.pwa-account-hero,
.pwa-setting-row,
.billing-invoice,
.schedule-builder,
.schedule-plan,
.schedule-change-shell {
    border-color: #ded2c2;
    background: rgba(255, 254, 251, 0.98);
    box-shadow: 0 12px 30px rgba(55, 38, 21, 0.07);
}

.pwa-page-intro {
    overflow: hidden;
    border-color: rgba(154, 100, 47, 0.22);
    background:
        linear-gradient(90deg, rgba(255, 253, 249, 0.98), rgba(242, 232, 217, 0.96)),
        url('/vendor/omani-ui/patterns/sadu-diamond.svg') center / 86px repeat;
}

.pwa-page-intro > strong {
    background: rgba(8, 127, 115, 0.1);
    color: var(--ou-secondary);
}

.pwa-filter-bar div,
.pwa-filter-form label,
.pwa-filter-form button,
.pwa-filter-form a,
.pwa-notification-toolbar a,
.pwa-preference-button,
.pwa-stat-list div,
.pwa-summary-list div,
.pwa-subscription-progress,
.pwa-logout-panel {
    border-color: #ded2c2;
    background: #fffefa;
    box-shadow: 0 8px 20px rgba(55, 38, 21, 0.045);
}

.pwa-filter-form button {
    border-color: var(--ou-primary);
    background: linear-gradient(135deg, var(--ou-primary), var(--ou-primary-hover));
}

.pwa-live-strip {
    background: rgba(248, 253, 251, 0.98);
}

.pwa-bottom-nav {
    right: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    left: 0.5rem;
    width: auto;
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid rgba(205, 190, 169, 0.88);
    border-radius: 22px;
    padding: 0.42rem 0.35rem;
    background: rgba(255, 253, 249, 0.94);
    box-shadow: 0 16px 40px rgba(55, 38, 21, 0.16);
    transform: none;
}

.pwa-bottom-nav a {
    min-width: 0;
    min-height: 58px;
    border-radius: 16px;
    padding: 0.25rem 0.12rem;
    color: #6d655d;
    font-size: clamp(0.61rem, 2.6vw, 0.74rem);
}

.pwa-bottom-nav a[aria-current='page'] {
    background: rgba(8, 127, 115, 0.09);
    color: var(--ou-secondary);
}

.pwa-bottom-nav a[aria-current='page']::after {
    bottom: 3px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
}

.pwa-bottom-nav a:nth-child(3) > span {
    width: 28px;
    height: 26px;
}

.nav-wallet {
    position: relative;
    display: block;
    width: 23px;
    height: 19px;
    border: 2px solid currentColor;
    border-radius: 6px;
    color: inherit;
}

.nav-wallet::before {
    position: absolute;
    inset-inline-end: -3px;
    top: 5px;
    width: 9px;
    height: 7px;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: #fff;
    content: '';
}

/* Student home */
.student-home-content {
    align-items: stretch;
}

.student-home-overview {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.45rem);
    border-color: rgba(5, 78, 73, 0.4);
    background:
        linear-gradient(135deg, rgba(5, 78, 73, 0.98), rgba(8, 127, 115, 0.96) 62%, rgba(126, 78, 38, 0.94)),
        url('/vendor/omani-ui/patterns/sadu-chevron.svg') center / 110px repeat;
    color: #fff;
    box-shadow: 0 20px 42px rgba(5, 78, 73, 0.2);
}

.student-overview-person {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.student-overview-person .pwa-avatar {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    background-color: #fff;
}

.student-overview-person .pwa-greeting {
    align-items: start;
    direction: inherit;
    text-align: start;
}

.student-overview-person .pwa-greeting :where(span, h1, strong) {
    color: #fff;
}

.student-overview-person .pwa-greeting span {
    opacity: 0.76;
}

.student-overview-person .pwa-greeting h1 {
    margin: 0.12rem 0;
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.student-route-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
}

.student-route-context div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.student-route-context small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 850;
}

.student-route-context strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-route-context i {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
}

.student-route-context i::before,
.student-route-context i::after {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ou-accent);
    content: '';
    transform: translateY(-50%);
}

.student-route-context i::before { inset-inline-start: 0; }
.student-route-context i::after { inset-inline-end: 0; }

.student-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.student-overview-stats a {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
    border-radius: 15px;
    padding: 0.7rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.student-overview-stats span,
.student-overview-stats small {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-overview-stats strong {
    color: #fff;
    font-size: 1.22rem;
}

.student-today-card {
    min-height: 210px;
    border-top: 4px solid var(--ou-secondary);
}

.student-today-card .pwa-action-row,
.pwa-qr-preview-card .pwa-action-row,
.pwa-settings-card .pwa-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.student-today-card .pwa-action-row > *,
.student-today-card .pwa-action-row form button {
    min-width: 0;
}

.student-next-card {
    display: grid;
    align-content: start;
    gap: 0.8rem;
}

.student-next-card .pwa-card-heading {
    margin-bottom: 0;
}

.student-card-link {
    width: 100%;
}

.student-quick-grid {
    display: grid;
    gap: 0.7rem;
}

.student-quick-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 0.8rem;
    min-height: 86px;
    padding: 0.85rem;
    color: inherit;
}

.student-quick-card > span:first-child {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    background-color: rgba(154, 100, 47, 0.1);
    color: var(--ou-primary);
}

.student-quick-card > .nav-bus,
.student-quick-card > .nav-wallet {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
}

.student-quick-card > .nav-bus::before {
    inset-inline: 11px;
    top: 10px;
    height: 20px;
}

.student-quick-card > .nav-bus::after {
    inset-inline: 13px;
    bottom: 8px;
}

.student-quick-card > .nav-wallet::before {
    inset-inline: 10px;
    top: 14px;
    width: 27px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 6px;
    background: transparent;
}

.student-quick-card > .nav-wallet::after {
    position: absolute;
    inset-inline-end: 9px;
    top: 20px;
    width: 11px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 4px;
    content: '';
}

.student-quick-card div {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.student-quick-card strong { color: var(--ou-text); font-size: 0.95rem; }
.student-quick-card small { overflow: hidden; color: #6c737a; font-size: 0.74rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.student-quick-card > i { width: 9px; height: 9px; border-block-start: 2px solid var(--ou-primary); border-inline-start: 2px solid var(--ou-primary); transform: rotate(-45deg); }
[dir='ltr'] .student-quick-card > i { transform: rotate(45deg); }

.student-latest-alert {
    min-height: 100%;
}

/* Lists, schedule, billing, account and detail pages */
.student-list-content,
.billing-content,
.schedule-content,
.student-account-content {
    align-items: start;
}

.pwa-trip-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pwa-trip-card:hover {
    border-color: rgba(8, 127, 115, 0.32);
    box-shadow: 0 16px 34px rgba(55, 38, 21, 0.1);
    transform: translateY(-2px);
}

.student-page-tabs {
    position: sticky;
    top: 0.6rem;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    border: 1px solid #ded2c2;
    border-radius: 17px;
    padding: 0.35rem;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: 0 10px 24px rgba(55, 38, 21, 0.08);
    backdrop-filter: blur(14px);
}

.student-page-tabs a {
    display: grid;
    min-height: 44px;
    place-items: center;
    border-radius: 12px;
    color: #6b645c;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
}

.student-page-tabs a[aria-current='page'] {
    background: var(--ou-secondary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8, 127, 115, 0.18);
}

#weekly-plan,
#upcoming-journeys {
    scroll-margin-top: 5.5rem;
}

.billing-page-intro {
    grid-column: 1 / -1;
}

.student-account-form {
    display: grid;
    gap: 1rem;
}

.student-account-form .geo-picker {
    margin: 0;
    border-radius: 18px;
}

.student-account-form .address-map {
    min-height: 280px;
    border-radius: 16px;
}

.account-edit-section {
    overflow: hidden;
    border: 1px solid #ded2c2;
    border-radius: 18px;
    background: #fffdfa;
}

.account-edit-section > summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    color: var(--ou-text);
    cursor: pointer;
    font-weight: 950;
    list-style: none;
}

.account-edit-section > summary::-webkit-details-marker {
    display: none;
}

.account-edit-section > summary i {
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid var(--ou-primary);
    border-block-end: 2px solid var(--ou-primary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.account-edit-section[open] > summary {
    border-bottom: 1px solid #e6dccf;
    background: #f8f1e7;
}

.account-edit-section[open] > summary i {
    transform: rotate(225deg);
}

.account-edit-section .account-edit-content,
.account-edit-section > .geo-picker {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 1rem;
    background: #fff;
}

.pwa-map-content .pwa-live-map-card {
    padding: 0.7rem;
}

.pwa-map-content .map {
    min-height: min(68dvh, 720px);
    border-radius: 16px;
}

.pwa-detail-content .pwa-page-intro,
.pwa-detail-content .pwa-trip-detail-card,
.pwa-detail-content .pwa-route-card,
.pwa-detail-content .pwa-settings-card,
.pwa-detail-content .pwa-qr-preview-card,
.pwa-detail-content .pwa-qr-full-card {
    grid-column: 1 / -1;
}

@media (min-width: 700px) and (max-width: 1023px) {
    .student-pwa-body {
        padding: 0;
    }

    .student-pwa-shell,
    .student-pwa-app {
        min-height: 100dvh;
        border-radius: 0;
    }

    .pwa-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: clamp(1.2rem, 4vw, 2rem);
    }

    .student-home-overview,
    .student-quick-grid,
    .student-latest-alert,
    .student-list-content > *,
    .schedule-content > *,
    .billing-content > *,
    .student-account-content > * {
        grid-column: 1 / -1;
    }

    .student-home-overview {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

    .student-overview-stats {
        grid-column: 1 / -1;
    }

    .student-today-card { grid-column: 1; }
    .student-next-card { grid-column: 2; }
    .student-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .student-quick-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .student-quick-card > i { display: none; }
    .student-quick-card small { white-space: normal; }

    .pwa-trip-list,
    .pwa-notification-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .student-pwa-body {
        background: #f4eee5;
    }

    .student-pwa-app {
        background:
            radial-gradient(circle at 5% 12%, rgba(183, 138, 69, 0.1), transparent 28rem),
            linear-gradient(180deg, #fbf8f3 0%, #f4eee5 100%);
    }

    .student-desktop-header {
        grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
        gap: clamp(0.7rem, 1.5vw, 1.4rem);
        min-height: 82px;
        border-color: #ded2c2;
        padding: 0.62rem clamp(1rem, 2.5vw, 2rem);
        background: rgba(255, 253, 249, 0.94);
        box-shadow: 0 8px 26px rgba(55, 38, 21, 0.08);
        direction: rtl;
    }

    .student-desktop-brand {
        justify-content: start;
        direction: rtl;
    }

    .student-desktop-brand > span:first-child {
        order: 0;
    }

    .student-desktop-brand > span:last-child {
        display: grid;
        gap: 0.1rem;
        color: var(--ou-primary);
        font-size: 1.25rem;
        font-weight: 950;
        line-height: 1.05;
    }

    .student-desktop-profile > span:last-child {
        display: grid;
        gap: 0.08rem;
    }

    .student-desktop-nav {
        justify-content: center;
        gap: 0.25rem;
    }

    .student-desktop-nav a {
        min-height: 48px;
        gap: 0.38rem;
        border: 1px solid transparent;
        border-radius: 13px;
        padding: 0.42rem clamp(0.55rem, 1vw, 0.85rem);
        color: #66605a;
        font-size: 0.82rem;
    }

    .student-desktop-nav a[aria-current='page'] {
        border-color: rgba(8, 127, 115, 0.16);
        background: rgba(8, 127, 115, 0.09);
        color: var(--ou-secondary);
    }

    .student-desktop-tools {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 0.55rem;
        direction: rtl;
    }

    .student-desktop-profile {
        min-width: 0;
        border: 1px solid #ded2c2;
        border-radius: 14px;
        padding: 0.3rem 0.55rem;
        background: #fff;
    }

    .student-desktop-lang {
        flex: 0 0 auto;
    }

    .pwa-content {
        width: min(100%, 1280px);
        gap: 1rem;
        padding: 1.35rem clamp(1.2rem, 3vw, 2.2rem) 2.5rem;
    }

    .student-pwa-app[data-live-page='dashboard'] .student-home-content {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: stretch;
    }

    .student-pwa-app[data-live-page='dashboard'] .student-home-overview {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: minmax(250px, 0.72fr) minmax(290px, 1fr) minmax(340px, 0.9fr);
        align-items: center;
        min-height: 190px;
    }

    .student-pwa-app[data-live-page='dashboard'] .student-today-card {
        grid-column: 1 / 8;
        grid-row: auto;
    }

    .student-pwa-app[data-live-page='dashboard'] .student-next-card {
        grid-column: 8 / -1;
        grid-row: auto;
    }

    .student-pwa-app[data-live-page='dashboard'] .student-quick-grid {
        grid-column: 1 / 8;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-pwa-app[data-live-page='dashboard'] .student-latest-alert {
        grid-column: 8 / -1;
        grid-row: auto;
    }

    .student-quick-card {
        grid-template-columns: 48px minmax(0, 1fr);
        align-content: center;
        min-height: 126px;
    }

    .student-quick-card > i { display: none; }
    .student-quick-card small { white-space: normal; }

    .student-pwa-app[data-live-page='trips'] .student-list-content {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100%, 1220px);
    }

    .student-pwa-app[data-live-page='trips'] .student-list-content > * {
        grid-column: 1;
    }

    .student-pwa-app[data-live-page='trips'] .pwa-filter-bar {
        grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto auto;
    }

    .student-pwa-app[data-live-page='trips'] .pwa-trip-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-pwa-app[data-live-page='trips'] .pwa-trip-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .student-pwa-app[data-live-page='trips'] .pwa-trip-card .pwa-trip-row {
        grid-column: 1 / -1;
    }

    .student-pwa-app[data-live-page='trips'] .pwa-trip-card .pwa-outline-button {
        grid-column: 2;
        grid-row: 1;
        min-width: 100px;
    }

    .schedule-content,
    .billing-content {
        width: min(100%, 1220px);
    }

    .student-page-tabs {
        top: 96px;
    }

    .billing-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-content > * {
        grid-column: 1;
    }

    .student-pwa-app[data-live-page='account'] .student-account-content {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(280px, 0.72fr);
    }

    .student-pwa-app[data-live-page='account'] .student-account-hero {
        grid-column: 1;
        grid-row: 1;
    }

    .student-pwa-app[data-live-page='account'] .student-account-summary {
        grid-column: 2;
        grid-row: 1;
    }

    .student-pwa-app[data-live-page='account'] .student-account-preferences {
        grid-column: 3;
        grid-row: 1;
    }

    .student-pwa-app[data-live-page='account'] .student-account-form {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .student-pwa-app[data-live-page='account'] .student-account-subscription {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .student-pwa-app[data-live-page='account'] .student-account-support {
        grid-column: 3;
        grid-row: 3;
    }

    .student-pwa-app[data-live-page='account'] .pwa-logout-panel {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .student-account-form > .form-grid,
    .student-account-form > .pwa-card-heading,
    .student-account-form > button {
        grid-column: 1 / -1;
    }

    .student-account-form > .account-edit-section:first-of-type {
        grid-column: 1 / -1;
    }

    .student-account-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-account-form .geo-picker {
        min-width: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .student-desktop-profile > span:last-child {
        display: none;
    }

    .student-desktop-nav a {
        padding-inline: 0.5rem;
        font-size: 0.76rem;
    }
}

@media (max-width: 699px) {
    .pwa-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .student-home-overview,
    .student-today-card,
    .student-next-card,
    .student-quick-grid,
    .student-latest-alert,
    .student-list-content > *,
    .schedule-content > *,
    .billing-content > *,
    .student-account-content > * {
        grid-column: 1;
    }

    .student-route-context {
        grid-template-columns: 1fr;
    }

    .student-route-context i {
        width: 2px;
        height: 22px;
        margin-inline-start: 0.8rem;
    }

    .student-overview-stats a {
        padding: 0.58rem;
    }

    .student-today-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .student-today-card .pwa-bus-scene {
        min-height: 104px;
    }

    .student-today-card .pwa-action-row > *,
    .student-today-card .pwa-action-row form,
    .student-today-card .pwa-action-row form button {
        width: 100%;
    }

    .pwa-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .pwa-filter-form button,
    .pwa-filter-form a {
        min-height: 46px;
    }

    .pwa-trip-row {
        align-items: stretch;
    }

    .pwa-time-box {
        min-width: 88px;
    }

    .pwa-notification-list-panel {
        order: 4;
    }

    .pwa-notification-preferences {
        order: 5;
    }

    .student-account-form .address-map {
        min-height: 230px;
    }

    .billing-next-card {
        align-items: start;
        flex-direction: column;
    }

    .pwa-map-content .map {
        min-height: calc(100dvh - 220px);
    }
}

/* Tablet bus console: operational data stays on the main screen; the map owns a separate view. */
.console-simple-primary {
    grid-template-areas:
        'next'
        'launch'
        'actions';
    grid-template-rows: auto auto auto;
}

.console-live-map-launch {
    grid-area: launch;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 0.85rem;
    min-height: 92px;
    border: 1px solid #c8ddd7;
    border-radius: 17px;
    padding: 0.85rem 1rem;
    background:
        radial-gradient(circle at 86% 18%, rgba(217, 173, 74, 0.16), transparent 10rem),
        linear-gradient(135deg, #fff, #edf7f4);
    color: #13273a;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(39, 29, 18, 0.055);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.console-live-map-launch:hover,
.console-live-map-launch:focus-visible {
    border-color: #087f73;
    box-shadow: 0 14px 30px rgba(8, 127, 115, 0.14);
    transform: translateY(-1px);
}

.console-live-map-launch > span:nth-child(2) {
    display: grid;
    gap: 0.22rem;
}

.console-live-map-launch strong {
    color: #075e57;
    font-size: 1rem;
    font-weight: 950;
}

.console-live-map-launch small {
    color: #657383;
    font-size: 0.75rem;
    font-weight: 800;
}

.console-live-map-launch > b {
    color: #087f73;
    font-size: 2rem;
    line-height: 1;
}

.console-live-map-icon {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #087f73;
    box-shadow: 0 9px 20px rgba(8, 127, 115, 0.2);
}

.console-live-map-icon::before {
    position: absolute;
    inset: 12px 15px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    content: '';
    transform: rotate(-45deg);
}

.console-live-map-icon::after {
    position: absolute;
    top: 22px;
    left: 24px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9ad4a;
    content: '';
}

.console-live-map-body {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: #dfe7e4;
}

.console-live-map-body::before,
.console-live-map-body .omani-page-ornament {
    display: none;
}

.console-live-map-body .console-live-map-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
}

.console-live-map-page {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #dfe7e4;
}

.console-live-map-canvas,
.console-live-map-page .map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.console-live-map-header {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    z-index: 900;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 68px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 38px rgba(15, 39, 62, 0.18);
    backdrop-filter: blur(18px);
}

.console-live-map-back {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #102d42;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.console-live-map-heading {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.console-live-map-heading strong {
    color: #13273a;
    font-size: 1.03rem;
    font-weight: 950;
}

.console-live-map-heading span {
    overflow: hidden;
    color: #657383;
    font-size: 0.75rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-live-map-tools {
    position: absolute;
    right: 14px;
    bottom: calc(126px + env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    gap: 0.5rem;
}

.console-live-map-tools :where(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 14px;
    padding: 0.55rem 0.8rem;
    background: rgba(255, 255, 255, 0.95);
    color: #075e57;
    box-shadow: 0 10px 28px rgba(15, 39, 62, 0.17);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(16px);
}

.console-live-map-target,
.console-live-map-navigation {
    position: relative;
    width: 19px;
    height: 19px;
}

.console-live-map-target {
    border: 2px solid #087f73;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #087f73;
}

.console-live-map-navigation {
    clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
    background: #087f73;
}

.console-live-map-hud {
    position: absolute;
    right: 14px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 14px;
    z-index: 900;
    display: grid;
    grid-template-columns: minmax(180px, 1.7fr) repeat(5, minmax(82px, 0.65fr));
    align-items: stretch;
    gap: 0.45rem;
    min-height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 20px;
    padding: 0.55rem;
    background: rgba(16, 39, 62, 0.94);
    box-shadow: 0 16px 42px rgba(15, 39, 62, 0.25);
    backdrop-filter: blur(18px);
}

.console-live-map-next,
.console-live-map-metric,
.console-live-map-updated {
    display: grid;
    align-content: center;
    gap: 0.2rem;
    min-width: 0;
    border-radius: 14px;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.09);
}

.console-live-map-next {
    background: rgba(8, 127, 115, 0.42);
}

.console-live-map-hud span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.65rem;
    font-weight: 850;
}

.console-live-map-hud strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.94rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-live-map-next strong {
    font-size: 1.15rem;
}

.console-live-map-page .leaflet-top {
    top: 92px;
}

.console-live-map-page .leaflet-bottom {
    bottom: 112px;
}

.console-live-map-page .leaflet-control-zoom,
.console-live-map-page .leaflet-control-layers {
    border: 0;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 9px 25px rgba(15, 39, 62, 0.17);
}

.console-live-map-page .console-live-state.is-error,
.console-simple-dashboard .console-live-state.is-error {
    background: #fff0ee;
    color: #a12d2d;
}

.console-live-map-page .console-live-state.is-error i,
.console-simple-dashboard .console-live-state.is-error i {
    background: #b83b32;
    box-shadow: 0 0 0 5px rgba(184, 59, 50, 0.12);
}

@media (min-width: 700px) and (max-width: 1100px) {
    .console-flow-shell {
        padding: 0.5rem;
    }

    .console-simple-dashboard {
        min-height: calc(100dvh - 1rem);
    }

    .console-simple-layout {
        grid-template-columns: minmax(0, 1.06fr) minmax(285px, 0.84fr);
        height: calc(100dvh - 134px);
        min-height: 0;
    }

    .console-simple-primary {
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .console-simple-side {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        overflow-y: auto;
    }

    .console-next-card {
        min-height: 112px;
    }

    .console-primary-actions {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .console-primary-actions .button {
        min-height: 58px;
    }
}

@media (max-width: 699px) {
    .console-simple-primary {
        overflow: visible;
    }

    .console-live-map-launch {
        grid-template-columns: 50px minmax(0, 1fr) 26px;
        min-height: 82px;
        padding: 0.7rem 0.8rem;
    }

    .console-live-map-icon {
        width: 48px;
        height: 48px;
    }

    .console-live-map-icon::after {
        top: 19px;
        left: 21px;
    }

    .console-live-map-header {
        right: 8px;
        left: 8px;
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 60px;
        border-radius: 17px;
        padding: 0.42rem;
    }

    .console-live-map-back {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .console-live-map-header .console-live-state {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
    }

    .console-live-map-tools {
        right: 8px;
        bottom: calc(210px + env(safe-area-inset-bottom));
    }

    .console-live-map-hud {
        right: 8px;
        left: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 184px;
        border-radius: 17px;
    }

    .console-live-map-next {
        grid-column: 1 / -1;
    }

    .console-live-map-updated {
        display: none;
    }

    .console-live-map-page .leaflet-bottom {
        bottom: 196px;
    }
}

@media (max-width: 380px) {
    .student-overview-stats {
        grid-template-columns: 1fr;
    }

    .student-overview-stats a {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }

    .pwa-filter-form {
        grid-template-columns: 1fr;
    }

    .pwa-bottom-nav a {
        font-size: 0.58rem;
    }
}

@media print {
    body.omani-identity::after,
    .omani-page-ornament {
        display: none;
    }
}

/* Taqniyat Al Haitham brand placement */
.brand::before,
.login-brand-icon,
.auth-panel::before,
.hero-mark,
.registration-flow-logo,
.visual-bus,
.console-top::before,
.console-side-brand > span,
.transport-bus-marker span,
.console-trip-status::after {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--platform-logo-url, url('/icons/icon.svg')) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
}

.topbar {
    min-height: 84px;
}

.brand {
    grid-template-columns: 60px auto;
}

.brand::before {
    width: 60px;
    height: 60px;
}

.login-brand-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
}

.login-brand-icon .ou-icon,
.hero-mark .ou-icon,
.visual-bus .ou-icon {
    display: none !important;
}

.hero-mark {
    width: 116px;
    height: 116px;
    margin-bottom: 1rem;
}

.registration-flow-logo {
    width: 82px;
    height: 82px;
}

.pwa-bus-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent var(--platform-logo-url, url('/icons/icon.svg')) center / contain no-repeat !important;
    box-shadow: none !important;
}

.pwa-bus-icon::before,
.pwa-bus-icon::after {
    display: none !important;
}

.student-desktop-brand .pwa-bus-icon {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
}

.console-side-brand > span {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
}

@media (max-width: 700px) {
    .brand {
        grid-template-columns: 50px auto;
    }

    .brand::before {
        width: 50px;
        height: 50px;
    }

    .hero-mark {
        width: 92px;
        height: 92px;
    }

    .registration-flow-logo {
        width: 70px;
        height: 70px;
    }
}

/* Login page uses a single centred card. */
.login-page .auth-shell {
    width: min(560px, 100%);
}

.login-page .login-screen {
    grid-template-columns: minmax(0, 1fr);
}

/* Interaction and form system */
:root {
    --transport-radius-sm: 12px;
    --transport-radius: 18px;
    --transport-radius-lg: 26px;
    --transport-focus: 0 0 0 4px rgba(8, 127, 115, 0.13);
    --transport-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.transport-ui-ready .transport-reveal,
.transport-ui-ready .student-pwa-app .pwa-card,
.transport-ui-ready .driver-stat-grid > *,
.transport-ui-ready .console-panel {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.52s var(--transport-ease) var(--reveal-delay, 0ms),
        transform 0.52s var(--transport-ease) var(--reveal-delay, 0ms),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.transport-ui-ready .public-hero > *,
.transport-ui-ready .gateway-card,
.transport-ui-ready .auth-panel,
.transport-ui-ready .login-form-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.52s var(--transport-ease) var(--reveal-delay, 0ms), transform 0.52s var(--transport-ease) var(--reveal-delay, 0ms), box-shadow 0.22s ease;
}

.transport-ui-ready .transport-reveal.is-visible,
.transport-ui-ready .student-pwa-app .pwa-card.is-visible,
.transport-ui-ready .driver-stat-grid > *.is-visible,
.transport-ui-ready .console-panel.is-visible {
    opacity: 1;
    transform: none;
}

.transport-ui-ready .public-hero > *.is-visible,
.transport-ui-ready .gateway-card.is-visible,
.transport-ui-ready .auth-panel.is-visible,
.transport-ui-ready .login-form-card.is-visible {
    opacity: 1;
    transform: none;
}

.gateway-card:hover,
.public-visual:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(31, 43, 53, 0.11);
}

.student-pwa-app :where(input:not([type='checkbox']):not([type='radio']), select, textarea),
.driver-pwa-app :where(input:not([type='checkbox']):not([type='radio']), select, textarea),
.console-body :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    min-height: 48px;
    border: 1px solid #d3c6b4;
    border-radius: var(--transport-radius-sm);
    background: #fffefa;
    color: #202a37;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.student-pwa-app :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus,
.driver-pwa-app :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus,
.console-body :where(input:not([type='checkbox']):not([type='radio']), select, textarea):focus {
    border-color: var(--ou-secondary);
    background: #fff;
    box-shadow: var(--transport-focus);
}

.transport-field.is-invalid input,
.transport-field.is-invalid select {
    border-color: var(--ou-danger) !important;
    box-shadow: 0 0 0 4px rgba(166, 45, 45, 0.1) !important;
}

button,
.pwa-primary-button,
.pwa-outline-button,
.schedule-save-button {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

button::after,
.pwa-primary-button::after,
.pwa-outline-button::after,
.schedule-save-button::after {
    position: absolute;
    top: var(--press-y, 50%);
    left: var(--press-x, 50%);
    width: 0;
    height: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    content: '';
    pointer-events: none;
    transform: translate(-50%, -50%);
}

button.is-pressed::after,
.pwa-primary-button.is-pressed::after,
.pwa-outline-button.is-pressed::after,
.schedule-save-button.is-pressed::after {
    width: 240px;
    height: 240px;
    opacity: 0;
    transition: width 0.42s ease, height 0.42s ease, opacity 0.42s ease;
}

button:active,
.pwa-primary-button:active,
.pwa-outline-button:active,
.schedule-save-button:active {
    transform: translateY(1px) scale(0.99);
}

.flash {
    animation: transport-flash-in 0.38s var(--transport-ease) both;
}

.flash.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes transport-flash-in {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}

/* Student term schedule */
.schedule-page-body {
    background:
        radial-gradient(circle at 12% 12%, rgba(183, 138, 69, 0.12), transparent 28rem),
        radial-gradient(circle at 88% 24%, rgba(8, 127, 115, 0.1), transparent 30rem),
        var(--ou-bg);
}

.schedule-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.schedule-builder,
.schedule-plan {
    scroll-margin-top: 168px;
}

.schedule-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid rgba(154, 100, 47, 0.24);
    border-radius: var(--transport-radius-lg);
    padding: clamp(1.15rem, 3vw, 2rem);
    background:
        linear-gradient(135deg, rgba(255, 253, 249, 0.98), rgba(232, 218, 197, 0.94)),
        url('/vendor/omani-ui/patterns/sadu-diamond.svg') center / 88px repeat;
    box-shadow: var(--ou-shadow-md);
}

.schedule-hero > div:first-child {
    display: grid;
    gap: 0.4rem;
}

.schedule-hero span,
.schedule-section-heading > div > span {
    color: var(--ou-primary);
    font-size: 0.82rem;
    font-weight: 950;
}

.schedule-hero h1,
.schedule-section-heading h1,
.schedule-section-heading h2 {
    margin: 0;
    color: var(--ou-text);
    line-height: 1.3;
}

.schedule-hero h1 {
    font-size: clamp(1.65rem, 4vw, 2.65rem);
}

.schedule-hero p,
.schedule-section-heading p {
    margin: 0;
    color: #586270;
    line-height: 1.7;
}

.schedule-hero-policy {
    display: grid;
    width: min(13rem, 100%);
    min-height: 8.5rem;
    place-content: center;
    border: 1px solid rgba(8, 127, 115, 0.18);
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.schedule-hero-policy strong {
    color: var(--ou-secondary);
    font-size: 2.2rem;
    line-height: 1;
}

.schedule-hero-policy span {
    margin-top: 0.45rem;
    color: #53616d;
    font-size: 0.78rem;
    line-height: 1.5;
}

.schedule-hero-policy small {
    color: #6a7580;
    font-size: 0.72rem;
    line-height: 1.45;
}

.schedule-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.schedule-stats article {
    display: grid;
    gap: 0.3rem;
    border: 1px solid var(--ou-border);
    border-radius: var(--transport-radius);
    padding: 1rem;
    background: #fff;
    box-shadow: var(--ou-shadow-sm);
}

.schedule-stats span {
    color: #65707d;
    font-size: 0.78rem;
    font-weight: 850;
}

.schedule-stats strong {
    color: var(--ou-primary);
    font-size: 1.65rem;
}

.schedule-route-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    border: 1px solid rgba(8, 127, 115, 0.2);
    border-radius: var(--transport-radius);
    padding: 1rem;
    background: #f3faf8;
}

.schedule-route-summary div { display: grid; gap: 0.3rem; }
.schedule-route-summary span { color: #62706f; font-size: 0.76rem; font-weight: 850; }
.schedule-route-summary strong { color: var(--ou-text); font-size: 1rem; }
.schedule-route-summary > i { height: 2px; background: var(--ou-secondary); position: relative; }
.schedule-route-summary > i::before,
.schedule-route-summary > i::after { position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--ou-secondary); content: ''; transform: translateY(-50%); }
.schedule-route-summary > i::before { inset-inline-start: 0; }
.schedule-route-summary > i::after { inset-inline-end: 0; }

.schedule-builder,
.schedule-plan,
.schedule-change-shell {
    display: grid;
    gap: 1.1rem;
    border: 1px solid var(--ou-border);
    border-radius: var(--transport-radius-lg);
    padding: clamp(1rem, 2.5vw, 1.6rem);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ou-shadow-md);
}

.schedule-section-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.schedule-section-heading > div {
    display: grid;
    gap: 0.35rem;
}

.schedule-section-heading output {
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    background: rgba(8, 127, 115, 0.08);
    color: #25665f;
    font-size: 0.8rem;
    font-weight: 900;
    white-space: nowrap;
}

.schedule-day-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.schedule-day-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid #ded5c8;
    border-radius: 20px;
    padding: 1rem;
    background: #f8f3ea;
    opacity: 0.72;
    transition: opacity 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.schedule-day-card.is-enabled {
    border-color: rgba(8, 127, 115, 0.3);
    background: #fff;
    box-shadow: 0 14px 32px rgba(27, 45, 60, 0.07);
    opacity: 1;
}

.schedule-day-card.is-enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(27, 45, 60, 0.1);
}

.schedule-day-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.schedule-day-card > header div {
    display: grid;
}

.schedule-day-card > header strong {
    color: var(--ou-text);
    font-size: 1.05rem;
}

.schedule-day-card > header small {
    color: #77808c;
}

.transport-switch {
    position: relative;
    display: inline-flex;
}

.transport-switch input[type='checkbox'] {
    position: absolute;
    opacity: 0;
}

.transport-switch span {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #cbc4ba;
    cursor: pointer;
    transition: background 0.2s ease;
}

.transport-switch span::after {
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    content: '';
    transition: transform 0.22s var(--transport-ease);
}

.transport-switch input:checked + span {
    background: var(--ou-secondary);
}

.transport-switch input:checked + span::after {
    transform: translateX(calc((48px - 28px) * var(--transport-switch-direction, -1)));
}

[dir='ltr'] .transport-switch {
    --transport-switch-direction: 1;
}

.schedule-day-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
}

.schedule-direction-block {
    display: grid;
    gap: 0.6rem;
}

.schedule-direction-toggle,
.schedule-check-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #34414d;
    font-size: 0.82rem;
    font-weight: 900;
}

.schedule-direction-toggle input,
.schedule-check-option input {
    width: 19px;
    height: 19px;
    accent-color: var(--ou-secondary);
}

.transport-field {
    display: grid;
    gap: 0.35rem;
}

.transport-field > span {
    color: #69727d;
    font-size: 0.75rem;
    font-weight: 850;
}

.transport-field input,
.transport-field select {
    width: 100%;
    padding-inline: 0.7rem;
}

.schedule-flow-line {
    display: flex;
    align-items: center;
}

.schedule-flow-line i {
    flex: 1;
    height: 2px;
    background: #d9cfbf;
}

.schedule-flow-line span {
    width: 10px;
    height: 10px;
    border: 2px solid var(--ou-secondary);
    border-radius: 50%;
    background: #fff;
}

.schedule-location-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    border-top: 1px dashed #d9cfbf;
    padding-top: 0.75rem;
}

.schedule-notification-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(8, 127, 115, 0.18);
    border-radius: 18px;
    padding: 1rem;
    background: rgba(8, 127, 115, 0.055);
}

.schedule-notification-panel h3,
.schedule-notification-panel p {
    margin: 0;
}

.schedule-notification-panel h3 {
    color: #244b47;
}

.schedule-notification-panel p {
    margin-top: 0.25rem;
    color: #5d716f;
    font-size: 0.82rem;
}

.schedule-check-option {
    border: 1px solid rgba(8, 127, 115, 0.18);
    border-radius: 13px;
    padding: 0.7rem;
    background: #fff;
}

.schedule-check-option.whatsapp {
    border-color: rgba(37, 211, 102, 0.25);
}

.schedule-save-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 15px;
    padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, var(--ou-primary), #75481f);
    color: #fff;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(117, 72, 31, 0.2);
}

.schedule-save-button i {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    opacity: 0;
}

.is-submitting .schedule-save-button i {
    opacity: 1;
    animation: transport-spin 0.7s linear infinite;
}

@keyframes transport-spin { to { transform: rotate(360deg); } }

.schedule-month {
    overflow: hidden;
    border: 1px solid #ded5c8;
    border-radius: 18px;
    background: #fffdfa;
}

.schedule-month + .schedule-month {
    margin-top: 0.75rem;
}

.schedule-month summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.schedule-month summary::-webkit-details-marker { display: none; }

.schedule-month summary span {
    color: var(--ou-text);
    font-weight: 950;
}

.schedule-month summary small {
    color: #707985;
}

.schedule-month summary i {
    width: 9px;
    height: 9px;
    border-inline-end: 2px solid var(--ou-primary);
    border-block-end: 2px solid var(--ou-primary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.schedule-month[open] summary i { transform: rotate(225deg); }

.schedule-journey-list {
    display: grid;
    gap: 0.55rem;
    border-top: 1px solid #e7ded1;
    padding: 0.75rem;
    background: #f9f5ee;
}

.schedule-journey-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid #e0d7ca;
    border-radius: 15px;
    padding: 0.75rem;
    background: #fff;
}

.schedule-journey-card > time {
    display: grid;
    place-items: center;
    border-radius: 13px;
    padding: 0.45rem;
    background: #f2e8d9;
    color: var(--ou-primary);
}

.schedule-journey-card > time strong { font-size: 1.25rem; }
.schedule-journey-card > time span { font-size: 0.7rem; font-weight: 850; }

.schedule-journey-main,
.schedule-journey-state {
    display: grid;
    gap: 0.18rem;
}

.schedule-journey-main > span,
.schedule-journey-state > small {
    color: #717a86;
    font-size: 0.74rem;
}

.schedule-journey-main > strong {
    color: var(--ou-text);
    font-size: 1.18rem;
}

.schedule-journey-main > small { color: #58636f; }

.schedule-journey-state > strong {
    color: var(--ou-secondary);
    font-size: 0.82rem;
}

.schedule-journey-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.schedule-journey-actions a,
.schedule-journey-actions button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7c8b5;
    border-radius: 11px;
    padding: 0.5rem 0.65rem;
    background: #fff;
    color: var(--ou-primary);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.schedule-journey-actions button {
    border-color: rgba(166, 45, 45, 0.2);
    color: var(--ou-danger);
}

.schedule-planner-heading {
    align-items: center;
}

.schedule-status-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.schedule-status-legend span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--ou-border);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: #fffefa;
    color: #55616d;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.schedule-status-legend span::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b78745;
    content: '';
}

.schedule-status-legend .is-booked::before { background: #087f73; }
.schedule-status-legend .is-cancelled::before { background: #b02b2b; }

.schedule-planner-grid {
    display: grid;
    grid-template-columns: minmax(292px, 0.72fr) minmax(0, 1.55fr);
    align-items: start;
    gap: 1rem;
}

.schedule-calendar-panel {
    position: sticky;
    top: 94px;
    display: grid;
    gap: 0.75rem;
    border: 1px solid #ddd1c1;
    border-radius: 20px;
    padding: 0.85rem;
    background: #fffefa;
    box-shadow: 0 12px 28px rgba(55, 38, 21, 0.07);
}

.schedule-calendar-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.45rem;
}

.schedule-calendar-toolbar > a,
.schedule-calendar-toolbar > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #d9cbb9;
    border-radius: 13px;
    background: #fff;
    color: var(--ou-primary);
}

.schedule-calendar-toolbar > a {
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.schedule-calendar-toolbar > a:hover {
    border-color: var(--ou-secondary);
    background: rgba(8, 127, 115, 0.06);
    transform: translateY(-1px);
}

.schedule-calendar-toolbar > span[aria-disabled='true'] {
    background: #f3eee7;
    color: #aaa298;
}

.schedule-calendar-toolbar i {
    width: 9px;
    height: 9px;
    border-block-start: 2px solid currentColor;
    border-inline-start: 2px solid currentColor;
    transform: rotate(-45deg);
}

.schedule-calendar-toolbar .is-next i {
    transform: rotate(135deg);
}

[dir='ltr'] .schedule-calendar-toolbar i { transform: rotate(45deg); }
[dir='ltr'] .schedule-calendar-toolbar .is-next i { transform: rotate(-135deg); }

.schedule-calendar-toolbar div {
    display: grid;
    gap: 0.15rem;
    text-align: center;
}

.schedule-calendar-toolbar strong {
    color: var(--ou-text);
    font-size: 1.02rem;
}

.schedule-calendar-toolbar small {
    color: #707985;
    font-size: 0.7rem;
}

.schedule-calendar-weekdays,
.schedule-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.28rem;
}

.schedule-calendar-weekdays span {
    padding-block: 0.2rem;
    color: #6e7781;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: center;
}

.schedule-calendar-day {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 68px;
    align-content: start;
    justify-items: center;
    gap: 0.22rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 0.3rem 0.15rem;
    background: #f8f4ed;
    color: #5f6873;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

a.schedule-calendar-day:hover {
    border-color: rgba(8, 127, 115, 0.36);
    background: #f2faf8;
    transform: translateY(-1px);
}

.schedule-calendar-day > strong {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    font-size: 0.76rem;
}

.schedule-calendar-day.is-outside {
    background: transparent;
    color: #bbb4aa;
}

.schedule-calendar-day.is-unavailable {
    background: #f4f1ec;
    color: #aaa39a;
    opacity: 0.72;
}

.schedule-calendar-day.is-today > strong {
    outline: 2px solid rgba(154, 100, 47, 0.42);
    outline-offset: 1px;
    color: var(--ou-primary);
}

.schedule-calendar-day.is-selected {
    border-color: #087f73;
    background: linear-gradient(145deg, #076d64, #098c7f);
    color: #fff;
    box-shadow: 0 9px 18px rgba(8, 127, 115, 0.2);
}

.schedule-calendar-day.is-selected > strong {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    outline-color: rgba(255, 255, 255, 0.75);
}

.schedule-calendar-events {
    display: grid;
    width: 100%;
    gap: 0.16rem;
}

.schedule-calendar-events i {
    display: block;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0.08rem;
    background: #fffaf4;
    color: #825526;
    font-size: 0.55rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-calendar-events i::before {
    margin-inline-end: 0.12rem;
    content: '←';
}

.schedule-calendar-events i.is-outbound::before { content: '→'; }
[dir='ltr'] .schedule-calendar-events i::before { content: '→'; }
[dir='ltr'] .schedule-calendar-events i.is-outbound::before { content: '←'; }

.schedule-calendar-events i.is-booked {
    background: #dff3ef;
    color: #086c63;
}

.schedule-calendar-events i.is-planned {
    border-color: currentColor;
    border-style: dashed;
}

.schedule-calendar-events i.is-cancelled {
    border-color: rgba(176, 43, 43, 0.18);
    background: #fce8e7;
    color: #a62f2f;
    text-decoration: line-through;
}

.schedule-calendar-day.is-selected .schedule-calendar-events i {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.9);
}

.schedule-calendar-key {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.8rem;
    border-top: 1px solid #e9e0d5;
    padding-top: 0.7rem;
}

.schedule-calendar-key span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #68727c;
    font-size: 0.68rem;
    font-weight: 850;
}

.schedule-calendar-key i {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 6px;
    background: #eef6f4;
    color: #087f73;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 950;
}

.schedule-calendar-key i::before { content: '←'; }
.schedule-calendar-key i.is-outbound {
    background: #f5eee4;
    color: #8a5a2b;
}
.schedule-calendar-key i.is-outbound::before { content: '→'; }
[dir='ltr'] .schedule-calendar-key i::before { content: '→'; }
[dir='ltr'] .schedule-calendar-key i.is-outbound::before { content: '←'; }

.schedule-agenda {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
}

.schedule-agenda-toolbar {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid rgba(8, 127, 115, 0.18);
    border-radius: 16px;
    padding: 0.7rem 0.85rem;
    background: rgba(8, 127, 115, 0.055);
}

.schedule-agenda-toolbar div {
    display: grid;
    gap: 0.12rem;
}

.schedule-agenda-toolbar span {
    color: #66726f;
    font-size: 0.7rem;
    font-weight: 850;
}

.schedule-agenda-toolbar strong {
    color: #164e49;
    font-size: 0.98rem;
}

.schedule-agenda-toolbar button {
    min-height: 42px;
    border: 1px solid rgba(8, 127, 115, 0.24);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: var(--ou-secondary);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.schedule-agenda-day {
    display: grid;
    gap: 0.55rem;
    scroll-margin-top: 104px;
}

@supports (content-visibility: auto) {
    .schedule-agenda-day {
        content-visibility: auto;
        contain-intrinsic-block-size: 280px;
    }
}

.schedule-agenda-day[hidden] { display: none !important; }

.schedule-agenda-day > header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-inline: 0.15rem;
}

.schedule-agenda-day > header time {
    display: grid;
    width: 48px;
    min-width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 13px;
    background: #f2e8d9;
    color: var(--ou-primary);
    line-height: 1;
}

.schedule-agenda-day > header time strong { font-size: 1.05rem; }
.schedule-agenda-day > header time span { font-size: 0.58rem; font-weight: 900; }

.schedule-agenda-day > header div {
    display: grid;
    gap: 0.12rem;
}

.schedule-agenda-day > header div > strong {
    color: var(--ou-text);
    font-size: 0.9rem;
}

.schedule-agenda-day > header div > small {
    color: #717b86;
    font-size: 0.68rem;
}

.schedule-agenda-rows {
    display: grid;
    gap: 0.5rem;
}

.schedule-journey-card {
    display: grid;
    grid-template-columns: minmax(92px, 0.55fr) minmax(190px, 1.7fr) minmax(120px, 0.8fr) auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #e0d7ca;
    border-inline-start: 4px solid #b78745;
    border-radius: 15px;
    padding: 0.75rem;
    background: #fff;
    box-shadow: 0 7px 18px rgba(55, 38, 21, 0.045);
}

.schedule-journey-card.is-booked { border-inline-start-color: #087f73; }
.schedule-journey-card.is-cancelled {
    border-inline-start-color: #b02b2b;
    background: #fcf8f7;
}

.schedule-journey-time,
.schedule-journey-route,
.schedule-journey-state {
    display: grid;
    min-width: 0;
    gap: 0.22rem;
}

.schedule-journey-time > span {
    width: fit-content;
    border-radius: 999px;
    padding: 0.18rem 0.46rem;
    background: #e2f3f0;
    color: #087167;
    font-size: 0.66rem;
    font-weight: 950;
}

.schedule-journey-card.is-cancelled .schedule-journey-time > span {
    background: #f8e5e3;
    color: #9d3333;
}

.schedule-journey-time time {
    color: var(--ou-text);
    font-size: 1.32rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.schedule-journey-route > div {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(26px, 1fr) minmax(0, auto);
    align-items: center;
    gap: 0.42rem;
}

.schedule-journey-route > div > span,
.schedule-journey-route > div > strong {
    overflow: hidden;
    color: #384550;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-journey-route > div > strong { color: var(--ou-text); }

.schedule-journey-route > div > i {
    position: relative;
    height: 2px;
    background: linear-gradient(to left, #b78745, #087f73);
}

[dir='ltr'] .schedule-journey-route > div > i {
    background: linear-gradient(to right, #b78745, #087f73);
}

.schedule-journey-route > div > i::before,
.schedule-journey-route > div > i::after {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    content: '';
    transform: translateY(-50%);
}

.schedule-journey-route > div > i::before { inset-inline-start: -1px; background: #b78745; }
.schedule-journey-route > div > i::after { inset-inline-end: -1px; background: #087f73; }

.schedule-journey-route > small {
    overflow: hidden;
    color: #707a85;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-journey-state > strong {
    width: fit-content;
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    background: #f1e9dc;
    color: #895b2b;
    font-size: 0.7rem;
    font-weight: 950;
}

.schedule-journey-card.is-booked .schedule-journey-state > strong {
    background: #e0f2ee;
    color: #087167;
}

.schedule-journey-card.is-cancelled .schedule-journey-state > strong {
    background: #f8e5e3;
    color: #a03232;
}

.schedule-journey-state > small {
    color: #6e7883;
    font-size: 0.66rem;
}

.schedule-journey-card.is-cancelled :is(.schedule-journey-time time, .schedule-journey-route) {
    opacity: 0.62;
}

.schedule-journey-locked {
    display: inline-flex;
    max-width: 120px;
    align-items: center;
    gap: 0.35rem;
    color: #737d87;
    font-size: 0.67rem;
    font-weight: 850;
}

.schedule-journey-locked i {
    position: relative;
    width: 13px;
    min-width: 13px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.schedule-journey-locked i::before {
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    content: '';
    transform: translateX(-50%);
}

.schedule-filter-empty {
    display: grid;
    min-height: 170px;
    place-items: center;
    border: 1px dashed #d4c7b5;
    border-radius: 18px;
    padding: 1.2rem;
    background: #faf6ef;
    color: #646e7a;
    text-align: center;
}

.schedule-filter-empty[hidden] { display: none !important; }
.schedule-filter-empty strong { color: var(--ou-text); }
.schedule-filter-empty p { margin: 0; font-size: 0.8rem; }

.schedule-empty-calendar {
    position: relative;
    width: 48px;
    height: 42px;
    border: 3px solid #c3a77e;
    border-radius: 10px;
}

.schedule-empty-calendar::before {
    display: block;
    height: 10px;
    border-bottom: 3px solid #c3a77e;
    content: '';
}

.schedule-pagination {
    display: grid;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr) minmax(86px, auto);
    align-items: center;
    gap: 0.6rem;
    border-top: 1px solid #e7ded1;
    padding-top: 1rem;
}

.schedule-pagination a,
.schedule-pagination > span {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7c8b5;
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    background: #fff;
    color: var(--ou-primary);
    font-weight: 900;
}

.schedule-pagination > span[aria-disabled='true'] {
    background: #f5f1eb;
    color: #9a958d;
}

.schedule-pagination strong {
    color: #65707d;
    font-size: 0.82rem;
    text-align: center;
}

.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
}

.schedule-empty-state,
.schedule-locked-message {
    display: grid;
    min-height: 180px;
    place-items: center;
    border: 1px dashed #d4c7b5;
    border-radius: 18px;
    padding: 1.2rem;
    background: #faf6ef;
    color: #646e7a;
    text-align: center;
}

.schedule-empty-state h3,
.schedule-empty-state p { margin: 0; }

.schedule-current-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    border: 1px solid rgba(8, 127, 115, 0.2);
    border-radius: 18px;
    padding: 1rem;
    background: rgba(8, 127, 115, 0.06);
}

.schedule-current-booking span,
.schedule-current-booking small { color: #61706f; }
.schedule-current-booking strong { color: var(--ou-text); }
.schedule-current-booking time { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--ou-secondary); font-size: 2rem; font-weight: 950; }

.schedule-alternative-form { display: grid; gap: 1rem; }
.schedule-alternative-form h2 { margin: 0; color: var(--ou-text); }
.schedule-alternative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.schedule-alternative-grid label { cursor: pointer; }
.schedule-alternative-grid input { position: absolute; opacity: 0; }
.schedule-alternative-grid label > span { display: grid; gap: 0.3rem; border: 1px solid #ddd2c2; border-radius: 16px; padding: 1rem; background: #fffdfa; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.schedule-alternative-grid label:hover > span,
.schedule-alternative-grid label.is-selected > span,
.schedule-alternative-grid input:checked + span { border-color: var(--ou-secondary); box-shadow: var(--transport-focus); transform: translateY(-2px); }
.schedule-alternative-grid strong { color: var(--ou-text); font-size: 1.35rem; }
.schedule-alternative-grid small { color: #5f6975; }
.schedule-alternative-grid em { color: var(--ou-secondary); font-style: normal; font-size: 0.78rem; font-weight: 900; }

.schedule-one-off-change {
    width: min(820px, 100%);
    margin-inline: auto;
}

.schedule-change-policy {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(8, 127, 115, 0.2);
    border-radius: 15px;
    padding: 0.75rem 0.85rem;
    background: rgba(8, 127, 115, 0.06);
    color: #315e59;
}

.schedule-change-policy i {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid var(--ou-secondary);
    border-radius: 50%;
}

.schedule-change-policy i::before,
.schedule-change-policy i::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 2px;
    border-radius: 2px;
    background: var(--ou-secondary);
    content: '';
    transform-origin: bottom center;
}

.schedule-change-policy i::before { height: 8px; transform: translate(-50%, -100%); }
.schedule-change-policy i::after { height: 6px; transform: translate(-50%, -100%) rotate(120deg); }
.schedule-change-policy p { margin: 0; font-size: 0.8rem; font-weight: 850; line-height: 1.65; }

.schedule-time-options label.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.schedule-time-options label.is-disabled > span {
    border-style: dashed;
    background: #f6f3ee;
    box-shadow: none;
    transform: none;
}

.schedule-time-options label.is-disabled em { color: #7c7170; }

.schedule-return-link {
    display: inline-flex;
    min-height: 44px;
    width: fit-content;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0.55rem 0.8rem;
    color: var(--ou-primary);
    font-size: 0.8rem;
    font-weight: 900;
}

.schedule-dashboard-link {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 0.85rem;
    color: inherit;
}

.schedule-dashboard-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background:
        linear-gradient(#fff 0 0) 50% 60% / 24px 20px no-repeat,
        linear-gradient(var(--ou-primary) 0 0) 50% 34% / 24px 6px no-repeat,
        rgba(154, 100, 47, 0.12);
}

.schedule-dashboard-link div { display: grid; gap: 0.25rem; }
.schedule-dashboard-link strong { color: var(--ou-text); font-size: 1rem; }
.schedule-dashboard-link small { color: #68727e; line-height: 1.5; }
.schedule-dashboard-link > i { width: 9px; height: 9px; border-inline-end: 2px solid var(--ou-primary); border-block-end: 2px solid var(--ou-primary); transform: rotate(135deg); }
[dir='ltr'] .schedule-dashboard-link > i { transform: rotate(-45deg); }
.schedule-dashboard-link > b { color: var(--ou-secondary); font-size: 0.82rem; white-space: nowrap; }
.billing-dashboard-link { grid-template-columns: 54px minmax(0, 1fr) auto 14px; }

.billing-content { display: grid; gap: 1rem; }
.billing-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.billing-summary article { display: grid; gap: 0.4rem; border: 1px solid var(--ou-border); border-radius: 18px; padding: 1rem; background: #fff; box-shadow: var(--ou-shadow-sm); }
.billing-summary span { color: #65707d; font-size: 0.78rem; font-weight: 850; }
.billing-summary strong { color: var(--ou-primary); font-size: 1.45rem; }
.billing-summary strong small { font-size: 0.72rem; }
.billing-summary .is-overdue { border-color: rgba(176, 43, 43, 0.28); background: #fff8f7; }
.billing-summary .is-overdue strong { color: #a62f2f; }
.billing-next-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.billing-next-card div { display: grid; gap: 0.25rem; }
.billing-next-card span, .billing-next-card p { color: #64717c; }
.billing-next-card h2, .billing-next-card p { margin: 0; }
.billing-next-card > strong { color: var(--ou-secondary); font-size: 1.35rem; white-space: nowrap; }
.billing-list { display: grid; gap: 0.8rem; }
.billing-invoice { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; border: 1px solid var(--ou-border); border-radius: 19px; padding: 1rem; background: #fff; box-shadow: var(--ou-shadow-sm); }
.billing-invoice-month { display: grid; place-items: center; border-radius: 14px; padding: 0.7rem; background: #f3eee6; color: var(--ou-primary); }
.billing-invoice-month span { color: #6e7881; font-size: 0.75rem; }
.billing-invoice-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.billing-invoice-values div { display: grid; gap: 0.2rem; }
.billing-invoice-values span { color: #727d87; font-size: 0.72rem; }
.billing-invoice-values strong { color: var(--ou-text); }
.billing-invoice-status { display: grid; justify-items: end; gap: 0.2rem; }
.billing-invoice-status strong { color: var(--ou-secondary); }
.billing-invoice-status small { color: #6a7580; }
.billing-invoice.is-unpaid .billing-invoice-status strong,
.billing-invoice.is-partial .billing-invoice-status strong { color: #9a642f; }
.billing-invoice details { grid-column: 2 / -1; border-top: 1px solid var(--ou-border); padding-top: 0.7rem; }
.billing-invoice summary { color: var(--ou-primary); cursor: pointer; font-weight: 850; }
.billing-invoice details p { margin: 0.5rem 0 0; color: #5e6974; font-size: 0.78rem; }

.pwa-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nav-calendar {
    display: block;
    width: 22px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 5px;
    background:
        linear-gradient(currentColor 0 0) 4px 7px / 3px 3px no-repeat,
        linear-gradient(currentColor 0 0) 9px 7px / 3px 3px no-repeat,
        linear-gradient(currentColor 0 0) 14px 7px / 3px 3px no-repeat;
}

.nav-calendar::before {
    display: block;
    height: 4px;
    border-bottom: 2px solid currentColor;
    content: '';
}

@media (max-width: 900px) {
    .schedule-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-day-grid { grid-template-columns: 1fr; }
    .schedule-notification-panel { grid-template-columns: 1fr 1fr; }
    .schedule-notification-panel > div { grid-column: 1 / -1; }
    .schedule-planner-grid { grid-template-columns: 1fr; }
    .schedule-calendar-panel { position: static; }
    .schedule-journey-card { grid-template-columns: minmax(92px, 0.55fr) minmax(180px, 1.6fr) minmax(120px, 0.8fr); }
    .schedule-journey-actions,
    .schedule-journey-locked { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 600px) {
    .schedule-content { gap: 0.75rem; }
    .schedule-builder,
    .schedule-plan { scroll-margin-top: 92px; }
    .schedule-hero { grid-template-columns: 1fr; border-radius: 20px; }
    .schedule-hero-policy { width: 100%; min-height: auto; grid-template-columns: auto 1fr; align-items: center; gap: 0.7rem; text-align: start; }
    .schedule-hero-policy span { margin: 0; }
    .schedule-hero-policy small { grid-column: 1 / -1; }
    .schedule-stats { gap: 0.5rem; }
    .schedule-stats article { padding: 0.75rem; }
    .schedule-builder, .schedule-plan, .schedule-change-shell { border-radius: 20px; padding: 0.85rem; }
    .schedule-section-heading { display: grid; }
    .schedule-section-heading output { width: fit-content; white-space: normal; }
    .schedule-day-card { padding: 0.8rem; }
    .schedule-day-fields { grid-template-columns: 1fr; }
    .schedule-route-summary { grid-template-columns: 1fr; }
    .schedule-route-summary > i { width: 2px; height: 28px; margin-inline-start: 1rem; }
    .schedule-flow-line { display: none; }
    .schedule-location-row { grid-template-columns: 1fr; }
    .schedule-notification-panel { grid-template-columns: 1fr; }
    .schedule-notification-panel > div { grid-column: auto; }
    .schedule-planner-heading { align-items: start; }
    .schedule-status-legend { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; }
    .schedule-status-legend::-webkit-scrollbar { display: none; }
    .schedule-calendar-panel { gap: 0.6rem; border-radius: 17px; padding: 0.65rem; }
    .schedule-calendar-toolbar { grid-template-columns: 42px minmax(0, 1fr) 42px; }
    .schedule-calendar-toolbar > a,
    .schedule-calendar-toolbar > span { width: 42px; height: 42px; }
    .schedule-calendar-weekdays,
    .schedule-calendar-grid { gap: 0.18rem; }
    .schedule-calendar-weekdays span { font-size: 0.6rem; }
    .schedule-calendar-day { min-height: 60px; border-radius: 9px; padding-inline: 0.08rem; }
    .schedule-calendar-day > strong { width: 22px; height: 22px; font-size: 0.7rem; }
    .schedule-calendar-events i { font-size: 0.5rem; }
    .schedule-agenda-toolbar { align-items: flex-start; }
    .schedule-agenda-toolbar button { min-width: 44px; }
    .schedule-agenda-day > header { padding-inline: 0; }
    .schedule-journey-card { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.7rem; }
    .schedule-journey-time { grid-column: 1; grid-row: 1; }
    .schedule-journey-state { grid-column: 2; grid-row: 1; justify-items: end; text-align: end; }
    .schedule-journey-route { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid #eee6dc; padding-top: 0.6rem; }
    .schedule-journey-actions,
    .schedule-journey-locked { grid-column: 1 / -1; grid-row: 3; }
    .schedule-journey-actions { width: 100%; flex-direction: row; }
    .schedule-journey-actions a,
    .schedule-journey-actions form,
    .schedule-journey-actions button { flex: 1; width: 100%; }
    .schedule-month summary { grid-template-columns: minmax(0, 1fr) 18px; }
    .schedule-month summary small { grid-column: 1; }
    .schedule-month summary i { grid-column: 2; grid-row: 1 / 3; }
    .schedule-alternative-grid { grid-template-columns: 1fr; }
    .pwa-bottom-nav a { font-size: 0.64rem; }
    .billing-summary { grid-template-columns: 1fr; }
    .billing-invoice { grid-template-columns: 64px minmax(0, 1fr); }
    .billing-invoice-values { grid-template-columns: 1fr 1fr; }
    .billing-invoice-status { grid-column: 2; justify-items: start; }
    .billing-invoice details { grid-column: 1 / -1; }
    .billing-dashboard-link { grid-template-columns: 48px minmax(0, 1fr) 12px; }
    .billing-dashboard-link > b { grid-column: 2; }
    .billing-dashboard-link > i { grid-column: 3; grid-row: 1 / 3; }
}

.home-clean-hero {
    min-height: min(720px, calc(100vh - 132px));
}

.home-clean-hero .hero-content {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
}

.home-clean-hero .hero-content h1 {
    margin-block: 0.15rem 0.4rem;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
}

.home-clean-hero .home-actions {
    margin-top: 1rem;
}

.home-clean-hero .visual-bus {
    animation: transport-bus-float 4.2s ease-in-out infinite;
}

.home-clean-hero .visual-stop {
    animation: transport-stop-pulse 2.2s ease-in-out infinite;
}

.home-clean-hero .visual-stop.mid { animation-delay: 0.35s; }
.home-clean-hero .visual-stop.end { animation-delay: 0.7s; }

@keyframes transport-bus-float {
    0%, 100% { translate: 0 0; }
    50% { translate: -10px -7px; }
}

@keyframes transport-stop-pulse {
    0%, 100% { scale: 1; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); }
    50% { scale: 1.12; box-shadow: 0 0 0 10px rgba(8, 127, 115, 0.09); }
}

@media (prefers-reduced-motion: reduce) {
    .transport-ui-ready .transport-reveal,
    .transport-ui-ready .student-pwa-app .pwa-card,
    .transport-ui-ready .driver-stat-grid > *,
    .transport-ui-ready .console-panel {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .home-clean-hero .visual-bus,
    .home-clean-hero .visual-stop {
        animation: none;
    }
}

/* Final student shell corrections loaded after all component rules. */
.student-pwa-app .pwa-blue-header .pwa-appbar {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.student-pwa-app.is-page-scrolled .pwa-blue-header,
.student-pwa-app.is-page-scrolled .student-desktop-header {
    box-shadow: 0 12px 30px rgba(39, 29, 18, 0.14);
}

@media (max-width: 1023px) {
    .pwa-filter-form > button:last-child {
        grid-column: 1 / -1;
    }
}

.pwa-page-symbol.pwa-map-symbol {
    position: relative;
    min-width: 58px;
    width: 58px;
    height: 58px;
}

.pwa-page-symbol.pwa-map-symbol::before {
    width: 25px;
    height: 25px;
    border: 3px solid currentColor;
    border-radius: 50% 50% 50% 0;
    content: '';
    transform: rotate(-45deg);
}

.pwa-page-symbol.pwa-map-symbol::after {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: '';
    transform: translateX(-50%);
}

/* Driver and bus operation surfaces — final responsive layer. */
.driver-pwa-body {
    background:
        radial-gradient(circle at 10% 2%, rgba(8, 127, 115, 0.09), transparent 24rem),
        #f5f3ed;
}

.driver-pwa-app {
    --driver-ink: #13273a;
    --driver-muted: #657383;
    --driver-teal: #087f73;
    --driver-teal-dark: #075e57;
    --driver-gold: #d9ad4a;
    --driver-border: #dedbd2;
}

.driver-pwa-app .driver-blue-header {
    background:
        linear-gradient(90deg, #a35b35 0 33%, #caa24e 33% 66%, #287757 66%) top / 100% 4px no-repeat,
        linear-gradient(135deg, #075e57, #087f73);
}

.driver-pwa-app .driver-content {
    width: min(100%, 1180px);
    gap: 0.8rem;
}

.driver-pwa-app .pwa-card,
.driver-pwa-app .driver-trip-card {
    border: 1px solid var(--driver-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 26px rgba(39, 29, 18, 0.055);
}

.driver-pwa-app .driver-shift-hero {
    min-height: 142px;
    border: 0;
    padding: clamp(1rem, 3vw, 1.35rem);
    background:
        radial-gradient(circle at 10% 50%, rgba(217, 173, 74, 0.16), transparent 13rem),
        linear-gradient(135deg, #0a3e3b, #087f73);
    color: #fff;
    box-shadow: 0 16px 34px rgba(7, 94, 87, 0.18);
}

.driver-pwa-app .driver-shift-hero :where(h1, .pwa-section-label) {
    color: #fff;
}

.driver-pwa-app .driver-shift-hero .pwa-section-label {
    opacity: 0.78;
}

.driver-pwa-app .driver-shift-hero .driver-inline-meta span {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.driver-shift-clock {
    flex: 0 0 auto;
    display: grid;
    min-width: 128px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
}

.driver-shift-clock strong {
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.driver-shift-clock span {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 850;
}

.driver-pwa-app .driver-stat {
    min-height: 78px;
    border-radius: 17px;
    padding: 0.75rem 0.85rem;
}

.driver-pwa-app .driver-stat span,
.driver-pwa-app .driver-trip-metrics span,
.driver-pwa-app .driver-gps-grid span {
    color: var(--driver-muted);
}

.driver-pwa-app .driver-stat strong,
.driver-pwa-app .driver-trip-metrics strong,
.driver-pwa-app .driver-gps-grid strong {
    color: var(--driver-ink);
    font-variant-numeric: tabular-nums;
}

.driver-pwa-app .driver-current-card {
    position: relative;
    overflow: hidden;
}

.driver-pwa-app .driver-current-card::before,
.driver-pwa-app .driver-trip-hero::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: linear-gradient(var(--driver-teal), var(--driver-gold));
    content: '';
}

.driver-pwa-app .driver-current-actions :where(a, button),
.driver-pwa-app .driver-account-actions :where(a, button) {
    min-height: 48px;
}

.driver-pwa-app .driver-readiness-card {
    background: #fffdf7;
}

.driver-pwa-app .driver-check-list {
    gap: 0.58rem;
}

.driver-pwa-app .driver-trip-page .driver-operation-lock {
    position: relative;
    border: 1px solid #dfc480;
    border-radius: 18px;
    padding-inline-start: 3.3rem;
    background: #fff8e6;
}

.driver-pwa-app .driver-trip-page .driver-operation-lock::before {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #8a6116;
    border-radius: 9px;
    color: #8a6116;
    content: '!';
    font-weight: 950;
    transform: translateY(-50%);
}

.driver-pwa-app .driver-trip-hero {
    position: relative;
    min-height: 132px;
    padding: 1.05rem 1.2rem;
    background: linear-gradient(105deg, #fff, #f2f8f6);
}

.driver-pwa-app .driver-command-card {
    border-color: #c9d9d4;
    background: #fbfdfc;
}

.driver-pwa-app .driver-command-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
}

.driver-pwa-app .driver-command-grid form {
    grid-column: span 2;
}

.driver-pwa-app .driver-command-grid .driver-command-primary {
    grid-column: span 3;
}

.driver-pwa-app .driver-command {
    min-height: 64px;
    border-radius: 15px;
    box-shadow: none;
}

.driver-pwa-app .driver-command.primary {
    border-color: var(--driver-teal);
    background: var(--driver-teal);
}

.driver-pwa-app .driver-command.success {
    border-color: #397a4b;
    background: #397a4b;
}

.driver-pwa-app .driver-command.warning {
    border-color: #d8b75f;
    background: #fff8e7;
    color: #74510a;
}

.driver-pwa-app .driver-command.danger {
    border-color: #deb6b0;
    background: #fff3f1;
    color: #a12d2d;
}

.driver-pwa-app .driver-command:disabled {
    border-color: #d7d3ca;
    background: #e9e6de;
    color: #8a8b88;
    opacity: 0.68;
}

.driver-route-map {
    width: 100%;
    min-height: 390px;
    border: 1px solid #d8dedb;
    border-radius: 16px;
    overflow: hidden;
}

.driver-pwa-app .driver-stop-list article {
    border-color: #e4e1d8;
    background: #fbfbf8;
}

.driver-pwa-app .driver-stop-list article > span {
    border-color: var(--driver-teal);
    background: #eaf5f2;
    color: var(--driver-teal-dark);
}

.driver-pwa-app .driver-student-list article {
    border: 1px solid #e2dfd6;
    border-radius: 16px;
    background: #fff;
}

.driver-pwa-app .driver-bottom-nav {
    border-color: rgba(190, 182, 167, 0.72);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 28px rgba(39, 29, 18, 0.09);
    backdrop-filter: blur(18px);
}

.driver-pwa-app .driver-bottom-nav a[aria-current='page'] {
    background: #e8f3ef;
    color: var(--driver-teal-dark);
}

.console-flow-body {
    --console-navy: #14273d;
    --console-blue: #087f73;
    --console-gold: #d9ad4a;
    --console-green: #397a4b;
    background:
        radial-gradient(circle at 8% 4%, rgba(8, 127, 115, 0.08), transparent 28rem),
        #f4f1e9;
}

.console-flow-body::before {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 4px;
    background: linear-gradient(90deg, #a35b35 0 33%, #caa24e 33% 66%, #287757 66%);
    content: '';
}

.console-flow-shell {
    width: min(1600px, 100%);
    min-height: 100dvh;
    padding: 0.75rem;
}

.console-gate-header,
.console-simple-header,
.console-page-header,
.console-assigned-area-bar,
.console-page-card {
    border-color: #ddd8cc;
    box-shadow: 0 10px 26px rgba(39, 29, 18, 0.06);
}

.console-gate-brand img,
.console-simple-brand img,
.console-page-brand img,
.console-pair-brand img,
.console-brand-emblem {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1px solid #e5dfd2;
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
}

.console-brand-emblem {
    position: relative;
    display: block;
    background:
        linear-gradient(160deg, transparent 45%, #d9ad4a 46% 52%, transparent 53%) center / 80% 80% no-repeat,
        #0f304b;
}

.console-brand-emblem[hidden] {
    display: none;
}

.console-brand-emblem::before {
    position: absolute;
    inset: 13px 9px 15px;
    border: 2px solid #fff;
    border-radius: 4px 8px 4px 4px;
    content: '';
}

.console-brand-emblem::after {
    position: absolute;
    right: 12px;
    bottom: 9px;
    width: 6px;
    height: 6px;
    border: 2px solid #0f304b;
    border-radius: 50%;
    background: #d9ad4a;
    box-shadow: 15px 0 0 -2px #d9ad4a, 15px 0 0 0 #0f304b;
    content: '';
}

.console-gate-card {
    border-color: #ddd8cc;
    box-shadow: 0 24px 60px rgba(39, 29, 18, 0.11);
}

.console-gate-submit,
.console-flow-body .button.primary {
    border-color: #087f73;
    background: #087f73;
    color: #fff;
}

.console-direction-picker input:checked + span,
.console-area-choice input:checked + span {
    border-color: #087f73;
    background: #eaf5f2;
    color: #075e57;
}

.console-area-choice input:checked + span i {
    border-color: #087f73;
    background: #087f73;
}

.console-simple-dashboard {
    gap: 0.65rem;
    min-height: calc(100dvh - 1.5rem);
}

.console-simple-header {
    min-height: 64px;
    border-radius: 17px;
}

.console-simple-brand {
    min-width: 0;
}

.console-simple-brand div {
    min-width: 0;
}

.console-simple-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-live-state.is-running {
    background: #e8f3ec;
    color: #2d6840;
}

.console-assigned-area-bar {
    min-height: 46px;
    border-radius: 14px;
}

.console-assigned-area-bar span {
    border-color: #c9ddd7;
    background: #edf6f3;
    color: #075e57;
}

.console-simple-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    height: calc(100dvh - 145px);
    min-height: 520px;
    gap: 0.65rem;
}

.console-simple-primary {
    grid-template-areas:
        'next'
        'map'
        'actions';
    grid-template-rows: auto minmax(260px, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.console-next-card {
    grid-area: next;
    min-height: 108px;
    border-color: transparent;
    background:
        radial-gradient(circle at 10% 50%, rgba(217, 173, 74, 0.14), transparent 16rem),
        linear-gradient(135deg, #10273e, #174b53);
}

.console-simple-map {
    grid-area: map;
    min-height: 0;
}

.console-simple-map .console-map-inner {
    min-height: 100%;
    height: 100%;
}

.console-primary-actions {
    grid-area: actions;
    gap: 0.5rem;
}

.console-primary-actions .button {
    min-height: 54px;
    border-radius: 13px;
    font-size: 0.88rem;
}

.console-primary-actions .button.warning {
    border-color: #d9bd74;
    background: #fff8e7;
    color: #79530b;
}

.console-primary-actions .button.danger {
    border-color: #dfb4af;
    background: #fff2f0;
    color: #a12d2d;
}

.console-primary-actions .button.success {
    border-color: #397a4b;
    background: #397a4b;
    color: #fff;
}

.console-primary-actions .button:disabled {
    border-color: #ddd9d0;
    background: #eae7df;
    color: #8d8c87;
    opacity: 0.68;
}

.console-simple-side {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.console-next-card,
.console-simple-map,
.console-simple-passengers,
.console-route-order,
.console-stop-card,
.console-simple-qr {
    border-radius: 17px;
    box-shadow: 0 8px 22px rgba(39, 29, 18, 0.055);
}

.console-route-order li.is-next {
    background: #eaf5f2;
    color: #13273a;
}

.console-route-order li.is-next b {
    border-color: #087f73;
    background: #087f73;
}

.console-capacity-track i {
    background: #397a4b;
}

.console-page-shell {
    width: min(1180px, 100%);
}

.console-page {
    display: grid;
    gap: 0.8rem;
    width: 100%;
}

.console-page-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 70px;
    border: 1px solid #ddd8cc;
    border-radius: 19px;
    padding: 0.65rem 0.75rem;
    background: #fff;
}

.console-page-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d9d5cc;
    border-radius: 13px;
    background: #faf9f6;
    color: #075e57;
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
}

.console-page-brand,
.console-pair-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.console-page-brand div {
    display: grid;
    min-width: 0;
}

.console-page-brand strong {
    color: #13273a;
    font-size: 1.05rem;
}

.console-page-brand span {
    overflow: hidden;
    color: #667483;
    font-size: 0.76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-page-list {
    display: grid;
    gap: 0.7rem;
}

.console-page-card {
    border: 1px solid #ddd8cc;
    border-radius: 18px;
    background: #fff;
}

.console-trip-row {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) auto 110px;
    align-items: center;
    gap: 0.85rem;
    min-height: 96px;
    padding: 0.8rem;
}

.console-trip-row time {
    display: grid;
    place-items: center;
    min-height: 70px;
    border-radius: 14px;
    background: #eaf5f2;
    color: #075e57;
}

.console-trip-row time strong {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.console-trip-row time span,
.console-trip-row p {
    color: #697684;
    font-size: 0.76rem;
    font-weight: 800;
}

.console-trip-row h2,
.console-trip-row p {
    margin: 0;
}

.console-trip-row h2 {
    color: #13273a;
    font-size: 1rem;
}

.console-passenger-row {
    display: grid;
    grid-template-columns: 44px minmax(150px, 0.8fr) minmax(220px, 1.2fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 82px;
    padding: 0.75rem;
}

.console-passenger-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% 34%, #087f73 0 6px, transparent 7px),
        radial-gradient(ellipse at 50% 78%, #087f73 0 13px, transparent 14px),
        #eaf5f2;
}

.console-passenger-name,
.console-passenger-state {
    display: grid;
    gap: 0.15rem;
}

.console-passenger-name span,
.console-passenger-state small {
    color: #697684;
    font-size: 0.74rem;
}

.console-passenger-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    color: #3e4f5f;
    font-size: 0.78rem;
    font-weight: 800;
}

.console-passenger-route i {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #087f73, #d9ad4a);
}

.console-instruction-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 82px;
    padding: 0.9rem;
}

.console-instruction-row > div {
    display: grid;
    gap: 0.25rem;
}

.console-instruction-row span {
    color: #657383;
}

.console-instruction-row.is-critical {
    border-color: #deb4ae;
    background: #fff7f5;
}

.console-page-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 1.2rem;
    text-align: center;
}

.console-full-map-card {
    height: calc(100dvh - 105px);
    min-height: 520px;
    padding: 0.45rem;
    overflow: hidden;
}

.console-full-map-card .map-full {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: 14px;
}

.console-pair-refined {
    position: relative;
    width: min(620px, calc(100% - 1.5rem));
    margin: min(10vh, 5rem) auto 0;
    padding-top: 5.5rem;
}

.console-pair-brand {
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline-start: 1.2rem;
}

.console-pair-brand strong {
    color: #13273a;
}

@media (min-width: 1024px) {
    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-hero {
        min-height: 190px;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-content {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-command-card,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-live-map-card,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-route-card,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-students-card {
        grid-column: 1;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-scan-card {
        top: 92px;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-gps-card {
        top: 372px;
    }
}

@media (max-width: 980px) {
    .console-simple-layout {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .console-simple-primary,
    .console-simple-side {
        overflow: visible;
    }

    .console-simple-map,
    .console-simple-map .console-map-inner {
        min-height: 460px;
        height: 460px;
    }

    .console-primary-actions {
        position: sticky;
        bottom: 0.5rem;
        z-index: 700;
        border: 1px solid #d9d5cc;
        border-radius: 16px;
        padding: 0.45rem;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 36px rgba(39, 29, 18, 0.15);
        backdrop-filter: blur(16px);
    }
}

@media (max-width: 1023px) {
    .driver-pwa-app .driver-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-pwa-app .driver-command-grid form,
    .driver-pwa-app .driver-command-grid .driver-command-primary {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .driver-pwa-app .driver-content {
        padding-inline: 0.72rem;
    }

    .driver-pwa-app .driver-shift-hero {
        min-height: 126px;
        border-radius: 18px;
    }

    .driver-shift-clock {
        min-width: 100px;
        padding: 0.65rem;
    }

    .driver-shift-clock strong {
        font-size: 1.65rem;
    }

    .driver-pwa-app .driver-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-pwa-app .driver-command-grid form,
    .driver-pwa-app .driver-command-grid .driver-command-primary {
        grid-column: span 1;
    }

    .driver-route-map {
        min-height: 340px;
    }

    .console-flow-shell {
        padding: 0.5rem;
    }

    .console-simple-dashboard {
        min-height: calc(100dvh - 1rem);
    }

    .console-simple-map,
    .console-simple-map .console-map-inner {
        min-height: 50vh;
        height: 50vh;
    }

    .console-page-header {
        grid-template-columns: 44px minmax(0, 1fr) 70px;
        gap: 0.55rem;
        border-radius: 16px;
    }

    .console-page-brand img,
    .console-page-brand .console-brand-emblem {
        display: none;
    }

    .console-trip-row {
        grid-template-columns: 78px minmax(0, 1fr) auto;
    }

    .console-trip-row > .button {
        grid-column: 2 / -1;
        width: 100%;
    }

    .console-passenger-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .console-passenger-route {
        grid-column: 2 / -1;
    }

    .console-full-map-card {
        height: calc(100dvh - 96px);
        min-height: 480px;
    }
}

@media (max-width: 520px) {
    .driver-pwa-app .driver-shift-hero {
        align-items: stretch;
    }

    .driver-pwa-app .driver-shift-hero .driver-inline-meta span:last-child {
        display: none;
    }

    .driver-pwa-app .driver-trip-hero {
        align-items: flex-start;
    }

    .driver-pwa-app .driver-command {
        min-height: 60px;
    }

    .console-simple-header {
        border-radius: 15px;
    }

    .console-simple-brand img,
    .console-simple-brand .console-brand-emblem {
        width: 42px;
        height: 42px;
    }

    .console-primary-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .console-primary-actions [data-console-action='complete'] {
        grid-column: 1 / -1;
    }

    .console-next-card h1 {
        font-size: 1.65rem;
    }

    .console-next-card > div {
        gap: 0.35rem;
    }

    .console-assigned-area-bar > strong {
        max-width: 42%;
        white-space: normal;
    }

    .console-page-header {
        grid-template-columns: 42px minmax(0, 1fr) 64px;
        padding: 0.55rem;
    }

    .console-page-brand strong {
        font-size: 0.92rem;
    }

    .console-trip-row {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 0.65rem;
    }

    .console-trip-row > .pwa-status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .console-trip-row > .button {
        grid-column: 1 / -1;
    }

    .console-passenger-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .console-passenger-state {
        grid-column: 2;
        justify-items: start;
    }

    .console-passenger-route {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .console-passenger-route i {
        width: 2px;
        height: 18px;
        margin-inline-start: 0.75rem;
    }

    .console-instruction-row {
        grid-template-columns: 1fr;
    }
}

/* Driver portal alignment with the student information architecture. */
.driver-pwa-app .student-desktop-header,
.driver-pwa-app .pwa-blue-header,
.driver-pwa-app .driver-bottom-nav {
    z-index: 1200;
}

.driver-pwa-app .driver-live-map-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
}

.driver-pwa-app .driver-live-map-card .leaflet-container {
    position: relative;
    z-index: 0;
}

.driver-pwa-app .driver-live-map-card {
    padding: 0.75rem;
}

.driver-live-map-card .pwa-card-heading {
    margin-bottom: 0.65rem;
    padding-inline: 0.2rem;
}

.driver-live-map-status {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 32px;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: #f0f2ef;
    color: #68736f;
}

.driver-live-map-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9aa39f;
}

.driver-live-map-status b {
    font-size: 0.76rem;
    font-weight: 950;
}

.driver-live-map-status[data-driver-live-status='live'] {
    background: #e6f6ee;
    color: #197449;
}

.driver-live-map-status[data-driver-live-status='live'] i {
    background: #25a863;
    box-shadow: 0 0 0 5px rgba(37, 168, 99, 0.12);
}

.driver-live-map-status[data-driver-live-status='stale'] {
    background: #fff5df;
    color: #8a6116;
}

.driver-live-map-status[data-driver-live-status='stale'] i {
    background: #d69b2d;
}

.driver-live-map-card .driver-route-map {
    width: 100%;
    height: clamp(460px, 62vh, 720px);
    min-height: 460px;
}

.driver-home-content {
    align-items: stretch;
}

.driver-home-overview {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.45rem);
    border-color: rgba(5, 78, 73, 0.4) !important;
    background:
        linear-gradient(135deg, rgba(5, 78, 73, 0.98), rgba(8, 127, 115, 0.96) 62%, rgba(126, 78, 38, 0.94)),
        url('/vendor/omani-ui/patterns/sadu-chevron.svg') center / 110px repeat !important;
    color: #fff;
    box-shadow: 0 20px 42px rgba(5, 78, 73, 0.2) !important;
}

.driver-overview-person .pwa-avatar {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border: 3px solid rgba(255, 255, 255, 0.7);
    background-color: #fff;
}

.driver-overview-person .pwa-greeting :where(span, h1, strong) {
    color: #fff;
}

.driver-overview-person .pwa-greeting span {
    opacity: 0.76;
}

.driver-overview-person .pwa-greeting h1 {
    margin: 0.12rem 0;
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.driver-shift-context strong {
    white-space: normal;
}

.driver-overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-current-card.student-today-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: stretch;
    direction: inherit;
    gap: 0.85rem;
    min-height: 100%;
    border-top: 4px solid var(--ou-secondary);
    padding: clamp(0.95rem, 2vw, 1.15rem);
}

.driver-current-card.student-today-card::before {
    display: none;
}

.driver-current-card .driver-current-route {
    min-height: 76px;
}

.driver-current-actions :where(.pwa-primary-button, .pwa-outline-button) {
    min-width: 0;
    padding-inline: 0.7rem;
    white-space: normal;
    text-align: center;
}

.driver-readiness-card.student-next-card {
    min-height: 100%;
    padding: clamp(0.95rem, 2vw, 1.15rem);
}

.driver-quick-grid .student-quick-card {
    text-decoration: none;
}

.driver-quick-grid {
    align-self: start;
}

.driver-quick-grid .student-quick-card > .pwa-avatar.mini {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background-color: rgba(8, 127, 115, 0.1);
}

.driver-quick-grid .student-quick-card > .nav-user {
    position: relative;
}

.driver-quick-grid .student-quick-card > .nav-user::before {
    inset-inline: auto;
    inset-inline-start: 18px;
    top: 9px;
    width: 12px;
    height: 12px;
}

.driver-quick-grid .student-quick-card > .nav-user::after {
    inset-inline: auto;
    inset-inline-start: 12px;
    bottom: 8px;
    width: 24px;
    height: 14px;
}

.driver-trip-list-panel {
    min-width: 0;
    padding: clamp(0.95rem, 2vw, 1.15rem);
}

.driver-trip-list-panel .driver-trip-list {
    min-width: 0;
}

.driver-trip-list-panel .driver-trip-card {
    border-radius: 16px;
    box-shadow: none;
}

@media (min-width: 700px) and (max-width: 1023px) {
    .driver-home-overview,
    .driver-quick-grid,
    .driver-trip-list-panel {
        grid-column: 1 / -1;
    }

    .driver-home-overview {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

    .driver-overview-stats {
        grid-column: 1 / -1;
    }

    .driver-current-card { grid-column: 1; }
    .driver-readiness-card { grid-column: 2; }
    .driver-current-card,
    .driver-readiness-card { align-self: start; }
    .driver-current-card.student-today-card,
    .driver-readiness-card.student-next-card { min-height: 0; }
    .driver-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .driver-desktop-header {
        grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-trip-page {
        grid-auto-flow: row dense;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-operation-lock,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-trip-hero,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-stat-grid,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-live-map-card {
        grid-column: 1 / -1;
    }

    .driver-pwa-app[data-live-page='driver-trip'] .driver-scan-card,
    .driver-pwa-app[data-live-page='driver-trip'] .driver-gps-card {
        position: static;
        grid-column: 2;
        grid-row: auto;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-home-content {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: stretch;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-home-overview {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: minmax(250px, 0.72fr) minmax(290px, 1fr) minmax(340px, 0.9fr);
        align-items: center;
        min-height: 190px;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-current-card {
        grid-column: 1 / 8;
        grid-row: auto;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-readiness-card {
        grid-column: 8 / -1;
        grid-row: auto;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-quick-grid {
        grid-column: 1 / 8;
        grid-row: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-trip-list-panel {
        grid-column: 8 / -1;
        grid-row: auto;
        max-height: 410px;
        overflow-y: auto;
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-trip-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-pwa-app[data-live-page='driver-dashboard'] .driver-trip-card {
        padding: 0.85rem;
    }
}

@media (max-width: 699px) {
    .driver-home-overview,
    .driver-current-card,
    .driver-readiness-card,
    .driver-quick-grid,
    .driver-trip-list-panel {
        grid-column: 1;
    }

    .driver-overview-stats {
        gap: 0.45rem;
    }

    .driver-overview-stats a {
        padding: 0.58rem;
    }

    .driver-quick-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .driver-students-full-card .driver-student-list article {
        display: grid;
        grid-template-areas:
            'main'
            'route';
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .driver-students-full-card .driver-student-main { grid-area: main; }
    .driver-students-full-card .driver-student-route { grid-area: route; }
    .driver-students-full-card .driver-student-meta { grid-area: meta; }

    .driver-live-map-card .driver-route-map {
        height: min(64dvh, 560px);
        min-height: 420px;
    }
}

/* Final cascade rules for the 8.7-inch bus tablet. */
.console-simple-primary {
    grid-template-areas:
        'next'
        'launch'
        'actions';
    grid-template-rows: auto auto auto;
}

.console-live-map-body::before,
.console-live-map-body .omani-page-ornament {
    display: none;
}

@media (min-width: 700px) and (max-width: 1100px) {
    .console-flow-body .console-flow-shell {
        padding: 0.5rem;
    }

    .console-flow-body .console-simple-dashboard {
        min-height: calc(100dvh - 1rem);
    }

    .console-flow-body .console-simple-layout {
        grid-template-columns: minmax(0, 1.06fr) minmax(285px, 0.84fr);
        height: calc(100dvh - 134px);
        min-height: 0;
    }

    .console-flow-body .console-simple-primary {
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .console-flow-body .console-simple-side {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        overflow-y: auto;
    }

    .console-flow-body .console-primary-actions {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 699px) {
    .console-flow-body .console-simple-primary {
        overflow: visible;
    }
}

/* Public phone login workflow */
.login-page .login-form-card {
    width: 100%;
    max-width: 540px;
    gap: 1rem;
    overflow: visible;
}

.login-page .login-heading p {
    margin: 0.2rem 0 0;
    color: var(--ou-text-muted);
    font-weight: 700;
    line-height: 1.7;
}

.login-progress {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-progress li {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    color: var(--ou-text-muted);
    font-size: 0.82rem;
}

.login-progress li:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    inset-inline-start: 34px;
    inset-inline-end: 0;
    inset-block-start: 16px;
    height: 2px;
    content: '';
    background: var(--ou-border);
}

.login-progress li > span {
    z-index: 1;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid var(--ou-border-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--ou-text-muted);
    font-weight: 950;
}

.login-progress li > strong {
    position: relative;
    z-index: 1;
    width: fit-content;
    padding-inline: 0.25rem;
    background: #fff;
}

.login-progress li.is-current,
.login-progress li.is-complete {
    color: var(--ou-secondary);
}

.login-progress li.is-current > span,
.login-progress li.is-complete > span {
    border-color: var(--ou-secondary);
    background: var(--ou-secondary);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(8, 127, 115, 0.1);
}

.login-progress li.is-complete::after {
    background: var(--ou-secondary);
}

.login-phone-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    margin-block-start: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--ou-border-strong);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.login-phone-field:focus-within {
    border-color: var(--ou-secondary);
    box-shadow: var(--transport-focus);
}

.login-phone-prefix {
    align-self: stretch;
    display: grid;
    min-width: 70px;
    place-items: center;
    border-inline-end: 1px solid var(--ou-border);
    background: var(--ou-surface-2);
    color: var(--ou-primary-hover);
    font-size: 0.9rem;
    font-weight: 950;
}

.login-page .login-phone-field input {
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    direction: ltr;
    text-align: start;
}

.login-page .login-phone-field input:focus {
    outline: 0;
    box-shadow: none;
}

.login-page [name='verification_code'] {
    direction: ltr;
    text-align: center;
    font-size: clamp(1.25rem, 4vw, 1.55rem);
    font-weight: 950;
    letter-spacing: 0.34em;
}

.login-code-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    align-items: center;
    border: 1px solid rgba(8, 127, 115, 0.2);
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
    background: rgba(8, 127, 115, 0.06);
}

.login-code-intro span {
    color: var(--ou-text-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.login-code-intro strong {
    grid-column: 1;
    color: var(--ou-text);
    font-size: 1rem;
}

.login-code-intro a {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    color: var(--ou-secondary);
    font-size: 0.84rem;
    font-weight: 950;
}

.login-field-help,
.login-persistence-note,
.auth-password-details > p {
    margin: 0;
    color: var(--ou-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.65;
}

.login-persistence-note {
    position: relative;
    padding-inline-start: 1.35rem;
}

.login-persistence-note::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.45rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--ou-secondary);
    border-radius: 50% 50% 45% 45%;
    content: '';
    background: rgba(8, 127, 115, 0.1);
}

.login-page .auth-password-details {
    padding: 0;
    overflow: hidden;
    border-color: var(--ou-border);
    background: var(--ou-surface-2);
}

.login-page .auth-password-details summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    color: var(--ou-primary-hover);
    list-style: none;
}

.login-page .auth-password-details summary::-webkit-details-marker {
    display: none;
}

.login-page .auth-password-details summary::after {
    content: '+';
    font-size: 1.25rem;
    line-height: 1;
}

.login-page .auth-password-details[open] summary::after {
    content: '−';
}

.login-page .auth-password-details > p {
    padding: 0 0.85rem 0.8rem;
}

.login-page .auth-password-form {
    border-top: 1px solid var(--ou-border);
    padding: 0.9rem;
    background: #fff;
}

.login-resend-form {
    text-align: center;
}

.login-secondary-button {
    min-height: 44px;
    border: 0;
    padding: 0.45rem 0.75rem;
    background: transparent;
    color: var(--ou-secondary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 950;
    cursor: pointer;
}

.login-secondary-button:disabled,
.login-submit:disabled {
    cursor: wait;
    opacity: 0.62;
}

.login-page .login-footer-actions {
    justify-content: center;
    flex-wrap: wrap;
}

.login-page .login-footer-actions a + a::before {
    margin-inline-end: 0.8rem;
    color: var(--ou-border-strong);
    content: '•';
}

@media (max-width: 520px) {
    .login-page .auth-shell {
        padding: 0.75rem;
    }

    .login-page .login-form-card {
        padding: 1rem;
        border-radius: 16px;
    }

    .login-progress li {
        grid-template-columns: 30px minmax(0, 1fr);
        font-size: 0.75rem;
    }

    .login-progress li > span {
        width: 30px;
        height: 30px;
    }

    .login-progress li:not(:last-child)::after {
        inset-inline-start: 30px;
        inset-block-start: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-phone-field,
    .login-submit,
    .login-secondary-button {
        transition: none;
    }
}