---SEPARATOR---

/* ============================================
   Backward Compatibility Layer
   Maps old class names to new design system
   ============================================ */

/* === Layout Aliases === */
.header { display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6); height:var(--header-height); background:var(--bg-header); border-bottom:1px solid var(--border); box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.header-left, .header-right { display:flex; align-items:center; gap:var(--space-4); }
.brand__logo { display:flex; align-items:center; gap:var(--space-3); font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none; }
.brand__logo:hover { color:var(--primary); }
.brand__logo .logo, .logo { width:36px; height:36px; background:linear-gradient(135deg, var(--primary), var(--purple)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.user { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius); transition:var(--transition); }
.user:hover { background:var(--primary-light); }
.user_lk { display:flex; align-items:center; gap:var(--space-3); }
.user_lk a { padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); font-size:0.875rem; font-weight:500; color:var(--text-muted); text-decoration:none; transition:var(--transition); display:flex; align-items:center; gap:var(--space-2); }
.user_lk a:hover { background:var(--primary-light); color:var(--primary); }
.profile__minuses { color:var(--danger) !important; }
.profile__minuses:hover { background:var(--danger-light) !important; }
.recsign { display:flex; gap:var(--space-2); }
.recsign a { display:inline-block; padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-weight:500; font-size:0.875rem; text-decoration:none; }
.recsign a:first-child { background:var(--primary); color:white !important; }
.recsign a:last-child { background:var(--primary-light); color:var(--primary) !important; }
.miniscreen { display:flex; align-items:center; gap:var(--space-2); }

.ogpanel_layout { display:flex; flex-direction:column; min-height:100vh; }
.ogpanel_page { max-width:1400px; margin:0 auto; padding:var(--space-5); }
.bconteiner { width:var(--sidebar-width); background:var(--bg-sidebar); color:var(--text-sidebar); position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:200; display:flex; flex-direction:column; transition:var(--transition); }
.bconteiner .title { padding:var(--space-3) var(--space-3); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-light); }
.bconteiner ul { list-style:none; padding:var(--space-2); margin:0; }
.bconteiner li { margin-bottom:2px; }
.bconteiner li a { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); color:var(--text-sidebar); text-decoration:none; border-radius:var(--radius-sm); font-size:0.875rem; font-weight:500; transition:var(--transition); }
.bconteiner li a:hover { background:rgba(255,255,255,0.06); color:white; }
.bconteiner li a.active { background:var(--primary); color:white; }
.bconteiner li a i { font-size:1.1rem; width:20px; text-align:center; }

.ogp__main { flex:1; margin-left:var(--sidebar-width); padding:var(--space-6); transition:var(--transition); }
.ogpanel_footer { background:var(--bg-sidebar); color:var(--text-light); padding:var(--space-8) var(--space-6); margin-top:auto; }
.footer__header { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-8); max-width:1400px; margin:0 auto; }
.pageFoot-logo { display:flex; align-items:center; gap:var(--space-3); }
.pageFoot-logoTitle { font-size:1.25rem; font-weight:700; color:white; display:flex; align-items:center; gap:var(--space-2); }

/* === Card Aliases === */
.block, .card { background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; transition:var(--transition); margin-bottom:var(--space-4); }
.block:hover, .card:hover { box-shadow:var(--shadow-md); }
.block_content, .card-body { padding:var(--space-5); }
.hblock_content, .card-header { padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg-card); }
.card-title { font-size:1rem; font-weight:600; color:var(--text); margin:0; }
.card-2 { background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition); }
.card-2:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.body-card-2 { padding:var(--space-4); }

/* === Badge Aliases === */
.badge { display:inline-flex; align-items:center; padding:4px 10px; font-size:0.75rem; font-weight:700; border-radius:var(--radius-full); line-height:1.4; white-space:nowrap; }
.bg-label-primary, .badge-light-primary { background:var(--primary-light); color:var(--primary); }
.bg-label-success { background:var(--success-light); color:var(--success); }
.bg-label-danger { background:var(--danger-light); color:var(--danger); }
.bg-label-warning { background:var(--warning-light); color:var(--warning); }
.bg-label-info { background:var(--info-light); color:var(--info); }
.bg-label-secondary { background:var(--bg-hover); color:var(--text-muted); }
.badge-round { border-radius:var(--radius-full); }
.badge-pill { border-radius:var(--radius-full); }

/* === Button Aliases === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:9px 18px; font-size:0.875rem; font-weight:600; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); text-decoration:none; font-family:var(--font); line-height:1.5; white-space:nowrap; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 4px 12px rgba(99,102,241,0.35); color:white; }
.btn-success { background:var(--success); color:white; }
.btn-success:hover { background:var(--success-hover); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:var(--danger-hover); }
.btn-warning { background:var(--warning); color:white; }
.btn-info { background:var(--info); color:white; }
.btn-default { background:var(--bg-card); color:var(--text); border:1px solid var(--border); }
.btn-default:hover { background:var(--bg-hover); }
.btn-gray { background:var(--secondary, #64748b); color:white; }
.btn-sm { padding:6px 12px; font-size:0.8rem; }
.btn-full { width:100%; }
.btn-server { padding:var(--space-2) var(--space-4); font-size:0.8rem; border-radius:6px; }
.bs_button { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:0.85rem; font-weight:500; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); cursor:pointer; transition:var(--transition); }
.bs_button:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.btn-switch { position:relative; width:44px; height:24px; background:var(--border); border-radius:12px; border:none; cursor:pointer; transition:var(--transition); padding:0; }
.btn-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:white; border-radius:50%; transition:var(--transition); box-shadow:var(--shadow); }
.btn-switch.active { background:var(--primary); }
.btn-switch.active::after { left:23px; }

/* === Server Specific === */
.server_list { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--space-5); padding:4px; }
.server_img-maps { width:100%; height:160px; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; }
.info-serv { padding:var(--space-4); }
.server_name { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:var(--space-2); }
.server_info, .server-info { font-size:0.8rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); }
.server_info span, .server-info div { display:inline-flex; align-items:center; gap:4px; }
.server_nav, .nav-server { display:flex; align-items:center; gap:4px; padding:var(--space-3) var(--space-4); background:var(--bg); border-top:1px solid var(--border); overflow-x:auto; }
.servernav__btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:0.8rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:6px; transition:var(--transition); white-space:nowrap; border:none; background:none; cursor:pointer; }
.servernav__btn:hover, .servernav__btn.active, .nav-server a:hover, .nav-server button:hover, .nav-server a.active, .nav-server button.active { background:var(--primary-light); color:var(--primary); }
.card-server-title { font-size:1rem; font-weight:600; color:var(--text); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.server_console { background:#0f172a; color:#22d3ee; font-family:var(--font-mono); font-size:0.8rem; line-height:1.6; padding:var(--space-4); border-radius:var(--radius); overflow:auto; max-height:400px; white-space:pre-wrap; word-break:break-all; }

/* === Table Aliases === */
.table_pad, .table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.table_pad th, .table th { padding:var(--space-3) var(--space-4); text-align:left; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); background:var(--bg); border-bottom:2px solid var(--border); }
.table_pad td, .table td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.table_pad tr:hover td, .table tbody tr:hover td { background:var(--primary-light); }
.table_pad tr:last-child td, .table tr:last-child td { border-bottom:none; }
.table-responsive { overflow-x:auto; }
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }

/* === Form Aliases === */
.form-control { width:100%; padding:10px 14px; font-size:0.875rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); transition:var(--transition); outline:none; font-family:var(--font); box-sizing:border-box; }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-select { width:100%; padding:10px 36px 10px 14px; font-size:0.875rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); transition:var(--transition); outline:none; appearance:none; cursor:pointer; font-family:var(--font); }
.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-label { display:block; font-size:0.875rem; font-weight:600; color:var(--text); margin-bottom:var(--space-2); }
.form-block { margin-bottom:var(--space-5); }
.input-group { display:flex; align-items:stretch; }
.input-group .form-control { border-top-right-radius:0; border-bottom-right-radius:0; flex:1; }
.input-group .btn { border-top-left-radius:0; border-bottom-left-radius:0; }

/* === Navigation Aliases === */
.gmenu, .nav-server { display:flex; gap:var(--space-1); padding:var(--space-2); background:var(--bg); border-radius:var(--radius); overflow-x:auto; margin-bottom:var(--space-5); }
.gmenu a, .nav-server a, .nav-server button { padding:8px 16px; font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition); white-space:nowrap; border:none; background:none; cursor:pointer; font-family:var(--font); }
.gmenu a:hover, .gmenu a.active, .nav-server a:hover, .nav-server button:hover, .nav-server a.active, .nav-server button.active { background:var(--bg-card); color:var(--primary); box-shadow:var(--shadow); }
.vmenu { display:flex; flex-direction:column; gap:2px; padding:var(--space-2); }
.vmenu a { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition); }
.vmenu a:hover, .vmenu a.active { background:var(--primary-light); color:var(--primary); }

