/**
 * D-VISUAL · mobil nézet (M_*.html)
 * Teljes képernyő, kisebb modul-logók, alsó panel / csúszka.
 */
html.m-mobile {
    --m-topbar-h: 52px;
    --m-mod-h: 44px;
    --m-mod-icon: 38px;
    --m-menu-row-h: 32px;
    /* LAND / e-Közmű / főoldal: modulcsík + menüsor — puffer, ne takarja a térkép */
    --m-appbar-stack-h: calc(var(--m-mod-h) + var(--m-menu-row-h) + 26px);
    /* D-Közmű Viewer: alsó fájlsáv + státusz (~1 sor) */
    --m-dkm-bottom-bar: 72px;
    --m-footer-compact: 48px;
    --m-sheet-h: min(38vh, 320px);
    --m-sheet-max: 78vh;
}

html.m-mobile,
html.m-mobile body {
    height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

html.m-mobile body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ——— Topbar: alacsonyabb, kisebb logók ——— */
html.m-mobile .app-topbar,
html.m-mobile .global-top,
html.m-mobile .topbar {
    min-height: var(--m-topbar-h) !important;
    padding: 2px 6px 4px !important;
}

html.m-mobile :root,
html.m-mobile {
    /* Kétsoros fejléc: a régi 52px miatt a térkép rátakarta a menüket (érintés „nem működik”) */
    --topbar-h: var(--m-appbar-stack-h) !important;
    --mod-h: var(--m-mod-h) !important;
    --mod-icon: var(--m-mod-icon) !important;
    --global-nav-h: var(--m-appbar-stack-h) !important;
}

html.m-mobile .module-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

html.m-mobile .mod-tile {
    min-width: var(--m-mod-h) !important;
    height: var(--m-mod-h) !important;
    min-height: var(--m-mod-h) !important;
    max-height: var(--m-mod-h) !important;
    flex-shrink: 0;
}

html.m-mobile .mod-tile img {
    max-height: var(--m-mod-icon) !important;
    max-width: 72px !important;
}

html.m-mobile .topbar-menus .menu-trigger,
html.m-mobile .menu-dd > button.menu-trigger,
html.m-mobile header.topbar .menu-btn {
    font-size: 11px !important;
    padding: 0 8px !important;
    height: 30px !important;
    max-height: 30px !important;
    touch-action: manipulation;
}

html.m-mobile .breadcrumb-bar {
    display: none !important;
}

/*
 * LAND / e-Közmű (.app-topbar): ugyanaz a kétsoros minta mint a főoldal / BIM — teljes szélességű modulcsík, alatta menük
 */
html.m-mobile .app-topbar {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 6px !important;
}

/* Fejléc + lenyílók mindig a Leaflet / térkép fölött (mobil érintés) */
html.m-mobile .app-topbar,
html.m-mobile header.topbar {
    z-index: 9000 !important;
    position: fixed !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

html.m-mobile .app-topbar .menu-dd-panel,
html.m-mobile header.topbar .menu-panel {
    z-index: 9050 !important;
}

/* Lenyílók: balra igazítva, ne csússzanak ki a képernyő bal szélén (right:0 + keskeny gomb = levágás) */
html.m-mobile .menu-dd-panel,
html.m-mobile .menu-dd.open .menu-dd-panel,
html.m-mobile .menu-dd.open .menu-panel {
    left: 0 !important;
    right: auto !important;
    min-width: min(300px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
}

html.m-mobile header.topbar .topbar-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: visible !important;
}

html.m-mobile header.topbar .module-strip {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html.m-mobile header.topbar .menus {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    /* overflow-x: auto levágta a lenyíló paneleket — ne legyen rejtett overflow */
    overflow: visible !important;
    padding-bottom: 2px;
}

/* M_shell: menük ebbe kerülnek; a GPS gomb a sor jobb szélén marad */
html.m-mobile .m-topbar-menus-inner {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
}

/* Fix jobb felső: GPS + koordináta sáv (M_shell.js, body gyerek) */
html.m-mobile #m-nav-gps-fixed {
    position: fixed !important;
    top: max(6px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    z-index: 12000 !important;
    height: 36px !important;
    min-width: 48px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #f0f6fc !important;
    background: rgba(22, 27, 34, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html.m-mobile #m-nav-gps-fixed:disabled {
    opacity: 0.65;
}

html.m-mobile #m-nav-coord-strip {
    position: fixed !important;
    top: max(46px, calc(env(safe-area-inset-top, 0px) + 42px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    max-width: min(calc(100vw - 16px), 320px) !important;
    z-index: 11990 !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #e6edf3 !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    text-align: right !important;
    word-break: break-word !important;
    pointer-events: none !important;
    display: none;
}

html.m-mobile #m-nav-coord-strip.is-on {
    display: block !important;
}

html.m-mobile .app-topbar .topbar-row1 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

html.m-mobile .app-topbar .topbar-row1 .module-strip {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html.m-mobile .app-topbar .topbar-menus {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible !important;
    padding-bottom: 2px;
}

html.m-mobile .app-shell {
    top: var(--m-appbar-stack-h) !important;
    bottom: 0 !important;
    min-height: calc(100dvh - var(--m-appbar-stack-h)) !important;
}

/*
 * BIM / UTILITY / SPACE: .global-top-inner — modulcsík + menük egy sorban osztoztak,
 * a csík min-width: 0 miatt összenyomódott (~4 csempe). Sor: teljes szélességű görgethető csík, alatta a 3 menü.
 */
html.m-mobile .global-top-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
}

html.m-mobile .global-top-inner .module-strip {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html.m-mobile .global-top-inner .top-menus,
html.m-mobile .global-top-inner .menus {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible !important;
    padding-bottom: 2px;
}

html.m-mobile .global-top .menu-btn {
    height: var(--m-menu-row-h) !important;
    max-height: var(--m-menu-row-h) !important;
    font-size: 11px !important;
    padding: 0 8px !important;
}

/* Kétsoros fejléc: ne vágja le a 52px min-height */
html.m-mobile header.global-top {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 6px !important;
}

/* Shell: a fix 128px helyett a tényleges kétsoros fejléc (modulcsík + menüsor) */
html.m-mobile header.global-top + .shell {
    padding-top: calc(var(--m-mod-h) + var(--m-menu-row-h) + 18px) !important;
}

/* ——— Fő felület: teljes magasság, térkép nagyobb ——— */
html.m-mobile .main-stage,
html.m-mobile #map-container,
html.m-mobile #map {
    min-height: 0 !important;
}

html.m-mobile .page-footer {
    display: none !important;
}

html.m-mobile .footer-disclaimer {
    display: none !important;
}

/* ——— Oldalsáv → alsó „lap” (peek), csúsztatható magasság ——— */
html.m-mobile .unified-sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--m-sheet-h) !important;
    max-height: var(--m-sheet-max) !important;
    min-height: 120px !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px 14px 0 0;
    z-index: 2000 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
    transition: height 0.08s ease-out;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html.m-mobile .app-shell.sidebar-collapsed .unified-sidebar {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

html.m-mobile .sidebar-toggle {
    top: calc(var(--m-appbar-stack-h) + 6px) !important;
    z-index: 2100 !important;
}

html.m-mobile .main-stage {
    flex: 1 1 auto !important;
    height: calc(100dvh - var(--m-appbar-stack-h) - var(--m-sheet-h)) !important;
    min-height: 120px !important;
}

html.m-mobile .app-shell.sidebar-collapsed .main-stage {
    height: calc(100dvh - var(--m-appbar-stack-h)) !important;
}

/* index.html · .shell — oldalsáv alul */
html.m-mobile .shell-wrap {
    padding-top: var(--m-appbar-stack-h) !important;
    padding-bottom: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

html.m-mobile .shell {
    flex-direction: column !important;
    height: calc(100dvh - var(--m-appbar-stack-h)) !important;
}

html.m-mobile .shell .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--m-sheet-h) !important;
    max-height: var(--m-sheet-max) !important;
    min-height: 100px !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px 14px 0 0;
    z-index: 2000 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    order: 2;
    display: flex !important;
    flex-direction: column !important;
}

html.m-mobile .shell .sidebar .panel {
    margin-bottom: 8px !important;
}

html.m-mobile .shell .stage {
    position: relative !important;
    flex: 1 1 auto !important;
    order: 1;
    height: calc(100dvh - var(--m-appbar-stack-h) - var(--m-sheet-h)) !important;
    min-height: 100px !important;
}

/* Fogantyú a shell.js illeszti */
html.m-mobile .m-sheet-handle {
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    background: linear-gradient(180deg, #21262d 0%, #161b22 100%);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

html.m-mobile .m-sheet-handle:active {
    cursor: grabbing;
}

html.m-mobile .m-sheet-handle::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
}

html.m-mobile .unified-sidebar-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 14px !important;
}

html.m-mobile .sidebar-section h2 {
    font-size: 10px !important;
    margin-bottom: 6px !important;
}

html.m-mobile .layer-hint {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* Adat / attribútum panelek: kompaktabb */
html.m-mobile .ek-attr-panel {
    max-height: 45vh !important;
    border-radius: 12px 12px 0 0 !important;
}

html.m-mobile .modal-card {
    max-height: 85dvh !important;
    overflow-y: auto !important;
}

/* IFC viewer (M_ifc_viewer): bal panel -> alsó lap, nagy 3D nézet */
html.m-mobile:has(#viewer-container) {
    --m-sheet-h: min(30vh, 240px);
    --m-ifc-topbar-h: 40px;
}

html.m-mobile aside.left-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--m-sheet-h) !important;
    max-height: var(--m-sheet-max) !important;
    min-height: 100px !important;
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px 14px 0 0;
    z-index: 2000 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
    padding: 4px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

html.m-mobile #viewer-container {
    left: 0 !important;
    right: 0 !important;
    top: var(--m-ifc-topbar-h) !important;
    bottom: var(--m-sheet-h) !important;
}

html.m-mobile .top-bar {
    min-height: 0 !important;
    padding: 3px 8px 4px !important;
    pointer-events: auto !important;
    background: rgba(12, 14, 18, 0.82) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 500 !important;
}

html.m-mobile .top-bar-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
}

html.m-mobile .tb-spacer,
html.m-mobile .tb-right,
html.m-mobile .logo-utility-wrap,
html.m-mobile .brand-logo-right {
    display: none !important;
}

html.m-mobile .brand-logo-kozmu {
    height: 32px !important;
    max-height: 32px !important;
    max-width: min(180px, 72vw) !important;
    transform: none !important;
}

html.m-mobile aside.left-panel .panel-head {
    margin: 2px 0 6px !important;
    gap: 4px !important;
}

html.m-mobile aside.left-panel .panel-log {
    display: none !important;
}

html.m-mobile aside.left-panel .panel-log.err {
    display: block !important;
    flex-shrink: 0;
    max-width: 100%;
}

html.m-mobile aside.left-panel .panel-title {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
}

html.m-mobile aside.left-panel .top-actions .btn {
    padding: 5px 9px !important;
    font-size: 10px !important;
}

html.m-mobile aside.left-panel .props-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

html.m-mobile aside.left-panel h4 {
    font-size: 10px !important;
    margin: 0 0 4px !important;
}

html.m-mobile aside.left-panel .hint {
    font-size: 9px !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
}

/* M_bim keret: felesleges második sáv (óriáslogo + crumb) elrejtése mobilon */
html.m-mobile header.global-top + .shell > header.bar {
    display: none !important;
}

html.m-mobile header.global-top + .shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
}

