:root {
    --bg: #101713;
    --panel: rgba(18, 26, 21, .92);
    --panel-solid: #151e18;
    --border: rgba(255,255,255,.09);
    --text: #f7faf8;
    --muted: #99a89f;
    --green: #87f542;
    --green-soft: #b6ff8b;
    --dark-green: #173021;
    --shadow: 0 18px 60px rgba(0,0,0,.28);
}

* {
    box-sizing: border-box;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: var(--bg);
    color: var(--text);
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

#map {
    position: absolute;
    inset: 0;
    background: #18231c;
}

.leaflet-container {
    font-family: inherit;
    background: #18231c;
}

.leaflet-control-attribution {
    font-size: 9px !important;
    opacity: .65;
}

.leaflet-control-zoom {
    display: none;
}

.topbar {
    position: fixed;
    z-index: 1000;
    top: 18px;
    left: 18px;
    right: 18px;

    min-height: 66px;

    display: grid;
    grid-template-columns:
        minmax(210px, auto)
        minmax(280px, 620px)
        minmax(210px, auto);

    align-items: center;
    gap: 18px;

    padding: 9px;

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

    background:
        rgba(16, 23, 19, .88);

    backdrop-filter:
        blur(22px)
        saturate(140%);

    box-shadow: var(--shadow);
}

.brand {
    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    gap: 11px;

    cursor: pointer;
    text-align: left;
}

.brandMark {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--green),
            #4fd520
        );

    color: #10200f;

    font-size: 15px;
    font-weight: 950;
    letter-spacing: -.8px;

    box-shadow:
        0 7px 24px
        rgba(135,245,66,.22);
}

