/* Honda Tuner V120 — automatic phone/tablet landscape workspace.
   Activated by existing four-page-mobile-mode.js via html.ht-four-mobile-landscape.
   Tuning is intentionally not opted into this stylesheet/script. */

html.ht-four-mobile-landscape {
    --ht-ls-vh: 100dvh;
    --ht-ls-topbar: 48px;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.ht-four-mobile-landscape body:not(.tuning-desktop-view) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

html.ht-four-mobile-landscape body:not(.tuning-desktop-view) *,
html.ht-four-mobile-landscape body:not(.tuning-desktop-view) *::before,
html.ht-four-mobile-landscape body:not(.tuning-desktop-view) *::after {
    box-sizing: border-box;
}

/* ===== Shared Honda Tuner application shell ===== */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view),
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-app-shell,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-main-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    zoom: 1 !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-app-shell {
    display: block !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-sidebar {
    display: none !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-main-shell {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    overflow: hidden !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) :is(.ws-topbar,.ld-topbar,.security-topbar) {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 var(--ht-ls-topbar) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--ht-ls-topbar) !important;
    min-height: var(--ht-ls-topbar) !important;
    max-height: var(--ht-ls-topbar) !important;
    margin: 0 !important;
    padding: 4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left)) !important;
    overflow: visible !important;
    z-index: 120 !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar-brand,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar-brand > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar-brand h1 {
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar-brand :is(small,p) {
    font-size: .52rem !important;
    line-height: 1.05 !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-mobile-topbar-menu-toggle {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}

/* No document scroll: all unavoidable overflow moves inside the workspace. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) :is(
    .ws-dashboard,
    .ld-dashboard,
    .security-dashboard,
    .sk-dashboard,
    .filelib-dashboard,
    .admin-workspace
) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: calc(100% - 8px) !important;
    max-width: none !important;
    margin: 4px !important;
    padding: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-footer-status {
    flex: 0 0 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    font-size: .52rem !important;
    overflow: hidden !important;
}

/* Main dashboard bottom toolbar remains visible but no longer contributes to page height. */
html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-mobile-nav.ws-mobile-quickbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    transform: none !important;
    zoom: 1 !important;
    z-index: 500 !important;
}
html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-dashboard {
    padding-bottom: 50px !important;
}

/* ===== Live Data ===== */
html.ht-four-mobile-landscape body.live-data-redesign .ld-dashboard {
    display: grid !important;
    grid-template-rows: auto auto minmax(0,1fr) !important;
    gap: 4px !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-hero-card {
    padding: 5px !important;
    grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr) !important;
    gap: 5px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-hero-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-hero-title h2 { font-size: .88rem !important; }
html.ht-four-mobile-landscape body.live-data-redesign .ld-hero-title p { font-size: .54rem !important; }
html.ht-four-mobile-landscape body.live-data-redesign .ld-actions {
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
    gap: 3px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-action {
    min-height: 30px !important;
    padding: 3px !important;
    font-size: .52rem !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-info-strip {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-info-card {
    min-height: 40px !important;
    padding: 3px 5px !important;
    gap: 4px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-info-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-content-grid {
    min-height: 0 !important;
    height: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.live-data-redesign :is(.ld-live-panel,.ld-table-card,.ld-tab-pane,.live-meter-board) {
    min-height: 0 !important;
    max-height: 100% !important;
}
html.ht-four-mobile-landscape body.live-data-redesign .ld-live-panel { overflow: hidden !important; }
html.ht-four-mobile-landscape body.live-data-redesign .ld-tab-pane {
    overflow: auto !important;
    overscroll-behavior: contain !important;
}

/* ===== ROM / EEPROM / Smartkey ===== */
html.ht-four-mobile-landscape body.security-redesign .security-dashboard,
html.ht-four-mobile-landscape body.smartkey-redesign .sk-dashboard {
    gap: 5px !important;
}

/* ===== File Library ===== */
html.ht-four-mobile-landscape body.file-library-redesign .filelib-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}
html.ht-four-mobile-landscape body.file-library-redesign .filelib-hero-card,
html.ht-four-mobile-landscape body.file-library-redesign .filelib-search-card {
    flex: 0 0 auto !important;
    padding: 6px !important;
}
html.ht-four-mobile-landscape body.file-library-redesign .filelib-list-card {
    flex: 0 0 auto !important;
    min-height: min(220px, calc(100dvh - 120px)) !important;
    max-height: calc(100dvh - 96px) !important;
    margin: 0 !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.file-library-redesign :is(.file-library-tab-panel,.table-wrap) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
}

/* ===== Admin ===== */
html.ht-four-mobile-landscape body.admin-redesign .admin-workspace {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* ===== Classic pages: activate/password/log/CAN/compatibility ===== */
html.ht-four-mobile-landscape body:not(.webserial-redesign):not(.login-v112-page):not(.tuning-desktop-view) > .shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left)) !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body:not(.webserial-redesign):not(.login-v112-page):not(.tuning-desktop-view) > .shell > .layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ===== Login ===== */
html.ht-four-mobile-landscape body.login-v112-page .login-v112-shell {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    overflow: hidden !important;
}
html.ht-four-mobile-landscape body.login-v112-page .login-v112-stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* ===== Phone landscape (<~ 560px visible height) ===== */
@media (max-height: 560px) {
    html.ht-four-mobile-landscape { --ht-ls-topbar: 42px; }

    html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) :is(
        .ws-card,.security-hero-card,.security-action-card,.security-help-card,.security-note-card,
        .sk-hero-card,.sk-panel,.ld-hero-card,.ld-info-strip,.ld-live-panel,.ld-side-card,.result-card
    ) { border-radius: 10px !important; }

    /* Main */
    html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-dashboard { gap: 4px !important; }
    html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-card { padding: 6px !important; }
    html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-connect-card {
        display: grid !important;
        grid-template-columns: minmax(130px,.48fr) minmax(0,1.52fr) !important;
        gap: 4px !important;
        align-items: center !important;
    }
    html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-connect-actions {
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        gap: 3px !important;
    }
    html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-work-grid {
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        gap: 4px !important;
    }

    /* Live Data */
    html.ht-four-mobile-landscape body.live-data-redesign .ld-side-column { display: none !important; }
    html.ht-four-mobile-landscape body.live-data-redesign .ld-content-grid { grid-template-columns: 1fr !important; }
    html.ht-four-mobile-landscape body.live-data-redesign .ld-meter-board {
        grid-template-columns: repeat(7,minmax(0,1fr)) !important;
        gap: 3px !important;
    }
    html.ht-four-mobile-landscape body.live-data-redesign .ld-meter-card {
        min-height: 50px !important;
        padding: 4px !important;
    }
    html.ht-four-mobile-landscape body.live-data-redesign .ld-meter-card legend { font-size: .46rem !important; }
    html.ht-four-mobile-landscape body.live-data-redesign .ld-meter-card strong { font-size: .8rem !important; }

    /* ROM / EEPROM / Smartkey */
    html.ht-four-mobile-landscape body.security-redesign :is(.security-hero-card,.security-action-card,.security-help-card,.security-note-card),
    html.ht-four-mobile-landscape body.smartkey-redesign :is(.sk-hero-card,.sk-panel) {
        padding: 6px !important;
    }
    html.ht-four-mobile-landscape body.security-redesign .security-hero-card h1,
    html.ht-four-mobile-landscape body.smartkey-redesign .sk-hero-card h1 { font-size: 1rem !important; }

    /* Library: hide only the summary strip. Functional upload remains reachable
       by scrolling the internal library workspace, never the document body. */
    html.ht-four-mobile-landscape body.file-library-redesign .filelib-summary-grid { display: none !important; }

    /* Admin */
    html.ht-four-mobile-landscape body.admin-redesign .admin-page-panel { padding: 6px !important; }

    /* Classic pages */
    html.ht-four-mobile-landscape body:not(.webserial-redesign):not(.login-v112-page):not(.tuning-desktop-view) :is(.panel,.hero-card,.result-card) {
        padding: 7px !important;
        border-radius: 10px !important;
    }

    /* Login compact 3-column workspace. */
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-brandbar {
        min-height: 34px !important;
        height: 34px !important;
        margin-bottom: 3px !important;
        padding: 0 4px !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-brand img { width: 30px !important; height: 30px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-brand-copy strong { font-size: 1rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-brand-copy small { margin-top: 2px !important; font-size: .48rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-brand-message { display: none !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-stage {
        display: grid !important;
        grid-template-columns: minmax(160px,.72fr) minmax(290px,340px) minmax(280px,1.15fr) !important;
        gap: 7px !important;
        align-items: center !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 4px !important;
        justify-content: center !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-hero-kicker { margin-bottom: 4px !important; font-size: .46rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-hero h2 { font-size: 1.4rem !important; line-height: .92 !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-hero p { margin-top: 5px !important; font-size: .5rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-hero-note { display: none !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-auth {
        max-width: 340px !important;
        padding: 8px 11px !important;
        border-radius: 15px !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-auth-head { margin-bottom: 5px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-eyebrow { font-size: .42rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-auth h1 { margin: 1px 0 !important; font-size: 1.4rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-auth-head p { font-size: .5rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-form { gap: 4px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-form label > span:first-child { font-size: .53rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-field input {
        min-height: 32px !important;
        height: 32px !important;
        padding-left: 32px !important;
        font-size: .65rem !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-field > svg { left: 9px !important; width: 14px !important; height: 14px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-actions { gap: 3px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-actions > button,
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-google {
        min-height: 32px !important;
        height: 32px !important;
        font-size: .64rem !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-or { font-size: .48rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-trial { margin: 4px 0 2px !important; font-size: .48rem !important; line-height: 1.15 !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-trust { display: none !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-tools {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 4px !important;
        align-content: center !important;
        overflow: hidden !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature {
        min-height: 48px !important;
        padding: 4px !important;
        grid-template-columns: 27px minmax(0,1fr) 7px !important;
        gap: 4px !important;
        border-radius: 9px !important;
    }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature-icon { width: 27px !important; height: 27px !important; border-radius: 7px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature-icon svg { width: 18px !important; height: 18px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature-copy strong { font-size: .54rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature-copy small { font-size: .42rem !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-feature-copy em { display: none !important; }
    html.ht-four-mobile-landscape body.login-v112-page .login-v112-footer { display: none !important; }
    html.ht-four-mobile-landscape body.login-v112-page .language-toggle { top: 5px !important; right: 5px !important; min-height: 27px !important; padding: 3px 7px !important; }
    html.ht-four-mobile-landscape body.login-v112-page .theme-toggle { top: 35px !important; right: 5px !important; min-height: 27px !important; padding: 3px 7px !important; }
}

/* Dialogs fit within the visible landscape viewport. */
html.ht-four-mobile-landscape body:not(.tuning-desktop-view) :is(dialog,.ws-help-dialog,.ws-help-dialog-global,.ws-file-library-dialog,.modal-card) {
    max-height: calc(100dvh - 12px) !important;
}
html.ht-four-mobile-landscape body:not(.tuning-desktop-view) :is(.ws-help-dialog-body,.ws-help-dialog-global-body,.modal-body) {
    max-height: calc(100dvh - 70px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Standalone diagnostic/test page without .shell. */
html.ht-four-mobile-landscape body.ht-landscape-simple-page {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ========================================================================
   V121 — landscape glass topbar / hamburger sheet
   - Landscape only via html.ht-four-mobile-landscape
   - Header floats over workspace instead of reserving an opaque strip
   - Header surface is translucent and does not block pointer input underneath
   - Hamburger controls open as a compact translucent right-side glass panel
   - Tuning remains explicitly excluded
   ======================================================================== */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-main-shell {
    position: relative !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    background: rgba(247, 251, 248, .16) !important;
    border-bottom-color: rgba(122, 160, 136, .10) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
    backdrop-filter: blur(9px) saturate(120%) !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}

html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu {
    background: rgba(7, 18, 12, .18) !important;
    border-bottom-color: rgba(96, 220, 139, .10) !important;
}

/* Keep only the real controls interactive; the transparent header itself does
   not steal taps from the workspace underneath. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-mobile-topbar-menu-toggle,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls {
    pointer-events: auto !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-mobile-topbar-menu-toggle {
    background: rgba(247, 251, 248, .62) !important;
    border-color: rgba(122, 160, 136, .22) !important;
    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;
    box-shadow: 0 7px 20px rgba(0,0,0,.10) !important;
}
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-mobile-topbar-menu-toggle {
    background: rgba(8, 23, 15, .64) !important;
    border-color: rgba(85, 214, 130, .22) !important;
}

/* Landscape hamburger sheet: compact glass panel on the right instead of an
   opaque full-width strip. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls {
    left: auto !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    top: calc(100% + 4px) !important;
    width: min(350px, calc(100vw - 18px)) !important;
    min-width: 0 !important;
    max-width: min(350px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 58px) !important;
    padding: 9px !important;
    border: 1px solid rgba(122, 160, 136, .20) !important;
    border-radius: 15px !important;
    background: rgba(247, 251, 248, .58) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.16) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls {
    background: rgba(7, 19, 12, .62) !important;
    border-color: rgba(85, 214, 130, .18) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.28) !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu.is-mobile-menu-open > .ws-top-controls {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
}

/* Make nested controls glass too so the page remains visible behind them. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls > .ws-top-status,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-user-toggle,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-head-icon-btn,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-admin-alert-toggle,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-segmented {
    background: rgba(255,255,255,.40) !important;
    border-color: rgba(112, 148, 124, .18) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls > .ws-top-status,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-user-toggle,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-head-icon-btn,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-admin-alert-toggle,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-segmented {
    background: rgba(17, 36, 25, .50) !important;
    border-color: rgba(85, 214, 130, .16) !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-user-menu,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-user-notice-menu,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-admin-alert-menu {
    background: rgba(247, 251, 248, .86) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
}
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-user-menu,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-user-notice-menu,
html[data-theme="dark"].ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu .ws-admin-alert-menu {
    background: rgba(8, 22, 15, .88) !important;
}

/* ========================================================================
   V122 — landscape toggle-only topbar
   - Hide the entire landscape app topbar surface/brand so it cannot cover UI
   - Keep only the 3-line hamburger toggle visible in the top-right corner
   - Hamburger menu remains available as a floating glass panel when opened
   - Tuning remains explicitly excluded
   ======================================================================== */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
}

/* No logo/title/status strip in landscape: only the hamburger remains. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-topbar-brand,
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-topbar-collapse-toggle {
    display: none !important;
}

html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-mobile-topbar-menu-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 11px !important;
    pointer-events: auto !important;
    z-index: 2147483002 !important;
}

/* The hamburger sheet is detached from the zero-height header and floats at
   the upper-right without creating/occupying a top strip. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls {
    position: fixed !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 42px) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: auto !important;
    width: min(350px, calc(100vw - 18px)) !important;
    max-width: min(350px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 56px - env(safe-area-inset-top)) !important;
    pointer-events: auto !important;
    z-index: 2147483001 !important;
}

/* Old collapsed/focus states must never resurrect the hidden top strip. */
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu.is-collapsed,
html.ht-four-mobile-landscape body.webserial-redesign.ws-persistent-focus:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu {
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu.is-collapsed > .ws-topbar-brand,
html.ht-four-mobile-landscape body.webserial-redesign.ws-persistent-focus:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-topbar-brand {
    display: none !important;
}
html.ht-four-mobile-landscape body.webserial-redesign:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu.is-collapsed > .ws-mobile-topbar-menu-toggle,
html.ht-four-mobile-landscape body.webserial-redesign.ws-persistent-focus:not(.tuning-desktop-view) .ws-topbar.ws-has-mobile-topbar-menu > .ws-mobile-topbar-menu-toggle {
    display: inline-flex !important;
}

/* ========================================================================
   V123 — mobile landscape hamburger user-menu scroll fix
   - Keep the V122 toggle-only topbar behavior unchanged.
   - On the Main page, reserve space above the fixed bottom quickbar so the
     hamburger glass sheet never extends behind the navigation dock.
   - Expand the account submenu inside the hamburger sheet instead of as a
     separate fixed popup. The sheet becomes the only vertical scroll owner,
     so touch-dragging from the email/account details can always reach every
     membership row and Files/Admin/Logout action.
   - No Tuning / ECU / BLE / Flash / ReadROM logic changes.
   ======================================================================== */
html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls {
    max-height: calc(100dvh - 106px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-user-control {
    position: relative !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-user-toggle {
    width: 100% !important;
    max-width: none !important;
}

html.ht-four-mobile-landscape body.webserial-page:not(.live-data-redesign):not(.security-redesign):not(.smartkey-redesign):not(.admin-redesign) .ws-topbar.ws-has-mobile-topbar-menu > .ws-top-controls .ws-user-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 6px 0 0 !important;
    overflow: visible !important;
    transform: none !important;
    touch-action: pan-y !important;
}

/* ========================================================================
   V124 — mobile main-action button compact sizing
   - Keep Main > primary action buttons at a fixed touch-friendly height.
   - Prevent CSS Grid from stretching Tuning / Flash vertically to match the
     taller File Information card in the same mobile dashboard row.
   - Preserve existing button colors, order, feature gates and click behavior.
   - No Tuning editor / ECU / BLE / Flash protocol / ReadROM logic changes.
   ======================================================================== */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
    body.webserial-page.webserial-redesign:not(.tuning-desktop-view) .ws-main-actions-card {
        align-content: start !important;
        grid-auto-rows: max-content !important;
    }

    body.webserial-page.webserial-redesign:not(.tuning-desktop-view) .ws-main-actions-card .ws-main-action,
    body.webserial-page.webserial-redesign:not(.tuning-desktop-view) .ws-main-actions-card #serial-flash-ecu {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        align-self: start !important;
    }
}

/* ========================================================================
   V125 — mobile Tuning Pro full-width primary action
   - Match the Tuning Pro action width to the existing full-row Flash ECU.
   - Keep V124's compact 42px height unchanged.
   - Layout-only change; no click handler, permission, Flash or Tuning logic.
   ======================================================================== */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
    body.webserial-page.webserial-redesign:not(.tuning-desktop-view) .ws-main-actions-card .ws-main-action.is-tuning {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }
}