/* === Breadcrumb & Pagination === */
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) 0; margin-bottom:var(--space-5); list-style:none; font-size:0.875rem; flex-wrap:wrap; }
.breadcrumb-item { color:var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { content:'/'; padding-right:var(--space-2); color:var(--text-light); }
.breadcrumb-item a { color:var(--primary); font-weight:500; }
.breadcrumb-item.active { color:var(--text); font-weight:600; }
.pages { padding:var(--space-3) 0; }
.pagination { display:flex; align-items:center; gap:var(--space-1); list-style:none; padding:0; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); transition:var(--transition); }
.pagination a:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.pagination .active a, .pagination .active span { background:var(--primary); border-color:var(--primary); color:white; }

/* === Progress === */
.progress { height:8px; background:var(--bg-hover); border-radius:var(--radius-full); overflow:hidden; border:1px solid var(--border); }
.progress-bar { height:100%; background:var(--primary); border-radius:var(--radius-full); transition:width 0.4s ease; }

/* === Informer & Loader === */
.informer { display:inline-flex; align-items:center; gap:var(--space-2); padding:8px 14px; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:600; background:var(--bg); border:1px solid var(--border); color:var(--text); }
.loader { display:inline-block; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:ogp-spin 0.8s linear infinite; }

/* === Bootstrap-like Utilities === */
.d-flex { display:flex !important; }
.d-inline-flex { display:inline-flex !important; }
.d-block { display:block !important; }
.d-none { display:none !important; }
.flex-column { flex-direction:column !important; }
.flex-grow-1 { flex-grow:1 !important; }
.flex-shrink-0 { flex-shrink:0 !important; }
.flex-wrap { flex-wrap:wrap !important; }
.align-items-center { align-items:center !important; }
.align-items-start { align-items:flex-start !important; }
.justify-content-between { justify-content:space-between !important; }
.justify-content-center { justify-content:center !important; }
.text-center { text-align:center !important; }
.text-right { text-align:right !important; }
.text-left { text-align:left !important; }
.fw-bold { font-weight:700 !important; }
.fw-semi-bold, .fw-semibold { font-weight:600 !important; }
.fw-medium { font-weight:500 !important; }
.fw-normal { font-weight:400 !important; }
.text-primary { color:var(--primary) !important; }
.text-success { color:var(--success) !important; }
.text-danger { color:var(--danger) !important; }
.text-warning { color:var(--warning) !important; }
.text-muted { color:var(--text-muted) !important; }
.text-dark { color:var(--text) !important; }
.text-600 { color:var(--text-muted) !important; }
.bg-primary { background:var(--primary) !important; }
.bg-success { background:var(--success) !important; }
.bg-danger { background:var(--danger) !important; }
.opacity-7 { opacity:0.7; }
.rounded { border-radius:var(--radius) !important; }
.border { border:1px solid var(--border) !important; }
.overflow-hidden { overflow:hidden !important; }
.overflow-auto { overflow:auto !important; }
.w-100, .w100p { width:100% !important; }
.h-100 { height:100% !important; }
.position-relative { position:relative; }
.position-absolute { position:absolute; }
.cursor-pointer { cursor:pointer; }

/* Spacing */
.m-0 { margin:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.mb-1 { margin-bottom:var(--space-1) !important; }
.mb-2 { margin-bottom:var(--space-2) !important; }
.mb-25 { margin-bottom:10px !important; }
.mb-3 { margin-bottom:var(--space-3) !important; }
.mb-4 { margin-bottom:var(--space-4) !important; }
.mb-5 { margin-bottom:var(--space-5) !important; }
.mt-0 { margin-top:0 !important; }
.mt-1 { margin-top:var(--space-1) !important; }
.mt-2 { margin-top:var(--space-2) !important; }
.mt-3 { margin-top:var(--space-3) !important; }
.mt-4 { margin-top:var(--space-4) !important; }
.mt-5 { margin-top:var(--space-5) !important; }
.my-0 { margin-top:0 !important; margin-bottom:0 !important; }
.my-1 { margin-top:var(--space-1) !important; margin-bottom:var(--space-1) !important; }
.my-2 { margin-top:var(--space-2) !important; margin-bottom:var(--space-2) !important; }
.my-3 { margin-top:var(--space-3) !important; margin-bottom:var(--space-3) !important; }
.ml-1, .ms-1 { margin-left:var(--space-1) !important; }
.ml-2, .ms-2 { margin-left:var(--space-2) !important; }
.ml-auto, .ms-auto { margin-left:auto !important; }
.mr-1, .me-1 { margin-right:var(--space-1) !important; }
.mr-2, .me-2 { margin-right:var(--space-2) !important; }
.mx-auto { margin-left:auto !important; margin-right:auto !important; }
.p-0 { padding:0 !important; }
.p-1 { padding:var(--space-1) !important; }
.p-2 { padding:var(--space-2) !important; }
.p-3 { padding:var(--space-3) !important; }
.p-4 { padding:var(--space-4) !important; }
.p-5 { padding:var(--space-5) !important; }
.px-1 { padding-left:var(--space-1) !important; padding-right:var(--space-1) !important; }
.px-2 { padding-left:var(--space-2) !important; padding-right:var(--space-2) !important; }
.px-3 { padding-left:var(--space-3) !important; padding-right:var(--space-3) !important; }
.px-4 { padding-left:var(--space-4) !important; padding-right:var(--space-4) !important; }
.py-1 { padding-top:var(--space-1) !important; padding-bottom:var(--space-1) !important; }
.py-2 { padding-top:var(--space-2) !important; padding-bottom:var(--space-2) !important; }
.py-3 { padding-top:var(--space-3) !important; padding-bottom:var(--space-3) !important; }

/* Font Sizes */
.fs-0 { font-size:1.25rem !important; }
.fs--1 { font-size:0.875rem !important; }
.fs--2 { font-size:0.75rem !important; }
.fs-1 { font-size:1rem !important; }
.lh-lg { line-height:1.6; }

/* Grid */
.row { display:flex; flex-wrap:wrap; margin:0 calc(var(--space-3) * -1); }
[class*="col-"] { padding:0 var(--space-3); }
.col { flex:1; padding:0 var(--space-3); min-width:0; }
.col-1 { flex:0 0 8.333%; }
.col-2 { flex:0 0 16.666%; }
.col-3 { flex:0 0 25%; }
.col-4 { flex:0 0 33.333%; }
.col-5 { flex:0 0 41.666%; }
.col-6 { flex:0 0 50%; }
.col-7 { flex:0 0 58.333%; }
.col-8 { flex:0 0 66.666%; }
.col-9 { flex:0 0 75%; }
.col-10 { flex:0 0 83.333%; }
.col-11 { flex:0 0 91.666%; }
.col-12 { flex:0 0 100%; }
.col-auto { flex:0 0 auto; width:auto; }
.col-lg-3 { flex:0 0 25%; }
.col-lg-4 { flex:0 0 33.333%; }
.col-lg-6 { flex:0 0 50%; }
.col-lg-8 { flex:0 0 66.666%; }
.col-lg-12 { flex:0 0 100%; }
.col-md-6 { flex:0 0 50%; }
.col-md-12 { flex:0 0 100%; }
.col-sm-6 { flex:0 0 50%; }
.col-sm-12 { flex:0 0 100%; }
.col-xs-12 { flex:0 0 100%; }

/* Match Height */
.match-height { display:flex; flex-wrap:wrap; }
.match-height > [class*="col"] { display:flex; }
.match-height > [class*="col"] > .card { flex:1; }

/* Text copy */
.text_copy_link { cursor:pointer; color:var(--text-light); margin-left:var(--space-2); }
.text_copy_link:hover { color:var(--primary); }

/* Truncate */
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Spoiler */
.spoiler { cursor:pointer; color:var(--primary); }
.spoiler_main { display:none; margin-top:var(--space-2); padding:var(--space-3); background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--border); }

/* Ogpanel specific */
.ogp-usersList { font-size:0.8rem; color:var(--text-muted); }
.space { height:var(--space-6); }
.change_close { position:absolute; top:var(--space-2); right:var(--space-2); cursor:pointer; color:var(--text-light); font-size:1.2rem; }
.change_close:hover { color:var(--danger); }
.change_map { position:absolute; }

/* Ti icons sizing */
.ti { font-size:1.1rem; line-height:1; vertical-align:middle; }
.ti-sm, .ti-min { font-size:0.85rem; }
.ti-lg { font-size:1.5rem; }
.icon-games { width:24px; height:24px; border-radius:4px; object-fit:cover; }