.brandText {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.brandText strong {
    white-space: nowrap;
    font-size: 15px;
    letter-spacing: -.3px;
}

.brandText small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.searchWrap {
    position: relative;

    display: flex;
    align-items: center;

    height: 48px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 15px;

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

.searchWrap:focus-within {
    border-color:
        rgba(135,245,66,.45);

    box-shadow:
        0 0 0 3px
        rgba(135,245,66,.08);
}

.searchIcon {
    margin-left: 15px;
    color: #c7d0ca;
    font-size: 22px;
}

.searchWrap input {
    width: 100%;
    height: 100%;

    padding: 0 12px;

    border: 0;
    outline: 0;

    color: var(--text);
    background: transparent;

    font-size: 13px;
}

.searchWrap input::placeholder {
    color: #748078;
}

.searchWrap kbd {
    margin-right: 10px;
    padding: 5px 7px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 7px;

    background:
        rgba(255,255,255,.05);

    color: #7e8b83;

    font-size: 9px;
}

.topActions {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 8px;
}

.ghostButton,
.profileButton {
    height: 46px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,.055);

    cursor: pointer;

    transition:
        .18s ease;
}

.ghostButton {
    padding: 0 15px;
    font-size: 12px;
    font-weight: 650;
}

.ghostButton span {
    margin-right: 5px;
    color: var(--green);
}

.profileButton {
    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 8px;

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

.ghostButton:hover,
.profileButton:hover {
    background:
        rgba(255,255,255,.1);

    border-color:
        rgba(255,255,255,.15);
}

.profileDot {
    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 34%,
            #e4eee7 0 17%,
            transparent 18%
        ),
        radial-gradient(
            circle at 50% 90%,
            #e4eee7 0 34%,
            transparent 35%
        ),
        #34453a;
}

.mapStats {
    position: fixed;
    z-index: 900;

    top: 104px;
    left: 18px;

    height: 57px;

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 9px 14px;

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

    border-radius: 17px;

    background:
        rgba(16,23,19,.88);

    backdrop-filter: blur(18px);

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

.stat {
    display: flex;
    flex-direction: column;
}

.stat strong {
    font-size: 14px;
    line-height: 1;
}

.stat span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.statDivider {
    width: 1px;
    height: 27px;
    background: var(--border);
}

.liveBadge {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 8px;

    background:
        rgba(135,245,66,.09);

    color: var(--green);

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

.liveBadge i {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: var(--green);

    box-shadow:
        0 0 0 4px
        rgba(135,245,66,.11);
}

.mapActions {
    position: fixed;
    z-index: 900;

    right: 18px;
    bottom: 22px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mapAction {
    width: 46px;
    height: 46px;

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

    border-radius: 14px;

    background:
        rgba(16,23,19,.92);

    backdrop-filter: blur(14px);

    color: var(--text);

    cursor: pointer;

    font-size: 20px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.16);
}

.mapAction:hover {
    border-color:
        rgba(135,245,66,.35);

    color: var(--green);
}

.tableCard {
    position: fixed;
    z-index: 950;

    left: 18px;
    bottom: 18px;

    width:
        min(430px, calc(100vw - 36px));

    padding: 22px;

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

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(20,30,23,.97),
            rgba(14,21,17,.97)
        );

    backdrop-filter: blur(22px);

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.34);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.tableCard.hidden {
    opacity: 0;
    pointer-events: none;
    transform:
        translateY(18px);
}

.tableCardHandle {
    display: none;
}

.tableCardHead {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.eyebrow {
    margin-bottom: 7px;

    color: var(--green);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.4px;
}

.tableCard h1 {
    margin: 0;

    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -.8px;
}

.address {
    margin: 8px 0 0;

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

.closeCard {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border: 0;
    border-radius: 11px;

    background:
        rgba(255,255,255,.06);

    cursor: pointer;

    color: #9ca9a1;
    font-size: 21px;
}

.ratingRow {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 20px;
    padding: 14px 0;

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

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

.locationRating,
.playerRating {
    display: grid;

    grid-template-columns:
        auto auto;

    column-gap: 6px;
    align-items: center;
}

.locationRating span:last-child,
.playerRating span:last-child {
    grid-column: 2;
    color: var(--muted);
    font-size: 9px;
}

.locationRating strong,
.playerRating strong {
    font-size: 15px;
}

.star {
    grid-row: 1 / 3;
    color: #ffd85a;
    font-size: 21px;
}

.ratingBall {
    grid-row: 1 / 3;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: #f4f6f5;

    box-shadow:
        inset -3px -2px 5px
        rgba(0,0,0,.16);
}

.featureGrid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-top: 16px;
}

.feature {
    min-height: 58px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    padding: 9px 10px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 12px;

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

.feature strong {
    font-size: 11px;
}

.feature span {
    color: var(--muted);
    font-size: 9px;
}

.feature.good strong {
    color: var(--green-soft);
}

.tableStatus {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 36px;
    margin-top: 13px;

    color: #b5c1ba;
    font-size: 10px;
}

.statusDot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;
    background: var(--green);

    box-shadow:
        0 0 0 4px
        rgba(135,245,66,.10);
}

.publicId {
    margin-left: auto;
    color: #738078;
    font-family: monospace;
    font-size: 9px;
}

.cardButtons {
    display: grid;
    grid-template-columns:
        1fr .62fr;

    gap: 8px;

    margin-top: 12px;
}

.primaryButton,
.secondaryButton {
    height: 47px;

    border: 0;
    border-radius: 13px;

    cursor: pointer;

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

.primaryButton {
    background:
        linear-gradient(
            135deg,
            #8df64b,
            #65dd29
        );

    color: #11200f;

    box-shadow:
        0 8px 24px
        rgba(135,245,66,.16);
}

.secondaryButton {
    border:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.06);

    color: var(--text);
}

.dtMarkerWrap {
    position: relative;
}

.dtMarker {
    position: relative;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        3px solid
        rgba(255,255,255,.92);

    border-radius: 50% 50% 50% 12px;

    background:
        linear-gradient(
            145deg,
            #8efa4d,
            #54cf21
        );

    box-shadow:
        0 9px 28px
        rgba(0,0,0,.34);

    color: #142512;

    font-size: 17px;
    font-weight: 950;

    transform:
        rotate(-45deg);
}

.dtMarker span {
    transform:
        rotate(45deg);

    font-size: 13px;
}

.dtMarkerPulse {
    position: absolute;

    left: 10px;
    top: 30px;

    width: 22px;
    height: 10px;

    border-radius: 50%;

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

    filter: blur(2px);
}

.toast {
    position: fixed;
    z-index: 2000;

    left: 50%;
    bottom: 25px;

    max-width:
        calc(100vw - 30px);

    padding: 11px 16px;

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

    border-radius: 13px;

    background:
        rgba(13,20,16,.95);

    color: #dce5df;

    font-size: 11px;

    opacity: 0;
    pointer-events: none;

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

    transition:
        .2s ease;

    box-shadow: var(--shadow);
}

.toast.show {
    opacity: 1;

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

@media (max-width: 900px) {

    .topbar {
        grid-template-columns:
            auto 1fr auto;
    }

    .brandText {
        display: none;
    }

    .desktopOnly {
        display: none !important;
    }

    .topActions {
        min-width: 46px;
    }

    .searchWrap kbd {
        display: none;
    }
}

@media (max-width: 600px) {

    .topbar {
        top: 10px;
        left: 10px;
        right: 10px;

        min-height: 58px;

        gap: 8px;

        padding: 6px;

        border-radius: 18px;
    }

    .brandMark {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .searchWrap {
        height: 42px;
        border-radius: 12px;
    }

    .searchWrap input {
        font-size: 11px;
    }

    .profileButton {
        width: 42px;
        height: 42px;

        padding: 0;

        justify-content: center;

        border-radius: 12px;
    }

    .mapStats {
        top: 79px;
        left: 10px;

        height: 50px;

        padding: 7px 10px;
        gap: 11px;

        border-radius: 14px;
    }

    .liveBadge {
        display: none;
    }

    .tableCard {
        left: 0;
        bottom: 0;

        width: 100%;

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

        border-left: 0;
        border-right: 0;
        border-bottom: 0;

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

    .tableCardHandle {
        display: block;

        width: 34px;
        height: 4px;

        margin:
            0 auto 12px;

        border-radius: 10px;

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

    .tableCard h1 {
        font-size: 20px;
    }

    .featureGrid {
        gap: 6px;
    }

    .feature {
        padding: 8px;
    }

    .mapActions {
        right: 10px;
        bottom: 18px;
    }

    .tableCard:not(.hidden)
    ~ .toast {
        bottom: 355px;
    }
}


/* ==========================================================
   DT WALKING / CARSHARING UI V1
   ========================================================== */

.walkingInfo {
    min-height: 64px;

    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 15px;
    padding: 11px 12px;

    border:
        1px solid
        rgba(135,245,66,.16);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(135,245,66,.075),
            rgba(255,255,255,.025)
        );
}

.walkingIcon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        rgba(135,245,66,.12);

    font-size: 18px;
}

.walkingText {
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.walkingText strong {
    color: var(--text);

    font-size: 12px;
    line-height: 1.15;
}

.walkingText span {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.2;
}

.walkingLocate {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,.06);

    color: var(--green);

    cursor: pointer;

    font-size: 16px;
}

.walkingLocate:hover {
    border-color:
        rgba(135,245,66,.35);

    background:
        rgba(135,245,66,.09);
}


/*
 * Small "6 мин" badge above a table marker.
 */
.dtWalkBadge {
    position: absolute;

    left: 50%;
    bottom: 47px;

    min-width: 46px;

    padding: 5px 7px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 10px;

    background:
        rgba(14,22,17,.94);

    backdrop-filter:
        blur(10px);

    color: #ffffff;

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

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

    line-height: 1;

    text-align: center;
    white-space: nowrap;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.24);

    transform:
        translateX(-50%);

    pointer-events: none;
}

.dtWalkBadge::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 100%;

    border-left:
        4px solid transparent;

    border-right:
        4px solid transparent;

    border-top:
        5px solid
        rgba(14,22,17,.94);

    transform:
        translateX(-50%);
}


/*
 * User GPS marker.
 */
.dtUserLocation {
    position: relative;

    width: 20px;
    height: 20px;

    border:
        4px solid #ffffff;

    border-radius: 50%;

    background: #338cff;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.28);
}

.dtUserLocation::after {
    content: "";

    position: absolute;

    inset: -9px;

    border:
        2px solid
        rgba(51,140,255,.30);

    border-radius: 50%;
}


@media (max-width: 600px) {

    .walkingInfo {
        min-height: 58px;

        margin-top: 12px;
        padding: 9px 10px;
    }

    .walkingIcon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .walkingText strong {
        font-size: 11px;
    }

    .dtWalkBadge {
        bottom: 45px;
    }
}


/* DT ADD TABLE V1 */

.addTablePanel {
    position: fixed;
    z-index: 1200;

    top: 104px;
    right: 18px;

    width: min(
        380px,
        calc(100vw - 36px)
    );

    max-height:
        calc(100vh - 122px);

    overflow: auto;

    padding: 20px;

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

    border-radius: 24px;

    background:
        rgba(16,23,19,.97);

    backdrop-filter:
        blur(22px);

    box-shadow:
        var(--shadow);
}

.addTablePanel.hidden {
    display: none;
}

.addTableHead {
    display: flex;
    justify-content:
        space-between;
    gap: 12px;
}

.addTableHead h2 {
    margin: 0;
    font-size: 22px;
}

.addTableHead p {
    margin: 7px 0 0;

    color:
        var(--muted);

    font-size: 10px;
}

.addTablePoint {
    margin: 16px 0;

    padding: 11px;

    border-radius: 12px;

    background:
        rgba(135,245,66,.07);

    color:
        var(--muted);

    font-size: 10px;
}

.addTablePoint strong {
    color: var(--green);
}

.field {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 11px;

    color:
        var(--muted);

    font-size: 9px;
}

.field input,
.field select {
    height: 42px;

    padding: 0 11px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 11px;

    outline: 0;

    background:
        rgba(255,255,255,.055);

    color: white;
}

.field select option {
    background: #172019;
}

.checkField {
    display: block;

    margin: 10px 0;

    color:
        #d3ddd6;

    font-size: 10px;
}

.checkField input {
    margin-right: 7px;
}

#addTableForm
.primaryButton {
    width: 100%;

    margin-top: 8px;
}

.addTableStatus {
    min-height: 18px;

    margin-top: 8px;

    color:
        var(--muted);

    font-size: 9px;
}

.dtAddTableMarker {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 4px solid white;

    border-radius:
        50% 50% 50% 12px;

    background:
        var(--green);

    color:
        #10200f;

    font-size: 22px;
    font-weight: 900;

    transform:
        rotate(-45deg);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.35);
}

.dtAddTableMarker span {
    transform:
        rotate(45deg);
}


@media (max-width: 600px) {

    .addTablePanel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        max-height: 80vh;

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


/* ==========================================================
   DT PROFILE AUTH UI V1
   ========================================================== */

.profilePanel {
    position: fixed;

    z-index: 1250;

    top: 104px;
    right: 18px;

    width:
        min(
            390px,
            calc(100vw - 36px)
        );

    max-height:
        calc(100vh - 122px);

    overflow-y: auto;

    padding: 20px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(20,30,23,.985),
            rgba(12,19,15,.985)
        );

    backdrop-filter:
        blur(24px);

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.40);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.profilePanel.hidden {
    opacity: 0;

    pointer-events: none;

    transform:
        translateX(20px);
}


.profilePanelHandle {
    display: none;
}


.profilePanelHead {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 15px;
}


.profilePanelHead h2 {
    margin: 0;

    font-size: 23px;

    letter-spacing:
        -.7px;
}


.authHero {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 14px;

    border:
        1px solid
        rgba(135,245,66,.12);

    border-radius: 15px;

    background:
        rgba(135,245,66,.055);
}


.authHeroIcon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background:
        var(--green);

    color:
        #11220e;

    font-size: 13px;

    font-weight: 950;
}


.authHero > div:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.authHero strong {
    font-size: 11px;
}


.authHero span {
    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.35;
}


.authForm {
    margin-top: 16px;
}


.authForm.hidden {
    display: none;
}


.authForm .field small {
    margin-left: 4px;

    color:
        #637169;

    font-size: 8px;

    font-weight: 500;
}


.authPrimaryButton {
    width: 100%;

    margin-top: 4px;
}


.authCodeSent {
    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 14px;

    padding: 11px 12px;

    border-radius: 12px;

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


.authCodeSent span {
    color:
        var(--muted);

    font-size: 9px;
}


.authCodeSent strong {
    font-size: 11px;
}


.authCodeInput {
    font-size: 20px !important;

    font-weight: 850;

    letter-spacing: 8px;

    text-align: center;
}


.authBackButton {
    width: 100%;

    margin-top: 8px;

    padding: 8px;

    border: 0;

    background: transparent;

    color:
        var(--muted);

    cursor: pointer;

    font-size: 9px;
}


.authBackButton:hover {
    color: white;
}


.authSmsNotice {
    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 10px;

    padding: 10px;

    border:
        1px solid
        rgba(255,184,68,.12);

    border-radius: 11px;

    background:
        rgba(255,184,68,.055);
}


.authSmsNotice strong {
    color:
        #ffd08a;

    font-size: 9px;
}


.authSmsNotice span {
    color:
        var(--muted);

    font-size: 8px;

    line-height: 1.4;
}


.authStatus {
    min-height: 18px;

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.4;
}


.authStatus.error {
    color:
        #ff8997;
}


.authStatus.success {
    color:
        var(--green);
}


.profileIdentity {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 18px;
}


.profileAvatarLarge {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: grid;

    place-items: center;

    border:
        2px solid
        rgba(255,255,255,.18);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            var(--green),
            #5ed528
        );

    color:
        #10200e;

    font-size: 21px;

    font-weight: 950;

    box-shadow:
        0 10px 30px
        rgba(135,245,66,.12);
}


.profileIdentityText {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items:
        flex-start;

    gap: 4px;
}


.profileIdentityText > strong {
    max-width: 240px;

    overflow: hidden;

    font-size: 18px;

    text-overflow:
        ellipsis;

    white-space: nowrap;
}


.profilePublicId {
    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--green);

    cursor: pointer;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: 10px;
}


.profileIdentityText > span {
    color:
        var(--muted);

    font-size: 9px;
}


.profileRatingHero {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-top: 18px;

    padding: 15px;

    border:
        1px solid
        rgba(135,245,66,.14);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(135,245,66,.09),
            rgba(135,245,66,.025)
        );
}


