/* ==========================================================================
   lteModern theme — visual refresh on top of the original LTE markup.
   Loaded after main.css (which @imports bootstrap/secondary/primary/small)
   so anything here overrides the original styling.
   ========================================================================== */

:root {
    /* Backgrounds */
    --bg:            #0E1116;
    --bg-elev:       #141923;
    --surface:       #1A1F2A;
    --surface-2:     #232938;
    --surface-3:     #2A3142;

    /* Borders / dividers */
    --border:        #2A3142;
    --border-soft:   #20263399;

    /* Brand */
    --primary:       #2540F0;
    --primary-600:   #1A33D8;
    --primary-700:   #1428B8;
    --primary-soft:  #2540F022;

    --accent:        #FFD400;
    --accent-600:    #FFC400;
    --accent-soft:   #FFD40022;

    /* Status */
    --success:       #22C55E;
    --success-600:   #16A34A;
    --danger:        #EF4444;
    --danger-600:    #DC2626;
    --warning:       #F59E0B;
    --info:          #38BDF8;

    /* Text */
    --text:          #E6E9EF;
    --text-muted:    #9AA3B2;
    --text-dim:      #6B7280;
    --text-on-accent:#0A0E15;

    /* Effects */
    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     14px;
    --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
    --shadow:        0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:     0 14px 38px rgba(0,0,0,.55);
    --ring:          0 0 0 3px rgba(37,64,240,.35);
    --ring-accent:   0 0 0 3px rgba(255,212,0,.35);

    --transition:    160ms cubic-bezier(.2,.7,.3,1);
}

/* Base ---------------------------------------------------------------------*/

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

body {
    background-image:
        radial-gradient(1100px 600px at 12% -10%, #1c2540 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 0%, #1a1530 0%, transparent 55%);
    background-repeat: no-repeat;
    /* background-attachment: fixed disabled — iOS Safari has rendering bugs
       around it and can interfere with touch event hit-testing. */
    -webkit-tap-highlight-color: rgba(255, 212, 0, .15);
}

/* Make sure interactive elements are tappable on mobile without 1st-tap hover lock */
a, button, .btn, .btn2, [data-toggle], [onclick], nav a, .menu_button {
    touch-action: manipulation;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: #6B82FF;
    transition: color var(--transition);
}
/* Apply hover styles only on devices that actually have hover.
   On touchscreens this prevents the iOS "first tap = hover, second = click"
   trap. */
@media (hover: hover) and (pointer: fine) {
    a:hover, a:focus {
        color: var(--accent);
        text-decoration: none;
    }
}
a:focus {
    outline: 0;
}

hr {
    border-color: var(--border);
}

::selection,
*::selection {
    background: var(--primary) !important;
    color: #fff !important;
}
::-moz-selection,
*::-moz-selection {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Custom scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}
*::-webkit-scrollbar          { width: 10px; height: 10px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: var(--surface-3); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #3A4358; }

/* Layout (custom shell from secondary.css) ---------------------------------*/

.header {
    background: linear-gradient(180deg, #141a26 0%, #0F141C 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.header .logo {
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.header .logo:hover {
    color: var(--accent);
}

.menu_button {
    color: var(--text-muted);
}

.wapper {
    background: transparent;
}

.left_block {
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 var(--border-soft);
}

.right_block {
    background: transparent;
}

nav#nav > li,
nav ul#nav > li {
    border-bottom: 1px solid var(--border-soft);
}

nav#nav > li > a,
nav ul#nav > li > a {
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}

nav#nav > li > a:hover,
nav ul#nav > li > a:hover,
nav#nav > li > a.open {
    background: var(--surface-2);
    color: var(--accent);
}

nav#nav .glyphicon,
nav ul#nav .glyphicon {
    color: var(--primary);
}

.collapsible ul {
    background: var(--bg-elev);
}

.breadcrumb_wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    box-shadow: var(--shadow-sm);
}

.breadcrumb_wrap .l-s-n,
.breadcrumb_wrap .l-s-n a {
    color: var(--text-muted);
}

.page {
    background: transparent;
}

