:root {
    --bg: #fbf7f3;
    --bg-alt: #fff5e6;
    --panel: rgba(255, 252, 245, 0.95);
    --panel-strong: #ffffff;
    --text: #181116;
    --muted: #5a4450;
    --line: rgba(57, 34, 46, 0.14);
    --accent: #f5c84c;
    --accent-deep: #bf8c00;
    --teal: #6dbd45;
    --teal-deep: #2f7c3b;
    --danger: #ab2f51;
    --success: #2d7d49;
    --shadow: 0 30px 72px rgba(70, 41, 55, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(255, 196, 76, 0.12), transparent 18%),
        radial-gradient(circle at top right, rgba(15, 123, 114, 0.12), transparent 20%),
        linear-gradient(135deg, #1b1914 0%, #111824 52%, #0f2020 100%);
    font-weight: 800;
}

body.font-style-manrope {
    --app-font: 'Manrope', sans-serif;
    --display-font: 'Manrope', sans-serif;
}

body.font-style-sora {
    --app-font: 'Sora', sans-serif;
    --display-font: 'Sora', sans-serif;
}

body.font-style-arial {
    --app-font: Arial, Helvetica, sans-serif;
    --display-font: Arial, Helvetica, sans-serif;
}

body.font-style-georgia {
    --app-font: Georgia, 'Times New Roman', serif;
    --display-font: Georgia, 'Times New Roman', serif;
}

body.font-style-trebuchet {
    --app-font: 'Trebuchet MS', sans-serif;
    --display-font: 'Trebuchet MS', sans-serif;
}

body.font-style-verdana {
    --app-font: Verdana, Geneva, sans-serif;
    --display-font: Verdana, Geneva, sans-serif;
}

body.font-style-tahoma {
    --app-font: Tahoma, Geneva, sans-serif;
    --display-font: Tahoma, Geneva, sans-serif;
}

body.font-style-courier {
    --app-font: 'Courier New', monospace;
    --display-font: 'Courier New', monospace;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.55;
    pointer-events: none;
}

a {
    color: #8a1f58;
    text-decoration: none;
    font-weight: 900;
}

button,
input,
select {
    font: inherit;
}

.auth-shell,
.dashboard-shell {
    position: relative;
    z-index: 1;
}

.auth-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 24px;
}

.signup-shell {
    grid-template-columns: 1fr;
    max-width: 980px;
}

.auth-panel,
.glass-card,
.sidebar-card,
.wallet-card {
    backdrop-filter: blur(18px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 246, 0.95));
    border: 1px solid rgba(79, 51, 64, 0.12);
    border-radius: 32px;
    box-shadow: var(--shadow);
}

.auth-panel {
    padding: 34px;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 700px;
    color: #fffdf6;
    background:
        linear-gradient(180deg, rgba(23, 17, 21, 0.1), rgba(23, 17, 21, 0.46)),
        linear-gradient(135deg, #1b2247 0%, #7a203f 28%, #f1c64e 56%, #58a946 100%);
}

.auth-brand h1,
.auth-head h2,
.card-head h2,
.hero-copy h1,
.account-no {
    font-family: 'Sora', sans-serif;
    margin: 0;
    line-height: 1.05;
}

.auth-brand h1 {
    font-size: clamp(2.4rem, 4vw, 4.3rem);
}

.auth-brand p,
.auth-head p,
.card-head p,
.about-card p,
.profile-card p,
.hero-copy p,
.insight-card p,
.voucher-strip p,
.security-card p {
    line-height: 1.6;
    color: inherit;
    font-weight: 800;
}

.tag,
.eyebrow,
.member-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 8px 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.73rem;
    font-weight: 800;
}

.tag {
    background: rgba(20, 13, 17, 0.08);
    color: #201218;
}

.eyebrow {
    background: rgba(255, 216, 77, 0.3);
    color: #503b00;
}

.member-badge {
    background: linear-gradient(135deg, rgba(255, 216, 77, 0.26), rgba(123, 207, 75, 0.2));
    color: #305f1d;
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.hero-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    min-height: 140px;
}

.hero-card strong,
.stat-box strong,
.receipt-grid strong,
.activity-item strong {
    display: block;
}

.website-qr-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
}

.website-qr-card p {
    margin: 0;
    overflow-wrap: anywhere;
}

.auth-form-panel {
    color: var(--text);
}

.auth-head {
    margin-bottom: 22px;
}

.auth-form,
.booking-form {
    display: grid;
    gap: 16px;
}

.auth-form label,
.booking-form label,
.mini-group {
    display: grid;
    gap: 8px;
}

.bus-board-field {
    grid-column: 1 / -1;
}

.route-summary-box {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(236, 253, 245, 0.92));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.route-summary-tag {
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.route-summary-box strong {
    font-size: 1rem;
    color: var(--text);
}

.route-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.route-summary-meta span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.bus-board {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.92));
}

.bus-board-summary {
    display: grid;
    gap: 4px;
}

.bus-board-summary strong {
    font-size: 1.02rem;
    color: var(--text);
}

.bus-board-summary small {
    color: var(--muted);
}

.bus-direction-group {
    display: grid;
    gap: 12px;
}

.bus-direction-group.is-muted {
    display: none;
}

.bus-direction-group.is-active {
    display: grid;
}

.bus-direction-head {
    display: none;
}

.bus-direction-head strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
}

.bus-direction-head small {
    color: var(--muted);
    white-space: nowrap;
}

.bus-direction-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.bus-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.bus-card {
    display: grid;
    gap: 5px;
    padding: 14px 13px;
    text-align: left;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92));
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bus-card strong {
    font-size: 1rem;
    color: var(--text);
}

.bus-card small {
    color: var(--muted);
    line-height: 1.2;
}

.bus-card-badge {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.bus-card-status {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
}

.bus-card:hover:not(:disabled),
.bus-card.is-selected {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.14);
}

.bus-card.is-selected {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.94));
}

.bus-card.is-disabled,
.bus-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bus-card.is-active-direction {
    border-color: rgba(15, 118, 110, 0.18);
}

.auth-form input,
.auth-form select,
.booking-form input,
.booking-form select,
.wallet-transfer-form input,
.settings-card select,
.voucher-form select {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 18px;
    padding: 14px 16px;
    color: #1f1220;
    outline: none;
    font-weight: 800;
}

.auth-form input:focus,
.auth-form select:focus,
.booking-form input:focus,
.booking-form select:focus,
.wallet-transfer-form input:focus,
.settings-card select:focus,
.voucher-form select:focus {
    border-color: rgba(15, 123, 114, 0.42);
    box-shadow: 0 0 0 4px rgba(15, 123, 114, 0.08);
}

.mode-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mode-tile {
    position: relative;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 18px 14px;
    border-radius: 22px;
    border: 1px solid rgba(67, 39, 53, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 242, 235, 0.92));
    cursor: pointer;
    text-align: center;
}

.mode-tile.active {
    border-color: rgba(34, 68, 142, 0.3);
    box-shadow: 0 14px 30px rgba(34, 68, 142, 0.12);
}

.mode-tile input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.mode-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 200, 76, 0.24), rgba(39, 100, 196, 0.18));
    color: #17306c;
    font-size: 1.15rem;
    font-weight: 900;
}

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

.signup-shell .grid-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.full {
    grid-column: 1 / -1;
}

.checkbox-row {
    grid-template-columns: auto 1fr;
    align-items: start;
}

.checkbox-row input {
    width: auto;
    margin-top: 4px;
}

.btn,
.action-chip {
    border: 0;
    border-radius: 18px;
    padding: 14px 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    font-weight: 800;
}

.btn:hover,
.cash-in-btn:hover,
.action-chip:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #ffd84d 0%, #fff0a0 100%);
    color: #3d2f00;
    box-shadow: 0 18px 40px rgba(255, 216, 77, 0.28);
}