.profileRatingHero > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.profileMetricLabel {
    color:
        var(--muted);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: 1px;
}


.profileRatingHero strong {
    font-size: 30px;

    line-height: 1;

    letter-spacing: -1px;
}


.profileStars {
    color:
        #ffd85a;

    font-size: 22px;

    letter-spacing: 2px;
}


.profileStats {
    display: grid;

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

    gap: 7px;

    margin-top: 10px;
}


.profileStat {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 10px 6px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 11px;

    background:
        rgba(255,255,255,.035);

    text-align: center;
}


.profileStat span {
    overflow: hidden;

    color:
        var(--muted);

    font-size: 7px;

    text-overflow:
        ellipsis;
}


.profileStat strong {
    font-size: 13px;
}


.reputationCard {
    margin-top: 10px;

    padding: 13px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 14px;

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


.reputationTop {
    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.reputationTop > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.reputationTop span {
    color:
        var(--muted);

    font-size: 8px;

    font-weight: 800;

    letter-spacing:
        .8px;
}


.reputationTop strong {
    font-size: 21px;
}


.reputationShield {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        rgba(135,245,66,.10);

    color:
        var(--green);

    font-size: 15px;

    font-weight: 900;
}


.reputationDetails {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 12px;

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 8px;
}


.reputationDetails b {
    color: white;
}


.profileAddTableButton {
    width: 100%;

    margin-top: 13px;
}


.profileLogoutButton {
    width: 100%;

    margin-top: 8px;

    padding: 10px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 11px;

    background:
        rgba(255,255,255,.035);

    color:
        #9ba89f;

    cursor: pointer;

    font-size: 9px;
}


.profileLogoutButton:hover {
    color:
        #ff9ca8;

    border-color:
        rgba(255,90,110,.16);
}


.profileButton.isLoggedIn {
    border-color:
        rgba(135,245,66,.22);

    background:
        rgba(135,245,66,.07);
}


.profileButton.isLoggedIn
.profileDot {
    background:
        var(--green);
}


@media (max-width: 600px) {

    .profilePanel {
        top: auto;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        max-height: 84vh;

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

        border-left: 0;
        border-right: 0;
        border-bottom: 0;

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


    .profilePanel.hidden {
        transform:
            translateY(25px);
    }


    .profilePanelHandle {
        display: block;

        width: 34px;
        height: 4px;

        margin:
            0 auto 12px;

        border-radius: 10px;

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


    .profileStats {
        gap: 5px;
    }


    .profileStat {
        padding:
            9px 4px;
    }

}


/* DT TABLE TENNIS THEME V1 START */

/*
 * ============================================================
 * ДВОРОВЫЙ ТЕННИС
 *
 * RED / BLACK / WHITE = racket + ball
 * BLUE = table surface / rectangular information blocks
 *
 * This layer is visual only.
 * Map and application JavaScript are untouched.
 * ============================================================
 */

:root {
    --tt-black:
        #07090b;

    --tt-black-soft:
        #0d1115;

    --tt-black-card:
        rgba(9, 12, 15, .965);

    --tt-red:
        #ef242b;

    --tt-red-light:
        #ff4248;

    --tt-red-dark:
        #a90f16;

    --tt-red-glow:
        rgba(239, 36, 43, .22);

    --tt-white:
        #f8fafc;

    --tt-muted:
        #9ca5af;

    --tt-blue:
        #0757a6;

    --tt-blue-dark:
        #052f5e;

    --tt-blue-deep:
        #041d39;

    --tt-blue-soft:
        rgba(6, 63, 121, .42);

    --tt-line:
        rgba(255, 255, 255, .10);

    --tt-radius:
        24px;

    --tt-radius-small:
        14px;

    --green:
        var(--tt-red);

    --greenStrong:
        var(--tt-red-light);

    --muted:
        var(--tt-muted);

    --border:
        rgba(255, 255, 255, .10);
}


/* ------------------------------------------------------------
   PAGE / GLOBAL
   ------------------------------------------------------------ */

html,
body {
    background:
        var(--tt-black);
}


body {
    color:
        var(--tt-white);
}


button,
input,
select,
textarea {
    font-family:
        inherit;
}


::selection {
    color:
        white;

    background:
        var(--tt-red);
}


/* ------------------------------------------------------------
   TOP NAVIGATION
   ------------------------------------------------------------ */

.topBar,
.topbar,
.header,
.siteHeader,
.mapHeader {
    border-color:
        rgba(239, 36, 43, .24) !important;

    background:
        linear-gradient(
            135deg,
            rgba(7, 9, 11, .96),
            rgba(13, 17, 21, .94)
        ) !important;

    box-shadow:
        0 16px 50px
        rgba(0, 0, 0, .26) !important;
}


/*
 * Known buttons on current Tennisdvor UI.
 */

#profileButton,
#openAddTable,
#openTableButton,
.profileButton {
    border:
        1px solid
        rgba(239, 36, 43, .24) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            rgba(23, 26, 30, .97),
            rgba(9, 11, 14, .97)
        ) !important;

    color:
        white !important;

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


#profileButton:hover,
#openAddTable:hover,
#openTableButton:hover,
.profileButton:hover {
    border-color:
        rgba(239, 36, 43, .64) !important;

    box-shadow:
        0 0 0 4px
        rgba(239, 36, 43, .07) !important;
}


/*
 * Little status / icon circles.
 */

.profileDot,
.statusDot {
    background:
        var(--tt-red) !important;

    box-shadow:
        0 0 0 4px
        rgba(239, 36, 43, .10) !important;
}


/* ------------------------------------------------------------
   BRAND / LOGO
   ------------------------------------------------------------ */

.logo,
.brandLogo,
.logoMark {
    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            var(--tt-red-light),
            var(--tt-red-dark)
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .30),
        0 7px 24px
        rgba(239, 36, 43, .19) !important;
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

.searchBox,
.searchInput,
.searchWrap {
    border-color:
        rgba(255, 255, 255, .10) !important;

    background:
        rgba(8, 11, 14, .90) !important;

    color:
        white !important;
}


.searchBox:focus-within,
.searchWrap:focus-within {
    border-color:
        rgba(239, 36, 43, .42) !important;

    box-shadow:
        0 0 0 4px
        rgba(239, 36, 43, .06) !important;
}


/* ------------------------------------------------------------
   FLOATING MAP CONTROLS
   ------------------------------------------------------------ */

.leaflet-control-zoom a,
.leaflet-control-layers,
.mapControl,
.mapButton,
.locationButton {
    border-color:
        rgba(255, 255, 255, .10) !important;

    background:
        rgba(7, 9, 11, .94) !important;

    color:
        white !important;
}


.leaflet-control-zoom a:hover,
.mapControl:hover,
.mapButton:hover,
.locationButton:hover {
    background:
        rgba(239, 36, 43, .90) !important;

    color:
        white !important;
}


/* ------------------------------------------------------------
   STAT COUNTERS ON MAP
   ------------------------------------------------------------ */

.statsPanel,
.mapStats,
.statPanel,
.counterPanel {
    border-color:
        rgba(239, 36, 43, .16) !important;

    background:
        rgba(7, 9, 11, .91) !important;
}


.liveBadge,
.live,
.badgeLive {
    border-color:
        rgba(239, 36, 43, .28) !important;

    background:
        rgba(239, 36, 43, .12) !important;

    color:
        #ff6b70 !important;
}


/* ------------------------------------------------------------
   STANDARD CARDS
   ------------------------------------------------------------ */

.card,
.tableCard,
.addTablePanel,
.profilePanel {
    border:
        1px solid
        rgba(239, 36, 43, .22) !important;

    background:
        linear-gradient(
            155deg,
            rgba(8, 10, 12, .985),
            rgba(13, 17, 21, .975)
        ) !important;

    box-shadow:
        0 26px 80px
        rgba(0, 0, 0, .42),
        inset 0 1px 0
        rgba(255, 255, 255, .025) !important;
}


/*
 * Main side/bottom panels are generously rounded,
 * like the outside of a table-tennis paddle.
 */

.profilePanel,
.addTablePanel {
    border-radius:
        30px !important;
}


/* ------------------------------------------------------------
   CLOSE BUTTONS = BALLS
   ------------------------------------------------------------ */

.closeCard,
#closeProfilePanel,
#closeAddTablePanel {
    width:
        38px !important;

    height:
        38px !important;

    border:
        1px solid
        rgba(255, 255, 255, .12) !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle at 35% 30%,
            #30353a,
            #111418 60%,
            #080a0c
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .10) !important;
}


/* ------------------------------------------------------------
   SMALL EYEBROWS / BRAND LABELS
   ------------------------------------------------------------ */

.eyebrow {
    color:
        var(--tt-red-light) !important;

    font-weight:
        900 !important;

    letter-spacing:
        1.3px !important;
}


/* ------------------------------------------------------------
   PROFILE LOGIN INTRO
   ------------------------------------------------------------ */

.authHero {
    border:
        1px solid
        rgba(255, 255, 255, .09) !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(4, 29, 57, .88),
            rgba(5, 47, 94, .60)
        ) !important;
}


.authHeroIcon {
    border:
        1px solid
        rgba(255, 255, 255, .22) !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            var(--tt-red-light),
            var(--tt-red-dark)
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .28),
        0 8px 22px
        rgba(239, 36, 43, .20) !important;
}