/* Monitoring cards */
.ogp__monitor { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-5); }
.ogp-monitor-box { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.ogp-monitor-box:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ogp-monitor-card { padding:var(--space-4); text-align:center; }
.ogp-monitor-card img.poster { width:80px; height:80px; margin:0 auto var(--space-3); display:block; }
.game-name { font-weight:700; color:var(--text); display:block; }
.game-numPl { font-size:0.8rem; color:var(--text-muted); }

/* Pages */
.ogpanel_monitor-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-5); }
.ogp-monitor-card { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.ogp-monitor-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.monitor__server-img { width:100%; height:140px; object-fit:cover; }
.monitor__server-box { padding:var(--space-4); }
.monitor__server-box h4 { font-size:0.95rem; font-weight:700; margin-bottom:var(--space-2); color:var(--text); }

/* Plugins */
.plugin_block { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:var(--space-4); transition:var(--transition); }
.plugin_block:hover { box-shadow:var(--shadow-md); }
.plugin_info { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-3); }
.plugin_info h4 { font-size:0.95rem; font-weight:700; color:var(--text); }
.plugin_info p { font-size:0.8rem; color:var(--text-muted); margin:4px 0 0; }
.plugin_action { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); }

/* Help & Chat */
.help_main { max-width:800px; margin:0 auto; }
.help_dialog { display:flex; flex-direction:column; gap:var(--space-4); }
.help_msg { display:flex; gap:var(--space-3); padding:var(--space-4); background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }
.help_msg_ava { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.help_question { font-weight:600; color:var(--text); margin-bottom:4px; font-size:0.95rem; }
.bubbles { display:flex; flex-direction:column; gap:10px; max-width:600px; }
.bubble { display:flex; align-items:flex-start; gap:10px; }
.bubble-content { padding:10px 16px; border-radius:16px; font-size:0.875rem; line-height:1.5; max-width:80%; word-break:break-word; background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-top-left-radius:4px; }
.bubble:nth-child(even) .bubble-content { background:var(--primary); color:white; border-color:var(--primary); border-top-left-radius:16px; border-top-right-radius:4px; margin-left:auto; }

/* P-services */
.p-services { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--space-5); }
.info-card--big { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:var(--space-6); text-align:center; transition:var(--transition); }
.info-card--big:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.gameImgBG { width:80px; height:80px; border-radius:var(--radius); object-fit:cover; margin:0 auto var(--space-4); box-shadow:var(--shadow); }

/* Dark theme overrides */
.dark .card, .dark .block { background-color:var(--bg-card); box-shadow:0 1px 2px rgba(0,0,0,0.2); }
.dark .table td, .dark .table_pad td { border-color:var(--border); }
.dark .form-control, .dark .form-select { background:var(--bg-input); border-color:var(--border); color:var(--text); }

/* Responsive overrides */
@media (max-width: 992px) {
  .ogp__main { margin-left:0; padding:var(--space-4); }
  .bconteiner { transform:translateX(-100%); }
  .bconteiner.open { transform:translateX(0); }
  .server_list { grid-template-columns:1fr; }
  .ogpanel_monitor-list { grid-template-columns:1fr; }
  .p-services { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 768px) {
  .header { padding:0 var(--space-4); }
  .ogpanel_page { padding:var(--space-3); }
  .miniscreen { display:none; }
  .nav-server { flex-wrap:wrap; }
}

/* === BACKWARD COMPATIBILITY LAYER === */

/* ============================================
   Backward Compatibility Layer
   Maps old class names to new design system
   ============================================ */

/* === Layout Aliases === */
.header { display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6); height:var(--header-height); background:var(--bg-header); border-bottom:1px solid var(--border); box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.header-left, .header-right { display:flex; align-items:center; gap:var(--space-4); }
.brand__logo { display:flex; align-items:center; gap:var(--space-3); font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none; }
.brand__logo:hover { color:var(--primary); }
.brand__logo .logo, .logo { width:36px; height:36px; background:linear-gradient(135deg, var(--primary), var(--purple)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.user { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius); transition:var(--transition); }
.user:hover { background:var(--primary-light); }
.user_lk { display:flex; align-items:center; gap:var(--space-3); }
.user_lk a { padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); font-size:0.875rem; font-weight:500; color:var(--text-muted); text-decoration:none; transition:var(--transition); display:flex; align-items:center; gap:var(--space-2); }
.user_lk a:hover { background:var(--primary-light); color:var(--primary); }
.profile__minuses { color:var(--danger) !important; }
.profile__minuses:hover { background:var(--danger-light) !important; }
.recsign { display:flex; gap:var(--space-2); }
.recsign a { display:inline-block; padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-weight:500; font-size:0.875rem; text-decoration:none; }
.recsign a:first-child { background:var(--primary); color:white !important; }
.recsign a:last-child { background:var(--primary-light); color:var(--primary) !important; }
.miniscreen { display:flex; align-items:center; gap:var(--space-2); }

.ogpanel_layout { display:flex; flex-direction:column; min-height:100vh; }
.ogpanel_page { max-width:1400px; margin:0 auto; padding:var(--space-5); }
.bconteiner { width:var(--sidebar-width); background:var(--bg-sidebar); color:var(--text-sidebar); position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:200; display:flex; flex-direction:column; transition:var(--transition); }
.bconteiner .title { padding:var(--space-3) var(--space-3); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-light); }
.bconteiner ul { list-style:none; padding:var(--space-2); margin:0; }
.bconteiner li { margin-bottom:2px; }
.bconteiner li a { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); color:var(--text-sidebar); text-decoration:none; border-radius:var(--radius-sm); font-size:0.875rem; font-weight:500; transition:var(--transition); }
.bconteiner li a:hover { background:rgba(255,255,255,0.06); color:white; }
.bconteiner li a.active { background:var(--primary); color:white; }
.bconteiner li a i { font-size:1.1rem; width:20px; text-align:center; }

.ogp__main { flex:1; margin-left:var(--sidebar-width); padding:var(--space-6); transition:var(--transition); }
.ogpanel_footer { background:var(--bg-sidebar); color:var(--text-light); padding:var(--space-8) var(--space-6); margin-top:auto; }
.footer__header { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-8); max-width:1400px; margin:0 auto; }
.pageFoot-logo { display:flex; align-items:center; gap:var(--space-3); }
.pageFoot-logoTitle { font-size:1.25rem; font-weight:700; color:white; display:flex; align-items:center; gap:var(--space-2); }

/* === Card Aliases === */
.block, .card { background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; transition:var(--transition); margin-bottom:var(--space-4); }
.block:hover, .card:hover { box-shadow:var(--shadow-md); }
.block_content, .card-body { padding:var(--space-5); }
.hblock_content, .card-header { padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg-card); }
.card-title { font-size:1rem; font-weight:600; color:var(--text); margin:0; }
.card-2 { background:var(--bg-card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); transition:var(--transition); }
.card-2:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.body-card-2 { padding:var(--space-4); }

/* === Badge Aliases === */
.badge { display:inline-flex; align-items:center; padding:4px 10px; font-size:0.75rem; font-weight:700; border-radius:var(--radius-full); line-height:1.4; white-space:nowrap; }
.bg-label-primary, .badge-light-primary { background:var(--primary-light); color:var(--primary); }
.bg-label-success { background:var(--success-light); color:var(--success); }
.bg-label-danger { background:var(--danger-light); color:var(--danger); }
.bg-label-warning { background:var(--warning-light); color:var(--warning); }
.bg-label-info { background:var(--info-light); color:var(--info); }
.bg-label-secondary { background:var(--bg-hover); color:var(--text-muted); }
.badge-round { border-radius:var(--radius-full); }
.badge-pill { border-radius:var(--radius-full); }