/* User info card in left block */
.user_info {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.user_info .round {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}

/* Buttons ------------------------------------------------------------------*/

.btn,
.btn2 {
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}
.btn:focus,
.btn2:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: var(--ring) !important;
}
.btn:active,
.btn2:active {
    transform: translateY(1px);
}

.btn-default {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.btn-default:hover,
.btn-default:focus {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border-color: var(--surface-3) !important;
}

.btn-primary,
.btn2 {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn2:hover,
.btn2:focus {
    background: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-success:hover,
.btn-success:focus {
    background: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
}

.btn-danger {
    background: var(--danger) !important;
    color: #fff !important;
    border-color: var(--danger) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background: var(--danger-600) !important;
    border-color: var(--danger-600) !important;
}

.btn-warning {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent) !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
}

.btn-info {
    background: var(--info) !important;
    color: #0A1322 !important;
    border-color: var(--info) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    background: transparent !important;
    color: var(--text) !important;
    border-color: var(--surface-3) !important;
}
.btn-outline-primary:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--text) !important;
}

/* Accent button — yellow CTA */
.btn-accent {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent) !important;
    font-weight: 600;
}
.btn-accent:hover,
.btn-accent:focus {
    background: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
    box-shadow: var(--ring-accent) !important;
}

/* Forms --------------------------------------------------------------------*/

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background: var(--bg-elev) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-dim);
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--ring) !important;
    outline: 0;
}
.form-control[disabled],
input[disabled] {
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

label,
.control-label {
    color: var(--text);
    font-weight: 500;
}

/* Modals -------------------------------------------------------------------*/

.modal-backdrop.in {
    opacity: .65;
}
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.modal-header {
    border-bottom: 1px solid var(--border);
}
.modal-header .modal-title {
    color: var(--text);
    font-weight: 600;
}
.modal-header .close {
    color: var(--text-muted);
    text-shadow: none;
    opacity: .8;
}
.modal-header .close:hover {
    color: var(--text);
    opacity: 1;
}
.modal-footer {
    border-top: 1px solid var(--border);
}

/* Panels (BS3) -------------------------------------------------------------*/

.panel,
.panel-default {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.panel-heading {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    font-weight: 600;
}
.panel-body {
    color: var(--text);
}
.panel-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* Wells / cards-like containers */
.well {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

/* Tables -------------------------------------------------------------------*/

.table {
    color: var(--text);
    border-color: var(--border);
}
.table > thead > tr > th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--border-soft);
}
/* Striped: BS3 sets light bg at td level (`.table-striped > tbody > tr:nth-of-type(odd) > td`),
   so we have to override at td level too — row-level rules lose specificity. */
.table > tbody > tr > td,
.table > tbody > tr > th {
    background: transparent !important;
    color: var(--text);
}
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background: rgba(255,255,255,.025) !important;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: var(--surface-2) !important;
    color: var(--text);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--border) !important;
}

/* Modal-bordered table inside a .modal-content shouldn't inherit the host bg */
.modal-content .table > tbody > tr > td,
.modal-content .table > tbody > tr > th,
.modal-content .table > thead > tr > th {
    background: transparent !important;
    color: var(--text);
}
.modal-content .table-striped > tbody > tr:nth-of-type(odd) > td,
.modal-content .table-striped > tbody > tr:nth-of-type(odd) > th {
    background: rgba(255,255,255,.03) !important;
}

/* Alerts -------------------------------------------------------------------*/

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.alert-success {
    background: rgba(34,197,94,.10);
    border-color: rgba(34,197,94,.35);
    color: #BBF7D0;
}
.alert-danger {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.35);
    color: #FECACA;
}
.alert-warning {
    background: rgba(245,158,11,.10);
    border-color: rgba(245,158,11,.35);
    color: #FDE68A;
}
.alert-info {
    background: rgba(56,189,248,.10);
    border-color: rgba(56,189,248,.35);
    color: #BAE6FD;
}

/* Labels / badges ----------------------------------------------------------*/