/* ------------------------------------------------------------
   FORM LABELS
   ------------------------------------------------------------ */

.field > span {
    color:
        #c9d0d8 !important;
}


.field small {
    color:
        #727d87 !important;
}


/* ------------------------------------------------------------
   BLUE TABLE-TENNIS-TABLE INPUTS
   ------------------------------------------------------------ */

.field input,
.field select,
.field textarea,
.authForm input,
.authForm select,
.authForm textarea,
.addTablePanel input,
.addTablePanel select,
.addTablePanel textarea {
    border:
        1px solid
        rgba(74, 159, 255, .46) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            rgba(5, 47, 94, .96),
            rgba(6, 70, 132, .82)
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .05) !important;
}


.field input::placeholder,
.field textarea::placeholder {
    color:
        rgba(220, 231, 243, .48) !important;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:
        rgba(103, 183, 255, .95) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 4px
        rgba(44, 135, 225, .13),
        inset 0 1px 0
        rgba(255, 255, 255, .07) !important;
}


/* ------------------------------------------------------------
   MAIN RED ACTION BUTTONS = RACKET SHAPE
   ------------------------------------------------------------ */

.primaryButton,
.authPrimaryButton,
.profileAddTableButton,
.addTableSubmitButton {
    min-height:
        48px;

    border:
        1px solid
        rgba(255, 91, 96, .70) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            #f22e34,
            #c91017
        ) !important;

    color:
        white !important;

    font-weight:
        900 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .28),
        0 10px 26px
        rgba(190, 8, 18, .20) !important;

    text-shadow:
        0 1px 0
        rgba(0, 0, 0, .20);
}


