* {
    box-sizing: border-box;
}

:root {
    --bg: #07101d;
    --surface: #101d2d;
    --surface-2: #152438;
    --border: rgba(160,181,210,.16);

    --text: #f5f7fb;
    --muted: #8392a8;

    --accent: #e68945;
    --accent-soft: rgba(230,137,69,.16);

    --free: #38c87c;
    --busy: #f0b84c;
    --mine: #479bf2;

    --danger: #e65c62;
}

html,
body {
    margin: 0;
    min-height: 100%;

    background:
        radial-gradient(
            circle at 85% 0,
            rgba(230,137,69,.13),
            transparent 28rem
        ),
        var(--bg);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    min-height: 100vh;
}

button {
    font: inherit;
}

.app {
    width: min(1480px, 100%);
    min-height: 100vh;

    margin: 0 auto;

    padding:
        22px 22px
        calc(100px + env(safe-area-inset-bottom));
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    margin-bottom: 18px;
}

.eyebrow,
.drawer-eyebrow {
    color: var(--accent);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .08em;
}

h1 {
    margin: 5px 0 0;

    font-size:
        clamp(28px, 4vw, 42px);

    letter-spacing: -.04em;
}

.subtitle {
    margin-top: 5px;

    color: var(--muted);
    font-size: 13px;
}

.legend {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.legend span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding: 0 11px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: rgba(17,30,47,.72);

    color: #c3ccda;

    font-size: 11px;
    font-weight: 650;
}

.dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.dot.free {
    background: var(--free);
}

.dot.busy {
    background: var(--busy);
}

.dot.mine {
    background: var(--mine);
}

.hall-card {
    border:
        1px solid var(--border);

    border-radius: 20px;

    background:
        rgba(15,28,44,.86);

    overflow: hidden;
}

.hall-toolbar {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 13px 16px;

    border-bottom:
        1px solid var(--border);
}

.hall-toolbar strong {
    display: block;
    font-size: 14px;
}

.hall-toolbar small {
    display: block;

    margin-top: 3px;

    color: var(--muted);
    font-size: 9px;
}

.ghost {
    min-height: 33px;

    padding: 0 10px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    cursor: pointer;
}

.hall-scroll {
    overflow: auto;

    padding: 18px;
}

.hall {
    position: relative;

    width: 760px;
    height: 1500px;

    margin: 0 auto;

    border:
        2px solid rgba(190,202,219,.34);

    border-radius: 10px;

    background:
        #e7e7e7;

    box-shadow:
        inset 0 0 0 1px
        rgba(0,0,0,.12);
}

.table {
    position: absolute;

    min-width: 44px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border:
        2px solid #46a36e;

    border-radius: 7px;

    background: #ccebd5;

    color: #15221a;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 3px 8px rgba(0,0,0,.12);

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}

.table:hover {
    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 7px 16px
        rgba(0,0,0,.18);
}

.table.status-busy {
    border-color: #d19b2e;
    background: #f4d98e;
}

.table.status-mine {
    border-color: #317fd1;
    background: #b7d7fa;
}

.table-large {
    width: 64px;
    height: 48px;
}

.side-row .table,
.cluster .table,
.vertical-row .table {
    position: absolute;
}

.wall {
    position: absolute;
    background: #323232;
}

.wall-top-center {
    left: 160px;
    top: 0;

    width: 260px;
    height: 130px;

    border-left: 5px solid #333;
    border-right: 5px solid #333;
    border-bottom: 5px solid #333;

    background: transparent;
}

.service-zone {
    position: absolute;

    display: flex;
    align-items: flex-end;

    padding: 8px;

    color: #777;
    font-size: 9px;

    border:
        2px solid #777;
}

.z-top-left {
    left: 0;
    top: 0;

    width: 105px;
    height: 150px;

    border-top: 0;
    border-left: 0;
}

.long-table {
    position: absolute;

    height: 12px;

    background: #555;

    border-radius: 3px;
}

.central-long {
    left: 275px;
    top: 480px;

    width: 260px;
}

.lower-long {
    left: 270px;
    top: 880px;

    width: 290px;
}

.zone-label {
    position: absolute;

    color: #888;

    font-size: 9px;
    font-weight: 700;
}

.entrance {
    right: 18px;
    bottom: 20px;
}

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom:
        calc(
            10px +
            env(safe-area-inset-bottom)
        );

    transform:
        translateX(-50%);

    z-index: 50;

    width:
        min(
            720px,
            calc(100% - 24px)
        );

    min-height: 66px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 3px;

    padding: 5px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        rgba(8,18,31,.94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.35);
}

.nav-item {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}

.nav-item.active {
    color: var(--accent);

    background:
        var(--accent-soft);
}

.nav-icon {
    font-size: 18px;
    line-height: 1;
}

.badge {
    position: absolute;

    top: 5px;
    right: 17%;

    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border-radius: 999px;

    background: #ec4f53;

    color: white;

    font-size: 8px;
}

.hidden {
    display: none !important;
}


/* DRAWER */

.drawer-backdrop {
    position: fixed;
    inset: 0;

    z-index: 79;

    visibility: hidden;
    opacity: 0;

    background:
        rgba(0,0,0,.55);

    transition:
        .18s ease;
}

.drawer-backdrop.open {
    visibility: visible;
    opacity: 1;
}

.drawer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 80;

    width:
        min(
            430px,
            100%
        );

    padding:
        18px;

    transform:
        translateX(105%);

    border-left:
        1px solid var(--border);

    background:
        #0b1625;

    box-shadow:
        -20px 0 55px
        rgba(0,0,0,.4);

    transition:
        transform .2s ease;
}