/* === Button Aliases === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:9px 18px; font-size:0.875rem; font-weight:600; border:none; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); text-decoration:none; font-family:var(--font); line-height:1.5; white-space:nowrap; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:0 4px 12px rgba(99,102,241,0.35); color:white; }
.btn-success { background:var(--success); color:white; }
.btn-success:hover { background:var(--success-hover); }
.btn-danger { background:var(--danger); color:white; }
.btn-danger:hover { background:var(--danger-hover); }
.btn-warning { background:var(--warning); color:white; }
.btn-info { background:var(--info); color:white; }
.btn-default { background:var(--bg-card); color:var(--text); border:1px solid var(--border); }
.btn-default:hover { background:var(--bg-hover); }
.btn-gray { background:var(--secondary, #64748b); color:white; }
.btn-sm { padding:6px 12px; font-size:0.8rem; }
.btn-full { width:100%; }
.btn-server { padding:var(--space-2) var(--space-4); font-size:0.8rem; border-radius:6px; }
.bs_button { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:0.85rem; font-weight:500; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); cursor:pointer; transition:var(--transition); }
.bs_button:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.btn-switch { position:relative; width:44px; height:24px; background:var(--border); border-radius:12px; border:none; cursor:pointer; transition:var(--transition); padding:0; }
.btn-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:white; border-radius:50%; transition:var(--transition); box-shadow:var(--shadow); }
.btn-switch.active { background:var(--primary); }
.btn-switch.active::after { left:23px; }

/* === Server Specific === */
.server_list { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--space-5); padding:4px; }
.server_img-maps { width:100%; height:160px; object-fit:cover; border-radius:var(--radius) var(--radius) 0 0; }
.info-serv { padding:var(--space-4); }
.server_name { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:var(--space-2); }
.server_info, .server-info { font-size:0.8rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-2); }
.server_info span, .server-info div { display:inline-flex; align-items:center; gap:4px; }
.server_nav, .nav-server { display:flex; align-items:center; gap:4px; padding:var(--space-3) var(--space-4); background:var(--bg); border-top:1px solid var(--border); overflow-x:auto; }
.servernav__btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:0.8rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:6px; transition:var(--transition); white-space:nowrap; border:none; background:none; cursor:pointer; }
.servernav__btn:hover, .servernav__btn.active, .nav-server a:hover, .nav-server button:hover, .nav-server a.active, .nav-server button.active { background:var(--primary-light); color:var(--primary); }
.card-server-title { font-size:1rem; font-weight:600; color:var(--text); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.server_console { background:#0f172a; color:#22d3ee; font-family:var(--font-mono); font-size:0.8rem; line-height:1.6; padding:var(--space-4); border-radius:var(--radius); overflow:auto; max-height:400px; white-space:pre-wrap; word-break:break-all; }

/* === Table Aliases === */
.table_pad, .table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.table_pad th, .table th { padding:var(--space-3) var(--space-4); text-align:left; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); background:var(--bg); border-bottom:2px solid var(--border); }
.table_pad td, .table td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.table_pad tr:hover td, .table tbody tr:hover td { background:var(--primary-light); }
.table_pad tr:last-child td, .table tr:last-child td { border-bottom:none; }
.table-responsive { overflow-x:auto; }
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }

/* === Form Aliases === */
.form-control { width:100%; padding:10px 14px; font-size:0.875rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); transition:var(--transition); outline:none; font-family:var(--font); box-sizing:border-box; }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-select { width:100%; padding:10px 36px 10px 14px; font-size:0.875rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text); transition:var(--transition); outline:none; appearance:none; cursor:pointer; font-family:var(--font); }
.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-label { display:block; font-size:0.875rem; font-weight:600; color:var(--text); margin-bottom:var(--space-2); }
.form-block { margin-bottom:var(--space-5); }
.input-group { display:flex; align-items:stretch; }
.input-group .form-control { border-top-right-radius:0; border-bottom-right-radius:0; flex:1; }
.input-group .btn { border-top-left-radius:0; border-bottom-left-radius:0; }

/* === Navigation Aliases === */
.gmenu, .nav-server { display:flex; gap:var(--space-1); padding:var(--space-2); background:var(--bg); border-radius:var(--radius); overflow-x:auto; margin-bottom:var(--space-5); }
.gmenu a, .nav-server a, .nav-server button { padding:8px 16px; font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition); white-space:nowrap; border:none; background:none; cursor:pointer; font-family:var(--font); }
.gmenu a:hover, .gmenu a.active, .nav-server a:hover, .nav-server button:hover, .nav-server a.active, .nav-server button.active { background:var(--bg-card); color:var(--primary); box-shadow:var(--shadow); }
.vmenu { display:flex; flex-direction:column; gap:2px; padding:var(--space-2); }
.vmenu a { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition); }
.vmenu a:hover, .vmenu a.active { background:var(--primary-light); color:var(--primary); }

/* === Breadcrumb & Pagination === */
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) 0; margin-bottom:var(--space-5); list-style:none; font-size:0.875rem; flex-wrap:wrap; }
.breadcrumb-item { color:var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { content:'/'; padding-right:var(--space-2); color:var(--text-light); }
.breadcrumb-item a { color:var(--primary); font-weight:500; }
.breadcrumb-item.active { color:var(--text); font-weight:600; }
.pages { padding:var(--space-3) 0; }
.pagination { display:flex; align-items:center; gap:var(--space-1); list-style:none; padding:0; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; font-size:0.85rem; font-weight:500; color:var(--text-muted); text-decoration:none; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); transition:var(--transition); }
.pagination a:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.pagination .active a, .pagination .active span { background:var(--primary); border-color:var(--primary); color:white; }

/* === Progress === */
.progress { height:8px; background:var(--bg-hover); border-radius:var(--radius-full); overflow:hidden; border:1px solid var(--border); }
.progress-bar { height:100%; background:var(--primary); border-radius:var(--radius-full); transition:width 0.4s ease; }

/* === Informer & Loader === */
.informer { display:inline-flex; align-items:center; gap:var(--space-2); padding:8px 14px; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:600; background:var(--bg); border:1px solid var(--border); color:var(--text); }
.loader { display:inline-block; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:ogp-spin 0.8s linear infinite; }

/* === Bootstrap-like Utilities === */
.d-flex { display:flex !important; }
.d-inline-flex { display:inline-flex !important; }
.d-block { display:block !important; }
.d-none { display:none !important; }
.flex-column { flex-direction:column !important; }
.flex-grow-1 { flex-grow:1 !important; }
.flex-shrink-0 { flex-shrink:0 !important; }
.flex-wrap { flex-wrap:wrap !important; }
.align-items-center { align-items:center !important; }
.align-items-start { align-items:flex-start !important; }
.justify-content-between { justify-content:space-between !important; }
.justify-content-center { justify-content:center !important; }
.text-center { text-align:center !important; }
.text-right { text-align:right !important; }
.text-left { text-align:left !important; }
.fw-bold { font-weight:700 !important; }
.fw-semi-bold, .fw-semibold { font-weight:600 !important; }
.fw-medium { font-weight:500 !important; }
.fw-normal { font-weight:400 !important; }
.text-primary { color:var(--primary) !important; }
.text-success { color:var(--success) !important; }
.text-danger { color:var(--danger) !important; }
.text-warning { color:var(--warning) !important; }
.text-muted { color:var(--text-muted) !important; }
.text-dark { color:var(--text) !important; }
.text-600 { color:var(--text-muted) !important; }
.bg-primary { background:var(--primary) !important; }
.bg-success { background:var(--success) !important; }
.bg-danger { background:var(--danger) !important; }
.opacity-7 { opacity:0.7; }
.rounded { border-radius:var(--radius) !important; }
.border { border:1px solid var(--border) !important; }
.overflow-hidden { overflow:hidden !important; }
.overflow-auto { overflow:auto !important; }
.w-100, .w100p { width:100% !important; }
.h-100 { height:100% !important; }
.position-relative { position:relative; }
.position-absolute { position:absolute; }
.cursor-pointer { cursor:pointer; }

