:root {
    --bg-body: #f7fafd;
    --text-main: #17212b;
    --text-soft: #667788;
    --link-color: #168acd;
    --link-hover: #0f76b0;

    --header-bg: linear-gradient(90deg, #1697d2 0%, #18a9d8 45%, #22c7c7 100%);
    --header-border: #1aa7d2;
    --header-shadow: 0 2px 10px rgba(15, 35, 55, 0.08);
    --header-text: #ffffff;

    --card-bg: #ffffff;
    --card-border: #d8e3ec;
    --card-shadow: 0 2px 10px rgba(15, 35, 55, 0.07);

    --title-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --title-border: #c8dcf8;
    --title-text: #10689d;
    --title-muted: #6f7f8d;

    --footer-bg: linear-gradient(135deg, #556575 0%, #697a89 100%);
    --footer-text: #ffffff;
    --footer-soft: rgba(255,255,255,0.82);
    --footer-shadow: 0 2px 10px rgba(15, 35, 55, 0.08);

    --drawer-bg: #ffffff;
    --drawer-shadow: 8px 0 28px rgba(0,0,0,0.18);
    --overlay-bg: rgba(15, 23, 42, 0.45);

    --theme-btn-bg: rgba(255,255,255,0.14);
    --theme-btn-border: rgba(255,255,255,0.22);
    --theme-btn-hover-bg: rgba(255,255,255,0.22);

    --simple-link-bg: #f7fafc;
    --simple-link-border: #dbe5ee;
    --simple-link-hover-bg: #eef5fb;
    --simple-link-hover-border: #cfdceb;
}

html.theme-dark {
    --bg-body: #151b22;
    --text-main: #e7edf3;
    --text-soft: #97a6b5;
    --link-color: #64bdf6;
    --link-hover: #8ed0ff;

    --header-bg: linear-gradient(90deg, #0e3d58 0%, #0f516d 45%, #0f6669 100%);
    --header-border: #235e7a;
    --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    --header-text: #ffffff;

    --card-bg: #1c242d;
    --card-border: #2e3b47;
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);

    --title-bg: linear-gradient(135deg, #1b2935 0%, #223545 100%);
    --title-border: #314557;
    --title-text: #7dc6ff;
    --title-muted: #b7c4cf;

    --footer-bg: linear-gradient(135deg, #31414d 0%, #415361 100%);
    --footer-text: #f3f7fb;
    --footer-soft: rgba(243,247,251,0.76);
    --footer-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);

    --drawer-bg: #182028;
    --drawer-shadow: 8px 0 28px rgba(0,0,0,0.35);
    --overlay-bg: rgba(0, 0, 0, 0.55);

    --theme-btn-bg: rgba(255,255,255,0.08);
    --theme-btn-border: rgba(255,255,255,0.12);
    --theme-btn-hover-bg: rgba(255,255,255,0.15);

    --simple-link-bg: #1e2933;
    --simple-link-border: #334351;
    --simple-link-hover-bg: #24323e;
    --simple-link-hover-border: #415363;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-body);
    color: var(--text-main);
    font-family: Inter, Arial, Helvetica, sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

*, *:before, *:after {
    box-sizing: border-box;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

.site-shell {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box !important;
}

.site-header {
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: 18px;
    padding: 0 18px;
    margin-bottom: 14px;
    position: relative;
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--header-shadow);
}

.site-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    min-height: 72px;
}

.site-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
}

.site-logo {
    flex: 0 0 auto;
    min-width: 0;
}

.site-logo img {
    display: block;
    max-width: 250px;
    width: 100%;
    height: auto;
}

.top-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.top-menu-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    min-width: 0;
}

.top-menu-inner a {
    color: var(--header-text);
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.top-menu-inner a:hover {
    background: rgba(255,255,255,0.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    color: var(--header-text);
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.site-login {
    min-width: 180px;
    text-align: right;
    color: var(--header-text);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
}

.site-login a {
    color: var(--header-text);
}

.site-login a:hover {
    color: #e8ffff;
    text-decoration: none;
}

.theme-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--theme-btn-border);
    border-radius: 11px;
    background: var(--theme-btn-bg);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.theme-icon-btn:hover {
    background: var(--theme-btn-hover-bg);
}

.theme-icon-btn .material-symbols-outlined {
    font-size: 19px;
    line-height: 1;
}

.layout-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.left-column,
.center-column {
    min-width: 0;
    width: 100%;
}

.side-card,
.main-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    position: relative;
    box-shadow: var(--card-shadow);
}

.side-title,
.main-title {
    padding: 12px 14px;
    background: var(--title-bg);
    color: var(--title-text);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--title-border);
    letter-spacing: 0.01em;
}

.main-title.center {
    text-align: center;
}

.main-title.center span {
    color: var(--title-muted);
    font-weight: 600;
}

.side-body,
.main-body {
    padding: 14px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    color: var(--text-main);
}

.side-gap {
    height: 12px;
}

.support-simple a.support-telegram-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--simple-link-bg);
    border: 1px solid var(--simple-link-border);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.support-simple a.support-telegram-link:hover {
    background: var(--simple-link-hover-bg);
    border-color: var(--simple-link-hover-border);
    text-decoration: none;
}

.support-simple a.support-telegram-link img {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.support-simple a.support-telegram-link span {
    display: inline-block;
    line-height: 1.2;
}

.footer-wrap {
    display: block;
    margin: 18px 0 0 0;
    background: var(--footer-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    color: var(--footer-text);
    box-sizing: border-box;
    clear: both;
    position: relative;
    box-shadow: var(--footer-shadow);
}

.site-shell > .footer-wrap,
.site-shell .footer-wrap {
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
    inset: auto !important;
}

.footer-inner {
    padding: 12px 16px;
    min-height: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.footer-col {
    min-width: 0;
}

.footer-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--footer-text);
}

.footer-text {
    font-size: 11px;
    line-height: 1.45;
    color: var(--footer-soft);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-links a {
    color: var(--footer-text);
    font-size: 12px;
    text-decoration: none;
}

.footer-links a:hover {
    color: #eef7ff;
    text-decoration: underline;
}

.desktop-only {
    display: block;
}

.mobile-menu-toggle {
    display: none;
}

.mobile-menu-overlay,
.mobile-menu-drawer {
    display: none;
}

.mobile-menu-overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 9997;
}

.mobile-menu-drawer.show {
    display: block;
}

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 92%;
    max-width: 340px;
    height: 100%;
    background: var(--drawer-bg);
    z-index: 9998;
    box-shadow: var(--drawer-shadow);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

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

.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--title-bg);
    border-bottom: 1px solid var(--title-border);
    color: var(--title-text);
    font-size: 14px;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.mobile-menu-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--title-text);
    cursor: pointer;
    padding: 0;
}

.mobile-menu-body {
    padding: 12px;
    color: var(--text-main);
}

.mobile-drawer-section {
    margin-top: 14px;
}

.side-subtitle {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.main-body,
.main-body * {
    min-width: 0;
}

.main-body table,
.main-body img,
.main-body iframe,
.main-body textarea,
.main-body input,
.main-body select,
.main-body .dashboard-wrap,
.main-body .profile-wrap,
.main-body .balance-history-wrap,
.main-body .affiliate-wrap {
    max-width: 100%;
}

.main-body table {
    width: 100%;
}

.main-body img {
    height: auto;
}

.main-body iframe {
    border: 0;
}

.main-body textarea,
.main-body input[type="text"],
.main-body input[type="email"],
.main-body input[type="number"],
.main-body input[type="password"],
.main-body select {
    max-width: 100%;
}

.main-body a,
.main-body td,
.main-body div,
.main-body span,
.main-body p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.main-body .dashboard-card,
.main-body .dashboard-stat,
.main-body .dashboard-packet,
.main-body .profile-card,
.main-body .affiliate-card,
.main-body .balance-history-card,
.main-body .affiliate-stat,
.main-body .profile-static-value,
.main-body .dashboard-packet-meta-item {
    min-width: 0;
}

.main-body .dashboard-stat-value,
.main-body .dashboard-packet-meta-value,
.main-body .affiliate-stat-value,
.main-body .profile-static-value {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

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

/* compact navi */
.main_navi.compact-navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.main_navi.compact-navi li {
    margin: 0;
    padding: 0;
}

.main_navi.compact-navi li a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fbfd;
    border: 1px solid #deebf4;
    color: #273746 !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.22s ease;
}

.main_navi.compact-navi li a:hover {
    background: #f3f8fb;
    border-color: #d0e2ed;
    color: #162633 !important;
    text-decoration: none;
    transform: translateY(-1px);
}

html.theme-dark .main_navi.compact-navi li a {
    background: #1f2a34;
    border-color: #31414f;
    color: #d9e3eb !important;
}

html.theme-dark .main_navi.compact-navi li a:hover {
    background: #25323d;
    border-color: #3a4d5e;
    color: #ffffff !important;
}

.main_navi.compact-navi li.active a {
    background: var(--active-bg);
    border-color: var(--active-border);
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.05), inset 0 0 0 1px rgba(255,255,255,0.15);
    color: var(--icon-color) !important;
}

.material-symbols-outlined.navi-icon {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
    font-size: 20px;
    line-height: 1;
    width: 20px;
    min-width: 20px;
    text-align: center;
    color: var(--icon-color);
}

.navi-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.navi-link {
    --icon-color: #7b8794;
    --active-bg: rgba(123,135,148,0.10);
    --active-border: rgba(123,135,148,0.22);
    color: inherit !important;
}

.main_navi.compact-navi li.active .navi-icon {
    color: var(--icon-color) !important;
}

.navi-link.color-blue {
    --icon-color: #3b82f6;
    --active-bg: rgba(59,130,246,0.11);
    --active-border: rgba(59,130,246,0.24);
}

.navi-link.color-violet {
    --icon-color: #8b5cf6;
    --active-bg: rgba(139,92,246,0.10);
    --active-border: rgba(139,92,246,0.22);
}

.navi-link.color-green {
    --icon-color: #10b981;
    --active-bg: rgba(16,185,129,0.10);
    --active-border: rgba(16,185,129,0.22);
}

.navi-link.color-cyan {
    --icon-color: #06b6d4;
    --active-bg: rgba(6,182,212,0.11);
    --active-border: rgba(6,182,212,0.22);
}

.navi-link.color-teal {
    --icon-color: #14b8a6;
    --active-bg: rgba(20,184,166,0.10);
    --active-border: rgba(20,184,166,0.22);
}

.navi-link.color-emerald {
    --icon-color: #059669;
    --active-bg: rgba(5,150,105,0.10);
    --active-border: rgba(5,150,105,0.22);
}

.navi-link.color-red {
    --icon-color: #ef4444;
    --active-bg: rgba(239,68,68,0.10);
    --active-border: rgba(239,68,68,0.22);
}

.navi-link.color-orange {
    --icon-color: #f59e0b;
    --active-bg: rgba(245,158,11,0.11);
    --active-border: rgba(245,158,11,0.24);
}

.navi-link.color-pink {
    --icon-color: #ec4899;
    --active-bg: rgba(236,72,153,0.10);
    --active-border: rgba(236,72,153,0.22);
}

.navi-link.color-indigo {
    --icon-color: #6366f1;
    --active-bg: rgba(99,102,241,0.10);
    --active-border: rgba(99,102,241,0.22);
}

.navi-link.color-mint {
    --icon-color: #14b8a6;
    --active-bg: rgba(20,184,166,0.10);
    --active-border: rgba(20,184,166,0.22);
}

.navi-link.color-sky {
    --icon-color: #0ea5e9;
    --active-bg: rgba(14,165,233,0.10);
    --active-border: rgba(14,165,233,0.22);
}

.navi-link.color-gray {
    --icon-color: #7b8794;
    --active-bg: rgba(123,135,148,0.10);
    --active-border: rgba(123,135,148,0.22);
}

@media (max-width: 768px) {
    .site-shell {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    padding: 12px;
    border-radius: 0 0 14px 14px;
    margin-bottom: 12px;
    }

    .site-header-row {
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
        min-height: auto;
    }

    .site-header-left {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-logo img {
        max-width: 240px;
    }

    .site-login {
        display: none;
    }

    .top-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        border: 1px solid var(--theme-btn-border);
        border-radius: 12px;
        background: var(--theme-btn-bg);
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: none;
        flex: 0 0 auto;
    }

    .mobile-menu-toggle:hover {
        background: var(--theme-btn-hover-bg);
    }

    .layout-grid {
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }

    .desktop-only {
        display: none;
    }

    .side-card,
    .main-card {
        border-radius: 14px;
    }

    .side-title,
    .main-title {
        font-size: 14px;
        padding: 10px 12px;
    }

    .side-body,
    .main-body {
        padding: 12px;
    }

    .main-body {
        overflow-x: hidden;
    }

    .main-body table {
        table-layout: auto;
    }

    .footer-wrap,
    .site-shell .footer-wrap,
    .site-shell > .footer-wrap {
        display: none !important;
    }

    .main_navi.compact-navi ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .main_navi.compact-navi li a {
        justify-content: flex-start;
        min-height: 42px;
        padding: 9px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .site-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .site-header,
    .side-card,
    .main-card,
    .mobile-menu-toggle {
        border-radius: 12px;
    }

    .site-header {
        padding: 10px;
    }

    .site-logo img {
        max-width: 190px;
    }

    .mobile-menu-toggle {
        padding: 9px 12px;
        font-size: 12px;
    }

    .side-title,
    .main-title {
        font-size: 13px;
        padding: 9px 10px;
    }

    .side-body,
    .main-body,
    .mobile-menu-body {
        padding: 10px;
    }

    .main_navi.compact-navi ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .main_navi.compact-navi li a {
        min-height: 40px;
        padding: 8px 6px;
        font-size: 11px;
        border-radius: 10px;
        gap: 8px;
    }

    .material-symbols-outlined.navi-icon {
        font-size: 18px;
        width: 18px;
        min-width: 18px;
    }
}


/* login page */
.page-section.page-login {
    display: grid;
    gap: 28px;
    padding-top: 16px;
    padding-bottom: 22px;
}

.auth-panel {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 16px 18px;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
}

.auth-panel-login-narrow {
    max-width: 540px;
}

html.theme-dark .auth-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.auth-panel-flat {
    overflow: visible;
}

.auth-panel-head {
    margin-bottom: 14px;
    text-align: center;
}

.auth-panel-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.auth-panel-body {
    padding: 0;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form-centered {
    justify-items: center;
    text-align: center;
}

.form-row {
    margin: 0;
    width: 100%;
    max-width: 400px;
}

.ui-input-wrap {
    position: relative;
    width: 100%;
}

.ui-input-wrap-icon .ui-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7e8e9d;
    pointer-events: none;
    z-index: 2;
}

.ui-input-wrap-icon .ui-input-icon .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.ui-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: #fff;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    text-align: left;
}

.ui-input-with-icon {
    padding-left: 46px !important;
}

.ui-input-large {
    height: 46px;
    font-size: 15px;
}

.ui-input:focus {
    border-color: #7fc3e8;
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.10);
}

html.theme-dark .ui-input {
    background: #202a33;
    color: var(--text-main);
    border-color: #334351;
}

html.theme-dark .ui-input:focus {
    border-color: #4f88aa;
    box-shadow: 0 0 0 3px rgba(100, 189, 246, 0.10);
}

html.theme-dark .ui-input-wrap-icon .ui-input-icon {
    color: #95a6b5;
}

.auth-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-actions-centered {
    justify-content: center;
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
    outline: none;
}

.ui-btn-wide {
    min-width: 170px;
}

.ui-btn-primary {
    background: #168acd;
    border-color: #168acd;
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 138, 205, 0.18);
}

.ui-btn-primary:hover {
    background: #0f79b7;
    border-color: #0f79b7;
    color: #fff;
    box-shadow: 0 4px 12px rgba(22, 138, 205, 0.24);
    transform: translateY(-1px);
}

.ui-btn-primary:active {
    background: #0d689d;
    border-color: #0d689d;
    color: #fff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.14);
    transform: translateY(0);
}

.ui-btn-secondary {
    background: #f3f7fb;
    border-color: #d7e2ec;
    color: #233545;
    box-shadow: 0 2px 8px rgba(15, 35, 55, 0.06);
}

.ui-btn-secondary:hover {
    background: #e3edf6;
    border-color: #bfd0df;
    color: #162633;
    box-shadow: 0 4px 12px rgba(15, 35, 55, 0.10);
    transform: translateY(-1px);
}

.ui-btn-secondary:active {
    background: #d7e5f1;
    border-color: #b1c4d6;
    color: #162633;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.10);
    transform: translateY(0);
}

