:root {
    /* Basic Colors */
    --bg-color: var(--tg-theme-bg-color, #fff);
    --text-color: var(--tg-theme-text-color, #000);
    --hint-color: var(--tg-theme-hint-color, #999);
    --button-color: var(--tg-theme-button-color, #2684ff);
    --button-text-color: var(--tg-theme-button-text-color, #fff);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #f4f6f8);

    /* Enhanced Design Variables */
    --card-bg: var(--tg-theme-bg-color, #fff);
    --input-bg: var(--tg-theme-secondary-bg-color, #f0f2f5);
    --border-radius: 16px;
    --shadow: 0 4px 20px rgba(0,0,0,0.05);
    --shadow-active: 0 2px 8px rgba(0,0,0,0.1);
    --accent-red: #e53935;

    /* Animation / Timing */
    --anim-fast: 0.15s;
    --anim-normal: 0.25s;
    --anim-ease: cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Premium Ornament Background */
    --kh-ornament-color: rgba(145, 104, 38, 0.32);
    --kh-ornament-opacity: 0.16;
    --kh-ornament-size: 320px;
    --kh-ornament-shift: 42px;
    --kh-ornament-blur: 0.15px;
    --kh-ornament-glow: 0 14px 34px rgba(0,0,0,0.08);
}

/* === TOAST SYSTEM === */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 200px;
    max-width: 90%;
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
    text-align: center;
    word-wrap: break-word;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    background: #d9534f;
}

.toast.success {
    background: #28a745;
}

.toast.info {
    background: #0d6efd;
}
/* === END TOAST SYSTEM === */

/* === STO MARKET LAYOUT FIXES === */
#view-market .detail-navbar.kh-navbar-centered {
    position: relative !important;
    min-height: 44px !important;
}

#view-market #lbl-market-header {
    display: block !important;
    min-width: 0 !important;
    max-width: calc(100vw - 132px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    font-size: 17px !important;
}

#view-market .market-shell {
    overflow: hidden !important;
}

#view-market .market-service-chips-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 10px 2px 10px !important;
    margin: 0 !important;
    scroll-padding-left: 10px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#view-market .market-service-chips-row::-webkit-scrollbar {
    display: none;
}

#view-market .market-service-chips-row .market-mode-chip {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: 34px !important;
}

#view-market .market-shell-top {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
}

#view-market .market-shell-top > .market-shell-meta {
    justify-self: end !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#view-market #btn-market-filter-shell,
#view-market #btn-market-sto-settings-shell {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#view-market #btn-market-sto-settings-shell {
    max-width: 128px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 430px) {
    #view-market #lbl-market-header {
        max-width: calc(100vw - 156px) !important;
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {
    #view-market .market-shell-top {
        gap: 6px !important;
    }

    #view-market #btn-market-filter-shell,
    #view-market #btn-market-sto-settings-shell {
        height: 38px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }

    #view-market .market-total-pill {
        min-width: 70px !important;
    }

    #view-market .market-layout-switcher-shell {
        transform: scale(0.92);
        transform-origin: right center;
    }
}
/* === END STO MARKET LAYOUT FIXES === */

/* === STO QUICK CONTROLS SHEET === */
.kh-sto-quick-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 14px;
    line-height: 1.45;
}

.kh-sto-quick-intro {
    color: var(--text-color);
    opacity: 0.88;
}

.kh-sto-quick-section {
    display: block;
}

.kh-sto-quick-section-title {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--hint-color);
    opacity: 0.88;
    margin-bottom: 8px;
}

.kh-sto-quick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kh-sto-quick-row--modes,
.kh-sto-quick-row--actions {
    gap: 10px;
}

.kh-sto-quick-chip,
.kh-sto-quick-card-btn {
    border: 1px solid rgba(127,127,127,0.22);
    background: rgba(255,255,255,0.04);
    color: var(--text-color);
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.kh-sto-quick-chip {
    padding: 8px 12px;
    border-radius: 999px;
}

.kh-sto-quick-card-btn {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 12px 14px;
    border-radius: 14px;
}

.kh-sto-quick-action-btn {
    padding-top: 11px;
    padding-bottom: 11px;
}

.kh-sto-quick-chip.active,
.kh-sto-quick-card-btn.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
    box-shadow: 0 6px 16px rgba(38,132,255,0.22);
}

.kh-sto-quick-chip:active,
.kh-sto-quick-card-btn:active {
    transform: scale(0.97);
}

.kh-sto-quick-hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--hint-color);
}

body.kh-scheme-dark .kh-sto-quick-chip,
body.kh-scheme-dark .kh-sto-quick-card-btn,
body[data-kh-scheme="dark"] .kh-sto-quick-chip,
body[data-kh-scheme="dark"] .kh-sto-quick-card-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
}

body.kh-scheme-dark .kh-sto-quick-chip.active,
body.kh-scheme-dark .kh-sto-quick-card-btn.active,
body[data-kh-scheme="dark"] .kh-sto-quick-chip.active,
body[data-kh-scheme="dark"] .kh-sto-quick-card-btn.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
}

@media (max-width: 420px) {
    .kh-sto-quick-card-btn {
        flex-basis: 100%;
    }
}
/* === END STO QUICK CONTROLS SHEET === */

/* === STO NEARBY HUB / LIVE POINTS MAP === */
.kh-nearby-hub-panel {
    margin: 8px 0 14px 0;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--button-color) 26%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--button-color) 12%, var(--card-bg)),
        color-mix(in srgb, var(--secondary-bg) 82%, transparent));
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    overflow: hidden;
}

.kh-nearby-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.kh-nearby-hub-title {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-color);
}

.kh-nearby-hub-subtitle,
.kh-nearby-privacy-note,
.kh-nearby-empty-text {
    font-size: 12px;
    line-height: 1.38;
    color: var(--hint-color);
}

.kh-nearby-hub-subtitle {
    margin-top: 4px;
}

.kh-nearby-hub-head-main {
    min-width: 0;
}

.kh-nearby-hub-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 9px;
    background: color-mix(in srgb, var(--button-color) 16%, transparent);
    color: var(--button-color);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.kh-nearby-hub-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.kh-nearby-hub-meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--button-color) 10%, transparent);
    color: color-mix(in srgb, var(--text-color) 88%, transparent);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.kh-nearby-hub-meta-chip--route {
    color: var(--button-color);
}

.kh-nearby-hub-body {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.kh-nearby-empty-card {
    padding: 13px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 78%, transparent);
    border: 1px dashed color-mix(in srgb, var(--button-color) 28%, rgba(127,127,127,0.18));
}

.kh-nearby-empty-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--text-color);
    margin-bottom: 5px;
}

.kh-nearby-radar {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--button-color) 20%, transparent) 0 5px, transparent 6px),
        radial-gradient(circle at center, color-mix(in srgb, var(--button-color) 8%, transparent), transparent 68%);
    border: 1px solid color-mix(in srgb, var(--button-color) 22%, transparent);
    overflow: hidden;
}

.kh-nearby-radar-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed color-mix(in srgb, var(--button-color) 30%, transparent);
    border-radius: 999px;
    pointer-events: none;
}

.kh-nearby-radar-ring--outer { width: 112px; height: 112px; }
.kh-nearby-radar-ring--middle { width: 76px; height: 76px; }
.kh-nearby-radar-ring--inner { width: 40px; height: 40px; }

.kh-nearby-radar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--button-color);
    font-size: 13px;
    line-height: 1;
    z-index: 2;
}

.kh-nearby-radar-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--button-color) 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(0,0,0,0.14);
    cursor: pointer;
    z-index: 3;
    transition: transform var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease);
}

.kh-nearby-radar-dot:hover {
    border-color: color-mix(in srgb, var(--button-color) 70%, transparent);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.kh-nearby-radar-dot:active {
    transform: translate(-50%, -50%) scale(0.94);
}

.kh-nearby-radar-dot:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--button-color) 70%, transparent);
    outline-offset: 2px;
}

.kh-nearby-point-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.kh-nearby-point-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 76%, transparent);
    border: 1px solid rgba(127,127,127,0.16);
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.kh-nearby-point-row:hover {
    background: color-mix(in srgb, var(--button-color) 9%, var(--card-bg));
    border-color: color-mix(in srgb, var(--button-color) 24%, transparent);
}

.kh-nearby-point-row:active {
    transform: scale(0.985);
}

.kh-nearby-point-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--button-color) 70%, transparent);
    outline-offset: 2px;
}

.kh-nearby-point-main {
    min-width: 0;
}

.kh-nearby-point-title-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.kh-nearby-point-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-nearby-distance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--button-color) 13%, transparent);
    color: var(--button-color);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.kh-nearby-point-subtitle {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.32;
    color: var(--hint-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-nearby-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(44,190,120,0.18);
    color: #1f9d63;
    font-size: 11px;
    font-weight: 900;
}

.kh-nearby-route-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kh-nearby-route-btn,
.kh-nearby-action-btn {
    min-height: 34px;
    border: none;
    border-radius: 999px;
    background: var(--button-color);
    color: var(--button-text-color);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 8px 10px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform var(--anim-fast) var(--anim-ease),
                filter var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.kh-nearby-route-btn:hover,
.kh-nearby-action-btn:hover {
    filter: brightness(1.04);
}

.kh-nearby-route-btn:active,
.kh-nearby-action-btn:active {
    transform: scale(0.96);
}

.kh-nearby-route-btn:focus-visible,
.kh-nearby-action-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--button-color) 70%, transparent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--button-color) 14%, transparent);
}

.kh-nearby-route-btn--copy {
    background: color-mix(in srgb, var(--button-color) 12%, transparent);
    color: var(--button-color);
    border: 1px solid color-mix(in srgb, var(--button-color) 20%, transparent);
}

.kh-nearby-action-btn--ghost {
    background: color-mix(in srgb, var(--button-color) 14%, transparent);
    color: var(--button-color);
}

.kh-nearby-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.kh-nearby-privacy-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(127,127,127,0.14);
}

body.kh-scheme-dark .kh-nearby-hub-panel,
body[data-kh-scheme="dark"] .kh-nearby-hub-panel {
    box-shadow: 0 14px 32px rgba(0,0,0,0.22);
}

body.kh-scheme-dark .kh-nearby-radar-dot,
body[data-kh-scheme="dark"] .kh-nearby-radar-dot,
body.kh-scheme-dark .kh-nearby-point-row,
body[data-kh-scheme="dark"] .kh-nearby-point-row {
    background: color-mix(in srgb, var(--card-bg) 76%, transparent);
    border-color: rgba(255,255,255,0.13);
}

@media (max-width: 430px) {
    .kh-nearby-hub-panel {
        padding: 11px;
        border-radius: 16px;
    }

    .kh-nearby-hub-head {
        flex-direction: column;
        align-items: stretch;
    }

    .kh-nearby-hub-badge {
        width: fit-content;
    }

    .kh-nearby-hub-meta-row {
        gap: 5px;
    }

    .kh-nearby-hub-meta-chip {
        max-width: 100%;
        white-space: normal;
        line-height: 1.2;
    }

    .kh-nearby-hub-body {
        grid-template-columns: 1fr;
    }

    .kh-nearby-radar {
        width: min(188px, 68vw);
        height: min(188px, 68vw);
        margin: 0 auto;
    }

    .kh-nearby-radar-ring--outer { width: 84%; height: 84%; }
    .kh-nearby-radar-ring--middle { width: 58%; height: 58%; }
    .kh-nearby-radar-ring--inner { width: 32%; height: 32%; }

    .kh-nearby-point-row {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .kh-nearby-point-title-line {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .kh-nearby-distance-pill {
        width: fit-content;
    }

    .kh-nearby-point-subtitle {
        white-space: normal;
    }

    .kh-nearby-route-actions {
        justify-content: flex-start;
    }

    .kh-nearby-route-btn,
    .kh-nearby-action-btn {
        min-height: 34px;
    }
}
/* === END STO NEARBY HUB / LIVE POINTS MAP === */

/* GLOBAL */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;

    /* FIX: скролл только внутри .view */
    overflow: hidden;

    /* MOBILE ZOOM HARDENING:
       корень документа не должен сам глушить нативный pinch-to-zoom страницы */
    touch-action: pinch-zoom;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding-bottom: 0;
    /* tabbar резервируется самими .view, body не должен поднимать fixed UI */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;

    /* FIX: исключаем скролл body на мобилках */
    overflow: hidden;

    /* MOBILE ZOOM HARDENING:
       body остаётся non-scroll root, но pinch страницы допускается */
    touch-action: pinch-zoom;

    /* Premium background layer host */
    position: relative;
    isolation: isolate;
}

/* === PREMIUM KAZAKH ORNAMENT WATERMARK === */
body::before,
body::after {
    content: none;
}

.kh-watermark-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2100;
    overflow: hidden;
}

.kh-watermark-node {
    position: absolute;
    width: var(--kh-ornament-size);
    height: var(--kh-ornament-size);
    opacity: var(--kh-ornament-opacity);
    filter: blur(var(--kh-ornament-blur)) drop-shadow(var(--kh-ornament-glow));
    color: var(--kh-ornament-color);
    background:
        radial-gradient(circle at 18% 82%, transparent 0 22px, currentColor 22px 26px, transparent 26px 56px, currentColor 56px 60px, transparent 60px 100%),
        radial-gradient(circle at 82% 18%, transparent 0 22px, currentColor 22px 26px, transparent 26px 56px, currentColor 56px 60px, transparent 60px 100%),
        radial-gradient(circle at 44% 56%, transparent 0 8px, currentColor 8px 11px, transparent 11px 100%),
        radial-gradient(circle at 56% 44%, transparent 0 8px, currentColor 8px 11px, transparent 11px 100%);
    background-repeat: no-repeat;
}

.kh-watermark-node--tl {
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: calc(-1 * var(--kh-ornament-shift));
    transform: rotate(-7deg);
}

.kh-watermark-node--br {
    right: calc(-1 * var(--kh-ornament-shift));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: scaleX(-1) scaleY(-1) rotate(-7deg);
}

body > .view,
body > .tabbar,
body > #toast-container {
    z-index: 1;
}

body > #kh-watermark-overlay {
    z-index: 2100;
}

body.kh-scheme-dark,
body[data-kh-scheme="dark"] {
    --kh-ornament-color: rgba(214, 187, 126, 0.34);
    --kh-ornament-opacity: 0.18;
    --kh-ornament-glow: 0 16px 42px rgba(0,0,0,0.28);
}

body.kh-scheme-light,
body[data-kh-scheme="light"] {
    --kh-ornament-color: rgba(129, 91, 31, 0.22);
    --kh-ornament-opacity: 0.14;
    --kh-ornament-glow: 0 12px 28px rgba(0,0,0,0.06);
}

@media (max-width: 520px) {
    .kh-watermark-node {
        width: 248px;
        height: 248px;
    }

    .kh-watermark-node--tl {
        top: calc(64px + env(safe-area-inset-top, 0px));
        left: -72px;
    }

    .kh-watermark-node--br {
        right: -74px;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
}

/* BRAND HEADER (Flush Top) */
.brand-header {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Прижимаем к верхней границе */
    padding: 0 0 5px 0;      /* Сверху 0, снизу 5px (минимальный зазор до меню) */
    height: auto;
}

.brand-logo {
    height: 110px; /* главный логотип */
    width: auto;
    object-fit: contain;

    /* FIX: убираем “светящийся овал” */
    background: transparent;
    border-radius: 0;
    padding: 0;

    /* оставляем посадку логотипа повыше */
    margin-top: 0px;
}

/* CATEGORIES GRID (1 Row x 4 Cols) */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки в ряд */
    gap: 6px; /* Минимальный зазор */
    
    margin-top: 0;        
    margin-bottom: 12px;
    padding: 0 6px;     
}

/* Скрываем скроллбар */
.categories-grid::-webkit-scrollbar { display: none; }

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    
    /* Чуть крупнее */
    padding: 7px 2px;
    height: 74px;
    min-width: 0; /* Важно для grid */
    
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.cat-item:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-active);
}

.cat-item.active {
    background: var(--button-color);
    border-color: var(--button-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(38, 132, 255, 0.3);
}

.cat-icon {
    font-size: 24px;
    margin-bottom: 4px;
    line-height: 1;
}

.cat-name {
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: var(--text-color);
    letter-spacing: -0.1px;
}

.cat-item.active .cat-name,
.cat-item.active .cat-icon {
    color: #fff;
}

/* LANGUAGE SWITCHER (legacy inline block - может использоваться внутри страниц) */
.lang-switcher {
    display: flex;
    gap: 8px;
    margin: 8px 0 6px;
}

/* База кнопок языка (общая) */
.lang-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--secondary-bg);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-color);
    text-align: center;
    transition: background var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}
.lang-btn:active {
    transform: scale(0.96);
}
.lang-btn.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
    box-shadow: 0 2px 8px rgba(38,132,255,0.3);
}

/* [GLOBAL] Верхняя полоса внутри .view (скроллится вместе с экраном) */
.kh-view-topbar {
    position: relative;
    height: 44px;
    margin: -5px -15px 0 -15px; /* компенсируем padding .view сверху/по бокам */
    padding: 0 15px;
    display: block;
    z-index: 60;
}

/* [GLOBAL] Переключатель языка */
.kh-lang-switcher {
    position: absolute; 
    top: 15px; 
    left: 15px;
    /* [FIX] Максимальный слой, чтобы не перекрывало логотипом */
    z-index: 9005 !important; 

    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    pointer-events: auto;
    transition: opacity 0.2s,
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
}

body.kh-scheme-dark .kh-lang-switcher,
body[data-kh-scheme="dark"] .kh-lang-switcher {
    background: color-mix(in srgb, var(--card-bg) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 16%, transparent);
    box-shadow: 0 10px 24px rgba(0,0,0,0.26);
}

.kh-home-info-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9006;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    color: color-mix(in srgb, var(--text-color) 88%, transparent);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease);
}

.kh-home-info-btn:hover {
    background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
}

.kh-home-info-btn:active {
    transform: scale(0.96);
}

body.kh-scheme-dark .kh-home-info-btn,
body[data-kh-scheme="dark"] .kh-home-info-btn {
    background: color-mix(in srgb, var(--card-bg) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 16%, transparent);
    box-shadow: 0 10px 24px rgba(0,0,0,0.26);
}

.kh-home-info-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kh-home-info-lead {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-color);
    opacity: 0.92;
}

.kh-home-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.kh-home-info-card {
    border: 1px solid rgba(127,127,127,0.18);
    border-radius: 14px;
    padding: 12px;
    background: rgba(127,127,127,0.08);
}

.kh-home-info-card-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
    color: var(--text-color);
}

.kh-home-info-card-body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-color);
    opacity: 0.88;
}

.kh-home-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kh-home-info-chip {
    border: none;
    border-radius: 999px;
    padding: 9px 12px;
    background: rgba(38,132,255,0.12);
    color: var(--button-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.kh-home-info-chip:active {
    transform: scale(0.97);
}

.kh-home-info-note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--hint-color);
}

/* Стили самих кнопок (убрали вложенность для универсальности) */
.lang-btn {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 5px 8px;

    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
    
    color: color-mix(in srgb, var(--text-color) 88%, transparent);
    border-radius: 8px;
    box-shadow: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.lang-btn:hover {
    background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
}

.lang-btn.active {
    background: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.lang-btn:active {
    transform: scale(0.96);
}

/* === SECTION TITLE (ABSOLUTE CENTER, LANG-SAFE) === */
.kh-section-title {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    pointer-events: none; /* не конфликтует с UI */
    z-index: 1;
}

/* CATEGORY CHIPS */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}
.chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--card-bg);
    font-size: 12px;
    cursor: pointer;
    color: var(--text-color);
    transition: background var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.chip:active {
    transform: scale(0.96);
}
.chip.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
    box-shadow: 0 2px 8px rgba(38,132,255,0.3);
}