.drawer.open {
    transform:
        translateX(0);
}

.drawer-handle {
    display: none;
}

.drawer-head,
.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.drawer h2,
.modal h2 {
    margin:
        4px 0 0;

    font-size: 24px;
}

.icon-button {
    width: 34px;
    height: 34px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        var(--surface);

    color: var(--text);

    font-size: 20px;

    cursor: pointer;
}

.table-state {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 18px;
}

.table-state > div {
    padding: 11px;

    border-radius: 11px;

    background:
        var(--surface);
}

.table-state small {
    display: block;

    color: var(--muted);
    font-size: 9px;
}

.table-state strong {
    display: block;

    margin-top: 5px;

    font-size: 12px;
}

.order-card {
    margin-top: 10px;
    padding: 12px;

    border:
        1px solid var(--border);

    border-radius: 13px;

    background:
        var(--surface);
}

.section-head {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}

.order-items {
    display: grid;

    gap: 5px;

    margin-top: 10px;
}

.order-item {
    display: flex;
    justify-content: space-between;

    gap: 10px;

    padding: 9px;

    border-radius: 9px;

    background:
        var(--surface-2);

    font-size: 10px;
}

.empty {
    padding: 15px;

    color: var(--muted);

    text-align: center;

    font-size: 10px;
}

.drawer-actions {
    display: grid;

    gap: 7px;

    margin-top: 12px;
}

.primary,
.secondary {
    min-height: 44px;

    border-radius: 11px;

    font-weight: 750;

    cursor: pointer;
}

.primary {
    border: 0;

    background: var(--accent);

    color: #211308;
}

.secondary {
    border:
        1px solid var(--border);

    background:
        var(--surface);

    color: var(--text);
}


/* MENU MODAL */

.modal-wrap {
    position: fixed;
    inset: 0;

    z-index: 100;

    visibility: hidden;
    opacity: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background:
        rgba(0,0,0,.63);

    transition:
        .16s ease;
}

.modal-wrap.open {
    visibility: visible;
    opacity: 1;
}

.modal {
    width:
        min(
            500px,
            100%
        );

    max-height:
        min(
            680px,
            88vh
        );

    overflow: auto;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        #0b1625;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.45);
}

.menu-tabs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 5px;

    margin-top: 14px;
}

.menu-tab {
    min-height: 38px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background:
        var(--surface);

    color:
        var(--muted);

    cursor: pointer;
}

.menu-tab.active {
    color:
        var(--accent);

    background:
        var(--accent-soft);

    border-color:
        rgba(230,137,69,.3);
}

.menu-items {
    display: grid;

    gap: 6px;

    margin-top: 10px;
}

.menu-product {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 11px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        var(--surface);

    cursor: pointer;
}

.menu-product strong {
    display: block;

    font-size: 11px;
}

.menu-product small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 8.5px;
}

.menu-product b {
    color:
        var(--accent);

    font-size: 11px;
}


/* MOBILE */

@media (max-width: 720px) {

    .app {
        padding:
            14px 10px
            calc(
                92px +
                env(safe-area-inset-bottom)
            );
    }

    .topbar {
        display: block;
    }

    .legend {
        margin-top: 12px;
    }

    .hall-scroll {
        padding: 10px;
    }

    .hall {
        transform-origin:
            top left;
    }

    .drawer {
        top: auto;

        width: 100%;
        height: auto;

        max-height: 86vh;

        overflow-y: auto;

        padding-bottom:
            calc(
                18px +
                env(safe-area-inset-bottom)
            );

        transform:
            translateY(105%);

        border-left: 0;

        border-top:
            1px solid var(--border);

        border-radius:
            20px 20px 0 0;
    }

    .drawer.open {
        transform:
            translateY(0);
    }

    .drawer-handle {
        display: block;

        width: 34px;
        height: 4px;

        margin:
            0 auto 12px;

        border-radius: 999px;

        background:
            rgba(255,255,255,.2);
    }

}


/* =========================================================
   TABLE APP FRONTEND V2
   ========================================================= */

.table:disabled {
    opacity: .28;
    cursor: default;
}


/* Blocking auth/loading screen */

.app-blocking {
    position: fixed;
    inset: 0;

    z-index: 500;

    visibility: hidden;
    opacity: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    background:
        #07101d;

    transition:
        opacity .16s ease;
}

.app-blocking.show {
    visibility: visible;
    opacity: 1;
}

.app-blocking-card {
    width:
        min(360px, 100%);

    text-align: center;
}

.app-blocking-logo {
    width: 58px;
    height: 58px;

    margin:
        0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            var(--accent),
            #f0aa70
        );

    color: #241409;

    font-size: 24px;
    font-weight: 900;
}

.app-blocking h2 {
    margin: 0;

    font-size: 22px;
}

.app-blocking p {
    margin:
        9px 0 18px;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.6;
}


/* Toast */

.app-toast {
    position: fixed;

    left: 50%;
    top:
        calc(
            14px
            + env(safe-area-inset-top)
        );

    z-index: 600;

    max-width:
        calc(100% - 28px);

    padding:
        10px 13px;

    transform:
        translate(-50%, -12px);

    border:
        1px solid var(--border);

    border-radius: 11px;

    background:
        rgba(13,27,43,.96);

    color:
        var(--text);

    font-size: 10px;
    font-weight: 700;

    visibility: hidden;
    opacity: 0;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.35);

    transition:
        .16s ease;
}

.app-toast.show {
    visibility: visible;
    opacity: 1;

    transform:
        translate(-50%, 0);
}

.app-toast.error {
    border-color:
        rgba(230,92,98,.34);

    color:
        #ffb4b8;
}


/* Order controls */