.btn-secondary {
    background: linear-gradient(135deg, #8f2159 0%, #c93d83 100%);
    color: #fff9fe;
}

.btn-block {
    width: 100%;
}

.action-chip {
    background: rgba(255, 255, 255, 0.84);
    color: var(--teal-deep);
    padding: 12px 16px;
}

.switch-text {
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.alert {
    border-radius: 22px;
    padding: 14px 16px;
    font-weight: 700;
}

.alert.success {
    background: rgba(25, 120, 82, 0.11);
    color: var(--success);
    border: 1px solid rgba(25, 120, 82, 0.16);
}

.alert.danger {
    background: rgba(181, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(181, 68, 68, 0.18);
}

.driver-credentials-card {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(47, 116, 255, 0.08), rgba(255, 156, 83, 0.12));
    border: 1px solid rgba(47, 116, 255, 0.12);
}

.driver-credentials-grid {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.driver-credentials-grid div {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(23, 32, 51, 0.08);
}

.driver-credentials-grid span {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.dashboard-shell {
    width: min(760px, calc(100% - 16px));
    margin: 20px auto;
    padding: 8px 0 24px;
    display: block;
}

.theme-dark {
    --panel: rgba(53, 17, 36, 0.9);
    --panel-strong: #40152c;
    --text: #fff6fb;
    --muted: #ffdce8;
    --line: rgba(255, 255, 255, 0.12);
    --shadow: 0 30px 80px rgba(54, 8, 32, 0.34);
}

body.theme-dark {
    background: #3a1026;
}

body.theme-dark .glass-card,
body.theme-dark .wallet-card,
body.theme-dark .sidebar-card,
body.theme-dark .auth-panel {
    background: linear-gradient(180deg, rgba(28, 22, 34, 0.96), rgba(42, 30, 45, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .app-topbar,
body.theme-dark .service-hub,
body.theme-dark .feature-card,
body.theme-dark .activity-card,
body.theme-dark .receipt-card,
body.theme-dark .security-card,
body.theme-dark .about-card,
body.theme-dark .settings-card,
body.theme-dark .profile-card,
body.theme-dark .insight-card,
body.theme-dark .promo-band,
body.theme-dark .hero-wallet {
    color: #fff5fb;
}

body.theme-dark .topbar-copy p,
body.theme-dark .account-caption,
body.theme-dark .activity-item span,
body.theme-dark .note-box,
body.theme-dark .empty-state,
body.theme-dark .settings-card label,
body.theme-dark .about-card p {
    color: #f3dce9;
}

.sidebar-card {
    padding: 20px;
    display: grid;
    gap: 18px;
    height: fit-content;
}

.profile-card,
.settings-card,
.about-card,
.feature-card,
.voucher-strip,
.receipt-card,
.activity-card,
.security-card,
.insight-card,
.promo-band,
.hero-wallet {
    padding: 24px;
}

.profile-card h2,
.settings-card h3,
.about-card h3,
.voucher-strip h3,
.promo-band h3 {
    margin: 10px 0 8px;
}

.logout-link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
}

.dashboard-main {
    display: grid;
    gap: 30px;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #17306c 0%, #22448e 62%, #2e5fb1 100%);
    color: #f8fbff;
}

.topbar-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-weight: 800;
}

.topbar-copy h1 {
    margin: 4px 0;
    font-family: 'Sora', sans-serif;
    font-size: 1.8rem;
}

.topbar-copy p,
.account-caption {
    color: var(--muted);
}

.app-brand {
    display: inline-block;
    font-weight: 900;
    color: #f8fbff;
    letter-spacing: 0.04em;
}

.app-topbar .topbar-copy h1,
.app-topbar .topbar-copy p {
    color: #f8fbff;
}

.hero-wallet {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 212, 71, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.9));
    padding: 18px;
}

.hero-copy {
    display: grid;
    gap: 16px;
    align-content: center;
}

.hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.feature-wallet {
    background:
        linear-gradient(160deg, #7f1d52 0%, #b83372 48%, #74c93e 100%),
        linear-gradient(135deg, rgba(255, 216, 77, 0.18), transparent);
    color: #fffdf8;
    padding: 28px;
}

.feature-wallet .eyebrow,
.feature-wallet .member-badge {
    background: rgba(255, 212, 71, 0.18);
    color: #f8fffd;
}

.feature-wallet p,
.feature-wallet span,
.feature-wallet small,
.feature-wallet .account-caption {
    color: rgba(255, 250, 243, 0.98);
    font-weight: 800;
}

.feature-wallet .account-no {
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    line-height: 1.15;
    font-weight: 900;
    max-width: 18ch;
}

.feature-wallet input {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fffd;
}

.wallet-side {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.mini-points {
    font-weight: 800;
}

.wallet-top,
.voucher-strip,
.fare-box,
.receipt-grid,
.payment-block,
.wallet-stats,
.insight-grid,
.activity-layout,
.promo-items {
    display: grid;
    gap: 22px;
}

.wallet-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 24px;
    align-items: stretch;
}

.wallet-summary {
    display: grid;
    gap: 22px;
}

.wallet-top {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 24px;
}

.wallet-form-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wallet-form-badge {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 216, 77, 0.3), rgba(123, 207, 75, 0.24));
    color: #6d1c47;
    font-weight: 900;
}

.wallet-screen {
    padding: 26px;
}

.wallet-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.full-span {
    grid-column: 1 / -1;
}

.wallet-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.wallet-stats .stat-box:first-child {
    background: linear-gradient(135deg, rgba(109, 189, 69, 0.28), rgba(39, 100, 196, 0.24), rgba(245, 200, 76, 0.22));
}

.wallet-stats .stat-box:last-child {
    background: linear-gradient(135deg, rgba(39, 100, 196, 0.24), rgba(245, 200, 76, 0.24), rgba(109, 189, 69, 0.2));
}

.wallet-stats .stat-box {
    min-height: 128px;
    display: grid;
    align-content: start;
}

.points-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.gift-entry {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
}

.gift-hint {
    font-size: 0.72rem;
    font-weight: 900;
    color: rgba(255, 250, 243, 0.94);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wallet-stats .stat-box > span,
.points-head > span {
    display: block;
    font-size: 0.96rem;
    font-weight: 800;
}

.wallet-stats .stat-box strong {
    display: block;
    margin-top: 6px;
    font-size: 1.35rem;
    line-height: 1.15;
}

.balance-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.balance-add-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd84d, #8ed84d);
    color: #173306;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(34, 181, 115, 0.22);
}

.gift-trigger {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 216, 77, 0.32), rgba(123, 207, 75, 0.26));
    color: #6c1b45;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-weight: 900;
}

.pending-reward {
    padding: 16px;
    border-radius: 20px;
    background: rgba(34, 181, 115, 0.12);
    border: 1px solid rgba(34, 181, 115, 0.18);
    display: grid;
    gap: 4px;
}

.pending-reward span,
.reward-item span,
.reward-locked {
    color: var(--muted);
}

.reward-list {
    display: grid;
    gap: 14px;
}

.reward-item {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 12px;
}

.reward-item.available {
    border-color: rgba(255, 212, 71, 0.16);
}

.reward-redeem-btn {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--accent), #ffea8f);
    color: #111722;
    font-weight: 900;
    cursor: pointer;
}

.stat-box,
.note-box,
.empty-state,
.receipt-grid > div,
.insight-card,
.activity-item,
.promo-items div,
.progress-card {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 250, 245, 0.9);
    border: 1px solid rgba(143, 33, 89, 0.1);
}

.feature-wallet .stat-box,
.feature-wallet .progress-card {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.22);
}

.field-hint {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.field-error {
    display: none;
    margin-top: 7px;
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.35;
}

label.show-error .field-error {
    display: block;
}

label.show-error input,
label.show-error select {
    border-color: rgba(181, 68, 68, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(181, 68, 68, 0.08) !important;
}

.is-hidden {
    display: none !important;
}

.progress-card {
    display: grid;
    gap: 10px;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffe67a, #8ed84d);
}

.insight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-card {
    min-height: 172px;
}

.insight-card strong {
    display: block;
    font-size: 1.8rem;
    margin: 18px 0 8px;
    font-family: 'Sora', sans-serif;
}

.insight-card.highlight {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.17), rgba(15, 123, 114, 0.15));
}

.voucher-strip {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.voucher-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.promo-band {
    display: grid;
    gap: 16px;
}

.promo-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promo-items div {
    font-weight: 700;
}

.service-hub {
    padding: 28px;
    border-radius: 28px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.service-item {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-content: center;
    min-height: 110px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(255, 241, 248, 0.94));
    color: #21111d;
    cursor: pointer;
    padding: 18px 12px;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(143, 33, 89, 0.08);
}

.service-item span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #0c1320;
    font-weight: 900;
}