.primaryButton:hover,
.authPrimaryButton:hover,
.profileAddTableButton:hover,
.addTableSubmitButton:hover {
    border-color:
        rgba(255, 255, 255, .28) !important;

    background:
        linear-gradient(
            180deg,
            #ff3a40,
            #df141c
        ) !important;

    transform:
        translateY(-1px);
}


.primaryButton:active,
.authPrimaryButton:active,
.profileAddTableButton:active {
    transform:
        translateY(0)
        scale(.992);
}


/* ------------------------------------------------------------
   PLAYER IDENTITY
   ------------------------------------------------------------ */

.profileAvatarLarge {
    border:
        2px solid
        rgba(255, 255, 255, .24) !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle at 35% 28%,
            #ff4e54,
            #c81017 62%,
            #8f080e
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 2px 1px
        rgba(255, 255, 255, .20),
        0 12px 28px
        rgba(239, 36, 43, .18) !important;
}


.profilePublicId {
    color:
        var(--tt-red-light) !important;
}


/* ------------------------------------------------------------
   RATING = BLUE TABLE
   ------------------------------------------------------------ */

.profileRatingHero {
    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(54, 147, 240, .62) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #063a71,
            #05274b
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .06) !important;
}


/*
 * white table line
 */

.profileRatingHero::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    opacity:
        .08;

    background:
        white;

    pointer-events:
        none;
}


.profileStars {
    color:
        #ff464c !important;

    text-shadow:
        0 0 18px
        rgba(239, 36, 43, .34);
}


/* ------------------------------------------------------------
   FOUR STATS = MINI BLUE TABLE PANELS
   ------------------------------------------------------------ */

.profileStat {
    border:
        1px solid
        rgba(54, 147, 240, .32) !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            rgba(5, 55, 106, .91),
            rgba(4, 33, 65, .95)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04) !important;
}


.profileStat span {
    color:
        #a8bed3 !important;
}


.profileStat strong {
    color:
        white !important;
}


/* ------------------------------------------------------------
   REPUTATION = DARK BLUE TABLE SECTION
   ------------------------------------------------------------ */

.reputationCard {
    border:
        1px solid
        rgba(54, 147, 240, .30) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(4, 31, 59, .96),
            rgba(6, 47, 87, .78)
        ) !important;
}


.reputationShield {
    border:
        1px solid
        rgba(239, 36, 43, .35) !important;

    border-radius:
        50% !important;

    background:
        rgba(239, 36, 43, .10) !important;

    color:
        var(--tt-red-light) !important;
}


/* ------------------------------------------------------------
   LOGOUT / SECONDARY
   ------------------------------------------------------------ */

.profileLogoutButton,
.authBackButton {
    border-color:
        rgba(255, 255, 255, .09) !important;

    background:
        rgba(255, 255, 255, .025) !important;

    color:
        #8c969f !important;
}


.profileLogoutButton:hover,
.authBackButton:hover {
    border-color:
        rgba(239, 36, 43, .25) !important;

    color:
        #ff7479 !important;
}


/* ------------------------------------------------------------
   OTP / INFO NOTICE
   ------------------------------------------------------------ */