/* === PDD PAGE === */
html.pdd-page-html {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

body.pdd-page {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
}

.pdd-page .container {
    padding-bottom: 28px;
}

.pdd-page .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.pdd-page .top-row > .lang-btn {
    flex: 0 0 auto;
}

.pdd-page .lang-switch {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.pdd-page .mode-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
}

.pdd-page .mode-pill {
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--secondary-bg);
    color: var(--text-color);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--anim-fast) var(--anim-ease);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .pdd-page .mode-switch {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .pdd-page .mode-pill {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
}

.pdd-page .mode-pill.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
    box-shadow: 0 2px 8px rgba(38,132,255,0.3);
}

.pdd-page .quick-panel {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px;
    margin-bottom: 14px;
}

.pdd-page .quick-panel-collapsible {
    padding: 12px;
}

.pdd-page .quick-panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
}

.pdd-page .quick-panel-header:active {
    transform: scale(0.995);
}

.pdd-page .quick-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--hint-color);
    margin: 0 0 10px 0;
}

.pdd-page .quick-title-inline {
    margin: 0;
}

.pdd-page .quick-panel-toggle {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--hint-color);
}

.pdd-page .quick-panel-body {
    margin-top: 12px;
}

.pdd-page .quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdd-page .quick-chip {
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--anim-fast) var(--anim-ease);
}

.pdd-page .quick-chip:active {
    transform: scale(0.96);
}

.pdd-page .quick-chip.ai-chip {
    border-color: rgba(38,132,255,0.22);
    background: rgba(38,132,255,0.08);
    color: var(--button-color);
}

.pdd-page .quick-empty {
    font-size: 13px;
    color: var(--hint-color);
}

.pdd-page .about-meta {
    color: var(--hint-color);
    font-size: 13px;
    margin-bottom: 14px;
}

.pdd-page #quickActions,
.pdd-page #aiSamples {
    margin-bottom: 14px;
}

.pdd-page #aiResult {
    white-space: normal;
    word-break: break-word;
}

.pdd-page .ai-result-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pdd-page .ai-result-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: rgba(38,132,255,0.06);
}

.pdd-page .ai-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--button-color);
    font-weight: 800;
    font-size: 13px;
}

.pdd-page .ai-result-section {
    padding: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pdd-page .ai-result-section:last-child {
    border-bottom: none;
}

.pdd-page .ai-result-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--hint-color);
    margin-bottom: 8px;
}

.pdd-page .ai-result-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-color);
}

.pdd-page .ai-result-footnote {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--hint-color);
    background: rgba(128,128,128,0.04);
}

.pdd-page .ai-hint-text {
    font-size: 11px;
    font-weight: 800;
    color: var(--button-color);
    animation: pulse 2s infinite;
    display: none;
    background: rgba(38,132,255,0.12);
    border: 1px solid rgba(38,132,255,0.18);
    padding: 4px 8px;
    border-radius: 999px;
    line-height: 1;
}

.pdd-page .pdd-search-summary {
    background: linear-gradient(135deg, rgba(38, 132, 255, 0.10), rgba(38, 132, 255, 0.04));
    border: 1px solid rgba(38, 132, 255, 0.18);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

.pdd-page .pdd-search-summary-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 4px;
}

.pdd-page .pdd-search-summary-subtitle {
    font-size: 12px;
    color: var(--hint-color);
    line-height: 1.4;
    margin-bottom: 6px;
}

.pdd-page .pdd-search-summary-meta {
    font-size: 12px;
    color: var(--hint-color);
    line-height: 1.4;
}

.pdd-page .pdd-search-summary-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pdd-page .ai-result-query {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(38, 132, 255, 0.16);
    background: rgba(38, 132, 255, 0.06);
}

.pdd-page .ai-result-query-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hint-color);
    margin-bottom: 4px;
    font-weight: 700;
}

.pdd-page .ai-result-query-text {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.45;
    font-weight: 600;
}

.pdd-page .ai-result-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pdd-page .ai-inline-action {
    border: 1px solid rgba(38, 132, 255, 0.22);
    background: rgba(38, 132, 255, 0.08);
    color: var(--button-color);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pdd-page .ai-related-list {
    display: grid;
    gap: 10px;
}

.pdd-page .ai-related-card {
    border: 1px solid rgba(38, 132, 255, 0.14);
    background: rgba(38, 132, 255, 0.05);
    border-radius: 12px;
    padding: 12px;
}

.pdd-page .ai-related-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.pdd-page .ai-related-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--button-color);
    background: rgba(38, 132, 255, 0.10);
    border: 1px solid rgba(38, 132, 255, 0.16);
    border-radius: 999px;
    padding: 5px 8px;
}

.pdd-page .ai-related-meta {
    font-size: 12px;
    color: var(--hint-color);
    font-weight: 600;
}

.pdd-page .ai-related-excerpt {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-color);
}

.pdd-page .ai-related-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pdd-page .ai-related-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--hint-color);
    line-height: 1.4;
}

.pdd-page .pdd-article.ai-related-hit {
    outline: 2px solid rgba(38, 132, 255, 0.30);
    border-radius: 10px;
    background: rgba(38, 132, 255, 0.06);
    transition: background 0.25s ease, outline-color 0.25s ease;
}

.pdd-page #examArea {
    display: none;
}

.pdd-page .exam-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 14px;
}

.pdd-page .exam-hero-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 8px;
}

.pdd-page .exam-hero-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hint-color);
}

.pdd-page .exam-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pdd-page .exam-btn-primary,
.pdd-page .exam-btn-secondary,
.pdd-page .exam-answer-option {
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--anim-fast) var(--anim-ease);
}

.pdd-page .exam-btn-primary,
.pdd-page .exam-btn-secondary {
    border: 1px solid rgba(38, 132, 255, 0.22);
    padding: 12px 14px;
}

.pdd-page .exam-btn-primary {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
}

.pdd-page .exam-btn-secondary {
    background: rgba(38, 132, 255, 0.08);
    color: var(--button-color);
}

.pdd-page .exam-btn-primary:active,
.pdd-page .exam-btn-secondary:active,
.pdd-page .exam-answer-option:active {
    transform: scale(0.985);
}

.pdd-page .exam-topbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.pdd-page .exam-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--button-color);
    background: rgba(38, 132, 255, 0.10);
    border: 1px solid rgba(38, 132, 255, 0.16);
}

.pdd-page .exam-question-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 12px;
    line-height: 1.45;
}

.pdd-page .exam-image-wrap {
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.04);
}

.pdd-page .exam-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.pdd-page .exam-answer-list {
    display: grid;
    gap: 10px;
}

.pdd-page .exam-answer-option {
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--secondary-bg);
    color: var(--text-color);
}

.pdd-page .exam-answer-option.selected {
    border-color: var(--button-color);
    background: rgba(38, 132, 255, 0.10);
    box-shadow: 0 0 0 1px rgba(38, 132, 255, 0.12);
}

.pdd-page .exam-feedback {
    margin-top: 14px;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(38, 132, 255, 0.05);
}

.pdd-page .exam-feedback-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--hint-color);
    margin-bottom: 8px;
}

.pdd-page .exam-feedback-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
}

.pdd-page .exam-result-score {
    font-size: 30px;
    font-weight: 900;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: 10px;
}

.pdd-page .exam-result-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}

.pdd-page .exam-result-state.pass {
    color: #0a7a2f;
    background: rgba(36, 179, 91, 0.12);
    border: 1px solid rgba(36, 179, 91, 0.18);
}

.pdd-page .exam-result-state.fail {
    color: #b42318;
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.18);
}

.pdd-page .exam-review-list {
    display: grid;
    gap: 12px;
}

.pdd-page .exam-review-card {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    padding: 14px;
}

.pdd-page .exam-review-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pdd-page .exam-review-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
}

.pdd-page .exam-review-status {
    font-size: 12px;
    font-weight: 800;
    color: var(--hint-color);
}

.pdd-page .exam-review-status.ok {
    color: #0a7a2f;
}

.pdd-page .exam-review-status.bad {
    color: #b42318;
}

.pdd-page .exam-review-question {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 10px;
}

.pdd-page .exam-review-answer-line {
    font-size: 13px;
    line-height: 1.45;
    color: var(--hint-color);
    margin-bottom: 6px;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
/* === /PDD PAGE === */

/* MODERN INPUTS */
.modern-input-group {
    background: var(--input-bg);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    transition: border-color var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}
.modern-input-group:focus-within {
    border-color: var(--button-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 1px rgba(38,132,255,0.1);
    transform: translateY(-1px);
}

.modern-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hint-color);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.modern-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    padding: 4px 0;
    outline: none;
    margin: 0;
}
.modern-input {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

/* ===========================
   TRANSPORT FILTERS - COMPACT
   =========================== */
#filters-transport { gap: 8px !important; margin-bottom: 8px !important; }

#filters-transport .tr-role-row,
#filters-transport .tr-fromto-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

#filters-transport .tr-fromto-row {
    align-items: stretch;
}

/* Делаем "Ищу" и "Откуда/Куда" плоскими: меньше паддинги, меньше высота */
#filters-transport .modern-input-group.tr-compact,
#filters-transport .modern-input-group.tr-flat {
    padding: 6px 10px;
    margin-bottom: 0 !important;
    border-radius: 14px;
}

#filters-transport .modern-input-group.tr-flat .modern-label,
#filters-transport .modern-input-group.tr-compact .modern-label {
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.4px;
}

/* Внутренний инпут: фиксируем высоту и убираем лишнюю "вертикаль" */
#filters-transport .modern-input-group.tr-flat .modern-input,
#filters-transport .modern-input-group.tr-compact .modern-input {
    padding: 2px 0;
    font-size: 15px;
    line-height: 20px;
}

/* Поле "Ищу" - одной строкой, без раздувания */
#filters-transport #filter-tr-query {
    height: 34px;
}

/* Откуда/Куда - максимально компактно */
#filters-transport #filter-tr-from,
#filters-transport #filter-tr-to {
    height: 34px;
}

/* Кнопки роли - “нативный сегмент”, на всю ширину */
#filters-transport .role-filter-group,
#filters-transport .tr-role-row {
    width: 100%;
}

#filters-transport .tr-role-row .role-filter {
    flex: 1;
    height: 36px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#filters-transport .tr-role-row .role-filter.active {
    background: var(--button-color);
    color: var(--button-text-color);
    border-color: transparent;
}
/* ===========================
   /TRANSPORT FILTERS - COMPACT
   =========================== */

/* GLOBAL INPUT FIXES */
input,
select,
textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    box-sizing: border-box;
}

select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
    background-color: var(--card-bg);
    color: var(--text-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--hint-color);
    opacity: 1;
}

::selection {
    background: rgba(38, 132, 255, 0.2);
    color: inherit;
}
::-moz-selection {
    background: rgba(38, 132, 255, 0.2);
    color: inherit;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color);
    box-shadow: 0 0 0px 1000px var(--card-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* AD CARD */
.card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    position: relative;
    cursor: pointer;
    animation: card-fade-in var(--anim-normal) var(--anim-ease);
}
.card:active {
    transform: scale(0.99);
    box-shadow: var(--shadow-active);
}
.card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 155px;
    background: #000;
    overflow: hidden;
}
.card-photo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
}
.card-photo-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(6px);
}
.card-body {
    padding: 10px 12px; /* [FIX] Чуть компактнее отступы */
}
.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
    /* [FIX] Ограничение в 2 строки, чтобы карточка не растягивалась */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* [NEW] Дополнительный стиль для характеристик в одну строку */
.card-specs {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--button-color);
    margin-bottom: 4px;
}
.card-meta {
    font-size: 13px;
    color: var(--hint-color);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* PROFILE STYLES */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 10px;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 3px solid var(--card-bg);
}
.profile-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
}
.profile-status {
    font-size: 13px;
    color: var(--hint-color);
}

.stats-row {
    display: flex;
    justify-content: space-around;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px 0;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.stat-item {
    text-align: center;
    flex: 1;
    border-right: 1px solid rgba(0,0,0,0.05);
}
.stat-item:last-child {
    border-right: none;
}
.stat-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--button-color);
}
.stat-lbl {
    font-size: 11px;
    color: var(--hint-color);
    margin-top: 2px;
}

.menu-list {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}

.menu-item > :nth-child(2) {
    flex: 1;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
    align-self: center;
}

.menu-item > :nth-child(2) * {
    text-align: left;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-item:active {
    background: var(--secondary-bg);
    transform: scale(0.99);
}
.menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
    color: #fff;
}
.menu-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}

/* [FIX] Profile menu: Favorites label must never be centered */
#lbl-fav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
}
.menu-arrow {
    color: #ccc;
    font-size: 14px;
    font-weight: 600;
}

.icon-blue { background: #007aff; color: #ffffff; }
.icon-green { background: #34c759; color: #ffffff; }
.icon-red { background: #ff3b30; color: #ffffff; }
.icon-gray { background: #8e8e93; color: #ffffff; }
.icon-yellow { background: #ffcc00; color: #ff3b30; }

/* BUTTONS */
.btn-main {
    background: var(--button-color);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 14px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(38, 132, 255, 0.4);
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}
.btn-main:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-active);
}

/* === BADGE: MINIMAL COUNTER (My / Deals) === */
.kh-badge-counter {
    display: inline-block;
    margin-left: 0;
    padding: 0;

    background: transparent;
    color: var(--accent-red);

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    /* Суперскрипт-эффект: цифра чуть выше и визуально "бейдж", но без кружка */
    position: relative;
    top: -5px;
}

.kh-badge-counter[data-count="0"] {
    display: none;
}

/* TABBAR */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(70px + env(safe-area-inset-bottom));
    background: var(--card-bg);
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
    backdrop-filter: blur(6px);
}
.tab-btn {
    color: var(--hint-color);
    transition: color 0.2s, transform 0.1s;
    background: none;
    border: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tab-btn:active {
    transform: scale(0.95);
}
.tab-btn.active {
    opacity: 1;
    color: var(--button-color);
}
.tab-icon {
    font-size: 24px;
    margin-bottom: 2px;
    display: block;
}
.tab-txt {
    font-size: 10px;
    font-weight: 600;
}

/* VIEWS + ANIMATION */
.view {
    /* FIX: absolute вместо fixed (Telegram WebView глючит fixed+scroll) */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    /* место под таббар */
    padding: 5px 15px calc(15px + 78px + env(safe-area-inset-bottom)) 15px;

    display: none;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity var(--anim-normal) var(--anim-ease),
                transform var(--anim-normal) var(--anim-ease);

    /* MOBILE ZOOM CANON:
       обычные view должны сохранять вертикальный скролл,
       но не блокировать нативный pinch-to-zoom страницы */
    touch-action: pan-y pinch-zoom;
}
.view.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* LOADER */
.loader {
    border: 3px solid rgba(0,0,0,0.1);
    border-top: 3px solid var(--button-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    display: none;
}

/* [UX] Detail loading overlay */
.detail-loading {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}

.detail-loading-box {
    background: var(--bg-color);
    color: var(--text-color);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    min-width: 160px;
    text-align: center;
}

.detail-loading-text {
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.7;
}

/* GALLERY */
.gallery-shell {
    background: #000;
}
.gallery-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 250px;
    background: #000;
    overflow: hidden;

    /* MOBILE ZOOM HARDENING:
       контейнер галереи не должен сам глушить нативный pinch страницы */
    touch-action: pinch-zoom;
}
.gallery-scroll {
    display: flex;
    overflow-x: auto;
    height: 100%;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* сохраняем горизонтальный свайп и разрешаем pinch */
    touch-action: pan-x pinch-zoom;
}
.gallery-scroll::-webkit-scrollbar {
    display: none;
}
.gallery-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    scroll-snap-align: center;
    background: #000;
}
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    border: none;
    z-index: 10;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    transition: background var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease),
                opacity var(--anim-fast) var(--anim-ease);
}
.gallery-nav:active {
    background: rgba(0,0,0,0.56);
    transform: translateY(-50%) scale(0.96);
}
.gallery-nav.prev {
    left: 10px;
}
.gallery-nav.next {
    right: 10px;
}
.gallery-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    backdrop-filter: blur(6px);
}
.gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg-color);

    /* горизонтальная прокрутка миниатюр + pinch */
    touch-action: pan-x pinch-zoom;
}
.gallery-thumbs::-webkit-scrollbar {
    display: none;
}
.gallery-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    padding: 0;
    cursor: pointer;
    opacity: 0.72;
    transition: transform var(--anim-fast) var(--anim-ease),
                opacity var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumb.active {
    opacity: 1;
    border-color: var(--button-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 24%, transparent);
}
.gallery-thumb:active {
    transform: scale(0.96);
}

@media (max-width: 520px) {
    .gallery-container {
        min-height: 220px;
    }

    .gallery-thumb {
        width: 52px;
        height: 52px;
        border-radius: 10px;
    }

    .gallery-nav {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
}

/* DETAIL NAVBAR */
.detail-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-color);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

/* === CENTERED NAVBAR (title centered, back on right) === */
.kh-navbar-centered {
    display: grid;
    grid-template-columns: 72px 1fr 72px; /* [FIX] увеличиваем слот, чтобы иконка не ужималась */
    align-items: center;
}

.kh-navbar-spacer {
    width: 72px;
    height: 36px;
}

.kh-navbar-title {
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#lbl-market-header.kh-navbar-title,
.kh-navbar-title#lbl-market-header {
    font-size: 18px;
    letter-spacing: -0.2px;
}

.kh-navbar-back {
    justify-self: end;

    /* [FIX] реальная широкая кнопка + правильный layout для img */
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;
    min-width: 72px;
    height: 36px;

    padding: 4px 10px;
    border-radius: 12px;

    /* важное: не даём кнопке “схлопнуться” */
    flex: 0 0 auto;
}

/* [GLOBAL] Navbar safe offset when language switcher is moved into current view (app.js) */
.kh-navbar-lang-safe {
    /* резервируем место слева под .kh-lang-switcher (QZ/RU/EN), чтобы заголовок был визуально по центру */
    padding-left: 120px;
}

@media (max-width: 420px) {
    .kh-navbar-lang-safe {
        padding-left: 110px;
    }
}

/* Navbar specifically for detail view - must be above gallery and content */
.detail-navbar--detail {
    z-index: 2601;
}

/* DETAIL CONTENT (below sticky navbar) */
.detail-content {
    position: relative;
    z-index: 1;

    /* FIX mobile: не даём контенту залезать под navbar */
    padding-top: 6px;
}

.btn-back {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform var(--anim-fast) var(--anim-ease);
}
.btn-back img {
    height: 28px;
    width: auto;
}
.btn-back .kh-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    color: var(--text-color);
}
.btn-back:active {
    transform: scale(0.96);
    color: #1b63c0;
}


/* LIGHTBOX */
.lightbox {
    display: none;
    position: fixed;
    z-index: 3000;
    inset: 0;
    background: rgba(0,0,0,0.98);
    flex-direction: column;
}
.lightbox.active {
    display: flex;
}
.lightbox-scroll-area {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    padding: 56px 12px 72px;
}
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    will-change: transform;
}
.lightbox-img.zoomed {
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    background: rgba(0,0,0,0.5);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    z-index: 3005;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    backdrop-filter: blur(8px);
    transition: background var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}
.lightbox-close:active {
    background: rgba(0,0,0,0.7);
    transform: scale(0.95);
}
.lightbox-counter {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    left: 12px;
    z-index: 3005;
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

/* LIGHTBOX NAV (scoped, keyboard-friendly) */
#lightbox .prev,
#lightbox .next,
#lightbox .lightbox-prev,
#lightbox .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    color: #fff;
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    z-index: 3005;
    background: rgba(0,0,0,0.30);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease),
                opacity var(--anim-fast) var(--anim-ease);
}