.label,
.badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.label-default,
.badge {
    background: var(--surface-3);
    color: var(--text);
}
.label-primary  { background: var(--primary); color: #fff; }
.label-success  { background: var(--success); color: #042311; }
.label-danger   { background: var(--danger);  color: #fff; }
.label-warning  { background: var(--accent);  color: var(--text-on-accent); }
.label-info     { background: var(--info);    color: #061826; }

/* Pagination ---------------------------------------------------------------*/

.pagination > li > a,
.pagination > li > span {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.pagination > li > a:hover {
    background: var(--surface-2);
    border-color: var(--surface-3);
    color: var(--accent);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Dropdowns ----------------------------------------------------------------*/

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px;
}
.dropdown-menu > li > a {
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--surface-2);
    color: var(--accent);
}
.dropdown-menu .divider {
    background: var(--border);
}

/* Code / pre ---------------------------------------------------------------*/

code,
pre,
kbd {
    background: var(--bg-elev);
    color: #BAE6FD;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
pre {
    padding: 12px 14px;
}

/* Misc utilities & tweaks --------------------------------------------------*/

#token { display: none; }

#global_result .glyphicon {
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.privacy-policy {
    color: var(--text-muted) !important;
    font-size: 12px;
    display: block;
    margin: 6px 0 10px;
}

.mt-10 { margin-top: 10px; }
.w-100 { width: 100%; }

/* Glyphicon subtle accent */
.glyphicon { color: inherit; }

/* Notifications/toasts area */
#global_result .result_ok    { color: var(--success); }
#global_result .result_error { color: var(--danger); }

/* reCAPTCHA wrapper to avoid white seam in dark theme */
.g-recaptcha > div {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Images don't get a stark white edge */
img {
    border-radius: var(--radius-sm);
}
.logo img,
.no_avatar,
.user_info img {
    border-radius: 50%;
}

/* ==========================================================================
   Custom widget overrides — fight off the original light theme defaults
   that bleed through from primary.css / secondary.css.
   ========================================================================== */

/* The .block "card" container — defined in primary.css with white bg.
   Override with dark surface, brand-blue accent border. */
.block,
.pay_area .block {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--primary) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.block_head,
.pay_area .block_head {
    color: var(--text) !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.block_head a,
.block_head .c-555 {
    color: var(--text) !important;
}
.block_head a:hover {
    color: var(--accent) !important;
}
.block_head .glyphicon {
    color: var(--primary);
    margin-right: 6px;
}

/* Header logo block — beat the BS3 .logo blue background that ships
   from secondary.css. We want a clean text logo on our header gradient. */
.header .logo,
a.logo {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    font-size: 20px;
    width: auto !important;
    padding: 0 16px !important;
    line-height: 50px;
}
.header .logo:hover {
    color: var(--accent) !important;
}

/* User info card in left sidebar (avatar + balance + counters) */
.user_info {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text) !important;
    padding: 12px 14px;
    margin: 12px;
}
.user_info a,
.user_info span,
.user_info font {
    color: var(--text) !important;
}
.user_info a:hover {
    color: var(--accent) !important;
}
.user_info img {
    border: 2px solid var(--border);
}
.user_info #balance {
    color: var(--accent) !important;
    font-weight: 600;
}

/* Online users widget */
.online_users_info {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
.online_users_info span {
    color: var(--text-muted) !important;
}
.online_users_info a {
    color: var(--text) !important;
}
.online_users_info a:hover {
    color: var(--accent) !important;
}

/* Notifications list (bs-callout) — was light pastel, now dark with colored stripe */
.bs-callout {
    padding: 12px 16px !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--primary) !important;
    background: var(--bg-elev) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    margin-bottom: 10px;
}
.bs-callout h4 {
    color: var(--text) !important;
    font-weight: 600;
    margin: 0 0 6px;
}
.bs-callout p,
.bs-callout p:last-child {
    color: var(--text-muted);
}
.bs-callout-info {
    background: rgba(56,189,248,.08) !important;
    border-left-color: var(--info) !important;
    border-color: rgba(56,189,248,.25) !important;
}
.bs-callout-info h4 { color: var(--info) !important; }

.bs-callout-success {
    background: rgba(34,197,94,.08) !important;
    border-left-color: var(--success) !important;
    border-color: rgba(34,197,94,.25) !important;
}
.bs-callout-success h4 { color: var(--success) !important; }

.bs-callout-error {
    background: rgba(239,68,68,.08) !important;
    border-left-color: var(--danger) !important;
    border-color: rgba(239,68,68,.25) !important;
}
.bs-callout-error h4 { color: var(--danger) !important; }

/* BS3 contextual table row classes — pastel light backgrounds
   from bootstrap.css. Override with dark-tinted versions. */
.table > tbody > tr.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > thead > tr.success > th,
tr.success > td, td.success {
    background: rgba(34,197,94,.10) !important;
    color: #BBF7D0;
}
.table > tbody > tr.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > thead > tr.danger > th,
tr.danger > td, td.danger {
    background: rgba(239,68,68,.10) !important;
    color: #FECACA;
}
.table > tbody > tr.warning,
.table > tbody > tr.warning > td,
tr.warning > td, td.warning {
    background: rgba(245,158,11,.10) !important;
    color: #FDE68A;
}
.table > tbody > tr.info,
.table > tbody > tr.info > td,
tr.info > td, td.info {
    background: rgba(56,189,248,.10) !important;
    color: #BAE6FD;
}
.table > tbody > tr.active,
.table > tbody > tr.active > td,
tr.active > td, td.active {
    background: var(--surface-2) !important;
}

/* Profile page widgets */
.profile_top_line {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.profile_top_line h3 {
    color: var(--text) !important;
    font-weight: 700;
    margin: 0;
}
.profile_top_line span {
    color: var(--text-muted) !important;
}

.user_profile_info {
    background: transparent !important;
    color: var(--text) !important;
}
.user_profile_info a {
    color: #6B82FF !important;
}
.user_profile_info a:hover {
    color: var(--accent) !important;
}
.user_profile_info h3 {
    color: var(--text) !important;
}
.user_profile_info tbody tr td {
    color: var(--text) !important;
    border-color: var(--border-soft) !important;
}
.user_profile_info tbody tr .w30 {
    color: var(--text-muted) !important;
}
.user_profile_info tbody tr .w70 {
    color: var(--text) !important;
}
.user_profile_info .razdel {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: var(--radius-sm);
}

/* Navigation list inside profile (the actions list) */
.navigation2 li a {
    color: var(--text) !important;
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    transition: background var(--transition), color var(--transition);
}
.navigation2 li a:hover {
    background: var(--surface-2) !important;
    color: var(--accent) !important;
    cursor: pointer;
}
.navigation2 .m-icon {
    color: var(--primary);
}

/* Dialogs / messages list */
.dialogs_place {
    background: transparent !important;
    color: var(--text);
}
.companion {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    color: var(--text) !important;
    margin-bottom: 6px;
    padding: 8px 10px;
    transition: background var(--transition), border-color var(--transition);
}
.companion:hover {
    background: var(--surface-2) !important;
    border-color: var(--surface-3) !important;
    cursor: pointer;
}
.companion a {
    color: var(--text) !important;
}
.companion a:hover {
    color: var(--accent) !important;
}

/* Chat messages */
.chat_message {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 6px;
    color: var(--text) !important;
}
.chat_message .author {
    color: var(--accent) !important;
    font-weight: 600;
}
.chat_message .date {
    color: var(--text-muted) !important;
}
.chat_message hr {
    border-color: var(--border-soft) !important;
}

/* Disabled / readonly inputs (e.g., the "копировать" boxes) */
.disabled_input {
    background: var(--bg-elev) !important;
    color: var(--text) !important;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* Forum/topic answer styling */
.answer {
    border-top: 1px solid var(--border-soft) !important;
}
.answer .edited {
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
}

/* Tabs with topline (used in friends.tpl etc.) */
.tabs.tabs-style-topline nav ul {
    border-bottom: 1px solid var(--border);
}
.tabs.tabs-style-topline nav ul li a {
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent !important;
    transition: color var(--transition), border-color var(--transition);
}
.tabs.tabs-style-topline nav ul li.active a,
.tabs.tabs-style-topline nav ul li a:hover {
    color: var(--text) !important;
    border-bottom-color: var(--primary) !important;
    background: transparent !important;
}

/* Breadcrumb hover state */
.breadcrumb_wrap a {
    color: var(--text-muted);
}
.breadcrumb_wrap a:hover {
    color: var(--accent);
}

/* "Адмін Центр" link in top-right of breadcrumb wrap */
.breadcrumb_wrap .c-555,
a.c-555 {
    color: var(--text-muted) !important;
}
.breadcrumb_wrap .c-555:hover {
    color: var(--accent) !important;
}

/* Server widget (the screenshot card with map preview) */
#servers .block,
#servers > div {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Notifications line bar */
#notifications_line {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}
#notifications_line .glyphicon {
    color: var(--primary);
}
#notifications_line span[onclick] {
    color: var(--accent);
    cursor: pointer;
}

/* Ban list / store / generic block-content tables — make sure no light residue */
#bans, #tickets, #open_tickets, #close_tickets,
#banlist, #stats, .admins, #my_stores,
#search_ban_res_min, #operations, #muts, .baninfo {
    color: var(--text);
}
#bans p, #tickets p, #open_tickets p, #close_tickets p,
#banlist p, #stats p, .admins p, #my_stores p,
#search_ban_res_min p, #operations p, #muts p, .baninfo p {
    color: var(--text-muted);
}
#bans a, #tickets a, #banlist a, #my_stores a, .admins a {
    color: #6B82FF;
}
#bans a:hover, #tickets a:hover, #banlist a:hover,
#my_stores a:hover, .admins a:hover {
    color: var(--accent);
}

/* Avatar circles: a softer brand-tinted border instead of the original blue */
.small_us_av {
    border: 2px solid var(--surface-3) !important;
}

/* Profile page reCAPTCHA (light-themed widget) — give it a frame so it
   doesn't look like a stark white box. (Inner widget can't go dark
   because of Google's iframe.) */
.g-recaptcha {
    background: var(--bg-elev);
    padding: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: inline-block;
}

/* Stronger ambient body gradient — make the page less flat black */
body {
    background-image:
        radial-gradient(1300px 700px at 8% -10%, #1B2748 0%, transparent 60%),
        radial-gradient(1100px 600px at 110% 0%, #221830 0%, transparent 55%),
        radial-gradient(900px 700px at 50% 110%, #0F1424 0%, transparent 60%);
}

/* Forms inside .block have lighter visual weight — already styled but
   re-ensure: */
.block .form-control,
.block input[type="text"],
.block input[type="email"],
.block input[type="password"],
.block textarea,
.block select {
    background: var(--bg) !important;
}

/* "block.purse" layout cards in /purse — don't be white */
.block.purse > .col-md-3 > div {
    color: var(--text);
}
.block.purse .glyphicon {
    color: var(--accent);
}

/* ==========================================================================
   Catch-all: any cell, any context, must NOT use BS3 light defaults.
   Higher specificity & !important to beat inline styles too.
   ========================================================================== */

/* Force dark bg on every table cell in the app, regardless of nesting */
table.table tbody tr td,
table.table tbody tr th,
table.table thead tr th,
table.table tfoot tr td {
    background-color: transparent !important;
    color: var(--text);
    border-color: var(--border-soft) !important;
}
table.table thead tr th {
    background-color: var(--surface-2) !important;
    color: var(--text);
}

/* Striped — write at every level to beat BS3 */
table.table-striped tbody tr:nth-of-type(odd) td,
table.table-striped tbody tr:nth-of-type(odd) th {
    background-color: rgba(255,255,255,.025) !important;
}

/* Hover — keep subtle and dark, not white */
table.table-hover tbody tr:hover td,
table.table-hover tbody tr:hover th {
    background-color: var(--surface-2) !important;
    color: var(--text);
}

/* BS3 contextual classes at td-level (strong) */
table.table tbody tr.success td,
table.table tbody tr.success th,
table.table tbody tr td.success,
table.table tbody tr th.success,
.table > tbody > tr.success > td {
    background-color: rgba(34,197,94,.12) !important;
    color: #BBF7D0 !important;
}
table.table tbody tr.danger td,
table.table tbody tr.danger th,
table.table tbody tr td.danger,
table.table tbody tr th.danger,
.table > tbody > tr.danger > td {
    background-color: rgba(239,68,68,.12) !important;
    color: #FECACA !important;
}
table.table tbody tr.warning td,
table.table tbody tr.warning th,
table.table tbody tr td.warning,
table.table tbody tr th.warning {
    background-color: rgba(245,158,11,.12) !important;
    color: #FDE68A !important;
}
table.table tbody tr.info td,
table.table tbody tr.info th,
table.table tbody tr td.info,
table.table tbody tr th.info {
    background-color: rgba(56,189,248,.12) !important;
    color: #BAE6FD !important;
}
table.table tbody tr.active td,
table.table tbody tr.active th {
    background-color: var(--surface-2) !important;
}

/* Sometimes the contextual class is on the <tr> AND the row is striped — combine */
table.table-striped tbody tr.success:nth-of-type(odd) td,
table.table-striped tbody tr.success:nth-of-type(even) td {
    background-color: rgba(34,197,94,.14) !important;
}
table.table-striped tbody tr.danger:nth-of-type(odd) td,
table.table-striped tbody tr.danger:nth-of-type(even) td {
    background-color: rgba(239,68,68,.14) !important;
}

/* Disabled / readonly inputs — make text more legible than --text-muted */
.form-control[disabled],
.form-control[readonly],
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
    background: var(--surface) !important;
    color: #C7CCD6 !important;
    cursor: default;
    opacity: 1;
}

/* Bootstrap input-group-addon (label pieces) */
.input-group-addon {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* List groups (some menus / sidebars use them) */
.list-group {
    background: transparent;
}
.list-group-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
.list-group-item:hover {
    background: var(--surface-2) !important;
}
.list-group-item.active,
.list-group-item.active:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Popover / tooltip — generic dark */
.popover,
.tooltip-inner {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow);
}
.popover-title {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border);
}
.popover-content {
    color: var(--text);
}

/* Bootstrap thumbnail (e.g., profile avatar wrapper) — kill white bg */
.thumbnail,
.img-thumbnail {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px !important;
}

/* Service-edit / edit-user form rows — tables of <input disabled value="..."> + value */
.edit_user_form .form-control,
.edit_user_form input,
.edit_user_form select {
    background: var(--bg-elev) !important;
}

/* Generic "white card" emergency override — anything with style="background: #fff"
   inline can still bypass us; this catches a few more class names. */
.white,
.bg-white,
.bg-light {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Modal body table rows — extra defense */
.modal .table tbody tr td,
.modal .table thead tr th {
    background-color: transparent !important;
    color: var(--text) !important;
}
.modal .table thead tr th {
    background-color: var(--surface-2) !important;
}
.modal .table tbody tr:hover td {
    background-color: var(--surface-2) !important;
}

/* ==========================================================================
   Generic <table> safety net — some places use plain <table> without .table.
   ========================================================================== */

table {
    background-color: transparent !important;
    color: var(--text);
    border-color: var(--border-soft) !important;
}
table tbody tr td,
table tbody tr th {
    background-color: transparent !important;
    color: var(--text);
    border-color: var(--border-soft) !important;
}
table thead tr th,
table tfoot tr td {
    background-color: var(--surface-2) !important;
    color: var(--text);
    border-color: var(--border) !important;
}

/* Modal: any table inside, regardless of class */
.modal table,
.modal-content table,
.modal-body table {
    background: transparent !important;
}
.modal table tbody tr td,
.modal table tbody tr th,
.modal-content table tbody tr td,
.modal-content table tbody tr th,
.modal-body table tbody tr td,
.modal-body table tbody tr th {
    background: transparent !important;
    color: var(--text) !important;
}
.modal table thead tr th,
.modal-content table thead tr th,
.modal-body table thead tr th {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* News widget items — `.new` is sometimes used without `.block` (in
   `elements/new_new.tpl`) so .block override doesn't catch it. */
.new,
.new_new {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    color: var(--text) !important;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
}
.new h4,
.new p,
.new font,
.new b {
    color: var(--text) !important;
}
.new a {
    color: #6B82FF;
}
@media (hover: hover) and (pointer: fine) {
    .new a:hover {
        color: var(--accent);
    }
}
.new .author,
.new .date {
    color: var(--text-muted) !important;
}
.new .img-thumbnail,
.new img {
    background: var(--bg-elev) !important;
    border-color: var(--border) !important;
}

/* User-generated HTML inside articles, news bodies, forum posts, and
   comments often comes with inline styles (people paste from Excel /
   Word / older themes). We have to neutralize tables, divs, and spans
   in those contexts very aggressively. */
.new table,
.new table tbody,
.new table thead,
.new table tfoot,
.new table tr,
.new table td,
.new table th,
.new_new table,
.new_new table tbody,
.new_new table tr,
.new_new table td,
.new_new table th,
.block .answer table,
.block .answer table tr,
.block .answer table td,
.block .answer table th,
.forum_message table,
.forum_message table tr,
.forum_message table td,
.forum_message table th,
.chat_message table,
.chat_message table tr,
.chat_message table td,
.chat_message table th,
#text table,
#text table tr,
#text table td,
#new_text table,
#new_text table tr,
#new_text table td,
.text_content table,
.text_content table tr,
.text_content table td,
.text_content table th {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border-soft) !important;
}
.new table thead tr th,
.new_new table thead tr th,
#text table thead tr th,
.text_content table thead tr th,
.forum_message table thead tr th {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Generic catch for any user-html paragraph/span/div with inline white bg */
.new p,
.new span,
.new div,
.new font,
.new li,
.new_new p,
.new_new span,
.new_new div,
.forum_message p,
.forum_message span,
.forum_message div,
.chat_message p,
.chat_message span,
.chat_message div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Mobile-specific tweaks. Note: NO z-index on .left_block — when the
   offcanvas is closed it's display:none anyway, and a high z-index
   can overlay the right column and steal taps from links underneath. */
@media (max-width: 767px) {
    .menu_button {
        color: var(--text) !important;
        font-size: 22px;
        padding: 8px 12px;
    }
    body, html {
        -webkit-overflow-scrolling: touch;
    }
    /* Prevent over-aggressive transitions on mobile that can hide taps */
    nav#nav > li > a {
        transition: none;
    }
    /* Server widget: allow wrapping so long text doesn't blow out tap zones */
    .serv_mon .info {
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.55;
    }
}

/* Anchors without href but with onclick / data-toggle (used for modals,
   "click handlers as links") need explicit tap support on iOS — without
   cursor: pointer and touch-action, mobile Safari often won't register
   the tap. */
a[onclick]:not([href]),
a[data-toggle]:not([href]),
.c-p {
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 212, 0, .2);
}
a[onclick]:not([href]),
a[data-toggle]:not([href]) {
    pointer-events: auto !important;
    display: inline-block;
}

/* Server widget — links in the .info overlay need stacking context
   above the map image. But on mobile we drop the overlay entirely (see
   media query below) so .info doesn't cover the buttons that follow. */
.serv_mon .info a,
.serv_mon .info a[onclick],
.serv_mon .info a[data-toggle] {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
}

@media (min-width: 768px) {
    /* Desktop: keep the original overlay-on-image look, with proper
       stacking so links beat the image. */
    .serv_mon .info {
        position: relative;
        z-index: 2;
    }
    .serv_mon .info a {
        z-index: 3;
    }
}

@media (max-width: 767px) {
    /* Mobile: text moves out of the image overlay into its own block
       below the image. Avoids the .info dark area covering the
       Адміни/Бани/Заявки buttons that follow it in the DOM. */
    .serv_mon .info {
        margin-top: 0 !important;
        background: var(--surface-2) !important;
        color: var(--text) !important;
        text-shadow: none !important;
        padding: 10px 12px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.6;
        z-index: auto !important;
    }
    .serv_mon .info a,
    .serv_mon .info span,
    .serv_mon .info font {
        color: var(--text) !important;
    }
    /* Bigger tap target for small links inside server widget */
    .serv_mon .info a {
        padding: 2px 4px;
        margin: -2px -4px;
    }
    /* Make sure the button row ALWAYS sits in flow, no stacking trickery */
    .serv_mon .btn-group {
        position: relative;
        z-index: 1;
    }
}

/* News widget — embedded HTML content from the article body sometimes
   contains tables that bypass the .new selectors. The widget container
   is `#new_news`. Beat anything inside, hard. */
#new_news,
#new_news *,
.load_new_news,
.load_new_news * {
    background-color: transparent !important;
}
#new_news table,
#new_news table tr,
#new_news table td,
#new_news table th,
#new_news table tbody,
#new_news table thead,
.load_new_news table,
.load_new_news table tr,
.load_new_news table td,
.load_new_news table th {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--border-soft) !important;
}
#new_news table thead tr th,
.load_new_news table thead tr th {
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
}
/* The .new card itself — re-affirm dark with a high-specificity selector */
#new_news .new,
#new_news .new_new,
.load_new_news .new,
.load_new_news .new_new {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Events ribbon (#events .event) — light grey card from secondary.css.
   Override with dark surface, brand-blue accent, dark text. */
#events .event,
#events > .event {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    padding: 10px 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
#events .event .event-header {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--border) !important;
}
#events .event .event-header a,
#events .event .event-profile a,
#events .event .event-link a {
    color: var(--text) !important;
}
@media (hover: hover) and (pointer: fine) {
    #events .event .event-header a:hover,
    #events .event .event-profile a:hover,
    #events .event .event-link a:hover {
        color: var(--accent) !important;
    }
}
#events .event .event-profile a img {
    border-color: var(--surface-3) !important;
}
#events .event .event-date i.fa,
#events .event .event-link i.fa {
    color: var(--primary);
    opacity: .55;
}
#events .event .row > .col-md-4:nth-child(2) {
    border-left-color: var(--border-soft) !important;
    border-right-color: var(--border-soft) !important;
}
@media (max-width: 767px) {
    #events .event .row > .col-md-4:nth-child(2) {
        border-top-color: var(--border-soft) !important;
        border-bottom-color: var(--border-soft) !important;
    }
}