.authCodeSent,
.authSmsNotice {
    border-color:
        rgba(54, 147, 240, .20) !important;

    background:
        rgba(5, 47, 94, .28) !important;
}


.authSmsNotice strong {
    color:
        #ff7a7f !important;
}


/* ------------------------------------------------------------
   ADD TABLE PANEL
   ------------------------------------------------------------ */

.addTablePanel .field,
.addTablePanel .formGroup {
    border-radius:
        10px !important;
}


/*
 * Choice cards / toggles in Add Table:
 * rectangular like the surface of the table.
 */

.addTablePanel label,
.optionCard,
.choiceCard,
.toggleCard {
    border-radius:
        10px;
}


/* ------------------------------------------------------------
   TABLE DETAILS CARD
   ------------------------------------------------------------ */

.tableCard {
    border-radius:
        26px !important;
}


.tableCard .badge,
.tableCard .statusBadge,
.tableStatus {
    border:
        1px solid
        rgba(239, 36, 43, .22) !important;

    border-radius:
        999px !important;

    background:
        rgba(239, 36, 43, .10) !important;

    color:
        #ff686d !important;
}


/* ------------------------------------------------------------
   TOASTS
   ------------------------------------------------------------ */

.toast {
    border:
        1px solid
        rgba(239, 36, 43, .25) !important;

    border-radius:
        999px !important;

    background:
        rgba(7, 9, 11, .96) !important;

    color:
        white !important;

    box-shadow:
        0 16px 50px
        rgba(0, 0, 0, .40) !important;
}


/* ------------------------------------------------------------
   BALL-LIKE DECORATIVE DOTS
   ------------------------------------------------------------ */

.profilePanelHead::after {
    content:
        "";

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    top:
        19px;

    right:
        68px;

    border-radius:
        50%;

    background:
        white;

    opacity:
        .58;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, .50);

    pointer-events:
        none;
}


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

@media (max-width: 600px) {

    .profilePanel,
    .addTablePanel {
        border-radius:
            28px 28px 0 0 !important;

        border-bottom:
            0 !important;
    }


    .profilePanelHandle {
        background:
            linear-gradient(
                90deg,
                var(--tt-red),
                white
            ) !important;

        opacity:
            .55;
    }


    .profileRatingHero,
    .reputationCard,
    .profileStat {
        border-radius:
            10px !important;
    }

}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 601px) {

    .profilePanel,
    .addTablePanel,
    .tableCard {
        backdrop-filter:
            blur(24px)
            saturate(120%);
    }

}


/* DT TABLE TENNIS THEME V1 END */


/* DT TABLE TENNIS THEME V2 START */

/*
 * ============================================================
 * ДВОРОВЫЙ ТЕННИС — VISUAL SYSTEM
 *
 * WHITE CIRCLES  = ping-pong ball
 * RED PILLS      = racket rubber
 * DARK BLUE      = table surface
 * BLACK          = neutral / background
 *
 * INPUTS ARE NEVER RED.
 * ============================================================
 */

:root {
    --dt-black:
        #07090c;

    --dt-black-soft:
        #0b0f14;

    --dt-table:
        #071d33;

    --dt-table-2:
        #082846;

    --dt-table-3:
        #0a345a;

    --dt-table-line:
        #1f5e91;

    --dt-red:
        #e61e28;

    --dt-red-light:
        #ff3740;

    --dt-red-dark:
        #ad1118;

    --dt-white:
        #ffffff;

    --dt-text-muted:
        #9dacba;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html,
body {
    background:
        var(--dt-black) !important;

    color:
        var(--dt-white);
}


/* ============================================================
   MAIN SITE SHELL / HEADER
   ============================================================ */

.topBar,
.topbar,
.header,
.siteHeader,
.mapHeader {
    border-color:
        rgba(31, 94, 145, .34) !important;

    background:
        linear-gradient(
            135deg,
            #071625,
            #06111c
        ) !important;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .34) !important;
}


/* ============================================================
   LONG ROUNDED ACTIONS = RED RACKET
   ============================================================ */

#profileButton,
#openAddTable,
#openTableButton,
.profileButton,
.primaryButton,
.authPrimaryButton,
.profileAddTableButton,
.addTableSubmitButton {
    border:
        1px solid
        rgba(255, 92, 98, .76) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            var(--dt-red-light),
            var(--dt-red-dark)
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .24),
        0 9px 25px
        rgba(180, 12, 22, .24) !important;
}


#profileButton:hover,
#openAddTable:hover,
#openTableButton:hover,
.profileButton:hover,
.primaryButton:hover,
.authPrimaryButton:hover,
.profileAddTableButton:hover,
.addTableSubmitButton:hover {
    background:
        linear-gradient(
            180deg,
            #ff444b,
            #d91620
        ) !important;

    border-color:
        rgba(255,255,255,.32) !important;
}


/* ============================================================
   ALL CLEAR CIRCULAR UI = WHITE BALL
   ============================================================ */

.authHeroIcon,
.profileAvatarLarge,
.closeCard,
#closeProfilePanel,
#closeAddTablePanel,
.reputationShield,
.profileDot {
    border:
        1px solid
        rgba(255, 255, 255, .88) !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle at 34% 28%,
            #ffffff 0%,
            #f8f8f8 52%,
            #dfe3e6 100%
        ) !important;

    color:
        var(--dt-red) !important;

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.85),
        0 5px 16px
        rgba(0,0,0,.28) !important;
}


/*
 * Profile status dot is small,
 * but follows the same "white ball" rule.
 */

.profileDot {
    width:
        15px !important;

    height:
        15px !important;
}


/*
 * White avatar text remains red.
 */

.authHeroIcon,
.profileAvatarLarge {
    font-weight:
        950 !important;
}


/* ============================================================
   MAIN PANELS = DARK BLUE TABLE
   ============================================================ */

.profilePanel,
.addTablePanel,
.tableCard,
.card {
    border:
        1px solid
        rgba(36, 99, 151, .52) !important;

    background:
        linear-gradient(
            155deg,
            #071d33 0%,
            #061728 52%,
            #04111d 100%
        ) !important;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.44),
        inset 0 1px 0
        rgba(255,255,255,.035) !important;
}


/*
 * Big panels remain soft/rounded,
 * but not every rectangle becomes a pill.
 */

.profilePanel,
.addTablePanel {
    border-radius:
        28px !important;
}


/* ============================================================
   INTRO / INNER CARDS = TABLE SURFACE
   ============================================================ */