#lightbox .next,
#lightbox .lightbox-next { right: 10px; }
#lightbox .prev,
#lightbox .lightbox-prev { left: 10px; }

#lightbox .prev:active,
#lightbox .next:active,
#lightbox .lightbox-prev:active,
#lightbox .lightbox-next:active {
    background: rgba(0,0,0,0.45);
    transform: translateY(-50%) scale(0.96);
}

#lightbox .prev:focus,
#lightbox .next:focus,
#lightbox .lightbox-prev:focus,
#lightbox .lightbox-next:focus,
#lightbox .prev:focus-visible,
#lightbox .next:focus-visible,
#lightbox .lightbox-prev:focus-visible,
#lightbox .lightbox-next:focus-visible {
    outline: 2px solid rgba(255,255,255,0.75);
    outline-offset: 2px;
    background: rgba(0,0,0,0.45);
}

@media (max-width: 520px) {
    #lightbox .prev,
    #lightbox .next,
    #lightbox .lightbox-prev,
    #lightbox .lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .lightbox-scroll-area {
        padding: 56px 8px 64px;
    }

    .lightbox-counter {
        top: max(12px, env(safe-area-inset-top));
        left: 10px;
    }
}

.seller-block {
    margin-top: 15px;
    padding: 10px;
    background: var(--secondary-bg);
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}
.seller-block:active {
    background: rgba(0,0,0,0.06);
    transform: scale(0.98);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* === DETAIL (mobile-first, no inline layout) === */
.detail-body{
    padding: 16px 15px 10px;
}

/* Top row: price + fav */
.det-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.det-price{
    margin:0;
    color: var(--button-color);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.2px;
}

.det-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.det-icon-btn{
    background:none;
    border:none;
    padding: 0;
    min-width: 28px;
    min-height: 28px;
    font-size: 24px;
    line-height: 1;
    cursor:pointer;
    transform: translateY(1px);
    transition:
        transform var(--anim-fast) var(--anim-ease),
        opacity var(--anim-fast) var(--anim-ease),
        filter var(--anim-fast) var(--anim-ease);
}

.det-icon-btn:active{
    transform: translateY(1px) scale(0.96);
}

.det-complaint-btn{
    opacity: 0.94;
}

.det-complaint-btn:hover,
.det-complaint-btn:focus-visible{
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(229,57,53,0.22));
}

.det-share-btn{
    opacity: 0.92;
}

.det-share-btn:hover,
.det-share-btn:focus-visible{
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(38,132,255,0.18));
}

.det-fav-btn{
    opacity: 1;
}

/* Title */
.det-title{
    margin: 0 0 14px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.1px;
}

/* Specs chips container (app.js renders chips inside) */
.det-specs{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-bottom: 18px;
}

/* Seller block tuning for detail */
.seller-block--detail{
    justify-content: space-between;
}
.seller-left{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
}
.seller-ico{
    font-size: 20px;
    line-height: 1;
}
.seller-name{
    font-weight: 600;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seller-arrow{
    opacity: 0.5;
    font-size: 18px;
    line-height: 1;
}

/* Sections */
.det-section{
    margin-top: 18px;
}
.det-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.det-section-title{
    margin: 0;
    opacity: 0.75;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.det-translate-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(38,132,255,0.18);
    background: color-mix(in srgb, var(--secondary-bg) 82%, transparent);
    color: var(--button-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.det-translate-btn:disabled{
    opacity: 0.65;
    cursor: default;
}

/* Description */
.det-desc {
    display: block;
    width: 100%;
    min-height: 24px;
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    position: relative;
    z-index: 1;
}
.det-desc-translation-wrap{
    margin-top: -6px;
    margin-bottom: 22px;
    padding: 10px 12px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondary-bg) 88%, transparent);
    border: 1px solid rgba(38,132,255,0.10);
}
.det-desc-translation-label{
    margin-bottom: 6px;
    color: var(--hint-color);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.det-desc--translated{
    margin: 0;
}

.det-spec-groups{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 20px 0;
}

.det-spec-group{
    background: color-mix(in srgb, var(--secondary-bg) 86%, transparent);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.det-spec-group-title{
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hint-color);
}

.det-spec-group-body{
    display: grid;
    gap: 8px;
}

.det-spec-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    align-items: start;
}

.det-spec-label{
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--hint-color);
    padding-top: 1px;
}

.det-spec-value{
    min-width: 0;
    width: fit-content;
    max-width: clamp(148px, 52vw, 280px);
    text-align: right;
    justify-self: end;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-color);
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

@media (min-width: 720px){
    .det-spec-groups{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 340px){
    .det-spec-row{
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .det-spec-value{
        width: 100%;
        max-width: 100%;
        text-align: left;
        justify-self: start;
    }
}

/* Meta (city + id) */
.det-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-top: 16px;
    color: var(--hint-color);
    font-size: 13px;
    line-height: 1.35;
}
.det-meta-city,
.det-meta-id{
    min-width: 0;
}
.det-meta-city{
    flex: 1 1 auto;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.det-meta-id{
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}

/* spacer at end so content doesn't look glued */
.det-spacer{
    display:block;
    width:100%;
    height: 1px;
}

/* Controls container (bottom bar buttons) */
.det-controls{
    display:flex;
    gap: 10px;
    align-items: stretch;
}

.det-vip-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    margin: 0 0 14px 0;
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    border: 1px solid rgba(255,165,0,0.35);
    color: var(--text-color);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transform-origin: center center;
    will-change: transform;
}

.det-vip-strip.vip-gold {
    border-color: rgba(212,175,55,0.42);
    box-shadow: 0 0 0 1px rgba(212,175,55,0.12), 0 0 16px rgba(212,175,55,0.10);
}

.det-vip-strip.vip-red {
    border-color: rgba(38,166,91,0.42);
    box-shadow: 0 0 0 1px rgba(38,166,91,0.12), 0 0 16px rgba(38,166,91,0.10);
}

.det-vip-strip.vip-blue {
    border-color: rgba(33,150,243,0.42);
    box-shadow: 0 0 0 1px rgba(33,150,243,0.12), 0 0 16px rgba(33,150,243,0.10);
}

.det-vip-strip:active{
    transform: scale(0.985);
}

.det-vip-days{
    opacity: 0.7;
    font-weight: 600;
    font-size: 12px;
}

@keyframes kh-ads-strip-spin-reverse-3x {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-1080deg);
    }
}

.det-vip-strip.ads-strip-spin-reverse-3x{
    animation: kh-ads-strip-spin-reverse-3x 1.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-chip--action{
    cursor: pointer;
    user-select: none;
    padding: 0;
    background: color-mix(in srgb, var(--secondary-bg) 82%, var(--button-color) 18%);
    border: 1px dashed color-mix(in srgb, var(--button-color) 44%, transparent);
    font-weight: 700;
    transition:
        transform var(--anim-fast) var(--anim-ease),
        border-color var(--anim-fast) var(--anim-ease),
        background var(--anim-fast) var(--anim-ease);
}

.service-chip--action:active{
    transform: scale(0.97);
}

.service-chip-action-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 2px;
    width:100%;
    min-height:36px;
    padding: 6px 2px;
}

.service-chip-action-emoji{
    font-size: 13px;
    line-height: 1;
}

.service-chip-action-text{
    font-size: 10px;
    line-height: 1.1;
}

/* Desktop-ish enhancements */
@media (min-width: 520px){
    .detail-body{ padding: 18px 18px 12px; }
    .det-price{ font-size: 26px; }
    .det-title{ font-size: 22px; }
    .det-head-actions{ gap: 12px; }
}

/* SERVICE GRID */
.services-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    grid-auto-rows: 1fr;
    align-items: stretch;
}
.services-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-bottom: 10px;
    grid-auto-rows: 1fr;
    align-items: stretch;
}
.service-chip {
    background: color-mix(in srgb, var(--secondary-bg) 90%, transparent);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 8px 6px;
    font-size: 10.5px;
    text-align: center;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.16;
    min-height: 42px;
    width: 100%;
    height: 100%;
    font-weight: 700;
    word-break: break-word;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* VIP CARD STYLES */
.card.vip {
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-bottom: 6px solid #ffffff;
    background: linear-gradient(135deg, #fff9c4 0%, #ffffff 100%);
    position: relative;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    transform: scale(1.02);
    z-index: 2;
}
.dark-mode .card.vip {
    background: linear-gradient(135deg, #2c2c2c 0%, #3d3500 100%);
    border-color: rgba(255, 215, 0, 0.3);
    border-bottom: 6px solid #ffffff;
    color: #fff;
}
.vip-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 215, 0, 0.92);
    color: #161616;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.card.vip-gold .vip-label {
    background: rgba(255, 215, 0, 0.94);
    color: #161616;
}

.card.vip-red .vip-label {
    background: rgba(38, 166, 91, 0.92);
    color: #f7fff9;
}

.card.vip-blue .vip-label {
    background: rgba(33, 150, 243, 0.92);
    color: #f7fbff;
}

@media (max-width: 520px) {
    .vip-label {
        top: 8px;
        right: 8px;
        padding: 1px 7px;
        font-size: 10px;
        border-radius: 7px;
    }
}

/* SKELETON LOADER */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 8px;
    background-size: 200% 100%;
    animation: 1.5s skeleton-shine linear infinite;
}
.dark-mode .skeleton {
    background: #333;
    background: linear-gradient(110deg, #333 8%, #444 18%, #333 33%);
    background-size: 200% 100%;
}
@keyframes skeleton-shine {
    to { background-position-x: -200%; }
}
.skeleton-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    padding: 0;
}
.skeleton-img { width: 100%; height: 180px; }
.skeleton-content { padding: 12px 15px; }
.skeleton-line { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-title { height: 22px; width: 70%; margin-bottom: 10px; border-radius: 6px; }
.skeleton-price { height: 26px; width: 40%; margin-bottom: 10px; border-radius: 6px; }

/* OWNER PANEL */
.owner-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px; /* FIX: чтобы не слипалось с текстом/описанием */
}
.owner-btn {
    background: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    height: 54px;
}
.owner-btn:active { transform: scale(0.95); background: rgba(0,0,0,0.05); }
.owner-btn.danger { color: #e53935; background: rgba(229, 57, 53, 0.05); }
.owner-btn.success { color: #2e7d32; background: rgba(46, 125, 50, 0.05); }

/* ANALYTICS STATS */
.owner-stats {
    display: flex;
    justify-content: space-between;
    background: var(--input-bg);
    border-radius: 12px;
    padding: 12px 15px;
    margin: 12px 0 15px;
}
.os-item { text-align: center; flex: 1; }
.os-val { font-size: 16px; font-weight: 700; color: var(--text-color); }
.os-lbl { font-size: 10px; color: var(--hint-color); text-transform: uppercase; margin-top: 2px; }

/* VIP PROMO */
.vip-banner {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    color: #000;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.vip-btn-sm {
    background: #000;
    color: #FFD700;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
}

/* SUBSCRIPTIONS LIST */
.sub-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sub-info { flex: 1; }
.sub-query { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.sub-date { font-size: 12px; color: var(--hint-color); }
.sub-del {
    padding: 8px 12px;
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
    border-radius: 8px;
    border: none;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
}

/* SERVICES GRID */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px;
}
.srv-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.1s;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}
.srv-card:active { transform: scale(0.97); }
.srv-icon { font-size: 32px; margin-bottom: 10px; }
.srv-title { font-size: 14px; font-weight: 600; line-height: 1.2; }

/* CALCULATORS */
.calc-box {
    background: var(--secondary-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 10px;
    display: none;
}
.calc-box.active { display: block; animation: card-fade-in 0.3s ease; }

/* [UX] Результат калькулятора всегда контрастный относительно текущей темы */
.calc-res {
    font-size: 18px;
    font-weight: 800;
    margin-top: 10px;

    /* Канон: результат = основной текст темы (контраст гарантирован темой) */
    color: var(--text-color);
    letter-spacing: 0.2px;

    /* Лёгкая читабельность на тёмных фонах */
    text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

.dark-mode .calc-res,
body.kh-theme-ethno .calc-res {
    text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* Пояснения (ℹ️ ...) - приглушённый цвет, но всё ещё контрастный */
.calc-res span {
    display: block;
    margin-top: 6px;
    line-height: 1.35;

    /* Перебиваем инлайн opacity из JS */
    opacity: 1 !important;

    /* Делаем подсказку мягче, чем основной текст, но читаемой */
    color: color-mix(in srgb, var(--text-color) 72%, transparent) !important;

    font-size: 12px !important;
    font-weight: 650;
}

/* [UX] Ссылка "Источник" должна быть контрастной и красивой в обеих темах */
.calc-res a,
.calc-res a:visited {
    color: color-mix(in srgb, var(--text-color) 25%, var(--button-color) 75%) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 750;
}

.dark-mode .calc-res a,
.dark-mode .calc-res a:visited,
body.kh-theme-ethno .calc-res a,
body.kh-theme-ethno .calc-res a:visited {
    color: color-mix(in srgb, var(--text-color) 15%, #66b3ff 85%) !important;
}

/* Hover/active - чуть ярче, но без "кислоты" */
.calc-res a:hover,
.calc-res a:active {
    filter: brightness(1.12);
}

/* На всякий: bold/strong наследуют цвет результата */
.calc-res b,
.calc-res strong {
    color: inherit;
}

.links-list {
    background: var(--card-bg);
    border-radius: 12px;
    margin: 10px;
    overflow: hidden;
}
.link-item {
    padding: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.link-item:last-child { border-bottom: none; }
.link-item:active { background: rgba(0,0,0,0.05); }

/* === TAX CALCULATOR RESULT (THEME-AWARE) === */
.tax-result {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.45;
}

/* Тёмная тема */
body.dark .tax-result,
body[data-theme="dark"] .tax-result {
    color: #ffffff;
}

/* Светлая тема */
body.light .tax-result,
body[data-theme="light"] .tax-result {
    color: #000000;
}

/* Пояснения (ℹ️ …) — чуть приглушённые, но читаемые */
.tax-result span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.8;
}

/* ===== ABOUT ===== */
.about-wrap{
  padding: 0 15px 90px 15px;
}
.about-block{
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.14);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.about-h{
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 14px;
  opacity: 0.95;
}
.about-p{
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.9;
  white-space: pre-wrap;
}
.about-ul{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.92;
}

.about-intro{
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.14);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.92;
  white-space: pre-wrap;
}

.about-accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-acc-item{
  background: rgba(128,128,128,0.08);
  border: 1px solid rgba(128,128,128,0.14);
  border-radius: 16px;
  overflow: hidden;
}

.about-acc-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-color);
  padding: 14px;
  font-weight: 800;
  font-size: 14px;
  text-align:left;
}

.about-acc-btn:active{
  background: rgba(255,255,255,0.06);
}

.about-acc-title{
  display:block;
  flex: 1;
}

.about-acc-icon{
  opacity: 0.7;
  transition: transform 160ms ease;
  font-size: 14px;
  line-height: 1;
}

.about-acc-item.open .about-acc-icon{
  transform: rotate(180deg);
}

.about-acc-panel{
  display:none;
  padding: 0 14px 14px 14px;
}

.about-acc-item.open .about-acc-panel{
  display:block;
}

.about-acc-panel .about-p{
  margin-top: 8px;
}

.about-ol{
  margin: 8px 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.92;
}

.about-acc-panel .about-ul{
  margin-top: 8px;
  line-height: 1.35;
}
.donate-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 10px;
}
.donate-card{
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(128,128,128,0.14);
  border-radius: 14px;
  padding: 12px;
}
.donate-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.donate-title{
  font-weight: 750;
  font-size: 13px;
}
.donate-num{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  opacity: 0.9;
  word-break: break-all;
}
.donate-meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}
.donate-actions{
  margin-top: 10px;
  display:flex;
  gap:8px;
}
.donate-btn{
  flex:1;
  border:none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 750;
  cursor: pointer;
  background: rgba(128,128,128,0.18);
  color: var(--text-color);
}
.donate-btn.primary{
  background: var(--button-color);
  color: #fff;
}
/* ===== /ABOUT ===== */

/* === VIP CONFIGURATOR === */
.vip-modal {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-color);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    z-index: 4000;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; flex-direction: column; gap: 15px;
    max-height: 80vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* MOBILE ZOOM HARDENING:
       ADS/VIP configurator не должен становиться зоной, где pinch пропадает */
    touch-action: pan-y pinch-zoom;
}
.vip-modal.active { transform: translateY(0); }

.vip-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 3999;
    display: none; opacity: 0; transition: opacity 0.3s;

    /* backdrop тоже не должен глушить естественный zoom */
    touch-action: pinch-zoom;
}
.vip-overlay.active { display: block; opacity: 1; }

.vip-section-title { font-size: 13px; font-weight: 600; color: var(--hint-color); text-transform: uppercase; margin-bottom: 8px; }

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

.vip-tag-opt {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: var(--text-color);
}

.vip-tag-opt.active {
    background: var(--button-color);
    color: #fff;
    border-color: var(--button-color);
    box-shadow: 0 4px 10px rgba(38,132,255,0.3);
}

@media (max-width: 380px) {
    .vip-tag-opt {
        font-size: 12px;
        padding: 8px 8px;
    }
}

.vip-style-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.vip-style-opt {
    height: 60px; border-radius: 12px; border: 2px solid transparent;
    cursor: pointer; position: relative; overflow: hidden;
    background: #f0f0f0;
}
.vip-style-opt.active { border-color: var(--button-color); transform: scale(0.95); }

/* PREVIEWS MINIATURES */
.vs-gold { background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(255,255,255,0.02)); border-bottom: 4px solid transparent; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.42), inset 0 0 10px rgba(212,175,55,0.22); }
.vs-red  { background: linear-gradient(135deg, rgba(38,166,91,0.22), rgba(255,255,255,0.02)); border-bottom: 4px solid transparent; box-shadow: inset 0 0 0 1px rgba(38,166,91,0.42), inset 0 0 10px rgba(38,166,91,0.22); }
.vs-blue { background: linear-gradient(135deg, rgba(33,150,243,0.22), rgba(255,255,255,0.02)); border-bottom: 4px solid transparent; box-shadow: inset 0 0 0 1px rgba(33,150,243,0.42), inset 0 0 10px rgba(33,150,243,0.22); }

/* === REAL VIP STYLES (RENDER) === */
.card.vip-gold,
.card.vip-red,
.card.vip-blue {
    transform: scale(1.02);
    z-index: 2;
    padding-bottom: 0;
    position: relative;
    background: var(--card-bg);
    color: var(--text-color);
}

.card.vip-gold {
    border: 1px solid rgba(212, 175, 55, 0.62);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.18),
        0 0 18px rgba(212, 175, 55, 0.14);
}

.card.vip-red {
    border: 1px solid rgba(38, 166, 91, 0.58);
    box-shadow:
        0 0 0 1px rgba(38, 166, 91, 0.18),
        0 0 18px rgba(38, 166, 91, 0.14);
}

.card.vip-blue {
    border: 1px solid rgba(33, 150, 243, 0.58);
    box-shadow:
        0 0 0 1px rgba(33, 150, 243, 0.18),
        0 0 18px rgba(33, 150, 243, 0.14);
}

.card.vip-gold .card-price,
.card.vip-red .card-price,
.card.vip-blue .card-price {
    font-weight: 900;
    opacity: 1;
    color: var(--button-color);
}

.card.vip-gold .card-title,
.card.vip-red .card-title,
.card.vip-blue .card-title {
    font-weight: 700;
    opacity: 1;
    color: var(--text-color);
}