.order-item {
    align-items: center;
}

.order-item-main {
    flex: 1;

    min-width: 0;
}

.order-item-main strong {
    display: block;
}

.order-item-main small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 8px;
}

.order-item-controls {
    display: flex;

    align-items: center;

    gap: 5px;
}

.order-item-controls button {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor: pointer;
}

.order-item-controls span {
    min-width: 18px;

    text-align: center;

    font-size: 10px;
    font-weight: 800;
}


/* My tables */

.my-tables-sheet-wrap {
    position: fixed;
    inset: 0;

    z-index: 200;

    visibility: hidden;
}

.my-tables-sheet-wrap.open {
    visibility: visible;
}

.my-tables-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0,0,0,.58);
}

.my-tables-sheet {
    position: absolute;

    right: 0;
    top: 0;
    bottom: 0;

    width:
        min(430px, 100%);

    overflow-y: auto;

    padding: 18px;

    border-left:
        1px solid var(--border);

    background:
        #0b1625;

    transform:
        translateX(105%);

    transition:
        transform .2s ease;
}

.my-tables-sheet-wrap.open
.my-tables-sheet {
    transform:
        translateX(0);
}

.my-tables-list {
    display: grid;

    gap: 7px;

    margin-top: 16px;
}

.my-table-card {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        10px 12px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    background:
        var(--surface);

    color:
        var(--text);

    text-align: left;

    cursor: pointer;
}

.my-table-card strong {
    display: block;

    font-size: 12px;
}

.my-table-card small {
    display: block;

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 8.5px;
}

.my-table-card b {
    color:
        var(--accent);

    font-size: 12px;
}


@media (max-width: 720px) {

    .my-tables-sheet {
        top: auto;
        left: 0;

        width: 100%;
        height: auto;

        max-height: 86vh;

        border-left: 0;

        border-top:
            1px solid var(--border);

        border-radius:
            20px 20px 0 0;

        transform:
            translateY(105%);
    }

    .my-tables-sheet-wrap.open
    .my-tables-sheet {
        transform:
            translateY(0);
    }

}



/* =========================================================
   TELEGRAM FULLSCREEN / SAFE AREA V3
   ========================================================= */

html,
body {
    width: 100%;
    min-height: 100%;

    overscroll-behavior: none;
}


body {
    min-height:
        var(
            --tg-viewport-stable-height,
            100vh
        );
}


/*
 * Telegram/iPhone safe areas.
 */

.app {
    min-height:
        var(
            --tg-viewport-stable-height,
            100vh
        );

    padding-top:
        max(
            16px,
            env(safe-area-inset-top)
        );

    padding-left:
        max(
            10px,
            env(safe-area-inset-left)
        );

    padding-right:
        max(
            10px,
            env(safe-area-inset-right)
        );

    padding-bottom:
        calc(
            92px
            +
            env(safe-area-inset-bottom)
        );
}


/*
 * Не даём контенту заезжать
 * под верхнюю системную область.
 */

.topbar {
    padding-top:
        max(
            0px,
            env(safe-area-inset-top)
        );
}


/*
 * Нижняя навигация учитывает
 * Home Indicator iPhone.
 */

.bottom-nav {
    bottom:
        max(
            8px,
            env(safe-area-inset-bottom)
        );
}


/*
 * Модалки и drawer тоже учитывают safe-area.
 */

.drawer {
    padding-top:
        max(
            18px,
            env(safe-area-inset-top)
        );

    padding-bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );
}


@media (max-width: 720px) {

    .app {
        padding-top:
            max(
                14px,
                env(safe-area-inset-top)
            );
    }

}



/* =========================================================
   HALL MAP V3 — MOBILE PAN / PINCH ZOOM
   ========================================================= */

.hall-card {
    height:
        calc(
            var(
                --tg-viewport-stable-height,
                100vh
            )
            - 185px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        );

    min-height: 480px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


.hall-toolbar {
    flex:
        0 0 auto;
}


.hall-scroll {
    position: relative;

    flex:
        1 1 auto;

    min-height: 0;

    overflow: hidden !important;

    padding: 0 !important;

    background:
        #d9d9d9;

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    cursor:
        grab;
}


.hall-scroll:active {
    cursor:
        grabbing;
}


.hall {
    position: absolute !important;

    left: 0;
    top: 0;

    margin:
        0 !important;

    will-change:
        transform;

    transform-origin:
        0 0;

    transition:
        none !important;
}


/* ---------------------------------------------------------
   ZOOM CONTROLS
   --------------------------------------------------------- */

.hall-controls {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    flex:
        0 0 auto;
}


.hall-control {
    height:
        33px;

    min-width:
        33px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface-2);

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        750;

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.hall-control:active {
    transform:
        scale(.95);
}


.hall-control-fit {
    min-width:
        67px;

    color:
        var(--muted);

    font-size:
        9px;
}


/* ---------------------------------------------------------
   TABLE INTERACTION
   --------------------------------------------------------- */

.table {
    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;
}


.table:active {
    transform:
        scale(.92);
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .topbar {
        margin-bottom:
            10px;
    }


    .legend {
        gap:
            5px;
    }


    .legend span {
        min-height:
            29px;

        padding:
            0 8px;

        font-size:
            9px;
    }


    .hall-card {
        height:
            calc(
                var(
                    --tg-viewport-stable-height,
                    100vh
                )
                - 176px
                - env(safe-area-inset-top)
                - env(safe-area-inset-bottom)
            );

        min-height:
            430px;

        border-radius:
            16px;
    }


    .hall-toolbar {
        min-height:
            55px;

        padding:
            9px 11px;
    }


    .hall-toolbar strong {
        font-size:
            12px;
    }


    .hall-control {
        height:
            30px;

        min-width:
            30px;

        padding:
            0 7px;
    }


    .hall-control-fit {
        min-width:
            58px;

        font-size:
            8px;
    }

}


/*
 * На очень узком экране легенда остаётся
 * горизонтальной и компактной.
 */

@media (max-width: 430px) {

    .topbar h1 {
        font-size:
            31px;
    }


    .legend span {
        flex:
            1 1 0;

        justify-content:
            center;

        padding:
            0 5px;
    }


    .hall-toolbar small {
        display:
            none;
    }

}



/* =========================================================
   HALL MAP V4 — PHONE FIRST
   ========================================================= */

/*
 * Новый логический размер карты.
 *
 * Было:
 * 760 × 1500
 *
 * Стало:
 * 390 × 720
 */

.hall {
    width: 390px !important;
    height: 720px !important;

    border-width: 1px !important;

    border-radius: 12px !important;

    background:
        #e5e5e5 !important;
}


/* =========================================================
   TABLES
   ========================================================= */

.table {
    min-width: 32px !important;
    width: 32px !important;

    height: 27px !important;

    padding: 0 3px !important;

    border-width: 1.5px !important;

    border-radius: 6px !important;

    font-size: 11px !important;

    line-height: 1 !important;

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.13) !important;
}