.icon-badge.bus { background: linear-gradient(135deg, #ffd447, #ffe98f); }
.icon-badge.walletin { background: linear-gradient(135deg, #22b573, #83ecb5); }
.icon-badge.walletout { background: linear-gradient(135deg, #ffb84d, #ffd447); }
.icon-badge.train { background: linear-gradient(135deg, #2f74ff, #8ab0ff); }
.icon-badge.ticket { background: linear-gradient(135deg, #22b573, #83ecb5); }
.icon-badge.road { background: linear-gradient(135deg, #3a404d, #7e8796); color: #fff; }
.icon-badge.jeep { background: linear-gradient(135deg, #ffd447, #22b573); }
.icon-badge.gear { background: linear-gradient(135deg, #2f74ff, #22b573); color: #fff; }
.icon-badge.admin { background: linear-gradient(135deg, #111722, #2f74ff); color: #fff; }
.icon-badge.info { background: linear-gradient(135deg, #22b573, #2f74ff); color: #fff; }

.service-item strong {
    font-size: 0.92rem;
    font-weight: 900;
    color: #27141f;
}

.forms-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.feature-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.92));
}

.card-head {
    margin-bottom: 20px;
}

.form-grid,
.payment-block,
.receipt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fare-box {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fare-box strong {
    font-size: 1.5rem;
    font-family: 'Sora', sans-serif;
    margin-top: 6px;
}

.note-box,
.empty-state,
.activity-item span,
.activity-meta span,
.receipt-grid span,
.progress-card small {
    color: var(--muted);
}

.activity-layout {
    grid-template-columns: 1.3fr 0.7fr;
}

.activity-list {
    display: grid;
    gap: 14px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.activity-meta {
    text-align: right;
}

.benefit-list {
    margin: 16px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 12px;
}

.mini-profile,
.embedded-settings,
.embedded-about {
    margin-bottom: 18px;
}

.profile-editor {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-summary {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-summary-grid > div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-summary-grid span {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.profile-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.edit-profile-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 800;
}

.hidden-editor,
.hidden-summary {
    display: none !important;
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-photo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 212, 71, 0.38);
}

.profile-photo.placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f74ff, #22b573);
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
}

.profile-identity span {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.password-editor {
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.receipt-grid span {
    display: block;
    font-size: 0.84rem;
    margin-bottom: 6px;
}

.theme-dark .hero-wallet,
.theme-dark .feature-card,
.theme-dark .insight-card,
.theme-dark .promo-items div,
.theme-dark .activity-item,
.theme-dark .receipt-grid > div,
.theme-dark .note-box,
.theme-dark .empty-state,
.theme-dark .progress-card,
.theme-dark .stat-box {
    background: rgba(255, 255, 255, 0.04);
}

.theme-dark .action-chip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.dashboard-main.panel-open .home-section,
.dashboard-main.panel-open #home-guide {
    display: none;
}

.subpage-shell {
    width: min(1280px, calc(100% - 30px));
    margin: 24px auto;
    position: relative;
    z-index: 1;
}

.admin-page {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.11), transparent 26%),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.09), transparent 22%),
        linear-gradient(135deg, #f5fbff 0%, #eef7f4 46%, #fff7ef 100%);
}

.admin-page .subpage-card {
    background: rgba(255, 255, 255, 0.92);
}

.admin-page .activity-card {
    margin-top: 16px;
    padding: 22px;
}

.admin-page .admin-user-card,
.admin-page .admin-bus-card,
.admin-page .admin-search-form {
    border-radius: 18px;
}

.admin-page .admin-user-card {
    background: rgba(255, 255, 255, 0.88);
}

.admin-page .admin-bus-card {
    background: rgba(255, 255, 255, 0.9);
}

.admin-page .subpage-top {
    padding-bottom: 6px;
}

.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 8px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(236, 253, 245, 0.94));
}

.admin-hero-copy {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.admin-hero-copy h2 {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
}

.admin-hero-copy p {
    margin: 0;
    color: var(--muted);
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.admin-empty-note {
    margin-top: 12px;
    background: rgba(37, 99, 235, 0.08);
    color: #1e3a8a;
}

.subpage-card,
.ticket-print {
    padding: 26px;
}

.subpage-top,
.ticket-header,
.ticket-body,
.ticket-route,
.ticket-actions,
.ticket-tools,
.seat-picker-head {
    display: flex;
    gap: 16px;
}

.subpage-top,
.ticket-header,
.ticket-body {
    justify-content: space-between;
    align-items: start;
}

.history-table {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.history-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr 1fr 0.8fr 0.8fr;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.history-head {
    font-weight: 800;
    background: rgba(212, 160, 23, 0.12);
}

.history-row span {
    color: var(--muted);
    display: block;
    margin-top: 4px;
}

.admin-grid {
    margin: 24px 0;
}

.admin-page .admin-grid {
    margin-top: 16px;
}

.admin-page .insight-card {
    min-height: 132px;
}

.seat-picker {
    display: grid;
    gap: 14px;
}

.seat-picker-head {
    justify-content: space-between;
    align-items: center;
}

.seat-map {
    display: grid;
    gap: 12px;
}

.bus-seat-map {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 22px 24px;
    border-radius: 36px 36px 28px 28px;
    background:
        radial-gradient(circle at 18% 5%, rgba(37, 99, 235, 0.18), transparent 18%),
        radial-gradient(circle at 82% 5%, rgba(20, 184, 166, 0.16), transparent 18%),
        linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0 1px, transparent 1px) 50% 0 / 68px 100%,
        linear-gradient(180deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 100%);
    border: 5px solid rgba(15, 23, 42, 0.22);
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.56),
        inset 0 -18px 24px rgba(15, 23, 42, 0.08),
        0 24px 48px rgba(15, 23, 42, 0.18);
}

.bus-seat-map::before,
.bus-seat-map::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    pointer-events: none;
}

.bus-seat-map::before {
    top: 8px;
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.2), rgba(148, 163, 184, 0.4), rgba(15, 23, 42, 0.2));
}

.bus-seat-map::after {
    bottom: 9px;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
}

.bus-front {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 18px 14px 14px 54px;
    border-radius: 28px 28px 14px 14px;
    background:
        linear-gradient(180deg, rgba(186, 230, 253, 0.72) 0 42%, rgba(15, 118, 110, 0.12) 42% 100%),
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.12));
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #132033;
    text-align: center;
    box-shadow: inset 0 -10px 18px rgba(15, 23, 42, 0.08);
}

.bus-front::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 18px;
    width: 28px;
    height: 28px;
    border: 5px solid rgba(15, 23, 42, 0.62);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 0 34%, rgba(15, 23, 42, 0.62) 35% 42%, transparent 43%);
}

.bus-front::after {
    content: 'ENTRY';
    position: absolute;
    right: 13px;
    bottom: -12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #0f766e;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.bus-front span,
.bus-front strong {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.seat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.seat-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.seat-aisle {
    height: 100%;
    min-height: 64px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, transparent 0 18%, rgba(100, 116, 139, 0.2) 18% 20%, transparent 20% 38%, rgba(100, 116, 139, 0.2) 38% 40%, transparent 40% 58%, rgba(100, 116, 139, 0.2) 58% 60%, transparent 60% 78%, rgba(100, 116, 139, 0.2) 78% 80%, transparent 80% 100%),
        linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.75) 42% 58%, transparent 58% 100%);
}

.rear-bench {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 2px dashed rgba(100, 116, 139, 0.28);
}

.seat-legend,
.seat-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 12px 0 14px;
}

.seat-legend span,
.seat-status span,
.seat-status strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(23, 32, 51, 0.08);
    font-size: 0.88rem;
}

.seat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.seat-dot.available {
    background: #2f74ff;
}

.seat-dot.selected {
    background: var(--teal);
}

.seat-dot.booked {
    background: #ff8b3d;
}

.seat-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 18px 18px 10px 10px;
    min-height: 68px;
    padding: 20px 8px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 24%, transparent 24%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(255, 255, 255, 0.96));
    color: #2351a4;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    display: grid;
    gap: 6px;
    justify-items: center;
    box-shadow:
        inset 0 -7px 0 rgba(15, 23, 42, 0.08),
        inset 7px 0 0 rgba(15, 23, 42, 0.04),
        inset -7px 0 0 rgba(15, 23, 42, 0.04),
        0 8px 14px rgba(15, 23, 42, 0.1);
}

.seat-btn::before,
.driver-seat-card::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 18%;
    right: 18%;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
}

.seat-btn::after,
.driver-seat-card::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
}

.seat-label {
    font-size: 0.92rem;
    font-weight: 900;
}

.seat-state {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.seat-btn.selected {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 24%, transparent 24%),
        linear-gradient(135deg, var(--teal), #14a293);
    color: #fff;
    box-shadow:
        inset 0 -7px 0 rgba(0, 0, 0, 0.12),
        0 10px 18px rgba(15, 118, 110, 0.24);
}

.seat-btn.booked {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0 24%, transparent 24%),
        linear-gradient(135deg, rgba(255, 139, 61, 0.2), rgba(254, 215, 170, 0.62));
    color: #bf5b16;
    cursor: not-allowed;
}

.chip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ticket-tools {
    margin-top: 18px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.qr-ticket {
    display: grid;
    gap: 8px;
    align-items: center;
    justify-items: center;
    padding: 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.34);
}

.qr-ticket.large {
    min-width: 220px;
}

.qr-image {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}

.qr-image.large {
    width: 240px;
    height: 240px;
}

.printable-ticket {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
}

.ticket-main {
    flex: 1;
    display: grid;
    gap: 22px;
}

.ticket-qr-panel {
    width: 260px;
    display: grid;
    gap: 14px;
}

.ticket-route {
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.14), rgba(15, 123, 114, 0.14));
}