/* Online users widget — highlighted current user shouldn't be a white pill */
.online_users li,
.online_users_info {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
.online_users li.highlighted,
.online_users li.me,
.online_users li.active {
    background: var(--surface-2) !important;
    border-radius: var(--radius-sm);
}

/* TinyMCE editor iframe — we can't reach inside its document via CSS,
   but we can style the surrounding chrome (toolbar, container). */
.tox-tinymce,
.mce-tinymce,
.mce-container,
.mce-panel,
.tox-sidebar-wrap,
.tox .tox-edit-area,
.tox .tox-sidebar-wrap,
.tox .tox-toolbar-overlord,
.tox .tox-statusbar,
.tox-editor-container,
.tox-editor-header,
.tox-editor-dock-fadeout {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.tox-tinymce,
.mce-tinymce {
    border-radius: var(--radius-sm) !important;
}
.tox-toolbar,
.tox-toolbar__primary,
.tox-toolbar__overflow,
.tox .tox-toolbar-overlord > .tox-toolbar,
.tox .tox-toolbar-overlord > .tox-toolbar__primary,
.mce-toolbar,
.mce-btn-group {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
.tox-tbtn,
.mce-btn {
    background: transparent !important;
    color: var(--text) !important;
    border-color: transparent !important;
}
.tox-tbtn:hover,
.mce-btn:hover,
.tox-tbtn--enabled,
.tox-tbtn--enabled:hover {
    background: var(--surface-3) !important;
    color: var(--accent) !important;
}
.tox-tbtn svg,
.mce-ico,
.tox-icon svg {
    fill: var(--text) !important;
    color: var(--text) !important;
}
.tox-tbtn:hover svg,
.tox-tbtn--enabled svg {
    fill: var(--accent) !important;
}
.tox-statusbar,
.mce-statusbar,
.tox .tox-statusbar,
.tox .tox-statusbar__path,
.tox .tox-statusbar__wordcount,
.tox .tox-statusbar a {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* This is the critical bit: the area BEHIND the iframe (where the
   editing canvas lives). Without this, the iframe is short and the
   wrapper shows through with a white BG. */
.tox-edit-area,
.tox .tox-edit-area,
.tox-edit-area__iframe,
.mce-edit-area,
.mce-edit-area iframe {
    background: #141923 !important;
}

/* Some TinyMCE 5/6 builds wrap iframe in flex container — make sure
   it stretches to fill, no white seam. */
.tox-tinymce,
.tox .tox-edit-area {
    display: flex !important;
    flex-direction: column;
}
.tox-edit-area__iframe {
    flex: 1 1 auto !important;
    min-height: 250px;
}