.table-large {
    width: 42px !important;
    min-width: 42px !important;

    height: 31px !important;

    font-size: 12px !important;
}


/*
 * В мобильном плане hover не нужен.
 */

.table:hover {
    transform: none;
}


.table:active {
    transform:
        scale(.91) !important;
}


/* =========================================================
   ROOM GEOMETRY
   ========================================================= */

/*
 * Служебная зона.
 */

.z-top-left {
    left: 0 !important;
    top: 0 !important;

    width: 54px !important;
    height: 72px !important;

    padding: 4px !important;

    font-size: 6px !important;

    border-width: 1px !important;
}


/*
 * Верхняя перегородка.
 */

.wall-top-center {
    left: 82px !important;
    top: 0 !important;

    width: 132px !important;
    height: 63px !important;

    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-bottom-width: 3px !important;
}


/*
 * Центральные длинные элементы.
 */

.central-long {
    left: 140px !important;
    top: 229px !important;

    width: 132px !important;
    height: 6px !important;
}


.lower-long {
    left: 137px !important;
    top: 418px !important;

    width: 145px !important;
    height: 6px !important;
}


.entrance {
    right: 8px !important;
    bottom: 7px !important;

    font-size: 6px !important;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.hall-card {
    height:
        calc(
            var(
                --tg-viewport-stable-height,
                100vh
            )
            - 170px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

    min-height: 440px !important;

    max-height: 760px !important;
}


.hall-scroll {
    background:
        #d7d7d7 !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.hall-toolbar {
    min-height: 50px !important;

    padding:
        8px 10px !important;
}


.hall-toolbar strong {
    font-size: 12px !important;
}


.hall-toolbar small {
    margin-top: 2px !important;

    font-size: 8px !important;
}


.hall-control {
    height: 28px !important;
    min-width: 28px !important;

    border-radius: 7px !important;

    font-size: 13px !important;
}


.hall-control-fit {
    min-width: 54px !important;

    font-size: 7.5px !important;
}


/* =========================================================
   TOP
   ========================================================= */

@media (max-width: 720px) {

    .app {
        padding-left:
            max(
                8px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                8px,
                env(safe-area-inset-right)
            ) !important;
    }


    .topbar {
        margin-bottom:
            8px !important;
    }


    .topbar h1 {
        margin-top:
            2px !important;

        font-size:
            29px !important;

        line-height:
            1 !important;
    }


    .eyebrow {
        font-size:
            8px !important;
    }


    .subtitle {
        margin-top:
            4px !important;

        font-size:
            10px !important;
    }


    .legend {
        margin-top:
            8px !important;

        gap:
            4px !important;
    }


    .legend span {
        min-height:
            26px !important;

        padding:
            0 7px !important;

        border-radius:
            8px !important;

        font-size:
            8px !important;
    }


    .legend .dot {
        width:
            6px !important;

        height:
            6px !important;
    }


    .hall-card {
        border-radius:
            14px !important;
    }

}


/*
 * На iPhone карта практически занимает
 * всю доступную рабочую область.
 */

@media (
    max-width: 430px
) {

    .hall {
        width:
            390px !important;

        height:
            720px !important;
    }


    .hall-toolbar small {
        display:
            block !important;
    }


    .bottom-nav {
        min-height:
            61px !important;
    }


    .nav-item {
        font-size:
            8px !important;
    }


    .nav-icon {
        font-size:
            16px !important;
    }

}



/* =========================================================
   HALL MAP V5 — WAITER WORK MODE
   ========================================================= */


/* ---------------------------------------------------------
   TOP AREA — MUCH MORE COMPACT
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .app {
        padding-top:
            max(
                8px,
                env(safe-area-inset-top)
            ) !important;
    }


    .topbar {
        margin-bottom:
            6px !important;
    }


    .eyebrow {
        font-size:
            7px !important;

        letter-spacing:
            .1em !important;
    }


    .topbar h1 {
        margin-top:
            1px !important;

        font-size:
            27px !important;

        line-height:
            .98 !important;
    }


    .subtitle {
        margin-top:
            3px !important;

        font-size:
            9px !important;
    }


    .legend {
        margin-top:
            6px !important;

        gap:
            3px !important;
    }


    .legend span {
        min-height:
            23px !important;

        padding:
            0 6px !important;

        border-radius:
            7px !important;

        font-size:
            7.5px !important;
    }


    .legend .dot {
        width:
            5px !important;

        height:
            5px !important;
    }

}


/* ---------------------------------------------------------
   HALL CARD
   --------------------------------------------------------- */

.hall-card {
    border-radius:
        13px !important;
}


@media (max-width: 720px) {

    .hall-card {
        height:
            calc(
                var(
                    --tg-viewport-stable-height,
                    100vh
                )
                - 142px
                - env(safe-area-inset-top)
                - env(safe-area-inset-bottom)
            ) !important;

        min-height:
            460px !important;
    }

}


/* ---------------------------------------------------------
   TOOLBAR
   --------------------------------------------------------- */

.hall-toolbar {
    min-height:
        43px !important;

    padding:
        6px 9px !important;
}


.hall-toolbar strong {
    font-size:
        11px !important;
}


.hall-toolbar small {
    display:
        none !important;
}


.hall-controls {
    gap:
        3px !important;
}


.hall-control {
    height:
        26px !important;

    min-width:
        26px !important;

    padding:
        0 6px !important;

    border-radius:
        7px !important;

    font-size:
        12px !important;
}


.hall-control-fit {
    min-width:
        48px !important;

    font-size:
        7px !important;
}


/* ---------------------------------------------------------
   TABLES
   visual size
   --------------------------------------------------------- */

.table {
    min-width:
        34px !important;

    width:
        34px !important;

    height:
        29px !important;

    padding:
        0 2px !important;

    border-width:
        1.5px !important;

    border-radius:
        6px !important;

    font-size:
        11px !important;

    font-weight:
        850 !important;

    overflow:
        visible !important;
}


.table-large {
    min-width:
        45px !important;

    width:
        45px !important;

    height:
        34px !important;

    font-size:
        12px !important;
}


/*
 * Реальная touch-zone больше визуальной кнопки.
 * Это особенно важно для работы одной рукой.
 */

.table::before {
    content: "";

    position: absolute;

    inset:
        -7px;

    border-radius:
        11px;
}


/*
 * Статус читается сильнее.
 */

.table.status-mine {
    box-shadow:
        0 0 0 2px
        rgba(71,155,242,.18),
        0 3px 8px
        rgba(0,0,0,.14) !important;
}


.table.status-busy {
    box-shadow:
        0 0 0 2px
        rgba(240,184,76,.13),
        0 3px 8px
        rgba(0,0,0,.12) !important;
}


/* ---------------------------------------------------------
   BOTTOM NAV
   --------------------------------------------------------- */

.bottom-nav {
    min-height:
        58px !important;

    bottom:
        max(
            6px,
            env(safe-area-inset-bottom)
        ) !important;

    border-radius:
        16px !important;
}


.nav-item {
    gap:
        2px !important;

    font-size:
        7.5px !important;
}


.nav-icon {
    font-size:
        15px !important;
}


/* =========================================================
   TABLE CONFIRMATION SHEET
   ========================================================= */

.table-confirm-wrap {
    position:
        fixed;

    inset:
        0;

    z-index:
        350;

    visibility:
        hidden;

    pointer-events:
        none;
}


.table-confirm-wrap.open {
    visibility:
        visible;

    pointer-events:
        auto;
}


.table-confirm-backdrop {
    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    background:
        rgba(0,0,0,.58);

    transition:
        opacity .18s ease;
}


.table-confirm-wrap.open
.table-confirm-backdrop {
    opacity:
        1;
}


.table-confirm-sheet {
    position:
        absolute;

    left:
        8px;

    right:
        8px;

    bottom:
        calc(
            8px
            +
            env(safe-area-inset-bottom)
        );

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        12px;

    align-items:
        center;

    padding:
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        rgba(11,22,37,.98);

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.48);

    transform:
        translateY(
            calc(
                100%
                +
                30px
            )
        );

    transition:
        transform .2s ease;
}


.table-confirm-wrap.open
.table-confirm-sheet {
    transform:
        translateY(0);
}


.table-confirm-sheet
.drawer-handle {
    position:
        absolute;

    top:
        6px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        block !important;
}


.table-confirm-icon {
    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        #46a36e;

    border-radius:
        13px;

    background:
        #ccebd5;

    color:
        #15221a;

    font-size:
        20px;

    font-weight:
        900;
}


.table-confirm-content {
    min-width:
        0;
}


.table-confirm-content h2 {
    margin:
        2px 0 0;

    font-size:
        18px;

    line-height:
        1.1;
}


.table-confirm-content p {
    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        9px;
}


.table-confirm-actions {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        6px;
}


.table-confirm-cancel,
.table-confirm-open {
    min-height:
        42px;

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


.table-confirm-cancel {
    border:
        1px solid
        var(--border);

    background:
        var(--surface);

    color:
        var(--text);
}


.table-confirm-open {
    border:
        0;

    background:
        var(--accent);

    color:
        #241409;
}


/* ---------------------------------------------------------
   Give the map breathing room above fixed nav
   --------------------------------------------------------- */

.hall-scroll {
    padding-bottom:
        68px !important;
}



/* =========================================================
   HALL V5.3 — TABLES 13 -> 3
   ========================================================= */

/*
 * Центральная вертикальная колонна должна быть
 * компактнее остальных столов, но без наложений.
 */

.table.table-vertical-3-13 {
    width: 31px !important;
    min-width: 31px !important;

    height: 25px !important;

    padding: 0 2px !important;

    border-radius: 6px !important;

    font-size: 10px !important;

    line-height: 1 !important;

    z-index: 4;
}


/*
 * Для этой плотной колонки уменьшаем невидимую
 * touch-зону, чтобы соседние столы физически
 * не перехватывали друг у друга нажатия.
 */

.table.table-vertical-3-13::before {
    inset: -2px !important;

    border-radius: 8px !important;
}


/*
 * При нажатии кнопка остаётся визуально понятной.
 */

.table.table-vertical-3-13:active {
    transform:
        scale(.90) !important;

    z-index: 10;
}



/* =========================================================
   HALL V5.4 — TABLES 3-13 FINAL MOBILE GEOMETRY
   ========================================================= */

.table.table-vertical-3-13 {
    width: 30px !important;
    min-width: 30px !important;

    height: 23px !important;
    min-height: 23px !important;

    padding: 0 !important;

    border-radius: 6px !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 23px !important;

    z-index: 5;
}


/*
 * Небольшая touch-зона.
 * Она помогает нажимать на маленький стол,
 * но не перекрывает соседний.
 */

.table.table-vertical-3-13::before {
    inset: -1px !important;
}


/*
 * Столы 3 и 4 находятся рядом,
 * поэтому никаких увеличенных hitbox.
 */

.table.table-vertical-3-13:active {
    transform: scale(.94) !important;
    z-index: 20;
}



/* =========================================================
   HALL MOBILE V6 — PHONE FINAL OVERRIDES
   ========================================================= */

.hall-toolbar,
.hall-controls {
    display: none !important;
}


.hall-card {
    height:
        calc(
            var(
                --tg-viewport-stable-height,
                100vh
            )
            - 115px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

    min-height: 530px !important;

    margin-top: 5px !important;

    border-radius: 13px !important;

    overflow: hidden !important;
}


.hall-scroll {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: flex-start !important;

    overflow: hidden !important;

    padding:
        4px 0 68px !important;

    background:
        #d8d8d8 !important;

    touch-action:
        manipulation !important;
}


.hall {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    width: 390px !important;
    height: 690px !important;

    flex:
        0 0 390px !important;

    margin:
        0 auto !important;

    transform:
        none !important;

    border:
        1px solid
        rgba(0,0,0,.14) !important;

    border-radius:
        10px !important;

    background:
        #e5e5e5 !important;
}


.table {
    width: 33px !important;
    min-width: 33px !important;

    height: 27px !important;

    padding: 0 !important;

    border-width:
        1.5px !important;

    border-radius:
        6px !important;

    font-size:
        10px !important;

    font-weight:
        850 !important;

    line-height:
        1 !important;

    touch-action:
        manipulation !important;
}


.table::before {
    inset:
        -2px !important;
}


.table-large {
    width: 45px !important;
    min-width: 45px !important;

    height: 31px !important;

    font-size:
        11px !important;
}


.table-mobile-small {
    width: 30px !important;
    min-width: 30px !important;

    height: 24px !important;

    font-size:
        9px !important;
}


.table-mobile-small::before {
    inset:
        -1px !important;
}


/* ROOM */

.z-top-left {
    left: 0 !important;
    top: 0 !important;

    width: 55px !important;
    height: 62px !important;

    padding:
        3px !important;

    font-size:
        5.5px !important;

    border-width:
        0 1px 1px 0 !important;
}


.wall-top-center {
    left: 80px !important;
    top: 0 !important;

    width: 130px !important;
    height: 55px !important;

    border-left-width:
        2px !important;

    border-right-width:
        2px !important;

    border-bottom-width:
        2px !important;
}


.central-long {
    left: 120px !important;
    top: 258px !important;

    width: 135px !important;
    height: 4px !important;
}


.lower-long {
    left: 105px !important;
    top: 450px !important;

    width: 165px !important;
    height: 4px !important;
}


.entrance {
    right: 8px !important;
    bottom: 6px !important;

    font-size:
        5px !important;
}


/* HEADER */

@media (max-width: 720px) {

    .topbar {
        margin-bottom:
            5px !important;
    }


    .eyebrow {
        font-size:
            7px !important;
    }


    .topbar h1 {
        margin:
            1px 0 0 !important;

        font-size:
            27px !important;

        line-height:
            1 !important;
    }


    .subtitle {
        margin-top:
            3px !important;

        font-size:
            9px !important;
    }


    .legend {
        margin-top:
            5px !important;

        gap:
            3px !important;
    }


    .legend span {
        min-height:
            22px !important;

        padding:
            0 5px !important;

        font-size:
            7.5px !important;
    }

}


/* NAV */

.bottom-nav {
    min-height:
        57px !important;

    bottom:
        max(
            5px,
            env(safe-area-inset-bottom)
        ) !important;
}


.nav-item {
    gap:
        2px !important;

    font-size:
        7.5px !important;
}


.nav-icon {
    font-size:
        15px !important;
}



/* =========================================================
   HALL V7 — ORIGINAL PLAN / PHONE EDITION
   FINAL OVERRIDES
   ========================================================= */


/*
 * ---------------------------------------------------------
 * WORKSPACE
 * ---------------------------------------------------------
 */

.hall-card {
    position: relative !important;

    height:
        calc(
            var(
                --tg-viewport-stable-height,
                100vh
            )
            - 112px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

    min-height: 510px !important;
    max-height: none !important;

    margin-top: 4px !important;

    border-radius: 13px !important;

    overflow: hidden !important;
}


/*
 * Старые controls больше не нужны.
 */

.hall-toolbar,
.hall-controls {
    display: none !important;
}


/*
 * ---------------------------------------------------------
 * VIEWPORT
 * ---------------------------------------------------------
 */

.hall-scroll {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: flex-start !important;

    overflow: hidden !important;

    padding:
        2px 0
        66px !important;

    box-sizing:
        border-box !important;

    background:
        #d8d8d8 !important;

    touch-action:
        manipulation !important;

    overscroll-behavior:
        none !important;
}


/*
 * ---------------------------------------------------------
 * MAP
 * ---------------------------------------------------------
 */

.hall {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    width: 390px !important;
    min-width: 390px !important;

    height: 670px !important;
    min-height: 670px !important;

    flex:
        0 0 390px !important;

    margin:
        0 auto !important;

    transform:
        none !important;

    transform-origin:
        0 0 !important;

    border:
        1px solid
        rgba(0,0,0,.14) !important;

    border-radius:
        10px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    background:
        #e5e5e5 !important;
}


/*
 * ---------------------------------------------------------
 * NORMAL TABLE
 * ---------------------------------------------------------
 */

.table {
    position:
        absolute !important;

    width:
        31px !important;

    min-width:
        31px !important;

    height:
        25px !important;

    min-height:
        25px !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-width:
        1.5px !important;

    border-radius:
        6px !important;

    font-size:
        10px !important;

    font-weight:
        850 !important;

    line-height:
        1 !important;

    box-sizing:
        border-box !important;

    transform:
        none !important;

    touch-action:
        manipulation !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


/*
 * Не даём старой увеличенной touch-zone
 * перекрывать соседние столы.
 */

.table::before {
    inset:
        -1px !important;

    border-radius:
        7px !important;
}


/*
 * ---------------------------------------------------------
 * LARGE TABLE
 * ---------------------------------------------------------
 */

.table.table-large {
    width:
        46px !important;

    min-width:
        46px !important;

    height:
        30px !important;

    min-height:
        30px !important;

    font-size:
        11px !important;

    border-radius:
        7px !important;
}


/*
 * ---------------------------------------------------------
 * TABLES 3 -> 13
 *
 * Здесь столы специально значительно уже и ниже.
 * Благодаря этому вся группа идёт одной вертикальной
 * колонной и каждый стол остаётся отдельной кнопкой.
 * ---------------------------------------------------------
 */

.table.table-v7-small {
    width:
        29px !important;

    min-width:
        29px !important;

    height:
        9px !important;

    min-height:
        9px !important;

    padding:
        0 !important;

    border-width:
        1px !important;

    border-radius:
        3px !important;

    font-size:
        6.5px !important;

    font-weight:
        900 !important;

    line-height:
        8px !important;

    z-index:
        6 !important;
}


.table.table-v7-small::before {
    inset:
        0 !important;

    border-radius:
        3px !important;
}


/*
 * ---------------------------------------------------------
 * PRESS FEEDBACK
 * ---------------------------------------------------------
 */

.table:active {
    transform:
        scale(.94) !important;

    z-index:
        30 !important;
}


.table.table-v7-small:active {
    transform:
        scale(.90) !important;

    z-index:
        40 !important;
}


/*
 * ---------------------------------------------------------
 * ROOM GEOMETRY
 * ---------------------------------------------------------
 */

.z-top-left {
    left:
        0 !important;

    top:
        0 !important;

    width:
        55px !important;

    height:
        61px !important;

    padding:
        3px !important;

    font-size:
        5.5px !important;

    border-width:
        0 1px 1px 0 !important;
}


.wall-top-center {
    left:
        80px !important;

    top:
        0 !important;

    width:
        130px !important;

    height:
        54px !important;

    border-left-width:
        2px !important;

    border-right-width:
        2px !important;

    border-bottom-width:
        2px !important;
}


.central-long {
    left:
        105px !important;

    top:
        382px !important;

    width:
        170px !important;

    height:
        4px !important;
}


.lower-long {
    left:
        98px !important;

    top:
        548px !important;

    width:
        184px !important;

    height:
        4px !important;
}


.entrance {
    right:
        7px !important;

    bottom:
        6px !important;

    font-size:
        5px !important;
}


/*
 * ---------------------------------------------------------
 * MOBILE HEADER
 * ---------------------------------------------------------
 */

@media (max-width: 720px) {

    .app {
        padding-top:
            max(
                7px,
                env(safe-area-inset-top)
            ) !important;

        padding-left:
            max(
                7px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                7px,
                env(safe-area-inset-right)
            ) !important;
    }


    .topbar {
        margin-bottom:
            4px !important;
    }


    .eyebrow {
        font-size:
            7px !important;
    }


    .topbar h1 {
        margin:
            1px 0 0 !important;

        font-size:
            26px !important;

        line-height:
            1 !important;
    }


    .subtitle {
        margin-top:
            2px !important;

        font-size:
            8.5px !important;
    }


    .legend {
        margin-top:
            4px !important;

        gap:
            3px !important;
    }


    .legend span {
        min-height:
            21px !important;

        padding:
            0 5px !important;

        font-size:
            7.5px !important;
    }


    .legend .dot {
        width:
            5px !important;

        height:
            5px !important;
    }
}


/*
 * ---------------------------------------------------------
 * BOTTOM NAV
 * ---------------------------------------------------------
 */

.bottom-nav {
    min-height:
        57px !important;

    bottom:
        max(
            5px,
            env(safe-area-inset-bottom)
        ) !important;
}


.nav-item {
    gap:
        2px !important;

    font-size:
        7.5px !important;
}


.nav-icon {
    font-size:
        15px !important;
}


/*
 * ---------------------------------------------------------
 * NARROW PHONES
 * ---------------------------------------------------------
 */

@media (max-width: 390px) {

    .hall {
        width:
            376px !important;

        min-width:
            376px !important;

        flex-basis:
            376px !important;
    }

}


/* =========================================================
   END HALL V7
   ========================================================= */



/* =========================================================
   HALL V8 — TWO PHONE SECTIONS
   ========================================================= */


/*
 * ---------------------------------------------------------
 * CARD
 * ---------------------------------------------------------
 */

.hall-card {
    position: relative !important;

    height:
        calc(
            var(
                --tg-viewport-stable-height,
                100vh
            )
            - 112px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

    min-height: 510px !important;

    display: flex !important;
    flex-direction: column !important;

    margin-top: 4px !important;

    overflow: hidden !important;

    border-radius: 13px !important;
}


/*
 * ---------------------------------------------------------
 * SECTION SWITCHER
 * ---------------------------------------------------------
 */

.hall-zone-switcher {
    position: relative;

    z-index: 20;

    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 4px;

    margin:
        7px 8px 5px;

    padding: 3px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        rgba(8,18,31,.86);
}


.hall-zone-button {
    min-height: 31px;

    border: 0;

    border-radius: 7px;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.hall-zone-button.active {
    background:
        rgba(226,126,57,.18);

    color:
        var(--accent);

    box-shadow:
        inset 0 0 0 1px
        rgba(226,126,57,.32);
}


/*
 * ---------------------------------------------------------
 * MAP VIEWPORT
 * ---------------------------------------------------------
 */

.hall-scroll {
    position: relative !important;

    flex: 1 1 auto !important;

    min-height: 0 !important;

    width: 100% !important;
    height: auto !important;

    display: flex !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    overflow:
        hidden !important;

    padding:
        2px 0 70px !important;

    box-sizing:
        border-box !important;

    background:
        #d8d8d8 !important;

    touch-action:
        manipulation !important;
}


/*
 * ---------------------------------------------------------
 * MAP
 * ---------------------------------------------------------
 */

.hall {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    width:
        390px !important;

    min-width:
        390px !important;

    height:
        605px !important;

    min-height:
        605px !important;

    flex:
        0 0 390px !important;

    margin:
        0 auto !important;

    transform:
        none !important;

    overflow:
        hidden !important;

    border:
        1px solid
        rgba(0,0,0,.14) !important;

    border-radius:
        9px !important;

    box-sizing:
        border-box !important;

    background:
        #e5e5e5 !important;
}


/*
 * ---------------------------------------------------------
 * TABLES
 * ---------------------------------------------------------
 */

.table {
    position:
        absolute !important;

    width:
        37px !important;

    min-width:
        37px !important;

    height:
        31px !important;

    min-height:
        31px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    border-width:
        1.5px !important;

    border-radius:
        7px !important;

    font-size:
        11px !important;

    font-weight:
        850 !important;

    line-height:
        1 !important;

    touch-action:
        manipulation !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


.table::before {
    inset:
        -2px !important;

    border-radius:
        8px !important;
}


.table.table-large {
    width:
        58px !important;

    min-width:
        58px !important;

    height:
        39px !important;

    min-height:
        39px !important;

    border-radius:
        9px !important;

    font-size:
        13px !important;
}


/*
 * Tables 3 -> 13 get full usable buttons.
 * No tiny 9px high rectangles anymore.
 */

.table.table-v8-column {
    width:
        39px !important;

    min-width:
        39px !important;

    height:
        28px !important;

    min-height:
        28px !important;

    border-radius:
        6px !important;

    font-size:
        10.5px !important;
}


.table.table-v8-column::before {
    inset:
        -1px !important;
}


/*
 * Old V7 small class cannot affect V8.
 */

.table.table-v7-small,
.table.table-mobile-small,
.table.table-vertical-3-13 {
    line-height:
        1 !important;
}


/*
 * ---------------------------------------------------------
 * ROOM ELEMENTS — UPPER HALL
 * ---------------------------------------------------------
 */

.hall[data-zone="upper"]
.z-top-left {
    display: block !important;

    left:
        0 !important;

    top:
        0 !important;

    width:
        58px !important;

    height:
        50px !important;

    padding:
        3px !important;

    font-size:
        5.5px !important;
}


.hall[data-zone="upper"]
.wall-top-center {
    display: block !important;

    left:
        83px !important;

    top:
        0 !important;

    width:
        137px !important;

    height:
        45px !important;
}


.hall[data-zone="upper"]
.central-long {
    display: block !important;

    left:
        108px !important;

    top:
        475px !important;

    width:
        175px !important;

    height:
        4px !important;
}


.hall[data-zone="upper"]
.lower-long {
    display:
        none !important;
}


.hall[data-zone="upper"]
.entrance {
    display:
        none !important;
}


/*
 * ---------------------------------------------------------
 * ROOM ELEMENTS — LOWER HALL
 * ---------------------------------------------------------
 */

.hall[data-zone="lower"]
.z-top-left,
.hall[data-zone="lower"]
.wall-top-center,
.hall[data-zone="lower"]
.central-long {
    display:
        none !important;
}


.hall[data-zone="lower"]
.lower-long {
    display:
        block !important;

    left:
        24px !important;

    top:
        210px !important;

    width:
        260px !important;

    height:
        4px !important;
}


.hall[data-zone="lower"]
.entrance {
    display:
        block !important;

    right:
        10px !important;

    bottom:
        8px !important;

    font-size:
        6px !important;
}


/*
 * ---------------------------------------------------------
 * MOBILE
 * ---------------------------------------------------------
 */

@media (max-width: 720px) {

    .topbar {
        margin-bottom:
            3px !important;
    }


    .hall-zone-switcher {
        margin-top:
            5px;
    }

}


/*
 * Fixed bottom menu remains above map,
 * but map has reserved bottom padding.
 */

.bottom-nav {
    z-index:
        100 !important;
}


/* =========================================================
   END HALL V8
   ========================================================= */