.route-line {
    flex: 1;
    height: 2px;
    margin: 0 14px;
    background: linear-gradient(90deg, var(--accent), var(--teal));
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ticket-grid > div {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ticket-grid span {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--delay, 0ms);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-page .reveal,
.admin-page .reveal.revealed {
    opacity: 1;
    transform: none;
    transition: none;
}

.mobile-bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 15;
    width: min(760px, calc(100% - 16px));
    margin: 0 auto 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    background: linear-gradient(135deg, rgba(91, 20, 59, 0.96), rgba(67, 123, 33, 0.94));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(23, 32, 61, 0.12);
}

.mobile-bottom-nav a,
.mobile-bottom-nav button {
    display: grid;
    gap: 6px;
    justify-items: center;
    border: 0;
    background: transparent;
    color: #f8fbff;
    padding: 8px 4px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav button:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.mobile-bottom-nav span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 900;
}

.nav-icon.nav-blue {
    background: rgba(47, 116, 255, 0.18);
    color: #2f74ff;
}

.nav-icon.nav-green {
    background: rgba(34, 181, 115, 0.18);
    color: #14925a;
}

.nav-icon.nav-white {
    background: rgba(255, 255, 255, 0.92);
    color: #526074;
}

.nav-icon.nav-orange {
    background: rgba(255, 156, 83, 0.2);
    color: #ef7b2d;
}

.transport-visual img {
    width: 100%;
    display: block;
    border-radius: 24px;
    min-height: 220px;
    object-fit: cover;
}

.wallet-visual {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    align-content: start;
    margin-top: 24px;
}

.wallet-visual img {
    min-height: 170px;
    max-height: 170px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 212, 71, 0.12));
}

.wallet-visual-copy {
    display: grid;
    gap: 6px;
    align-content: end;
}

.wallet-visual-copy strong {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 900;
}

.wallet-visual-copy span {
    color: rgba(248, 255, 253, 0.92);
    font-weight: 800;
}

.panel-area {
    display: grid;
    gap: 22px;
}

.panel-back-btn {
    display: none;
    width: fit-content;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
}

.dashboard-main.panel-open .panel-back-btn {
    display: inline-flex;
}

.home-guide {
    padding: 22px;
    border-radius: 28px;
    text-align: center;
}

.home-guide h2 {
    margin: 12px 0 8px;
    font-family: 'Sora', sans-serif;
}

.feature-panel {
    display: none;
}

.feature-panel.active {
    display: block;
}

.driver-filter {
    margin: 22px 0;
}

.driver-seat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.driver-monitor-head {
    display: flex;
    align-items: start;
    gap: 14px;
    margin-bottom: 18px;
}

.driver-secret-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.secret-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 18px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #8f2159, #74c93e);
    color: #fffdf7;
    font-weight: 900;
    cursor: pointer;
}

.secret-drawer {
    display: block;
}

.hidden-secret {
    display: none;
}

.driver-seat-card {
    padding: 14px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.driver-seat-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.driver-seat-card span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
}

.seat-paid-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 4px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8f2159, #d63e84);
    color: #fff7fb !important;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin-top: 0 !important;
}

.seat-unpaid-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 4px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff7ed !important;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin-top: 0 !important;
}

.paid-seat {
    background: rgba(255, 212, 71, 0.12);
}

.unpaid-seat {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.24);
}

.open-seat {
    background: rgba(34, 181, 115, 0.08);
}

.driver-seat-action {
    margin-top: 10px;
}

.driver-seat-action button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 9px 8px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    cursor: pointer;
    font-weight: 900;
}

.unpaid-seat .driver-seat-action button {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.paid-seat .driver-seat-action button,
.unpaid-seat .driver-seat-action + .driver-seat-action button {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.seat-receipt-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.seat-receipt-item {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.seat-receipt-item span,
.seat-receipt-item small {
    display: block;
    color: var(--muted);
}

.seat-receipt-item strong {
    display: block;
    margin: 6px 0;
}

.reward-use-box {
    display: flex;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 212, 71, 0.08);
    border: 1px solid rgba(255, 212, 71, 0.14);
}

.reward-use-box input {
    margin-top: 4px;
}

.mobile-bottom-nav strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1180px) {
    .dashboard-shell,
    .hero-wallet,
    .forms-grid,
    .activity-layout,
    .insight-grid,
    .promo-items,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .wallet-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {
    .auth-shell,
    .voucher-strip {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        min-height: auto;
    }

    .hero-grid,
    .wallet-stats,
    .wallet-top,
    .form-grid,
    .payment-block,
    .receipt-grid,
    .fare-box {
        grid-template-columns: 1fr;
    }

    .voucher-form,
    .wallet-actions,
    .website-qr-card {
        flex-direction: column;
    }

    .ticket-body,
    .ticket-header,
    .subpage-top {
        flex-direction: column;
    }

    .ticket-qr-panel {
        width: 100%;
    }

    .history-row {
        grid-template-columns: 1fr;
    }

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

    .profile-summary-grid,
    .profile-action-row {
        grid-template-columns: 1fr;
    }

    .profile-action-row {
        display: flex;
        flex-direction: column;
    }

    .driver-seat-grid,
    .seat-receipt-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .auth-panel,
    .sidebar-card,
    .profile-card,
    .settings-card,
    .about-card,
    .feature-card,
    .voucher-strip,
    .receipt-card,
    .activity-card,
    .security-card,
    .insight-card,
    .promo-band,
    .hero-wallet,
    .wallet-card {
        padding: 18px;
        border-radius: 24px;
    }

    .grid-form,
    .signup-shell .grid-form {
        grid-template-columns: 1fr;
    }

    .quick-actions,
    .activity-item {
        flex-direction: column;
        align-items: start;
    }

    .activity-meta {
        text-align: left;
    }

    .dashboard-shell {
        width: min(100%, calc(100% - 12px));
        gap: 14px;
    }

    .dashboard-main {
        gap: 14px;
    }

    .app-topbar,
    .hero-wallet,
    .service-hub,
    .voucher-strip,
    .promo-band,
    .feature-card,
    .activity-card,
    .security-card,
    .receipt-card,
    .insight-card {
        border-radius: 22px;
    }

    .service-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .service-item {
        min-height: 98px;
        border-radius: 18px;
    }

    .service-item strong {
        font-size: 0.8rem;
    }

    .seat-map,
    .ticket-grid {
        grid-template-columns: 1fr 1fr;
    }

    .driver-seat-grid,
    .seat-receipt-list {
        grid-template-columns: 1fr;
    }
}

/* Final visual overrides for mode clarity and profile polish */
body.theme-light,
body.theme-light .dashboard-shell,
body.theme-light .dashboard-main {
    color: #eef5ff;
}

body.theme-light .app-topbar {
    background: linear-gradient(135deg, #17306c 0%, #214890 58%, #2d63b6 100%) !important;
    color: #f8fbff !important;
}

body.theme-light .app-topbar .app-brand,
body.theme-light .app-topbar .topbar-copy h1,
body.theme-light .app-topbar .topbar-copy p,
body.theme-light .app-topbar .topbar-badge {
    color: #ffffff !important;
}

body.theme-light .topbar-copy p,
body.theme-light .account-caption,
body.theme-light .app-topbar .topbar-copy p {
    color: #ffffff !important;
}

body.theme-light .service-item strong,
body.theme-light .insight-card p,
body.theme-light .activity-item span,
body.theme-light .profile-summary-grid span,
body.theme-light .profile-identity span,
body.theme-light .about-card p,
body.theme-light .settings-card label,
body.theme-light .mini-profile p,
body.theme-light .account-caption {
    color: #2c1d24 !important;
}

body.theme-light .feature-wallet {
    background:
        linear-gradient(155deg, #1a4ea1 0%, #2e7bd5 34%, #5eb84c 68%, #f4c84c 100%) !important;
    color: #ffffff !important;
}

body.theme-light .feature-wallet .eyebrow,
body.theme-light .feature-wallet .member-badge,
body.theme-light .feature-wallet p,
body.theme-light .feature-wallet span,
body.theme-light .feature-wallet small,
body.theme-light .feature-wallet strong,
body.theme-light .feature-wallet .account-caption,
body.theme-light .gift-hint {
    color: #ffffff !important;
}

body.theme-light .feature-wallet .account-no {
    color: #ffffff !important;
}

body.theme-light .wallet-stats .stat-box:first-child {
    background: linear-gradient(135deg, rgba(78, 184, 72, 0.34), rgba(33, 92, 190, 0.28), rgba(244, 200, 76, 0.26)) !important;
}

body.theme-light .wallet-stats .stat-box:last-child {
    background: linear-gradient(135deg, rgba(33, 92, 190, 0.3), rgba(244, 200, 76, 0.28), rgba(78, 184, 72, 0.24)) !important;
}

body.theme-light .profile-summary,
body.theme-light .profile-editor,
body.theme-light .embedded-settings,
body.theme-light .embedded-about,
body.theme-light .mini-profile {
    background: linear-gradient(180deg, rgba(20, 28, 40, 0.92), rgba(28, 39, 56, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 20px;
}

body.theme-light .profile-summary-grid > div {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.theme-light .profile-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.theme-light .edit-profile-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 900;
    color: #f6fbff;
}

body.theme-light .settings-card,
body.theme-light .about-card {
    margin-top: 18px;
}

body.theme-dark .app-topbar {
    background: linear-gradient(135deg, #10204d 0%, #17306c 58%, #244c97 100%) !important;
}

body.theme-dark .feature-wallet {
    background:
        linear-gradient(155deg, #142756 0%, #2258a5 32%, #41843b 68%, #d3aa35 100%) !important;
}

body.theme-light .security-card,
body.theme-light .settings-card,
body.theme-light .about-card,
body.theme-light .profile-summary,
body.theme-light .profile-editor {
    color: #1f1620;
}

body.theme-light .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

body.theme-light .settings-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.24);
}

body.theme-light .settings-avatar.placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #224890, #4e9d44);
    color: #fff;
    font-weight: 900;
}

body.theme-light .settings-section {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

body.theme-light .settings-section h4 {
    margin: 0 0 4px;
    color: #1f1620;
    font-family: 'Sora', sans-serif;
}

body.theme-light .settings-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 18px;
    background: rgba(28, 39, 56, 0.08);
    color: #1f1620;
    text-align: left;
    font-weight: 800;
}

body.theme-light .settings-row.static {
    cursor: default;
}

body.theme-light .settings-row-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(34, 72, 144, 0.12);
    color: #224890;
    font-size: 0.72rem;
    font-weight: 900;
}

body.theme-light .profile-action-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

body.theme-light .profile-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(28, 39, 56, 0.08);
    color: #1d1620;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid rgba(34, 72, 144, 0.08);
}

body.theme-light .profile-nav-item.logout-item {
    background: rgba(171, 47, 81, 0.08);
}

body.theme-light .subpage-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(28, 39, 56, 0.08);
    color: #1d1620;
    font-weight: 900;
    cursor: pointer;
}

body.text-size-compact {
    font-size: 14px;
}

body.text-size-standard {
    font-size: 16px;
}

body.text-size-large {
    font-size: 18px;
}

.profile-subpage {
    display: grid;
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.profile-shell {
    max-width: 520px;
    margin: 0 auto;
}

.embedded-settings,
.profile-editor,
.profile-summary {
    border-radius: 28px;
}

.profile-summary {
    display: grid;
    gap: 18px;
}

.mini-profile {
    padding: 18px 20px;
    border-radius: 24px;
}

.profile-action-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.profile-nav-item,
.settings-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 20px;
    padding: 16px 18px;
    text-align: left;
}

.profile-nav-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    cursor: pointer;
}

.settings-row.static {
    cursor: default;
}

.settings-control-row {
    justify-content: space-between;
    align-items: center;
}

.settings-row-copy {
    flex: 1;
    display: grid;
    gap: 0;
}

.settings-row-copy strong {
    font-size: 0.98rem;
}

.settings-row-copy span {
    font-size: 0.84rem;
    line-height: 1.45;
}

.settings-row-copy:has(strong:only-child) {
    display: flex;
    align-items: center;
}

.settings-control-row select,
.settings-textarea textarea {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 12px 14px;
    font: inherit;
}

.settings-control-row select {
    min-width: 140px;
}

.settings-textarea textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

.share-box {
    border-radius: 20px;
    padding: 16px 18px;
    display: grid;
    gap: 8px;
}

.share-box strong {
    font-size: 0.95rem;
}

.share-box p {
    margin: 0;
    line-height: 1.5;
}

.mode-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mode-tile {
    position: relative;
    display: grid;
    gap: 10px;
    align-items: start;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mode-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mode-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 900;
}

.mode-tile.mode-light.active {
    background: linear-gradient(135deg, rgba(255, 232, 143, 0.9), rgba(255, 181, 66, 0.92));
    border-color: rgba(228, 153, 20, 0.6);
    box-shadow: 0 16px 30px rgba(245, 180, 57, 0.22);
    color: #1b130b;
}

.mode-tile.mode-light .mode-icon {
    background: rgba(255, 255, 255, 0.58);
    color: #9a5c00;
}

.mode-tile.mode-dark.active {
    background: linear-gradient(135deg, rgba(38, 58, 125, 0.98), rgba(13, 27, 70, 0.98));
    border-color: rgba(125, 149, 255, 0.48);
    box-shadow: 0 18px 34px rgba(18, 34, 78, 0.38);
    color: #f4f7ff;
}

.mode-tile.mode-dark .mode-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #f4f7ff;
}

