:root {
    --tg-top-safe-area: 0px;
    --tg-fullscreen-close-offset: 36px;
    --miniapp-page-top-offset: 36px;
    --miniapp-top-offset: calc(env(safe-area-inset-top, 0px) + max(var(--tg-top-safe-area, 0px), var(--miniapp-page-top-offset)));
    --miniapp-bottom-nav-height: 72px;
    --button-radius: 12px;
    --button-min-height: 44px;
    --button-padding-y: 10px;
    --button-padding-x: 14px;
    --button-shadow: 0 6px 14px rgba(8, 127, 216, .14);
    --button-shadow-active: 0 3px 8px rgba(8, 127, 216, .12);
    --button-ghost-bg: rgba(255, 255, 255, .88);
    --button-danger-bg: #d93636;
    --button-ok-bg: #15936d;
    --theme-toggle-bg: rgba(255, 255, 255, .92);
    --theme-toggle-color: #163248;
    --theme-toggle-border: rgba(30, 70, 100, .16);
    --theme-toggle-shadow: 0 10px 28px rgba(10, 35, 52, .18);
}

html.tg-fullscreen-layout {
    --miniapp-top-offset: calc(max(var(--tg-top-safe-area, 0px), var(--tg-fullscreen-close-offset, 36px), var(--miniapp-page-top-offset, 36px)) + env(safe-area-inset-top, 0px));
}

html.tg-desktop-layout {
    --miniapp-top-offset: 14px;
}

body > main,
body > .screen {
    padding-top: var(--miniapp-top-offset) !important;
}

body > header:first-of-type {
    padding-top: var(--miniapp-top-offset) !important;
}

html.tg-fullscreen-layout .top {
    padding-top: 0 !important;
}

.top {
    min-height: 44px;
    margin-top: 0 !important;
}