/* Spacing */
.m-0 { margin:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.mb-1 { margin-bottom:var(--space-1) !important; }
.mb-2 { margin-bottom:var(--space-2) !important; }
.mb-25 { margin-bottom:10px !important; }
.mb-3 { margin-bottom:var(--space-3) !important; }
.mb-4 { margin-bottom:var(--space-4) !important; }
.mb-5 { margin-bottom:var(--space-5) !important; }
.mt-0 { margin-top:0 !important; }
.mt-1 { margin-top:var(--space-1) !important; }
.mt-2 { margin-top:var(--space-2) !important; }
.mt-3 { margin-top:var(--space-3) !important; }
.mt-4 { margin-top:var(--space-4) !important; }
.mt-5 { margin-top:var(--space-5) !important; }
.my-0 { margin-top:0 !important; margin-bottom:0 !important; }
.my-1 { margin-top:var(--space-1) !important; margin-bottom:var(--space-1) !important; }
.my-2 { margin-top:var(--space-2) !important; margin-bottom:var(--space-2) !important; }
.my-3 { margin-top:var(--space-3) !important; margin-bottom:var(--space-3) !important; }
.ml-1, .ms-1 { margin-left:var(--space-1) !important; }
.ml-2, .ms-2 { margin-left:var(--space-2) !important; }
.ml-auto, .ms-auto { margin-left:auto !important; }
.mr-1, .me-1 { margin-right:var(--space-1) !important; }
.mr-2, .me-2 { margin-right:var(--space-2) !important; }
.mx-auto { margin-left:auto !important; margin-right:auto !important; }
.p-0 { padding:0 !important; }
.p-1 { padding:var(--space-1) !important; }
.p-2 { padding:var(--space-2) !important; }
.p-3 { padding:var(--space-3) !important; }
.p-4 { padding:var(--space-4) !important; }
.p-5 { padding:var(--space-5) !important; }
.px-1 { padding-left:var(--space-1) !important; padding-right:var(--space-1) !important; }
.px-2 { padding-left:var(--space-2) !important; padding-right:var(--space-2) !important; }
.px-3 { padding-left:var(--space-3) !important; padding-right:var(--space-3) !important; }
.px-4 { padding-left:var(--space-4) !important; padding-right:var(--space-4) !important; }
.py-1 { padding-top:var(--space-1) !important; padding-bottom:var(--space-1) !important; }
.py-2 { padding-top:var(--space-2) !important; padding-bottom:var(--space-2) !important; }
.py-3 { padding-top:var(--space-3) !important; padding-bottom:var(--space-3) !important; }

/* Font Sizes */
.fs-0 { font-size:1.25rem !important; }
.fs--1 { font-size:0.875rem !important; }
.fs--2 { font-size:0.75rem !important; }
.fs-1 { font-size:1rem !important; }
.lh-lg { line-height:1.6; }

/* Grid */
.row { display:flex; flex-wrap:wrap; margin:0 calc(var(--space-3) * -1); }
[class*="col-"] { padding:0 var(--space-3); }
.col { flex:1; padding:0 var(--space-3); min-width:0; }
.col-1 { flex:0 0 8.333%; }
.col-2 { flex:0 0 16.666%; }
.col-3 { flex:0 0 25%; }
.col-4 { flex:0 0 33.333%; }
.col-5 { flex:0 0 41.666%; }
.col-6 { flex:0 0 50%; }
.col-7 { flex:0 0 58.333%; }
.col-8 { flex:0 0 66.666%; }
.col-9 { flex:0 0 75%; }
.col-10 { flex:0 0 83.333%; }
.col-11 { flex:0 0 91.666%; }
.col-12 { flex:0 0 100%; }
.col-auto { flex:0 0 auto; width:auto; }
.col-lg-3 { flex:0 0 25%; }
.col-lg-4 { flex:0 0 33.333%; }
.col-lg-6 { flex:0 0 50%; }
.col-lg-8 { flex:0 0 66.666%; }
.col-lg-12 { flex:0 0 100%; }
.col-md-6 { flex:0 0 50%; }
.col-md-12 { flex:0 0 100%; }
.col-sm-6 { flex:0 0 50%; }
.col-sm-12 { flex:0 0 100%; }
.col-xs-12 { flex:0 0 100%; }

/* Match Height */
.match-height { display:flex; flex-wrap:wrap; }
.match-height > [class*="col"] { display:flex; }
.match-height > [class*="col"] > .card { flex:1; }

/* Text copy */
.text_copy_link { cursor:pointer; color:var(--text-light); margin-left:var(--space-2); }
.text_copy_link:hover { color:var(--primary); }

/* Truncate */
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Spoiler */
.spoiler { cursor:pointer; color:var(--primary); }
.spoiler_main { display:none; margin-top:var(--space-2); padding:var(--space-3); background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--border); }

/* Ogpanel specific */
.ogp-usersList { font-size:0.8rem; color:var(--text-muted); }
.space { height:var(--space-6); }
.change_close { position:absolute; top:var(--space-2); right:var(--space-2); cursor:pointer; color:var(--text-light); font-size:1.2rem; }
.change_close:hover { color:var(--danger); }
.change_map { position:absolute; }

/* Ti icons sizing */
.ti { font-size:1.1rem; line-height:1; vertical-align:middle; }
.ti-sm, .ti-min { font-size:0.85rem; }
.ti-lg { font-size:1.5rem; }
.icon-games { width:24px; height:24px; border-radius:4px; object-fit:cover; }

/* Monitoring cards */
.ogp__monitor { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--space-5); }
.ogp-monitor-box { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.ogp-monitor-box:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ogp-monitor-card { padding:var(--space-4); text-align:center; }
.ogp-monitor-card img.poster { width:80px; height:80px; margin:0 auto var(--space-3); display:block; }
.game-name { font-weight:700; color:var(--text); display:block; }
.game-numPl { font-size:0.8rem; color:var(--text-muted); }

/* Pages */
.ogpanel_monitor-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-5); }
.ogp-monitor-card { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.ogp-monitor-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.monitor__server-img { width:100%; height:140px; object-fit:cover; }
.monitor__server-box { padding:var(--space-4); }
.monitor__server-box h4 { font-size:0.95rem; font-weight:700; margin-bottom:var(--space-2); color:var(--text); }

/* Plugins */
.plugin_block { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:var(--space-4); transition:var(--transition); }
.plugin_block:hover { box-shadow:var(--shadow-md); }
.plugin_info { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-3); }
.plugin_info h4 { font-size:0.95rem; font-weight:700; color:var(--text); }
.plugin_info p { font-size:0.8rem; color:var(--text-muted); margin:4px 0 0; }
.plugin_action { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); }

/* Help & Chat */
.help_main { max-width:800px; margin:0 auto; }
.help_dialog { display:flex; flex-direction:column; gap:var(--space-4); }
.help_msg { display:flex; gap:var(--space-3); padding:var(--space-4); background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }
.help_msg_ava { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.help_question { font-weight:600; color:var(--text); margin-bottom:4px; font-size:0.95rem; }
.bubbles { display:flex; flex-direction:column; gap:10px; max-width:600px; }
.bubble { display:flex; align-items:flex-start; gap:10px; }
.bubble-content { padding:10px 16px; border-radius:16px; font-size:0.875rem; line-height:1.5; max-width:80%; word-break:break-word; background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-top-left-radius:4px; }
.bubble:nth-child(even) .bubble-content { background:var(--primary); color:white; border-color:var(--primary); border-top-left-radius:16px; border-top-right-radius:4px; margin-left:auto; }

/* P-services */
.p-services { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--space-5); }
.info-card--big { background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:var(--space-6); text-align:center; transition:var(--transition); }
.info-card--big:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.gameImgBG { width:80px; height:80px; border-radius:var(--radius); object-fit:cover; margin:0 auto var(--space-4); box-shadow:var(--shadow); }

/* Dark theme overrides */
.dark .card, .dark .block { background-color:var(--bg-card); box-shadow:0 1px 2px rgba(0,0,0,0.2); }
.dark .table td, .dark .table_pad td { border-color:var(--border); }
.dark .form-control, .dark .form-select { background:var(--bg-input); border-color:var(--border); color:var(--text); }

