/* ============================================================
   VIZIT — Dark Neon Theme v3
   Premium dark design with glassmorphism & smooth animations
   ============================================================ */

/* --- Google Fonts (loaded via head.php for performance) --- */

/* --- CSS Variables --- */
:root {
    --bg-body: #0a0e14;
    --bg-wrapper: #0f1923;
    --bg-block: #141e2b;
    --bg-block-hover: #1a2738;
    --bg-input: #1a2738;
    
    --neon-green: #00ff88;
    --neon-green-dim: #00cc6a;
    --neon-green-glow: rgba(0, 255, 136, 0.15);
    --neon-blue: #00b8ff;
    --neon-blue-dim: #0099dd;
    --neon-gold: #ffd700;
    --neon-vip: #ff6b9d;
    
    --text-primary: #e8edf2;
    --text-secondary: #8899aa;
    --text-muted: #8092a3;
    --text-accent: #00ff88;
    
    --border-color: #1e2d3d;
    --border-accent: #00ff88;
    --border-light: #2a3a4a;
    
    --shadow-neon: 0 0 20px rgba(0, 255, 136, 0.1);
    --shadow-box: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    --font-main: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    --col-width: 350px;
    --max-width: 1440px;

    /* Glassmorphism */
    --glass-bg: rgba(20, 30, 43, 0.85);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-blur: blur(12px);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg-body);
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg-body);
    color: var(--text-primary);
    font: 13px/1.6 var(--font-main);
    min-height: 100vh;
}

/* --- Override old styles --- */
.wrapper, .footer, .container, .header { width: auto; max-width: var(--max-width); margin: 0 auto; }
.wrapper { margin: 0 auto; padding: 0; }

/* Remove ALL old background images */
/* Forcefully strip ALL white/light backgrounds from old engine.css */
body, html, .wrapper, .container, .ctop, .cbtm,
.maincol, .maincont, #dle-content, #dle-content .wblock,
.leftcol, .rightcol,
.foot, .foot .dcont, .pagebtm,
.wblock, .bwblock, .bblock,
.story, .form, .formcont,
.nmain, .nshort, .nfull,
.still_cep, .still_right, .still_cep_zakaz2,
.maintags, .btags, .dpad,
.navi, .navi li, .navi li a,
.topnews, .topnews li,
.hmenu, .hmenu li, .hmenu li a,
.userstop, .userstop thead td,
.pm td.pm_head,
.unit-rating,
.editor textarea, .editor input[type="text"],
.ui-widget-header, .ui-state-default, .ui-widget-content,
.ui-state-hover, .ui-state-active, .ui-state-error,
#dropmenudiv, #searchsuggestions,
.hide, .day-current,
.progress,
.newshead, .newshead .dtitle,
.ccomment, .comment,
input, select, textarea, button,
.highslide, .highslide-container,
.highslide-controls,
.highslide-full-expand,
pre .tex, pre .tex .formula {
    background-image: none !important;
    background-color: transparent !important;
}

body, .wrapper, .container {
    background-color: #0a0e14 !important;
}

.foot {
    background-color: #0a0e14 !important;
}

.wblock, .bwblock, .bblock, .maintags, .story, .form, .line {
    background-color: #141e2b !important;
}

/* Override any remaining old CSS whites */
div[style*="background"], td[style*="background"], th[style*="background"],
tr[style*="background"] {
    /* Don't force override inline styles */
}


/* --- Links --- */
a {
    color: var(--neon-green);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: #fff;
    text-decoration: none;
}

/* Override old blue inflink links */
.inflink {
    color: var(--neon-green) !important;
    border-bottom: 1px dotted var(--neon-green-dim) !important;
}
.inflink:hover {
    color: #fff !important;
    border-bottom-color: #fff !important;
}

/* --- Wrapper --- */
.wrapper {
    background: var(--bg-wrapper);
    box-shadow: var(--shadow-box);
    position: relative;
    overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    background: linear-gradient(180deg, #080d12 0%, #0f1923 60%, #141e2b 100%);
    border-bottom: 1px solid rgba(0, 255, 136, 0.12);
    position: relative;
    padding: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.headline {
    height: auto !important;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.headline .dleft, .headline .dright {
    height: auto !important;
    background: none !important;
}

/* --- Logo --- */
.logotype {
    float: none !important;
    padding: 0 !important;
}
.logotype a {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.4), 0 0 50px rgba(0, 255, 136, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all var(--transition-normal);
    position: relative;
}
.logotype a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--neon-green), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}
.logotype a:hover {
    text-shadow: 0 0 35px rgba(0, 255, 136, 0.7), 0 0 70px rgba(0, 255, 136, 0.3);
    color: var(--neon-green);
}
.logotype a:hover::after {
    opacity: 1;
}
.logotype a img {
    background: none !important;
    height: 40px;
    width: auto;
}
.logo-icon {
    display: none;
}

/* --- RSS / Add link button --- */
.rss {
    float: none !important;
    padding: 0 !important;
}
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rss a img {
    background: none !important;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    height: 20px !important;
    width: 20px !important;
}
.rss a:hover img {
    opacity: 1;
}

/* --- Header Banner Box --- */
.bannerbox {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 15px 0 5px 0 !important;
    background: none !important;
    overflow: visible !important;
}
.bannerbg, .bannerleft, .bannerright, .hbanner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    overflow: visible !important;
}
.hbanner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

/* --- Banner Placeholder --- */
.banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 468px;
    height: 60px;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 12px;
    gap: 8px;
    transition: all var(--transition-normal);
}

/* For banners displayed inline (side by side) - responsive width */
.banner-placeholder-inline {
    width: 100% !important;
    min-width: 200px;
    max-width: 468px;
}

.banner-placeholder--100 {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto !important;
    flex-direction: column !important;
    font-size: 10px !important;
    gap: 4px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.banner-slot-468 {
    flex: 0 1 468px;
    width: 468px;
    height: 60px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}

.banner-slot-468 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.banner-slot-468 a {
    display: block;
    margin: 0 auto;
}
.banner-placeholder i {
    font-size: 18px;
    color: var(--neon-green-dim);
    opacity: 0.5;
}
.banner-placeholder:hover {
    border-color: var(--neon-green-dim);
    background: var(--bg-block-hover);
}
.banner-rent-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px;
    transition: all var(--transition-fast);
    text-decoration: none !important;
    z-index: 5;
}
.banner-rent-btn i {
    font-size: 12px;
    line-height: 1;
}
.banner-rent-btn:hover {
    background: var(--neon-green);
    color: #0a0e14 !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Tooltip для мини-корзины */
.banner-rent-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: #1a1a2e;
    color: #e0e0e0;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.banner-rent-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 6px;
    border: 4px solid transparent;
    border-top-color: #1a1a2e;
}
.banner-rent-btn:hover .banner-rent-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Когда в слоте есть баннер — кнопка видна всегда */
.banner-slot-468:has(.banner-rent-btn) .banner-rent-btn {
    opacity: 0.8;
}
.banner-slot-468:has(.banner-rent-btn):hover .banner-rent-btn {
    opacity: 1;
    width: 28px;
    height: 28px;
}