.settings-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.settings-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-switch-ui {
    width: 60px;
    height: 34px;
    border-radius: 999px;
    position: relative;
    transition: background 0.2s ease;
}

.settings-switch-ui::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
}

.settings-switch input:checked + .settings-switch-ui::after {
    transform: translateX(26px);
}

body.theme-light .embedded-settings,
body.theme-light .profile-editor,
body.theme-light .profile-summary,
body.theme-light .profile-nav-item,
body.theme-light .settings-row,
body.theme-light .share-box,
body.theme-light .mini-profile {
    background: rgba(255, 255, 255, 0.9);
    color: #171111;
}

body.theme-light .embedded-about {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #171111 !important;
    border: 1px solid rgba(33, 44, 71, 0.12);
    box-shadow: 0 14px 26px rgba(47, 31, 31, 0.08);
}

body.theme-light .embedded-about .tag,
body.theme-light .embedded-about p,
body.theme-light .embedded-about strong,
body.theme-light .embedded-about a,
body.theme-light .embedded-about span {
    color: #171111 !important;
}

body.theme-light .settings-row-copy span,
body.theme-light .share-box p,
body.theme-light .profile-summary-grid span,
body.theme-light .profile-identity span,
body.theme-light .settings-section label {
    color: #3f3030;
}

body.theme-light .profile-nav-item,
body.theme-light .settings-row,
body.theme-light .share-box,
body.theme-light .settings-textarea textarea,
body.theme-light .settings-control-row select {
    border: 1px solid rgba(33, 44, 71, 0.12);
    box-shadow: 0 14px 26px rgba(47, 31, 31, 0.08);
}

body.theme-light .settings-row-icon {
    background: rgba(32, 69, 146, 0.1);
    color: #183a82;
}

body.theme-light .settings-switch-ui {
    background: rgba(30, 40, 64, 0.18);
}