/* Responsive overrides */
@media (max-width: 992px) {
  .ogp__main { margin-left:0; padding:var(--space-4); }
  .bconteiner { transform:translateX(-100%); }
  .bconteiner.open { transform:translateX(0); }
  .server_list { grid-template-columns:1fr; }
  .ogpanel_monitor-list { grid-template-columns:1fr; }
  .p-services { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 768px) {
  .header { padding:0 var(--space-4); }
  .ogpanel_page { padding:var(--space-3); }
  .miniscreen { display:none; }
  .nav-server { flex-wrap:wrap; }
}

/* ===  === */

/* ===  === */

/* ===  === */

/* ===  === */

/* ===  === */

/* ===  === */

/* ===  === */

/* ===  === */

/* === chat.css === */
/*-------------------------------*/
/*       OGPANEl App style       */
/*---    21 05 2022              */
/*       https://ogpanel.ru      */
/*-------------------------------*/
.bubble .time,.emoji{vertical-align:middle}.bubble .name,.bubble-name-rank{text-overflow:ellipsis;overflow:hidden}.chat-content-container{background-color:#f8f7fa}.chat-title{box-shadow:0 4px 10px -8px rgba(0,0,0,.75);background:#fff;padding:.5rem;display:flex;align-items:center;justify-content:center;border-top:1px solid #efefef;position:relative;z-index:2}.bubbles-group-avatar-container{position:absolute;inset:0;display:flex;flex-direction:column-reverse;z-index:2;pointer-events:none}.chat-group,.chat_body{position:relative}.bubbles-group-avatar{position:sticky!important;top:0;bottom:.1875rem;cursor:pointer;pointer-events:all}.bubble,.bubble .message,.bubble-content,.bubbles,.chat_msg,.dropdown,.emoji,.messageBox,.v-avatar,.v-avatar img{position:relative}.avatar-photo{width:40px!important;height:40px!important;display:block}.avatar-like{--size:40px;--multiplier:1.35;color:#fff;width:var(--size);height:var(--size);line-height:var(--size)!important;text-align:center;font-size:calc(1.25rem / var(--multiplier));-webkit-user-select:none;-moz-user-select:none;user-select:none;text-transform:uppercase;font-weight:var(--font-weight-bold)}.bubble,.bubble-content{display:flex;-webkit-user-select:none;-moz-user-select:none}.bubble-content-wrapper{margin-inline-start:2.875rem;display:flex;flex-direction:column;max-width:85%}.bubbles{margin-bottom:.375rem;--translateY:0;width:100%;flex:1 1 auto;z-index:1;transform:translate3d(0,var(--translateY),0)}.bubble{z-index:1;user-select:none;flex-wrap:wrap}.bubble-content{min-width:180px;max-width:100%;border-radius:1rem;border-end-start-radius:0!important;box-shadow:0 1px 2px #10232f26;flex-direction:column-reverse;z-index:2;user-select:none;background-color:#fff}.bubble .message{padding:0 8px 5px;max-width:100%;color:#000;line-height:1.3242;word-break:break-word;white-space:pre-line}.bubble .time,.bubble .time-inner{line-height:1;height:calc(1rem - 4px)}.bubble .time{visibility:hidden;font-size:calc(1rem - 5px);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;display:inline-flex;z-index:1;cursor:pointer;direction:ltr;float:right;margin-inline-start:-3px;padding-inline-end:8px}[dir=auto]{unicode-bidi:plaintext}.bubble .time-inner{margin-bottom:4px;pointer-events:all;position:absolute;bottom:0;inset-inline-end:0;display:flex;align-items:center;padding:inherit;white-space:nowrap;visibility:visible;color:#707579}.message .emoji{margin:0}.bubble .name{padding:4px 8px 0;font-weight:500;max-width:100%}.bubble .peer-title{flex:0 0 auto;max-width:100%}.bubble .bubble-tail{position:absolute;width:11px;height:20px;z-index:-2;display:block;fill:#ffffff;transform:translateY(0) scaleX(1);margin-inline-start:-8.4px}.v-avatar,.v-avatar img{border-radius:999px;box-shadow:0 2px 8px -6px rgba(0,0,0,.75);border:1px solid #f6f8fb;max-width:inherit}.chat_data_foot>div>div>a .image,.chat_msg_ava{border:4px solid #fff;float:left;overflow:hidden}.chat_main_head span.chat_sender>a{display:none}.chat_main_head:hover span.chat_sender>a{display:initial}.chat_data a{text-decoration:underline}.chat_data_foot{padding:5px 5px 0;font-size:10px}.chat_data_foot>div{display:inline-block;width:100%;margin:5px 0}.chat_data_foot>div>div{width:88px;float:left;margin-right:5px}.chat_data_foot>div>div>a .image{position:relative;height:80px;width:80px;box-shadow:0 0 10px rgba(0,0,0,.2);background-color:#fff;background-size:contain!important;background-repeat:no-repeat!important;text-align:center}.chat_msg{display:block;margin-bottom:15px}.chat_msg_ava{height:57px;width:57px;box-shadow:0 0 1px 1px #ddd;margin-top:5px;border-radius:50%}.chat_msg>.chat_main{margin-left:80px;padding-right:5px;display:block}.chat_main_head{padding:0 5px;line-height:22px}.chat_main_head>span.chat_sender{color:#597da3;font-size:11px}.chat_date{color:#888;float:right;font-size:10px;margin-top:2px}.chat_msg_ava img{width:110%;min-height:112%;margin-top:-3px;margin-left:-2px}#dialog{height:400px;overflow-y:scroll}.emoji{background:url(../images/smiles_2@2x.png) 0 0/80px 620px no-repeat;width:20px;height:20px;display:inline-block;transform:scale(.9);margin:6px}.emoji[data-value=emoji_1],.emoji_1{background-position:0 0}.emoji[data-value=emoji_2],.emoji_2{background-position:0 -20px}.emoji[data-value=emoji_3],.emoji_3{background-position:0 -40px}.emoji[data-value=emoji_4],.emoji_4{background-position:0 -60px}.emoji[data-value=emoji_5],.emoji_5{background-position:0 -80px}.emoji[data-value=emoji_6],.emoji_6{background-position:0 -100px}.emoji[data-value=emoji_7],.emoji_7{background-position:0 -120px}.emoji[data-value=emoji_8],.emoji_8{background-position:0 -140px}.emoji[data-value=emoji_9],.emoji_9{background-position:0 -160px}.emoji[data-value=emoji_10],.emoji_10{background-position:0 -180px}.emoji[data-value=emoji_11],.emoji_11{background-position:0 -200px}.emoji[data-value=emoji_12],.emoji_12{background-position:0 -220px}.emoji[data-value=emoji_13],.emoji_13{background-position:0 -240px}.emoji[data-value=emoji_14],.emoji_14{background-position:0 -260px}.emoji[data-value=emoji_15],.emoji_15{background-position:0 -280px}.emoji[data-value=emoji_16],.emoji_16{background-position:0 -300px}.emoji[data-value=emoji_17],.emoji_17{background-position:0 -320px}.emoji[data-value=emoji_18],.emoji_18{background-position:0 -340px}.emoji[data-value=emoji_19],.emoji_19{background-position:0 -360px}.emoji[data-value=emoji_20],.emoji_20{background-position:0 -380px}.emoji[data-value=emoji_21],.emoji_21{background-position:0 -400px}.emoji[data-value=emoji_22],.emoji_22{background-position:0 -420px}.emoji[data-value=emoji_23],.emoji_23{background-position:0 -440px}.emoji[data-value=emoji_24],.emoji_24{background-position:0 -460px}.emoji[data-value=emoji_25],.emoji_25{background-position:0 -480px}.emoji[data-value=emoji_26],.emoji_26{background-position:0 -500px}.emoji[data-value=emoji_27],.emoji_27{background-position:0 -520px}.emoji[data-value=emoji_28],.emoji_28{background-position:0 -540px}.emoji[data-value=emoji_29],.emoji_29{background-position:0 -560px}.emoji[data-value=emoji_30],.emoji_30{background-position:0 -580px}.emoji[data-value=emoji_31],.emoji_31{background-position:-20px 0}.emoji[data-value=emoji_32],.emoji_32{background-position:-20px -40px}.grow-wrap{display:grid}.grow-wrap::after{content:attr(data-replicated-value) " ";white-space:pre-wrap;visibility:hidden}.grow-wrap>textarea{resize:none;overflow:hidden}.grow-wrap::after,.grow-wrap>textarea{border:1px solid #d1d1d1;padding:.3125rem .5rem;grid-area:1/1/2/2;border-radius:1rem;display:flex;align-items:center;flex-direction:column;transform:translate(0) scaleX(1);transition:.15s ease-in-out}.grow-wrap>textarea:focus{background-color:#fff;border-color:#0038d9b8;-webkit-box-shadow:0 3px 10px 0 rgb(34 41 47 / 10%);box-shadow:0 3px 10px 0 rgb(34 41 47 / 10%);outline:0}.bubble .title-flex{display:flex;align-items:center;max-width:inherit;overflow:inherit}.bubble-name-rank{color:#707579;font-size:calc(1rem - 4px);padding-inline-start:0.25rem;margin-left:auto;order:999;white-space:nowrap}.messageBox{border:1px solid #d1d1d1;box-shadow:0 1px 8px 1px #0000001f;border-radius:1rem;margin-top:1rem;padding:.5rem}.dropdown{display:inline-flex}.dropdown-menu{flex-wrap:wrap;padding:.5rem;position:absolute;bottom:98%;left:0;background:#fff;width:272px;box-shadow:0 0 7px #00000047;border-radius:1rem;z-index:2;display:none;animation:.3s ease-in-out forwards growOut}.dropdown:hover .dropdown-menu,.open .dropdown-menu{display:flex}.bubble_im_messages{flex-direction:row-reverse}.bubble-content-wrapper_im_messages{margin-inline-start:0}.bubble-content_im_messages{background-color:#ecf4ff;border-end-end-radius:0!important;border-end-start-radius:1rem!important}.bubble .message_im_messages{padding-top:4px}
/* === help.css === */
#drop-files{position:relative;width: 100%;height:56px;margin:0 auto;background-color:#ffffff;border:2px dashed #dcdcdc;text-align:center;font-size: 13px;}#drop-files p{clear:none;padding:0;margin:0}#uploaded-holder{display:none;position:relative;margin:0 auto 10px;width:100%}#dropped-files{display:block;margin:0 auto;width:100%}#upload-button{z-index:9999;display:none;margin:5px 0}.drop-button,.success-button{display:inline-block;padding:0;width:100%;font-size:13px;bottom:0;text-align:center;text-decoration:none;color:#ffffff !important}.drop-button{background-color:#b07474}.success-button{background-color:#74b084}#dropped-files .image,#uploaded-files .image{position:relative;height:100px;width:100px;border:4px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.1);background-color:#fff;float:left;overflow:hidden;background-size:contain !important;background-repeat:no-repeat !important;text-align:center}#upload-button .ss-upload{font-size:0.7em}#upload-button span{position:relative;text-align:center;background:white;font-size:15px;padding:5px;margin-right:8px}#loading{width:100%;position:relative;margin:5px 0}#loading-bar{width:100%;height:16px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,0.1);border-radius:5px;padding:2px}.loading-color{width:0;height:100%;-webkit-transition:all 0.1s ease-in;-moz-transition:all 0.1s ease-in;-ms-transition:all 0.1s ease-in;-o-transition:all 0.1s ease-in;transition:all 0.1s ease-in;border-radius:inherit;background-color:#4edbf1}#loading-content{position:relative;font-size:13px;font-weight:bold;text-align:center;width:100%}#file-name-holder{width:100%;float:left}#file-name-holder h1{padding:5px 0;font-size:13px;margin:0}#drop-files input{border:0;background-color:#ffffff;width:initial}#uploaded-files .img-block:nth-child(8),#dropped-files .img-block:nth-child(9){margin-right:0}.img-block{width:108px;float:left;margin-right:12px}.help_main_head span.help_sender > a{display:none}.help_main_head:hover span.help_sender > a{display:initial}.help_data a{text-decoration:underline}.help_data_foot{padding:5px 5px 0 5px;font-size:10px}.help_data_foot > div{display:inline-block;width:100%;margin:5px 0}.help_data_foot > div > div{width:88px;float:left;margin-right:5px}.help_data_foot > div > div > a .image{position:relative;height:80px;width:80px;border:4px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.2);background-color:#fff;float:left;overflow:hidden;background-size:contain !important;background-repeat:no-repeat !important;text-align:center}.help_msg{position:relative;display:block;margin-bottom:15px}.help_msg_ava{height:40px;width:40px;border:2px solid #fff;box-shadow:0 0 1px 1px #DDD;overflow:hidden;margin-top: 20px;margin-right: 15px;border-radius:50%;float:right;}.help_msg > .help_main{margin-right:73px}.help_msg > .help_main{padding-right:5px;display:block}.help_main_head{padding:0 5px;line-height:22px}.help_main_head > span.help_sender{color:#597da3;font-size:12px}.help_date{color:#888;float:right;font-size:9px;margin-top:2px}.help_body{position:relative}.help_msg > .help_main .help_body span.help_sprite{background:url(../images/help_sprite.png) no-repeat 0 0;width:25px;height:17px;display:block;position:absolute;right:-22px;top:8px}.help_data{background:#fff;border:1px solid #ddd;border-radius:4px;padding:10px;color:#555;font-size:13px;z-index:0;display:block;font-weight:300;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05);word-wrap:break-word}.help_msg_ava img{width:100%;min-height:110%}
/* === monitoring.css === */
/*-------------------------------*/
/*   OGPANEl App style bootbox   */
/*---    21 05 2022              */
/*       https://ogpanel.ru      */
/*-------------------------------*/
.ogp__monitor{grid-gap:8px;display:grid;gap:.5rem;grid-template-columns:repeat(5,136.6666666666px)}.ogp-monitor-box{background-color:#fff;border-radius:var(--ogpanel-border-base);box-shadow:0 1px 2px #ccc;display:block;position:relative;transition-duration:.2s;transition-property:box-shadow;transition-timing-function:ease-in-out}.ogp-monitor-box img,.ogpanel_monitor-list{border-radius:var(--ogpanel-border-radius);position:relative}.ogp-monitor-box:hover{box-shadow:0 6px 12px rgba(9,10,11,.12)}.ogp-monitor-box img{width:32px;height:32px;margin-right:var(--ogpanel-card-min)}.ogp-monitor-card{cursor:pointer;display:flex;align-items:center;padding:var(--ogpanel-card-min)}.ogp-monitor-card .game-name{display:block;font-weight:600;color:rgba(var(--ogpanel-gray-900-rgb))}.ogp-monitor-card .game-numPl{color:rgba(var(--ogpanel-gray-600-rgb));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;display:block}.ogpanel_monitor-list{display:flex;box-shadow:0 1px 10px -6px rgba(0,0,0,.75);height:52px;overflow:hidden}.server_unit,.tariff_pro:before{display:inline-block;font-weight:600;border-radius:5px}.tariff_pro:before{content:'PRO';background:#23bf19;background:linear-gradient(to bottom,#23bf19 0,#23991a 50%);padding:2px 5px;font-size:12px;line-height:12px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}.server_nameMon{text-decoration:none;color:#000;transition:color .1s linear;max-width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.serve_unit_1,.server_nameMon:hover{color:#3562fb}.server_unit{position:relative;padding:0 5px;font-size:13px;letter-spacing:-.25px;cursor:default;backdrop-filter:blur(5px)}.serve_unit_1{background:rgba(53,98,251,.15)}.serve_unit_2{background:rgba(35,191,25,.15);color:#23bf19}.imgIcnservices{background-position:center;background-size:contain;background-repeat:no-repeat;width:46px;height:46px}.srv-colors-1{box-shadow:0 0 5px #fed700,0 0 5px #fed700}.srv-colors-2{box-shadow:0 0 5px #23bf19,0 0 5px #23bf19}.monIcn{width:18px;height:18px;border:1px solid #ccc;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:.7}.monIcn:hover{opacity:1}.mini-icon{display:inline-block;background:url(/template/default/images/monitoring/services.png);width:16px;height:16px;opacity:.8}span.icon-cscz{background-position-x:-18px}span.icon-cssold{background-position-x:-36px}span.icon-css{background-position-x:-55px}span.icon-csgo{background-position-x:-74px}span.icon-samp{background-position-x:-111px}span.icon-crmp{background-position-x:-543px}span.icon-mta{background-position-x:-129px}span.icon-mc{background-position-x:-92px}span.icon-www{background-position-x:-416px}span.icon-l4d{background-position-x:-218px}span.icon-l4d2{background-position-x:-236px}span.icon-tf2{background-position-x:-182px}span.icon-rust{background-position-x:-146px}span.icon-gm{background-position-x:-506px}span.icon-arma3{background-position-x:-560px}span.icon-unt{background-position-x:-578px}span.icon-dods{background-position-x:-254px}
/* === img.css === */
#fancybox-loading{position:fixed;top:50%;left:50%;height:40px;width:40px;margin-top:-20px;margin-left:-20px;cursor:pointer;overflow:hidden;background:transparent;z-index:1104;display:none}* html #fancybox-loading{position:absolute;margin-top:0}#fancybox-loading div{position:absolute;top:0;left:0;width:40px;height:480px;background:transparent url('../images/icons/box/fancy_loading.png') no-repeat}#fancybox-overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:#000;z-index:1100;display:none}* html #fancybox-overlay{position:absolute;width:100%}#fancybox-tmp{padding:0;margin:0;border:0;overflow:auto;display:none}#fancybox-wrap{position:absolute;top:0;left:0;margin:0;padding:20px;z-index:1101;display:none}#fancybox-outer{position:relative;width:100%;height:100%;background:#FFF}#fancybox-inner{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;outline:none;overflow:hidden}#fancybox-hide-sel-frame{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}#fancybox-close{position:absolute;top:-15px;right:-15px;width:32px;height:32px;background:url('../images/icons/box/fancy_close.png') top left no-repeat;cursor:pointer;z-index:1103;display:none}#fancybox_error{color:#444;font:normal 12px/20px Arial}#fancybox-content{height:auto;width:auto;padding:0;margin:0}#fancybox-img{width:100%;height:100%;padding:0;margin:0;border:none;outline:none;line-height:0;vertical-align:top;-ms-interpolation-mode:bicubic}#fancybox-frame{position:relative;width:100%;height:100%;border:none;display:block}#fancybox-title{position:absolute;bottom:0;left:0;font-family:Arial;font-size:12px;z-index:1102}.fancybox-title-inside{padding:10px 0;text-align:center;color:#333}.fancybox-title-outside{padding-top:5px;color:#FFF;text-align:center;font-weight:bold}.fancybox-title-over{color:#FFF;text-align:left}#fancybox-title-over{padding:10px;background:url('../images/icons/box/fancy_title_over.png');display:block}#fancybox-title-wrap{display:inline-block}#fancybox-title-wrap span{height:32px;float:left}#fancybox-title-left{padding-left:15px;background:transparent url('../images/icons/box/fancy_title_left.png') repeat-x}#fancybox-title-main{font-weight:bold;line-height:29px;background:transparent url('../images/icons/box/fancy_title_main.png') repeat-x;color:#FFF}#fancybox-title-right{padding-left:15px;background:transparent url('../images/icons/box/fancy_title_right.png') repeat-x}#fancybox-left,#fancybox-right{position:absolute;bottom:0;height:100%;width:35%;cursor:pointer;outline:none;background-image:url('../images/icons/box/blank.gif');z-index:1102;display:none}#fancybox-left{left:0}#fancybox-right{right:0}#fancybox-left-ico,#fancybox-right-ico{position:absolute;top:50%;left:-9999px;width:30px;height:30px;margin-top:-15px;cursor:pointer;z-index:1102;display:block}#fancybox-left-ico{background:transparent url('../images/icons/box/fancy_nav_left.png') no-repeat}#fancybox-right-ico{background:transparent url('../images/icons/box/fancy_nav_right.png') no-repeat}#fancybox-left:hover,#fancybox-right:hover{visibility:visible}#fancybox-left:hover span{left:20px}#fancybox-right:hover span{left:auto;right:20px}div.fancy-bg{position:absolute;padding:0;margin:0;border:0;z-index:1001}div#fancy-bg-n{top:-20px;left:0;width:100%;height:20px;background:transparent url('../images/icons/box/fancy_shadow_n.png') repeat-x}div#fancy-bg-ne{top:-20px;right:-20px;width:20px;height:20px;background:transparent url('../images/icons/box/fancy_shadow_ne.png') no-repeat}div#fancy-bg-e{top:0;right:-20px;height:100%;width:20px;background:transparent url('../images/icons/box/fancy_shadow_e.png') repeat-y}div#fancy-bg-se{bottom:-20px;right:-20px;width:20px;height:20px;background:transparent url('../images/icons/box/fancy_shadow_se.png') no-repeat}div#fancy-bg-s{bottom:-20px;left:0;width:100%;height:20px;background:transparent url('../images/icons/box/fancy_shadow_s.png') repeat-x}div#fancy-bg-sw{bottom:-20px;left:-20px;width:20px;height:20px;background:transparent url('../images/icons/box/fancy_shadow_sw.png') no-repeat}div#fancy-bg-w{top:0;left:-20px;height:100%;width:20px;background:transparent url('../images/icons/box/fancy_shadow_w.png') repeat-y}div#fancy-bg-nw{top:-20px;left:-20px;width:20px;height:20px;background:transparent url('../images/icons/box/fancy_shadow_nw.png') no-repeat}
/* === user.css === */
/*-------------------------------*/
/*   OGPANEl App style bootbox   */
/*---    21 05 2022              */
/*       https://ogpanel.ru      */
/*-------------------------------*/
#drop-files,#loading-content{position:relative;text-align:center;width:100%}#drop-files{height:110px;margin:0 auto;background-color:#f9f9f9;border:2px dashed #dbdade;padding:1.5rem;cursor:pointer;border-radius:.5rem;font-weight:500}#drop-files p{clear:none;padding:0;margin:0}#uploaded-holder{display:none;position:relative;margin:0 auto 10px;width:100%}#dropped-files{display:block;margin:0 auto;width:100%}#upload-button{z-index:9999;display:none;margin:5px 0}#loading-content{font-size:13px;font-weight:700}#file-name-holder{width:100%;float:left}#file-name-holder h1{padding:5px 0;font-size:13px;margin:0}#drop-files input{border:0;background-color:#fff;width:initial}.image{width:140px;height:140px;background-repeat:no-repeat!important}
/* === theme.css === */
/* ============================================
   OGPanel Theme Overlay v1.0
   СТИЛИ ТОЛЬКО ДЛЯ НОВОГО LAYOUT
   НЕ трогает существующие стили шаблонов
   ============================================ */

/* === CSS Variables (для нового layout) === */
:root {
  --th-primary: #6366f1;
  --th-primary-hover: #4f46e5;
  --th-primary-light: #eef2ff;
  --th-bg: #f8fafc;
  --th-bg-card: #ffffff;
  --th-bg-sidebar: #1e293b;
  --th-text: #1e293b;
  --th-text-muted: #64748b;
  --th-border: #e2e8f0;
  --th-border-light: #f1f5f9;
  --th-radius: 12px;
  --th-radius-sm: 8px;
  --th-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --th-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --th-transition: all 0.2s ease;
}

.dark {
  --th-bg: #0f172a;
  --th-bg-card: #1e293b;
  --th-bg-sidebar: #0f172a;
  --th-text: #f1f5f9;
  --th-text-muted: #94a3b8;
  --th-border: #334155;
  --th-border-light: #1e293b;
  --th-primary-light: #312e81;
}

/* === Header === */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1.5rem;
  background: var(--th-bg-card);
  border-bottom: 1px solid var(--th-border);
  backdrop-filter: blur(12px);
}

.brand__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--th-text);
  text-decoration: none;
}