.authHero,
.profileRatingHero,
.reputationCard,
.profileStat,
.optionCard,
.choiceCard,
.toggleCard {
    border:
        1px solid
        rgba(42, 112, 170, .46) !important;

    background:
        linear-gradient(
            145deg,
            #092c4d,
            #061e36
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035) !important;
}


/* ============================================================
   PHONE / NICK / CODE / INPUTS
   ABSOLUTELY NO RED
   ============================================================ */

.field input,
.field select,
.field textarea,
.authForm input,
.authForm select,
.authForm textarea,
.addTablePanel input,
.addTablePanel select,
.addTablePanel textarea {
    border:
        1px solid
        #245d89 !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            180deg,
            #0a345a,
            #082846
        ) !important;

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035) !important;
}


.field input:hover,
.field select:hover,
.field textarea:hover,
.authForm input:hover,
.authForm select:hover,
.authForm textarea:hover {
    border-color:
        #3675a7 !important;
}


.field input:focus,
.field select:focus,
.field textarea:focus,
.authForm input:focus,
.authForm select:focus,
.authForm textarea:focus,
.addTablePanel input:focus,
.addTablePanel select:focus,
.addTablePanel textarea:focus {
    border-color:
        #4d92c8 !important;

    outline:
        none !important;

    background:
        linear-gradient(
            180deg,
            #0c3b66,
            #092d4e
        ) !important;

    box-shadow:
        0 0 0 3px
        rgba(52, 126, 183, .16) !important;
}


.field input::placeholder,
.field textarea::placeholder,
.authForm input::placeholder {
    color:
        rgba(218, 229, 239, .47) !important;
}


/* ============================================================
   PLAYER ID
   ============================================================ */

.profilePublicId {
    color:
        var(--dt-red-light) !important;
}


/* ============================================================
   RATING
   ============================================================ */

.profileRatingHero {
    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #0a345a,
            #061e36
        ) !important;
}


.profileRatingHero::after {
    background:
        rgba(255,255,255,.18) !important;
}


.profileStars {
    color:
        var(--dt-red-light) !important;

    text-shadow:
        none !important;
}


/* ============================================================
   STATS = RECTANGULAR BLUE TABLE SECTIONS
   ============================================================ */

.profileStat {
    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            #092f52,
            #061d34
        ) !important;
}


.profileStat span {
    color:
        #aabcca !important;
}


.profileStat strong {
    color:
        white !important;
}


/* ============================================================
   REPUTATION
   ============================================================ */

.reputationCard {
    border-radius:
        12px !important;
}


.reputationTop span,
.profileMetricLabel {
    color:
        #aebdca !important;
}


.reputationDetails {
    color:
        #9eafbd !important;
}


/* ============================================================
   PROFILE / LOGIN BASE
   ============================================================ */

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


/*
 * The small decorative ball is also white.
 */

.profilePanelHead::after {
    background:
        white !important;

    opacity:
        .82 !important;
}


/* ============================================================
   SEARCH = DARK BLUE TABLE INPUT
   ============================================================ */

.searchBox,
.searchInput,
.searchWrap {
    border:
        1px solid
        rgba(36, 93, 137, .60) !important;

    background:
        #081f36 !important;

    color:
        white !important;
}


.searchBox:focus-within,
.searchWrap:focus-within {
    border-color:
        #3979a8 !important;

    box-shadow:
        0 0 0 3px
        rgba(52,126,183,.13) !important;
}


/* ============================================================
   MAP COUNTERS
   ============================================================ */

.statsPanel,
.mapStats,
.statPanel,
.counterPanel {
    border-color:
        rgba(36, 93, 137, .40) !important;

    background:
        rgba(6, 22, 38, .94) !important;
}


/*
 * LIVE can remain red because it is a state/action accent,
 * not a base form.
 */

.liveBadge,
.live,
.badgeLive {
    background:
        rgba(230, 30, 40, .14) !important;

    border-color:
        rgba(230, 30, 40, .36) !important;

    color:
        #ff6168 !important;
}


/* ============================================================
   TABLE DETAILS
   ============================================================ */

.tableCard {
    border-radius:
        24px !important;

    background:
        linear-gradient(
            155deg,
            #071d33,
            #051523
        ) !important;
}


.tableCard .badge,
.tableCard .statusBadge,
.tableStatus {
    border-radius:
        999px !important;

    border-color:
        rgba(230,30,40,.34) !important;

    background:
        rgba(230,30,40,.12) !important;

    color:
        #ff6d73 !important;
}


/* ============================================================
   ADD TABLE FORM
   ============================================================ */

.addTablePanel .field,
.addTablePanel .formGroup {
    border-radius:
        10px !important;
}


/*
 * Form-like rectangular controls are blue,
 * even when they have slightly rounded corners.
 */

.optionCard,
.choiceCard,
.toggleCard {
    border-radius:
        10px !important;
}


/* ============================================================
   SECONDARY BUTTONS
   ============================================================ */

.profileLogoutButton,
.authBackButton {
    border:
        1px solid
        rgba(41, 82, 115, .55) !important;

    border-radius:
        10px !important;

    background:
        #071a2b !important;

    color:
        #9eacb8 !important;
}


.profileLogoutButton:hover,
.authBackButton:hover {
    border-color:
        rgba(230,30,40,.35) !important;

    color:
        white !important;
}


/* ============================================================
   OTP / INFORMATION BOXES
   ============================================================ */

.authCodeSent,
.authSmsNotice {
    border:
        1px solid
        rgba(36, 93, 137, .46) !important;

    border-radius:
        10px !important;

    background:
        #071f36 !important;
}


/* ============================================================
   TOAST
   ============================================================ */

.toast {
    border:
        1px solid
        rgba(230,30,40,.35) !important;

    background:
        #07111c !important;

    color:
        white !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .profilePanel,
    .addTablePanel {
        border-radius:
            26px 26px 0 0 !important;
    }

}


/* DT TABLE TENNIS THEME V2 END */


/* ==========================================================
   DT AUTH STATE VISIBILITY FIX V1
   Only one account state may be visible at a time.
   ========================================================== */

#authLoggedOut.hidden,
#authLoggedIn.hidden {
    display: none !important;
}



/* ==========================================================
   DT TABLE PHOTO UI V1
   Blue table base / white ball / red racket action
   ========================================================== */

.dtTablePhotoField {
    margin:
        14px 0;

    padding:
        13px;

    border:
        1px solid
        rgba(42, 112, 170, .48);

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #092c4d,
            #061e36
        );
}


.dtTablePhotoHead {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        11px;
}