.top h1 {
    margin: 0 !important;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(var(--bottom-nav-count, 4), minmax(0, 1fr));
    gap: 2px;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    min-height: var(--miniapp-bottom-nav-height);
    border-top: 1px solid rgba(22, 42, 58, .08);
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 26px rgba(15, 35, 52, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bottom-nav-item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    color: #576779;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item.active {
    color: #08aaa4;
}

.bottom-nav-item.disabled {
    opacity: .58;
}

.bottom-nav-icon {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
}

.bottom-nav-icon svg {
    width: 23px;
    height: 23px;
    display: block;
    fill: currentColor;
}

.bottom-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.has-bottom-nav > main,
body.has-bottom-nav > .screen {
    padding-bottom: calc(var(--miniapp-bottom-nav-height) + max(14px, env(safe-area-inset-bottom))) !important;
}

body.has-bottom-nav {
    padding-bottom: calc(var(--miniapp-bottom-nav-height) + max(14px, env(safe-area-inset-bottom))) !important;
}

@supports selector(body:has(.bottom-nav)) {
    body:has(.bottom-nav) {
        padding-bottom: calc(var(--miniapp-bottom-nav-height) + max(14px, env(safe-area-inset-bottom))) !important;
    }

    body:has(.bottom-nav) > main,
    body:has(.bottom-nav) > .screen {
        padding-bottom: calc(var(--miniapp-bottom-nav-height) + max(14px, env(safe-area-inset-bottom))) !important;
    }
}

button,
.button,
.tab,
.role-button,
.admin-link,
.buttons a,
.account-switch-button,
.open-card-button,
.delete-order-button,
.google-button {
    min-height: var(--button-min-height) !important;
    border-radius: var(--button-radius) !important;
    padding: var(--button-padding-y) var(--button-padding-x) !important;
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, #168de0, #078f93) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: var(--button-shadow) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}

button:active,
.button:active,
.tab:active,
.role-button:active,
.admin-link:active,
.buttons a:active,
.account-switch-button:active,
.open-card-button:active,
.delete-order-button:active,
.google-button:active {
    transform: translateY(1px);
    box-shadow: var(--button-shadow-active) !important;
}

button:disabled,
.button[aria-disabled="true"],
.button.disabled {
    opacity: .58;
    box-shadow: none !important;
    cursor: not-allowed;
}

.ghost,
.tab.secondary,
.buttons .ghost,
.account-switch-button,
.open-card-button,
.role-tab:not(.active),
.google-button {
    background: var(--button-ghost-bg) !important;
    color: var(--ink, #16202a) !important;
    border-color: rgba(25, 45, 61, .12) !important;
    box-shadow: 0 5px 12px rgba(15, 35, 52, .08) !important;
}

.danger,
.delete-order-button {
    background: linear-gradient(135deg, #ee5757, var(--button-danger-bg)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(217, 54, 54, .15) !important;
}

.ok {
    background: linear-gradient(135deg, #20aa7f, var(--button-ok-bg)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(21, 147, 109, .15) !important;
}

.back,
.icon-button,
.theme-toggle,
.route-location-button,
.location-button {
    padding: 0 !important;
    box-shadow: 0 5px 13px rgba(15, 35, 52, .10) !important;
}

.back,
.icon-button {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    background: var(--button-ghost-bg) !important;
    color: var(--ink, #16202a) !important;
    border-color: rgba(25, 45, 61, .12) !important;
}

.route-location-button,
.location-button {
    width: 48px !important;
    min-width: 48px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
}

.partner-arrow {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .88) !important;
    color: var(--ink, #183247) !important;
    border-color: rgba(25, 45, 61, .12) !important;
    box-shadow: 0 6px 16px rgba(15, 35, 52, .13) !important;
}

.role-button {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 58px !important;
    min-height: 64px !important;
    border-radius: 16px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 12px 14px !important;
    text-align: left !important;
}

.role-button .role-copy {
    min-width: 0;
    justify-items: start;
}

.role-button .role-title,
.role-button .role-subtitle {
    width: 100%;
    text-align: left;
}

.role-tab {
    min-height: 44px !important;
}

.language-option {
    min-height: 45px !important;
    padding: 5px 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--muted, #607080) !important;
    box-shadow: none !important;
}

.language-option.active {
    background: rgba(17, 135, 223, .08) !important;
    color: var(--blue-dark, #0b72bf) !important;
    box-shadow: none !important;
}

.request-card .request-actions .button,
.request-card .request-actions button,
.order-actions .button,
.order-actions button,
.order-status-actions .button,
.order-status-actions button {
    min-height: 44px !important;
    font-size: 14px !important;
}

.theme-toggle {
    position: fixed;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 60;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--theme-toggle-border);
    border-radius: 50%;
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-color);
    box-shadow: var(--theme-toggle-shadow);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(14px);
}

.theme-toggle:active {
    transform: translateY(1px);
}

dialog {
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px));
    margin-top: 80px;
    margin-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

dialog > form,
dialog .dialog-body {
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #0e141b;
    --surface: #151d26;
    --surface-soft: #111922;
    --surface-raised: #1a2530;
    --surface-input: #0f1720;
    --ink: #eef5f8;
    --muted: #a0adb8;
    --line: rgba(222, 234, 242, .12);
    --blue: #48a8f7;
    --blue-dark: #7dc4ff;
    --teal: #35b7bd;
    --green: #44c28d;
    --coral: #ff7d74;
    --amber: #ffc766;
    --shadow: 0 18px 42px rgba(0, 0, 0, .30);
    --soft-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    --button-ghost-bg: #1b2631;
    --theme-toggle-bg: rgba(24, 35, 45, .96);
    --theme-toggle-color: #ffd875;
    --theme-toggle-border: rgba(222, 234, 242, .14);
    --theme-toggle-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    background: var(--app-bg);
}

html[data-theme="dark"] body {
    background:
        linear-gradient(180deg, rgba(72, 168, 247, .10), rgba(14, 20, 27, .88) 290px),
        #0e141b !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] body::before {
    opacity: .22;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .section,
html[data-theme="dark"] .hero,
html[data-theme="dark"] article,
html[data-theme="dark"] .driver,
html[data-theme="dark"] .route-panel,
html[data-theme="dark"] .active-trips,
html[data-theme="dark"] .trip,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .request-card,
html[data-theme="dark"] .driver-card,
html[data-theme="dark"] .route-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .logo-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    box-shadow: var(--soft-shadow);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .top {
    background: #101821 !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .brand-banner,
html[data-theme="dark"] .language-picker,
html[data-theme="dark"] .creator-card,
html[data-theme="dark"] .partner-carousel {
    background: rgba(21, 29, 38, .92) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    box-shadow: var(--soft-shadow) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] label {
    color: var(--ink) !important;
}

html[data-theme="dark"] .sub,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .route-meta,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .online-subtitle,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .brand-support,
html[data-theme="dark"] .bottom-support {
    color: var(--muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--surface-input) !important;
    border-color: rgba(222, 234, 242, .14) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #778692 !important;
}

html[data-theme="dark"] .ghost,
html[data-theme="dark"] .back,
html[data-theme="dark"] .tab.secondary,
html[data-theme="dark"] .account-switch-button,
html[data-theme="dark"] .open-card-button,
html[data-theme="dark"] .google-button,
html[data-theme="dark"] .role-tab:not(.active) {
    background: var(--button-ghost-bg) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .16) !important;
}

html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .role-button,
html[data-theme="dark"] .admin-link,
html[data-theme="dark"] .buttons a,
html[data-theme="dark"] .delete-order-button {
    box-shadow: 0 8px 18px rgba(5, 110, 160, .18) !important;
}

html[data-theme="dark"] .status {
    background: rgba(53, 199, 146, .16) !important;
    color: #9ef0cf !important;
}

html[data-theme="dark"] .error {
    background: rgba(255, 116, 104, .14) !important;
    color: #ffb1aa !important;
}

html[data-theme="dark"] .empty,
html[data-theme="dark"] .photo-placeholder,
html[data-theme="dark"] .avatar {
    background: var(--surface-raised) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .language-option {
    background: transparent !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .language-option.active {
    background: rgba(72, 168, 247, .12) !important;
    color: var(--blue-dark) !important;
}

html[data-theme="dark"] .language-option:not(.active),
html[data-theme="dark"] .role-tab:not(.active) {
    color: var(--muted) !important;
}

html[data-theme="dark"] .app-loader {
    background:
        linear-gradient(180deg, rgba(7, 16, 24, .30) 0%, rgba(7, 16, 24, .88) 58%, rgba(7, 16, 24, .98) 100%),
        url("/blablabot/assets/auth-road-bg.jpg?v=20260703") center top / cover no-repeat !important;
}

html[data-theme="dark"] .loader-logo-card {
    background: rgba(18, 28, 37, .96) !important;
}

html[data-theme="dark"] .screen {
    background:
        linear-gradient(180deg, rgba(14, 20, 27, .22) 0%, rgba(14, 20, 27, .74) 34%, rgba(14, 20, 27, .96) 100%),
        url("/blablabot/assets/auth-road-bg.jpg?v=20260703") center top / cover no-repeat !important;
}

html[data-theme="dark"] dialog {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
}

html[data-theme="dark"] dialog::backdrop {
    background: rgba(3, 7, 12, .62) !important;
    backdrop-filter: blur(4px);
}

html[data-theme="dark"] form {
    background: transparent !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .route-result,
html[data-theme="dark"] .order-price-summary,
html[data-theme="dark"] .contact-status {
    background: rgba(68, 194, 141, .12) !important;
    border-color: rgba(68, 194, 141, .22) !important;
    color: #c9f6e4 !important;
}

html[data-theme="dark"] .route-error,
html[data-theme="dark"] .danger {
    background: rgba(255, 125, 116, .15) !important;
    color: #ffc1bc !important;
    border-color: rgba(255, 125, 116, .22) !important;
}

html[data-theme="dark"] .map,
html[data-theme="dark"] .leaflet-container {
    background: #101821 !important;
}

html[data-theme="dark"] .leaflet-tile {
    filter: brightness(.72) saturate(.78) contrast(1.08);
}

html[data-theme="dark"] .creator-card,
html[data-theme="dark"] .contact-bar,
html[data-theme="dark"] .account-bar {
    background: var(--surface-raised) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

.contact-link {
    color: #0b84d8;
    font-weight: 800;
    text-decoration: none;
}

.contact-link:active {
    opacity: .72;
}

html[data-theme="dark"] .contact-link {
    color: #67c7ff;
}

html[data-theme="dark"] .partner-carousel {
    background: rgba(21, 29, 38, .74) !important;
}

html[data-theme="dark"] .partner-mark {
    color: inherit !important;
}

html[data-theme="dark"] .partner-arrow,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .route-location-button,
html[data-theme="dark"] .location-button {
    background: var(--surface-raised) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .bottom-nav {
    background: rgba(18, 28, 37, .96) !important;
    border-color: var(--line) !important;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] .bottom-nav-item {
    color: var(--muted) !important;
}

html[data-theme="dark"] .bottom-nav-item.active {
    color: #43d8cc !important;
}

html[data-theme="dark"] .brand-logo.skycode .skycode-logo-light {
    display: none !important;
}

html[data-theme="dark"] .brand-logo.skycode .skycode-logo-dark {
    display: block !important;
}