/* --- Admin-only Banner Slot Styling --- */
.admin-banner-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    background: var(--bg-block);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    transition: all var(--transition-normal);
}
.admin-banner-slot:hover {
    border-color: var(--neon-green);
    box-shadow: 0 0 12px var(--neon-green-glow);
}
.admin-banner-slot.empty {
    border-color: var(--border-color);
}
.admin-banner-slot .admin-badge {
    font-size: 10px;
    color: var(--neon-gold);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Toolbox (CEP chain) --- */
.toolbox {
    height: auto !important;
    background: var(--bg-block) !important;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-color);
}

.still_cep {
    width: auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
}
.still_cep a {
    width: auto !important;
    min-width: 160px;
    margin: 2px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px 12px !important;
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast);
    font-weight: 500;
}
.still_cep a:hover {
    background: var(--neon-green-dim) !important;
    color: #fff !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 10px var(--neon-green-glow);
}

/* --- Menu line --- */
.menuline {
    height: auto !important;
    background: rgba(10, 18, 28, 0.9) !important;
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* --- Main Menu --- */
.hmenu {
    padding: 0 !important;
    float: none !important;
}
.hmenu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}
.hmenu li {
    float: none !important;
    padding: 0 !important;
    background: none !important;
    height: auto !important;
}
.hmenu li a {
    display: block;
    padding: 13px 16px;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    background: none !important;
    height: auto !important;
    line-height: normal !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
}
.hmenu li a:hover {
    color: var(--neon-green) !important;
    border-bottom-color: var(--neon-green);
    background: rgba(0, 255, 136, 0.04);
}
.hmenu li a.active {
    color: var(--neon-green) !important;
    border-bottom-color: var(--neon-green);
}

/* --- Icon block (home, fav, sitemap) --- */
.iconblock {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}
.iconblock .dbg {
    background: none !important;
    height: auto !important;
}
.iconset {
    display: flex;
    gap: 6px;
    padding: 8px 0 !important;
    width: auto !important;
}
.iconset span {
    float: none !important;
    padding: 0 !important;
}
.tohome img, .tofav img, .sitemap img {
    background: none !important;
    display: block;
    width: 20px !important;
    height: 20px !important;
    opacity: 0.5;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}