.brand__logo:hover { color: var(--th-primary); }

.brand__logo .logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--th-primary), #8b5cf6);
  border-radius: var(--th-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user_lk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user_lk a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--th-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--th-text-muted);
  text-decoration: none;
  transition: var(--th-transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.user_lk a:hover {
  background: var(--th-primary-light);
  color: var(--th-primary);
}

.profile__minuses { color: #ef4444 !important; }
.profile__minuses:hover { background: #fef2f2 !important; }

.recsign {
  display: flex;
  gap: 0.5rem;
}

.recsign a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--th-radius-sm);
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
}

.recsign a:first-child {
  background: var(--th-primary);
  color: white !important;
}

.recsign a:last-child {
  background: var(--th-primary-light);
  color: var(--th-primary) !important;
}

.miniscreen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .miniscreen { display: none; }
  .header { padding: 0 1rem; }
}

/* === Main Wrapper === */
.ogp__wrapper {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 992px) {
  .ogp__wrapper {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
}

/* === Sidebar === */
.block {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 80px;
  height: fit-content;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

@media (max-width: 992px) {
  .block {
    width: 100%;
    position: static;
    max-height: none;
  }
}

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

.bconteiner .title {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--th-text-muted);
  border-bottom: 1px solid var(--th-border);
  background: var(--th-border-light);
}

.bconteiner ul {
  list-style: none;
  padding: 0.5rem;
  margin: 0;
}

.bconteiner li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--th-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--th-text-muted);
  text-decoration: none;
  transition: var(--th-transition);
}