html.theme-dark .ui-btn-secondary {
    background: #24303b;
    border-color: #334351;
    color: #e7edf3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

html.theme-dark .ui-btn-secondary:hover {
    background: #2d3a46;
    border-color: #435667;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

html.theme-dark .ui-btn-secondary:active {
    background: #22303a;
    border-color: #3c4e5d;
    color: #ffffff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
    transform: translateY(0);
}

.telegram-login-wrap {
    padding-top: 4px;
}

.telegram-login-wrap-centered {
    text-align: center;
}

.telegram-fallback-btn {
    display: inline-block;
    background: #229ED9;
    color: #fff !important;
    padding: 9px 14px;
    font-size: 12px;
    border-radius: 10px;
    text-decoration: none !important;
    font-weight: 600;
    font-family: Arial, sans-serif;
}

.telegram-fallback-btn:hover {
    background: #1c8ec4;
}

.auth-links {
    padding-top: 4px;
    font-size: 13px;
}

.auth-links-centered {
    text-align: center;
}

.auth-links a {
    color: var(--link-color);
}

.content-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.content-card-head {
    padding: 12px 14px;
    background: var(--title-bg);
    border-bottom: 1px solid var(--title-border);
}

.content-card-body {
    padding: 16px;
}

.info-card-spaced {
    margin-bottom: 18px;
}

.text-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
}

.text-content p {
    margin: 0 0 14px 0;
}

.text-list {
    margin: 0 0 14px 18px;
    padding: 0;
}

.text-list li {
    margin-bottom: 6px;
}

.content-card-head-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--title-bg);
    border: 0;
    border-bottom: 1px solid var(--title-border);
    color: var(--title-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.content-card-head-toggle:hover {
    filter: brightness(0.98);
}

.content-card-toggle-icon {
    font-size: 20px;
    line-height: 1;
    min-width: 20px;
    text-align: center;
}

.collapsible-body {
    display: none;
}

.info-card-green {
    background: #f4fbf4;
    border-color: #d7ead7;
}

.info-card-green .content-card-head-toggle,
.info-card-green .content-card-head {
    background: linear-gradient(135deg, #edf9ed 0%, #dff2df 100%);
    border-bottom-color: #cfe5cf;
    color: #2f6b3d;
}

.info-card-green .content-card-body {
    background: #f4fbf4;
}

html.theme-dark .info-card-green {
    background: #1f2b22;
    border-color: #34513a;
}

html.theme-dark .info-card-green .content-card-head-toggle,
html.theme-dark .info-card-green .content-card-head {
    background: linear-gradient(135deg, #24362a 0%, #2b4232 100%);
    border-bottom-color: #3e5e47;
    color: #93d7a1;
}

html.theme-dark .info-card-green .content-card-body {
    background: #1f2b22;
}

@media (max-width: 768px) {
    .page-section.page-login {
        gap: 16px;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .auth-panel,
    .auth-panel-login-narrow {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .auth-panel-body {
        padding: 0;
    }

    .content-card-body {
        padding: 14px;
    }

    .form-row {
        width: 100%;
        max-width: 100%;
    }

    .auth-actions {
        flex-direction: column;
        width: 100%;
    }

    .ui-btn,
    .ui-btn-wide {
        width: 100%;
        min-width: 0;
    }

    .ui-input,
    .ui-input-large {
        font-size: 16px;
    }
}

/* Register */ 
.page-section.page-register {
    display: grid;
    gap: 18px;
    padding-top: 16px;
    padding-bottom: 22px;
}

.register-panel {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 16px 18px;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
}

html.theme-dark .register-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.register-panel-head {
    margin-bottom: 14px;
    text-align: center;
}

.register-panel-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.register-panel-body {
    padding: 0;
}

.register-form {
    display: grid;
    gap: 14px;
}

.register-section-title {
    text-align: center;
    margin-bottom: 2px;
}

.register-section-title h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.register-grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px 16px;
    align-items: center;
}

.register-label {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.35;
}

.register-label-accent {
    color: #4A90E2;
}

.register-field {
    min-width: 0;
}

.register-field .ui-input-wrap {
    position: relative;
    width: 100%;
}

.register-field .ui-input-wrap-icon .ui-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7e8e9d;
    pointer-events: none;
    z-index: 2;
}

.register-field .ui-input-wrap-icon .ui-input-icon .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.register-field .ui-input-with-icon {
    padding-left: 46px !important;
}

html.theme-dark .register-field .ui-input-wrap-icon .ui-input-icon {
    color: #95a6b5;
}

.register-msgbox {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
}

.register-note {
    font-size: 11px;
    color: var(--text-soft);
    text-align: center;
    margin-top: -2px;
}

.register-captcha {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.register-actions {
    display: flex;
    justify-content: center;
}

.register-submit-btn {
    min-width: 250px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .page-section.page-register {
        gap: 16px;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .register-panel {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .register-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .register-label {
        font-size: 13px;
        font-weight: 600;
    }

    .register-submit-btn {
        width: 100%;
        min-width: 0;
    }

    .register-captcha {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

/* restore password */ 
.page-section.page-restore {
    display: grid;
    gap: 18px;
    padding-top: 16px;
    padding-bottom: 22px;
}

.restore-panel {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 16px 18px;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
}

html.theme-dark .restore-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.restore-panel-head {
    margin-bottom: 14px;
    text-align: center;
}

.restore-panel-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.restore-panel-body {
    padding: 0;
}

.restore-note {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-main);
    text-align: center;
}

.restore-form {
    display: grid;
    gap: 16px;
}

.restore-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
}

.restore-label {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-main);
    padding-top: 10px;
}

.restore-field {
    min-width: 0;
}

.restore-field .ui-input-wrap {
    position: relative;
    width: 100%;
}

.restore-field .ui-input-wrap-icon .ui-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7e8e9d;
    pointer-events: none;
    z-index: 2;
}

.restore-field .ui-input-wrap-icon .ui-input-icon .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.restore-field .ui-input-with-icon {
    padding-left: 46px !important;
}

html.theme-dark .restore-field .ui-input-wrap-icon .ui-input-icon {
    color: #95a6b5;
}

.captcha-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.captcha-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px;
    background: #f8fbfd;
    border: 1px solid #dbe5ee;
    border-radius: 12px;
}

html.theme-dark .captcha-box {
    background: #202a33;
    border-color: #334351;
}

.captcha-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.captcha-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.captcha-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    background: #f3f7fb;
    border: 1px solid #d7e2ec;
    border-radius: 12px;
    text-decoration: none !important;
}

.captcha-tool-btn:hover {
    background: #e7f0f7;
}

html.theme-dark .captcha-tool-btn {
    background: #24303b;
    border-color: #334351;
}

html.theme-dark .captcha-tool-btn:hover {
    background: #2d3a46;
}

.captcha-input-wrap {
    margin-top: 12px;
    max-width: 320px;
}

.restore-actions {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

@media (max-width: 768px) {
    .page-section.page-restore {
        gap: 16px;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .restore-panel {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .restore-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .restore-label {
        padding-top: 0;
        font-size: 13px;
        font-weight: 600;
    }

    .captcha-input-wrap {
        max-width: 100%;
    }

    .restore-actions .ui-btn {
        width: 100%;
        min-width: 0;
    }
}

/* agreement */ 
.page-section.page-license {
    display: grid;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 22px;
}

.license-alert {
    max-width: 980px;
    margin: 0 auto;
    padding: 12px 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1.45;
    color: #a119a0;
    font-weight: 700;
    background: #fff7ff;
    border: 1px solid #e8c7e7;
    border-radius: 14px;
}

html.theme-dark .license-alert {
    background: #2b1f2b;
    border-color: #593f58;
    color: #f0a9ea;
}

.license-panel {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
    overflow: hidden;
}

html.theme-dark .license-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.license-panel-head {
    padding: 14px 18px;
    background: var(--title-bg);
    border-bottom: 1px solid var(--title-border);
    text-align: center;
}

.license-panel-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.license-panel-body {
    padding: 18px;
}

.license-text-scroll {
    height: 280px;
    overflow: auto;
    padding: 2px 2px 2px 0;
}

.license-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
}

.license-text p {
    margin: 0 0 12px 0;
}

.license-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.license-form {
    margin: 0;
}

@media (max-width: 768px) {
    .page-section.page-license {
        gap: 14px;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .license-alert,
    .license-panel {
        max-width: 100%;
        margin: 0;
    }

    .license-alert {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 12px;
    }

    .license-panel {
        border-radius: 16px;
    }

    .license-panel-head {
        padding: 12px 14px;
    }

    .license-panel-head h3 {
        font-size: 18px;
    }

    .license-panel-body {
        padding: 14px;
    }

    .license-text-scroll {
        height: 230px;
    }

    .license-text {
        font-size: 13px;
        line-height: 1.55;
    }

    .license-actions {
        flex-direction: column;
        gap: 10px;
    }

    .license-form,
    .license-form .ui-btn {
        width: 100%;
    }
}

/* news */ 
html {
    scroll-behavior: smooth;
}

.news-page {
    display: grid;
    gap: 12px;
    padding-bottom: 10px;
}

.news-notice {
    padding: 10px 12px;
    border: 1px solid #f0d58c;
    background: #fff8e6;
    color: #735400;
    border-radius: 12px;
    text-align: center;
    line-height: 1.4;
    font-size: 13px;
}

html.theme-dark .news-notice {
    background: #3a3120;
    border-color: #6a5730;
    color: #f6dfa3;
}

.news-list {
    display: grid;
    gap: 12px;
}

.news-card {
    position: relative;
    background: rgba(255,255,255,0.88);
    border: 1px solid #dbe6ee;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
}

.news-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1697d2 0%, #22c7c7 100%);
}

.news-card-important:before {
    background: linear-gradient(180deg, #ef4444 0%, #f97316 100%);
}

.news-card-promo:before {
    background: linear-gradient(180deg, #10b981 0%, #22c55e 100%);
}

.news-card-update:before {
    background: linear-gradient(180deg, #3b82f6 0%, #06b6d4 100%);
}

.news-card-head {
    padding: 10px 12px 8px 16px;
    background: transparent;
    border-bottom: 0;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.news-date {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef7ff;
    border: 1px solid #d6e8f8;
    color: #4e6980;
    font-size: 11px;
    line-height: 1;
}

.news-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
}

.news-badge-important {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.news-badge-promo {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.news-badge-update {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.news-card-body {
    padding: 0 14px 14px 16px;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.55;
    background: transparent;
    text-align: justify;
}

.news-card-body p {
    margin: 0 0 10px 0;
}

.news-card-body p:last-child {
    margin-bottom: 0;
}

.news-card-body > p:first-child {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    color: #243746;
    text-align: justify;
}

.news-card-body p,
.news-card-body div,
.news-card-body span {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.news-card-body img,
.news-card-body iframe,
.news-card-body table {
    max-width: 100%;
}

.news-card-body iframe {
    border: 0;
}

.news-card-body table {
    width: 100%;
}

.news-card-body,
.news-card-body * {
    font-size: inherit;
}

.news-card-body a,
.news-card-body a:link,
.news-card-body a:visited {
    font-size: inherit !important;
    line-height: inherit;
}

.news-card-body font,
.news-card-body small,
.news-card-body span,
.news-card-body div {
    font-size: inherit;
}

.news-card-body a {
    color: var(--link-color);
    text-decoration: underline;
}

.news-card-body a:hover {
    color: var(--link-hover);
}

.news-card-body b:first-child,
.news-card-body strong:first-child {
    color: #243746;
}

html.theme-dark .news-card {
    background: rgba(28, 36, 45, 0.88);
    border-color: #32414d;
}

html.theme-dark .news-date {
    background: #24303b;
    border-color: #344452;
    color: #b5c3cf;
}

html.theme-dark .news-badge-important {
    background: #3a1f25;
    border-color: #6b2d3a;
    color: #fda4af;
}

html.theme-dark .news-badge-promo {
    background: #1f3327;
    border-color: #2f5a3d;
    color: #86efac;
}

html.theme-dark .news-badge-update {
    background: #1d2b3d;
    border-color: #314d73;
    color: #93c5fd;
}

html.theme-dark .news-card-body > p:first-child,
html.theme-dark .news-card-body b:first-child,
html.theme-dark .news-card-body strong:first-child {
    color: #e7edf3;
}

.news-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.news-more-btn.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.top-scroll-btn {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 99999;
    display: block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 999px;
    background: rgba(85, 101, 117, 0.72);
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.16);
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.top-scroll-btn:hover {
    background: rgba(68, 84, 99, 0.88);
    color: #ffffff !important;
}

html.theme-dark .top-scroll-btn {
    background: rgba(46, 59, 70, 0.78);
    border-color: rgba(255,255,255,0.10);
    color: #ffffff !important;
}

html.theme-dark .top-scroll-btn:hover {
    background: rgba(57, 73, 84, 0.92);
}

@media (max-width: 768px) {
    .news-page {
        gap: 12px;
        padding-bottom: 8px;
    }

    .news-card-head {
        padding: 9px 10px 7px 14px;
    }

    .news-card-body {
        padding: 0 12px 12px 14px;
        font-size: 13px;
        line-height: 1.5;
    }

    .news-card-body > p:first-child {
        font-size: 13px;
        line-height: 1.55;
    }

    .news-notice {
        padding: 9px 10px;
        font-size: 12px;
    }

    .top-scroll-btn {
        bottom: 14px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
    }

    .news-more-wrap .ui-btn {
        width: 100%;
    }
}

/* profile */
:root {
    --profile-alert-bg: #fffaf0;
    --profile-alert-border: #eed9a7;
    --profile-alert-title: #8a6220;
    --profile-alert-text: #6d5324;

    --profile-badge-bg: #f1f6fb;
    --profile-badge-border: #d9e4ee;
    --profile-badge-text: #486177;

    --profile-input-bg: #fbfcfe;
    --profile-input-border: #d5dee7;
    --profile-input-focus-border: #a9cfb3;
    --profile-input-focus-shadow: 0 0 0 3px rgba(130, 195, 145, 0.16);
    --profile-static-bg: #f6f9fc;
    --profile-icon-color: #8a98a6;
    --profile-eye-color: #7b8996;

    --profile-green: #89c79a;
    --profile-green-hover: #76b687;
    --profile-green-soft-bg: #f4fcf6;
    --profile-green-soft-border: #d5eadb;
    --profile-green-soft-text: #74af83;
    --profile-green-soft-hover-bg: #eaf7ed;
    --profile-green-soft-hover-border: #c5dfcc;
    --profile-green-soft-hover-text: #639c72;

    --profile-switch-off: #c8d3de;
    --profile-switch-row-bg: #fbfcfe;
    --profile-switch-row-border: #d5dee7;

    --profile-toast-bg: #6fb482;
    --profile-toast-text: #ffffff;
}

html.theme-dark {
    --profile-alert-bg: #2a2419;
    --profile-alert-border: #5a4930;
    --profile-alert-title: #f0c978;
    --profile-alert-text: #dec89b;

    --profile-badge-bg: #22303d;
    --profile-badge-border: #314353;
    --profile-badge-text: #d9e7f2;

    --profile-input-bg: #101820;
    --profile-input-border: #2c3947;
    --profile-input-focus-border: #8fce9f;
    --profile-input-focus-shadow: 0 0 0 3px rgba(137, 199, 154, 0.18);
    --profile-static-bg: #131d26;
    --profile-icon-color: #8ea0af;
    --profile-eye-color: #8ea0af;

    --profile-green: #89c79a;
    --profile-green-hover: #76b687;
    --profile-green-soft-bg: #1f3124;
    --profile-green-soft-border: #446b4f;
    --profile-green-soft-text: #a8dcb4;
    --profile-green-soft-hover-bg: #27402d;
    --profile-green-soft-hover-border: #568262;
    --profile-green-soft-hover-text: #bde7c6;

    --profile-switch-off: #455565;
    --profile-switch-row-bg: #101820;
    --profile-switch-row-border: #2c3947;

    --profile-toast-bg: #6fb482;
    --profile-toast-text: #ffffff;
}

.profile-wrap {
    max-width: 920px;
    margin: 0 auto;
    color: var(--text-main);
}

.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--card-shadow);
}

.profile-card h2,
.profile-card h3 {
    margin: 0 0 12px 0;
    color: var(--text-main);
    line-height: 1.3;
    font-weight: 600;
}

.profile-card h2 {
    font-size: 20px;
}

.profile-card h3 {
    font-size: 16px;
}

.profile-alert {
    background: var(--profile-alert-bg);
    border-color: var(--profile-alert-border);
}

.profile-alert h3 {
    color: var(--profile-alert-title);
    margin-bottom: 8px;
}

.profile-alert-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--profile-alert-text);
}

.profile-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.profile-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--profile-badge-bg);
    border: 1px solid var(--profile-badge-border);
    color: var(--profile-badge-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-form-group.full {
    grid-column: 1 / -1;
}

.profile-form-group label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-soft);
}

.profile-static-value,
.profile-input,
.profile-form-group input[type="email"],
.profile-form-group input[type="text"],
.profile-form-group input[type="password"] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    margin: 0;
    border: 1px solid var(--profile-input-border);
    border-radius: 10px;
    background: var(--profile-input-bg);
    color: var(--text-main);
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.profile-static-value {
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 42px !important;
    background: var(--profile-static-bg);
}

.profile-input,
.profile-form-group input[type="email"],
.profile-form-group input[type="text"] {
    padding: 10px 12px 10px 42px !important;
}

.profile-input-wrapper.profile-input-with-icon input[type="password"] {
    padding: 10px 42px 10px 42px !important;
}

.profile-input:focus,
.profile-form-group input:focus {
    outline: none;
    border-color: var(--profile-input-focus-border);
    box-shadow: var(--profile-input-focus-shadow);
    background: var(--profile-input-bg);
}

.profile-input-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.profile-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: var(--profile-icon-color);
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

.profile-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    cursor: pointer;
    color: var(--profile-eye-color);
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    z-index: 3;
}

.profile-token-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
}

.profile-token-row .profile-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-token-row .profile-input-wrapper .profile-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.profile-token-btn {
    flex: 0 0 auto;
    min-width: 148px;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--profile-green-soft-border);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: var(--profile-green-soft-bg);
    color: var(--profile-green-soft-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.profile-token-btn:hover,
.profile-token-btn:focus {
    background: var(--profile-green-soft-hover-bg);
    color: var(--profile-green-soft-hover-text);
    border-color: var(--profile-green-soft-hover-border);
    border-left: 0;
    text-decoration: none;
    outline: none;
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    background: var(--profile-green);
    color: #fff;
    border: 1px solid var(--profile-green);
}

.profile-btn:hover,
.profile-btn:focus {
    background: var(--profile-green-hover);
    border-color: var(--profile-green-hover);
    color: #fff !important;
    text-decoration: none;
}

.profile-telegram-btn,
.profile-telegram-btn:link,
.profile-telegram-btn:visited,
.profile-telegram-btn:hover,
.profile-telegram-btn:focus,
.profile-telegram-btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #229ED9;
    border: 1px solid #229ED9;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: normal !important;
    white-space: nowrap;
    width: auto;
    box-sizing: border-box;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.profile-telegram-btn:hover,
.profile-telegram-btn:focus,
.profile-telegram-btn:active {
    background: #1d8fc4 !important;
    border-color: #1d8fc4 !important;
    color: #fff !important;
    font-size: 13px !important;
}

.main-body .profile-telegram-btn,
.main-body .profile-telegram-btn:hover,
.main-body .profile-telegram-btn:focus,
.main-body .profile-telegram-btn:active,
.profile-form-group .profile-telegram-btn,
.profile-form-group .profile-telegram-btn:hover,
.profile-form-group .profile-telegram-btn:focus,
.profile-form-group .profile-telegram-btn:active {
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    transform: none !important;
    box-shadow: none !important;
}

.profile-telegram-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
}

.profile-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--profile-switch-row-border);
    border-radius: 10px;
    background: var(--profile-switch-row-bg);
}

.profile-switch-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
}

.profile-switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
}

.profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.profile-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--profile-switch-off);
    transition: .2s;
    border-radius: 999px;
}

.profile-slider:before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.profile-switch input:checked + .profile-slider {
    background: var(--profile-green);
}

.profile-switch input:checked + .profile-slider:before {
    transform: translateX(20px);
}

.profile-submit-wrap {
    margin-top: 15px;
	margin-bottom: 20px;
}

#toast-message {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 320px;
    background: var(--profile-toast-bg);
    color: var(--profile-toast-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,0.16);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#toast-message.show {
    opacity: 1;
}