.tohome img { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238899aa'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/%3E%3C/svg%3E"); }
.tofav img { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238899aa'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); }
.sitemap img { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238899aa'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E"); }
.tohome:hover img, .tofav:hover img, .sitemap:hover img {
    opacity: 1;
    filter: brightness(1.5);
}

/* ============================================================
   CONTAINER - Main 3-Column Layout
   ============================================================ */
.container {
    background: none !important;
}
.ctop {
    background: none !important;
}
.cbtm {
    background: none !important;
    width: auto !important;
    overflow: hidden !important;
    zoom: 1 !important;
}

/* --- Left Column --- */
.leftcol {
    float: left !important;
    width: var(--col-width) !important;
    padding: 20px 0 20px 20px !important;
}

/* Force override any old 202px width from style.css */
html body .leftcol { width: var(--col-width) !important; }
html body .rightcol { width: var(--col-width) !important; }

/* --- Right Column --- */
.rightcol {
    float: right !important;
    width: var(--col-width) !important;
    padding: 20px 20px 20px 0 !important;
}

/* --- Main Column --- */
.maincol {
    margin: 0 var(--col-width) 0 var(--col-width) !important;
    padding: 20px !important;
}
.maincont {
    width: 100% !important;
    float: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   WIDGET BLOCKS
   ============================================================ */
.wblock, .bwblock, .bblock {
    width: 100% !important;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #141e2b 0%, #111825 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    animation: fadeInUp 0.4s ease both;
}
.wblock:hover, .bwblock:hover, .bblock:hover {
    border-color: rgba(0, 255, 136, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 255, 136, 0.06);
    transform: translateY(-1px);
}

.wblock .dtop, .wblock .dbtm, .wblock .dbg,
.bwblock .dtop, .bwblock .dbtm, .bwblock .dbg,
.bblock .dtop, .bblock .dbtm, .bblock .dbg {
    background: none !important;
}

.wblock .dtitle, .bwblock .dtitle, .bblock .dtitle,
.wblock .wblock-title, .bwblock .wblock-title {
    height: auto !important;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.05) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.wblock .dtitle img, .bwblock .dtitle img, .bblock .dtitle img {
    background: none !important;
    float: none !important;
    margin: 0 !important;
    height: 16px !important;
    width: 16px !important;
}
.wblock .dtitle span, .bwblock .dtitle span, .bblock .dtitle span,
.wblock .wblock-title span, .bwblock .wblock-title span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.wblock .dcont, .bwblock .dcont, .bblock .dcont {
    padding: 12px 14px !important;
}

/* --- Navigation List --- */
.navi .dcont {
    padding: 4px 0 !important;
}
.navi li {
    background: none !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.navi li:last-child {
    border-bottom: none;
}
.navi li a {
    background: none !important;
    margin: 0 !important;
    padding: 8px 14px 8px 24px !important;
    display: block;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px;
    transition: all var(--transition-fast);
    position: relative;
}
.navi li a::before {
    content: "→";
    position: absolute;
    left: 8px;
    color: var(--neon-green-dim);
    font-size: 11px;
    opacity: 0.6;
    transition: all var(--transition-fast);
}
.navi li a:hover {
    margin: 0 !important;
    padding-left: 28px !important;
    color: var(--neon-green) !important;
    background: rgba(0, 255, 136, 0.05);
}
.navi li a:hover::before {
    opacity: 1;
    color: var(--neon-green);
    left: 10px;
}

/* --- Login Form --- */
.loginbox {
    float: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
.loginlinks {
    float: none !important;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.loginlinks a {
    background: none !important;
    padding: 0 8px !important;
    font-size: 13px;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
}
.loginlinks a:last-child {
    border-right: none;
}
.loginlinks a:hover {
    color: var(--neon-green);
}

.userbox {
    float: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
.userlinks {
    float: none !important;
    padding: 8px 0;
}
.userlinks a {
    background: none !important;
    padding: 0 8px !important;
    font-size: 13px;
    color: var(--text-secondary);
}

.loginform {
    float: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.loginform .login, .loginform .pass {
    float: none !important;
    background: none !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
}
.loginform .login span, .loginform .pass span {
    background: none !important;
    display: block;
    margin: 0 !important;
    float: none !important;
    height: auto !important;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 3px !important;
}
.loginform .login input, .loginform .pass input {
    background: var(--bg-input) !important;
    width: 100% !important;
    padding: 8px 12px !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px;
    transition: all var(--transition-fast);
}
.loginform .login input:focus, .loginform .pass input:focus {
    border-color: var(--neon-green);
    outline: none;
    box-shadow: 0 0 8px var(--neon-green-glow);
}

.lbtn {
    padding: 4px 0 0 0 !important;
}
.lbtn input {
    background: var(--neon-green) !important;
    height: auto !important;
    width: 100% !important;
    padding: 8px 16px !important;
    color: #0a0e14 !important;
    font-weight: 700 !important;
    font-size: 13px;
    border: none !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lbtn input:hover {
    background: #fff !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.exitbtn {
    padding: 4px 0 0 0 !important;
}
.exitbtn a img {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4444'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") !important;
    height: 28px !important;
    width: 28px !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.exitbtn a img:hover {
    opacity: 0.8;
}

/* --- Right Column Banners --- */
.banner200-placeholder, .banner100-placeholder, .banner88-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    gap: 8px;
    transition: all var(--transition-normal);
}
.banner200-placeholder {
    min-height: 250px;
    width: 100%;
}
.banner100-placeholder {
    min-height: 100px;
    width: 100%;
}
.banner88-placeholder {
    min-height: 88px;
    width: 100%;
}
.banner-placeholder-icon {
    font-size: 24px;
    color: var(--neon-green-dim);
    opacity: 0.4;
}
.banner-placeholder-text {
    font-size: 11px;
    color: var(--text-muted);
}
.banner-placeholder-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #00ff88 !important;
    color: #0a0e14 !important;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    transition: all var(--transition-fast);
}
.banner-placeholder-link:hover {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* --- Top News --- */
.topnews li {
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 6px 0;
}
.topnews li:hover {
    background-position: 0 0 !important;
}
.topnews a {
    color: var(--text-secondary) !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-size: 12px;
    display: inline !important;
}
.topnews a:hover {
    color: var(--neon-green) !important;
}

/* --- Statistics Block --- */
.leftcol .project-stats {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.8;
}
.leftcol .project-stats span {
    color: var(--neon-green);
    font-weight: 600;
}

/* --- Surf lists in left column --- */
.navi .sub-menu {
    padding-left: 14px;
}
.navi .sub-menu a {
    font-size: 11px;
    padding: 5px 14px 5px 24px !important;
}
.navi .sub-menu a::before {
    left: 8px;
}

/* --- Left column links with arrows --- */
.wblock .dcont ul li, .navi ul li, .leftcol ul li {
    position: relative;
    padding-left: 6px;
}
.wblock .dcont ul li a, .navi ul li a, .leftcol ul li a {
    padding-left: 18px !important;
}
.wblock .dcont ul li a::before, .leftcol ul li a::before {
    content: "→";
    position: absolute;
    left: 2px;
    color: var(--neon-green-dim);
    font-size: 11px;
    opacity: 0.5;
    transition: all var(--transition-fast);
}
.wblock .dcont ul li a:hover::before, .leftcol ul li a:hover::before {
    opacity: 1;
    color: var(--neon-green);
}

/* --- VIP Links --- */
.vip-link-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin: 4px 0;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 215, 0, 0.05));
    border: 1px solid var(--neon-vip);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}
.vip-link-item:hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 215, 0, 0.1));
    box-shadow: 0 0 15px rgba(255, 107, 157, 0.2);
}
.vip-link-item .vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--neon-vip), var(--neon-gold));
    color: #0a0e14;
    font-size: 9px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.vip-link-item .vip-counter {
    color: var(--neon-vip);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.vip-link-item a {
    color: var(--neon-gold) !important;
    font-weight: 600;
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vip-link-item a:hover {
    color: #fff !important;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

/* --- Banner 468x60 in content --- */
.maintags {
    margin-top: 16px;
    background: var(--bg-block);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.maintags .dleft, .maintags .dright, .maintags .dbg {
    background: none !important;
}
.maintags .dtitle {
    background: none !important;
    height: auto !important;
    width: auto !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-primary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}
.maintags .dpad {
    padding: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.btags {
    padding: 0 !important;
}
.btags a {
    color: var(--text-secondary) !important;
}
.btags a:hover {
    color: var(--neon-green) !important;
}

/* --- Story / News --- */
.story {
    background: var(--bg-block);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
}
.newshead .dtitle {
    font-size: 14px;
    font-weight: 700;
}
.newshead .dtitle a {
    color: var(--text-primary);
}
.newshead .dtitle a:hover {
    color: var(--neon-green);
}
.nmain {
    background: none !important;
    margin-top: 10px;
}
.nmain .dleft, .nmain .dright {
    background: none !important;
}
.nmain .dpad {
    padding: 12px 0 !important;
}
.nshort, .nfull {
    line-height: 1.8;
    color: var(--text-secondary);
}

/* --- Forms --- */
.form {
    background: var(--bg-block);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
}
.formhead .dtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.formcont {
    background: none !important;
    margin-top: 12px;
}
.formcont .dleft, .formcont .dright {
    background: none !important;
}
.formpad, .formpads {
    padding: 12px 0 !important;
}

input[type=text], input[type=password], textarea, select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font: 13px var(--font-main) !important;
    transition: all var(--transition-fast);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
    border-color: var(--neon-green) !important;
    outline: none;
    box-shadow: 0 0 8px var(--neon-green-glow);
}

input[type=submit], input[type=reset], input[type=button] {
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
    border: none !important;
    padding: 8px 20px !important;
    font: 13px/1 var(--font-main) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
    background: #fff !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* --- Tables --- */
table.profile {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}
table.profile thead {
    background: var(--bg-input);
}
table.profile thead th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
table.profile tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
    color: var(--text-secondary);
    font-size: 12px;
}
table.profile tbody tr:hover td {
    background: rgba(255,255,255,0.02) !important;
}

/* --- Line / Dashed separator --- */
.line {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-block);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 8px 0;
}

/* --- Headings --- */
h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    text-shadow: none !important;
}
h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--neon-green);
    margin: 16px 0 10px 0;
    text-shadow: none !important;
}
h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    margin: 14px 0 8px 0;
}
h4, h5 {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    height: auto !important;
    background: linear-gradient(180deg, #141e2b 0%, #0f1923 100%) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 40px 20px 20px 20px !important;
    margin-top: 30px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    clear: both !important;
    position: relative;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}
.foot {
    height: auto !important;
    background: none !important;
}
.foot .dleft, .foot .dright {
    height: auto !important;
    background: none !important;
}
.foot .dcont {
    padding: 20px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.counters {
    float: none !important;
    padding: 0 !important;
    width: auto !important;
    display: flex;
    gap: 8px;
}
.counters span {
    background: var(--bg-input) !important;
    height: 40px !important;
    width: 100px !important;
    float: none !important;
    margin: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyrights, .footinfo {
    width: auto !important;
}
.copyrights, .copyrights a {
    color: var(--text-muted) !important;
    font-size: 12px;
}
.copyrights a:hover {
    color: var(--neon-green) !important;
}
.footinfo {
    color: var(--text-muted);
    font-size: 11px;
    padding-top: 0 !important;
}

.pagebtm {
    height: auto !important;
    background: rgba(0,0,0,0.2);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.pagebtm ul {
    padding: 0 !important;
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pagebtm ul li {
    float: none !important;
    margin: 0 !important;
}
.pagebtm ul li a {
    color: var(--text-muted) !important;
    font-size: 12px;
    padding: 4px 10px;
    border-right: 1px solid var(--border-color);
}
.pagebtm ul li:last-child a {
    border-right: none;
}
.pagebtm ul li a:hover {
    color: var(--neon-green) !important;
    text-decoration: none !important;
}

.design {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.design a {
    color: var(--text-muted) !important;
    font-size: 11px;
}
.design a:hover {
    color: var(--neon-green) !important;
}

/* --- Left column lists fix: remove old white dots, use arrows --- */
/* Force remove the OLD style.css navili.gif and naviarrow.gif backgrounds */
.navi li {
    background-image: none !important;
    background: none !important;
}
.navi li a {
    background-image: none !important;
    background: none !important;
}
.leftcol ul, .leftcol ol {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.leftcol ul li, .leftcol ol li {
    list-style: none !important;
    background: none !important;
    padding: 4px 0 4px 6px;
}
.leftcol ul li::before, .leftcol ol li::before,
.leftcol .dcont ul li::before, .leftcol .dcont ol li::before {
    display: none !important;
}
.wblock .dcont ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.wblock .dcont ul li {
    list-style: none !important;
    background: none !important;
    padding: 3px 0;
}
.wblock .dcont ul li a {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 3px 0 3px 16px;
    position: relative;
}
.wblock .dcont ul li a::before {
    content: "→";
    position: absolute;
    left: 2px;
    color: var(--neon-green-dim);
    font-size: 10px;
    opacity: 0.6;
    transition: all var(--transition-fast);
}
.wblock .dcont ul li a:hover {
    color: var(--neon-green);
}
.wblock .dcont ul li a:hover::before {
    opacity: 1;
    color: var(--neon-green);
}

/* --- Login form links (Регистрация / Забыли пароль) --- */
.loginaction {
    display: flex;
    gap: 12px;
    padding: 8px 0 4px 0;
    margin-top: 6px;
}
.loginaction a {
    font-size: 12px;
    color: var(--neon-green) !important;
    font-weight: 500;
    transition: color var(--transition-fast);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.loginaction a:hover {
    color: #fff !important;
}

/* --- Footer fixes --- */
.footer .wrapper {
    margin-bottom: 0;
}
.wrapper::after {
    content: "";
    display: table;
    clear: both;
}
.container::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.navigation {
    background: none !important;
    padding: 12px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.navigation span, .navigation a {
    padding: 6px 12px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 12px;
}
.navigation span {
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
}
.navigation a {
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
}
.navigation a:hover {
    background: var(--neon-green-dim) !important;
    color: #fff !important;
    border-color: var(--neon-green);
}

/* ============================================================
   SUCCESS / ERROR MESSAGES
   ============================================================ */
.succes {
    border: 1px solid var(--neon-green-dim);
    background: rgba(0, 255, 136, 0.1);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--neon-green);
    margin: 8px 0;
    line-height: 1.5;
}
.berrors {
    border: 1px solid #ff4444;
    background: rgba(255, 68, 68, 0.1);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 12px;
}
.berrors b {
    color: #ff4444;
}
.berrors .dpad {
    padding: 0;
}

/* ============================================================
   DYNAMIC FLOATING MENU (#spisok)
   ============================================================ */
#spisok {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background: rgba(20, 30, 43, 0.8) !important;
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(0, 255, 136, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#spisok:hover {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
    background: rgba(20, 30, 43, 0.95) !important;
}
#spisok a {
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease;
    position: relative;
}
#spisok a:hover {
    background: rgba(0, 255, 136, 0.1);
    transform: scale(1.1) translateX(5px);
    border-color: var(--neon-green);
}
#spisok a div {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -0.5px;
}
#spisok a::after {
    content: attr(title);
    position: absolute;
    left: 50px;
    background: #00ff88;
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: all 0.2s ease;
}
#spisok a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    #spisok { display: none !important; }
}

/* ============================================================
   TOOLTIP
   ============================================================ */
#tooltip {
    background: var(--bg-block) !important;
    border: 1px solid var(--neon-green-dim) !important;
    border-left: 3px solid var(--neon-green) !important;
    color: var(--text-primary) !important;
    font: 11px var(--font-main) !important;
    border-radius: var(--radius-sm);
    padding: 6px 10px !important;
    box-shadow: var(--shadow-neon);
}

/* ============================================================
   SCROLL BUTTONS
   ============================================================ */
#scroll a img {
    opacity: 0.5;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}
#scroll a:hover img {
    opacity: 1;
}

/* ============================================================
   STILL MENU / RIGHT
   ============================================================ */
.still_right, .still_cep_zakaz2 {
    width: 100% !important;
    display: block;
    margin: 8px 0;
    text-align: center;
}
.still_right a, .still_cep_zakaz2 a {
    width: 100% !important;
    margin: 2px 0 !important;
    font-size: 11px !important;
    display: block !important;
    padding: 6px 12px !important;
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast);
}
.still_right a:hover, .still_cep_zakaz2 a:hover {
    background: var(--neon-green-dim) !important;
    color: #fff !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 8px var(--neon-green-glow);
}