.card.vip-gold .card-specs,
.card.vip-red .card-specs,
.card.vip-blue .card-specs,
.card.vip-gold .card-meta,
.card.vip-red .card-meta,
.card.vip-blue .card-meta {
    opacity: 1;
    color: var(--hint-color);
}

.card.vip-gold .vip-footer { color: #d4af37; border-top: 1px solid rgba(212,175,55,0.20); }
.card.vip-red .vip-footer { color: #2aa85f; border-top: 1px solid rgba(38,166,91,0.20); }
.card.vip-blue .vip-footer { color: #1976d2; border-top: 1px solid rgba(33,150,243,0.20); }

body.kh-theme-vision .card.vip-gold,
body.kh-theme-vision .card.vip-red,
body.kh-theme-vision .card.vip-blue {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.kh-theme-vision .card.vip-gold .card-price,
body.kh-theme-vision .card.vip-red .card-price,
body.kh-theme-vision .card.vip-blue .card-price {
    color: var(--accent-color) !important;
}

body.kh-theme-vision .card.vip-gold .card-title,
body.kh-theme-vision .card.vip-red .card-title,
body.kh-theme-vision .card.vip-blue .card-title {
    color: var(--text-color) !important;
}

body.kh-theme-vision .card.vip-gold .card-specs,
body.kh-theme-vision .card.vip-red .card-specs,
body.kh-theme-vision .card.vip-blue .card-specs,
body.kh-theme-vision .card.vip-gold .card-meta,
body.kh-theme-vision .card.vip-red .card-meta,
body.kh-theme-vision .card.vip-blue .card-meta {
    color: var(--hint-color) !important;
}

.vip-footer {
    background: transparent;
    text-align: center; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 6px 0; width: 100%; margin-top: 5px;
}

/* Universal modal overlay (used by complaint modal) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* backdrop не должен глушить естественный zoom */
    touch-action: pinch-zoom;
}

.modal-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: var(--bg-color);
    border-radius: 18px;
    padding: 14px 14px 12px 14px;
    z-index: 9999;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);

    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* complaint / verify / sheet-like modals должны оставаться pinch-friendly */
    touch-action: pan-y pinch-zoom;
}

/* === [A3] Phone verification modal (verify-modal) === */
.kh-verify-overlay {
    display: none;           /* JS sets display:flex */
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.kh-verify-sheet {
    max-width: 520px;
    width: calc(100% - 24px);
}

.kh-verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px 10px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kh-verify-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
}

.kh-verify-body {
    padding: 12px 2px 6px 2px;
}

.kh-verify-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.35;
    margin-bottom: 6px;
}

.kh-verify-sub {
    font-size: 13px;
    color: var(--hint-color);
    line-height: 1.35;
    margin-bottom: 12px;
}

.kh-verify-btn {
    width: 100%;
}


/* === Universal Bottom Sheet (kh) === */
body.kh-sheet-open {
    overflow: hidden;
}

.kh-sheet {
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
}

.kh-sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    margin: 0 auto 10px auto;
}

.kh-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 2px 10px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kh-sheet-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-sheet-close {
    appearance: none;
    border: none;
    background: rgba(255,255,255,0.08);
    color: var(--text-color);
    border-radius: 10px;
    width: 36px;
    height: 34px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.kh-sheet-body {
    padding: 12px 2px 12px 2px;
    overflow: auto;
}

.kh-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 2px 2px 2px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.kh-sheet-btn {
    appearance: none;
    border: none;
    border-radius: 14px;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.kh-sheet-btn-primary {
    background: var(--button-color);
    color: #fff;
}

.kh-sheet-btn-secondary {
    background: rgba(255,255,255,0.10);
    color: var(--text-color);
    border: 1px solid rgba(255,255,255,0.12);
}

.kh-sheet-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.10);
}

.kh-sheet-k {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 700;
}

.kh-sheet-v {
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    color: var(--text-color);
    max-width: 68%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-sheet-block {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.kh-sheet-block-title {
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    opacity: 0.85;
}

.kh-sheet-block-text {
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==========================
   [DEALS][V2] Aliases for transport.js deal history block
   ========================== */
.kh-sheet-box {
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.kh-sheet-box-title {
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    opacity: 0.85;
}

.kh-sheet-box-text {
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.kh-sheet-link {
    margin-top: 10px;
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    opacity: 0.95;
    cursor: pointer;
    text-decoration: underline;
}

/* [DEALS][V2] Deal history (rendered inside each deal item) */
.kh-deal-history-title {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 900;
    opacity: 0.85;
}

.kh-deal-history-empty {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
}

.kh-deal-history {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kh-deal-history-row {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kh-deal-history-time {
    font-size: 11px;
    opacity: 0.65;
}

.kh-deal-history-text {
    font-size: 12px;
    line-height: 1.25;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Transport Details: top-right icon actions (Variant A1) --- */
.kh-sheet-top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.kh-icon-act {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.10);
    color: var(--text-color);
    width: 40px;
    height: 36px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 1px 0 rgba(0,0,0,0.08);
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.kh-icon-act:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
}

.kh-icon-act:active {
    transform: scale(0.96);
}

.kh-icon-danger {
    border-color: rgba(255, 80, 80, 0.30);
    background: rgba(255, 80, 80, 0.10);
}

.kh-icon-danger:hover {
    background: rgba(255, 80, 80, 0.14);
    border-color: rgba(255, 80, 80, 0.38);
}

/* While translating: button "pressed" and stays */
.kh-sheet-body .kh-icon-translate[aria-disabled="true"],
.kh-sheet-body .kh-icon-translate.is-busy {
    transform: scale(0.94);
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
}

.kh-sheet-subtitle {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 900;
    opacity: 0.75;
}

.kh-share-grid {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kh-share-btn {
    /* Канон: 1 колонка везде, чтобы текст всегда читался (как в мобильной версии) */
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;

    padding: 10px 12px;
    border-radius: 14px;

    /* Канон: одинаково контрастно в тёмной и дневной теме Telegram */
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text-color) 10%, transparent),
        0 1px 0 rgba(0,0,0,0.08);

    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    user-select: none;

    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    line-height: 1.2;

    /* Текст кнопки наследуем от темы */
    color: var(--text-color);
}

.kh-share-btn:hover {
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 22%, transparent);
}

.kh-share-btn:active {
    transform: scale(0.99);
}

.kh-share-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-color) 35%, transparent);
    outline-offset: 2px;
}

/* Share sheet: делаем кнопки ещё “плотнее” */
.kh-share-btn-solid {
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 26%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text-color) 12%, transparent),
        0 1px 0 rgba(0,0,0,0.10);
}

.kh-share-btn-solid:hover {
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 34%, transparent);
}

.kh-share-btn-solid:focus-visible {
    outline-color: color-mix(in srgb, var(--text-color) 45%, transparent);
}

.kh-share-emoji {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    margin-top: 1px;

    /* Канон: emoji под цвет темы */
    color: var(--text-color);
}

.kh-share-label {
    flex: 1 1 auto;
    display: block;

    /* Канон: текст под цвет темы */
    color: var(--text-color);

    /* Канон: не режем текст на десктопе */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.kh-sheet-danger {
    color: #ff6b6b;
}

.modal-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0,0,0,0.15);
    margin: 4px auto 12px auto;
}

.det-vip-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    margin: 0 0 14px 0;
    background: linear-gradient(90deg, rgba(255,215,0,0.18), rgba(255,165,0,0.12));
    border: 1px solid rgba(255,165,0,0.35);
    color: var(--text-color);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.det-vip-days{
    opacity: 0.7;
    font-weight: 600;
    font-size: 12px;
}

/* === My Ads: Quick actions in card === */
.card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.card-act {
    flex: 1 1 auto;
    min-width: 90px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--secondary-bg);
    color: var(--text-color);
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.card-act:active {
    transform: scale(0.98);
}

.card-act.danger {
    border-color: rgba(255, 0, 0, 0.25);
    color: #b00020;
}

/* ===== DETAIL VIEW: FINAL LAYOUT (SCROLL OK + NO CLIPPING) ===== */

/* Деталка — flex-экран:
   - .detail-scroll скроллится
   - #detail-bottom-bar НЕ перекрывает контент */
#view-detail {
    display: none;

    /* FIX: как и остальные .view — absolute (Telegram WebView часто ломает fixed+scroll) */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2000;
    background: var(--bg-color);

    /* важно: убираем паддинги .view */
    padding: 0 !important;

    /* контейнер НЕ скроллится */
    overflow: hidden;

    /* КЛЮЧ: позволяем flex-детям реально ужиматься -> иначе overflow:auto не работает */
    min-height: 0;
}

#view-detail.active {
    display: flex;
    flex-direction: column;

    /* КЛЮЧ: на активном состоянии тоже фиксируем min-height */
    min-height: 0;
}

/* скрываем таббар, когда открыта деталка */
#view-detail.active ~ .tabbar {
    display: none;
}

#view-detail .detail-scroll {
    flex: 1 1 auto;

    /* КЛЮЧ: без этого в flex-колонке скролл часто "умирает" */
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;

    /* MOBILE ZOOM CANON:
       деталка должна сохранять естественный вертикальный скролл
       и одновременно пропускать нативный pinch-to-zoom страницы */
    touch-action: pan-y pinch-zoom;

    /* FIX: чтобы контент не уезжал/не "обрезался" под sticky-navbar */
    scroll-padding-top: 64px;
}

/* нижняя панель — обычный нижний блок, НЕ fixed */
#detail-bottom-bar {
    flex: 0 0 auto;
    position: relative;
    z-index: 2500;
    background: var(--bg-color);

    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,0,0,0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    min-height: 64px;
}

/* чтобы кнопки не “пропадали”/не ужимались (особенно на Desktop) */
#public-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
}
#public-controls > * {
    flex: 1 1 140px;
    min-height: 44px;
}

/* чтобы последняя строка описания не липла к панели */
#view-detail .detail-body {
    padding-bottom: 18px;
}
/* ===== END DETAIL VIEW ===== */

/* --- MODULE: TRANSPORT --- */
.transport-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.1s;
}

/* === DEAL STATUS BADGES (Transport) === */
.kh-deal-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 8px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Запрошена */
.kh-deal-status--requested {
    background: rgba(33, 150, 243, 0.12);
    color: #1565c0;
}

/* На рассмотрении */
.kh-deal-status--pending {
    background: rgba(255, 193, 7, 0.16);
    color: #ff8f00;
}

/* Принята */
.kh-deal-status--accepted {
    background: rgba(76, 175, 80, 0.16);
    color: #2e7d32;
}

/* Отменена */
.kh-deal-status--cancelled {
    background: rgba(229, 57, 53, 0.16);
    color: #c62828;
}
.transport-card:active {
    transform: scale(0.98);
}

/* Header: Badge + Date */
.tr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.transport-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.badge-driver { 
    background: #e3f2fd; color: #1565c0; /* Blue */
}
.badge-passenger { 
    background: #fff3e0; color: #ef6c00; /* Orange */
}
.tr-date {
    font-size: 12px;
    color: var(--hint-color);
    font-weight: 500;
}

/* Route: Big bold text */
.transport-route {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.city-arrow {
    color: var(--button-color);
    font-size: 20px;
}

/* Footer: Type + Price */
.transport-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 10px;
}
.tr-type {
    font-size: 13px;
    color: var(--hint-color);
}
.tr-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--button-color);
}

/* Form Styles */
.transport-form-wrapper {
    background-color: var(--bg-color);
}
.role-btn {
    flex: 1; padding: 12px;
    border: 1px solid rgba(0,0,0,0.1); 
    background: var(--card-bg); 
    border-radius: 12px;
    font-weight: 600; 
    color: var(--text-color); 
    cursor: pointer; 
    transition: 0.2s;
}
.role-btn.active {
    background: var(--button-color); 
    color: #fff; 
    border-color: var(--button-color);
    box-shadow: 0 4px 10px rgba(38,132,255,0.3);
}

/* --- TRANSPORT MODULE REDESIGN --- */

/* 1. Контейнер фильтров */
#filters-transport {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* 2. Segmented Control (Роль) */
.tr-role-segment {
    display: flex;
    background: var(--secondary-bg);
    padding: 3px;
    border-radius: 10px;
    height: 38px;
    width: 100%;
}

.tr-role-segment .role-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hint-color);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tr-role-segment .role-btn.active {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: 600;
}

/* 3. Строка маршрута (Откуда -> Куда) */
.tr-route-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tr-route-input {
    flex: 1;
    height: 36px;
    background: var(--input-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.tr-route-input:focus {
    border-color: var(--button-color);
    background: var(--card-bg);
}

/* --- TRANSPORT AUTOCOMPLETE (Cities) --- */
.kh-ac-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.kh-ac-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1200;
    background: var(--card-bg);
    border: 1px solid rgba(128,128,128,0.25);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    overflow: hidden;
    max-height: 240px;
    display: none;
}

.kh-ac-list.show {
    display: block;
}

.kh-ac-item {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    user-select: none;
    color: var(--text-color);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kh-ac-item:hover {
    background: rgba(128,128,128,0.12);
}

.kh-ac-muted {
    font-size: 12px;
    opacity: 0.7;
    color: var(--hint-color);
}

.kh-ac-divider {
    height: 1px;
    background: rgba(128,128,128,0.18);
    margin: 2px 0;
}

.kh-ac-manual {
    font-weight: 600;
}

.tr-route-arrow {
    font-size: 16px;
    color: var(--hint-color);
    opacity: 0.6;
}

/* 4. Кнопка-поплавок "Новые поездки" */
#tr-new-badge {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

#tr-new-badge.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* === RULES OVERLAY === */
.rules-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Очень темный фон */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}
.rules-card {
    background: var(--bg-color);
    width: 92%;
    max-width: 420px;
    max-height: 82vh;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rules-card h2 { margin-top: 0; margin-bottom: 12px; }
.rules-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    margin-bottom: 14px;

    /* MOBILE ZOOM HARDENING:
       long-form rules/consent контент должен оставаться pinch-friendly */
    touch-action: pan-y pinch-zoom;
}
.rules-content p { font-size: 15px; color: var(--text-color); line-height: 1.4; }
.rules-link {
    color: var(--button-color);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px dashed;
}


/* === TRANSPORT CONNECT (A2/A3 Gate Overlay) === */
.tr-connect-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    padding: 18px;

    /* A2/A3 gate overlay не должен убивать pinch */
    touch-action: pinch-zoom;
}

.tr-connect-card{
    width: 100%;
    max-width: 420px;
    background: var(--bg-color);
    border-radius: 22px;
    box-shadow: 0 14px 60px rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;

    max-height: calc(100vh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.tr-connect-header{
    padding: 18px 18px 0 18px;
}

.tr-connect-title{
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    margin: 0;
    color: var(--text-color);
}

.tr-connect-body{
    padding: 14px 18px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* длинный текст / gating-card должен сохранять естественный zoom */
    touch-action: pan-y pinch-zoom;
}

.tr-connect-text{
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: center;
    margin: 10px 0 14px 0;
}

.tr-connect-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-connect-overlay .btn-secondary{
    opacity: 0.9;
}

/* --- Transport UI (Modern) --- */
.transport-tabs-wrapper {
    display: flex;
    gap: 8px;
    padding: 4px 4px 8px 4px; /* меньше воздуха снизу */
    margin-bottom: 2px;
    overflow-x: hidden; /* без горизонтального скролла */
}
.transport-tabs-wrapper::-webkit-scrollbar { 
    display: none; /* на всякий */
}

.tr-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px; /* Более круглые */
    cursor: pointer;
    min-width: 72px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    position: relative;
}

.tr-tab:active {
    transform: scale(0.95);
}

.tr-tab.active {
    background: var(--button-color);
    border-color: var(--button-color);
    color: #fff;
    box-shadow: 0 6px 15px rgba(38, 132, 255, 0.35); /* Красивое свечение */
    transform: translateY(-2px);
}

.tr-tab-icon { 
    font-size: 24px; 
    margin-bottom: 4px; 
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.tr-tab-name { 
    font-size: 11px; 
    font-weight: 600; 
    letter-spacing: 0.3px;
}


/* Transport: Help button in header */
.tr-help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    min-width: 34px;
    min-height: 28px;
    border-radius: 12px;
    background: rgba(128,128,128,0.10);
    border: 1px solid rgba(128,128,128,0.18);
    color: var(--button-color);
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tr-help-link:active {
    transform: translateY(1px);
}

.tr-help-link .tr-help-ico {
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}

.tr-help-link .tr-help-text {
    display: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 520px) {
    .tr-help-link .tr-help-text {
        display: inline;
    }
}

/* Панель фильтров как карточка */
.transport-filters-panel {
    background: var(--card-bg);
    padding: 12px; /* компактнее */
    border-radius: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px; /* чуть меньше, чтобы лента начиналась выше */
    border: 1px solid rgba(0,0,0,0.03);
}

/* --- Transport Date Row (wrap, no horizontal scroll) --- */
#view-transport .tr-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap; /* desktop/планшет: можно переносить */
    margin-top: 8px !important;
}

/* Обёртка для даты + псевдо-плейсхолдера (нужно для мобильных WebView) */
#view-transport .tr-date-wrap {
    position: relative;
    flex: 0 0 160px;           /* чуть шире, чтобы чипсы не уезжали */
    min-width: 160px;
    width: auto;
    margin: 0 !important;
}

/* Поле даты приводим к теме (сам popup календаря ОС не перекрасить стабильно) */
#view-transport #tr-filter-date {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.3);
    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 14px;

    /* для нативных элементов где поддерживается */
    color-scheme: light dark;
    accent-color: var(--button-color);
}

/* Плейсхолдер поверх date input (показывается только когда .tr-date-wrap.is-empty) */
#view-transport .tr-date-wrap .tr-date-placeholder {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    color: var(--hint-color);
    opacity: 0.95;
    font-size: 13px;
    line-height: 1;
    display: none;
    white-space: nowrap;
}

#view-transport .tr-date-wrap.is-empty .tr-date-placeholder {
    display: block;
}

/* FIX: скрываем нативный текст (часто "дд.мм.гггг" из локали ОС), когда date пустой */
#view-transport .tr-date-wrap.is-empty #tr-filter-date {
    color: transparent !important;
}
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit,
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit-fields-wrapper,
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit-text,
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit-day-field,
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit-month-field,
#view-transport .tr-date-wrap.is-empty #tr-filter-date::-webkit-datetime-edit-year-field {
    color: transparent !important;
}

/* В форме создания тоже используем тот же паттерн (без привязки к #view-transport) */
.tr-date-wrap {
    position: relative;
}
.tr-date-wrap .tr-date-placeholder {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    color: var(--hint-color);
    opacity: 0.95;
    font-size: 13px;
    line-height: 1;
    display: none;
    white-space: nowrap;
}
.tr-date-wrap.is-empty .tr-date-placeholder {
    display: block;
}
.tr-date-wrap.is-empty input[type="date"] {
    color: transparent !important;
}
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit,
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-text,
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-day-field,
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-month-field,
.tr-date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent !important;
}

/* Иконка календаря: в тёмной теме делаем светлее */
@media (prefers-color-scheme: dark) {
    #view-transport #tr-filter-date::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(0.85);
    }
}

#view-transport .tr-quick-dates {
    flex: 1 1 auto;
    display: flex !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
    flex-wrap: wrap;
    justify-content: flex-end; /* чипсы справа, "Любая дата" последняя уедет вниз первой */
    min-width: 0;
}