@media (max-width: 800px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-wrap {
        max-width: 100%;
    }

    .profile-card {
        padding: 13px;
        border-radius: 14px;
    }

    .profile-card h2 {
        font-size: 18px;
    }

    .profile-card h3 {
        font-size: 15px;
    }

    .profile-static-value,
    .profile-input,
    .profile-form-group input[type="email"],
    .profile-form-group input[type="text"],
    .profile-form-group input[type="password"] {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .profile-token-row {
        flex-direction: column;
        gap: 8px;
    }

    .profile-token-row .profile-input-wrapper {
        min-width: 0;
        width: 100%;
    }

    .profile-token-row .profile-input-wrapper .profile-input {
        border-radius: 10px;
    }

    .profile-token-btn {
        width: 100%;
        min-width: 0;
        border-left: 1px solid var(--profile-green-soft-border);
        border-radius: 10px;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .profile-token-btn:hover,
    .profile-token-btn:focus {
        border-left: 1px solid var(--profile-green-soft-hover-border);
    }

    .profile-btn,
    .profile-telegram-btn,
    .profile-telegram-btn:link,
    .profile-telegram-btn:visited,
    .profile-telegram-btn:hover,
    .profile-telegram-btn:focus,
    .profile-telegram-btn:active {
        width: 100%;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .profile-switch-row {
        align-items: flex-start;
    }

    #toast-message {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }
}

/* main */
/* dashboard */
:root {
    --dashboard-hero-bg: linear-gradient(135deg, #1697d2 0%, #22b8d8 100%);
    --dashboard-hero-text: #ffffff;
    --dashboard-hero-soft: rgba(255,255,255,0.88);
    --dashboard-hero-badge-bg: rgba(255,255,255,0.16);
    --dashboard-hero-badge-border: rgba(255,255,255,0.24);

    --dashboard-stat-balance-bg: linear-gradient(135deg, #ecfbf2 0%, #dff6e8 100%);
    --dashboard-stat-balance-border: #c5ead3;
    --dashboard-stat-balance-text: #1f8a4c;

    --dashboard-stat-discount-bg: linear-gradient(135deg, #fff8e8 0%, #fff0c9 100%);
    --dashboard-stat-discount-border: #f2dfab;
    --dashboard-stat-discount-text: #b88400;

    --dashboard-stat-server-bg: linear-gradient(135deg, #f3f0ff 0%, #e7e0ff 100%);
    --dashboard-stat-server-border: #d8cbff;
    --dashboard-stat-server-text: #6a4dc2;

    --dashboard-user-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --dashboard-user-border: #c8dcf8;
    --dashboard-user-text: #168acd;

    --dashboard-link: #168acd;
    --dashboard-link-hover: #0f76b0;

    --dashboard-action-buy-bg: linear-gradient(135deg, #fff1f1 0%, #f7d6d6 100%);
    --dashboard-action-buy-border: #e7b4b4;
    --dashboard-action-buy-title: #b14a4a;

    --dashboard-action-setup-bg: linear-gradient(135deg, #eef8ff 0%, #dff1ff 100%);
    --dashboard-action-setup-border: #cbe6fb;
    --dashboard-action-setup-title: #168acd;

    --dashboard-action-speed-bg: linear-gradient(135deg, #eefcf3 0%, #dcf7e7 100%);
    --dashboard-action-speed-border: #c3e9d2;
    --dashboard-action-speed-title: #1f8a4c;

    --dashboard-balance-btn-bg: #168acd;
    --dashboard-balance-btn-hover: #127ab7;

    --dashboard-section-badge-bg: #eef7fb;
    --dashboard-section-badge-border: #d4e7f1;
    --dashboard-section-badge-text: #168acd;

    --dashboard-packet-bg: #fcfeff;
    --dashboard-packet-border: #d8e3ec;
    --dashboard-packet-meta-bg: #f6f9fb;
    --dashboard-packet-meta-border: #e1ebf2;

    --dashboard-packet-rest-bg: #eefcf3;
    --dashboard-packet-rest-border: #c3e9d2;
    --dashboard-packet-rest-text: #1f8a4c;

    --dashboard-packet-days-bg: #eef4ff;
    --dashboard-packet-days-border: #c7d8ff;
    --dashboard-packet-days-text: #3469b8;

    --dashboard-modal-bg: rgba(10, 20, 30, 0.55);
    --dashboard-modal-card-bg: #ffffff;
    --dashboard-modal-close-bg: rgba(0,0,0,0.06);
    --dashboard-modal-close-hover-bg: rgba(0,0,0,0.12);
}

html.theme-dark {
    --dashboard-hero-bg: linear-gradient(135deg, #0f516d 0%, #0f6669 100%);
    --dashboard-hero-text: #ffffff;
    --dashboard-hero-soft: rgba(255,255,255,0.84);
    --dashboard-hero-badge-bg: rgba(255,255,255,0.10);
    --dashboard-hero-badge-border: rgba(255,255,255,0.16);

    --dashboard-stat-balance-bg: linear-gradient(135deg, #1f3327 0%, #264230 100%);
    --dashboard-stat-balance-border: #355a42;
    --dashboard-stat-balance-text: #86efac;

    --dashboard-stat-discount-bg: linear-gradient(135deg, #3a3120 0%, #473b26 100%);
    --dashboard-stat-discount-border: #6a5730;
    --dashboard-stat-discount-text: #f6dfa3;

    --dashboard-stat-server-bg: linear-gradient(135deg, #2d2740 0%, #362f4c 100%);
    --dashboard-stat-server-border: #514772;
    --dashboard-stat-server-text: #c4b5fd;

    --dashboard-user-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --dashboard-user-border: #314d73;
    --dashboard-user-text: #93c5fd;

    --dashboard-link: #64bdf6;
    --dashboard-link-hover: #8ed0ff;

    --dashboard-action-buy-bg: linear-gradient(135deg, #402626 0%, #4b2d2d 100%);
    --dashboard-action-buy-border: #6a4343;
    --dashboard-action-buy-title: #e3a3a3;

    --dashboard-action-setup-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --dashboard-action-setup-border: #314d73;
    --dashboard-action-setup-title: #93c5fd;

    --dashboard-action-speed-bg: linear-gradient(135deg, #1f3327 0%, #264230 100%);
    --dashboard-action-speed-border: #355a42;
    --dashboard-action-speed-title: #86efac;

    --dashboard-balance-btn-bg: #0f79b7;
    --dashboard-balance-btn-hover: #0d689d;

    --dashboard-section-badge-bg: #22303d;
    --dashboard-section-badge-border: #314353;
    --dashboard-section-badge-text: #93c5fd;

    --dashboard-packet-bg: #1b232c;
    --dashboard-packet-border: #32414d;
    --dashboard-packet-meta-bg: #202a33;
    --dashboard-packet-meta-border: #334351;

    --dashboard-packet-rest-bg: #1f3327;
    --dashboard-packet-rest-border: #355a42;
    --dashboard-packet-rest-text: #86efac;

    --dashboard-packet-days-bg: #1d2b3d;
    --dashboard-packet-days-border: #314d73;
    --dashboard-packet-days-text: #93c5fd;

    --dashboard-modal-bg: rgba(0, 0, 0, 0.65);
    --dashboard-modal-card-bg: #1c242d;
    --dashboard-modal-close-bg: rgba(255,255,255,0.08);
    --dashboard-modal-close-hover-bg: rgba(255,255,255,0.16);
}

.dashboard-wrap {
    max-width: 980px;
    margin: 0 auto;
    color: var(--text-main);
}

.dashboard-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: var(--card-shadow);
}

.dashboard-card h2,
.dashboard-card h3 {
    margin: 0 0 10px 0;
    line-height: 1.25;
}

.dashboard-card h2 {
    font-size: 18px;
    color: var(--title-text);
}

.dashboard-card h3 {
    font-size: 15px;
    color: var(--title-text);
}

.dashboard-hero {
    background: var(--dashboard-hero-bg);
    border: 0;
    color: var(--dashboard-hero-text);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.dashboard-hero h2 {
    color: var(--dashboard-hero-text);
    margin-bottom: 4px;
}

.dashboard-hero-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--dashboard-hero-text);
}

.dashboard-muted {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-soft);
}

.dashboard-hero .dashboard-muted {
    color: var(--dashboard-hero-soft);
    margin-top: 4px !important;
}

.dashboard-top-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dashboard-stat-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}

.dashboard-stat-link:hover .dashboard-stat {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 31, 63, 0.08);
}

.dashboard-stat {
    border-radius: 13px;
    padding: 12px;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 78px;
    height: 100%;
    box-sizing: border-box;
}

.dashboard-stat-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--text-soft);
}

.dashboard-stat-title .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

.dashboard-stat.balance .dashboard-stat-title .material-symbols-outlined {
    color: var(--dashboard-stat-balance-text);
}

.dashboard-stat.discount .dashboard-stat-title .material-symbols-outlined {
    color: var(--dashboard-stat-discount-text);
}

.dashboard-stat.server .dashboard-stat-title .material-symbols-outlined {
    color: var(--dashboard-stat-server-text);
}

.dashboard-stat-value {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}

.dashboard-stat.balance {
    background: var(--dashboard-stat-balance-bg);
    border-color: var(--dashboard-stat-balance-border);
}

.dashboard-stat.balance .dashboard-stat-value {
    color: var(--dashboard-stat-balance-text);
}

.dashboard-stat.discount {
    background: var(--dashboard-stat-discount-bg);
    border-color: var(--dashboard-stat-discount-border);
}

.dashboard-stat.discount .dashboard-stat-value {
    color: var(--dashboard-stat-discount-text);
}

.dashboard-stat.server {
    background: var(--dashboard-stat-server-bg);
    border-color: var(--dashboard-stat-server-border);
}

.dashboard-stat.server .dashboard-stat-value {
    color: var(--dashboard-stat-server-text);
}

.dashboard-list {
    display: grid;
    gap: 10px;
}

.dashboard-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-row-left {
    min-width: 0;
    flex: 1;
}

.dashboard-label {
    font-size: 12px;
    color: var(--text-soft);
    margin-bottom: 3px;
}

.dashboard-value,
.dashboard-hello {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
}

.dashboard-user-link {
    display: inline-block;
    text-decoration: none !important;
}

.dashboard-user-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--dashboard-user-bg);
    border: 1px solid var(--dashboard-user-border);
    color: var(--dashboard-user-text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}

.dashboard-user-link:hover .dashboard-user-highlight {
    background: linear-gradient(135deg, #e4f1ff 0%, #d1e7ff 100%);
    border-color: #aecdff;
    box-shadow: 0 6px 16px rgba(22, 138, 205, 0.12);
    text-decoration: none;
}

.dashboard-user-link:active .dashboard-user-highlight {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.dashboard-user-link:focus .dashboard-user-highlight,
.dashboard-user-link:focus-visible .dashboard-user-highlight {
    outline: none;
    border-color: #7fb7e6;
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.14);
}

html.theme-dark .dashboard-user-link:hover .dashboard-user-highlight {
    background: linear-gradient(135deg, #22364b 0%, #29425a 100%);
    border-color: #466a91;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

html.theme-dark .dashboard-user-link:active .dashboard-user-highlight {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.24);
}

html.theme-dark .dashboard-user-link:focus .dashboard-user-highlight,
html.theme-dark .dashboard-user-link:focus-visible .dashboard-user-highlight {
    border-color: #5f8fbd;
    box-shadow: 0 0 0 3px rgba(100, 189, 246, 0.16);
}

.dashboard-user-highlight .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    color: var(--dashboard-user-text);
}

.dashboard-link {
    color: var(--dashboard-link);
    text-decoration: none;
}

.dashboard-link:hover {
    color: var(--dashboard-link-hover);
    text-decoration: underline;
}

.dashboard-actions {
    display: grid;
    gap: 10px;
}

.dashboard-action {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    color: var(--text-main);
}

.dashboard-action:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.dashboard-action-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.dashboard-action-head .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.dashboard-action.setup {
    background: var(--dashboard-action-setup-bg);
    border: 1px solid var(--dashboard-action-setup-border);
}

.dashboard-action.speed {
    background: var(--dashboard-action-speed-bg);
    border: 1px solid var(--dashboard-action-speed-border);
}

.dashboard-action.buy {
    background: var(--dashboard-action-buy-bg);
    border: 1px solid var(--dashboard-action-buy-border);
}

.dashboard-action.buy:hover {
    box-shadow: 0 8px 18px rgba(36, 75, 150, 0.12);
}

html.theme-dark .dashboard-action.buy:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.dashboard-action-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 0;
}

.dashboard-action.setup .dashboard-action-title,
.dashboard-action.setup .dashboard-action-head .material-symbols-outlined {
    color: var(--dashboard-action-setup-title);
}

.dashboard-action.speed .dashboard-action-title,
.dashboard-action.speed .dashboard-action-head .material-symbols-outlined {
    color: var(--dashboard-action-speed-title);
}

.dashboard-action.buy .dashboard-action-title,
.dashboard-action.buy .dashboard-action-head .material-symbols-outlined {
    color: var(--dashboard-action-buy-title);
}

.dashboard-action-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-soft);
}

.dashboard-balance-link,
.dashboard-balance-link:link,
.dashboard-balance-link:visited,
.dashboard-balance-link:hover,
.dashboard-balance-link:focus,
.dashboard-balance-link:active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--dashboard-balance-btn-bg);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: normal !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.dashboard-balance-link:hover,
.dashboard-balance-link:focus,
.dashboard-balance-link:active {
    background: var(--dashboard-balance-btn-hover);
}

.dashboard-balance-link .material-symbols-outlined {
    font-size: 17px;
    line-height: 1;
    color: #fff;
}

.dashboard-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--dashboard-hero-badge-bg);
    border: 1px solid var(--dashboard-hero-badge-border);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.dashboard-title-row.has-icon {
    align-items: center;
}

.dashboard-title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-title-main .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    color: var(--title-text);
    flex: 0 0 auto;
}

.dashboard-title-main h3 {
    margin: 0;
}

.dashboard-section-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--dashboard-section-badge-bg);
    border: 1px solid var(--dashboard-section-badge-border);
    color: var(--dashboard-section-badge-text);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-packets {
    display: grid;
    gap: 12px;
}

.dashboard-packet {
    border: 1px solid var(--dashboard-packet-border);
    border-radius: 14px;
    padding: 12px;
    background: var(--dashboard-packet-bg);
}

.dashboard-packet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-packet-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.dashboard-packet-id,
.dashboard-packet-title .dashboard-link,
.dashboard-packet-title .dashboard-link:link,
.dashboard-packet-title .dashboard-link:visited,
.dashboard-packet-title .dashboard-link:hover,
.dashboard-packet-title .dashboard-link:focus,
.dashboard-packet-title .dashboard-link:active {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

.dashboard-packet-id {
    color: var(--text-soft);
    margin-right: 6px;
}

.dashboard-packet-title .dashboard-link,
.dashboard-packet-title .dashboard-link:link,
.dashboard-packet-title .dashboard-link:visited {
    color: var(--dashboard-link);
    text-decoration: none;
}

.dashboard-packet-title .dashboard-link:hover,
.dashboard-packet-title .dashboard-link:focus,
.dashboard-packet-title .dashboard-link:active {
    color: var(--dashboard-link-hover);
    text-decoration: underline;
}

.dashboard-packet-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.dashboard-packet-meta-item {
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--dashboard-packet-meta-border);
    background: var(--dashboard-packet-meta-bg);
}

.dashboard-packet-meta-item.rest {
    background: var(--dashboard-packet-rest-bg);
    border-color: var(--dashboard-packet-rest-border);
}

.dashboard-packet-meta-item.days {
    background: var(--dashboard-packet-days-bg);
    border-color: var(--dashboard-packet-days-border);
}

.dashboard-packet-meta-label {
    font-size: 11px;
    color: var(--text-soft);
    margin-bottom: 3px;
}

.dashboard-packet-meta-value {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.4;
}

.dashboard-packet-meta-value .dashboard-rest-value {
    color: var(--dashboard-packet-rest-text);
    font-weight: 700;
}

.dashboard-packet-meta-value .dashboard-days-value {
    color: var(--dashboard-packet-days-text);
    font-weight: 700;
}

.dashboard-btn,
.dashboard-packet form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--dashboard-balance-btn-bg);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

.dashboard-btn:hover,
.dashboard-packet form input[type="submit"]:hover {
    background: var(--dashboard-balance-btn-hover);
    color: #fff;
}

.dashboard-empty {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.5;
}

.packet-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--dashboard-modal-bg);
}

.packet-modal-content {
    position: relative;
    width: 92%;
    max-width: 980px;
    height: 85vh;
    margin: 4vh auto 0 auto;
    background: var(--dashboard-modal-card-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.packet-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: var(--dashboard-modal-close-bg);
    color: var(--text-main);
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

.packet-modal-close:hover {
    background: var(--dashboard-modal-close-hover-bg);
}

#packetModalFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--dashboard-modal-card-bg);
}

@media (max-width: 900px) {
    .dashboard-top-grid,
    .dashboard-stats,
    .dashboard-packet-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-card {
        padding: 12px;
        border-radius: 12px;
    }

    .dashboard-packet-top,
    .dashboard-row,
    .dashboard-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-packet form input[type="submit"] {
        width: 100%;
    }

    .packet-modal-content {
        width: 96%;
        height: 90vh;
        margin-top: 2vh;
    }
}

/* transfer funds */
:root {
    --transfer-balance-bg: #fff7ff;
    --transfer-balance-border: #ead2e8;
    --transfer-balance-value: #a119a0;

    --transfer-input-bg: #fbfcfe;
    --transfer-input-border: #d5dee7;
    --transfer-input-focus-border: #a9cfb3;
    --transfer-input-focus-shadow: 0 0 0 3px rgba(130, 195, 145, 0.16);
    --transfer-icon-color: #8a98a6;

    --transfer-green: #89c79a;
    --transfer-green-hover: #76b687;
}

html.theme-dark {
    --transfer-balance-bg: #2a1f2a;
    --transfer-balance-border: #5b4359;
    --transfer-balance-value: #f0a9ea;

    --transfer-input-bg: #101820;
    --transfer-input-border: #2c3947;
    --transfer-input-focus-border: #8fce9f;
    --transfer-input-focus-shadow: 0 0 0 3px rgba(137, 199, 154, 0.18);
    --transfer-icon-color: #8ea0af;

    --transfer-green: #89c79a;
    --transfer-green-hover: #76b687;
}

.page-section.page-transfer {
    display: grid;
    gap: 18px;
    padding-top: 16px;
    padding-bottom: 22px;
}

.transfer-panel {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 16px 18px;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
}

html.theme-dark .transfer-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.transfer-panel-head {
    margin-bottom: 14px;
    text-align: center;
}

.transfer-panel-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.transfer-panel-body {
    padding: 0;
}

.transfer-balance-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 16px auto;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--transfer-balance-bg);
    border: 1px solid var(--transfer-balance-border);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.35;
}

.transfer-balance-label {
    color: var(--text-main);
    font-weight: 500;
}

.transfer-balance-value {
    color: var(--transfer-balance-value);
    font-weight: 700;
    white-space: nowrap;
}

.transfer-form {
    display: grid;
    gap: 14px;
}

.transfer-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.transfer-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--title-bg);
    border-bottom: 1px solid var(--title-border);
    color: var(--title-text);
    font-size: 15px;
    font-weight: 600;
}

.transfer-card-head i {
    font-size: 15px;
    line-height: 1;
}

.transfer-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px 16px;
    padding: 16px;
    align-items: center;
}

.transfer-label {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-main);
}

.transfer-field {
    min-width: 0;
}

.transfer-input-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.transfer-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: var(--transfer-icon-color);
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

.transfer-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    margin: 0;
    border: 1px solid var(--transfer-input-border);
    border-radius: 10px;
    background: var(--transfer-input-bg);
    color: var(--text-main);
    font-size: 13px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 10px 12px 10px 42px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.transfer-input:focus {
    outline: none;
    border-color: var(--transfer-input-focus-border);
    box-shadow: var(--transfer-input-focus-shadow);
    background: var(--transfer-input-bg);
}