/* ============================================================
   CLOUD TAGS / CAROUSEL (No Flash!)
   ============================================================ */
.tagcloud-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px 0;
}
.tagcloud-modern a {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    transition: all var(--transition-fast);
    animation: cloudFloat 3s ease-in-out infinite;
}
.tagcloud-modern a:nth-child(3n+1) { border-color: #00ff88; animation-delay: 0s; }
.tagcloud-modern a:nth-child(3n+2) { border-color: #00b8ff; animation-delay: 0.5s; }
.tagcloud-modern a:nth-child(3n+3) { border-color: #ff8800; animation-delay: 1s; }
.tagcloud-modern a:hover {
    background: var(--neon-green-dim);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
}

@keyframes cloudFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ============================================================
   BANNER LINKS (responsive)
   ============================================================ */
.banner-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin: 8px 0;
}
.banner-links-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    text-align: center;
    transition: all var(--transition-fast);
}
.banner-links-grid a:hover {
    background: var(--neon-green-dim);
    color: #fff;
    border-color: var(--neon-green);
}

/* ============================================================
   BANNERS GRID - 468x60 slots row
   ============================================================ */
.banners-row-468 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    width: 100%;
}
.banners-row-468 .banner-slot-468 {
    flex: 0 1 468px;
    width: 468px;
    max-width: 100%;
}

/* ============================================================
   ADMIN BANNER SLOTS - IN ROW
   ============================================================ */