body.theme-light .settings-switch input:checked + .settings-switch-ui {
    background: linear-gradient(135deg, #16a34a, #f59e0b);
}

body.theme-light .settings-textarea textarea,
body.theme-light .settings-control-row select {
    background: #fff;
    color: #151515;
}

body.theme-light .mode-tile:not(.active) {
    background: rgba(28, 39, 56, 0.06);
    color: #1e1e1e;
    border-color: rgba(28, 39, 56, 0.1);
}

body.theme-dark .embedded-settings,
body.theme-dark .profile-editor,
body.theme-dark .profile-summary,
body.theme-dark .profile-nav-item,
body.theme-dark .settings-row,
body.theme-dark .share-box,
body.theme-dark .mini-profile {
    background: rgba(16, 24, 39, 0.92);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

body.theme-dark .embedded-about {
    background: rgba(16, 24, 39, 0.94) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

body.theme-dark .embedded-about .tag,
body.theme-dark .embedded-about p,
body.theme-dark .embedded-about strong,
body.theme-dark .embedded-about a,
body.theme-dark .embedded-about span {
    color: #f8fafc !important;
}

body.theme-dark .settings-header h3,
body.theme-dark .settings-section h4,
body.theme-dark .profile-nav-item,
body.theme-dark .settings-row-copy strong,
body.theme-dark .share-box strong,
body.theme-dark .subpage-back-btn {
    color: #f8fafc;
}

body.theme-dark .settings-row-copy span,
body.theme-dark .share-box p,
body.theme-dark .profile-summary-grid span,
body.theme-dark .profile-identity span,
body.theme-dark .mini-profile p,
body.theme-dark .settings-section label {
    color: #d5d9e2;
}

body.theme-dark .settings-row-icon {
    background: rgba(59, 130, 246, 0.18);
    color: #9cc4ff;
}

body.theme-dark .subpage-back-btn,
body.theme-dark .mode-tile:not(.active) {
    background: rgba(15, 23, 42, 0.88);
    color: #edf2ff;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

body.theme-dark .settings-textarea textarea,
body.theme-dark .settings-control-row select {
    background: rgba(10, 16, 30, 0.94);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .settings-switch-ui {
    background: rgba(255, 255, 255, 0.14);
}

body.theme-dark .settings-switch input:checked + .settings-switch-ui {
    background: linear-gradient(135deg, #1d4ed8, #22c55e);
}

@media (max-width: 680px) {
    .mode-toggle-grid {
        grid-template-columns: 1fr;
    }

    .settings-control-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .settings-control-row select {
        width: 100%;
    }
}

body.theme-light,
body.theme-light main,
body.theme-light section,
body.theme-light article,
body.theme-light div,
body.theme-light p,
body.theme-light span,
body.theme-light small,
body.theme-light label,
body.theme-light li {
    color: #191919;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light strong,
body.theme-light .card-head h2,
body.theme-light .promo-band h3,
body.theme-light .insight-card strong,
body.theme-light .mini-profile h2,
body.theme-light .receipt-card h3,
body.theme-light .feature-wallet strong,
body.theme-light .topbar-copy h1 {
    color: #0f172a !important;
}

body.theme-light .insight-card,
body.theme-light .promo-band,
body.theme-light .feature-card,
body.theme-light .activity-card,
body.theme-light .receipt-card,
body.theme-light .security-card,
body.theme-light .about-card,
body.theme-light .settings-card,
body.theme-light .profile-summary,
body.theme-light .profile-editor,
body.theme-light .wallet-card,
body.theme-light .glass-card,
body.theme-light .hero-wallet,
body.theme-light .service-hub,
body.theme-light .service-item,
body.theme-light .promo-items div,
body.theme-light .activity-item,
body.theme-light .receipt-grid > div,
body.theme-light .note-box,
body.theme-light .empty-state,
body.theme-light .progress-card,
body.theme-light .stat-box,
body.theme-light .booking-form,
body.theme-light .mini-group,
body.theme-light .seat-card {
    color: #1b1b1b !important;
}

body.theme-light .eyebrow,
body.theme-light .tag,
body.theme-light .account-caption,
body.theme-light .topbar-copy p,
body.theme-light .insight-card p,
body.theme-light .promo-band p,
body.theme-light .feature-card p,
body.theme-light .activity-item span,
body.theme-light .security-card p,
body.theme-light .about-card p,
body.theme-light .receipt-card p,
body.theme-light .settings-row-copy span,
body.theme-light .share-box p,
body.theme-light .profile-summary-grid span,
body.theme-light .profile-identity span,
body.theme-light .seat-card small,
body.theme-light .seat-card span {
    color: #3a3a3a !important;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light option,
body.theme-light button {
    color: #111827;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #6b7280;
}

body[class*="font-style-"],
body[class*="font-style-"] button,
body[class*="font-style-"] input,
body[class*="font-style-"] select,
body[class*="font-style-"] textarea,
body[class*="font-style-"] label,
body[class*="font-style-"] p,
body[class*="font-style-"] span,
body[class*="font-style-"] small,
body[class*="font-style-"] div,
body[class*="font-style-"] a,
body[class*="font-style-"] li {
    font-family: var(--app-font, 'Manrope', sans-serif) !important;
}

body[class*="font-style-"] h1,
body[class*="font-style-"] h2,
body[class*="font-style-"] h3,
body[class*="font-style-"] h4,
body[class*="font-style-"] h5,
body[class*="font-style-"] h6,
body[class*="font-style-"] strong,
body[class*="font-style-"] .account-no,
body[class*="font-style-"] .app-brand,
body[class*="font-style-"] .member-badge,
body[class*="font-style-"] .tag,
body[class*="font-style-"] .eyebrow {
    font-family: var(--display-font, 'Manrope', sans-serif) !important;
}

body.theme-dark,
body.theme-dark main,
body.theme-dark section,
body.theme-dark article,
body.theme-dark div,
body.theme-dark p,
body.theme-dark span,
body.theme-dark small,
body.theme-dark label,
body.theme-dark li {
    color: #edf3ff;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark strong,
body.theme-dark .card-head h2,
body.theme-dark .promo-band h3,
body.theme-dark .insight-card strong,
body.theme-dark .mini-profile h2,
body.theme-dark .receipt-card h3,
body.theme-dark .feature-wallet strong,
body.theme-dark .topbar-copy h1 {
    color: #ffffff !important;
}

body.theme-dark .insight-card,
body.theme-dark .promo-band,
body.theme-dark .feature-card,
body.theme-dark .activity-card,
body.theme-dark .receipt-card,
body.theme-dark .security-card,
body.theme-dark .about-card,
body.theme-dark .settings-card,
body.theme-dark .profile-summary,
body.theme-dark .profile-editor,
body.theme-dark .wallet-card,
body.theme-dark .glass-card,
body.theme-dark .hero-wallet,
body.theme-dark .service-hub,
body.theme-dark .service-item,
body.theme-dark .promo-items div,
body.theme-dark .activity-item,
body.theme-dark .receipt-grid > div,
body.theme-dark .note-box,
body.theme-dark .empty-state,
body.theme-dark .progress-card,
body.theme-dark .stat-box,
body.theme-dark .booking-form,
body.theme-dark .mini-group,
body.theme-dark .seat-card {
    color: #f3f7ff !important;
}

body.theme-dark .eyebrow,
body.theme-dark .tag,
body.theme-dark .account-caption,
body.theme-dark .topbar-copy p,
body.theme-dark .insight-card p,
body.theme-dark .promo-band p,
body.theme-dark .feature-card p,
body.theme-dark .activity-item span,
body.theme-dark .security-card p,
body.theme-dark .about-card p,
body.theme-dark .receipt-card p,
body.theme-dark .settings-row-copy span,
body.theme-dark .share-box p,
body.theme-dark .profile-summary-grid span,
body.theme-dark .profile-identity span,
body.theme-dark .seat-card small,
body.theme-dark .seat-card span,
body.theme-dark .wallet-note,
body.theme-dark .empty-state,
body.theme-dark .mini-profile p {
    color: #cfd8ea !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark option,
body.theme-dark button {
    color: #f8fbff;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #93a4bf;
}

body.theme-dark .service-item strong,
body.theme-dark .profile-nav-item,
body.theme-dark .subpage-back-btn,
body.theme-dark .settings-row-copy strong,
body.theme-dark .share-box strong,
body.theme-dark .receipt-grid strong,
body.theme-dark .seat-receipt-item strong,
body.theme-dark .ticket-card strong,
body.theme-dark .wallet-stats strong,
body.theme-dark .stat-box strong {
    color: #ffffff !important;
}

body.theme-dark .settings-textarea textarea,
body.theme-dark .settings-control-row select,
body.theme-dark .booking-form input,
body.theme-dark .booking-form select,
body.theme-dark .booking-form textarea {
    background: rgba(10, 16, 30, 0.96);
    color: #f8fbff !important;
    border-color: rgba(148, 163, 184, 0.2);
}

body.theme-light .service-item,
body.theme-light .service-item strong,
body.theme-light .service-item span,
body.theme-light .receipt-grid strong,
body.theme-light .receipt-grid span,
body.theme-light .seat-receipt-item strong,
body.theme-light .seat-receipt-item small,
body.theme-light .wallet-stats strong,
body.theme-light .wallet-stats span,
body.theme-light .ticket-card strong,
body.theme-light .ticket-card span,
body.theme-light .home-guide,
body.theme-light .home-guide p,
body.theme-light .promo-items div,
body.theme-light .promo-items span,
body.theme-light .promo-items strong {
    color: #171717 !important;
}

/* Professional blue-green palette refresh */
:root {
    --bg: #f4f8fb;
    --bg-alt: #eef7f3;
    --panel: rgba(255, 255, 255, 0.94);
    --panel-strong: #ffffff;
    --text: #132033;
    --muted: #64748b;
    --line: rgba(30, 64, 105, 0.12);
    --accent: #f59e0b;
    --accent-deep: #c76b00;
    --teal: #10b981;
    --teal-deep: #047857;
    --blue: #2563eb;
    --blue-deep: #1e40af;
    --danger: #dc2626;
    --success: #059669;
    --shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.16), transparent 26%),
        radial-gradient(circle at 92% 2%, rgba(16, 185, 129, 0.13), transparent 24%),
        linear-gradient(135deg, #f8fbff 0%, #eef7f3 46%, #fff7ed 100%);
}

body::before {
    background:
        linear-gradient(rgba(30, 64, 105, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 64, 105, 0.035) 1px, transparent 1px);
    opacity: 0.42;
}

a {
    color: var(--blue-deep);
}

.auth-panel,
.glass-card,
.sidebar-card,
.wallet-card,
.subpage-card,
.ticket-print {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.93));
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.auth-brand {
    background:
        linear-gradient(180deg, rgba(8, 21, 44, 0.08), rgba(8, 21, 44, 0.34)),
        linear-gradient(135deg, #1e40af 0%, #0f766e 46%, #f59e0b 76%, #dc2626 100%);
    color: #ffffff;
}

.tag,
.eyebrow,
.member-badge {
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.tag {
    background: rgba(37, 99, 235, 0.09);
    color: #1e40af;
}

.eyebrow {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.member-badge {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.13), rgba(16, 185, 129, 0.14));
    color: #0f766e;
}

.booking-form input,
.booking-form select,
.booking-form textarea,
.settings-textarea textarea,
.settings-control-row select {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(30, 64, 105, 0.14);
    color: var(--text);
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus,
.settings-textarea textarea:focus,
.settings-control-row select:focus {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09);
}

.btn,
.action-chip,
.service-item,
.settings-row,
.profile-nav-item,
.mode-tile,
.subpage-back-btn {
    border-radius: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.btn-secondary {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(245, 158, 11, 0.2);
}

.action-chip {
    background: rgba(16, 185, 129, 0.1);
    color: var(--teal-deep);
}

.alert.success {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
    border-color: rgba(5, 150, 105, 0.22);
}

.alert.danger {
    background: rgba(220, 38, 38, 0.09);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.2);
}

.app-topbar,
body.theme-light .app-topbar {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 52%, #0f766e 100%) !important;
    color: #ffffff !important;
}

.feature-wallet,
body.theme-light .feature-wallet {
    background: linear-gradient(145deg, #1e40af 0%, #2563eb 42%, #10b981 76%, #f59e0b 100%) !important;
    color: #ffffff !important;
}

.promo-band {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(16, 185, 129, 0.1), rgba(245, 158, 11, 0.11));
}

.feature-card,
.insight-card,
.activity-card,
.receipt-card,
.security-card,
.about-card,
.settings-card,
.service-hub,
.home-guide,
.empty-state,
.note-box,
.booking-form,
.mini-group,
.seat-card,
.profile-summary,
.profile-editor,
.embedded-settings,
.embedded-about,
.mini-profile {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--line);
}

.service-item {
    background: #ffffff;
    border: 1px solid rgba(30, 64, 105, 0.1);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.service-item:hover,
.profile-nav-item:hover,
.settings-row:hover {
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.11);
}

.icon-badge.bus,
.nav-icon.nav-blue {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #ffffff;
}

.icon-badge.walletin,
.icon-badge.ticket,
.nav-icon.nav-green {
    background: linear-gradient(135deg, #10b981, #6ee7b7);
    color: #063f32;
}

.icon-badge.walletout,
.icon-badge.jeep,
.nav-icon.nav-orange {
    background: linear-gradient(135deg, #f59e0b, #fed7aa);
    color: #5b3200;
}

.icon-badge.road,
.icon-badge.admin {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #ffffff;
}

.icon-badge.train,
.icon-badge.gear,
.icon-badge.info {
    background: linear-gradient(135deg, #2563eb, #10b981);
    color: #ffffff;
}

.progress-bar span,
.route-line {
    background: linear-gradient(90deg, #2563eb, #10b981, #f59e0b);
}

.seat-dot.available,
.status-dot.available {
    background: var(--teal);
}

.seat-dot.selected,
.status-dot.selected {
    background: var(--blue);
}

.seat-dot.booked,
.status-dot.booked {
    background: var(--danger);
}

.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(30, 64, 105, 0.1);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

body.theme-light,
body.theme-light main,
body.theme-light section,
body.theme-light article,
body.theme-light div,
body.theme-light p,
body.theme-light span,
body.theme-light small,
body.theme-light label,
body.theme-light li {
    color: var(--text);
}

body.theme-light .eyebrow,
body.theme-light .tag,
body.theme-light .account-caption,
body.theme-light .topbar-copy p,
body.theme-light .insight-card p,
body.theme-light .promo-band p,
body.theme-light .feature-card p,
body.theme-light .activity-item span,
body.theme-light .security-card p,
body.theme-light .about-card p,
body.theme-light .receipt-card p,
body.theme-light .settings-row-copy span,
body.theme-light .share-box p,
body.theme-light .profile-summary-grid span,
body.theme-light .profile-identity span,
body.theme-light .seat-card small,
body.theme-light .seat-card span {
    color: var(--muted) !important;
}

body.theme-light .app-topbar *,
body.theme-light .feature-wallet *,
.app-topbar *,
.feature-wallet * {
    color: #ffffff !important;
}

body.theme-light .profile-summary,
body.theme-light .profile-editor,
body.theme-light .embedded-settings,
body.theme-light .embedded-about,
body.theme-light .mini-profile,
body.theme-light .profile-nav-item,
body.theme-light .settings-row,
body.theme-light .share-box {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--line);
    box-shadow: var(--shadow);
}

body.theme-dark {
    --panel: rgba(15, 23, 42, 0.9);
    --panel-strong: #111827;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --line: rgba(148, 163, 184, 0.18);
    --shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.24), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.18), transparent 25%),
        linear-gradient(135deg, #0f172a 0%, #10233c 55%, #17211f 100%);
}

body.theme-dark .glass-card,
body.theme-dark .wallet-card,
body.theme-dark .sidebar-card,
body.theme-dark .auth-panel,
body.theme-dark .feature-card,
body.theme-dark .insight-card,
body.theme-dark .activity-card,
body.theme-dark .receipt-card,
body.theme-dark .security-card,
body.theme-dark .about-card,
body.theme-dark .settings-card,
body.theme-dark .service-hub,
body.theme-dark .home-guide,
body.theme-dark .empty-state,
body.theme-dark .note-box,
body.theme-dark .booking-form,
body.theme-dark .mini-group,
body.theme-dark .seat-card,
body.theme-dark .profile-summary,
body.theme-dark .profile-editor,
body.theme-dark .embedded-settings,
body.theme-dark .embedded-about,
body.theme-dark .mini-profile,
body.theme-dark .profile-nav-item,
body.theme-dark .settings-row,
body.theme-dark .share-box {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.9)) !important;
    border-color: var(--line);
    box-shadow: var(--shadow);
}

body.theme-dark .app-topbar {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 52%, #0f766e 100%) !important;
}

body.theme-dark .feature-wallet {
    background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 44%, #0f766e 78%, #d97706 100%) !important;
}

body.theme-dark .tag {
    background: rgba(96, 165, 250, 0.14);
    color: #bfdbfe;
}

body.theme-dark .eyebrow {
    background: rgba(45, 212, 191, 0.14);
    color: #99f6e4;
}

body.theme-dark .btn-primary,
body.theme-dark .btn-secondary {
    color: #ffffff !important;
}

/* Home polish: readable bottom nav and cleaner account header */
.wallet-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.feature-wallet .account-no {
    max-width: 100%;
    width: 100%;
    font-size: clamp(1rem, 2.3vw, 1.32rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
}

.feature-wallet .account-caption {
    margin-bottom: 6px;
}

.wallet-side {
    align-self: center;
}

.mobile-bottom-nav strong {
    color: #132033 !important;
    font-size: 0.76rem;
    line-height: 1.1;
    text-shadow: none;
}

body.theme-dark .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}

body.theme-dark .mobile-bottom-nav a,
body.theme-dark .mobile-bottom-nav button,
body.theme-dark .mobile-bottom-nav strong {
    color: #f8fafc !important;
}

body.theme-dark .mobile-bottom-nav a:hover,
body.theme-dark .mobile-bottom-nav button:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 1080px) {
    .wallet-top {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 520px) {
    .feature-wallet {
        padding: 22px;
    }

    .wallet-top {
        gap: 12px;
    }

    .feature-wallet .account-no {
        font-size: clamp(0.88rem, 3.6vw, 1.05rem);
    }

    .wallet-side {
        justify-items: end;
    }
}

/* Premium home layout and dark-mode service readability */
@media (min-width: 900px) {
    .dashboard-shell {
        width: min(1120px, calc(100% - 32px));
    }

    .dashboard-main {
        gap: 24px;
    }

    .app-topbar {
        padding: 24px 28px;
        border-radius: 22px;
    }

    .topbar-copy h1 {
        font-size: clamp(2rem, 3vw, 2.8rem);
        max-width: 760px;
    }

    .hero-wallet {
        padding: 10px;
        border-radius: 26px;
    }

    .feature-wallet {
        min-height: 360px;
        padding: 34px;
        border-radius: 24px;
    }

    .wallet-overview {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
        align-items: stretch;
    }

    .service-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
    }

    .service-item {
        min-height: 122px;
    }
}

.app-topbar {
    overflow: hidden;
    position: relative;
}

.app-topbar::after {
    content: '';
    position: absolute;
    inset: auto -12% -64% 42%;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 62%);
    pointer-events: none;
}

.service-hub {
    padding: 18px;
}

.service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.service-item {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #132033 !important;
}

.service-item::after {
    content: '';
    position: absolute;
    inset: auto 12px 10px 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #10b981, #f59e0b);
    opacity: 0.72;
}

.service-item strong {
    color: #132033 !important;
    line-height: 1.15;
}

body.theme-dark .service-hub {
    background: rgba(15, 23, 42, 0.9) !important;
}

body.theme-dark .service-item {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96)) !important;
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #f8fafc !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

body.theme-dark .service-item strong {
    color: #f8fafc !important;
    text-shadow: none;
}

body.theme-dark .service-item:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(15, 23, 42, 0.96)) !important;
    border-color: rgba(96, 165, 250, 0.32);
}

body.theme-dark .service-item::after {
    opacity: 0.95;
}

body.theme-dark .home-guide,
body.theme-dark .insight-card,
body.theme-dark .promo-band {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.9)) !important;
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .home-guide h2,
body.theme-dark .home-guide p,
body.theme-dark .insight-card strong,
body.theme-dark .insight-card p,
body.theme-dark .promo-band h3,
body.theme-dark .promo-band p,
body.theme-dark .promo-items strong,
body.theme-dark .promo-items span {
    color: #f8fafc !important;
}

body.theme-dark .promo-items div {
    background: rgba(30, 41, 59, 0.86) !important;
    color: #f8fafc !important;
}

@media (max-width: 700px) {
    .service-hub {
        padding: 14px;
    }

    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .service-item {
        min-height: 94px;
        padding: 12px 6px;
    }

    .service-item span {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .service-item strong {
        font-size: 0.74rem;
    }
}

@media (min-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Bottom action bar now carries the home shortcuts */
.mobile-bottom-nav {
    width: min(940px, calc(100% - 16px));
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.mobile-bottom-nav span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 0.78rem;
}

.mobile-bottom-nav strong {
    font-size: 0.72rem;
}

@media (max-width: 720px) {
    .mobile-bottom-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        gap: 5px;
        padding: 7px 2px;
    }
}

/* Executive home refresh: fixed action dock and cleaner dashboard hierarchy */
body {
    padding-bottom: 112px;
}

.dashboard-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 22px auto 0;
    padding-bottom: 24px;
}

.dashboard-main {
    gap: 22px;
}

.app-topbar,
.hero-wallet,
.insight-card,
.home-guide {
    border-radius: 18px !important;
}

.app-topbar {
    min-height: 150px;
    padding: 28px 30px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(37, 99, 235, 0.96)),
        radial-gradient(circle at 88% 12%, rgba(245, 158, 11, 0.32), transparent 34%) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 22px 46px rgba(30, 64, 105, 0.18);
}