.transfer-actions {
    display: flex;
    justify-content: center;
    padding: 0 16px 16px 16px;
}

.transfer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    background: var(--transfer-green);
    color: #fff;
    border: 1px solid var(--transfer-green);
    min-width: 170px;
}

.transfer-btn:hover,
.transfer-btn:focus {
    background: var(--transfer-green-hover);
    border-color: var(--transfer-green-hover);
    color: #fff !important;
    text-decoration: none;
}

@media (max-width: 768px) {
    .page-section.page-transfer {
        gap: 16px;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .transfer-panel {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .transfer-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .transfer-card-head {
        padding: 0 0 12px 0;
        background: transparent;
        border-bottom: 0;
    }

    .transfer-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
    }

    .transfer-label {
        font-size: 13px;
        font-weight: 600;
    }

    .transfer-balance-box {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 14px;
    }

.transfer-actions {
    padding: 0;
    margin-top: 25px;
}

    .transfer-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .ui-input,
    .ui-input-large,
    .transfer-input,
    .profile-input,
    .profile-form-group input[type="email"],
    .profile-form-group input[type="text"],
    .profile-form-group input[type="password"] {
        font-size: 16px !important;
    }
}

/* packets */
:root {
    --packets-note-bg: #fffaf0;
    --packets-note-border: #eed9a7;
    --packets-note-icon: #8a6220;
    --packets-note-text: #6d5324;

    --packets-input-bg: #fbfcfe;
    --packets-input-border: #d5dee7;
    --packets-input-focus-border: #a9cfb3;
    --packets-input-focus-shadow: 0 0 0 3px rgba(130, 195, 145, 0.16);
    --packets-icon-color: #8a98a6;

    --packets-submit-bg: #89c79a;
    --packets-submit-hover: #76b687;

    --packets-small-btn-bg: #f3f7fb;
    --packets-small-btn-border: #d7e2ec;
    --packets-small-btn-color: #233545;
    --packets-small-btn-hover-bg: #e7eef5;
    --packets-small-btn-hover-border: #c6d6e5;
    --packets-small-btn-active-bg: #dfe8f0;

    --packets-stat-balance-bg: #fff7ff;
    --packets-stat-balance-border: #ead2e8;
    --packets-stat-balance-text: #a119a0;

    --packets-stat-total-bg: #f4fbf4;
    --packets-stat-total-border: #d7ead7;
    --packets-stat-total-text: #3b8b4e;

    --packet-list-border: #dbe5ee;
    --packet-check-bg: #f3f5f7;
    --packet-checked-bg: rgba(22, 138, 205, 0.06);
    --packet-checked-border: #9fd1e8;

    --packet-theme-default-bg: #eef4f8;
    --packet-theme-default-border: #d8e4ec;
    --packet-theme-default-text: #506474;

    --packet-theme-premium-bg: #efe8ff;
    --packet-theme-premium-border: #d8c8ff;
    --packet-theme-premium-text: #6d4bc3;

    --packet-theme-standard-bg: #eaf5ff;
    --packet-theme-standard-border: #cde4fb;
    --packet-theme-standard-text: #2f79b8;

    --packet-theme-light-bg: #edf9ed;
    --packet-theme-light-border: #cfe5cf;
    --packet-theme-light-text: #3b8b4e;

    --packet-theme-sport-bg: #fff4e8;
    --packet-theme-sport-border: #f1d8b5;
    --packet-theme-sport-text: #b96a18;

    --packet-price-bg: #eaf2ff;
    --packet-price-border: #c9dafc;
    --packet-price-text: #244e99;

    --packet-owned-ok-bg: #edf9ed;
    --packet-owned-ok-border: #cfe5cf;
    --packet-owned-ok-text: #3b8b4e;

    --packet-owned-warn-bg: #fff7e8;
    --packet-owned-warn-border: #f1dfb5;
    --packet-owned-warn-text: #b97b18;

    --packet-owned-danger-bg: #fff0f0;
    --packet-owned-danger-border: #efcaca;
    --packet-owned-danger-text: #c34a4a;

    --packet-modal-bg: rgba(10, 20, 30, 0.55);
    --packet-modal-card-bg: #ffffff;
    --packet-modal-close-bg: rgba(0,0,0,0.06);
    --packet-modal-close-hover-bg: rgba(0,0,0,0.12);
}

html.theme-dark {
    --packets-note-bg: #2a2419;
    --packets-note-border: #5a4930;
    --packets-note-icon: #f0c978;
    --packets-note-text: #dec89b;

    --packets-input-bg: #101820;
    --packets-input-border: #2c3947;
    --packets-input-focus-border: #8fce9f;
    --packets-input-focus-shadow: 0 0 0 3px rgba(137, 199, 154, 0.18);
    --packets-icon-color: #8ea0af;

    --packets-submit-bg: #89c79a;
    --packets-submit-hover: #76b687;

    --packets-small-btn-bg: #24303b;
    --packets-small-btn-border: #334351;
    --packets-small-btn-color: #e7edf3;
    --packets-small-btn-hover-bg: #2b3945;
    --packets-small-btn-hover-border: #405363;
    --packets-small-btn-active-bg: #22303a;

    --packets-stat-balance-bg: #2a1f2a;
    --packets-stat-balance-border: #5b4359;
    --packets-stat-balance-text: #f0a9ea;

    --packets-stat-total-bg: #1f2b22;
    --packets-stat-total-border: #34513a;
    --packets-stat-total-text: #93d7a1;

    --packet-list-border: #334351;
    --packet-check-bg: #202a33;
    --packet-checked-bg: rgba(100, 189, 246, 0.08);
    --packet-checked-border: #4d708c;

    --packet-theme-default-bg: #26323b;
    --packet-theme-default-border: #364753;
    --packet-theme-default-text: #c5d1db;

    --packet-theme-premium-bg: #2f2745;
    --packet-theme-premium-border: #4c3b75;
    --packet-theme-premium-text: #ccb8ff;

    --packet-theme-standard-bg: #213448;
    --packet-theme-standard-border: #31506d;
    --packet-theme-standard-text: #9ed0ff;

    --packet-theme-light-bg: #223326;
    --packet-theme-light-border: #36563c;
    --packet-theme-light-text: #a7e0b2;

    --packet-theme-sport-bg: #3a2b1f;
    --packet-theme-sport-border: #6b4a2f;
    --packet-theme-sport-text: #f2c38a;

    --packet-price-bg: #213448;
    --packet-price-border: #31506d;
    --packet-price-text: #9ed0ff;

    --packet-owned-ok-bg: #223326;
    --packet-owned-ok-border: #36563c;
    --packet-owned-ok-text: #a7e0b2;

    --packet-owned-warn-bg: #3a2b1f;
    --packet-owned-warn-border: #6b4a2f;
    --packet-owned-warn-text: #f2c38a;

    --packet-owned-danger-bg: #3a2323;
    --packet-owned-danger-border: #6f3c3c;
    --packet-owned-danger-text: #ffb3b3;

    --packet-modal-bg: rgba(0, 0, 0, 0.65);
    --packet-modal-card-bg: #1c242d;
    --packet-modal-close-bg: rgba(255,255,255,0.08);
    --packet-modal-close-hover-bg: rgba(255,255,255,0.16);
}

.page-section.page-packets {
    display: grid;
    gap: 16px;
    padding-top: 0px;
    padding-bottom: 22px;
    font-size: 13px;
    line-height: 1.35;
}

.packets-note-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;          /* растягиваем на всю ширину контейнера */
    max-width: none;      /* убираем ограничение */
    margin: 0;            /* убираем авто-отступы */
    padding: 14px 16px;
    background: var(--packets-note-bg);
    border: 1px solid var(--packets-note-border);
    border-radius: 16px;
    box-sizing: border-box; /* чтобы padding учитывался */
}

.packets-note-icon {
    flex: 0 0 auto;
    color: var(--packets-note-icon);
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

.packets-note-text {
    color: var(--packets-note-text);
    line-height: 1.6;
}

.packets-note-link {
    margin-top: 8px;
}

.packets-note-link a {
    color: var(--title-text);
    text-decoration: none;
}

.packets-note-link a:hover {
    text-decoration: underline;
}

.packets-panel {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #d9e4ee;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 35, 55, 0.10);
}

html.theme-dark .packets-panel {
    background: #1c242d;
    border-color: #32414d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.packets-panel-head {
    margin-bottom: 12px;
    text-align: center;
}

.packets-panel-head h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: var(--title-text);
    font-weight: 600;
}

.packets-panel-body {
    padding: 0;
}

.packets-user-form {
    margin-bottom: 12px;
}

.packets-user-block {
    max-width: 360px;
}

.packets-field-caption {
    margin-bottom: 6px;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: 0.01em;
}

.packets-user-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.packets-form {
    display: grid;
    gap: 14px;
}

.packets-input-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
}

.packets-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: var(--packets-icon-color);
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

.packets-input,
.packets-select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--packets-input-border);
    border-radius: 10px;
    background: var(--packets-input-bg);
    color: var(--text-main);
    font-size: 13px;
    line-height: 20px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.packets-input {
    padding: 10px 12px 10px 42px !important;
}

.packets-select {
    width: 100%;
    padding: 10px 36px 10px 42px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.packets-input:focus,
.packets-select:focus {
    outline: none;
    border-color: var(--packets-input-focus-border);
    box-shadow: var(--packets-input-focus-shadow);
    background: var(--packets-input-bg);
}

.packets-small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--packets-small-btn-border);
    border-radius: 10px;
    background: var(--packets-small-btn-bg);
    color: var(--packets-small-btn-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}

.packets-small-btn:hover {
    background: var(--packets-small-btn-hover-bg);
    border-color: var(--packets-small-btn-hover-border);
}

.packets-small-btn:active {
    background: var(--packets-small-btn-active-bg);
    transform: translateY(1px);
}