#view-transport .tr-quick-dates .chip {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* Mobile: НЕ ДАЁМ СПОЛЗАТЬ чипсам - делаем строку nowrap, чуть шире дату */
@media (max-width: 520px) {
    #view-transport .tr-date-row {
        gap: 6px;
        flex-wrap: nowrap; /* ключевое: чипсы не уходят на новую строку */
    }

    #view-transport .tr-date-wrap {
        flex: 0 0 140px;   /* расширили поле даты */
        min-width: 140px;
    }

    #view-transport #tr-filter-date {
        padding: 8px 9px;
        font-size: 12px;
    }

    #view-transport .tr-date-wrap .tr-date-placeholder {
        font-size: 12px;
        left: 10px;
    }

    #view-transport .tr-quick-dates {
        gap: 6px !important;
        flex-wrap: nowrap;       /* не переносим чипсы */
        justify-content: flex-end;
    }

    #view-transport .tr-quick-dates .chip {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* ===========================
   Transport (view-transport) - Compact overrides (canonical)
   =========================== */

/* У app.html теперь чистый, поэтому !important почти не нужен - держим минимум */
#view-transport .header-row {
    margin-bottom: 8px;
}

/* Панель фильтров чуть выше (без “воздуха”) */
#view-transport .transport-filters-panel {
    padding-top: 10px;
}

/* Роли: “верные” десктоп-значения, теперь это канон */
#view-transport .tr-role-segment {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
#view-transport .tr-role-segment .seg-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.3);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

/* Кнопка Поиск: канон десктоп/дефолт */
#view-transport #tr-btn-search {
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border-radius: 12px;
    font-size: 16px;
    padding: 0 12px;
}

/* Мобилка: уплотнение (только transport) */
@media (max-width: 520px) {
    #view-transport .header-row {
        margin-bottom: 6px;
        min-height: 28px !important;
    }

    #view-transport #tr-title-main {
        font-size: 16px !important;
        width: calc(100% - 140px) !important;
    }

    #view-transport .header-row > div {
        gap: 6px !important;
    }

    #view-transport .transport-tabs-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;

        gap: 6px;
        padding: 2px 2px 6px 2px;
        margin-bottom: 4px;
    }

    #view-transport .tr-tab {
        flex: 0 0 auto !important;
        min-width: 96px;

        flex-direction: row;
        justify-content: center;
        gap: 8px;

        padding: 8px 10px;
        border-radius: 999px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        scroll-snap-align: start;
    }

    #view-transport .tr-tab-icon {
        font-size: 18px;
        margin-bottom: 0;
        filter: none;
    }

    #view-transport .tr-tab-name {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
    }

    #view-transport .tr-tab.active {
        transform: none;
    }

    #view-transport .transport-filters-panel {
        padding-top: 8px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        border-radius: 16px;
        margin-bottom: 12px;
    }

    #view-transport #tr-from,
    #view-transport #tr-to {
        padding: 10px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    #view-transport .tr-role-segment {
        gap: 8px;
        margin-bottom: 8px;
    }

    #view-transport .tr-role-segment .seg-btn {
        padding: 10px;
        font-size: 14px;
        line-height: 1.1;
    }

    #view-transport #tr-btn-search {
        height: 38px;
        margin-top: 8px;
        font-size: 14px;
    }

    #view-transport #transport-list {
        padding-bottom: 140px !important;
    }

    .kh-lang-switcher {
        top: 10px !important;
        left: 10px !important;
        gap: 4px;
    }

    .kh-home-info-btn {
        top: 10px !important;
        right: 10px !important;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 17px;
    }

    .kh-lang-switcher .lang-btn {
        min-width: 30px;
        padding: 4px 7px;
        font-size: 10px;
        border-radius: 10px;
    }
}
/* ===========================
   /Transport (view-transport) - Compact overrides (canonical)
   =========================== */
/* (dedupe) Date row rules are defined выше в блоке "Transport Date Row (wrap, no horizontal scroll)". */

/* Кастомная стрелочка для селекта */
#tr-role {
    font-weight: 600;
    color: var(--text-color);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* ===== Transport role buttons: centered labels + active highlight ===== */
.tr-role-segment .role-btn,
.tr-role-segment .seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    line-height: 1.1;
    white-space: nowrap;
}

.tr-role-segment .role-btn.active,
.tr-role-segment .seg-btn.active {
    background: var(--button-color, #3390ec);
    color: #fff;
    border-color: rgba(0,0,0,0.0);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* --- Transport Date Row (theme + layout) --- */
#view-transport .tr-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* без горизонтального скролла */
    margin-top: 10px;
}

/* Сам input даты - под тему */
#view-transport #tr-filter-date {
    flex: 0 0 150px;
    min-width: 150px;
    width: auto;

    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.3);
    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 14px;

    /* для нативных контролов где поддерживается */
    color-scheme: light dark;
    accent-color: var(--button-color);
}

/* Иконка календаря в тёмной теме (Android/WebView) */
@media (prefers-color-scheme: dark) {
    #view-transport #tr-filter-date::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(0.85);
    }
}

/* Чипсы рядом с датой */
#view-transport .tr-quick-dates {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    justify-content: flex-end; /* "Любая дата" последняя и уедет вниз первой */
}

#view-transport .tr-quick-dates .chip {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* Mobile: ужимаем всё максимально, чтобы чаще влезало в одну строку */
@media (max-width: 520px) {
    #view-transport .tr-date-row {
        gap: 6px;
        margin-top: 8px;
    }

    #view-transport #tr-filter-date {
        flex: 0 0 118px;
        min-width: 118px;
        padding: 8px 9px;
        font-size: 12px;
    }

    #view-transport .tr-quick-dates {
        gap: 6px;
    }

    #view-transport .tr-quick-dates .chip {
        padding: 6px 9px;
        font-size: 11px;
    }
}
/* --- /Transport Date Row --- */

/* --- KH Contact Sheet (Transport) --- */
.kh-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;

    /* FIX: overlay должен быть скрыт по умолчанию, иначе он затемняет и блокирует клики */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Активное состояние overlay (показываем только когда реально открыта шторка) */
.kh-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* [GUARD][SHEET] Шторка всегда выше overlay (чтобы overlay никогда не перехватывал клики по контенту) */
#kh-sheet {
    z-index: 9999;
}

.kh-sheet {
    width: 100%;
    max-width: 520px;
    background: var(--secondary-bg);
    color: var(--text-color);
    border-radius: 16px;
    border: 1px solid rgba(128,128,128,0.18);
    box-shadow: 0 10px 35px rgba(0,0,0,0.35);
    overflow: hidden;

    /* чтобы предупреждение не обрезалось на маленьких экранах */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.kh-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(128,128,128,0.14);
}

.kh-sheet-title {
    font-size: 16px;
    font-weight: 700;
}

.kh-sheet-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: rgba(128,128,128,0.14);
    color: var(--text-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.kh-sheet-body {
    padding: 12px 14px 14px 14px;
    overflow: auto; /* ключ: если текста много - будет скролл, а не обрезание */
}

.kh-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kh-sheet-btn {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.22);
    background: rgba(128,128,128,0.10);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.kh-sheet-btn.kh-primary {
    background: var(--button-color);
    color: var(--button-text-color);
    border: 1px solid rgba(0,0,0,0.10);
}

.kh-sheet-btn.kh-cancel {
    background: rgba(128,128,128,0.08);
    font-weight: 600;
}

.kh-sheet-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,193,7,0.10);
    border: 1px solid rgba(255,193,7,0.20);
}

.kh-sheet-warning-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.kh-sheet-warning-text {
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word;
}
/* --- /KH Contact Sheet (Transport) --- */

/* --- Transport Roles UX (Side Fade) --- */
.card.role-driver {
    border-left: 3px solid #28a745 !important; /* Зеленый акцент */
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.01) 60%, transparent 100%);
}


.card.role-passenger {
    border-left: 3px solid #ffcc00 !important; /* Желтый акцент */
    background: linear-gradient(90deg, rgba(255, 204, 0, 0.10) 0%, rgba(255, 204, 0, 0.01) 60%, transparent 100%);
}

/* --- Transport cards: note preview must be EXACTLY ONE line (driver + passenger) --- */
.card-note {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
}

/* В темной теме чуть ярче, чтобы было видно */
@media (prefers-color-scheme: dark) {
    .card.role-driver {
        background: linear-gradient(90deg, rgba(40, 167, 69, 0.15) 0%, transparent 70%);
    }
    .card.role-passenger {
        background: linear-gradient(90deg, rgba(255, 204, 0, 0.15) 0%, transparent 70%);
    }

    /* Deal statuses in dark theme */
    .kh-deal-status--requested {
        background: rgba(33, 150, 243, 0.22);
        color: #90caf9;
    }

    .kh-deal-status--pending {
        background: rgba(255, 193, 7, 0.22);
        color: #ffd54f;
    }

    .kh-deal-status--accepted {
        background: rgba(76, 175, 80, 0.22);
        color: #a5d6a7;
    }

    .kh-deal-status--cancelled {
        background: rgba(229, 57, 53, 0.22);
        color: #ef9a9a;
    }
}

/* --- Transport Owner Actions (Top Right) --- */
.card-top-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

/* Прозрачные "идеальные" иконки ✏️ 🗑: тонкий контур, без заливки и без тени */
.icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.00);
    color: rgba(255,255,255,0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.30);
}

.icon-btn:active { transform: scale(0.95); }

.icon-btn.danger {
    color: rgba(255, 120, 120, 0.98);
    border-color: rgba(255, 120, 120, 0.38);
    background: rgba(255, 120, 120, 0.00);
}

.icon-btn.danger:hover {
    background: rgba(255, 120, 120, 0.06);
    border-color: rgba(255, 120, 120, 0.46);
}

/* [TRANSPORT TOPBAR] Центрируем заголовок строго по центру экрана, независим от правых кнопок */
.tr-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 32px;
    margin-bottom: 15px;
}

.tr-topbar .tr-title-main,
.tr-topbar h2#tr-title-main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.tr-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.tr-my-link {
    font-size: 14px;
    color: var(--button-color);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

/* --- WIZARD / SELLING MODULE STYLES --- */

/* Контейнер */
.sell-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 120px; /* Место под кнопку */
}

/* Заголовки */
.sell-wrapper h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}
.sell-wrapper h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.9;
}

/* Прогресс бар */
.progress-bar {
    width: 100%;
    background: var(--secondary-bg);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar > div {
    transition: width 0.3s ease;
}

/* Сетка категорий (Компактная 3 колонки) - только для выбора техники (view-vehicles) */
#view-vehicles .categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 10px; /* больше воздуха */
    
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0 10px;
}

/* КРУПНЕЕ элементы именно в “Техника” */
#view-vehicles .cat-item {
    height: 96px;
    padding: 10px 6px;
    border-radius: 14px;
}

#view-vehicles .cat-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

#view-vehicles .cat-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1px;
}

/* Главный экран: 4 в один ряд */
#view-search .categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0 6px;
}

/* Скрываем скроллбар */
.categories-grid::-webkit-scrollbar { display: none; }

.cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    
    /* Компактная фиксированная высота */
    padding: 6px 2px;
    height: 68px; 
    min-width: 0;
    
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.cat-item:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-active);
}

.cat-item.active {
    background: var(--button-color);
    border-color: var(--button-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(38, 132, 255, 0.3);
}

.cat-icon {
    font-size: 22px;
    margin-bottom: 4px;
    line-height: 1;
}

.cat-name {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: var(--text-color);
}

.cat-item.active .cat-name,
.cat-item.active .cat-icon {
    color: #fff;
}

/* Поля ввода (Modern Input) */
.modern-input-group {
    margin-bottom: 20px;
}
.modern-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--hint-color);
    margin-left: 4px;
}
.modern-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 1px solid rgba(127,127,127,0.2);
    border-radius: 14px;
    background: var(--input-bg);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s;
    appearance: none; /* Убирает стандартные стрелки select */
}
.modern-input:focus {
    border-color: var(--button-color);
    box-shadow: 0 0 0 3px rgba(36, 129, 204, 0.1);
}

/* Чипсы (Теги) */
.chip {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 20px;
    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    user-select: none;
}
.chip.active {
    background: var(--button-color);
    color: var(--button-text-color);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(36, 129, 204, 0.3);
}

/* Кнопка загрузки фото */
#photo-preview img {
    border: 1px solid rgba(0,0,0,0.1);
}

/* ==========================================
   Selling Wizard: Stepper (Плюс/Минус)
   ========================================== */

/* Контейнер для кнопок и инпута */
.stepper-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Кнопки +/- */
.stepper-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--secondary-bg, #f0f2f5);
    color: var(--button-color, #007bff);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
    /* Убираем выделение текста при быстром клике */
    user-select: none; 
    -webkit-user-select: none;
}

.stepper-btn:active {
    background: var(--hint-color, #ccc);
    transform: scale(0.95);
}

/* Инпут между кнопками */
.modern-input.stepper-input {
    text-align: center;
    font-weight: 600;
    flex: 1; /* Растягиваем на всю ширину */
}

/* Серый цвет для примеров (Placeholder) */
.modern-input::placeholder {
    color: var(--hint-color, #9ca3af);
    opacity: 0.6;
    font-weight: 400;
}

/* [KH][ELECTRO] Manual brand/model - весь бокс должен быть удобной зоной клика */
#view-sell .kh-manual-input-group,
.sell-wrapper .kh-manual-input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 84px;
    padding: 12px 14px !important;
    border-radius: 16px;
    cursor: text;
    pointer-events: auto !important;
    overflow: hidden;
}

#view-sell .kh-manual-input-group .modern-label,
.sell-wrapper .kh-manual-input-group .modern-label {
    display: block;
    width: 100%;
    cursor: text;
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
}

#view-sell .kh-manual-text-input,
.sell-wrapper .kh-manual-text-input {
    display: block !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 0 4px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 24px !important;
    caret-color: var(--text-color, #fff) !important;
    cursor: text !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    position: relative;
    z-index: 1;
}

#view-sell .kh-manual-text-input:focus,
.sell-wrapper .kh-manual-text-input:focus {
    outline: none;
    box-shadow: none !important;
}

#view-sell .kh-manual-input-group:focus-within,
.sell-wrapper .kh-manual-input-group:focus-within {
    border-color: var(--button-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 1px rgba(38,132,255,0.12);
}

@media (pointer: fine) {
    #view-sell .kh-manual-input-group,
    .sell-wrapper .kh-manual-input-group {
        min-height: 88px;
    }

    #view-sell .kh-manual-input-group:hover,
    .sell-wrapper .kh-manual-input-group:hover {
        border-color: rgba(38,132,255,0.28);
    }
}

/* Стили для readonly инпутов (селекторы) */
.modern-input.readonly {
    background-color: transparent;
    caret-color: transparent;
    cursor: pointer;
    text-overflow: ellipsis;
}

/* === [KANON] ACTIVITY CONSOLE === */
.kh-console-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* [KANON] Высота почти во весь экран, чтобы при скролле шапка уходила, а консоль занимала всё */
    min-height: calc(100vh - 90px);
    padding: 0 4px;
    box-sizing: border-box;
}

.kh-console-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
    align-items: stretch;
    padding: 10px 8px 6px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 8px;
}

.kh-console-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.kh-console-modebar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    align-items: center;
}

.kh-console-modegroup {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--hint-color);
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
}