html.m-mobile header.global-top + .shell .split {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

html.m-mobile header.global-top + .shell .pane iframe {
    min-height: 0 !important;
}

/* BIM / globális layout */
html.m-mobile .bim-wrap,
html.m-mobile body > .viewer-root {
    padding-top: var(--m-topbar-h) !important;
}

html.m-mobile .legal-mini,
html.m-mobile .menu-dd-panel p {
    font-size: 10px !important;
}

/* Jogi modál: nagyobb érintési cél, alsó „lap” (thumb), iOS-barát pipa + Belépek */
html.m-mobile .modal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    touch-action: manipulation;
}

html.m-mobile .modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(88dvh, 640px) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 14px 18px !important;
    -webkit-overflow-scrolling: touch;
}

html.m-mobile .modal .modal-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

html.m-mobile .modal .modal-actions label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 4px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html.m-mobile .modal .modal-actions input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

html.m-mobile .modal .modal-actions #enterBtn {
    min-height: 48px !important;
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
}

/* Jogi belépés: iOS-en a pipa néha késik — touchend után azonnali szinkron */
html.m-mobile #legalModal #acceptChk {
    touch-action: manipulation;
}

/* ——— D-Közmű Viewer (M_Dkozmu_Viewer_VK): jobb panel -> alsó keskeny sáv (GeoJSON) ——— */
html.m-mobile #side-panel.control-panel {
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px 12px 0 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    gap: 6px 10px !important;
    z-index: 1000 !important;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.2) !important;
}