.packets-cards-list {
    display: grid;
    gap: 10px;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.packet-line {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--packet-list-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.packet-line-checked {
    background: var(--packet-checked-bg) !important;
    border-color: var(--packet-checked-border) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.10),
        inset 0 0 18px rgba(22, 138, 205, 0.10),
        0 0 0 2px rgba(22, 138, 205, 0.12),
        0 10px 22px rgba(22, 138, 205, 0.14) !important;
}

html.theme-dark .packet-line-checked {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 0 18px rgba(100, 189, 246, 0.10),
        0 0 0 2px rgba(100, 189, 246, 0.14),
        0 10px 22px rgba(0, 0, 0, 0.26) !important;
}

.packet-line-check-col {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--packet-check-bg);
    border-right: 1px solid var(--packet-list-border);
    min-width: 0;
    width: 42px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.packet-line-checked .packet-line-check-col {
    border-right-color: var(--packet-checked-border);
}

.packet-line-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.packet-line-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.packet-line-content {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    min-width: 0;
}

.packet-line-logo-link {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 54px;
    text-decoration: none !important;
}

.packet-line-logo {
    display: block;
    width: 100%;
    max-width: 132px;
    height: 54px;
    min-height: 54px;
    object-fit: cover;
    border-radius: 12px;
}

.packet-line-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.packet-line-name-badge,
.packet-line-price-badge,
.packet-line-owned-badge {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    height: 54px;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 700 !important;
    box-sizing: border-box;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.packet-line-name-badge {
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none !important;
}

.packet-line-badges {
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.packet-line-price-badge {
    gap: 8px;
    white-space: nowrap;
    background: var(--packet-price-bg);
    border: 1px solid var(--packet-price-border);
    color: var(--packet-price-text);
}

.packet-line-price-main {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

.packet-line-price-sub {
    font-size: 11px;
    line-height: 1;
    color: rgba(36, 78, 153, 0.78);
    font-weight: 600;
}

html.theme-dark .packet-line-price-sub {
    color: rgba(158, 208, 255, 0.80);
}

.packet-line-owned-badge {
    width: 172px;
    min-width: 172px;
    max-width: 172px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
    padding-right: 12px;
}

.packet-line-owned-ok {
    background: linear-gradient(180deg, var(--packet-owned-ok-bg) 0%, rgba(255,255,255,0.35) 100%);
    border: 1px solid var(--packet-owned-ok-border);
    color: var(--packet-owned-ok-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.packet-line-owned-warn {
    background: linear-gradient(180deg, var(--packet-owned-warn-bg) 0%, rgba(255,255,255,0.32) 100%);
    border: 1px solid var(--packet-owned-warn-border);
    color: var(--packet-owned-warn-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
}

.packet-line-owned-danger {
    background: linear-gradient(180deg, var(--packet-owned-danger-bg) 0%, rgba(255,255,255,0.28) 100%);
    border: 1px solid var(--packet-owned-danger-border);
    color: var(--packet-owned-danger-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

.packet-line-owned-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.packet-line-owned-wrap .packet-line-owned-badge {
    flex: 0 0 172px;
    width: 172px;
    min-width: 172px;
    max-width: 172px;
}

.packet-line-renew-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    height: 54px;
    min-height: 54px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--packets-small-btn-bg);
    border: 1px solid var(--packets-small-btn-border);
    color: var(--packets-small-btn-color);
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease, color 0.18s ease;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.packet-line-renew-btn:hover,
.packet-line-renew-btn:focus,
.packet-line-renew-btn:visited {
    background: var(--packets-small-btn-hover-bg);
    border-color: var(--packets-small-btn-hover-border);
    color: var(--packets-small-btn-color);
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.packet-line-renew-btn:active {
    background: var(--packets-small-btn-active-bg);
    transform: translateY(1px);
}

.packet-line-renew-flash {
    box-shadow:
        0 0 0 2px rgba(137, 199, 154, 0.24),
        0 10px 24px rgba(137, 199, 154, 0.18),
        inset 0 0 18px rgba(137, 199, 154, 0.12) !important;
}

.packet-theme-default .packet-line-name-badge {
    background: var(--packet-theme-default-bg);
    border: 1px solid var(--packet-theme-default-border);
    color: var(--packet-theme-default-text);
}

.packet-theme-premium .packet-line-name-badge {
    background: var(--packet-theme-premium-bg);
    border: 1px solid var(--packet-theme-premium-border);
    color: var(--packet-theme-premium-text);
}

.packet-theme-standard .packet-line-name-badge {
    background: var(--packet-theme-standard-bg);
    border: 1px solid var(--packet-theme-standard-border);
    color: var(--packet-theme-standard-text);
}

.packet-theme-light .packet-line-name-badge {
    background: var(--packet-theme-light-bg);
    border: 1px solid var(--packet-theme-light-border);
    color: var(--packet-theme-light-text);
}

.packet-theme-sport .packet-line-name-badge {
    background: var(--packet-theme-sport-bg);
    border: 1px solid var(--packet-theme-sport-border);
    color: var(--packet-theme-sport-text);
}

.packets-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: none;
}

.packets-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.packets-summary-item {
    min-width: 0;
}

.packets-summary-item label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px !important;
    font-weight: 700;
    color: var(--text-soft);
}

.packets-period-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}

.packets-period-links a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f3f7fb;
    border: 1px solid #d7e2ec;
    color: var(--text-main);
    font-size: 11px !important;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}

html.theme-dark .packets-period-links a {
    background: #24303b;
    border-color: #334351;
    color: #e7edf3;
}

.packets-period-links a:hover {
    background: #e8f0f7;
    border-color: #c6d6e5;
    text-decoration: none;
}

html.theme-dark .packets-period-links a:hover {
    background: #2c3945;
    border-color: #405363;
}

.packets-period-links a:active {
    transform: translateY(1px);
}

.packets-promo-msg {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px !important;
}

.packets-bottom-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    align-items: stretch;
}

.packets-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 96px;
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.packets-stat-balance {
    background: var(--packets-stat-balance-bg);
    border-color: var(--packets-stat-balance-border);
    color: var(--packets-stat-balance-text) !important;
}

.packets-stat-total {
    background: var(--packets-stat-total-bg);
    border-color: var(--packets-stat-total-border);
    color: var(--packets-stat-total-text);
}

a.packets-stat-balance:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.packets-stat-label {
    margin-bottom: 4px;
    font-size: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: inherit;
    opacity: 0.82;
    line-height: 1.2 !important;
}

.packets-stat-number,
.packets-stat-number span,
.packets-stat-number #total_price {
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    color: inherit !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
}

.packets-stat-bottom-text,
a .packets-stat-bottom-text,
.packets-stat-card .packets-stat-bottom-text {
    display: block !important;
    margin-top: 5px;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #2f79b8 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

html.theme-dark .packets-stat-bottom-text,
html.theme-dark a .packets-stat-bottom-text,
html.theme-dark .packets-stat-card .packets-stat-bottom-text {
    color: #9ed0ff !important;
}

.packets-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.packets-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding: 0 18px;
    border: 1px solid var(--packets-submit-bg);
    border-radius: 10px;
    background: var(--packets-submit-bg);
    color: #fff;
    font-size: 13px !important;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
}

.packets-submit-btn:hover,
.packets-submit-btn:focus {
    background: var(--packets-submit-hover);
    border-color: var(--packets-submit-hover);
    color: #fff;
}

/* modal */
.packet-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--packet-modal-bg);
}

.packet-modal-content {
    position: relative;
    width: 92%;
    max-width: 980px;
    height: 85vh;
    margin: 4vh auto 0 auto;
    background: var(--packet-modal-card-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.packet-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: var(--packet-modal-close-bg);
    color: var(--text-main);
    font-size: 22px !important;
    cursor: pointer;
    z-index: 2;
}

.packet-modal-close:hover {
    background: var(--packet-modal-close-hover-bg);
}

#packetModalFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--packet-modal-card-bg);
}

@media (max-width: 1100px) {
    .packet-line {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .packet-line-check-col {
        width: 42px;
    }

    .packet-line-content {
        grid-template-columns: 110px minmax(0, 1fr);
        align-items: stretch;
    }

    .packet-line-logo-link,
    .packet-line-logo,
    .packet-line-name-badge,
    .packet-line-price-badge,
    .packet-line-owned-badge,
    .packet-line-renew-btn {
        height: 50px;
        min-height: 50px;
    }

    .packet-line-logo {
        max-width: 110px;
    }

    .packet-line-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .packet-line-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .page-section.page-packets {
        gap: 16px;
        padding-top: 10px;
        padding-bottom: 18px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .packets-note-card {
        padding: 12px;
        border-radius: 14px;
    }

    .packets-panel {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .packets-input,
    .packets-select {
        font-size: 16px !important;
    }

    .packets-cards-list {
        border: 0;
        border-radius: 0;
        padding: 0;
        gap: 8px;
    }

    .packet-line {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0;
        border-radius: 12px;
        align-items: stretch;
    }

    .packet-line.packet-line-checked {
        background: var(--packet-checked-bg) !important;
        border-color: var(--packet-checked-border) !important;
        box-shadow:
            0 0 0 2px rgba(22, 138, 205, 0.16),
            0 8px 20px rgba(22, 138, 205, 0.16),
            inset 0 0 14px rgba(22, 138, 205, 0.08) !important;
    }

    html.theme-dark .packet-line.packet-line-checked {
        box-shadow:
            0 0 0 2px rgba(100, 189, 246, 0.18),
            0 8px 20px rgba(0, 0, 0, 0.30),
            inset 0 0 14px rgba(100, 189, 246, 0.08) !important;
    }

    .packet-line-check-col {
        width: 38px;
        align-items: stretch;
        justify-content: center;
    }

    .packet-line-check {
        align-items: center;
        justify-content: center;
        padding-top: 0;
        width: 100%;
    }

    .packet-line-check input {
        width: 18px;
        height: 18px;
    }

    .packet-line-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        min-width: 0;
    }

    .packet-line-logo-link {
        display: block;
        width: 100%;
        height: auto;
        min-width: 0;
    }

    .packet-line-logo {
        display: block;
        width: 100%;
        max-width: none;
        height: 42px;
        min-height: 42px;
        object-fit: cover;
        border-radius: 12px;
    }

    .packet-line-main {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .packet-line-badges {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        min-width: 0;
    }

    .packet-line-name-badge,
    .packet-line-price-badge,
    .packet-line-owned-badge {
        width: 100%;
        min-height: 44px;
        height: 44px;
        padding-left: 12px;
        padding-right: 12px;
        border-radius: 11px;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .packet-line-name-badge,
    .packet-line-owned-badge {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .packet-line-name-badge {
        justify-content: flex-start;
    }

    .packet-line-owned-badge {
        justify-content: center;
        text-align: center;
    }

    .packet-line-owned-wrap {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        align-items: stretch;
    }

    .packet-line-owned-wrap .packet-line-owned-badge {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .packet-line-renew-btn {
        flex: 0 0 92px;
        width: 92px;
        min-width: 92px;
        max-width: 92px;
        height: 44px;
        min-height: 44px;
        border-radius: 11px;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .packet-line-price-badge {
        justify-content: space-between;
    }

    .packet-line-price-main {
        font-size: 16px;
    }

    .packet-line-price-sub {
        font-size: 11px;
    }

    .packets-summary-grid {
        grid-template-columns: 1fr;
    }

    .packets-bottom-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .packets-stat-card {
        min-height: 98px !important;
        padding: 12px 12px 11px !important;
        border-radius: 13px !important;
    }

    .packets-stat-label {
        margin-bottom: 6px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .packets-stat-number,
    .packets-stat-number span,
    #total_price {
        font-size: 23px !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
    }

    .packets-stat-bottom-text,
    a .packets-stat-bottom-text,
    .packets-stat-card .packets-stat-bottom-text {
        display: block !important;
        margin-top: 6px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: #2f79b8 !important;
        opacity: 1 !important;
    }

    html.theme-dark .packets-stat-bottom-text,
    html.theme-dark a .packets-stat-bottom-text,
    html.theme-dark .packets-stat-card .packets-stat-bottom-text {
        color: #9ed0ff !important;
    }

    .packets-submit-btn {
        width: 100%;
    }

    .packet-modal-content {
        width: 96%;
        height: 90vh;
        margin-top: 2vh;
    }
}

@media (max-width: 480px) {
    .packets-panel {
        padding: 12px;
    }

    .packets-user-controls {
        grid-template-columns: 1fr;
    }

    .packets-small-btn {
        width: 100%;
    }

    .packets-bottom-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .packets-stat-card {
        min-height: 88px !important;
        padding: 11px 12px 10px !important;
    }

    .packets-stat-number,
    .packets-stat-number span,
    #total_price {
        font-size: 21px !important;
    }

    .packets-stat-bottom-text,
    a .packets-stat-bottom-text,
    .packets-stat-card .packets-stat-bottom-text {
        font-size: 10px !important;
    }

    .packet-line-name-badge,
    .packet-line-price-badge,
    .packet-line-owned-badge {
        min-height: 42px;
        height: 42px;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .packet-line-renew-btn {
        flex: 0 0 88px;
        width: 88px;
        min-width: 88px;
        max-width: 88px;
        height: 42px;
        min-height: 42px;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .packet-line-price-main {
        font-size: 15px;
    }

    .packet-line-price-sub {
        font-size: 10px;
    }
}

.packets-date-wrap {
    cursor: pointer;
}

.packets-date-wrap .packets-input-icon {
    z-index: 4;
    pointer-events: none;
}

.packets-date-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 42px !important;
    padding-right: 12px !important;
    appearance: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--packets-input-bg) !important;
    color: var(--text-main) !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
}

.packets-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.packets-date-input::-webkit-datetime-edit {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-main) !important;
    line-height: 20px !important;
}

.packets-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
}

.packets-date-input::-webkit-date-and-time-value {
    text-align: left;
}

.packets-date-input::-webkit-inner-spin-button,
.packets-date-input::-webkit-clear-button {
    display: none;
}

@media (max-width: 768px) {
    .packets-date-input {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 16px !important;
        padding-left: 42px !important;
        padding-right: 10px !important;
    }

    .packets-summary-item {
        min-width: 0 !important;
    }
}

/* free test */
:root {
    --free-test-card-bg: #ffffff;
    --free-test-card-border: #d8e3ec;
    --free-test-card-shadow: 0 4px 14px rgba(19, 35, 55, 0.06);

    --free-test-card-accent-bg: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
    --free-test-card-accent-border: #cfe5f3;

    --free-test-title: #1b2b38;
    --free-test-text: #51606d;
    --free-test-text-strong: #2a3947;
    --free-test-icon: #58aee8;

    --free-test-badge-bg: #f2f6fa;
    --free-test-badge-border: #d9e4ed;
    --free-test-badge-text: #667788;

    --free-test-btn-primary-bg: linear-gradient(180deg, #58bbff 0%, #2da7ff 100%);
    --free-test-btn-primary-border: #42adff;
    --free-test-btn-primary-hover-bg: linear-gradient(180deg, #74c7ff 0%, #3ab0ff 100%);
    --free-test-btn-primary-hover-border: #5bbcff;
    --free-test-btn-primary-shadow: 0 8px 18px rgba(42, 162, 248, 0.28);

    --free-test-btn-soft-bg: #f3f7fb;
    --free-test-btn-soft-border: #d7e2ec;
    --free-test-btn-soft-text: #233545;
    --free-test-btn-soft-hover-bg: #e7eef5;
    --free-test-btn-soft-hover-border: #c6d6e5;

    --free-test-link-bg: #eef7ff;
    --free-test-link-border: #d6e8f8;

    --free-test-item-premium-bg: linear-gradient(135deg, #efe8ff 0%, #e7ddff 100%);
    --free-test-item-premium-border: #d8cbff;
    --free-test-item-premium-title: #6a4dc2;

    --free-test-item-time-bg: linear-gradient(135deg, #eef8ff 0%, #dff1ff 100%);
    --free-test-item-time-border: #cbe6fb;
    --free-test-item-time-title: #168acd;

    --free-test-item-playlist-bg: linear-gradient(135deg, #ecfbf2 0%, #dff6e8 100%);
    --free-test-item-playlist-border: #c5ead3;
    --free-test-item-playlist-title: #1f8a4c;

    --free-test-item-archive-bg: linear-gradient(135deg, #fff8e8 0%, #fff0c9 100%);
    --free-test-item-archive-border: #f2dfab;
    --free-test-item-archive-title: #b88400;

    --free-test-item-timeshift-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --free-test-item-timeshift-border: #c8dcf8;
    --free-test-item-timeshift-title: #168acd;

    --free-test-item-epg-bg: linear-gradient(135deg, #f4fbf4 0%, #dff2df 100%);
    --free-test-item-epg-border: #cfe5cf;
    --free-test-item-epg-title: #2f6b3d;

    --free-test-packet-bg: #fcfeff;
    --free-test-packet-border: #d8e3ec;
    --free-test-packet-meta-bg: #f6f9fb;
    --free-test-packet-meta-border: #e1ebf2;
    --free-test-meta-label: #7b8a97;
    --free-test-meta-value: #233545;

    --free-test-playlist-bg: linear-gradient(135deg, #eefcf3 0%, #dcf7e7 100%);
    --free-test-playlist-border: #c3e9d2;
    --free-test-playlist-text: #1f8a4c;
    --free-test-playlist-hover-bg: linear-gradient(135deg, #e4f7ea 0%, #d2f0dc 100%);
    --free-test-playlist-hover-border: #a8dcbc;
    --free-test-playlist-shadow: 0 8px 18px rgba(31, 138, 76, 0.12);
}

html.theme-dark {
    --free-test-card-bg: #1c242d;
    --free-test-card-border: #32414d;
    --free-test-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    --free-test-card-accent-bg: linear-gradient(180deg, #1c242d 0%, #202a33 100%);
    --free-test-card-accent-border: #334351;

    --free-test-title: #e7edf3;
    --free-test-text: #a6b4c1;
    --free-test-text-strong: #dbe6ee;
    --free-test-icon: #7acbff;

    --free-test-badge-bg: #24303b;
    --free-test-badge-border: #344452;
    --free-test-badge-text: #b5c3cf;

    --free-test-btn-primary-bg: linear-gradient(180deg, #58bbff 0%, #2da7ff 100%);
    --free-test-btn-primary-border: #42adff;
    --free-test-btn-primary-hover-bg: linear-gradient(180deg, #74c7ff 0%, #3ab0ff 100%);
    --free-test-btn-primary-hover-border: #5bbcff;
    --free-test-btn-primary-shadow: 0 8px 18px rgba(58, 173, 255, 0.20);

    --free-test-btn-soft-bg: #24303b;
    --free-test-btn-soft-border: #334351;
    --free-test-btn-soft-text: #e7edf3;
    --free-test-btn-soft-hover-bg: #2d3a46;
    --free-test-btn-soft-hover-border: #435667;

    --free-test-link-bg: #22303d;
    --free-test-link-border: #344452;

    --free-test-item-premium-bg: linear-gradient(135deg, #2f2745 0%, #362d4f 100%);
    --free-test-item-premium-border: #514772;
    --free-test-item-premium-title: #c4b5fd;

    --free-test-item-time-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --free-test-item-time-border: #314d73;
    --free-test-item-time-title: #93c5fd;

    --free-test-item-playlist-bg: linear-gradient(135deg, #1f3327 0%, #264230 100%);
    --free-test-item-playlist-border: #355a42;
    --free-test-item-playlist-title: #86efac;

    --free-test-item-archive-bg: linear-gradient(135deg, #3a3120 0%, #473b26 100%);
    --free-test-item-archive-border: #6a5730;
    --free-test-item-archive-title: #f6dfa3;

    --free-test-item-timeshift-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --free-test-item-timeshift-border: #314d73;
    --free-test-item-timeshift-title: #93c5fd;

    --free-test-item-epg-bg: linear-gradient(135deg, #24362a 0%, #2b4232 100%);
    --free-test-item-epg-border: #3e5e47;
    --free-test-item-epg-title: #93d7a1;

    --free-test-packet-bg: #1b232c;
    --free-test-packet-border: #32414d;
    --free-test-packet-meta-bg: #202a33;
    --free-test-packet-meta-border: #334351;
    --free-test-meta-label: #95a6b5;
    --free-test-meta-value: #e7edf3;

    --free-test-playlist-bg: linear-gradient(135deg, #1f3327 0%, #264230 100%);
    --free-test-playlist-border: #355a42;
    --free-test-playlist-text: #86efac;
    --free-test-playlist-hover-bg: linear-gradient(135deg, #27402d 0%, #2e4a35 100%);
    --free-test-playlist-hover-border: #568262;
    --free-test-playlist-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.free-test-wrap {
    max-width: 980px;
    margin: 0 auto;
}

.free-test-card {
    background: var(--free-test-card-bg);
    border: 1px solid var(--free-test-card-border);
    border-radius: 16px;
    box-shadow: var(--free-test-card-shadow);
    padding: 14px;
    margin-bottom: 14px;
}

.free-test-card--accent {
    background: var(--free-test-card-accent-bg);
    border-color: var(--free-test-card-accent-border);
}

.free-test-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--free-test-title);
}

.free-test-title-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--free-test-icon);
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.free-test-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--free-test-text);
    margin: 0 0 12px 0;
}

.free-test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.free-test-item {
    border-radius: 12px;
    padding: 12px 12px;
    border: 1px solid transparent;
    min-height: 82px;
}

.free-test-item-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.free-test-item-head .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.free-test-item-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.free-test-item-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--free-test-text);
}

.free-test-item--premium {
    background: var(--free-test-item-premium-bg);
    border-color: var(--free-test-item-premium-border);
}
.free-test-item--premium .material-symbols-outlined,
.free-test-item--premium .free-test-item-title {
    color: var(--free-test-item-premium-title);
}

.free-test-item--time {
    background: var(--free-test-item-time-bg);
    border-color: var(--free-test-item-time-border);
}
.free-test-item--time .material-symbols-outlined,
.free-test-item--time .free-test-item-title {
    color: var(--free-test-item-time-title);
}

.free-test-item--playlist {
    background: var(--free-test-item-playlist-bg);
    border-color: var(--free-test-item-playlist-border);
}
.free-test-item--playlist .material-symbols-outlined,
.free-test-item--playlist .free-test-item-title {
    color: var(--free-test-item-playlist-title);
}

.free-test-item--archive {
    background: var(--free-test-item-archive-bg);
    border-color: var(--free-test-item-archive-border);
}
.free-test-item--archive .material-symbols-outlined,
.free-test-item--archive .free-test-item-title {
    color: var(--free-test-item-archive-title);
}

.free-test-item--timeshift {
    background: var(--free-test-item-timeshift-bg);
    border-color: var(--free-test-item-timeshift-border);
}
.free-test-item--timeshift .material-symbols-outlined,
.free-test-item--timeshift .free-test-item-title {
    color: var(--free-test-item-timeshift-title);
}

.free-test-item--epg {
    background: var(--free-test-item-epg-bg);
    border-color: var(--free-test-item-epg-border);
}
.free-test-item--epg .material-symbols-outlined,
.free-test-item--epg .free-test-item-title {
    color: var(--free-test-item-epg-title);
}

.free-test-links {
    margin-top: 10px;
}

.free-test-link--channels,
.free-test-link--channels:link,
.free-test-link--channels:visited,
.free-test-link--channels:hover,
.free-test-link--channels:focus,
.free-test-link--channels:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--free-test-link-bg);
    border: 1px solid var(--free-test-link-border);
    color: var(--link-color);
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease, color 0.18s ease;
    box-sizing: border-box;
}

.free-test-link--channels:hover,
.free-test-link--channels:focus {
    background: #e6f2ff;
    border-color: #c9def3;
    color: var(--link-hover);
    box-shadow: 0 6px 14px rgba(22, 138, 205, 0.10);
    transform: translateY(-1px);
}

.free-test-link--channels:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

html.theme-dark .free-test-link--channels:hover,
html.theme-dark .free-test-link--channels:focus {
    background: #263543;
    border-color: #3d5163;
}

.free-test-link-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.free-test-submit-wrap {
    margin-top: 12px;
}

.free-test-form {
    margin: 0;
}

.free-test-links-list {
    display: grid;
    gap: 10px;
}

.free-test-article-link,
.free-test-article-link:link,
.free-test-article-link:visited,
.free-test-article-link:hover,
.free-test-article-link:focus,
.free-test-article-link:active {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--free-test-link-bg);
    border: 1px solid var(--free-test-link-border);
    color: var(--text-main);
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease, color 0.18s ease;
    box-sizing: border-box;
}

.free-test-article-link .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    color: var(--free-test-icon);
}

.free-test-article-link:hover,
.free-test-article-link:focus {
    border-color: #c9def3;
    background: #eaf3fb;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(22, 138, 205, 0.10);
}

.free-test-article-link:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

html.theme-dark .free-test-article-link:hover,
html.theme-dark .free-test-article-link:focus {
    background: #263543;
    border-color: #3d5163;
}

.free-test-btn,
.free-test-btn:link,
.free-test-btn:visited,
.free-test-btn:hover,
.free-test-btn:focus,
.free-test-btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease, color 0.18s ease;
}

.free-test-btn:hover,
.free-test-btn:focus {
    transform: translateY(-1px);
}

.free-test-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.10);
}

.free-test-btn-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.free-test-btn--primary {
    background: var(--free-test-btn-primary-bg);
    border-color: var(--free-test-btn-primary-border);
    color: #fff !important;
    box-shadow: var(--free-test-btn-primary-shadow);
}

.free-test-btn--primary:hover,
.free-test-btn--primary:focus {
    background: var(--free-test-btn-primary-hover-bg);
    border-color: var(--free-test-btn-primary-hover-border);
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(42, 162, 248, 0.34);
}

.free-test-btn--full {
    width: 100%;
}

.free-test-btn--secondary {
    background: var(--free-test-btn-soft-bg);
    border-color: var(--free-test-btn-soft-border);
    color: var(--free-test-btn-soft-text) !important;
}

.free-test-btn--secondary:hover,
.free-test-btn--secondary:focus {
    background: var(--free-test-btn-soft-hover-bg);
    border-color: var(--free-test-btn-soft-hover-border);
    color: var(--free-test-btn-soft-text) !important;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
}

html.theme-dark .free-test-btn--secondary:hover,
html.theme-dark .free-test-btn--secondary:focus {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.free-test-btn--playlist,
.free-test-btn--playlist:link,
.free-test-btn--playlist:visited,
.free-test-btn--playlist:hover,
.free-test-btn--playlist:focus,
.free-test-btn--playlist:active {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    background: var(--free-test-playlist-bg);
    border-color: var(--free-test-playlist-border);
    color: var(--free-test-playlist-text) !important;
    box-shadow: var(--free-test-playlist-shadow);
}

.free-test-btn--playlist:hover,
.free-test-btn--playlist:focus {
    background: var(--free-test-playlist-hover-bg);
    border-color: var(--free-test-playlist-hover-border);
    color: var(--free-test-playlist-text) !important;
}

.free-test-packet {
    border: 1px solid var(--free-test-packet-border);
    border-radius: 14px;
    padding: 12px;
    background: var(--free-test-packet-bg);
}

.free-test-packet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.free-test-packet-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.free-test-packet-id {
    color: var(--text-soft);
    margin-right: 6px;
    display: inline-block;
}

.free-test-packet-name,
.free-test-packet-name:link,
.free-test-packet-name:visited,
.free-test-packet-name:hover,
.free-test-packet-name:focus,
.free-test-packet-name:active {
    color: var(--link-color);
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.free-test-packet-name:hover,
.free-test-packet-name:focus {
    color: var(--link-hover);
    text-decoration: underline;
}

.free-test-packet-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.free-test-packet-meta-item {
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--free-test-packet-meta-border);
    background: var(--free-test-packet-meta-bg);
}

.free-test-packet-meta-label {
    font-size: 11px;
    color: var(--free-test-meta-label);
    margin-bottom: 3px;
}

.free-test-packet-meta-value {
    font-size: 13px;
    color: var(--free-test-meta-value);
    line-height: 1.4;
}

/* free test modal */
.free-test-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(10, 20, 30, 0.62);
    padding: 20px;
}

.free-test-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: calc(100vh - 40px);
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    overflow: hidden;
}

.free-test-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    color: var(--text-main);
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
}

.free-test-modal-close:hover {
    background: rgba(0,0,0,0.14);
}

.free-test-modal-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

html.theme-dark .free-test-modal {
    background: rgba(0, 0, 0, 0.72);
}

html.theme-dark .free-test-modal-close {
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
}

html.theme-dark .free-test-modal-close:hover {
    background: rgba(255,255,255,0.16);
}

html.theme-dark .free-test-modal-frame {
    background: #1c242d;
}

@media (max-width: 900px) {
    .free-test-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .free-test-modal {
        padding: 8px;
    }

    .free-test-modal-dialog {
        max-width: none;
        width: 100%;
        height: calc(100vh - 16px);
        border-radius: 12px;
    }

    .free-test-modal-close {
        right: 8px;
        top: 8px;
    }
}

@media (max-width: 640px) {
    .free-test-card {
        padding: 12px;
        border-radius: 12px;
    }

    .free-test-title {
        font-size: 15px;
    }

    .free-test-item-title {
        font-size: 13px;
    }

    .free-test-item-text {
        font-size: 12px;
    }

    .free-test-packet-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .free-test-packet-action,
    .free-test-packet-action .free-test-btn {
        width: 100%;
    }

    .free-test-packet-meta {
        grid-template-columns: 1fr;
    }
}

/* iptv setup */
:root {
    --iptv-setup-card-bg: #ffffff;
    --iptv-setup-card-border: #d8e3ec;
    --iptv-setup-card-shadow: 0 4px 14px rgba(19, 35, 55, 0.06);

    --iptv-setup-head-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --iptv-setup-head-border: #c8dcf8;
    --iptv-setup-head-title: #10689d;
    --iptv-setup-head-text: #5c7285;

    --iptv-setup-input-bg: #fbfcfe;
    --iptv-setup-input-border: #d5dee7;
    --iptv-setup-input-focus-border: #7fc3e8;
    --iptv-setup-input-focus-shadow: 0 0 0 3px rgba(22, 138, 205, 0.10);
    --iptv-setup-icon: #8a98a6;

    --iptv-setup-btn-bg: #168acd;
    --iptv-setup-btn-border: #168acd;
    --iptv-setup-btn-hover: #0f79b7;
    --iptv-setup-btn-shadow: 0 2px 8px rgba(22, 138, 205, 0.18);
}

html.theme-dark {
    --iptv-setup-card-bg: #1c242d;
    --iptv-setup-card-border: #32414d;
    --iptv-setup-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    --iptv-setup-head-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --iptv-setup-head-border: #314d73;
    --iptv-setup-head-title: #93c5fd;
    --iptv-setup-head-text: #a9bdd0;

    --iptv-setup-input-bg: #202a33;
    --iptv-setup-input-border: #334351;
    --iptv-setup-input-focus-border: #4f88aa;
    --iptv-setup-input-focus-shadow: 0 0 0 3px rgba(100, 189, 246, 0.10);
    --iptv-setup-icon: #95a6b5;

    --iptv-setup-btn-bg: #168acd;
    --iptv-setup-btn-border: #168acd;
    --iptv-setup-btn-hover: #0f79b7;
    --iptv-setup-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.iptv-setup-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 0 16px 0;
}

.iptv-setup-card {
    background: var(--iptv-setup-card-bg);
    border: 1px solid var(--iptv-setup-card-border);
    border-radius: 18px;
    box-shadow: var(--iptv-setup-card-shadow);
    overflow: hidden;
}

.iptv-setup-head {
    padding: 14px 18px;
    background: var(--iptv-setup-head-bg);
    border-bottom: 1px solid var(--iptv-setup-head-border);
    text-align: center;
}

.iptv-setup-head h3 {
    margin: 0 0 6px 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--iptv-setup-head-title);
}

.iptv-setup-subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: var(--iptv-setup-head-text);
}

.iptv-setup-body {
    padding: 18px;
}

.iptv-setup-form {
    display: grid;
    gap: 16px;
}

.iptv-setup-field {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

.iptv-setup-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
}

.iptv-setup-select-wrap {
    position: relative;
    width: 100%;
}

.iptv-setup-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--iptv-setup-icon);
    pointer-events: none;
}

.iptv-setup-select {
    display: block;
    width: 100%;
    min-height: 46px;
    height: 46px;
    padding: 0 40px 0 46px;
    border: 1px solid var(--iptv-setup-input-border);
    border-radius: 12px;
    background: var(--iptv-setup-input-bg);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.iptv-setup-select:focus {
    border-color: var(--iptv-setup-input-focus-border);
    box-shadow: var(--iptv-setup-input-focus-shadow);
}

.iptv-setup-actions {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

.iptv-setup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--iptv-setup-btn-border);
    background: var(--iptv-setup-btn-bg);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: var(--iptv-setup-btn-shadow);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}

.iptv-setup-btn:hover,
.iptv-setup-btn:focus {
    background: var(--iptv-setup-btn-hover);
    border-color: var(--iptv-setup-btn-hover);
    box-shadow: 0 4px 12px rgba(22, 138, 205, 0.24);
    transform: translateY(-1px);
}

.iptv-setup-btn:active {
    transform: translateY(1px);
}

@media (max-width: 768px) {
    .iptv-setup-wrap {
        max-width: 100%;
        padding: 6px 0 12px 0;
    }

    .iptv-setup-card {
        border-radius: 16px;
    }

    .iptv-setup-head {
        padding: 12px 14px;
    }

    .iptv-setup-head h3 {
        font-size: 18px;
    }

    .iptv-setup-subtitle {
        font-size: 13px;
    }

    .iptv-setup-body {
        padding: 14px;
    }

    .iptv-setup-select,
    .iptv-setup-btn {
        font-size: 16px;
    }
}

/* table */
.records-filter-wrap {
    margin-bottom: 10px;
}

.records-table-wrap {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid #d8e3ec;
    border-radius: 14px;
    background: #ffffff;
}

.records-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.records-table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #17212b;
}

.records-table th,
.records-table td {
    padding: 0;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d8e3ec;
}

.records-table thead th {
    background: #f0f7ff;
    color: #17212b;
    font-weight: 700;
}

.records-table thead th + th {
    border-left: 1px solid rgba(16, 74, 122, 0.08);
}

.records-table tbody td + td {
    border-left: 1px solid rgba(16, 74, 122, 0.06);
}

.records-table thead th:first-child {
    border-top-left-radius: 14px;
}

.records-table thead th:last-child {
    border-top-right-radius: 14px;
}

.records-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 14px;
}

.records-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 14px;
}

.records-row-norm {
    background: #ffffff;
}

.records-row-alt {
    background: #f8fbfd;
}

.records-table tbody tr:hover td {
    background: #eaf4fc;
}

.records-cell {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #223240;
    overflow-wrap: break-word;
    word-break: normal;
}

.records-cell a,
.records-cell a:link,
.records-cell a:visited,
.records-cell a:hover,
.records-cell a:focus,
.records-cell a:active {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    letter-spacing: normal !important;
    text-decoration: underline;
    transform: none !important;
}

.records-table-head-text,
.records-sort-link,
.records-sort-link:link,
.records-sort-link:visited,
.records-sort-link:hover,
.records-sort-link:focus,
.records-sort-link:active {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #17212b !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    transform: none !important;
}

.records-sort-link:hover,
.records-sort-link:focus {
    color: #0f76b0 !important;
    text-decoration: underline !important;
}

.records-sort-label {
    line-height: 1.2;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.records-sort-icon {
    font-size: 11px;
    line-height: 1;
    opacity: 0.9;
}

.records-table tbody td:first-child,
.records-table thead th:first-child {
    width: 72px;
    min-width: 72px;
}

.records-table tbody td:first-child .records-cell,
.records-table thead th:first-child .records-table-head-text,
.records-table thead th:first-child .records-sort-link {
    white-space: nowrap;
    padding-left: 4px !important;
    padding-right: 4px !important;
    justify-content: center;
}

.records-table-action-col {
    width: 52px;
    min-width: 52px;
    text-align: center !important;
}

.records-table-action-cell {
    width: 52px;
    min-width: 52px;
    text-align: center;
    padding: 8px !important;
}

.records-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
    box-sizing: border-box;
}

.records-action-btn:hover,
.records-action-btn:focus {
    transform: translateY(-1px);
}

.records-action-btn:active {
    transform: translateY(1px);
}

.records-action-btn img {
    display: block;
    max-width: 16px;
    max-height: 16px;
    width: auto;
    height: auto;
}

.records-action-btn-edit {
    background: #eef7ff;
    border-color: #cfe2f3;
}

.records-action-btn-edit:hover,
.records-action-btn-edit:focus {
    background: #e2f0fc;
}

.records-action-btn-delete {
    background: #fff1f1;
    border-color: #f0d0d0;
}

.records-action-btn-delete:hover,
.records-action-btn-delete:focus {
    background: #fde5e5;
}

.records-action-btn-details {
    background: #eefcf3;
    border-color: #cfe8d8;
}

.records-action-btn-details:hover,
.records-action-btn-details:focus {
    background: #e2f5e8;
}

.records-empty {
    padding: 14px 16px;
    text-align: center;
    font-size: 13px;
    color: #667788;
    line-height: 1.5;
}

.records-pagination {
    margin-top: 12px;
}

@media (max-width: 768px) {
    .records-table-wrap {
        border-radius: 12px;
    }

    .records-table {
        min-width: 460px;
        font-size: 12px;
    }

    .records-table tbody td:first-child,
    .records-table thead th:first-child {
        width: 46px;
        min-width: 46px;
    }

    .records-table tbody td:first-child .records-cell,
    .records-table thead th:first-child .records-table-head-text,
    .records-table thead th:first-child .records-sort-link {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .records-table-head-text,
    .records-sort-link,
    .records-sort-link:link,
    .records-sort-link:visited,
    .records-sort-link:hover,
    .records-sort-link:focus,
    .records-sort-link:active {
        min-height: 36px;
        padding: 7px 8px;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .records-cell {
        padding: 7px 8px;
        font-size: 11px;
        line-height: 1.3;
    }

    .records-table-action-col,
    .records-table-action-cell {
        width: 36px;
        min-width: 36px;
    }

    .records-table-action-cell {
        padding: 4px !important;
    }

    .records-action-btn {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .records-action-btn img {
        max-width: 12px;
        max-height: 12px;
    }
}

@media (max-width: 480px) {
    .records-table-wrap {
        border-radius: 10px;
    }

    .records-table {
        min-width: 420px;
    }

    .records-table tbody td:first-child,
    .records-table thead th:first-child {
        width: 38px;
        min-width: 38px;
    }

    .records-table tbody td:first-child .records-cell,
    .records-table thead th:first-child .records-table-head-text,
    .records-table thead th:first-child .records-sort-link {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .records-table-head-text,
    .records-sort-link,
    .records-sort-link:link,
    .records-sort-link:visited,
    .records-sort-link:hover,
    .records-sort-link:focus,
    .records-sort-link:active {
        min-height: 32px;
        padding: 6px 7px;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .records-cell {
        padding: 6px 7px;
        font-size: 10px;
        line-height: 1.25;
    }

    .records-table-action-col,
    .records-table-action-cell {
        width: 32px;
        min-width: 32px;
    }

    .records-action-btn {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

    .records-action-btn img {
        max-width: 11px;
        max-height: 11px;
    }
}

/* server page */
:root {
    --server-note-bg: #eefaf1;
    --server-note-border: #cfe8d6;
    --server-note-text: #51606d;

    --server-panel-bg: #ffffff;
    --server-panel-border: #d8e3ec;
    --server-panel-shadow: 0 4px 14px rgba(19, 35, 55, 0.06);

    --server-panel-head-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --server-panel-head-border: #c8dcf8;
    --server-panel-head-title: #10689d;

    --server-select-bg: #ffffff;
    --server-select-border: #d5dee7;
    --server-select-focus-border: #7fc3e8;
    --server-select-focus-shadow: 0 0 0 3px rgba(22, 138, 205, 0.10);
    --server-select-icon: #6f8aa0;

    --server-save-bg: #89c79a;
    --server-save-hover: #76b687;

    --server-load-item-bg: #fcfeff;
    --server-load-item-border: #d8e3ec;
    --server-load-track-bg: #edf3f7;
    --server-load-track-border: #dbe5ee;

    --server-load-low-bg: #edf9ed;
    --server-load-low-border: #cfe5cf;
    --server-load-low-text: #3b8b4e;
    --server-load-low-fill: linear-gradient(90deg, #7fcf92 0%, #63bd79 100%);

    --server-load-medium-bg: #f3ecff;
    --server-load-medium-border: #dfd0ff;
    --server-load-medium-text: #7a56c5;
    --server-load-medium-fill: linear-gradient(90deg, #b083ef 0%, #8f61d6 100%);

    --server-load-warm-bg: #fff6e8;
    --server-load-warm-border: #f1dfb5;
    --server-load-warm-text: #c8841a;
    --server-load-warm-fill: linear-gradient(90deg, #ffbf62 0%, #f5a333 100%);

    --server-load-high-bg: #fff0ea;
    --server-load-high-border: #f3d1c4;
    --server-load-high-text: #d86a31;
    --server-load-high-fill: linear-gradient(90deg, #ff9b71 0%, #f07a40 100%);

    --server-load-critical-bg: #fff0f0;
    --server-load-critical-border: #efcaca;
    --server-load-critical-text: #cf4b4b;
    --server-load-critical-fill: linear-gradient(90deg, #f56d6d 0%, #df3f3f 100%);
}

html.theme-dark {
    --server-note-bg: #1f3024;
    --server-note-border: #35543e;
    --server-note-text: #b4c3ce;

    --server-panel-bg: #1c242d;
    --server-panel-border: #32414d;
    --server-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    --server-panel-head-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --server-panel-head-border: #314d73;
    --server-panel-head-title: #93c5fd;

    --server-select-bg: #202a33;
    --server-select-border: #334351;
    --server-select-focus-border: #4f88aa;
    --server-select-focus-shadow: 0 0 0 3px rgba(100, 189, 246, 0.10);
    --server-select-icon: #9ab7cc;

    --server-save-bg: #89c79a;
    --server-save-hover: #76b687;

    --server-load-item-bg: #1b232c;
    --server-load-item-border: #32414d;
    --server-load-track-bg: #202a33;
    --server-load-track-border: #334351;

    --server-load-low-bg: #223326;
    --server-load-low-border: #36563c;
    --server-load-low-text: #a7e0b2;
    --server-load-low-fill: linear-gradient(90deg, #86d79c 0%, #68c67f 100%);

    --server-load-medium-bg: #2d2740;
    --server-load-medium-border: #514772;
    --server-load-medium-text: #c4b5fd;
    --server-load-medium-fill: linear-gradient(90deg, #b28cec 0%, #9466d8 100%);

    --server-load-warm-bg: #3a3120;
    --server-load-warm-border: #6a5730;
    --server-load-warm-text: #f6dfa3;
    --server-load-warm-fill: linear-gradient(90deg, #ffc46a 0%, #f2a43d 100%);

    --server-load-high-bg: #3a2a22;
    --server-load-high-border: #714f43;
    --server-load-high-text: #ffbe9b;
    --server-load-high-fill: linear-gradient(90deg, #ff9c76 0%, #f07b45 100%);

    --server-load-critical-bg: #3a2323;
    --server-load-critical-border: #6f3c3c;
    --server-load-critical-text: #ffb3b3;
    --server-load-critical-fill: linear-gradient(90deg, #f57272 0%, #e14a4a 100%);
}

.server-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 16px 0;
}

.server-note-card {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px 14px;
    background: var(--server-note-bg);
    border: 1px solid var(--server-note-border);
    border-radius: 16px;
}

.server-note-text-center {
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--server-note-text);
}

.server-note-link,
.server-note-link:link,
.server-note-link:visited,
.server-note-link:hover,
.server-note-link:focus,
.server-note-link:active {
    display: inline-block;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    color: var(--link-color) !important;
    text-decoration: underline !important;
    transform: none !important;
}

.server-panel,
.server-load-panel {
    background: var(--server-panel-bg);
    border: 1px solid var(--server-panel-border);
    border-radius: 16px;
    box-shadow: var(--server-panel-shadow);
    overflow: hidden;
    margin-bottom: 14px;
}

.server-panel-head,
.server-load-panel-head {
    padding: 12px 14px;
    background: var(--server-panel-head-bg);
    border-bottom: 1px solid var(--server-panel-head-border);
}

.server-panel-head h3,
.server-load-panel-head h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--server-panel-head-title);
}

.server-panel-body,
.server-load-panel-body {
    padding: 14px;
}

.server-form {
    display: grid;
    gap: 14px;
}

.server-form-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: center;
}

.server-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.server-form-field {
    min-width: 0;
}

.server-select-wrap {
    position: relative;
    width: 100%;
}

.server-select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.server-icon-bold {
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900;
    color: var(--server-select-icon);
    opacity: 0.95;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

.server-select {
    display: block;
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 42px 0 46px;
    border: 1px solid var(--server-select-border);
    border-radius: 12px;
    background: var(--server-select-bg);
    color: var(--text-main) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
    z-index: 1;
}

.server-select:hover {
    border-color: var(--server-select-focus-border);
    box-shadow: 0 4px 10px rgba(22, 138, 205, 0.08);
}

.server-select:focus {
    border-color: var(--server-select-focus-border);
    box-shadow: var(--server-select-focus-shadow);
    background: var(--server-select-bg);
    color: var(--text-main) !important;
}

.server-select option {
    color: #17212b;
    background: #ffffff;
    font-weight: 500;
}

html.theme-dark .server-select option {
    color: #e7edf3;
    background: #1c242d;
}

.server-form-actions {
    display: flex;
    justify-content: center;
}

.server-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    min-width: 180px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--server-save-bg);
    background: var(--server-save-bg);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
    box-sizing: border-box;
}

.server-save-btn:hover,
.server-save-btn:focus {
    background: var(--server-save-hover);
    border-color: var(--server-save-hover);
    transform: translateY(-1px);
}

.server-save-btn:active {
    transform: translateY(1px);
}

.server-load-list {
    display: grid;
    gap: 10px;
}

.server-load-item {
    background: var(--server-load-item-bg);
    border: 1px solid var(--server-load-item-border);
    border-radius: 14px;
    padding: 12px;
}

.server-load-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.server-load-item-name-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.server-load-item-server-label {
    font-size: 11px;
    line-height: 1.3;
    color: var(--server-note-text);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    opacity: 0.9;
}

.server-load-item-name {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.server-load-item:nth-child(6n+1) .server-load-item-name {
    background: #eef7ff !important;
    border-color: #d7e9f8 !important;
    color: #2f79b8 !important;
}

.server-load-item:nth-child(6n+2) .server-load-item-name {
    background: #edf9ed !important;
    border-color: #d8ecd8 !important;
    color: #3b8b4e !important;
}

.server-load-item:nth-child(6n+3) .server-load-item-name {
    background: #f3ecff !important;
    border-color: #e1d5fb !important;
    color: #7a56c5 !important;
}

.server-load-item:nth-child(6n+4) .server-load-item-name {
    background: #fff6e8 !important;
    border-color: #f3e2bf !important;
    color: #c8841a !important;
}

.server-load-item:nth-child(6n+5) .server-load-item-name {
    background: #fff0f6 !important;
    border-color: #f3d5e3 !important;
    color: #c95b8f !important;
}

.server-load-item:nth-child(6n) .server-load-item-name {
    background: #ecfbff !important;
    border-color: #d2edf4 !important;
    color: #1f8ca4 !important;
}

html.theme-dark .server-load-item:nth-child(6n+1) .server-load-item-name {
    background: #22364b !important;
    border-color: #35536f !important;
    color: #9ed0ff !important;
}

html.theme-dark .server-load-item:nth-child(6n+2) .server-load-item-name {
    background: #223326 !important;
    border-color: #36563c !important;
    color: #a7e0b2 !important;
}

html.theme-dark .server-load-item:nth-child(6n+3) .server-load-item-name {
    background: #2d2740 !important;
    border-color: #514772 !important;
    color: #c4b5fd !important;
}

html.theme-dark .server-load-item:nth-child(6n+4) .server-load-item-name {
    background: #3a3120 !important;
    border-color: #6a5730 !important;
    color: #f6dfa3 !important;
}

html.theme-dark .server-load-item:nth-child(6n+5) .server-load-item-name {
    background: #3a2731 !important;
    border-color: #6a4659 !important;
    color: #f2b6d1 !important;
}

html.theme-dark .server-load-item:nth-child(6n) .server-load-item-name {
    background: #20353b !important;
    border-color: #3b5a63 !important;
    color: #9fe6f2 !important;
}

.server-load-item-percent {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    box-sizing: border-box;
}

.server-load-item-percent.is-low {
    background: var(--server-load-low-bg);
    border: 1px solid var(--server-load-low-border);
    color: var(--server-load-low-text);
}

.server-load-item-percent.is-medium {
    background: var(--server-load-medium-bg);
    border: 1px solid var(--server-load-medium-border);
    color: var(--server-load-medium-text);
}

.server-load-item-percent.is-warm {
    background: var(--server-load-warm-bg);
    border: 1px solid var(--server-load-warm-border);
    color: var(--server-load-warm-text);
}

.server-load-item-percent.is-high {
    background: var(--server-load-high-bg);
    border: 1px solid var(--server-load-high-border);
    color: var(--server-load-high-text);
}

.server-load-item-percent.is-critical {
    background: var(--server-load-critical-bg);
    border: 1px solid var(--server-load-critical-border);
    color: var(--server-load-critical-text);
}

.server-load-bar {
    width: 100%;
}

.server-load-bar-track {
    width: 100%;
    height: 16px;
    background: var(--server-load-track-bg);
    border: 1px solid var(--server-load-track-border);
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
}

.server-load-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.server-load-bar-fill.is-low {
    background: var(--server-load-low-fill);
}

.server-load-bar-fill.is-medium {
    background: var(--server-load-medium-fill);
}

.server-load-bar-fill.is-warm {
    background: var(--server-load-warm-fill);
}

.server-load-bar-fill.is-high {
    background: var(--server-load-high-fill);
}

.server-load-bar-fill.is-critical {
    background: var(--server-load-critical-fill);
}

@media (max-width: 768px) {
    .server-page {
        max-width: 100%;
        padding: 4px 0 12px 0;
    }

    .server-note-card,
    .server-panel,
    .server-load-panel {
        border-radius: 14px;
    }

    .server-note-card {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .server-note-text-center,
    .server-note-link,
    .server-note-link:link,
    .server-note-link:visited,
    .server-note-link:hover,
    .server-note-link:focus,
    .server-note-link:active {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

    .server-panel-body,
    .server-load-panel-body {
        padding: 12px;
    }

    .server-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .server-form-label {
        font-size: 12px;
    }

    .server-save-btn {
        width: 100%;
        min-width: 0;
    }

    .server-load-item-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .server-note-card {
        padding: 12px 12px !important;
    }

    .server-note-text-center,
    .server-note-link,
    .server-note-link:link,
    .server-note-link:visited,
    .server-note-link:hover,
    .server-note-link:focus,
    .server-note-link:active {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .server-panel-head,
    .server-load-panel-head {
        padding: 10px 12px;
    }

    .server-panel-body,
    .server-load-panel-body {
        padding: 10px 12px;
    }

    .server-panel-head h3,
    .server-load-panel-head h3 {
        font-size: 15px;
    }

    .server-select,
    .server-save-btn {
        font-size: 16px;
    }

    .server-load-item {
        padding: 10px;
        border-radius: 12px;
    }

    .server-load-item-server-label {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .server-load-item-name {
        min-height: 26px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    .server-load-item-percent {
        min-width: 66px;
        min-height: 28px;
        font-size: 12px;
    }
}

/* setup iptv 
:root {
    --setup-card-bg: #ffffff;
    --setup-card-border: #d8e3ec;
    --setup-card-shadow: 0 4px 14px rgba(19, 35, 55, 0.06);

    --setup-head-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --setup-head-border: #c8dcf8;
    --setup-head-title: #10689d;

    --setup-soft-bg: #f8fbfe;
    --setup-soft-border: #dbe7f1;

    --setup-link-bg: #fbfcfe;
    --setup-link-border: #d5dee7;
    --setup-link-focus: #7fc3e8;

    --setup-copy-bg: linear-gradient(180deg, #eef4fb 0%, #dfeaf5 100%);
    --setup-copy-border: #c8d7e7;
    --setup-copy-color: #37526c;
    --setup-copy-hover-bg: linear-gradient(180deg, #f6fafe 0%, #e6eef8 100%);

    --setup-secondary-bg: #f3f7fb;
    --setup-secondary-border: #d7e2ec;
    --setup-secondary-color: #233545;
    --setup-secondary-hover-bg: #e5edf5;
    --setup-secondary-active-bg: #dbe6ef;

    --setup-note-bg: #fffaf0;
    --setup-note-border: #eed9a7;
    --setup-note-text: #6d5324;
    --setup-toast-bg: rgba(76, 175, 80, 0.92);

    --setup-light-head: linear-gradient(135deg, #edf9ed 0%, #dff2df 100%);
    --setup-light-head-border: #cfe5cf;
    --setup-light-head-text: #3b8b4e;

    --setup-standard-head: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --setup-standard-head-border: #c8dcf8;
    --setup-standard-head-text: #2f79b8;

    --setup-premium-head: linear-gradient(135deg, #f3ecff 0%, #e8dcff 100%);
    --setup-premium-head-border: #dccbff;
    --setup-premium-head-text: #7a56c5;

    --setup-sport-head: linear-gradient(135deg, #fff6e8 0%, #ffedd2 100%);
    --setup-sport-head-border: #f1dfb5;
    --setup-sport-head-text: #c8841a;
}

html.theme-dark {
    --setup-card-bg: #1c242d;
    --setup-card-border: #32414d;
    --setup-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    --setup-head-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --setup-head-border: #314d73;
    --setup-head-title: #93c5fd;

    --setup-soft-bg: #202a33;
    --setup-soft-border: #334351;

    --setup-link-bg: #202a33;
    --setup-link-border: #334351;
    --setup-link-focus: #4f88aa;

    --setup-copy-bg: linear-gradient(180deg, #2a3642 0%, #23303b 100%);
    --setup-copy-border: #3c4d5d;
    --setup-copy-color: #d6e3ef;
    --setup-copy-hover-bg: linear-gradient(180deg, #31404d 0%, #2a3742 100%);

    --setup-secondary-bg: #24303b;
    --setup-secondary-border: #334351;
    --setup-secondary-color: #e7edf3;
    --setup-secondary-hover-bg: #2c3945;
    --setup-secondary-active-bg: #22303a;

    --setup-note-bg: #2a2419;
    --setup-note-border: #5a4930;
    --setup-note-text: #dec89b;
    --setup-toast-bg: rgba(76, 175, 80, 0.95);

    --setup-light-head: linear-gradient(135deg, #223326 0%, #294030 100%);
    --setup-light-head-border: #36563c;
    --setup-light-head-text: #a7e0b2;

    --setup-standard-head: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --setup-standard-head-border: #314d73;
    --setup-standard-head-text: #9ed0ff;

    --setup-premium-head: linear-gradient(135deg, #2d2740 0%, #372f4d 100%);
    --setup-premium-head-border: #514772;
    --setup-premium-head-text: #c4b5fd;

    --setup-sport-head: linear-gradient(135deg, #3a3120 0%, #473b26 100%);
    --setup-sport-head-border: #6a5730;
    --setup-sport-head-text: #f6dfa3;
}

.setup-page {
    max-width: 980px;
    margin: 0 auto;
}

.setup-user-compact-card,
.setup-packet-card,
.setup-instructions-card {
    background: var(--setup-card-bg);
    border: 1px solid var(--setup-card-border);
    border-radius: 16px;
    box-shadow: var(--setup-card-shadow);
    margin-bottom: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

.setup-user-compact-card {
    width: 340px;
    max-width: 340px;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.setup-user-compact-form {
    margin: 0 !important;
    padding: 0 !important;
}

.setup-user-compact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: end;
    width: 340px;
    max-width: 340px;
    margin: 0 !important;
    padding: 0 !important;
}

.setup-user-compact-label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.setup-icon-input-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.setup-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.setup-select,
.setup-copy-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--setup-link-border);
    border-radius: 10px;
    background: var(--setup-link-bg);
    color: var(--text-main);
    box-sizing: border-box;
    outline: none;
}

.setup-select-with-icon,
.setup-copy-input-with-icon {
    padding-left: 40px !important;
}

.setup-select {
    padding-right: 32px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 13px !important;
    line-height: 18px !important;
}

.setup-copy-input {
    font-size: 14px !important;
    line-height: 18px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    letter-spacing: 0;
    color: #4b5e70;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-select:focus,
.setup-copy-input:focus {
    border-color: var(--setup-link-focus);
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.10);
}

.setup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap;
    text-align: center;
}

.setup-btn-secondary {
    background: var(--setup-secondary-bg);
    border-color: var(--setup-secondary-border);
    color: var(--setup-secondary-color) !important;
}

.setup-btn-secondary:hover {
    background: var(--setup-secondary-hover-bg);
}

.setup-btn-secondary:active {
    background: var(--setup-secondary-active-bg);
    transform: translateY(1px);
}

.setup-btn-compact {
    width: 72px;
    min-width: 72px;
}

.setup-packet-card-head {
    padding: 12px 14px;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.setup-packet-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.setup-packet-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: inherit !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-packet-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.20);
    color: inherit;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

.setup-packet-light {
    background: var(--setup-light-head);
    border-bottom-color: var(--setup-light-head-border);
    color: var(--setup-light-head-text);
}

.setup-packet-standard {
    background: var(--setup-standard-head);
    border-bottom-color: var(--setup-standard-head-border);
    color: var(--setup-standard-head-text);
}

.setup-packet-premium {
    background: var(--setup-premium-head);
    border-bottom-color: var(--setup-premium-head-border);
    color: var(--setup-premium-head-text);
}

.setup-packet-sport {
    background: var(--setup-sport-head);
    border-bottom-color: var(--setup-sport-head-border);
    color: var(--setup-sport-head-text);
}

.setup-packet-card-body,
.setup-instructions-body {
    padding: 14px;
    box-sizing: border-box;
}

.setup-top-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    align-items: stretch;
}

.setup-top-panel {
    min-height: 56px;
    border-radius: 12px;
    box-sizing: border-box;
}

.setup-top-panel-logo {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.setup-packet-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 56px;
    text-decoration: none !important;
}

.setup-packet-logo-image {
    display: block;
    width: 100%;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: none;
}

.setup-top-panel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 10px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.setup-top-panel-live {
    background: rgba(90, 169, 255, 0.13);
    border: 1px solid rgba(90, 169, 255, 0.24);
    color: #3f79bf !important;
    box-shadow: none;
}

.setup-top-panel-live:hover {
    background: rgba(90, 169, 255, 0.19);
    border-color: rgba(90, 169, 255, 0.34);
    color: #2f69ad !important;
    transform: translateY(-1px);
}

.setup-top-panel-download {
    background: rgba(99, 187, 120, 0.13);
    border: 1px solid rgba(99, 187, 120, 0.24);
    color: #3f8d53 !important;
    box-shadow: none;
}

.setup-top-panel-download:hover {
    background: rgba(99, 187, 120, 0.19);
    border-color: rgba(99, 187, 120, 0.34);
    color: #327d45 !important;
    transform: translateY(-1px);
}

.setup-top-panel-live:before,
.setup-top-panel-download:before {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 52%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.08) 45%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.08) 55%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-24deg);
    transition: left 0.9s ease;
}

.setup-top-panel-live:hover:before,
.setup-top-panel-download:hover:before {
    left: 150%;
}

.setup-top-panel-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.95;
}

.setup-top-panel-label {
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.setup-top-panel-text {
    font-size: 13px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    text-align: center;
}

html.theme-dark .setup-top-panel-live {
    background: rgba(93, 140, 230, 0.16);
    border-color: rgba(93, 140, 230, 0.28);
    color: #c7daf7 !important;
}

html.theme-dark .setup-top-panel-live:hover {
    background: rgba(93, 140, 230, 0.23);
    border-color: rgba(93, 140, 230, 0.40);
    color: #e0ecff !important;
}

html.theme-dark .setup-top-panel-download {
    background: rgba(87, 184, 109, 0.16);
    border-color: rgba(87, 184, 109, 0.28);
    color: #c3e8cb !important;
}

html.theme-dark .setup-top-panel-download:hover {
    background: rgba(87, 184, 109, 0.23);
    border-color: rgba(87, 184, 109, 0.40);
    color: #e2f7e7 !important;
}

.setup-link-list {
    display: grid;
    gap: 10px;
}

.setup-links-double {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.setup-link-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--setup-soft-border);
    background: var(--setup-soft-bg);
    border-radius: 14px;
    box-sizing: border-box;
}

.setup-link-row-half {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.setup-link-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    margin-bottom: 6px;
    line-height: 1.2 !important;
}

.setup-link-field {
    min-width: 0;
}

.setup-copy-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.setup-copy-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 42px;
    border: 1px solid var(--setup-copy-border);
    border-radius: 10px;
    background: var(--setup-copy-bg);
    color: var(--setup-copy-color);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.setup-copy-btn:hover {
    background: var(--setup-copy-hover-bg);
    transform: translateY(-1px);
}

.setup-copy-btn:active {
    transform: translateY(1px);
}

.setup-links-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.setup-useful-link {
    display: inline-flex;
    align-items: center !important;
    justify-content: flex-start;
    gap: 7px;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 10px;
    background: var(--setup-link-bg);
    border: 1px solid var(--setup-link-border);
    color: #5f7285 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.setup-useful-link i {
    color: #6f879b;
    transition: color 0.18s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.setup-useful-link span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 18px !important;
}

.setup-useful-link:hover {
    border-color: var(--setup-link-focus);
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.08);
    color: var(--text-main) !important;
}

.setup-useful-link:hover i {
    color: #168acd;
}

.setup-useful-link-static {
    cursor: default;
    color: #667b8f !important;
}

.setup-useful-link-static i {
    color: #7890a3 !important;
}

html.theme-dark .setup-copy-input,
html.theme-dark .setup-instructions-body .playlist-link {
    color: #c7d4df !important;
}

html.theme-dark .setup-useful-link {
    color: #bcc9d5 !important;
}

html.theme-dark .setup-useful-link i {
    color: #9fb4c5;
}

html.theme-dark .setup-useful-link-static {
    color: #b0bfcc !important;
}

html.theme-dark .setup-useful-link-static i {
    color: #93aabc !important;
}

.setup-note-box {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--setup-note-bg);
    border: 1px solid var(--setup-note-border);
    border-radius: 14px;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--setup-note-text);
    box-sizing: border-box;
}

.setup-instructions-head {
    padding: 12px 14px;
    background: var(--setup-head-bg);
    border-bottom: 1px solid var(--setup-head-border);
}

.setup-instructions-head h3 {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--setup-head-title);
}

.setup-instructions-body,
.setup-instructions-body *,
.setup-instructions-body p,
.setup-instructions-body li,
.setup-instructions-body div,
.setup-instructions-body span,
.setup-instructions-body td {
    color: var(--text-main);
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.setup-instructions-body p,
.setup-instructions-body li,
.setup-instructions-body div,
.setup-instructions-body span,
.setup-instructions-body td {
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}


.setup-instructions-body a,
.setup-instructions-body a:link,
.setup-instructions-body a:visited {
    display: inline;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    color: #2f79b8 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transform: none !important;
    transition: color 0.18s ease !important;
}

.setup-instructions-body a:hover,
.setup-instructions-body a:focus,
.setup-instructions-body a:active {
    display: inline;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    color: #168acd !important;
    text-decoration: underline !important;
    transform: none !important;
}

html.theme-dark .setup-instructions-body a,
html.theme-dark .setup-instructions-body a:link,
html.theme-dark .setup-instructions-body a:visited {
    color: #8fc8ee !important;
}

html.theme-dark .setup-instructions-body a:hover,
html.theme-dark .setup-instructions-body a:focus,
html.theme-dark .setup-instructions-body a:active {
    color: #b4dcf5 !important;
}

.setup-instructions-body img {
    max-width: 100%;
    height: auto;
}

.setup-instructions-body .accordion {
    background: var(--setup-soft-bg) !important;
    cursor: pointer;
    padding: 14px 18px;
    width: 100%;
    border: 1px solid var(--setup-soft-border) !important;
    outline: none;
    text-align: left;
    font-size: 14px !important;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    border-radius: 12px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none !important;
    color: var(--text-main) !important;
}

.setup-instructions-body .accordion:hover,
.setup-instructions-body .accordion.active {
    border-color: var(--setup-link-focus) !important;
    background: var(--setup-soft-bg) !important;
}

.setup-instructions-body .accordion i {
    font-size: 20px;
    margin-right: 10px;
}

.setup-instructions-body .accordion::after {
    content: '▸';
    font-size: 18px;
    color: #666;
    transition: transform 0.3s ease;
}

.setup-instructions-body .accordion.active::after {
    transform: rotate(90deg);
    color: #333;
}

.setup-instructions-body .panel {
    max-height: 0;
    overflow: hidden;
    background: var(--setup-card-bg) !important;
    transition: max-height 0.3s ease-out, box-shadow 0.3s;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--setup-soft-border) !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-bottom: 10px;
}

.setup-instructions-body .panel-content {
    padding: 14px !important;
}

.setup-instructions-body .playlist-link {
    display: block;
    width: 100%;
    font-size: 14px !important;
    line-height: 18px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    letter-spacing: 0;
    color: #4b5e70 !important;
    word-break: break-all;
    padding: 8px 10px;
    border: 1px solid var(--setup-link-border) !important;
    border-radius: 10px !important;
    background: var(--setup-link-bg) !important;
    margin-top: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    text-decoration: none !important;
}

.setup-instructions-body .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 8px 12px;
    min-height: 38px;
    font-size: 13px !important;
    cursor: pointer;
    background: var(--setup-copy-bg) !important;
    color: var(--setup-copy-color) !important;
    border: 1px solid var(--setup-copy-border) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45) !important;
    transform: none !important;
    text-decoration: none !important;
}

.setup-instructions-body .copy-btn:hover {
    background: var(--setup-copy-hover-bg) !important;
}

.setup-instructions-body .section-title {
    background: #168acd !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px !important;
    padding: 6px 12px;
    margin: 10px 0 0;
    border-radius: 8px 8px 0 0 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}

.setup-instructions-body .panel-content ol {
    margin: 0 0 30px 0;
    padding: 15px 20px;
    border: 1px solid var(--setup-soft-border);
    border-radius: 0 0 6px 6px;
    background: var(--setup-soft-bg);
    line-height: 1.8;
}

.setup-instructions-body .panel-content ol li {
    margin-bottom: 10px;
    padding-left: 5px;
    list-style-position: inside;
}

.setup-bottom-note {
    margin: 16px 0 12px 0;
    text-align: center;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--text-main);
}

.setup-bottom-actions {
    display: flex;
    justify-content: center;
}

#copied-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-20px);
    background: var(--setup-toast-bg);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#copied-msg.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.packet-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 20, 30, 0.55);
}

.packet-modal-content {
    position: relative;
    width: 92%;
    max-width: 980px;
    height: 85vh;
    margin: 4vh auto 0 auto;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

html.theme-dark .packet-modal-content {
    background: #1c242d;
}

.packet-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--text-main);
    font-size: 22px !important;
    cursor: pointer;
    z-index: 2;
}

.packet-modal-close:hover {
    background: rgba(0,0,0,0.12);
}

html.theme-dark .packet-modal-close {
    background: rgba(255,255,255,0.08);
}

html.theme-dark .packet-modal-close:hover {
    background: rgba(255,255,255,0.16);
}

#packetModalFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}

@media (max-width: 900px) {
    .setup-top-actions-grid,
    .setup-links-double {
        grid-template-columns: 1fr;
    }

    .setup-link-row {
        grid-template-columns: 1fr;
    }

    .setup-packet-logo-image {
        width: 100%;
        height: 58px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .setup-user-compact-card {
        width: 100%;
        max-width: 420px;
    }

    .setup-user-compact-grid {
        width: 100%;
        max-width: 420px;
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .setup-copy-wrap {
        flex-direction: column;
    }

    .setup-copy-btn {
        width: 100%;
        min-width: 0;
    }

    .setup-top-panel {
        min-height: 64px;
    }

    .setup-packet-logo-image {
        width: 100%;
        height: 54px;
        max-width: 100%;
    }

    .setup-copy-input,
    .setup-instructions-body .playlist-link {
        font-size: 13px !important;
        line-height: 16px !important;
    }

    .setup-links-inline {
        flex-direction: column;
        gap: 8px;
    }

    .setup-useful-link,
    .setup-useful-link-static {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .packet-modal-content {
        width: 96%;
        height: 90vh;
        margin-top: 2vh;
    }
}

@media (max-width: 480px) {
    .setup-user-compact-card {
        width: 100%;
        max-width: 100%;
    }

    .setup-user-compact-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: 8px;
    }

    .setup-btn-compact {
        width: 72px;
        min-width: 72px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px !important;
    }

    .setup-packet-card-body,
    .setup-instructions-body {
        padding: 12px;
    }

    .setup-packet-card-head,
    .setup-instructions-head {
        padding: 10px 12px;
    }

    .setup-select,
    .setup-copy-input,
    .setup-instructions-body .playlist-link {
        font-size: 12px !important;
        line-height: 15px !important;
    }

    .setup-packet-logo-image {
        width: 100%;
        height: 48px;
        max-width: 100%;
    }

    .setup-useful-link,
    .setup-useful-link-static {
        font-size: 11px !important;
    }
}
*/
/* setup iptv */
:root {
    --setup-card-bg: #ffffff;
    --setup-card-border: #d8e3ec;
    --setup-card-shadow: 0 4px 14px rgba(19, 35, 55, 0.06);

    --setup-head-bg: linear-gradient(135deg, #eef7ff 0%, #dcecff 100%);
    --setup-head-border: #c8dcf8;
    --setup-head-title: #10689d;

    --setup-soft-bg: #f8fbfe;
    --setup-soft-border: #dbe7f1;

    --setup-link-bg: #fbfcfe;
    --setup-link-border: #d5dee7;
    --setup-link-focus: #7fc3e8;

    --setup-copy-bg: linear-gradient(180deg, #eef4fb 0%, #dfeaf5 100%);
    --setup-copy-border: #c8d7e7;
    --setup-copy-color: #37526c;
    --setup-copy-hover-bg: linear-gradient(180deg, #f6fafe 0%, #e6eef8 100%);

    --setup-secondary-bg: #f3f7fb;
    --setup-secondary-border: #d7e2ec;
    --setup-secondary-color: #233545;
    --setup-secondary-hover-bg: #e5edf5;
    --setup-secondary-active-bg: #dbe6ef;

    --setup-note-bg: #fffaf0;
    --setup-note-border: #eed9a7;
    --setup-note-text: #6d5324;
    --setup-toast-bg: rgba(76, 175, 80, 0.92);
}

html.theme-dark {
    --setup-card-bg: #1c242d;
    --setup-card-border: #32414d;
    --setup-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    --setup-head-bg: linear-gradient(135deg, #1d2b3d 0%, #243548 100%);
    --setup-head-border: #314d73;
    --setup-head-title: #93c5fd;

    --setup-soft-bg: #202a33;
    --setup-soft-border: #334351;

    --setup-link-bg: #202a33;
    --setup-link-border: #334351;
    --setup-link-focus: #4f88aa;

    --setup-copy-bg: linear-gradient(180deg, #2a3642 0%, #23303b 100%);
    --setup-copy-border: #3c4d5d;
    --setup-copy-color: #d6e3ef;
    --setup-copy-hover-bg: linear-gradient(180deg, #31404d 0%, #2a3742 100%);

    --setup-secondary-bg: #24303b;
    --setup-secondary-border: #334351;
    --setup-secondary-color: #e7edf3;
    --setup-secondary-hover-bg: #2c3945;
    --setup-secondary-active-bg: #22303a;

    --setup-note-bg: #2a2419;
    --setup-note-border: #5a4930;
    --setup-note-text: #dec89b;
    --setup-toast-bg: rgba(76, 175, 80, 0.95);
}

.setup-page {
    max-width: 980px;
    margin: 0 auto;
}

.setup-user-compact-card,
.setup-packet-card,
.setup-instructions-card,
.setup-empty-card {
    background: var(--setup-card-bg);
    border: 1px solid var(--setup-card-border);
    border-radius: 16px;
    box-shadow: var(--setup-card-shadow);
    margin-bottom: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

.setup-user-compact-card {
    width: 340px;
    max-width: 340px;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.setup-user-compact-form {
    margin: 0 !important;
    padding: 0 !important;
}

.setup-user-compact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: end;
    width: 340px;
    max-width: 340px;
    margin: 0 !important;
    padding: 0 !important;
}

.setup-user-compact-label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.setup-icon-input-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.setup-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.setup-select,
.setup-copy-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--setup-link-border);
    border-radius: 10px;
    background: var(--setup-link-bg);
    color: var(--text-main);
    box-sizing: border-box;
    outline: none;
}

.setup-select-with-icon,
.setup-copy-input-with-icon {
    padding-left: 40px !important;
}

.setup-select {
    padding-right: 32px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 13px !important;
    line-height: 18px !important;
}

.setup-copy-input {
    font-size: 14px !important;
    line-height: 18px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    letter-spacing: 0;
    color: #4b5e70;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-select:focus,
.setup-copy-input:focus {
    border-color: var(--setup-link-focus);
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.10);
}

.setup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap;
    text-align: center;
}

.setup-btn-secondary {
    background: var(--setup-secondary-bg);
    border-color: var(--setup-secondary-border);
    color: var(--setup-secondary-color) !important;
}

.setup-btn-secondary:hover {
    background: var(--setup-secondary-hover-bg);
}

.setup-btn-secondary:active {
    background: var(--setup-secondary-active-bg);
    transform: translateY(1px);
}

.setup-btn-compact {
    width: 72px;
    min-width: 72px;
}

.setup-packet-card-head {
    padding: 12px 14px;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    background: var(--setup-head-bg);
    border-bottom-color: var(--setup-head-border);
    color: var(--setup-head-title);
}

.setup-packet-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.setup-packet-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: inherit !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setup-packet-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.20);
    color: inherit;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

.setup-packet-card-body,
.setup-instructions-body {
    padding: 14px;
    box-sizing: border-box;
}

/* верх */
.setup-top-combined {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}

.setup-top-combined-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}

.setup-top-combined-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.setup-top-combined-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
    width: 100%;
    align-items: stretch;
}

.setup-top-combined-actions .setup-top-panel {
    width: 100%;
    min-width: 0;
}

.setup-top-combined-stack .setup-top-combined-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-mini-logo {
    display: block;
    width: 150px;
    flex: 0 0 150px;
    max-width: 150px;
    text-decoration: none !important;
}

.setup-mini-logo img {
    display: block;
    width: 100%;
    height: 52px;
    object-fit: fill;
    border-radius: 12px;
}

.setup-top-panel {
    min-height: 52px;
    height: 52px;
    border-radius: 12px;
    box-sizing: border-box;
}

.setup-top-panel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 6px 10px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    box-sizing: border-box;
}

.setup-top-panel-live {
    background: rgba(90, 169, 255, 0.13);
    border: 1px solid rgba(90, 169, 255, 0.24);
    color: #3f79bf !important;
    box-shadow: none;
}

.setup-top-panel-live:hover {
    background: rgba(90, 169, 255, 0.19);
    border-color: rgba(90, 169, 255, 0.34);
    color: #2f69ad !important;
    transform: translateY(-1px);
}

.setup-top-panel-download {
    background: rgba(99, 187, 120, 0.13);
    border: 1px solid rgba(99, 187, 120, 0.24);
    color: #3f8d53 !important;
    box-shadow: none;
}

.setup-top-panel-download:hover {
    background: rgba(99, 187, 120, 0.19);
    border-color: rgba(99, 187, 120, 0.34);
    color: #327d45 !important;
    transform: translateY(-1px);
}

.setup-top-panel-live:before,
.setup-top-panel-download:before {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 52%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.08) 45%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.08) 55%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-24deg);
    transition: left 0.9s ease;
}

.setup-top-panel-live:hover:before,
.setup-top-panel-download:hover:before {
    left: 150%;
}

.setup-top-panel-icon {
    font-size: 14px;
    line-height: 1;
    opacity: 0.95;
}

.setup-top-panel-label {
    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    white-space: nowrap;
}

.setup-top-panel-text {
    font-size: 13px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    text-align: center;
    white-space: nowrap;
}

html.theme-dark .setup-top-panel-live {
    background: rgba(93, 140, 230, 0.16);
    border-color: rgba(93, 140, 230, 0.28);
    color: #c7daf7 !important;
}

html.theme-dark .setup-top-panel-live:hover {
    background: rgba(93, 140, 230, 0.23);
    border-color: rgba(93, 140, 230, 0.40);
    color: #e0ecff !important;
}

html.theme-dark .setup-top-panel-download {
    background: rgba(87, 184, 109, 0.16);
    border-color: rgba(87, 184, 109, 0.28);
    color: #c3e8cb !important;
}

html.theme-dark .setup-top-panel-download:hover {
    background: rgba(87, 184, 109, 0.23);
    border-color: rgba(87, 184, 109, 0.40);
    color: #e2f7e7 !important;
}

/* контент */
.setup-link-list {
    display: grid;
    gap: 10px;
}

.setup-links-double {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.setup-link-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--setup-soft-border);
    background: var(--setup-soft-bg);
    border-radius: 14px;
    box-sizing: border-box;
}

.setup-link-row-half {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.setup-link-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    margin-bottom: 6px;
    line-height: 1.2 !important;
}

.setup-link-field {
    min-width: 0;
}

.setup-copy-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.setup-copy-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 42px;
    border: 1px solid var(--setup-copy-border);
    border-radius: 10px;
    background: var(--setup-copy-bg);
    color: var(--setup-copy-color);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.setup-copy-btn:hover {
    background: var(--setup-copy-hover-bg);
    transform: translateY(-1px);
}

.setup-copy-btn:active {
    transform: translateY(1px);
}

.setup-links-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.setup-useful-link {
    display: inline-flex;
    align-items: center !important;
    justify-content: flex-start;
    gap: 7px;
    min-height: 36px !important;
    padding: 8px 11px !important;
    border-radius: 10px;
    background: var(--setup-link-bg);
    border: 1px solid var(--setup-link-border);
    color: #5f7285 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.setup-useful-link i {
    color: #6f879b;
    transition: color 0.18s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.setup-useful-link span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 18px !important;
}

.setup-useful-link:hover {
    border-color: var(--setup-link-focus);
    box-shadow: 0 0 0 3px rgba(22, 138, 205, 0.08);
    color: var(--text-main) !important;
}

.setup-useful-link:hover i {
    color: #168acd;
}

.setup-useful-link-static {
    cursor: default;
    color: #667b8f !important;
}

.setup-useful-link-static i {
    color: #7890a3 !important;
}

.setup-note-box {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--setup-note-bg);
    border: 1px solid var(--setup-note-border);
    border-radius: 14px;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--setup-note-text);
    box-sizing: border-box;
}

/* инструкции */
.setup-instructions-head {
    padding: 12px 14px;
    background: var(--setup-head-bg);
    border-bottom: 1px solid var(--setup-head-border);
}

.setup-instructions-head h3 {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--setup-head-title);
}

.setup-instructions-body,
.setup-instructions-body *,
.setup-instructions-body p,
.setup-instructions-body li,
.setup-instructions-body div,
.setup-instructions-body span,
.setup-instructions-body td {
    color: var(--text-main);
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.setup-instructions-body p,
.setup-instructions-body li,
.setup-instructions-body div,
.setup-instructions-body span,
.setup-instructions-body td {
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.setup-instructions-body a,
.setup-instructions-body a:link,
.setup-instructions-body a:visited {
    display: inline;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    color: #2f79b8 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transform: none !important;
    transition: color 0.18s ease !important;
}

.setup-instructions-body a:hover,
.setup-instructions-body a:focus,
.setup-instructions-body a:active {
    color: #168acd !important;
    text-decoration: underline !important;
    transform: none !important;
}

html.theme-dark .setup-instructions-body a,
html.theme-dark .setup-instructions-body a:link,
html.theme-dark .setup-instructions-body a:visited {
    color: #8fc8ee !important;
}

html.theme-dark .setup-instructions-body a:hover,
html.theme-dark .setup-instructions-body a:focus,
html.theme-dark .setup-instructions-body a:active {
    color: #b4dcf5 !important;
}

/* пусто */
.setup-empty-card-body {
    padding: 18px;
    text-align: center;
}

.setup-empty-title {
    margin-bottom: 8px;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--text-main);
}

.setup-empty-text {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: var(--text-soft);
}

.setup-empty-text a,
.setup-empty-text a:link,
.setup-empty-text a:visited {
    color: #2f79b8 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.setup-empty-text a:hover,
.setup-empty-text a:focus {
    color: #168acd !important;
}

.setup-empty-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.setup-bottom-note {
    margin: 16px 0 12px 0;
    text-align: center;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--text-main);
}

.setup-bottom-actions {
    display: flex;
    justify-content: center;
}

#copied-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-20px);
    background: var(--setup-toast-bg);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

#copied-msg.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* modal */
.packet-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 20, 30, 0.55);
}

.packet-modal-content {
    position: relative;
    width: 92%;
    max-width: 980px;
    height: 85vh;
    margin: 4vh auto 0 auto;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

html.theme-dark .packet-modal-content {
    background: #1c242d;
}

.packet-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: var(--text-main);
    font-size: 22px !important;
    cursor: pointer;
    z-index: 2;
}

.packet-modal-close:hover {
    background: rgba(0,0,0,0.12);
}

html.theme-dark .packet-modal-close {
    background: rgba(255,255,255,0.08);
}

html.theme-dark .packet-modal-close:hover {
    background: rgba(255,255,255,0.16);
}

#packetModalFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}

@media (max-width: 980px) {
    .setup-top-combined,
    .setup-top-combined-stack {
        grid-template-columns: 1fr;
    }

    .setup-top-combined-actions,
    .setup-top-combined-stack .setup-top-combined-actions {
        grid-template-columns: 1fr 1fr;
    }

    .setup-links-double {
        grid-template-columns: 1fr;
    }

    .setup-link-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .setup-user-compact-card {
        width: 100%;
        max-width: 420px;
    }

    .setup-user-compact-grid {
        width: 100%;
        max-width: 420px;
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .setup-copy-wrap {
        flex-direction: column;
    }

    .setup-copy-btn {
        width: 100%;
        min-width: 0;
    }

    .setup-top-combined,
    .setup-top-combined-stack {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .setup-top-combined-logos {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .setup-top-combined-logos .setup-mini-logo {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-top: -40px;
        position: relative;
    }

    .setup-top-combined-logos .setup-mini-logo:first-child {
        margin-top: 0;
    }

    .setup-mini-logo img {
        width: 100%;
        height: auto;
        min-height: 56px;
        object-fit: contain;
        border-radius: 12px;
        background: transparent;
        box-shadow: 0 8px 20px rgba(19, 35, 55, 0.14);
    }

    html.theme-dark .setup-mini-logo img {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    }

    .setup-top-combined-actions,
    .setup-top-combined-stack .setup-top-combined-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .setup-links-inline {
        flex-direction: column;
        gap: 8px;
    }

    .setup-useful-link,
    .setup-useful-link-static {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .packet-modal-content {
        width: 96%;
        height: 90vh;
        margin-top: 2vh;
    }
}

@media (max-width: 480px) {
    .setup-user-compact-card {
        width: 100%;
        max-width: 100%;
    }

    .setup-user-compact-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: 8px;
    }

    .setup-btn-compact {
        width: 72px;
        min-width: 72px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px !important;
    }

    .setup-packet-card-body,
    .setup-instructions-body {
        padding: 12px;
    }

    .setup-packet-card-head,
    .setup-instructions-head {
        padding: 10px 12px;
    }

    .setup-select,
    .setup-copy-input {
        font-size: 12px !important;
        line-height: 15px !important;
    }

    .setup-top-combined-logos .setup-mini-logo {
        margin-top: -40px;
    }

    .setup-top-combined-logos .setup-mini-logo:first-child {
        margin-top: 0;
    }

    .setup-mini-logo img {
        min-height: 52px;
    }

    .setup-useful-link,
    .setup-useful-link-static {
        font-size: 11px !important;
    }
}