.kh-console-modebtn {
    background: transparent;
    border: 1px solid var(--hint-color);
    color: var(--hint-color);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.kh-console-modebtn-ads {
    border-color: rgba(255, 152, 0, 0.45);
    color: #b56b00;
}

.kh-console-modegroup .kh-console-modebtn {
    border: 0;
    border-right: 1px solid var(--hint-color);
    border-radius: 0;
    margin: 0;
}

.kh-console-modegroup .kh-console-modebtn:last-child {
    border-right: 0;
}

.kh-console-modebtn.active {
    border-color: var(--button-color);
    color: var(--button-color);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

.kh-console-modegroup .kh-console-modebtn.active {
    background: rgba(0,0,0,0.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.kh-console-modebtn-ads.active {
    border-color: #ff9800;
    color: #ff9800;
    box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.18);
}

.kh-console-modebtn {
    background: transparent;
    border: 1px solid var(--hint-color);
    color: var(--hint-color);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.kh-console-modegroup .kh-console-modebtn {
    border: 0;
    border-right: 1px solid var(--hint-color);
    border-radius: 0;
    margin: 0;
}

.kh-console-modegroup .kh-console-modebtn:last-child {
    border-right: 0;
}

.kh-console-modebtn.active {
    border-color: var(--button-color);
    color: var(--button-color);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

.kh-console-modegroup .kh-console-modebtn.active {
    background: rgba(0,0,0,0.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
}

.kh-console-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 20px;
}

.kh-log-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.20;
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* [NO-FLICKER] Removed fade animation to prevent blinking */
}

.kh-log-time {
    color: var(--hint-color);
    font-weight: 600;
    margin-right: 2px;
    min-width: 46px;
    font-size: 12px;
    letter-spacing: -0.20px;
    opacity: 0.90;
}

.kh-log-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    color: var(--text-color);
    word-break: break-word;
    opacity: 0.98;
    font-weight: 400;
}

.kh-log-marker {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    opacity: 0.96;
    transform: translateY(1px);
}

.kh-log-primary {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    color: var(--text-color);
}

.kh-log-secondary {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
    opacity: 0.82;
    font-weight: 500;
}

.kh-log-row--ads .kh-log-secondary {
    opacity: 0.94;
    font-weight: 700;
}

/* === [KANON] STAGE 4: ETHNO-TECHNO THEME === */
body.kh-theme-ethno {
    /* default = light Telegram scheme */
    --bg-color: #d7cfb2;        /* light khaki */
    --text-color: #215b2f;      /* darker readable console green */
    --hint-color: #56724f;      /* muted olive-green */
    --button-color: #1f8f47;    /* primary console green */
    --button-text-color: #f7f3e6;
    --card-bg: #e5dec3;         /* khaki card */
    --secondary-bg: #cbc3a4;    /* khaki secondary */
    --input-bg: #e0d8bb;
    --shadow: 0 4px 20px rgba(68, 78, 48, 0.10);
    --shadow-active: 0 2px 8px rgba(68, 78, 48, 0.14);

    /* Premium ornament tuning for Console */
    --kh-ornament-color: rgba(90, 122, 73, 0.24);
    --kh-ornament-opacity: 0.10;
    --kh-ornament-size: 300px;
    --kh-ornament-shift: 52px;
    --kh-ornament-glow: 0 0 18px rgba(31, 143, 71, 0.05);
}

/* LIGHT CONSOLE */
body.kh-theme-ethno .kh-console-view {
    background-color: #d7cfb2;
    background-image:
        linear-gradient(rgba(31, 143, 71, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 143, 71, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    border-top: 1px solid rgba(31, 143, 71, 0.18);
    position: relative;
}

body.kh-theme-ethno .kh-console-header {
    border-bottom: 1px solid rgba(31, 143, 71, 0.18);
}

body.kh-theme-ethno #kh-console-title {
    color: var(--button-color);
    text-shadow: 0 0 4px rgba(31, 143, 71, 0.12);
    opacity: 1 !important;
}

body.kh-theme-ethno .kh-log-time {
    color: #8c6a1f;
}

body.kh-theme-ethno .kh-log-row {
    font-family: 'Courier New', Courier, monospace;
    border-bottom: 1px solid rgba(31, 143, 71, 0.08);
    padding-bottom: 1px;
}

/* DARK CONSOLE */
body.kh-theme-ethno.kh-scheme-dark,
body.kh-theme-ethno[data-kh-scheme="dark"] {
    --bg-color: #040804;
    --text-color: #39ff6a;
    --hint-color: #16923f;
    --button-color: #39ff6a;
    --button-text-color: #041006;
    --card-bg: #081008;
    --secondary-bg: #0c160c;
    --input-bg: #0a140a;
    --shadow: 0 4px 20px rgba(0,0,0,0.28);
    --shadow-active: 0 2px 8px rgba(0,0,0,0.32);
    --kh-ornament-color: rgba(57, 255, 106, 0.16);
    --kh-ornament-opacity: 0.08;
    --kh-ornament-glow: 0 0 18px rgba(57, 255, 106, 0.05);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-view,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-view {
    background-color: #0b0f19;
    background-image:
        linear-gradient(rgba(57, 255, 106, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 255, 106, 0.035) 1px, transparent 1px);
    background-size: 20px 20px;
    border-top: 1px solid rgba(57, 255, 106, 0.14);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-header,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-header {
    border-bottom: 1px solid rgba(57, 255, 106, 0.14);
}

body.kh-theme-ethno.kh-scheme-dark #kh-console-title,
body.kh-theme-ethno[data-kh-scheme="dark"] #kh-console-title {
    text-shadow: 0 0 6px rgba(57, 255, 106, 0.22);
}

body.kh-theme-ethno.kh-scheme-dark .kh-log-time,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-log-time {
    color: #d7b24a;
}

body.kh-theme-ethno.kh-scheme-dark .kh-log-row,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-log-row {
    border-bottom: 1px solid rgba(57, 255, 106, 0.04);
}

/* Toggle Button Style */
.kh-theme-toggle {
    background: none;
    border: 1px solid var(--hint-color);
    color: var(--hint-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

body.kh-theme-ethno .kh-theme-toggle {
    border-color: var(--button-color);
    color: var(--button-color);
    box-shadow: 0 0 5px rgba(31, 143, 71, 0.14);
}

body.kh-theme-ethno.kh-scheme-dark .kh-theme-toggle,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-theme-toggle {
    box-shadow: 0 0 5px rgba(57, 255, 106, 0.18);
}

/* === [KANON] CONSOLE ACTIVE STATES - OUTLINE ONLY, NO ACID FILL === */
body.kh-theme-ethno .kh-lang-switcher .lang-btn.active,
body.kh-theme-ethno .lang-switcher .lang-btn.active {
    background: rgba(31, 143, 71, 0.04) !important;
    color: var(--button-color) !important;
    border: 2px solid var(--button-color) !important;
    box-shadow:
        0 0 0 1px rgba(31, 143, 71, 0.10),
        0 0 12px rgba(31, 143, 71, 0.10) !important;
}

body.kh-theme-ethno .cat-item.active {
    background: rgba(229, 222, 195, 0.96) !important;
    border: 2px solid var(--button-color) !important;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(31, 143, 71, 0.10),
        0 0 14px rgba(31, 143, 71, 0.10) !important;
}

body.kh-theme-ethno .cat-item.active .cat-name,
body.kh-theme-ethno .cat-item.active .cat-icon {
    color: var(--button-color) !important;
    text-shadow: 0 0 6px rgba(31, 143, 71, 0.10);
}

body.kh-theme-ethno .tab-btn-add {
    background: #0b0f19 !important;
    border: 3px solid var(--button-color) !important;
    color: var(--button-color) !important;
    box-shadow:
        0 0 0 1px rgba(57, 255, 106, 0.10),
        0 -4px 12px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(57, 255, 106, 0.10) !important;
}

body.kh-theme-ethno .tab-btn-add span {
    color: var(--button-color) !important;
    text-shadow: 0 0 8px rgba(57, 255, 106, 0.12);
}

body.kh-theme-ethno .tab-btn-add:active {
    background: #101728 !important;
    box-shadow:
        0 0 0 1px rgba(57, 255, 106, 0.10),
        0 -2px 6px rgba(0, 0, 0, 0.18),
        0 0 12px rgba(57, 255, 106, 0.08) !important;
}

/* === [KANON] CONSOLE MARKET / ACTIVE FILLS - DARK BLUE === */
body.kh-theme-ethno .kh-lang-switcher .lang-btn.active,
body.kh-theme-ethno .lang-switcher .lang-btn.active,
body.kh-theme-ethno .cat-item.active,
body.kh-theme-ethno .market-mode-switcher,
body.kh-theme-ethno .market-mode-chip,
body.kh-theme-ethno .market-shell-toggle,
body.kh-theme-ethno .market-total-pill,
body.kh-theme-ethno .market-layout-btn,
body.kh-theme-ethno .market-advanced-toggle,
body.kh-theme-ethno #market-filters-panel .modern-grouped {
    background: #0b0f19 !important;
    color: var(--button-color) !important;
    border-color: rgba(57, 255, 106, 0.18) !important;
    box-shadow:
        0 0 0 1px rgba(57, 255, 106, 0.06),
        0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

body.kh-theme-ethno .market-mode-tab {
    background: transparent !important;
    color: var(--button-color) !important;
}

body.kh-theme-ethno .market-mode-tab.active,
body.kh-theme-ethno .market-mode-chip.active,
body.kh-theme-ethno .market-layout-btn.active,
body.kh-theme-ethno .cat-item.active {
    background: #101728 !important;
    color: #d8ffe5 !important;
    border-color: rgba(57, 255, 106, 0.34) !important;
    box-shadow:
        0 0 0 1px rgba(57, 255, 106, 0.10),
        0 0 14px rgba(57, 255, 106, 0.10) !important;
}

body.kh-theme-ethno .market-mode-switcher {
    border-color: rgba(57, 255, 106, 0.18) !important;
}

body.kh-theme-ethno .market-total-pill-label {
    color: rgba(57, 255, 106, 0.92) !important;
    opacity: 1 !important;
}

body.kh-theme-ethno .market-total-pill-count {
    background: #101728 !important;
    color: #d8ffe5 !important;
    border-color: rgba(57, 255, 106, 0.30) !important;
}

body.kh-theme-ethno .market-total-pill[data-market-total-mode="filtered"] .market-total-pill-count {
    background: rgba(57, 255, 106, 0.12) !important;
    color: #d8ffe5 !important;
}

body.kh-theme-ethno .modern-row {
    border-bottom-color: rgba(57, 255, 106, 0.10) !important;
}

body.kh-theme-ethno .modern-cell.border-r {
    border-right-color: rgba(57, 255, 106, 0.10) !important;
}

body.kh-theme-ethno .modern-row:active {
    background: rgba(16, 23, 40, 0.92) !important;
}

/* === [KANON] CONSOLE SHEET (History) === */
.kh-console-sheet {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-color);
    z-index: 6000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kh-console-sheet.active {
    transform: translateY(0);
}

.kh-console-sheet-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: var(--bg-color);
    padding-top: env(safe-area-inset-top, 12px);
}

.kh-console-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;

    /* MOBILE ZOOM HARDENING:
       sheet-history не должен становиться зоной, где pinch внезапно пропадает */
    touch-action: pan-y pinch-zoom;
}

.kh-sheet-close-btn {
    background: rgba(128,128,128,0.1);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--text-color);
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Ethno Theme support for Sheet */
body.kh-theme-ethno .kh-console-sheet {
    background-color: #d7cfb2;
    background-image:
        linear-gradient(rgba(31, 143, 71, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 143, 71, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

body.kh-theme-ethno .kh-console-sheet-header {
    background-color: #d7cfb2;
    border-bottom: 1px solid rgba(31, 143, 71, 0.18);
    color: var(--button-color);
    text-shadow: 0 0 4px rgba(31, 143, 71, 0.12);
}

body.kh-theme-ethno .kh-sheet-close-btn {
    background: rgba(31, 143, 71, 0.08);
    color: var(--button-color);
    border: 1px solid var(--button-color);
}

.kh-console-filter-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.kh-console-filter-input,
.kh-console-filter-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.kh-console-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kh-console-filter-actions {
    display: flex;
    justify-content: flex-end;
}

.kh-console-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
}

.kh-console-sheet-title {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kh-console-sheet-row {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--card-bg);
}

.kh-console-sheet-row-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.kh-console-sheet-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    color: var(--hint-color);
    white-space: nowrap;
}

.kh-console-sheet-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.kh-console-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.kh-console-sheet-text {
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.kh-console-sheet-payload {
    margin: 10px 0 0 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--secondary-bg);
    color: var(--text-color);
    font-size: 11px;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

body.kh-theme-ethno .kh-console-modebtn {
    border-color: rgba(31, 143, 71, 0.26);
    color: rgba(33, 91, 47, 0.96);
    box-shadow: 0 0 6px rgba(31, 143, 71, 0.08);
}

body.kh-theme-ethno .kh-console-modebtn-ads {
    border-color: rgba(212, 164, 44, 0.58);
    color: #b07a00;
    box-shadow: 0 0 8px rgba(212, 164, 44, 0.16);
}

body.kh-theme-ethno .kh-console-modegroup {
    border-color: rgba(31, 143, 71, 0.24);
    box-shadow: 0 0 6px rgba(31, 143, 71, 0.06);
}

body.kh-theme-ethno .kh-console-modegroup .kh-console-modebtn {
    border-right-color: rgba(31, 143, 71, 0.24);
}

body.kh-theme-ethno .kh-console-modebtn.active {
    border-color: var(--button-color);
    color: var(--button-color);
    box-shadow: 0 0 10px rgba(31, 143, 71, 0.12);
}

body.kh-theme-ethno .kh-console-modebtn-ads.active {
    border-color: #d4a42c;
    color: #d4a42c;
    background: rgba(212, 164, 44, 0.08);
    box-shadow: 0 0 12px rgba(212, 164, 44, 0.22);
}

body.kh-theme-ethno .kh-console-modegroup .kh-console-modebtn.active {
    background: rgba(31, 143, 71, 0.08);
    box-shadow: inset 0 0 0 1px rgba(31, 143, 71, 0.10);
}

body.kh-theme-ethno .kh-console-filter-input,
body.kh-theme-ethno .kh-console-filter-select,
body.kh-theme-ethno .kh-console-sheet-row,
body.kh-theme-ethno .kh-console-badge,
body.kh-theme-ethno .kh-console-sheet-payload {
    background: rgba(229, 222, 195, 0.96);
    border-color: rgba(31, 143, 71, 0.18);
    color: #215b2f;
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modebtn,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modebtn {
    border-color: rgba(57, 255, 106, 0.26);
    color: rgba(57, 255, 106, 0.90);
    box-shadow: 0 0 6px rgba(57, 255, 106, 0.08);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modebtn-ads,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modebtn-ads {
    border-color: rgba(255, 184, 77, 0.58);
    color: #ffb84d;
    box-shadow: 0 0 8px rgba(255, 184, 77, 0.16);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modegroup,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modegroup {
    border-color: rgba(57, 255, 106, 0.22);
    box-shadow: 0 0 6px rgba(57, 255, 106, 0.05);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modegroup .kh-console-modebtn,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modegroup .kh-console-modebtn {
    border-right-color: rgba(57, 255, 106, 0.22);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modebtn.active,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modebtn.active {
    box-shadow: 0 0 10px rgba(57, 255, 106, 0.12);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modebtn-ads.active,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modebtn-ads.active {
    border-color: #ffb84d;
    color: #ffb84d;
    background: rgba(255, 184, 77, 0.08);
    box-shadow: 0 0 12px rgba(255, 184, 77, 0.22);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-modegroup .kh-console-modebtn.active,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-modegroup .kh-console-modebtn.active {
    background: rgba(57, 255, 106, 0.07);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 106, 0.10);
}

body.kh-theme-ethno.kh-scheme-dark .kh-console-filter-input,
body.kh-theme-ethno.kh-scheme-dark .kh-console-filter-select,
body.kh-theme-ethno.kh-scheme-dark .kh-console-sheet-row,
body.kh-theme-ethno.kh-scheme-dark .kh-console-badge,
body.kh-theme-ethno.kh-scheme-dark .kh-console-sheet-payload,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-filter-input,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-filter-select,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-sheet-row,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-badge,
body.kh-theme-ethno[data-kh-scheme="dark"] .kh-console-sheet-payload {
    background: rgba(8, 14, 10, 0.96);
    border-color: rgba(57, 255, 106, 0.16);
    color: #d5ffe0;
}

@media (max-width: 640px) {
    .kh-console-header-main {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .kh-console-header-main > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .kh-console-header-main > div:last-child {
        display: flex;
        gap: 8px;
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
        white-space: nowrap;
    }

    .kh-console-filter-grid {
        grid-template-columns: 1fr;
    }

    .kh-console-sheet-row-top {
        flex-direction: column;
    }

    .kh-console-sheet-badges {
        justify-content: flex-start;
    }

    .kh-console-list {
        gap: 2px;
    }

    .kh-log-row {
        font-size: 14px;
        line-height: 1.16;
        font-weight: 700;
    }

    .kh-log-time {
        min-width: 48px;
        font-size: 12px;
        font-weight: 800;
        margin-right: 7px;
    }

    .kh-log-text {
        font-weight: 700;
        letter-spacing: -0.1px;
    }
}

/* === CONSOLE LOAD MORE === */
.kh-load-more-btn {
    background: transparent;
    border: 1px dashed var(--hint-color);
    color: var(--hint-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.kh-load-more-btn:active {
    background: rgba(0,0,0,0.05);
    transform: scale(0.98);
}

body.kh-theme-ethno .kh-load-more-btn {
    border-color: rgba(31, 143, 71, 0.28);
    color: rgba(21, 95, 49, 0.74);
}

body.kh-theme-ethno .kh-load-more-btn:active {
    background: rgba(31, 143, 71, 0.10);
    color: #155f31;
}

/* Анимация обновления при тапе на лого */
@keyframes kh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.logo-spinning {
    animation: kh-spin 0.7s ease-in-out;
    opacity: 0.8;
}

/* [Transport] Modern Detail Sheet */
.kh-sheet-hero {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}
.kh-sheet-route-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.kh-sheet-route-arrow {
    color: var(--button-color);
    font-size: 20px;
}
.kh-sheet-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.kh-sheet-cell {
    background: rgba(128,128,128,0.05);
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}
.kh-sheet-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 4px;
}
.kh-sheet-cell-value {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kh-sheet-price-val {
    color: #4ade80; /* Зеленый для цены */
    font-size: 17px;
}
.kh-sheet-note-box {
    background: rgba(255, 193, 7, 0.1); /* Желтоватый фон для заметки */
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color);
    position: relative;
}
.kh-sheet-note-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.5;
}

/* --- iOS Grouped Form Style (Polished) --- */
.modern-form {
    padding: 8px 0 8px 0;
}

.market-shell {
    position: relative;
    margin-top: -2px;
}

.market-mode-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: -2px auto 6px auto;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(84, 84, 88, 0.35);
    max-width: 100%;
}

.market-mode-tab {
    appearance: none;
    min-height: 29px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.market-mode-tab.active {
    background: rgba(38, 132, 255, 0.18);
    color: #eef7ff;
    box-shadow: 0 4px 12px rgba(38, 132, 255, 0.16);
}

.market-mode-tab:active,
.market-mode-chip:active {
    transform: scale(0.97);
}

.market-sale-chips-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1px 0 4px 0;
}

.market-sale-chips-row::-webkit-scrollbar {
    display: none;
}

.market-mode-chip {
    appearance: none;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(84, 84, 88, 0.35);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.market-mode-chip.active {
    background: rgba(38, 132, 255, 0.20);
    border-color: rgba(38, 132, 255, 0.46);
    color: #eef7ff;
    box-shadow: 0 4px 14px rgba(38, 132, 255, 0.18);
}

.market-mode-chip-all {
    min-width: auto;
    padding: 0 10px;
}

.market-mode-chip-icon {
    min-width: auto;
    padding: 0 10px;
    border-radius: 999px;
    justify-content: center;
}

.market-mode-chip-icon-wrap {
    display: none;
}

.market-mode-chip-icon-svg {
    display: none;
}

.market-mode-chip-icon-svg path,
.market-mode-chip-icon-svg circle,
.market-mode-chip-icon-svg rect,
.market-mode-chip-icon-svg line,
.market-mode-chip-icon-svg polyline {
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.market-mode-chip-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.market-mode-chip-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.market-shell-top {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px 0;
    padding: 0 0 5px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.market-shell-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.market-shell-toggle,
.market-total-pill {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(84, 84, 88, 0.35);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.market-shell-toggle {
    appearance: none;
    padding: 0 11px;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease);
}

.market-shell-toggle:active {
    transform: scale(0.97);
}

.market-total-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 7px 0 11px;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06));
    border-color: rgba(110, 150, 215, 0.28);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.market-total-pill:active {
    transform: scale(0.97);
}

.market-total-pill[data-market-total-toggleable="1"] {
    border-color: rgba(110, 150, 215, 0.36);
}

.market-total-pill[data-market-total-mode="filtered"] {
    background: linear-gradient(180deg, rgba(38, 132, 255, 0.12), rgba(255, 255, 255, 0.05));
}

.market-total-pill-label {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.92;
    letter-spacing: -0.05px;
}

.market-total-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(38, 132, 255, 0.18);
    border: 1px solid rgba(38, 132, 255, 0.26);
    color: #eef7ff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.market-total-pill[data-market-total-mode="filtered"] .market-total-pill-count {
    background: rgba(38, 132, 255, 0.28);
    border-color: rgba(38, 132, 255, 0.38);
}

.market-filters-panel {
    margin-bottom: 12px;
}

.modern-grouped {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    border: none;
}

.modern-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(84, 84, 88, 0.35);
    position: relative;
    transition: background 0.2s;
}

.modern-row:last-child {
    border-bottom: none;
}

.modern-row:active {
    background: rgba(255, 255, 255, 0.05);
}

.modern-cell {
    flex: 1;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 56px;
}

.modern-cell.border-r {
    border-right: 1px solid rgba(84, 84, 88, 0.35);
}

.modern-label {
    font-size: 12px;
    color: var(--hint-color);
    opacity: 0.8;
    margin-bottom: 2px;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.market-filters-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: -2px 0 12px 0;
}

.market-advanced-toggle {
    appearance: none;
    border: 1px solid rgba(84, 84, 88, 0.35);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease);
}

.market-advanced-toggle:active {
    transform: scale(0.97);
}

.market-advanced-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 12px;
    margin-bottom: 8px;
    align-items: start;
}

/* Самовосстановление на случай старого JS/WebView-кэша, который откроет панель как block */
#market-advanced-panel[style*="display:block"],
#market-advanced-panel[style*="display: block"] {
    display: grid !important;
}

.market-advanced-panel > .modern-grouped {
    margin-bottom: 0;
    min-width: 0;
    width: auto;
    max-width: none;
    align-self: start;
    grid-column: auto;
}

.market-advanced-panel > .modern-grouped > .modern-row {
    width: 100%;
}

#market-group-mileage-engine,
#market-group-parts-original-stock,
#market-group-parts-meta,
#market-group-rent-extra,
#market-group-rent-age,
#market-group-special-extra {
    grid-column: 1 / -1;
}

.market-search-cta {
    margin-top: 4px;
    margin-bottom: 4px;
}

.market-results-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 8px 0 8px 0;
    min-height: 0;
}

.market-active-filters {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.market-layout-switcher {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding-left: 0;
}

.market-layout-switcher-shell {
    padding-left: 0;
}

.market-layout-btn {
    appearance: none;
    min-width: 64px;
    height: 28px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid rgba(84, 84, 88, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.28px;
    cursor: pointer;
    transition: transform var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                border-color var(--anim-fast) var(--anim-ease),
                color var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease);
}

.market-layout-btn-cycle {
    min-width: 64px;
    justify-content: center;
}

.market-layout-btn.active {
    background: rgba(38, 132, 255, 0.18);
    border-color: rgba(38, 132, 255, 0.46);
    color: #eef7ff;
    box-shadow: 0 4px 12px rgba(38, 132, 255, 0.16);
}

.market-layout-btn:active {
    transform: scale(0.97);
}

.market-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    border: 1px solid rgba(84, 84, 88, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.market-filter-chip-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-filter-chip-x {
    flex: 0 0 auto;
    opacity: 0.65;
    font-weight: 800;
}

.market-filter-chip-reset {
    border-color: rgba(229, 57, 53, 0.24);
    color: var(--accent-red);
    background: rgba(229, 57, 53, 0.06);
}

.modern-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 17px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 22px;
}

.modern-input::placeholder {
    color: var(--hint-color);
    opacity: 0.3;
}

.modern-cell:has(select)::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 42%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--hint-color);
    border-bottom: 2px solid var(--hint-color);
    transform: rotate(45deg);
    opacity: 0.4;
    pointer-events: none;
}

.modern-row:focus-within {
    background: rgba(128,128,128, 0.05);
}

#search-results.market-list-mode {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#search-results.market-list-mode .card {
    margin: 0;
}

#search-results.market-grid-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#search-results.market-grid-mode .card {
    margin: 0;
    min-width: 0;
}

#search-results.market-grid-mode .card-photo {
    height: 132px;
}

#search-results.market-grid-mode .card-body {
    padding: 10px 10px 12px 10px;
}

#search-results.market-grid-mode .card-price {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 4px;
}

#search-results.market-grid-mode .card-title {
    font-size: 13px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#search-results.market-grid-mode .card-specs {
    font-size: 11px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#search-results.market-grid-mode .card-meta {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 6px;
}