html.m-mobile .dkm-desktop-only {
    display: none !important;
}

html.m-mobile #side-panel .file-input-wrapper {
    flex: 1 1 200px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 5px 8px !important;
    border-width: 1px dashed #bdc3c7 !important;
}

html.m-mobile #side-panel .dkm-file-title,
html.m-mobile #side-panel .dkm-file-hint {
    display: none !important;
}

html.m-mobile #side-panel .custom-file-upload {
    padding: 6px 10px !important;
    font-size: 12px !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

html.m-mobile #side-panel .status-msg {
    flex: 1 0 100% !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    max-height: 2.6em;
    overflow: hidden;
}

html.m-mobile body:has(#side-panel.control-panel) #map {
    bottom: calc(var(--m-dkm-bottom-bar) + env(safe-area-inset-bottom, 0px)) !important;
}

html.m-mobile .kzm-legend {
    max-width: min(92vw, 220px) !important;
    max-height: min(26vh, 190px) !important;
    padding: 5px 7px 6px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    background: rgba(255, 255, 255, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    outline: none !important;
    backdrop-filter: blur(10px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
    color: #1e293b !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
}

html.m-mobile .kzm-legend:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}

html.m-mobile .kzm-legend strong {
    font-size: 11px !important;
    margin-bottom: 1px !important;
}

html.m-mobile .kzm-legend .kzm-legend-sub {
    font-size: 8px !important;
    margin-bottom: 3px !important;
    color: #5d6d7e !important;
}

html.m-mobile .kzm-legend-row {
    margin: 0 0 1px !important;
    font-size: 9px !important;
    gap: 4px !important;
    line-height: 1.15 !important;
}

html.m-mobile .kzm-legend .kzm-legend-swatch {
    width: 9px !important;
    height: 9px !important;
}

html.m-mobile .leaflet-bottom.leaflet-left .kzm-legend {
    margin-bottom: calc(var(--m-dkm-bottom-bar) + 4px) !important;
    margin-left: 6px !important;
}

/* Toast: mobilon a footer rejtett + alsó „lap” van — ne a régi --footer-h, hanem a lap fölé */
html.m-mobile .toast {
    bottom: calc(var(--m-sheet-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 25000 !important;
    max-width: min(94vw, 440px) !important;
    pointer-events: none;
}

/* ——— D-Közmű: negyedik top gomb (≈2× széles) + felugró promo ——— */
button.dkozmu-top-btn {
    flex: 0 1 auto;
    min-width: clamp(156px, 40vw, 232px);
    max-width: min(244px, 92vw);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(31, 111, 235, 0.72);
    background: linear-gradient(180deg, rgba(31, 111, 235, 0.38) 0%, rgba(13, 17, 23, 0.92) 100%);
    color: #e6edf3;
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 3px 10px 4px;
    box-sizing: border-box;
}

button.dkozmu-top-btn .dkozmu-top-host {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #bfdbfe;
}

button.dkozmu-top-btn .dkozmu-top-sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #9fb0ca;
}

html.m-mobile button.dkozmu-top-btn {
    min-height: 30px !important;
    height: auto !important;
    max-height: none !important;
    padding: 3px 8px 4px !important;
}

@media (max-width: 360px) {
    button.dkozmu-top-btn .dkozmu-top-host {
        font-size: 10px;
    }
}

#dkozmuPromoModal {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
        max(20px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

#dkozmuPromoModal.is-open {
    display: flex;
}

#dkozmuPromoModal .dkozmu-promo-dialog {
    position: relative;
    width: min(400px, 100%);
    max-height: min(88vh, 640px);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, #121d33 0%, #0d1117 55%);
    padding: 22px 20px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    text-align: center;
    box-sizing: border-box;
}

#dkozmuPromoModal .dkozmu-promo-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

#dkozmuPromoModal .dkozmu-promo-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

#dkozmuPromoModal .dkozmu-promo-logo {
    display: block;
    margin: 0 auto 12px;
    max-height: 88px;
    width: auto;
    max-width: min(300px, 86vw);
    object-fit: contain;
}

#dkozmuPromoModal .dkozmu-promo-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f0f6fc;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#dkozmuPromoModal .dkozmu-promo-body {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #c9d1d9;
    text-align: center;
}

#dkozmuPromoModal .dkozmu-promo-cta {
    display: inline-block;
    margin-top: 14px;
    padding: 11px 18px;
    border-radius: 10px;
    background: #1f6feb;
    border: 1px solid #388bfd;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

#dkozmuPromoModal .dkozmu-promo-cta:hover {
    background: #388bfd;
}