.dtTablePhotoBall {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 34% 27%,
            #ffffff,
            #f4f4f4 58%,
            #d9dde0
        );

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.25);
}


.dtTablePhotoHead > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.dtTablePhotoHead strong {
    color:
        white;

    font-size:
        11px;
}


.dtTablePhotoHead span {
    color:
        #9eb1c1;

    font-size:
        8px;
}


.dtTablePhotoChoose {
    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,92,98,.72);

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            #f0323a,
            #b81119
        );

    color:
        white;

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        900;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.22),
        0 8px 20px
        rgba(180,12,22,.18);
}


.dtTablePhotoChoose:hover {
    background:
        linear-gradient(
            180deg,
            #ff4148,
            #d31620
        );
}


.dtTablePhotoPreviewWrap {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        11px;

    border:
        1px solid
        rgba(67, 132, 185, .52);

    border-radius:
        10px;

    background:
        #041625;
}


.dtTablePhotoPreviewWrap.hidden {
    display:
        none;
}


.dtTablePhotoPreviewWrap img {
    width:
        100%;

    max-height:
        240px;

    display:
        block;

    object-fit:
        cover;
}


.dtTablePhotoRemove {
    position:
        absolute;

    top:
        8px;

    right:
        8px;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid
        white;

    border-radius:
        50%;

    background:
        white;

    color:
        #d61922;

    cursor:
        pointer;

    font-size:
        18px;

    font-weight:
        900;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.28);
}


.dtTablePhotoInfo {
    margin-top:
        8px;

    color:
        #8fa5b7;

    font-size:
        8px;

    line-height:
        1.4;
}


/* ========================================================== */



/* ==========================================================
   DT SHARP BLUE TABLE DESIGN V1

   BLUE = TABLE = STRAIGHT / SHARP EDGES
   RED PILLS = RACKET = ROUNDED
   WHITE CIRCLES = BALL = ROUND
   ========================================================== */


/*
 * MAIN BLUE BASES
 */

.profilePanel,
.addTablePanel,
.tableCard,
.card {
    border-radius:
        0 !important;
}


/*
 * BLUE INNER CARDS
 */

.authHero,
.profileRatingHero,
.reputationCard,
.profileStat,
.optionCard,
.choiceCard,
.toggleCard,
.authCodeSent,
.authSmsNotice,
.dtTablePhotoField,
.dtTablePhotoPreviewWrap {
    border-radius:
        0 !important;
}


/*
 * BLUE FORM FIELDS
 */

.field input,
.field select,
.field textarea,
.authForm input,
.authForm select,
.authForm textarea,
.addTablePanel input,
.addTablePanel select,
.addTablePanel textarea {
    border-radius:
        0 !important;
}


/*
 * SEARCH IS ALSO A BLUE RECTANGULAR SURFACE.
 */

.searchBox,
.searchInput,
.searchWrap {
    border-radius:
        0 !important;
}


/*
 * SECONDARY BLUE / DARK RECTANGULAR BUTTONS.
 * They are controls, not red racket actions.
 */

.profileLogoutButton,
.authBackButton {
    border-radius:
        0 !important;
}


/*
 * Explicitly KEEP racket actions round.
 */

.primaryButton,
.authPrimaryButton,
.profileAddTableButton,
.addTableSubmitButton,
.dtTablePhotoChoose,
#openAddTable,
#openTableButton,
#profileButton,
.profileButton {
    border-radius:
        999px !important;
}


/*
 * Explicitly KEEP ping-pong balls round.
 */

.authHeroIcon,
.profileAvatarLarge,
.closeCard,
#closeProfilePanel,
#closeAddTablePanel,
.reputationShield,
.profileDot,
.dtTablePhotoBall,
.dtTablePhotoRemove {
    border-radius:
        50% !important;
}


/*
 * Mobile must NOT restore round corners
 * on the blue main panels.
 */

@media (max-width: 600px) {

    .profilePanel,
    .addTablePanel,
    .tableCard,
    .card {
        border-radius:
            0 !important;
    }

}


/* ========================================================== */



/* ==========================================================
   DT MY TABLES DESIGN V1

   BLUE = TABLE = SHARP
   RED = RACKET = ROUND
   WHITE = BALL = ROUND
   ========================================================== */

.profileMyTables {
    margin-top:
        14px;

    padding:
        12px;

    border:
        1px solid
        rgba(42,112,170,.55);

    border-radius:
        0 !important;

    background:
        linear-gradient(
            145deg,
            #092c4d,
            #061e36
        );
}


.profileMyTablesHead {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        10px;
}


.profileMyTablesHead span {
    color:
        #a9bbc9;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .8px;
}


.profileMyTablesHead strong {
    color:
        white;

    font-size:
        13px;
}


.profileMyTablesList {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.profileMyTableCard {
    overflow:
        hidden;

    border:
        1px solid
        rgba(46,113,166,.55);

    border-radius:
        0 !important;

    background:
        #061a2e;
}


.profileMyTablePhoto {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        0 !important;

    border-bottom:
        1px solid
        rgba(49,113,162,.48);

    background:
        #082846;
}


.profileMyTablePhoto img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        0 !important;
}


.profileMyTableBall {
    width:
        38px;

    height:
        38px;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle at 34% 28%,
            #ffffff,
            #f5f5f5 58%,
            #dadddf
        );

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.25);
}


.profileMyTableBody {
    padding:
        10px;
}


.profileMyTableTop {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;
}


.profileMyTableTop > div {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.profileMyTableName {
    overflow:
        hidden;

    color:
        white;

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.profileMyTableId {
    color:
        #8499aa;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size:
        7px;
}


.profileMyTableStatus {
    flex:
        0 0 auto;

    color:
        #ff5158;

    font-size:
        8px;

    font-weight:
        850;
}


.profileMyTableAddress {
    margin-top:
        7px;

    color:
        #9bafbf;

    font-size:
        8px;

    line-height:
        1.35;
}


.profileMyTableMapButton {
    width:
        100%;

    min-height:
        38px;

    margin-top:
        9px;

    border:
        1px solid
        rgba(255,92,98,.74);

    border-radius:
        999px !important;

    background:
        linear-gradient(
            180deg,
            #ef3038,
            #b81119
        );

    color:
        white;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        900;
}


.profileMyTableMapButton:hover {
    background:
        linear-gradient(
            180deg,
            #ff4249,
            #d4151e
        );
}


.profileMyTablesEmpty {
    padding:
        13px 6px;

    color:
        #91a5b5;

    font-size:
        8px;

    text-align:
        center;
}


/* ========================================================== */