.admin-slots-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 16px auto;
    align-items: stretch;
    max-width: var(--max-width);
    padding: 0 20px;
}
.admin-slot-item {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--neon-gold);
    border-radius: var(--radius-md);
    background: rgba(255, 215, 0, 0.03);
    overflow: hidden;
}
.admin-slot-item .slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: rgba(255, 215, 0, 0.08);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}
.admin-slot-item .slot-header span {
    font-size: 10px;
    color: var(--neon-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-slot-item .slot-body {
    padding: 8px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .admin-slots-row {
        flex-wrap: wrap;
    }
    .admin-slot-item {
        flex: auto;
        width: 100%;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1200px) {
    :root {
        --col-width: 260px;
    }
    .headline {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .logotype a {
        justify-content: center;
    }
    .bannerbox {
        max-width: 100%;
        margin: 0 auto;
    }
    .hbanner {
        flex-direction: column;
        align-items: center;
    }
    .leftcol, .rightcol {
        width: var(--col-width) !important;
    }
    .maincol {
        margin: 0 var(--col-width) 0 var(--col-width) !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --col-width: 100%;
    }
    .wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important; /* Запрещаем горизонтальный скролл */
    }
    .headline {
        padding: 10px !important;
        gap: 12px !important;
    }
    .logotype a {
        font-size: 20px !important;
        justify-content: center !important;
    }
    .lang-switcher {
        justify-content: center !important;
    }
    .menuline {
        padding: 8px 5px !important;
    }
    .hmenu ul {
        justify-content: center !important;
        gap: 4px !important;
    }
    .hmenu li a {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
    /* ==== БАННЕРЫ: ОЧЕНЬ ЯВНЫЕ СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ ==== */
    /* Все maintags блоки с баннерами */
    .maintags {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
    }
    .maintags .dpad {
        display: flex !important;
        flex-direction: column !important; /* Все баннеры вертикально */
        align-items: center !important;
        padding: 10px 5px !important;
        gap: 15px !important; /* Расстояние между баннерами */
    }
    /* Каждый баннер-слот */
    .banner-slot-468 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 468px !important;
        height: 60px !important;
        position: relative !important;
        margin: 0 auto !important;
    }
    /* Плейсхолдеры баннеров */
    .banner-placeholder, .banner-placeholder-inline {
        width: 100% !important;
        max-width: 468px !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 11px !important;
        aspect-ratio: unset !important;
    }
    .banner-placeholder i, .banner-placeholder-inline i {
        font-size: 14px !important;
    }
    /* Админские слоты на мобильной версии */
    .admin-slots-row {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 10px 5px !important;
    }
    .admin-slot-item {
        width: 100% !important;
        max-width: 468px !important;
        flex: none !important;
    }
    /* Админские плейсхолдеры */
    .slot-placeholder-468 {
        width: 100% !important;
        max-width: 468px !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
    }
    /* Кнопка-корзинка в правом верхнем углу */
    .banner-rent-btn {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 24px !important;
        height: 24px !important;
    }
    .leftcol, .rightcol {
        float: none !important;
        width: 100% !important;
        padding: 10px !important;
    }
    .maincol {
        margin: 0 !important;
        padding: 10px !important;
    }
    .container {
        display: flex;
        flex-direction: column;
    }
    .pagebtm {
        flex-direction: column;
        text-align: center;
    }
    .pagebtm ul {
        justify-content: center;
    }
    .foot .dcont {
        flex-direction: column;
        text-align: center;
    }
    .counters {
        justify-content: center;
    }
    .still_cep a {
        min-width: 120px;
        font-size: 10px !important;
    }
    .iconset {
        justify-content: center;
    }
    .banners-row-468 {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin: 4px 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .logotype a {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .hmenu li a {
        padding: 6px 8px;
        font-size: 10px !important;
    }
    .banner-placeholder {
        height: auto !important;
        font-size: 9px !important;
    }
    .banner-placeholder span {
        font-size: 9px !important;
    }
    .banner-placeholder i {
        font-size: 13px !important;
    }
    .banner200-placeholder {
        min-height: 200px;
    }
    /* Кнопка-корзинка в правом верхнем углу */
    .banner-rent-btn {
        position: absolute !important;
        top: 3px !important;
        right: 3px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }
    /* Левая и правая колонка */
    .leftcol, .rightcol {
        float: none !important;
        width: 100% !important;
        padding: 10px 5px !important;
    }
    .maincol {
        margin: 0 !important;
        padding: 10px 5px !important;
    }
    .container {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Футер */
    .pagebtm {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px !important;
    }
    .pagebtm ul {
        justify-content: center !important;
    }
    .foot .dcont {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px 10px !important;
    }
    .counters {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Рекламная цепочка */
    .still_cep {
        padding: 10px 5px !important;
    }
    .still_cep a {
        min-width: 100px !important;
        font-size: 9px !important;
        padding: 5px 10px !important;
    }
    /* Виджеты и блоки */
    .wblock, .bwblock, .bblock {
        border-radius: 8px !important;
    }
    .wblock .dcont {
        padding: 10px !important;
    }
    /* SEO текст */
    .seo-content-area {
        padding: 10px !important;
        font-size: 12px !important;
    }
    /* Кнопки вверх/вниз */
    #scroll a {
        width: 36px !important;
        height: 36px !important;
        right: 8px !important;
    }
    #Go_Top {
        bottom: 80px !important;
    }
    #Go_Bottom {
        bottom: 35px !important;
    }
    /* Лидеры недели на мобильной версии: 3 в ряд, уменьшаем размеры */
    .activity-container > div:nth-child(2) {
        gap: 8px !important;
        padding: 15px 8px !important;
    }
    .activity-container > div:nth-child(2) > div {
        max-width: 100px !important;
        padding: 12px 8px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(1) {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(2) {
        font-size: 12px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(3) {
        font-size: 10px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(4) {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-top: 8px !important;
    }
    /* Лидеры недели на мобильной версии: 3 в ряд, уменьшаем размеры */
    .activity-container > div:nth-child(2) {
        gap: 8px !important;
        padding: 15px 8px !important;
    }
    .activity-container > div:nth-child(2) > div {
        max-width: 100px !important;
        padding: 12px 8px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(1) {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(2) {
        font-size: 12px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(3) {
        font-size: 10px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(4) {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-top: 8px !important;
    }
    /* Лидеры недели на мобильной версии: 3 в ряд, уменьшаем размеры */
    .activity-container > div:nth-child(2) {
        gap: 8px !important;
        padding: 15px 8px !important;
    }
    .activity-container > div:nth-child(2) > div {
        max-width: 100px !important;
        padding: 12px 8px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(1) {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(2) {
        font-size: 12px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(3) {
        font-size: 10px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(4) {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-top: 8px !important;
    }
    /* Лидеры недели на мобильной версии: 3 в ряд, уменьшаем размеры */
    .activity-container > div:nth-child(2) {
        gap: 8px !important;
        padding: 15px 8px !important;
    }
    .activity-container > div:nth-child(2) > div {
        max-width: 100px !important;
        padding: 12px 8px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(1) {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(2) {
        font-size: 12px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(3) {
        font-size: 10px !important;
    }
    .activity-container > div:nth-child(2) > div > div:nth-child(4) {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-top: 8px !important;
    }
    /* Прячем плавающее меню на мобильных */
    #spisok {
        display: none !important;
    }
}

/* ============================================================
   SURF SELECTION BUTTONS (byncm / serftxt)
   Central column — 1x1, 1x2, 1x3 ... buttons
   ============================================================ */
.byncm {
    font: bold 13px var(--font-main) !important;
    display: inline-block !important;
    margin: 3px !important;
    height: auto !important;
    list-style: none !important;
}
.byncm a, a.serftxt {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    min-width: 50px;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    float: none !important;
}
.byncm a:hover, a.serftxt:hover {
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 4px 15px var(--neon-green-glow) !important;
    transform: translateY(-1px);
}
.byncm a:active, a.serftxt:active {
    transform: translateY(0);
}
.byncm a.active, a.serftxt.active {
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 12px var(--neon-green-glow);
}
.surf-header {
    text-align: center;
    padding: 10px 0;
}
.surf-header h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    text-shadow: 0 0 15px var(--neon-green-glow);
}
.surf-header h1 font[color=red] {
    color: var(--neon-green) !important;
}

/* ============================================================
   EXPANDABLE MENU SECTIONS (Left Column)
   wblock .dtitle with chevron arrows (onclick sections)
   ============================================================ */
.wblock .dtitle[onclick] {
    cursor: pointer;
    user-select: none;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all var(--transition-fast);
}
.wblock .dtitle[onclick]:hover {
    background: rgba(255,255,255,0.03);
}
.wblock .dtitle[onclick] i.fa-chevron-down,
.wblock .dtitle[onclick] i.fa-chevron-up,
.wblock .dtitle[onclick] .fas.fa-chevron-down,
.wblock .dtitle[onclick] .fas.fa-chevron-up {
    font-size: 12px !important;
    color: var(--neon-green-dim) !important;
    opacity: 0.7;
    transition: all var(--transition-fast);
    float: none !important;
    margin-left: auto;
}
.wblock .dtitle[onclick]:hover i.fa-chevron-down,
.wblock .dtitle[onclick]:hover i.fa-chevron-up,
.wblock .dtitle[onclick]:hover .fas.fa-chevron-down,
.wblock .dtitle[onclick]:hover .fas.fa-chevron-up {
    opacity: 1;
    color: var(--neon-green) !important;
    transform: scale(1.15);
}
.wblock .dtitle[onclick] .dtitle {
    flex: 1;
    border-bottom: none !important;
    padding: 0 !important;
}

/* ============================================================
   PAGE SCROLL BUTTONS (Up/Down arrows)
   ============================================================ */
#scroll a {
    display: inline-block;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
#scroll a:hover {
    background: var(--neon-green-dim);
    border-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green-glow);
}
#scroll a img {
    filter: brightness(0) invert(0.6);
    height: 20px;
    width: 20px;
    transition: filter var(--transition-fast);
}
#scroll a:hover img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   SPOILER BUTTONS
   ============================================================ */
.spoiler-btn, input.spoiler-btn, input[type=button].spoiler-btn {
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.spoiler-btn:hover {
    background: var(--neon-green-dim) !important;
    color: #fff !important;
    border-color: var(--neon-green) !important;
}

/* ============================================================
   LINK LIST ".line" ITEMS (surf list on main page)
   ============================================================ */
.line .site-url {
    font-size: 12px;
    color: var(--neon-green);
    font-weight: 600;
    word-break: break-all;
}
.line table td {
    color: var(--text-secondary);
    font-size: 12px;
}
.line table td img[src*="del.gif"],
.line table td img[src*="virusy.png"],
.line table td img[src*="vxodsites.png"],
.line table td img[src*="vira.gif"] {
    filter: brightness(0) invert(0.5);
    transition: filter var(--transition-fast);
    opacity: 0.7;
}
.line table td a:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* ============================================================
   COMPLETE WHITE BACKGROUND FORCE OVERRIDE
   ============================================================ */
html body,
html body .wrapper, html body .container,
html body .ctop, html body .cbtm,
html body .maincol, html body .maincont,
html body .leftcol, html body .rightcol,
html body .foot,
html body .pagebtm,
html body .wblock, html body .bwblock, html body .bblock,
html body .story, html body .form,
html body .nmain, html body .nshort, html body .nfull,
html body .still_cep, html body .still_right,
html body .maintags, html body .btags,
html body .navi, html body .navi li, html body .navi li a,
html body .topnews, html body .topnews li,
html body .hmenu, html body .hmenu li, html body .hmenu li a,
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]):not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button), html body select,
html body textarea,
html body .headline, html body .headline .dleft, html body .headline .dright,
html body .menuline, html body .menuline .dleft,
html body .toolbox, html body .bannerbox,
html body .iconblock, html body .dbg,
html body .dtop, html body .dbtm, html body .dbg,
html body .dtitle, html body .dcont,
html body .loginbox, html body .userbox,
html body .loginform, html body .lbtn,
html body .exitbtn, html body .userlinks,
html body .loginlinks, html body .loginaction,
html body .counters, html body .counterstop,
html body .berrors, html body .succes,
html body .dpad, html body .formpad,
html body .formpads,
html body .clr, html body .reset {
    background-image: none !important;
    background-color: transparent !important;
}
html body,
html body .wrapper,
html body .foot,
html body .pagebtm,
html body .container {
    background-color: #0a0e14 !important;
}
html body .wblock, html body .bwblock, html body .bblock,
html body .story, html body .form,
html body .maintags,
html body .line,
html body .still_cep,
html body .toolbox {
    background-color: #141e2b !important;
}

/* ============================================================
   FORCE REMOVE ALL OLD MENU DOT/ARROW IMAGES
   ============================================================ */
.navi li, .navi li a,
.loginlinks a, .userlinks a,
.related a,
.wblock .dcont ul li,
.leftcol ul li,
.topnews li {
    background-image: none !important;
    background: none !important;
}
.loginlinks a, .userlinks a, .related a {
    background-image: none !important;
    background: none !important;
    padding-left: 4px !important;
}



/* ============================================================
   VIP SECTION (премиум-ссылки над списком серфинга)
   ============================================================ */
.vip-section {
    background: linear-gradient(135deg, #1a2738 0%, #1e2d3d 100%);
    border: 1px solid #ffd700;
    border-radius: 10px;
    margin: 12px 0;
    padding: 12px 16px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}
.vip-section.vip-empty {
    border-color: #2a3a4a;
    box-shadow: none;
}
.vip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ffd700;
}
.vip-section.vip-empty .vip-header {
    border-bottom-color: #2a3a4a;
}
.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #0a0e14 !important;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.vip-badge i {
    color: #0a0e14 !important;
}
.vip-title {
    color: #ffd700;
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}
.vip-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #0a0e14 !important;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vip-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}
.vip-link-item {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    transition: background 0.2s;
}
.vip-link-item:last-child {
    border-bottom: none;
}
.vip-link-item:hover {
    background: rgba(255, 215, 0, 0.03);
}
.vip-star {
    color: #ffd700;
    margin-right: 6px;
}
.vip-url {
    color: #ffd700 !important;
    font-weight: 600;
}
.vip-empty-text {
    text-align: center;
    color: #667788;
    font-size: 13px;
    padding: 8px 0;
}
.vip-empty-text i {
    color: #ffd700;
}
.vip-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #ffd700, transparent);
    opacity: 0.3;
}

/* ============================================================
   ADMIN SLOTS ROW (header banners inline)
   ============================================================ */
/* ============================================================
   ADMIN SLOTS ROW — 468×60 under nav
   ============================================================ */
.admin-slots-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 10px 0;
    background: transparent !important;
    border: none !important;
    margin: 15px auto;
    max-width: var(--max-width);
}
.admin-slots-row .admin-slot-item {
    flex: 0 1 468px;
    width: 468px;
    max-width: 100%;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    line-height: 0;
}
.admin-slots-row .slot-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-slots-row .slot-body img,
.admin-slots-row .slot-body a img {
    display: block;
    max-width: 100%;
}

/* Красивая заглушка 468×60 */
.slot-placeholder-468 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 468px;
    height: 60px;
    max-width: 100%;
    background: linear-gradient(135deg, rgba(26, 39, 56, 0.9), rgba(17, 24, 37, 0.95));
    border: 1px dashed rgba(0, 255, 136, 0.25);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.slot-placeholder-468::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.03), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.slot-placeholder-468:hover::before {
    transform: translateX(100%);
}
.slot-placeholder-468:hover {
    border-color: rgba(0, 255, 136, 0.5);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(26, 39, 56, 0.95));
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.12), inset 0 0 20px rgba(0, 255, 136, 0.03);
}
.slot-ph-icon {
    font-size: 18px;
    color: rgba(0, 255, 136, 0.4);
    transition: color var(--transition-fast);
    line-height: 1;
}
.slot-placeholder-468:hover .slot-ph-icon {
    color: var(--neon-green);
}
.slot-ph-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    line-height: 1;
}
.slot-placeholder-468:hover .slot-ph-text {
    color: var(--text-secondary);
}
.slot-ph-btn {
    padding: 4px 10px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: var(--neon-green-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all var(--transition-fast);
    line-height: 1.2;
}
.slot-placeholder-468:hover .slot-ph-btn {
    background: var(--neon-green);
    color: #0a0e14;
    border-color: var(--neon-green);
    box-shadow: 0 0 10px rgba(0,255,136,0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .admin-slots-row {
        flex-direction: column;
        align-items: center;
        padding: 4px 12px;
        gap: 6px;
        margin: 8px auto;
    }
    .admin-slots-row .admin-slot-item {
        width: 100%;
    }
    .slot-placeholder-468 {
        width: 100%;
        height: auto !important;
        aspect-ratio: 468 / 60;
    }
}





/* ============================================================
   CHAT / CONTACT FORM STYLES
   ============================================================ */
.chat-form-table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.chat-form-table th {
    background: transparent !important;
    color: #8899aa !important;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    text-align: right;
    vertical-align: top;
}
.chat-form-table td {
    padding: 4px 0;
}
.chat-input, .chat-textarea {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    background: var(--bg-input, #1a2738) !important;
    color: #e8edf2 !important;
    border: 1px solid var(--border-color, #1e2d3d) !important;
    border-radius: 6px;
    padding: 10px 14px !important;
    font: 13px 'Segoe UI', Arial, sans-serif;
    transition: all 0.2s;
}
.chat-input:focus, .chat-textarea:focus {
    border-color: var(--neon-green, #00ff88) !important;
    box-shadow: 0 0 8px rgba(0,255,136,0.15);
    outline: none;
}
.chat-textarea {
    min-height: 100px;
    resize: vertical;
    max-width: 100%;
}
.chat-submit-btn {
    background: var(--neon-green, #00ff88);
    color: #0a0e14;
    border: none;
    padding: 10px 28px;
    font: 14px/1 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,255,136,0.2);
}
.chat-submit-btn:hover {
    background: #fff;
    color: #0a0e14;
    box-shadow: 0 4px 20px rgba(0,255,136,0.4);
    transform: translateY(-1px);
}
.chat-history {
    max-height: 500px;
    overflow-y: auto;
}
.chat-history::-webkit-scrollbar {
    width: 6px;
}
.chat-history::-webkit-scrollbar-track {
    background: var(--bg-input, #1a2738);
}
.chat-history::-webkit-scrollbar-thumb {
    background: var(--border-color, #1e2d3d);
    border-radius: 3px;
}

/* ============================================================
   MODERN SCROLL BUTTONS (replace old images)
   ============================================================ */
#scroll a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background: var(--bg-input, #1a2738) !important;
    border: 1px solid var(--border-color, #1e2d3d) !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    color: #8899aa !important;
    transition: all 0.2s !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    text-decoration: none !important;
}
#scroll a:hover {
    color: var(--neon-green, #00ff88) !important;
    border-color: var(--neon-green, #00ff88) !important;
    box-shadow: 0 4px 16px rgba(0,255,136,0.2) !important;
    transform: scale(1.1);
}
#scroll a img {
    filter: brightness(0) invert(0.7);
    transition: filter 0.2s;
}
#scroll a:hover img {
    filter: brightness(0) invert(1);
}



/* ============================================================
   ADMIN PANEL DARK THEME OVERRIDE (for admin pages loaded in iframe/main)
   ============================================================ */
html body .admin-content {
    background: #0a0e14 !important;
    color: #e8edf2 !important;
}
html body .admin-content table {
    background: transparent !important;
}
html body .admin-content td {
    background: transparent !important;
    color: #e8edf2 !important;
}
html body .admin-content .top {
    background: #1a2738 !important;
    color: #00ff88 !important;
    font-weight: bold !important;
}
html body .admin-content font[color=red] {
    color: #ff6b6b !important;
}
html body .admin-content font[color=green] {
    color: #00ff88 !important;
}
html body .admin-content font[color=blue] {
    color: #64b5f6 !important;
}
html body .admin-content input[type=text],
html body .admin-content input[type=password],
html body .admin-content select {
    background: #0d1420 !important;
    color: #e8edf2 !important;
    border: 1px solid #1e2d3d !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}
html body .admin-content textarea {
    background: #0d1420 !important;
    color: #e8edf2 !important;
    border: 1px solid #1e2d3d !important;
    border-radius: 4px !important;
    padding: 8px !important;
}
html body .admin-content input[type=submit] {
    background: #00ff88 !important;
    color: #0a0e14 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}
html body .admin-content a {
    color: #00b8ff !important;
}
html body .admin-content hr {
    border-color: #1e2d3d !important;
}

/* ============================================================
   UTILITY
   ============================================================ */
.clr { clear: both; }
.dpad { padding: 10px; }
.reset { margin: 0; padding: 0; list-style: none; }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,255,136,0.15); }
    50%       { box-shadow: 0 0 20px rgba(0,255,136,0.35); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   FORM COMPONENTS (modern register/login forms)
   ============================================================ */
.page-form-wrap {
    padding: 20px 0;
    animation: fadeIn 0.5s ease;
}
.form-group {
    margin-bottom: 14px;
}
.form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.form-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: 14px var(--font-main);
    transition: all var(--transition-fast);
    box-sizing: border-box;
    outline: none;
}
.form-input:focus {
    border-color: var(--neon-green);
    background: rgba(26, 39, 56, 0.95);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.08), 0 0 12px rgba(0, 255, 136, 0.1);
}
select.form-input option {
    background-color: #0a0e14;
    color: #fff;
}
.form-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}
.form-hint {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    opacity: 0.8;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
    border: none;
    border-radius: var(--radius-md);
    font: 700 13px var(--font-main);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.25);
}
.btn-primary:hover {
    background: #fff !important;
    color: #0a0e14 !important;
    box-shadow: 0 6px 24px rgba(0, 255, 136, 0.45);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font: 600 12px var(--font-main);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.btn-secondary:hover {
    border-color: var(--neon-green-dim);
    color: var(--neon-green) !important;
    background: rgba(0, 255, 136, 0.04) !important;
}

/* Modern styles for legacy & default buttons */
input.btn-blue, input.btn-blue136, input[type="submit"].button, input[type="button"].button, button.button {
    background: var(--neon-blue) !important;
    color: #0a0e14 !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-main) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    height: 32px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-fast) !important;
    box-shadow: 0 2px 10px rgba(0, 184, 255, 0.2) !important;
    text-decoration: none !important;
}

input.btn-blue:hover, input.btn-blue136:hover, input[type="submit"].button:hover, input[type="button"].button:hover, button.button:hover {
    background: #fff !important;
    color: #0a0e14 !important;
    box-shadow: 0 4px 15px rgba(0, 184, 255, 0.4) !important;
}

input.btn-red {
    background: #ff4a5a !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-main) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    height: 32px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-fast) !important;
    box-shadow: 0 2px 10px rgba(255, 74, 90, 0.2) !important;
    text-decoration: none !important;
}
input.btn-red:hover {
    background: #fff !important;
    color: #0a0e14 !important;
    box-shadow: 0 4px 15px rgba(255, 74, 90, 0.4) !important;
}

/* Default classless buttons and submits */
input[type="submit"]:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button),
input[type="button"]:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button),
button:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button) {
    background: var(--neon-green) !important;
    color: #0a0e14 !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-main) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    height: 32px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-fast) !important;
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.2) !important;
}

input[type="submit"]:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button):hover,
input[type="button"]:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button):hover,
button:not(.btn-primary):not(.btn-secondary):not(.btn-blue):not(.btn-blue136):not(.btn-red):not(.button):hover {
    background: #fff !important;
    color: #0a0e14 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4) !important;
}

/* ============================================================
   GLOW NEON ACCENTS
   ============================================================ */
.neon-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 20px;
    color: var(--neon-green);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    animation: glowPulse 3s ease-in-out infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0e14; }
::-webkit-scrollbar-thumb { background: #1e2d3d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a4a; }

/* Glow on inputs focus */
input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    border-color: var(--neon-green) !important;
    box-shadow: 0 0 0 3px rgba(0,255,136,0.08), 0 0 12px rgba(0,255,136,0.1) !important;
    outline: none;
}

/* Staggered animation for sidebar blocks */
.leftcol .wblock:nth-child(1) { animation-delay: 0.05s; }
.leftcol .wblock:nth-child(2) { animation-delay: 0.10s; }
.leftcol .wblock:nth-child(3) { animation-delay: 0.15s; }
.leftcol .wblock:nth-child(4) { animation-delay: 0.20s; }
.leftcol .wblock:nth-child(5) { animation-delay: 0.25s; }
.leftcol .wblock:nth-child(6) { animation-delay: 0.30s; }
.rightcol .wblock:nth-child(1) { animation-delay: 0.08s; }
.rightcol .wblock:nth-child(2) { animation-delay: 0.14s; }
.rightcol .wblock:nth-child(3) { animation-delay: 0.20s; }
.rightcol .wblock:nth-child(4) { animation-delay: 0.26s; }

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 1024px) {
    .container { width: 95% !important; padding: 10px !important; }
}

@media (max-width: 900px) {
    .container { width: 100% !important; padding: 10px !important; }
    .cbtm { display: flex; flex-direction: column !important; }
    .leftcol, .rightcol, .maincol { width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }
    .maincol { padding: 0 !important; order: -1; } /* Content above sidebars on mobile */
    
    .headline { flex-direction: column; gap: 15px; text-align: center; }
    .headline .rss { display: none; }
    
    .hmenu ul { justify-content: center; gap: 10px; display: flex; flex-wrap: wrap; }
    .hmenu ul li { margin: 0; }
    
    .bannerbox, .bannerbg, .bannerleft, .bannerright, .hbanner {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        float: none !important;
    }
    .bannerbox {
        margin: 10px 0 !important;
    }
    .banners-row-468 {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 10px auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        background: var(--bg-block) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }
    .banners-row-468 .banner-slot-468 {
        width: 100% !important;
        max-width: 468px !important;
        height: auto !important;
        aspect-ratio: 468 / 60 !important;
        margin: 0 auto !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .banners-row-468 .banner-slot-468 a {
        width: 100% !important;
        display: block !important;
    }
    .banners-row-468 .banner-slot-468 img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .banners-row-468 .banner-slot-468 .banner-rent-btn {
        top: 3px !important;
        right: 3px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }
    .banners-row-468 .banner-slot-468 .banner-rent-btn i {
        font-size: 10px !important;
    }
    .admin-slots-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin: 10px auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        background: var(--bg-block) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }
    .admin-slot-item {
        width: 100% !important;
        max-width: 468px !important;
        height: auto !important;
        aspect-ratio: 468 / 60 !important;
        margin: 0 auto !important;
        position: relative !important;
        overflow: hidden !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .admin-slot-item .slot-body {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .admin-slot-item .slot-body a,
    .admin-slot-item .slot-body img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border: none !important;
        display: block !important;
    }
    /* Center and clip iframes without showing scrollbars */
    .banners-row-468 .banner-slot-468 iframe,
    .admin-slot-item .slot-body iframe {
        width: 468px !important;
        height: 60px !important;
        max-width: none !important;
        max-height: none !important;
        flex-shrink: 0 !important;
        border: none !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    .wblock { width: 100% !important; }
    img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
    .logotype { font-size: 20px !important; }
    .hmenu ul li a { font-size: 11px; padding: 5px 8px; }
    .dtitle span { font-size: 13px; }
    
    .banner-placeholder, .slot-placeholder-468 {
        font-size: 9px !important;
    }
    .banner-placeholder span, .slot-ph-text {
        font-size: 9px !important;
    }
    .banner-placeholder i, .slot-ph-icon {
        font-size: 13px !important;
    }
    .slot-ph-btn {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }
}

.btn-primary {
    background: linear-gradient(180deg, #00ff88, #00cc6a) !important;
}
.btn-primary:hover {
    background: linear-gradient(180deg, #33ffaa, #00dd77) !important;
}
.wblock input[type="text"],
.wblock input[type="number"],
.wblock input[type="url"],
.wblock input[type="email"],
.wblock input[type="password"],
.wblock input[type="date"],
.wblock textarea,
.wblock select {
    width: 100%;
    box-sizing: border-box;
}