.app-brand {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.92;
}

.topbar-copy h1 {
    font-size: clamp(2.1rem, 4vw, 3.45rem);
    line-height: 1;
}

.topbar-badge {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-wallet {
    padding: 0;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.feature-wallet {
    min-height: 390px;
    padding: 34px;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(14, 116, 144, 0.98) 0%, rgba(30, 64, 175, 0.98) 50%, rgba(15, 118, 110, 0.96) 100%) !important;
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.22);
}

.wallet-top {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.feature-wallet .account-no {
    font-size: clamp(1rem, 2vw, 1.24rem);
}

.wallet-stats {
    gap: 14px;
}

.feature-wallet .stat-box,
.feature-wallet .progress-card,
.wallet-visual {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.feature-wallet .stat-box strong {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.wallet-visual {
    margin-top: 0;
}

.wallet-visual img {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.insight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.insight-card {
    min-height: 148px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(30, 64, 105, 0.1);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.insight-card strong {
    color: #0f766e;
}

.insight-card.highlight {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1)) !important;
}

.home-guide {
    padding: 18px 20px;
    text-align: left;
    display: grid;
    gap: 8px;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(30, 64, 105, 0.1);
}

.home-guide h2 {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.home-guide p {
    margin: 0;
}

.mobile-bottom-nav {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 50;
    width: min(960px, calc(100% - 22px));
    margin: 0;
    padding: 10px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 64, 105, 0.12);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
}

.mobile-bottom-nav a,
.mobile-bottom-nav button {
    min-width: 0;
    gap: 5px;
    padding: 8px 4px;
    border-radius: 14px;
}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav button:hover {
    background: rgba(37, 99, 235, 0.08);
}

.mobile-bottom-nav span {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 0.8rem;
}

.mobile-bottom-nav strong {
    font-size: 0.72rem;
    font-weight: 900;
}

body.theme-dark .app-topbar {
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.86), rgba(30, 64, 175, 0.92)),
        radial-gradient(circle at 88% 12%, rgba(245, 158, 11, 0.24), transparent 34%) !important;
}

body.theme-dark .feature-wallet {
    background:
        linear-gradient(145deg, rgba(14, 116, 144, 0.88) 0%, rgba(30, 64, 175, 0.9) 52%, rgba(15, 23, 42, 0.96) 100%) !important;
}

body.theme-dark .insight-card,
body.theme-dark .home-guide {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

body.theme-dark .insight-card strong {
    color: #5eead4 !important;
}

body.theme-dark .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
}

@media (max-width: 900px) {
    body {
        padding-bottom: 164px;
    }

    .dashboard-shell {
        width: min(100%, calc(100% - 14px));
        margin-top: 10px;
    }

    .app-topbar {
        min-height: auto;
        padding: 22px;
        align-items: flex-start;
        flex-direction: column;
    }

    .feature-wallet {
        min-height: auto;
        padding: 24px;
    }

    .wallet-overview,
    .insight-grid {
        grid-template-columns: 1fr;
    }

    .wallet-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-bottom-nav {
        bottom: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(520px, calc(100% - 16px));
        padding: 9px;
    }
}

@media (max-width: 480px) {
    body {
        padding-bottom: 156px;
    }

    .wallet-stats {
        grid-template-columns: 1fr;
    }

    .mobile-bottom-nav span {
        width: 36px;
        height: 36px;
    }

    .mobile-bottom-nav strong {
        font-size: 0.66rem;
    }
}

body.theme-dark .driver-seat-action button {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe !important;
}

body.theme-dark .unpaid-seat .driver-seat-action button {
    background: rgba(45, 212, 191, 0.16);
    color: #99f6e4 !important;
}

body.theme-dark .paid-seat .driver-seat-action button,
body.theme-dark .unpaid-seat .driver-seat-action + .driver-seat-action button {
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca !important;
}

.provider-confirm-card {
    display: grid;
    gap: 22px;
}

.provider-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.provider-summary > div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 250, 245, 0.9);
    border: 1px solid rgba(143, 33, 89, 0.1);
}