#search-results.market-grid-mode .card-actions {
    display: none;
}

#search-results.market-compact-mode {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#search-results.market-compact-mode .card {
    margin: 0;
    display: flex;
    align-items: stretch;
    min-height: 108px;
    overflow: hidden;
}

#search-results.market-compact-mode .card-photo {
    flex: 0 0 112px;
    width: 112px;
    min-height: 108px;
    height: 108px;
    aspect-ratio: auto;
}

#search-results.market-compact-mode .card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px 9px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#search-results.market-compact-mode .card-price {
    font-size: 16px;
    line-height: 1.15;
    margin-bottom: 4px;
}

#search-results.market-compact-mode .card-title {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#search-results.market-compact-mode .card-specs {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#search-results.market-compact-mode .card-meta {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 2px;
    flex-wrap: wrap;
}

#search-results.market-compact-mode .card-actions {
    display: none;
}

.market-feed-sentinel {
    width: 100%;
    height: 24px;
}

@media (hover: hover) and (pointer: fine) {
    .market-mode-switcher {
        margin-left: auto;
        margin-right: auto;
    }

    .market-sale-chips-row {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .market-shell-toggle,
    .market-total-pill,
    .market-layout-btn {
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
    }
}

@media (max-width: 480px) {
    .market-mode-switcher {
        width: auto;
        max-width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
    }

    .market-mode-tab {
        flex: 0 0 auto;
        min-height: 29px;
        padding: 0 11px;
        font-size: 12px;
    }

    .market-sale-chips-row {
        gap: 5px;
        margin: 0 0 8px 0;
        justify-content: flex-start;
    }

    .market-mode-chip {
        min-height: 29px;
        padding: 0 8px;
        font-size: 11px;
        gap: 0;
    }

    .market-mode-chip-icon {
        min-width: auto;
        padding: 0 8px;
    }

    .market-mode-chip-icon-wrap {
        display: none;
    }

    .market-mode-chip-icon-svg {
        display: none;
    }

    .market-mode-chip-label {
        font-size: 11px;
    }

    .market-shell-top {
        gap: 5px;
        align-items: center;
    }

    .market-shell-meta {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 7px;
    }

    .market-shell-toggle,
    .market-total-pill {
        min-height: 30px;
        font-size: 11px;
    }

    .market-total-pill {
        padding: 0 6px 0 9px;
    }

    .market-total-pill-label {
        font-size: 10px;
    }

    .market-total-pill-count {
        min-width: 21px;
        height: 18px;
        padding: 0 5px;
        font-size: 11px;
    }

    .market-layout-btn {
        min-width: 54px;
        height: 30px;
        padding: 0 9px;
        font-size: 10px;
        letter-spacing: 0.24px;
    }

    .market-filter-chip {
        font-size: 11px;
        padding: 6px 9px;
    }

    .market-advanced-toggle {
        width: 100%;
        justify-content: center;
    }

    .market-advanced-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .market-advanced-panel > .modern-grouped > .modern-row > .modern-cell {
        padding: 8px 12px;
    }

    .market-results-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .market-layout-switcher {
        justify-content: flex-end;
        padding-left: 0;
    }

    #search-results.market-grid-mode .card-photo {
        height: 118px;
    }

    #search-results.market-grid-mode .card-price {
        font-size: 14px;
    }

    #search-results.market-grid-mode .card-title {
        font-size: 12px;
    }

    #search-results.market-grid-mode .card-specs,
    #search-results.market-grid-mode .card-meta {
        font-size: 10px;
    }

    #search-results.market-compact-mode .card {
        min-height: 88px;
    }

    #search-results.market-compact-mode .card-photo {
        flex: 0 0 92px;
        width: 92px;
        min-height: 88px;
        height: 88px;
    }

    #search-results.market-compact-mode .card-body {
        padding: 8px 9px;
    }

    #search-results.market-compact-mode .card-price {
        font-size: 14px;
    }

    #search-results.market-compact-mode .card-title {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    #search-results.market-compact-mode .card-specs,
    #search-results.market-compact-mode .card-meta {
        font-size: 10px;
    }
}

/* --- CENTRAL TAB BUTTON (FIXED & POLISHED) --- */
.tabbar {
    /* Разрешаем элементам "торчать" из таббара */
    overflow: visible !important;
    /* Выравниваем остальные табы по низу, чтобы центр не ломал линию */
    align-items: flex-end !important;
    z-index: 9000;
}

.tab-btn-add {
    /* Жесткие размеры и запрет на сжатие */
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 auto !important;

    /* Стиль */
    background: var(--button-color) !important;
    border-radius: 50%;
    /* Добавляем рамку цвета фона, чтобы отделить от таббара */
    border: 3px solid var(--bg-color, #0f172a) !important; 
    color: white !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;

    /* Центрирование иконки */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 8px 6px 8px !important; /* Чуть ниже, чтобы не завышать весь низ на мобильных */
    
    position: relative;
    z-index: 9001;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Иконка плюса внутри */
.tab-btn-add span {
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: block;
    margin-top: -2px; /* Микрокоррекция по центру */
}

.tab-btn-add:active {
    transform: scale(0.92);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Убеждаемся, что соседние кнопки не прилипают */
.tab-btn {
    flex: 1; /* Растягиваем остальные */
    font-size: 10px;
}

/* Лог активности: строгий режим одной строки */
.kh-log-row {
    display: flex;
    align-items: center; /* Центрируем иконку и текст по вертикали */
    gap: 4px; /* Отступ между временем и текстом */
    width: 100%; /* На всю ширину */
    overflow: hidden; /* Скрываем вылезающее */
    border-radius: 8px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.kh-log-time {
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 38px; /* [FIX] Фиксированная ширина времени, чтобы иконки всегда стояли в один ряд */
    margin-right: 2px;
}

/* [Mobile Only] Дополнительная полировка для узких экранов */
@media (max-width: 480px) {
    .kh-log-row { gap: 3px; } 
    .kh-log-time { font-size: 11px; min-width: 34px; }
}

.kh-log-text {
    flex: 1; /* Занимает всё доступное место */
    min-width: 0; /* Важно для flexbox, чтобы text-overflow сработал */
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.kh-log-text-inner {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kh-log-row--ads {
    position: relative;
    overflow: visible;
}

.kh-log-row--ads::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: calc(100% + 10px);
    border-left: 2px solid rgba(255, 179, 0, 0.72);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 179, 0, 0.13) 0%, rgba(255, 179, 0, 0.00) 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 179, 0, 0.06);
    pointer-events: none;
    z-index: 0;
}

.kh-log-row--ads > * {
    position: relative;
    z-index: 1;
}

.kh-log-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.kh-log-chip-ads {
    color: #ffb300;
    border: 1px solid rgba(255, 179, 0, 0.34);
    background: rgba(255, 179, 0, 0.13);
}

body.kh-theme-ethno .kh-log-row--ads::before {
    border-left-color: rgba(0, 242, 255, 0.68);
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.10) 0%, rgba(0, 242, 255, 0.00) 72%);
    box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.08);
}

body.kh-theme-ethno .kh-log-chip-ads {
    color: #8ff3ff;
    border-color: rgba(0, 242, 255, 0.30);
    background: rgba(0, 242, 255, 0.12);
}

body.kh-theme-vision .kh-log-row--ads::before {
    border-left-color: rgba(110, 168, 254, 0.80);
    background: linear-gradient(90deg, rgba(110, 168, 254, 0.16) 0%, rgba(110, 168, 254, 0.00) 72%);
    box-shadow: inset 0 0 0 1px rgba(110, 168, 254, 0.10);
}

body.kh-theme-vision .kh-log-chip-ads {
    color: var(--text-color);
    border-color: rgba(110, 168, 254, 0.36);
    background: rgba(110, 168, 254, 0.18);
}

/* [Mobile Only] Чуть уменьшаем шрифт на телефонах, чтобы влезало больше */
@media (max-width: 480px) {
    .kh-log-row { gap: 3px; }
    .kh-log-icon { font-size: 12px; min-width: 16px; }
    .kh-log-text { font-size: 11px; gap: 4px; }
    .kh-log-chip { height: 16px; padding: 0 5px; font-size: 9px; }
    .kh-log-marker { font-size: 12px; }
    .kh-log-primary { font-weight: 800; }
    .kh-log-secondary { font-size: 11px; }
}



/* ========================================= */
/* === [V2 UX/UI POLISHING] NEW STYLES === */
/* ========================================= */

/* 1. SKELETON LOADER (Анимация загрузки) */
@keyframes skeleton-shimmer {
    0% { background-color: var(--secondary-bg); }
    50% { background-color: rgba(0,0,0,0.08); }
    100% { background-color: var(--secondary-bg); }
}
.skeleton {
    animation: skeleton-shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
    color: transparent !important;
    cursor: default;
    user-select: none;
}
.skeleton-text { height: 1em; width: 70%; margin-bottom: 4px; }
.skeleton-card { height: 100px; width: 100%; border-radius: var(--border-radius); }

/* 2. STATUS BADGES (Умные статусы) */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-active { background: #e3f2fd; color: #1976d2; } /* Blue */
.status-full { background: #ffebee; color: #c62828; }   /* Red */
.status-requested { background: #fff3cd; color: #856404; } /* Yellow (Wait) */
.status-accepted { background: #d1e7dd; color: #0f5132; } /* Green (Done) */
.status-cancelled { background: #f8d7da; color: #842029; } /* Red (Cancel) */

/* 3. DEAL ROOM (Таймлайн торга) */
.deal-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
    padding: 0 4px;
}
.deal-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Сообщение от меня (справа, синее) */
.deal-msg.me {
    align-self: flex-end;
    background: var(--button-color);
    color: var(--button-text-color);
    border-bottom-right-radius: 2px;
}
/* Сообщение от партнера (слева, серое) */
.deal-msg.them {
    align-self: flex-start;
    background: var(--secondary-bg);
    color: var(--text-color);
    border-bottom-left-radius: 2px;
}
.deal-msg-meta {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
    text-align: right;
}

/* 4. CHIPS (Горизонтальный скролл вместо Select) */
.chips-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    /* Скрываем скроллбар */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.chips-container::-webkit-scrollbar { display: none; }

.chip {
    padding: 8px 16px;
    background: var(--secondary-bg);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.chip.active {
    background: var(--button-color);
    color: var(--button-text-color);
    box-shadow: 0 2px 8px rgba(38, 132, 255, 0.3);
}
.chip:active { transform: scale(0.95); }

/* 5. STICKY FOOTER (Действия всегда под рукой) */
.sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-color);
    padding: 12px 16px;
    border-top: 1px solid var(--secondary-bg);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    z-index: 100;
    display: flex;
    gap: 10px;
    /* Учет Safe Area на iPhone */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.sticky-footer .btn { flex: 1; }

/* BottomSheet: Fullscreen (TD2 UX) */
/* Шторка должна быть на всю ширину и высоту, до верхнего/нижнего бортиков */
#kh-sheet {
    left: 0 !important;
    right: 0 !important;

    /* Внутри safe-area (не залезаем под вырезы/индикаторы) */
    top: env(safe-area-inset-top) !important;
    bottom: env(safe-area-inset-bottom) !important;

    width: 100vw !important;
    max-width: none !important;

    /* Высота внутри safe-area */
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: none !important;

    border-radius: 0 !important;

    /* Важно: sheet должен быть выше overlay, чтобы overlay не перехватывал клики */
    z-index: 10000 !important;

    /* Скрытое состояние (уезжает вниз) */
    transform: translate3d(0, 100%, 0) !important;
    opacity: 1 !important;

    /* FIX: если класс open/active не проставился, клики не должны блокироваться */
    pointer-events: auto !important;

    /* Плавная анимация */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Открытое состояние (алиас: open + active) */
#kh-sheet.open,
#kh-sheet.active {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

/* Контент внутри */
#kh-sheet-content,
.kh-sheet-body {
    overflow-y: auto !important;

    /* вычитаем хедер + safe-area, чтобы низ не прятался */
    max-height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;

    -webkit-overflow-scrolling: touch;

    /* общий sheet-контент должен поддерживать вертикальный скролл и pinch */
    touch-action: pan-y pinch-zoom;
}

/* ======================================================================
   KH TRANSPORT TD2 UI/UX CANON
   Non-destructive additions. Do NOT remove.
   ====================================================================== */

/* ---------- Badge: New trips (+N) ---------- */
.kh-badge-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  background: rgba(255, 59, 48, 0.92);
  color: #ffffff;
  vertical-align: middle;
}

/* ---------- MY MODE top bar ---------- */
#tr-mybar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  margin: -10px -10px 10px -10px;
  background: var(--bg-color, #111);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#tr-mybar .tr-mybar-title {
  font-weight: 700;
  font-size: 16px;
}

#tr-mybar .tr-mybar-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text-color, #fff);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Deleted / Archived trip ---------- */
.tr-trip-deleted {
  opacity: 0.72;
}

.tr-trip-deleted .tr-status-pill,
.tr-trip-deleted .status,
.tr-trip-deleted .badge {
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.22);
  color: rgba(255, 200, 200, 0.95);
}

/* ---------- Disabled actions (hard lock) ---------- */
.tr-disabled,
.tr-disabled * {
  pointer-events: none !important;
}

.tr-btn-disabled,
.tr-disabled button,
.tr-disabled .btn {
  opacity: 0.55 !important;
  filter: grayscale(0.25);
}

/* ---------- Anti-flicker rules ---------- */
/* Запрещаем анимации на контейнере ленты и деталке при тихом рефреше */
#transport-list,
#transport-detail {
  transition: none !important;
  animation: none !important;
}

/* ---------- Safety: hide phone if suddenly rendered ---------- */
.tr-trip-phone,
.trip-phone,
[data-phone] {
  display: none !important;
}


/* === KH-NOTIFY Banner (Profile) === */
.kh-notify-banner {
    margin: 10px 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
}

.kh-notify-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}

.kh-notify-desc {
    font-size: 13px;
    line-height: 1.25;
    color: var(--hint-color);
    margin-bottom: 10px;
}

.kh-notify-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
    background: var(--tg-theme-button-color, #2ea6ff);
    color: var(--tg-theme-button-text-color, #ffffff);
}

.kh-notify-btn:active {
    transform: scale(0.99);
}

/* === TELEGRAM SCHEME SURFACE NORMALIZATION === */
.about-block,
.about-intro,
.about-acc-item,
.kh-notify-banner {
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

body.kh-scheme-dark .about-block,
body.kh-scheme-dark .about-intro,
body.kh-scheme-dark .about-acc-item,
body.kh-scheme-dark .kh-notify-banner,
body[data-kh-scheme="dark"] .about-block,
body[data-kh-scheme="dark"] .about-intro,
body[data-kh-scheme="dark"] .about-acc-item,
body[data-kh-scheme="dark"] .kh-notify-banner {
    box-shadow: 0 12px 24px rgba(0,0,0,0.22);
}

body.kh-scheme-dark .card.vip,
body[data-kh-scheme="dark"] .card.vip {
    background: linear-gradient(135deg, #2c2c2c 0%, #3d3500 100%);
    border-color: rgba(255, 215, 0, 0.3);
    border-bottom: 6px solid #ffffff;
    color: #fff;
}

body.kh-scheme-dark .skeleton,
body[data-kh-scheme="dark"] .skeleton {
    background: #333;
    background: linear-gradient(110deg, #333 8%, #444 18%, #333 33%);
    background-size: 200% 100%;
}

body.kh-scheme-dark .calc-res,
body[data-kh-scheme="dark"] .calc-res {
    text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

body.kh-scheme-dark .calc-res a,
body.kh-scheme-dark .calc-res a:visited,
body[data-kh-scheme="dark"] .calc-res a,
body[data-kh-scheme="dark"] .calc-res a:visited {
    color: color-mix(in srgb, var(--text-color) 15%, #66b3ff 85%) !important;
}

body.kh-scheme-dark .tax-result,
body[data-kh-scheme="dark"] .tax-result {
    color: #ffffff;
}

body.kh-scheme-light .tax-result,
body[data-kh-scheme="light"] .tax-result {
    color: #000000;
}

body.kh-scheme-dark .vip-footer,
body[data-kh-scheme="dark"] .vip-footer {
    background: #fff;
}


/* [NO-FLICKER][ACTIVITY] Helpers for incremental DOM updates */
.kh-log-row--ghost{opacity:0.999;}


/* === [VISION] Accessibility theme (auto light/dark based on Telegram) === */
/* VISION = theme + accessibility mode:
   - slightly larger font (+12%)
   - higher contrast
   - larger hit targets
   - auto palette switch based on Telegram.WebApp colorScheme (dark/light)
*/
/* =========================================================
   THEME: VISION (A11Y)
   - High contrast
   - Slightly larger typography
   - Bigger hit targets (without stretching language switcher)
   - Auto palette: kh-vision-dark / kh-vision-light (set by app.js)
   ========================================================= */
body.kh-theme-vision {
    /* Accessibility typography (base) */
    font-size: 18px;      /* +~12% */
    line-height: 1.35;
}

/* VISION palette: DARK (Telegram dark) - максимальный контраст */
body.kh-theme-vision.kh-vision-dark {
    --bg-color: #000000;
    --text-color: #ffffff;
    --hint-color: #d6d6d6;
    --secondary-bg: #0a0a0a;
    --card-bg: #000000;
    --input-bg: #0a0a0a;
    --button-color: #ffffff;
    --button-text-color: #000000;
    --accent-color: #ffea00; /* яркий контрастный акцент */

    /* Premium ornament tuning for Vision Dark */
    --kh-ornament-color: rgba(255, 255, 255, 0.24);
    --kh-ornament-opacity: 0.07;
    --kh-ornament-size: 272px;
    --kh-ornament-shift: 34px;
    --kh-ornament-glow: 0 0 0 rgba(0,0,0,0);
}

/* VISION palette: LIGHT (Telegram light) - максимальный контраст */
body.kh-theme-vision.kh-vision-light {
    --bg-color: #ffffff;
    --text-color: #000000;
    --hint-color: #1b1b1b;
    --secondary-bg: #f1f1f1;
    --card-bg: #ffffff;
    --input-bg: #f1f1f1;
    --button-color: #000000;
    --button-text-color: #ffffff;
    --accent-color: #0037ff; /* читаемый синий */

    /* Premium ornament tuning for Vision Light */
    --kh-ornament-color: rgba(0, 0, 0, 0.16);
    --kh-ornament-opacity: 0.06;
    --kh-ornament-size: 272px;
    --kh-ornament-shift: 34px;
    --kh-ornament-glow: 0 0 0 rgba(0,0,0,0);
}

/* Force underlay backgrounds (mobile WebView can show Telegram gray underlay) */
body.kh-theme-vision,
body.kh-theme-vision .view,
body.kh-theme-vision .sheet,
body.kh-theme-vision .bottom-sheet,
body.kh-theme-vision .tabbar,
body.kh-theme-vision .detail-navbar {
    background: var(--bg-color) !important;
    color: var(--text-color);
}

/* Reduce visual noise in VISION */
body.kh-theme-vision .kh-console-view {
    background-image: none !important;
}

/* Bigger hit targets in VISION (НЕ трогаем lang buttons напрямую) */
body.kh-theme-vision .btn,
body.kh-theme-vision .chip,
body.kh-theme-vision .tr-chip,
body.kh-theme-vision .tab-btn,
body.kh-theme-vision .kh-theme-toggle,
body.kh-theme-vision .btn-back {
    min-height: 44px;
}

/* Keep language switcher compact (as было) */
body.kh-theme-vision .kh-lang-switcher .lang-btn,
body.kh-theme-vision .lang-switcher .lang-btn {
    min-height: unset;
}


/* VISION: Language switcher - show selected clearly (do not stretch) */
body.kh-theme-vision .kh-lang-switcher .lang-btn,
body.kh-theme-vision .lang-switcher .lang-btn {
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 55%, transparent);
    background: transparent;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.1;
}
body.kh-theme-vision .kh-lang-switcher .lang-btn.active,
body.kh-theme-vision .lang-switcher .lang-btn.active {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 3px solid var(--accent-color) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 26%, transparent),
        0 0 10px color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
}

/* VISION: Primary action buttons (e.g., 'Показать результаты') */
body.kh-theme-vision .btn-main,
body.kh-theme-vision .btn-primary,
body.kh-theme-vision .btn-blue,
body.kh-theme-vision .btn-submit {
    background: var(--button-color) !important;
    color: var(--button-text-color) !important;
    border: 2px solid color-mix(in srgb, var(--text-color) 55%, transparent);
    font-weight: 900;
}

/* VISION: Active category cards - outline only, no fill */
body.kh-theme-vision .cat-item.active {
    background: var(--card-bg) !important;
    border: 3px solid var(--accent-color) !important;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 24%, transparent),
        0 0 14px color-mix(in srgb, var(--accent-color) 14%, transparent) !important;
}
body.kh-theme-vision .cat-item.active .cat-name,
body.kh-theme-vision .cat-item.active .cat-icon {
    color: var(--text-color) !important;
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

/* VISION: Bottom bar '+' button - outline only, no fill */
body.kh-theme-vision .tab-btn-add {
    background: var(--card-bg) !important;
    border: 3px solid var(--accent-color) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 22%, transparent),
        0 -4px 12px rgba(0, 0, 0, 0.18),
        0 0 16px color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
}
body.kh-theme-vision .tab-btn-add span {
    color: var(--text-color) !important;
    font-weight: 900;
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 16%, transparent);
}

/* VISION: market controls must be high-contrast and readable */
body.kh-theme-vision .market-mode-switcher,
body.kh-theme-vision .market-mode-chip,
body.kh-theme-vision .market-shell-toggle,
body.kh-theme-vision .market-total-pill,
body.kh-theme-vision .market-layout-btn,
body.kh-theme-vision .market-advanced-toggle,
body.kh-theme-vision #market-filters-panel .modern-grouped {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid color-mix(in srgb, var(--text-color) 56%, transparent) !important;
    box-shadow: none !important;
}

body.kh-theme-vision .market-mode-tab {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid color-mix(in srgb, var(--text-color) 56%, transparent) !important;
}

body.kh-theme-vision .market-mode-tab.active,
body.kh-theme-vision .market-mode-chip.active,
body.kh-theme-vision .market-layout-btn.active,
body.kh-theme-vision .market-total-pill[data-market-total-mode="filtered"] {
    border-color: var(--accent-color) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-color) 24%, transparent),
        0 0 14px color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
}

