/* ==========================================================
   VPN FAMILY ADMIN
   MOBILE UI V2

   Design language:
   - compact dark admin dashboard
   - based on the desktop reference
   - Telegram Mini App first
   - desktop styles are NOT changed
   ========================================================== */

.mobile-bottom-nav,
.mobile-more-overlay {
    display: none;
}


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

@media (max-width: 760px) {

    :root {
        --m-bg: #070d18;
        --m-panel: #101a2c;
        --m-panel-2: #142039;
        --m-panel-3: #192847;

        --m-border: #23324d;
        --m-border-soft: rgba(120, 150, 205, .16);

        --m-text: #f1f5ff;
        --m-muted: #8d9ab7;

        --m-blue: #3478ff;
        --m-blue-soft: rgba(52, 120, 255, .16);

        --m-green: #37d79a;
        --m-green-soft: rgba(55, 215, 154, .14);

        --m-yellow: #f3b64e;
        --m-yellow-soft: rgba(243, 182, 78, .14);

        --m-red: #f06479;
        --m-red-soft: rgba(240, 100, 121, .14);
    }


    /* ======================================================
       BASE
       ====================================================== */

    html,
    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: hidden;

        background:
            radial-gradient(
                circle at 50% -10%,
                rgba(37, 78, 155, .12),
                transparent 38%
            ),
            var(--m-bg);

        -webkit-text-size-adjust: 100%;
    }

    body {
        padding-bottom:
            calc(64px + env(safe-area-inset-bottom, 0px));

        color: var(--m-text);
    }

    main {
        width: 100%;
        max-width: none;

        margin: 0;

        padding:
            11px
            10px
            calc(76px + env(safe-area-inset-bottom, 0px));
    }


    /* ======================================================
       HEADER
       ====================================================== */

    header {
        position: sticky;
        top: 0;
        z-index: 50;

        min-height: 50px;

        padding: 8px 12px;

        display: flex;
        flex-direction: row;
        align-items: center;

        border-bottom: 1px solid var(--m-border-soft);

        background: rgba(7, 13, 24, .94);

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    header > div {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 1px;
    }

    header strong {
        font-size: 17px;
        line-height: 1.15;
    }

    header span {
        color: var(--m-muted);

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

    header nav {
        display: none !important;
    }

    /*
     * Telegram already shows:
     * Admin VPN Family
     */
    body.telegram-webapp > header {
        display: none !important;
    }


    /* ======================================================
       PAGE HEADER
       ====================================================== */

    .page-head {
        display: block;

        margin: 0 0 10px;
    }

    .page-head h1 {
        margin: 0 0 3px;

        font-size: 23px;
        line-height: 1.12;

        letter-spacing: -.025em;
    }

    .page-head p {
        margin: 0;

        color: var(--m-muted);

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

    .page-head > .button,
    .page-head > a.button {
        margin-top: 8px;
    }


    /* ======================================================
       DASHBOARD STATS
       3 x 2
       ====================================================== */

    .cards,
    .dashboard-cards {
        display: grid;

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

        gap: 6px;

        margin-bottom: 9px;
    }

    .dashboard-cards .card,
    .dashboard-cards .card-link {
        position: relative;

        min-width: 0;
        min-height: 67px;

        padding: 8px 8px;

        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                rgba(20, 32, 57, .98),
                rgba(14, 24, 43, .98)
            );

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

        border-radius: 11px;

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

    .dashboard-cards .card::after,
    .dashboard-cards .card-link::after {
        content: attr(data-icon);

        position: absolute;

        top: 7px;
        right: 7px;

        display: grid;
        place-items: center;

        width: 20px;
        height: 20px;

        border-radius: 6px;

        color: #7fa9ff;

        background: var(--m-blue-soft);

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

        opacity: .85;
    }

    .dashboard-cards .card span,
    .dashboard-cards .card-link span {
        display: block;

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

        margin: 0 0 3px;

        color: var(--m-muted);

        font-size: 10px;
        line-height: 1.1;
    }

    .dashboard-cards .card strong,
    .dashboard-cards .card-link strong,
    .dashboard-cards .compact-value {
        display: block;

        font-size: 20px !important;
        line-height: 1;

        letter-spacing: -.02em;
    }

    .dashboard-cards .card small,
    .dashboard-cards .card-link small {
        margin-top: 3px;

        font-size: 8px;
        line-height: 1.1;
    }

    .dashboard-cards .stat-online {
        border-color: rgba(55, 215, 154, .36);
    }

    .dashboard-cards .stat-online::after {
        color: var(--m-green);
        background: var(--m-green-soft);
    }

    .dashboard-cards .stat-warning {
        border-color: rgba(243, 182, 78, .34);
    }

    .dashboard-cards .stat-warning::after {
        color: var(--m-yellow);
        background: var(--m-yellow-soft);
    }

    .dashboard-cards .stat-error,
    .dashboard-cards .stat-revoked {
        border-color: rgba(240, 100, 121, .34);
    }

    .dashboard-cards .stat-error::after,
    .dashboard-cards .stat-revoked::after {
        color: var(--m-red);
        background: var(--m-red-soft);
    }

    /* Desired order */
    .dashboard-cards > *:nth-child(1) { order: 1; }
    .dashboard-cards > *:nth-child(2) { order: 2; }
    .dashboard-cards > *:nth-child(3) { order: 3; }
    .dashboard-cards > *:nth-child(6) { order: 4; }
    .dashboard-cards > *:nth-child(5) { order: 5; }
    .dashboard-cards > *:nth-child(4) { order: 6; }


    /* ======================================================
       GENERIC PANELS
       ====================================================== */

    .panel {
        margin-bottom: 8px;

        padding: 10px;

        background:
            linear-gradient(
                145deg,
                rgba(17, 28, 48, .98),
                rgba(13, 23, 41, .98)
            );

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

        border-radius: 12px;
    }

    .panel h2 {
        margin: 0 0 8px;

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

    .panel h3 {
        margin: 9px 0 6px;

        font-size: 14px;
    }

    .panel p {
        line-height: 1.35;
    }


    /* ======================================================
       DASHBOARD / SETTINGS DATA LISTS
       ====================================================== */

    .page-dashboard .panel dl,
    .page-settings .panel dl {
        display: grid;

        grid-template-columns:
            minmax(105px, .75fr)
            minmax(0, 1.25fr);

        gap: 5px 10px;
    }

    .page-dashboard .panel dt,
    .page-settings .panel dt {
        margin: 0;

        color: var(--m-muted);

        font-size: 10px;
        line-height: 1.25;
    }

    .page-dashboard .panel dd,
    .page-settings .panel dd {
        margin: 0;

        min-width: 0;

        font-size: 12px;
        line-height: 1.25;

        overflow-wrap: anywhere;
    }

    .page-dashboard .system-panel,
    .page-settings .system-panel {
        position: relative;
    }

    .page-dashboard .system-panel::before,
    .page-settings .system-panel::before {
        content: "";

        position: absolute;

        left: 0;
        top: 11px;
        bottom: 11px;

        width: 2px;

        border-radius: 2px;

        background: var(--m-blue);
    }

    .page-dashboard .panel code,
    .page-settings .panel code {
        font-size: 11px;
    }


    /* ======================================================
       BUTTONS / INPUTS
       ====================================================== */

    input,
    select,
    textarea {
        width: 100%;

        min-height: 40px;

        margin-top: 4px;

        padding: 8px 10px;

        color: var(--m-text);

        background: #0b1425;

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

        border-radius: 9px;

        font-size: 14px;
    }

    button,
    .button {
        min-height: 39px;

        padding: 7px 10px;

        border-radius: 9px;

        font-size: 13px;
    }

    label {
        margin: 0;

        color: var(--m-muted);

        font-size: 11px;
    }

    .filter-actions {
        display: grid;

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

        gap: 7px;

        width: 100%;

        padding: 0;
    }

    .filter-actions button,
    .filter-actions .button {
        width: 100%;

        text-align: center;
    }


    /* ======================================================
       CONNECTION FILTERS
       ====================================================== */

    .page-logs .log-filters {
        display: grid;

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

        gap: 8px;
    }

    .page-logs .log-filters label:nth-child(1),
    .page-logs .log-filters label:nth-child(4),
    .page-logs .log-filters label:nth-child(5),
    .page-logs .log-filters .filter-actions {
        grid-column: 1 / -1;
    }

    .page-errors .error-filters {
        display: grid;

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

        gap: 8px;
    }

    .page-errors .error-filters label:nth-child(2),
    .page-errors .error-filters .filter-actions {
        grid-column: 1 / -1;
    }

    .page-audit .log-filters {
        display: grid;

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

        gap: 8px;
    }

    .page-audit .log-filters .filter-actions {
        grid-column: 1 / -1;
    }


    /* ======================================================
       SMALL STAT CARDS OTHER PAGES
       ====================================================== */

    .log-cards,
    .error-cards {
        display: grid;

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

        gap: 6px;

        margin-bottom: 8px;
    }

    .log-cards .card,
    .error-cards .card {
        min-height: 70px;

        padding: 9px;

        border-radius: 11px;

        background: var(--m-panel);

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

    .log-cards .card span,
    .error-cards .card span {
        margin-bottom: 4px;

        font-size: 10px;
    }

    .log-cards .card strong,
    .error-cards .card strong {
        font-size: 21px !important;
    }


    /* ======================================================
       USERS
       ====================================================== */

    .page-users .table-wrap {
        overflow: visible;

        background: transparent;

        border: 0;

        border-radius: 0;
    }

    .users-table {
        display: block;

        width: 100%;
        min-width: 0;
    }

    .users-table thead {
        display: none;
    }

    .users-table tbody {
        display: grid;

        gap: 8px;
    }

    .users-table tr.user-mobile-card {
        display: grid;

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

        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                rgba(18, 29, 51, .98),
                rgba(13, 23, 42, .98)
            );

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

        border-radius: 12px;
    }

    .users-table td {
        min-width: 0 !important;

        padding: 7px 9px;

        border-bottom: 1px solid var(--m-border-soft);

        white-space: normal !important;

        overflow-wrap: anywhere;
    }

    .users-table td::before {
        content: attr(data-label);

        display: block;

        margin-bottom: 3px;

        color: var(--m-muted);

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

        line-height: 1.15;

        text-transform: uppercase;
        letter-spacing: .045em;
    }

    .users-table .user-identity {
        grid-column: 1 / -1;

        padding: 10px;

        background:
            linear-gradient(
                90deg,
                rgba(52, 120, 255, .08),
                transparent
            );
    }

    .users-table .user-identity::before {
        display: none;
    }

    .users-table .user-identity strong {
        font-size: 17px;
    }

    .users-table .user-identity small {
        margin-top: 2px;

        font-size: 11px;
        line-height: 1.3;
    }

    .users-table .cell-access,
    .users-table .cell-online {
        min-height: 55px;
    }

    .users-table .cell-ip,
    .users-table .cell-activity,
    .users-table .cell-traffic,
    .users-table .cell-xray {
        min-height: 58px;
    }

    .users-table .cell-uuid {
        grid-column: 1 / -1;
    }

    .users-table .cell-actions {
        grid-column: 1 / -1;

        padding: 8px 9px 9px;

        border-bottom: 0;
    }

    .users-table .actions {
        display: grid;

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

        gap: 6px;
    }

    .users-table .actions form {
        width: 100%;
    }

    .users-table .actions button,
    .users-table .actions .button {
        width: 100%;
        min-height: 38px;

        padding: 6px 5px;

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

    .users-table .badge {
        padding: 4px 7px;

        font-size: 10px;
    }

    .users-table .ip-list,
    .users-table .traffic {
        gap: 2px;

        font-size: 12px;
    }


    /* ======================================================
       AUDIT TABLE -> CARDS
       ====================================================== */

    .page-audit .table-wrap {
        overflow: visible;

        border: 0;

        background: transparent;
    }

    .page-audit table {
        display: block;

        width: 100%;
        min-width: 0;
    }

    .page-audit table thead {
        display: none;
    }

    .page-audit table tbody {
        display: grid;

        gap: 7px;
    }

    .page-audit table tr {
        display: grid;

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

        overflow: hidden;

        background: var(--m-panel);

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

        border-radius: 11px;
    }

    .page-audit table td {
        display: block;

        min-width: 0;

        padding: 7px 9px;

        border-bottom: 1px solid var(--m-border-soft);

        overflow-wrap: anywhere;
    }

    .page-audit table td::before {
        content: attr(data-label);

        display: block;

        margin-bottom: 3px;

        color: var(--m-muted);

        font-size: 9px;

        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .page-audit table td:last-child {
        grid-column: 1 / -1;

        border-bottom: 0;
    }


    /* ======================================================
       ERRORS TABLE -> MOBILE CARDS
       ====================================================== */

    .page-errors .table-wrap {
        overflow: visible;

        border: 0;

        background: transparent;
    }

    .page-errors .errors-table {
        display: block;

        width: 100%;
        min-width: 0;
    }

    .page-errors .errors-table thead {
        display: none;
    }

    .page-errors .errors-table tbody {
        display: grid;

        gap: 7px;
    }

    .page-errors .errors-table tr {
        display: block;

        overflow: hidden;

        background: var(--m-panel);

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

        border-radius: 11px;
    }

    .page-errors .errors-table td {
        display: block;

        padding: 7px 9px;

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

    .page-errors .errors-table td::before {
        content: attr(data-label);

        display: block;

        margin-bottom: 3px;

        color: var(--m-muted);

        font-size: 9px;

        text-transform: uppercase;
    }

    .page-errors .errors-table td:last-child {
        border-bottom: 0;
    }


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

    .page-logs .table-wrap {
        max-width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .page-logs table {
        font-size: 11px;
    }


    /* ======================================================
       DETAILS / LISTS
       ====================================================== */

    dl {
        margin: 0;
    }

    dt {
        color: var(--m-muted);
    }

    dd {
        margin: 0;
    }

    .simple-list > div {
        padding: 6px 0;
    }

    code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* ======================================================
       TELEGRAM
       ====================================================== */

    .telegram-webapp .tg-webapp-hide {
        display: none !important;
    }


    /* ======================================================
       BOTTOM NAV
       ====================================================== */

    .mobile-bottom-nav {
        position: fixed;

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

        z-index: 1000;

        display: grid;

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

        padding:
            4px
            5px
            calc(4px + env(safe-area-inset-bottom, 0px));

        background: rgba(7, 13, 24, .98);

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

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mobile-nav-item {
        appearance: none;

        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        min-width: 0;
        min-height: 47px;

        padding: 3px 1px;

        color: var(--m-muted);

        background: transparent;

        border: 0;
        border-radius: 9px;

        font: inherit;

        text-decoration: none;

        cursor: pointer;
    }

    .mobile-nav-item.active {
        color: var(--m-text);

        background:
            linear-gradient(
                145deg,
                rgba(52, 120, 255, .18),
                rgba(52, 120, 255, .08)
            );
    }

    .mobile-nav-icon {
        margin-bottom: 2px;

        font-size: 16px;
        line-height: 1;
    }

    .mobile-nav-label {
        max-width: 100%;

        font-size: 9px;
        line-height: 1.1;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    /* ======================================================
       MORE SHEET
       ====================================================== */

    .mobile-more-overlay {
        position: fixed;

        inset: 0;

        z-index: 1100;

        padding: 9px;

        align-items: flex-end;

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

    .mobile-more-overlay.open {
        display: flex;
    }

    .mobile-more-sheet {
        width: 100%;

        padding:
            7px
            7px
            calc(7px + env(safe-area-inset-bottom, 0px));

        background:
            linear-gradient(
                160deg,
                #15213a,
                #101a2d
            );

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

        border-radius: 16px;
    }

    .mobile-more-handle {
        width: 36px;
        height: 3px;

        margin: 2px auto 7px;

        background: #3b4c68;

        border-radius: 999px;
    }

    .mobile-more-title {
        padding: 5px 9px 7px;

        color: var(--m-muted);

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

        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mobile-more-link {
        display: flex;

        align-items: center;

        gap: 10px;

        width: 100%;
        min-height: 44px;

        padding: 7px 9px;

        color: var(--m-text);

        background: transparent;

        border: 0;
        border-radius: 10px;

        font: inherit;

        text-align: left;

        text-decoration: none;
    }

    .mobile-more-link:hover {
        background: var(--m-panel-2);
    }

    .mobile-more-link.danger {
        margin-top: 4px;

        color: #ffb3bf;

        background: rgba(176, 51, 71, .72);
    }

    body.mobile-more-open {
        overflow: hidden;
    }


    /* ======================================================
       LOGIN
       ====================================================== */

    .login-wrap {
        min-height: 100dvh;

        padding: 14px;
    }

    .login-card {
        width: 100%;
        max-width: 390px;

        padding: 18px 15px;

        border-radius: 14px;
    }
}


/* Extra narrow devices */
@media (max-width: 370px) {

    .dashboard-cards .card,
    .dashboard-cards .card-link {
        padding: 7px;
    }

    .dashboard-cards .card strong,
    .dashboard-cards .card-link strong {
        font-size: 18px !important;
    }

    .dashboard-cards .card span,
    .dashboard-cards .card-link span {
        font-size: 9px;
    }
}

/* ==========================================================
   MOBILE USERS ACCORDION
   ========================================================== */

@media (max-width: 760px) {

    /* One compact card per user */
    .page-users .users-table tbody {
        gap: 6px;
    }

    .page-users .users-table tr.user-mobile-card {
        display: block;

        overflow: hidden;

        border-radius: 11px;
    }

    /*
     * Identity is always visible and works as
     * the accordion header.
     */
    .page-users .users-table .user-identity {
        position: relative;

        display: block;

        min-height: 0;

        padding: 9px 38px 8px 10px;

        cursor: pointer;

        border-bottom: 0;

        background:
            linear-gradient(
                90deg,
                rgba(52, 120, 255, .07),
                transparent 72%
            );

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

    .page-users .users-table .user-identity strong {
        display: block;

        margin: 0 0 2px;

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

    .page-users .users-table .user-identity small {
        display: block;

        margin: 0;

        color: var(--m-muted);

        font-size: 10px;
        line-height: 1.25;
    }


    /* ------------------------------------------
       Compact status line
       ------------------------------------------ */

    .user-mobile-summary {
        display: flex;

        align-items: center;
        flex-wrap: wrap;

        gap: 5px;

        margin-top: 6px;
    }

    .user-mobile-summary-badge {
        display: inline-flex;

        align-items: center;

        min-height: 20px;

        padding: 2px 7px;

        border-radius: 999px;

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

    .user-mobile-summary-badge.approved {
        color: #7de3bb;

        background:
            rgba(45, 201, 138, .17);
    }

    .user-mobile-summary-badge.pending {
        color: #f6c87f;

        background:
            rgba(243, 173, 78, .16);
    }

    .user-mobile-summary-badge.revoked,
    .user-mobile-summary-badge.rejected {
        color: #ff9cad;

        background:
            rgba(240, 92, 116, .16);
    }

    .user-mobile-summary-badge.online {
        color: #7de3bb;

        background:
            rgba(45, 201, 138, .17);
    }

    .user-mobile-summary-badge.offline {
        color: #b8c3df;

        background:
            #303b55;
    }


    /* ------------------------------------------
       Arrow
       ------------------------------------------ */

    .user-mobile-chevron {
        position: absolute;

        top: 50%;
        right: 11px;

        transform:
            translateY(-50%)
            rotate(0deg);

        display: grid;
        place-items: center;

        width: 23px;
        height: 23px;

        color: var(--m-muted);

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

        border-radius: 7px;

        font-size: 13px;
        line-height: 1;

        transition:
            transform .16s ease,
            color .16s ease,
            background .16s ease;
    }

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .user-mobile-chevron {
        transform:
            translateY(-50%)
            rotate(180deg);

        color: #9dbbff;

        background:
            rgba(52, 120, 255, .12);
    }


    /* ------------------------------------------
       Collapsed
       ------------------------------------------ */

    .page-users
    .users-table
    tr.user-mobile-card:not(.expanded)
    > td:not(.user-identity) {
        display: none !important;
    }


    /* ------------------------------------------
       Expanded
       ------------------------------------------ */

    .page-users
    .users-table
    tr.user-mobile-card.expanded {
        display: grid;

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

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .user-identity {
        grid-column: 1 / -1;

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

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    > td:not(.user-identity) {
        display: block;

        min-height: 0 !important;

        padding: 6px 9px;

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

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    > td::before {
        margin-bottom: 2px;

        font-size: 8px;
    }


    /* Access + online already visible in summary */
    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-access,

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-online {
        display: none !important;
    }


    /* IP + activity */
    .page-users .cell-ip,
    .page-users .cell-activity,
    .page-users .cell-traffic,
    .page-users .cell-xray {
        font-size: 11px;
        line-height: 1.25;
    }


    /* UUID full width */
    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-uuid {
        grid-column: 1 / -1;

        display: grid !important;

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

        align-items: center;

        gap: 7px;
    }

    .page-users
    .users-table
    .cell-uuid::before {
        grid-column: 1 / -1;
    }

    .page-users
    .users-table
    .cell-uuid button {
        min-height: 34px;

        padding: 5px 8px;

        white-space: nowrap;

        font-size: 10px;
    }


    /* Actions */
    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-actions {
        grid-column: 1 / -1;

        display: block !important;

        padding: 7px 9px 8px;

        border-bottom: 0;
    }

    .page-users
    .users-table
    .cell-actions::before {
        margin-bottom: 5px;
    }

    .page-users
    .users-table
    .actions {
        display: grid;

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

        gap: 5px;
    }

    .page-users
    .users-table
    .actions button,

    .page-users
    .users-table
    .actions .button {
        min-height: 35px;

        padding: 5px 3px;

        font-size: 10px;

        border-radius: 7px;
    }


    /*
     * Less space above the list.
     */
    .page-users .page-head {
        margin-bottom: 8px;
    }

    .page-users .page-head h1 {
        font-size: 22px;
    }

    .page-users .page-head p {
        font-size: 11px;
    }
}

/* ==========================================================
   MOBILE UX V4
   ========================================================== */

@media (max-width: 760px) {

    /* ------------------------------------------------------
       TELEGRAM LOGIN LOADER
       ------------------------------------------------------ */

    .telegram-login-loader {
        display: none;

        width: min(260px, 86vw);

        margin: auto;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 8px;

        color: var(--m-text);

        text-align: center;
    }

    html.telegram-login-pending .telegram-login-loader {
        display: flex;
    }

    html.telegram-login-pending .manual-login-card {
        display: none !important;
    }

    .telegram-login-loader strong {
        font-size: 17px;
    }

    .telegram-login-loader span {
        color: var(--m-muted);
        font-size: 11px;
    }

    .telegram-login-spinner {
        width: 28px;
        height: 28px;

        margin-bottom: 4px;

        border: 3px solid rgba(120, 160, 230, .18);
        border-top-color: #4f87ff;

        border-radius: 50%;

        animation: telegram-login-spin .7s linear infinite;
    }

    @keyframes telegram-login-spin {
        to {
            transform: rotate(360deg);
        }
    }


    /* ------------------------------------------------------
       DASHBOARD HEADER + SETTINGS
       ------------------------------------------------------ */

    .page-dashboard .page-head {
        display: flex;

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

        gap: 8px;
    }

    .page-dashboard .page-head > div {
        min-width: 0;
    }

    .mobile-dashboard-settings {
        flex: 0 0 auto;

        min-height: 27px !important;

        padding: 4px 9px !important;

        display: inline-flex !important;

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

        color: #9fbcff !important;
        background: rgba(52, 120, 255, .10) !important;

        border: 1px solid rgba(70, 125, 235, .19) !important;
        border-radius: 7px !important;

        font-size: 10px !important;
        line-height: 1 !important;
    }


    /* ------------------------------------------------------
       RECENT USERS
       ------------------------------------------------------ */

    .recent-users-panel {
        padding: 9px 10px;
    }

    .recent-users-head {
        display: flex;

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

        gap: 10px;

        margin-bottom: 3px;
    }

    .recent-users-head h2 {
        margin: 0 !important;
        font-size: 16px !important;
    }

    .recent-users-all {
        flex: 0 0 auto;

        color: #6fa0ff;

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

        line-height: 1;

        text-decoration: none;

        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .recent-users-panel .simple-list > div {
        display: grid;

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

        align-items: center;

        gap: 8px;

        min-height: 31px;

        padding: 5px 0;

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

    .recent-users-panel .simple-list > div:last-child {
        border-bottom: 0;
    }

    .recent-users-panel .simple-list strong {
        font-size: 12px;
    }

    .recent-user-status {
        padding: 2px 6px;

        border-radius: 999px;

        font-size: 8px;

        text-transform: none;
    }

    .recent-user-status.approved {
        color: #7de3bb;
        background: rgba(45, 201, 138, .15);
    }

    .recent-user-status.pending {
        color: #f6c87f;
        background: rgba(243, 173, 78, .14);
    }

    .recent-user-status.revoked,
    .recent-user-status.rejected {
        color: #ff9cad;
        background: rgba(240, 92, 116, .14);
    }


    /* ------------------------------------------------------
       COLLAPSED USER HEADER
       ------------------------------------------------------ */

    .page-users .users-table .user-identity {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .user-mobile-meta-row {
        display: flex;

        align-items: center;

        gap: 6px;

        min-width: 0;

        margin-top: 3px;

        padding-right: 3px;
    }

    .user-mobile-meta-row > small {
        flex: 1 1 auto;

        min-width: 0;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

        font-size: 9px !important;
    }

    .user-mobile-meta-row .user-mobile-summary {
        flex: 0 0 auto;

        margin: 0;

        gap: 4px;
    }

    .user-mobile-summary-badge {
        min-height: 18px;

        padding: 2px 6px;

        font-size: 8px;
    }


    /* ------------------------------------------------------
       EXPANDED USER
       ------------------------------------------------------ */

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-ip,

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-activity {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-traffic {
        grid-column: 1 / -1;

        padding-top: 6px;
        padding-bottom: 6px;
    }

    .page-users .cell-traffic .traffic {
        display: flex !important;

        align-items: center;

        gap: 9px;

        flex-wrap: wrap;

        font-size: 11px;
    }

    .page-users .cell-traffic .traffic small {
        display: inline !important;

        margin: 0 !important;

        color: var(--m-muted);

        font-size: 8px !important;
    }


    /* ------------------------------------------------------
       UUID
       ------------------------------------------------------ */

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-uuid {
        position: relative;

        grid-column: 1 / -1;

        display: block !important;

        padding:
            7px
            38px
            7px
            9px;
    }

    .page-users .cell-uuid code {
        display: block;

        width: 100%;

        font-size: 11px !important;
        line-height: 1.25;

        white-space: normal;

        overflow-wrap: anywhere;
    }

    .page-users .cell-uuid > small {
        display: block;

        margin-top: 4px;

        color: var(--m-muted);

        font-size: 8px !important;
        line-height: 1.2;
    }

    .uuid-copy-icon {
        position: absolute;

        top: 23px;
        right: 8px;

        width: 25px !important;
        height: 25px !important;

        min-height: 25px !important;

        padding: 0 !important;

        display: grid !important;
        place-items: center;

        color: #8da9df !important;
        background: rgba(90, 120, 175, .12) !important;

        border: 1px solid rgba(110, 145, 205, .15) !important;
        border-radius: 7px !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }

    .uuid-copy-icon.copied {
        color: #75e8b9 !important;
        background: rgba(55, 215, 154, .13) !important;
        border-color: rgba(55, 215, 154, .18) !important;
    }


    /* ------------------------------------------------------
       USER ACTIONS
       ------------------------------------------------------ */

    .page-users .cell-actions::before {
        display: none !important;
    }

    .page-users .users-table .actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 5px !important;
    }

    .page-users .users-table .actions button,
    .page-users .users-table .actions .button {
        min-height: 32px !important;

        padding: 4px 5px !important;

        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .user-action-message {
        color: #b7ceff !important;
        background: rgba(52, 120, 255, .22) !important;
    }

    .user-action-key {
        color: #83e9bf !important;
        background: rgba(38, 145, 103, .36) !important;
    }

    .user-action-revoke {
        color: #f7cd82 !important;
        background: rgba(153, 107, 31, .43) !important;
    }

    .user-action-delete {
        color: #ffb0bd !important;
        background: rgba(156, 48, 67, .63) !important;
    }


    /* ------------------------------------------------------
       MESSAGE MODAL
       ------------------------------------------------------ */

    .user-message-modal {
        position: fixed;

        inset: 0;

        z-index: 1400;

        display: none;

        align-items: flex-end;

        padding: 10px;

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

    .user-message-modal.open {
        display: flex;
    }

    .user-message-sheet {
        width: 100%;

        padding:
            10px
            10px
            calc(10px + env(safe-area-inset-bottom, 0px));

        background:
            linear-gradient(
                160deg,
                #15213a,
                #101a2d
            );

        border: 1px solid var(--m-border);
        border-radius: 15px;
    }

    .user-message-sheet h3 {
        margin: 0 0 3px;

        font-size: 16px;
    }

    .user-message-target {
        margin-bottom: 8px;

        color: var(--m-muted);

        font-size: 10px;
    }

    .user-message-sheet textarea {
        min-height: 105px;

        resize: vertical;

        margin: 0;

        font-size: 13px;
    }

    .user-message-actions {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 6px;

        margin-top: 7px;
    }

    .user-message-actions button {
        min-height: 36px;
    }
}

/* ==========================================================
   MOBILE UX V5 — corrective layout
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       DASHBOARD TITLE
       ====================================================== */

    .page-dashboard .page-head {
        display: grid !important;

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

        align-items: start !important;

        gap: 8px !important;

        text-align: left !important;
    }

    .page-dashboard .page-head > div {
        min-width: 0;

        text-align: left !important;
    }

    .page-dashboard .page-head h1 {
        margin: 0 0 3px !important;

        text-align: left !important;
    }

    .page-dashboard .page-head p {
        margin: 0 !important;

        text-align: left !important;
    }

    .mobile-dashboard-settings {
        align-self: start;

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

        margin: 1px 0 0 !important;

        padding: 0 8px !important;

        display: inline-flex !important;

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

        border-radius: 6px !important;

        font-size: 9px !important;
        line-height: 1 !important;
    }


    /* ======================================================
       RECENT USERS — MORE COMPACT
       ====================================================== */

    .recent-users-panel {
        padding: 8px 9px !important;
    }

    .recent-users-head {
        margin-bottom: 2px !important;
    }

    .recent-users-head h2 {
        font-size: 15px !important;
    }

    .recent-users-all {
        font-size: 9px !important;
    }

    .recent-users-panel .simple-list > div {
        min-height: 27px !important;

        padding: 4px 0 !important;
    }

    .recent-users-panel .simple-list strong {
        font-size: 11px !important;
    }


    /* ======================================================
       USER COLLAPSED HEADER
       ====================================================== */

    .page-users .users-table .user-identity {
        padding:
            8px
            38px
            7px
            9px !important;
    }

    .page-users .users-table .user-identity strong {
        margin-bottom: 2px !important;

        font-size: 15px !important;
    }

    .user-mobile-meta-row {
        display: grid !important;

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

        align-items: center !important;

        gap: 5px !important;

        width: 100%;

        margin: 2px 0 0 !important;
    }

    .user-mobile-meta-row > small {
        min-width: 0;

        margin: 0 !important;

        overflow: hidden;

        white-space: nowrap !important;

        text-overflow: ellipsis;

        font-size: 8px !important;
        line-height: 18px !important;
    }

    .user-mobile-meta-row .user-mobile-summary {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 3px !important;

        margin: 0 !important;
    }

    .user-mobile-summary-badge {
        min-height: 17px !important;

        padding: 2px 5px !important;

        white-space: nowrap;

        font-size: 7.5px !important;
    }


    /* ======================================================
       EXPANDED TRAFFIC — ONE LINE
       ====================================================== */

    .page-users
    .cell-traffic
    .traffic {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 8px !important;

        flex-wrap: wrap !important;

        white-space: normal !important;
    }

    .page-users
    .cell-traffic
    .traffic > * {
        display: inline !important;

        margin: 0 !important;

        white-space: nowrap;
    }

    .page-users
    .cell-traffic
    .traffic small {
        color: var(--m-muted) !important;

        font-size: 8px !important;
    }


    /* ======================================================
       UUID
       ====================================================== */

    .page-users
    .users-table
    tr.user-mobile-card.expanded
    .cell-uuid {
        padding:
            6px
            37px
            6px
            9px !important;
    }

    .page-users .cell-uuid code {
        display: block !important;

        width: 100% !important;

        color: #c7d5f6 !important;

        font-size: 9.5px !important;
        line-height: 1.3 !important;

        letter-spacing: .01em;

        overflow-wrap: anywhere !important;
        word-break: break-all !important;
    }

    .page-users .cell-uuid > small {
        margin-top: 3px !important;

        color: #71819f !important;

        font-size: 7.5px !important;
    }

    .uuid-copy-icon {
        top: 21px !important;

        width: 24px !important;
        height: 24px !important;

        min-height: 24px !important;

        font-size: 13px !important;
    }


    /* ======================================================
       USER ACTIONS — COMPACT 2 × 2
       ====================================================== */

    .page-users
    .users-table
    .cell-actions {
        padding:
            6px
            9px
            7px !important;
    }

    .page-users
    .users-table
    .actions {
        gap: 4px !important;
    }

    .page-users
    .users-table
    .actions button,

    .page-users
    .users-table
    .actions .button {
        min-height: 29px !important;

        padding: 3px 4px !important;

        border-radius: 6px !important;

        font-size: 8.5px !important;
    }


    /* ======================================================
       FLASH MESSAGE
       ====================================================== */

    .page-users .flash {
        margin: 0 0 7px !important;

        padding: 7px 9px !important;

        border-radius: 8px !important;

        font-size: 10px !important;
    }
}

/* ==========================================================
   MOBILE UX V6
   ========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       DASHBOARD HEADER
       ====================================================== */

    .page-dashboard .page-head p {
        display: none !important;
    }

    .page-dashboard .page-head {
        margin-bottom: 8px !important;
    }

    .mobile-dashboard-settings {
        color: #b9ceff !important;

        background:
            rgba(52, 120, 255, .18) !important;

        border-color:
            rgba(84, 141, 255, .34) !important;

        text-decoration: none !important;

        font-weight: 700 !important;
    }


    /* ======================================================
       STAT CARDS — NO NAVIGATION
       ====================================================== */

    .page-dashboard
    .dashboard-cards
    .card-link {
        cursor: default !important;

        text-decoration: none !important;

        transform: none !important;
    }


    /* Pending */
    .page-dashboard
    .dashboard-cards
    .stat-pending {
        background:
            linear-gradient(
                145deg,
                rgba(100, 76, 18, .34),
                rgba(39, 34, 26, .88)
            ) !important;

        border-color:
            rgba(246, 197, 76, .55) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-pending::after {
        color: #ffd76d !important;

        background:
            rgba(245, 192, 57, .18) !important;
    }


    /* Approved */
    .page-dashboard
    .dashboard-cards
    .stat-approved {
        background:
            linear-gradient(
                145deg,
                rgba(29, 70, 143, .45),
                rgba(18, 31, 54, .92)
            ) !important;

        border-color:
            rgba(70, 131, 255, .60) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-approved::after {
        color: #86acff !important;

        background:
            rgba(53, 113, 242, .25) !important;
    }


    /* Online */
    .page-dashboard
    .dashboard-cards
    .stat-online {
        background:
            linear-gradient(
                145deg,
                rgba(25, 104, 77, .42),
                rgba(15, 42, 39, .90)
            ) !important;

        border-color:
            rgba(55, 215, 154, .60) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-online::after {
        color: #55e5ad !important;

        background:
            rgba(40, 188, 134, .23) !important;
    }


    /* Revoked */
    .page-dashboard
    .dashboard-cards
    .stat-revoked {
        background:
            linear-gradient(
                145deg,
                rgba(112, 34, 60, .40),
                rgba(45, 24, 38, .90)
            ) !important;

        border-color:
            rgba(208, 83, 122, .55) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-revoked::after {
        color: #f18cab !important;

        background:
            rgba(190, 65, 104, .20) !important;
    }


    /* Warning */
    .page-dashboard
    .dashboard-cards
    .stat-warning {
        background:
            linear-gradient(
                145deg,
                rgba(132, 73, 16, .42),
                rgba(50, 34, 22, .92)
            ) !important;

        border-color:
            rgba(244, 143, 45, .60) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-warning::after {
        color: #ffad56 !important;

        background:
            rgba(234, 127, 28, .22) !important;
    }


    /* Xray error — deliberately brighter red */
    .page-dashboard
    .dashboard-cards
    .stat-error {
        background:
            linear-gradient(
                145deg,
                rgba(138, 31, 46, .48),
                rgba(54, 22, 31, .94)
            ) !important;

        border-color:
            rgba(255, 87, 108, .68) !important;
    }

    .page-dashboard
    .dashboard-cards
    .stat-error::after {
        color: #ff7184 !important;

        background:
            rgba(239, 62, 86, .25) !important;
    }


    /* ======================================================
       STAT ICON CHIPS
       ====================================================== */

    .page-dashboard
    .dashboard-cards
    .card::after,

    .page-dashboard
    .dashboard-cards
    .card-link::after {
        width: 22px !important;
        height: 22px !important;

        border-radius: 7px !important;

        font-size: 12px !important;

        font-weight: 800 !important;
    }


    /* ======================================================
       SYSTEM PANELS
       ====================================================== */

    .dashboard-system-title {
        display: flex !important;

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

        gap: 10px !important;

        margin-bottom: 8px !important;
    }

    .dashboard-system-title h2 {
        margin: 0 !important;
    }

    .xray-header-status {
        flex: 0 0 auto;

        padding: 3px 8px;

        color: #79e6ba;

        background:
            rgba(45, 201, 138, .17);

        border-radius: 999px;

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


    /* Xray rows */
    .xray-panel-v6 dl,
    .backup-panel-v6 dl {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        gap: 5px 10px !important;
    }

    .xray-panel-v6 dt,
    .backup-panel-v6 dt {
        margin: 0 !important;

        min-width: 0;

        color: var(--m-muted);

        font-size: 9px !important;
        line-height: 1.15 !important;

        white-space: nowrap !important;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xray-panel-v6 dd,
    .backup-panel-v6 dd {
        margin: 0 !important;

        min-width: 0;

        font-size: 11px !important;
        line-height: 1.15 !important;

        text-align: right;

        white-space: nowrap !important;
    }


    /* ======================================================
       BACKUP FILE
       ====================================================== */

    .backup-file-value {
        max-width: 225px;

        overflow: hidden;

        color: #aebee3;

        font-size: 8.5px !important;

        text-overflow: ellipsis;

        white-space: nowrap !important;
    }


    /* ======================================================
       RECENT USERS
       ====================================================== */

    .recent-users-panel {
        position: relative;

        border-left:
            3px solid #3478ff !important;
    }


    /* ======================================================
       BOTTOM NAV — SVG ICONS
       ====================================================== */

    .mobile-nav-icon {
        width: 18px;
        height: 18px;

        margin-bottom: 3px !important;

        display: grid;
        place-items: center;
    }

    .mobile-nav-icon svg {
        width: 17px;
        height: 17px;

        display: block;

        fill: none;

        stroke: currentColor;

        stroke-width: 1.8;

        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-nav-item.active
    .mobile-nav-icon {
        color: #82a9ff;
    }

}

/* ==========================================================
   FINAL MOBILE DASHBOARD COSMETICS
   ========================================================== */

@media (max-width: 760px) {

    .page-dashboard .xray-panel-v6,
    .page-dashboard .backup-panel-v6,
    .page-dashboard .recent-users-panel {
        position: relative;

        border-left:
            3px solid #3478ff !important;

        border-radius: 12px !important;
    }

    /* Remove old secondary pseudo-line */
    .page-dashboard .xray-panel-v6::before,
    .page-dashboard .backup-panel-v6::before,
    .page-dashboard .recent-users-panel::before {
        display: none !important;
        content: none !important;
    }

    .page-dashboard
    .xray-panel-v6
    .dashboard-system-title
    h2 {
        color: #82a9ff !important;
    }
}

/* ==========================================================
   UNIFIED MOBILE BLUE PANEL ACCENT
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Все информационные блоки, для которых используется
     * синий акцент слева, получают один и тот же стиль.
     */
    .panel.system-panel,
    .panel.xray-panel-v6,
    .panel.backup-panel-v6,
    .panel.recent-users-panel {
        position: relative !important;

        border-left:
            1px solid var(--m-border) !important;
    }

    /*
     * Убираем старые варианты линии,
     * чтобы не было двойного синего края.
     */
    .panel.system-panel::before,
    .panel.xray-panel-v6::before,
    .panel.backup-panel-v6::before,
    .panel.recent-users-panel::before {
        content: "" !important;

        display: block !important;

        position: absolute !important;

        left: -1px !important;
        top: 8px !important;
        bottom: 8px !important;

        width: 3px !important;

        background:
            linear-gradient(
                180deg,
                #4f8cff 0%,
                #2870ff 50%,
                #4f8cff 100%
            ) !important;

        border-radius: 999px !important;

        box-shadow:
            0 0 7px rgba(52, 120, 255, .18) !important;
    }
}

/* ==========================================================
   TELEGRAM WEBAPP
   Logout is unnecessary inside Telegram Mini App.
   Browser admin keeps the logout action.
   ========================================================== */

@media (max-width: 760px) {
    body.telegram-webapp #mobile-logout {
        display: none !important;
    }
}

/* ==========================================================
   TELEGRAM WEBAPP
   Logout is unnecessary inside Telegram Mini App.
   Browser admin keeps the logout action.
   ========================================================== */

@media (max-width: 760px) {
    body.telegram-webapp #mobile-logout {
        display: none !important;
    }
}

/* ==========================================================
   FINAL MOBILE PANEL BLUE EDGE

   Единая синяя левая грань для ВСЕХ .panel.
   Линия повторяет скругление блока и слегка
   заходит на верхний и нижний угол.
   ========================================================== */

@media (max-width: 760px) {

    main .panel {
        position: relative !important;

        /*
         * Обычную левую границу возвращаем к общей
         * тёмной рамке. Синий край рисуется отдельно.
         */
        border-left:
            1px solid var(--m-border) !important;
    }

    /*
     * Перебиваем ВСЕ предыдущие варианты синей линии:
     * system-panel, xray-panel, backup-panel,
     * recent-users-panel и т.д.
     */
    main .panel::before,
    main .panel.system-panel::before,
    main .panel.xray-panel-v6::before,
    main .panel.backup-panel-v6::before,
    main .panel.recent-users-panel::before {
        content: "" !important;

        display: block !important;

        position: absolute !important;

        z-index: 2 !important;

        /*
         * -1px позволяет синему краю лечь прямо
         * поверх внешней границы блока.
         *
         * top/bottom -1px дают тот самый небольшой
         * заход на скруглённые углы.
         */
        left: -1px !important;
        top: -1px !important;
        bottom: -1px !important;

        width: 3px !important;
        height: auto !important;

        background:
            linear-gradient(
                180deg,
                #5792ff 0%,
                #3478ff 18%,
                #3478ff 82%,
                #5792ff 100%
            ) !important;

        /*
         * Скругление именно по форме левой стороны
         * родительского блока.
         */
        border-radius:
            12px 0 0 12px !important;

        box-shadow:
            1px 0 5px rgba(52, 120, 255, .16) !important;

        pointer-events: none !important;
    }

    /*
     * Убираем отдельную border-left, которую раньше
     * давали некоторым специальным блокам.
     * Иначе получалась двойная синяя линия.
     */
    main .panel.system-panel,
    main .panel.xray-panel-v6,
    main .panel.backup-panel-v6,
    main .panel.recent-users-panel {
        border-left:
            1px solid var(--m-border) !important;
    }
}

/* ==========================================================
   FINAL REAL BLUE PANEL BORDER

   Синяя линия теперь является настоящей левой
   границей блока, поэтому участвует в border-radius
   и естественно заходит на оба левых скругления.
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Полностью отключаем все старые декоративные
     * псевдополоски.
     */
    main .panel::before,
    main .panel.system-panel::before,
    main .panel.xray-panel-v6::before,
    main .panel.backup-panel-v6::before,
    main .panel.recent-users-panel::before {
        content: none !important;
        display: none !important;
    }

    /*
     * Настоящая синяя часть border.
     *
     * Так как сама рамка имеет radius,
     * синий border физически проходит через
     * верхний левый и нижний левый радиусы.
     */
    main .panel {
        border-top:
            1px solid var(--m-border) !important;

        border-right:
            1px solid var(--m-border) !important;

        border-bottom:
            1px solid var(--m-border) !important;

        border-left:
            3px solid #3478ff !important;

        border-radius:
            12px !important;
    }

    /*
     * Специальные панели больше не имеют
     * собственного отдельного варианта границы.
     */
    main .panel.system-panel,
    main .panel.xray-panel-v6,
    main .panel.backup-panel-v6,
    main .panel.recent-users-panel {
        border-left:
            3px solid #3478ff !important;
    }
}