.provider-summary span {
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.provider-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.inline-back-btn {
    margin-bottom: 18px;
}

.driver-seat-grid.bus-seat-map {
    grid-template-columns: 1fr;
    max-width: 680px;
}

.driver-seat-grid.bus-seat-map .driver-seat-card {
    position: relative;
    overflow: hidden;
    min-height: 70px;
    padding: 20px 10px 12px;
    border-radius: 18px 18px 10px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 24%, transparent 24%),
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow:
        inset 0 -7px 0 rgba(15, 23, 42, 0.08),
        inset 7px 0 0 rgba(15, 23, 42, 0.04),
        inset -7px 0 0 rgba(15, 23, 42, 0.04),
        0 8px 14px rgba(15, 23, 42, 0.09);
}

.driver-seat-grid.bus-seat-map .paid-seat {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0 24%, transparent 24%),
        linear-gradient(135deg, rgba(143, 33, 89, 0.18), rgba(245, 158, 11, 0.16));
}

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

@media (max-width: 900px) {
    .provider-summary {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 520px) {
    .bus-seat-map {
        padding: 12px;
    }

    .seat-row {
        grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
        gap: 6px;
    }

    .seat-side {
        gap: 5px;
    }

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

.btn-danger {
    border: 0;
    color: #fff !important;
    background: linear-gradient(135deg, #991b1b, #ef4444);
}

.btn-danger:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.admin-user-list,
.admin-bus-grid {
    display: grid;
    gap: 14px;
}

.admin-search-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.78);
}

.admin-search-form label {
    display: grid;
    gap: 6px;
}

.admin-search-form p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
}

.admin-user-card {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(240px, 1.4fr) minmax(160px, 0.8fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.admin-user-card h3 {
    margin: 8px 0 4px;
}

.admin-user-card p,
.admin-password-box small,
.admin-bus-card small {
    color: var(--muted);
}

.admin-role-badge,
.bus-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

.admin-user-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    font-size: 0.88rem;
}

.admin-password-box {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.04);
}

.admin-password-box strong {
    color: #0f766e;
}

.admin-inline-form {
    display: flex;
    justify-content: flex-end;
}

.admin-bus-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-bus-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
}

.admin-bus-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-bus-card label {
    display: grid;
    gap: 6px;
}

.admin-fare-card {
    position: relative;
    overflow: hidden;
}

.fare-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(236, 253, 245, 0.88));
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.fare-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

.fare-feature strong {
    display: block;
    margin-bottom: 4px;
}

.fare-feature p {
    margin: 0;
    color: var(--muted);
}

.admin-fare-form {
    margin-top: 6px;
}

.bus-schedule-copy {
    color: #2563eb;
    font-weight: 700;
}

.status-available {
    border-color: rgba(15, 118, 110, 0.22) !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.9));
}

.status-in-transit {
    border-color: rgba(37, 99, 235, 0.24) !important;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 251, 235, 0.76));
}

.status-unavailable {
    border-color: rgba(100, 116, 139, 0.28) !important;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.82));
}

.status-under-maintenance {
    border-color: rgba(153, 27, 27, 0.24) !important;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(255, 247, 237, 0.86));
}

.status-available .bus-status-icon {
    background: linear-gradient(135deg, #047857, #14b8a6);
}

.status-in-transit .bus-status-icon {
    background: linear-gradient(135deg, #1d4ed8, #f59e0b);
}

.status-unavailable .bus-status-icon {
    background: linear-gradient(135deg, #475569, #94a3b8);
}

.status-under-maintenance .bus-status-icon {
    background: linear-gradient(135deg, #991b1b, #f97316);
}

.bus-dashboard-status strong {
    display: flex;
    gap: 8px;
    align-items: center;
}

.driver-status-form {
    margin-top: 20px;
}

.driver-status-form .wallet-form-grid {
    margin-bottom: 14px;
}

@media (max-width: 980px) {
    .admin-user-card {
        grid-template-columns: 1fr;
    }

    .admin-search-form {
        grid-template-columns: 1fr;
    }

    .admin-inline-form {
        justify-content: stretch;
    }

    .admin-inline-form .btn {
        width: 100%;
    }
}

@media print {
    body::before,
    .ticket-actions,
    .btn,
    .action-chip,
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .subpage-shell {
        width: 100%;
        margin: 0;
    }

    .ticket-print {
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff;
    }
}