body.kh-theme-vision .market-mode-chip-label,
body.kh-theme-vision .market-total-pill-label,
body.kh-theme-vision .market-layout-btn,
body.kh-theme-vision .market-shell-toggle {
    font-weight: 900 !important;
}

body.kh-theme-vision .market-total-pill-label {
    opacity: 1 !important;
}

body.kh-theme-vision .market-total-pill-count {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 2px solid var(--accent-color) !important;
    box-shadow: none !important;
}

body.kh-theme-vision .modern-row {
    border-bottom-color: color-mix(in srgb, var(--text-color) 32%, transparent) !important;
}

body.kh-theme-vision .modern-cell.border-r {
    border-right-color: color-mix(in srgb, var(--text-color) 32%, transparent) !important;
}
/* Cards/blocks more contrast */
body.kh-theme-vision .card,
body.kh-theme-vision .trip-card,
body.kh-theme-vision .deal-card,
body.kh-theme-vision .kh-card,
body.kh-theme-vision .sheet,
body.kh-theme-vision .bottom-sheet,
body.kh-theme-vision .popup-content {
    background: var(--card-bg) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 35%, transparent);
}

/* Inputs */
body.kh-theme-vision input,
body.kh-theme-vision textarea,
body.kh-theme-vision select {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 45%, transparent) !important;
}

/* Controls readability */
body.kh-theme-vision .kh-theme-toggle {
    font-weight: 900;
    border: 2px solid color-mix(in srgb, var(--text-color) 45%, transparent);
    background: var(--card-bg);
}

/* Activity rows in VISION: компактно, но читаемо */
body.kh-theme-vision .kh-console-list {
    gap: 2px;
}
body.kh-theme-vision .kh-log-row {
    font-size: 15px;
    line-height: 1.25;
    padding: 2px 10px;
    margin: 0;
    border-radius: 10px;
    transition: background-color 120ms ease, outline-color 120ms ease;
}
body.kh-theme-vision .kh-log-time {
    font-weight: 900;
    color: var(--text-color);
    min-width: 44px;
    margin-right: 6px;
}
body.kh-theme-vision .kh-log-item {
    color: var(--text-color);
    opacity: 1;
}

/* Pressed visibility */
body.kh-theme-vision .kh-log-row:active,
body.kh-theme-vision .kh-theme-toggle:active,
body.kh-theme-vision .btn:active,
body.kh-theme-vision .chip:active,
body.kh-theme-vision .tr-chip:active,
body.kh-theme-vision .tab-btn:active {
    background: color-mix(in srgb, var(--accent-color) 22%, var(--card-bg));
}

/* Focus visibility */
body.kh-theme-vision .btn:focus-visible,
body.kh-theme-vision .tab-btn:focus-visible,
body.kh-theme-vision .kh-log-row:focus-visible,
body.kh-theme-vision .kh-theme-toggle:focus-visible,
body.kh-theme-vision .chip:focus-visible,
body.kh-theme-vision .tr-chip:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}



/* === HOTFIX: Profile top stripe elimination WITHOUT DOM surgery ===
   The thin "stuck" stripe was coming from sticky .detail-navbar inside #view-profile.
   We hide it only in Profile to avoid layout/DOM regressions.
*/
#view-profile .detail-navbar {
    display: none !important;
    position: static !important;
    top: auto !important;
    border-bottom: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure profile view content starts flush (no reserved navbar gap) */
#view-profile {
    padding-top: 0 !important;
}


/* === NAV: Back button pinned like language switcher (no scroll) ===
   Rationale:
   - Language switcher is positioned absolute at top:15px/left:15px inside views.
   - Back buttons must not move with scroll; we place them absolute at top-right in the view header zone.
   - We DO NOT use sticky navbars or fixed overlays to avoid "stripe" and layout regressions.
*/
.view { position: absolute; }

.detail-navbar { position: relative; }

.detail-navbar .btn-back {
    position: absolute;
    top: 15px;
}

/* === PROFILE STATUS STRIP === */
.profile-status-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: -6px 0 20px;
}

.profile-status-pill {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.05);
}

.profile-status-pill-label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--hint-color);
    margin-bottom: 4px;
}

.profile-status-pill-value {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-status-pill-value.is-ok {
    color: #1f9d55;
}

.profile-status-pill-value.is-warn {
    color: #d9822b;
}

@media (max-width: 420px) {
    .profile-status-strip {
        grid-template-columns: 1fr;
    }
}
    right: 15px;
    z-index: 9006;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* If an <img> icon is used, keep it visible for current theme */
.detail-navbar .btn-back img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* If the back button renders as a text arrow fallback, keep it readable */
.detail-navbar .btn-back,
.detail-navbar .btn-back * {
    color: var(--text-color);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

/* Ensure navbar title remains centered even when back is absolute */
.detail-navbar {
    padding-right: 44px; /* reserve space so title doesn't run under back button */
    padding-left: 44px;  /* symmetric with right */
}

/* =========================================================
   KH ROUTE (Trip Details) - Variant 4 (compact pill + underline)
   Target: .kh-sheet-route (detal'ka A→B)
   - Minimal vertical space
   - Works in light/dark/vision themes
   ========================================================= */

.kh-sheet-route{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  margin: 6px auto 10px;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: .2px;
  line-height: 1.15;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: var(--text-color);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.45) inset;
  position: relative;
}

.kh-sheet-route::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:-6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(0,170,255,.0),
    rgba(0,170,255,.55),
    rgba(0,255,120,.50),
    rgba(255,190,0,.45),
    rgba(255,80,160,.0)
  );
  opacity:.85;
  filter: blur(.2px);
  pointer-events:none;
}

/* Explicit dark theme hooks (Telegram WebApp typically sets data-theme) */
body[data-kh-scheme="dark"] .kh-sheet-route,
body.kh-scheme-dark .kh-sheet-route,
body[data-theme="dark"] .kh-sheet-route,
body.kh-vision-dark .kh-sheet-route,
.dark-mode .kh-sheet-route{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 14px 26px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.10) inset;
}

/* Fallback: OS dark mode */
@media (prefers-color-scheme: dark){
  .kh-sheet-route{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 14px 26px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.10) inset;
  }
}

/* Slightly tighter on very small screens */
@media (max-width: 360px){
  .kh-sheet-route{ font-size: 15px; padding: 6px 10px; }
  .kh-sheet-route::after{ left:10px; right:10px; }
}

/* If route is inside hero, keep spacing minimal */
.kh-sheet-hero .kh-sheet-route{ margin-top: 4px; margin-bottom: 8px; }


/* KH PATCH: utility hidden class (used by JS patches) */
.kh-hidden{display:none!important;}

/* ==========================================================
   KH TRANSPORT "MY" TABS - Segmented control (Active/History)
   Canon: nicer pills, counts as badges, no regressions
   ========================================================== */

.tr-my-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tr-my-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.tr-my-tab-label {
  display: inline-block;
  line-height: 1;
}

.tr-my-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.tr-my-tab.active {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.20);
}

.tr-my-tab.active .tr-my-tab-count {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
}

.tr-my-tab:active {
  transform: translateY(1px);
}

.tr-my-tab:focus {
  outline: none;
}

@media (max-width: 420px) {
  .tr-my-tabs { margin: 8px 0 6px; gap: 6px; padding: 3px; border-radius: 13px; }
  .tr-my-tab { padding: 9px 10px; border-radius: 11px; font-size: 13px; }
  .tr-my-tab-count { min-width: 20px; height: 18px; padding: 0 5px; font-size: 12px; }
}

/* === [KH][SELLING] Scoped modern form canon === */
.sell-wrapper.kh-sell-form-scope .modern-input-group:not(.kh-manual-input-group) {
    background: var(--input-bg);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    transition: border-color var(--anim-fast) var(--anim-ease),
                background var(--anim-fast) var(--anim-ease),
                box-shadow var(--anim-fast) var(--anim-ease),
                transform var(--anim-fast) var(--anim-ease);
}

.sell-wrapper.kh-sell-form-scope .modern-input-group:not(.kh-manual-input-group):focus-within {
    border-color: var(--button-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 1px rgba(38,132,255,0.1);
    transform: translateY(-1px);
}

.sell-wrapper.kh-sell-form-scope .modern-input-group:not(.kh-manual-input-group) .modern-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hint-color);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    margin-left: 0;
}

.sell-wrapper.kh-sell-form-scope .modern-input:not(.kh-manual-text-input) {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    padding: 4px 0;
    outline: none;
    margin: 0;
    box-shadow: none;
}

.sell-wrapper.kh-sell-form-scope .modern-input:not(.kh-manual-text-input):focus {
    border-color: transparent;
    box-shadow: none;
}

.sell-wrapper.kh-sell-form-scope .modern-input.stepper-input {
    text-align: center;
    font-weight: 600;
    flex: 1;
}

.sell-wrapper.kh-sell-form-scope .modern-input.readonly {
    background-color: transparent;
    caret-color: transparent;
    cursor: pointer;
    text-overflow: ellipsis;
}

.sell-wrapper.kh-sell-form-scope .modern-input::placeholder {
    color: var(--hint-color, #9ca3af);
    opacity: 0.6;
    font-weight: 400;
}

/* === [KH][APP HTML] Inline style cleanup helpers === */
.kh-hidden {
    display: none;
}

.kh-home-lang-switcher-pos {
    position: absolute;
    top: 10px !important;
    left: 10px !important;
    z-index: 100 !important;
}

.kh-brand-logo-clickable {
    cursor: pointer;
    transition: opacity 0.3s;
    margin-top: 10px;
    transform: scale(1.2);
}

.kh-console-loader-inline {
    display: none;
    text-align: center;
    padding: 20px;
}

.kh-navbar-offset-main {
    margin: -15px -15px 15px -15px;
}

.kh-navbar-offset-market {
    margin: -15px -15px 8px -15px;
}

.kh-back-icon-img {
    height: 28px;
    width: auto;
}

.kh-grid-offset-top {
    margin-top: 20px;
}

.kh-transport-header-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    min-height: 32px;
}

.kh-transport-title-main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: calc(100% - 210px);
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.kh-transport-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    position: relative;
    z-index: 20;
}

.kh-transport-link-help {
    font-size: 14px;
    color: var(--button-color);
    cursor: pointer;
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
}

.kh-transport-link-my {
    font-size: 14px;
    color: var(--button-color);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.kh-transport-back-btn {
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kh-transport-filter-row-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kh-transport-city-cell {
    flex: 1;
    position: relative;
}

.kh-transport-city-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: var(--input-bg);
}

.kh-transport-swap-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128,128,128,0.1);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-color);
    font-size: 18px;
}

.kh-transport-quick-date-chip {
    background: rgba(128,128,128,0.1);
    border: none;
}

.kh-transport-list-padding {
    padding-bottom: 80px;
}

.kh-transport-load-more {
    width: 100%;
    margin: 20px 0;
    display: none;
}
/* === /[KH][APP HTML] Inline style cleanup helpers === */

/* === [KH][TRANSPORT] Legacy app.js injected UI moved to stylesheet === */
#lbl-services-header, 
#lbl-settings-header, 
#lbl-about-title,
#lbl-my-ads-header,
#lbl-hist-title, 
#lbl-subs-title {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

#lbl-market-header {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

.kh-lang-switcher {
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: var(--bg-color);
    border-radius: 8px;
}

#filters-transport {
    margin-top: 6px;
}

#filters-transport .filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0;
}

#filters-transport input[type="text"],
#filters-transport input[type="search"],
#filters-transport .filter-input {
    flex: 1 1 140px;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: var(--secondary-bg-color);
    color: var(--text-color);
    outline: none;
}

#filters-transport input::placeholder {
    color: var(--hint-color);
}

#filters-transport .role-filter-group {
    display: flex;
    width: 100%;
    gap: 8px;
}

#filters-transport .role-filter {
    flex: 1;
    height: 36px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#filters-transport .role-filter.active {
    background: var(--button-color);
    color: var(--button-text-color);
    border-color: transparent;
}

.card-note {
    margin-top: 8px;
    color: var(--hint-color);
    font-size: 13px;
    line-height: 1.25;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.kh-sheet {
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
}

.kh-sheet-body {
    flex: 1;
    min-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
/* === /[KH][TRANSPORT] Legacy app.js injected UI moved to stylesheet === */

/* === [KH][APP HTML] Inline style cleanup helpers v2 === */
.kh-navbar-offset-profile {
    margin: -15px -15px 10px -15px;
}

.kh-loader-fav {
    display: block;
    margin-top: 50px;
}

.kh-profile-section-label {
    margin-left: 15px;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--hint-color);
    font-weight: 600;
}

.kh-profile-version-block {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.kh-profile-version-logo {
    height: 20px;
    filter: grayscale(1);
    margin: 0 auto;
}

.kh-profile-version-text {
    font-size: 11px;
    margin-top: 5px;
}

.kh-about-topbar {
    position: relative;
    margin: -5px 0 15px 0;
    min-height: 38px;
}

.kh-about-topbar-btn {
    position: absolute;
    top: 0;
    z-index: 12;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.kh-about-topbar-btn-left {
    left: 0;
}

.kh-about-topbar-btn-right {
    right: 0;
}

.kh-about-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-color);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

.kh-about-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 56px;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
}

.kh-history-topbar {
    position: relative;
    margin: -5px 0 15px 0;
    min-height: 38px;
}

.kh-history-spacer {
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    height: 38px;
}

.kh-history-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 64px;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
}

.kh-history-back-btn {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 12;
}

.kh-history-actions {
    text-align: center;
    margin-top: 20px;
}

.kh-history-clear-btn {
    background: none;
    border: none;
    color: var(--hint-color);
    font-size: 13px;
}

.kh-navbar-side-spacer-28 {
    width: 28px;
}

.kh-navbar-side-spacer-24 {
    width: 24px;
}

.kh-navbar-title-simple {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 17px;
}
/* === /[KH][APP HTML] Inline style cleanup helpers v2 === */


/* [SG-Next-18][BACK NAV] Compact mirrored back/close buttons */
.kh-unified-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.kh-unified-back-btn:hover,
.kh-unified-back-btn:focus-visible {
    background: color-mix(in srgb, var(--button-color) 10%, transparent) !important;
    outline: none !important;
}

.kh-unified-back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
}

.kh-unified-back-text {
    display: none !important;
}

.kh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.detail-navbar .btn-back.kh-unified-back-btn,
.detail-navbar .btn-back.kh-navbar-back.kh-unified-back-btn {
    position: absolute !important;
    left: auto !important;
    right: 12px !important;
    top: 9px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    z-index: 120 !important;
}

.detail-navbar .btn-back.kh-unified-back-btn img,
.detail-navbar .btn-back.kh-unified-back-btn .kh-back-icon-img,
.detail-navbar .btn-back.kh-unified-back-btn .kh-back-fallback,
.kh-unified-back-btn img,
.kh-unified-back-btn .kh-back-icon-img,
.kh-unified-back-btn .kh-back-fallback {
    display: none !important;
}

.kh-navbar-centered {
    grid-template-columns: 72px 1fr 72px;
}

.kh-navbar-spacer {
    width: 72px;
}

.detail-navbar {
    min-height: 54px;
    padding-left: 44px !important;
    padding-right: 44px !important;
}

.kh-history-topbar .kh-unified-back-btn,
.kh-transport-actions-row .kh-unified-back-btn {
    position: static !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

.kh-transport-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kh-modal-top-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
}

#vip-modal {
    position: relative;
}

.kh-rules-back-btn {
    margin: 0 0 10px 0 !important;
}

@media (max-width: 380px) {
    .kh-unified-back-btn {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
    .kh-unified-back-arrow {
        width: 34px;
        height: 34px;
        font-size: 21px;
    }
}