.bconteiner li a:hover {
  background: var(--th-primary-light);
  color: var(--th-primary);
}

.bconteiner li a .ti {
  font-size: 1.1rem;
  width: 1.25rem;
  text-align: center;
}

/* === Main Content === */
.ogp__main {
  flex: 1;
  min-width: 0;
  background: var(--th-bg-card);
  border-radius: var(--th-radius);
  border: 1px solid var(--th-border);
  box-shadow: var(--th-shadow);
}

.ogp__main .card-body {
  padding: 1.5rem;
}

@media (max-width: 768px) {
  .ogp__main .card-body { padding: 1rem; }
}

/* === Breadcrumb === */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.25rem 0;
  list-style: none;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.breadcrumb-item { color: var(--th-text-muted); }
.breadcrumb-item a { color: var(--th-primary); font-weight: 500; }

/* === Footer === */
.ogpanel_footer {
  background: var(--th-bg-sidebar);
  color: #94a3b8;
  padding: 2rem 1.5rem;
  margin-top: auto;
}

.footer__header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer__header ul { list-style: none; padding: 0; margin: 0; }
.footer__header li { margin-bottom: 0.5rem; }

.footer__header a {
  color: #94a3b8;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.footer__header a:hover { color: white; }

.pageFoot-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pageFoot-logoTitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pageFoot-logoSub { font-size: 0.75rem; color: #94a3b8; }
.pageFoot-shareLabel { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; }

/* === Loading === */
#loadinginfo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}

.loader {
  display: flex;
  gap: 4px;
  padding: 0.5rem;
  justify-content: center;
}

.loader span {
  width: 6px;
  height: 6px;
  background: var(--th-primary);
  border-radius: 50%;
  animation: th-bounce 0.6s infinite alternate;
}

.loader span:nth-child(2) { animation-delay: 0.1s; }
.loader span:nth-child(3) { animation-delay: 0.2s; }
.loader span:nth-child(4) { animation-delay: 0.3s; }
.loader span:nth-child(5) { animation-delay: 0.4s; }
.loader span:nth-child(6) { animation-delay: 0.5s; }

@keyframes th-bounce {
  to { opacity: 0.3; transform: translateY(-4px); }
}

/* === Responsive === */
@media (max-width: 768px) {
  .ogp__wrapper { flex-direction: column; padding: 1rem; }
  .block { width: 100%; position: static; }
}