/* ========================================================
   KRASNY APOKALIPSIS — Cyberpunk Dark Theme
   ======================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

   /* ── CSS Variables ─────────────────────────────────────── */
   :root {
     --cp-bg-deep:       #06060e;
     --cp-bg-panel:      #0b0b16;
     --cp-bg-surface:    #10101e;
     --cp-bg-elevated:   #161628;
     --cp-border:        rgba(255, 30, 60, 0.10);
     --cp-border-glow:   rgba(255, 30, 60, 0.30);
     --cp-red:           #ff1a2e;
     --cp-red-dim:       #cc1424;
     --cp-cyan:          #00f0ff;
     --cp-magenta:       #ff00aa;
     --cp-yellow:        #f5e642;
     --cp-green:         #00ff88;
     --cp-danger:        #ff2255;
     --cp-text:          #e0e6f0;
     --cp-text-muted:    rgba(224,230,240,0.45);
     --cp-glow-red:      0 0 20px rgba(255,26,46,0.15), 0 0 60px rgba(255,26,46,0.06);
     --cp-glow-cyan:     0 0 15px rgba(0,240,255,0.12);
     --cp-sidebar-w:     260px;
     --cp-navbar-h:      52px;
     --cp-radius:        10px;
     --cp-radius-sm:     6px;
     --cp-font:          'Rajdhani', 'Segoe UI', sans-serif;
     --cp-font-mono:     'JetBrains Mono', 'Consolas', monospace;
     --cp-transition:    200ms cubic-bezier(.4,0,.2,1);
   }
   
   /* ── Reset & Base ──────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   
   /* Evita barra horizontal por overflow acidental em telas estreitas */
   @media (max-width: 991.98px) {
     html, body {
       overflow-x: hidden;
       max-width: 100vw;
     }
   }
   
   body {
     margin: 0;
     padding: 0;
     font-family: var(--cp-font);
     font-size: 14px;
     font-weight: 500;
     line-height: 1.55;
     color: var(--cp-text);
     background: var(--cp-bg-deep);
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
   }
   
   a { color: var(--cp-red); text-decoration: none; transition: color var(--cp-transition); }
   a:hover { color: #ff4060; text-decoration: none; }
   
   code {
     font-family: var(--cp-font-mono);
     font-size: 0.88em;
     color: var(--cp-cyan);
     background: rgba(0,240,255,0.06);
     padding: 1px 5px;
     border-radius: 3px;
   }
   
   hr {
     border: none;
     border-top: 1px solid var(--cp-border);
     margin: 1rem 0;
   }
   
   ::selection {
     background: rgba(255,26,46,0.35);
     color: #fff;
   }
   
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: var(--cp-bg-deep); }
   ::-webkit-scrollbar-thumb { background: rgba(255,26,46,0.25); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: rgba(255,26,46,0.45); }
   
   /* ── Scanline Animation Overlay ────────────────────────── */
   body::after {
     content: '';
     position: fixed;
     top: 0; left: 0; right: 0; bottom: 0;
     pointer-events: none;
     z-index: 99999;
     background: repeating-linear-gradient(
       0deg,
       transparent,
       transparent 2px,
       rgba(0,0,0,0.03) 2px,
       rgba(0,0,0,0.03) 4px
     );
     animation: scanline-drift 8s linear infinite;
   }
   
   @keyframes scanline-drift {
     0% { background-position: 0 0; }
     100% { background-position: 0 100px; }
   }
   
   /* ── Keyframes ─────────────────────────────────────────── */
   @keyframes pulse-glow {
     0%, 100% { box-shadow: 0 0 4px rgba(255,26,46,0.2); }
     50% { box-shadow: 0 0 16px rgba(255,26,46,0.4); }
   }
   
   @keyframes neon-flicker {
     0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255,26,46,0.6), 0 0 20px rgba(255,26,46,0.3); }
     20%, 24%, 55% { opacity: 0.85; text-shadow: none; }
   }
   
   @keyframes border-pulse {
     0%, 100% { border-color: rgba(255,26,46,0.15); }
     50% { border-color: rgba(255,26,46,0.35); }
   }
   
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes slideInRight {
     from { opacity: 0; transform: translateX(20px); }
     to { opacity: 1; transform: translateX(0); }
   }
   
   /* ── Layout: Wrapper ───────────────────────────────────── */
   .wrapper {
     display: flex;
     min-height: 100vh;
   }
   
   /* ── Sidebar ───────────────────────────────────────────── */
   .cp-sidebar {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     width: var(--cp-sidebar-w);
     background: var(--cp-bg-panel);
     border-right: 1px solid var(--cp-border);
     display: flex;
     flex-direction: column;
     z-index: 1030;
     transition: transform 350ms cubic-bezier(.4,0,.2,1);
     overflow: hidden;
   }
   
   .cp-sidebar.collapsed {
     transform: translateX(calc(-1 * var(--cp-sidebar-w)));
   }
   
   .cp-sidebar-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 18px;
     border-bottom: 1px solid var(--cp-border);
     min-height: var(--cp-navbar-h);
   }
   
   .cp-sidebar-brand img {
     height: 30px;
     width: auto;
     flex-shrink: 0;
   }
   
   .cp-sidebar-brand .brand-name {
     font-size: 15px;
     font-weight: 700;
     color: var(--cp-red);
     letter-spacing: 1.5px;
     text-transform: uppercase;
     white-space: nowrap;
     animation: neon-flicker 4s ease-in-out infinite;
   }
   
   .cp-sidebar-user {
     padding: 14px 18px;
     border-bottom: 1px solid var(--cp-border);
     font-size: 12px;
     color: var(--cp-text-muted);
   }
   
   .cp-sidebar-user a {
     color: var(--cp-text);
     font-weight: 600;
   }
   
   .cp-sidebar-nav {
     flex: 1;
     overflow-y: auto;
     padding: 12px 0;
   }
   
   .cp-nav {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   
   .cp-nav-header {
     padding: 8px 18px 4px;
     font-size: 10px;
     font-weight: 700;
     color: var(--cp-text-muted);
     text-transform: uppercase;
     letter-spacing: 2px;
   }
   
   .cp-nav li a,
   .cp-nav li button {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 18px;
     color: var(--cp-text-muted);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.5px;
     transition: all var(--cp-transition);
     border: none;
     background: none;
     width: 100%;
     text-align: left;
     cursor: pointer;
     text-decoration: none;
     border-left: 3px solid transparent;
   }
   
   .cp-nav li a i,
   .cp-nav li button i {
     font-size: 15px;
     width: 20px;
     text-align: center;
     flex-shrink: 0;
   }
   
   .cp-nav li a:hover,
   .cp-nav li button:hover {
     color: var(--cp-text);
     background: rgba(255,26,46,0.06);
     border-left-color: rgba(255,26,46,0.3);
   }
   
   .cp-nav li a.active,
   .cp-nav li button.active {
     color: var(--cp-red);
     background: rgba(255,26,46,0.08);
     border-left-color: var(--cp-red);
   }
   
   .cp-nav-sub {
     list-style: none;
     padding: 0;
     margin: 0;
     max-height: 0;
     overflow: hidden;
     transition: max-height 300ms ease;
   }
   
   .cp-nav-sub.open {
     max-height: 200px;
   }
   
   .cp-nav-sub li a {
     padding-left: 50px;
     font-size: 12px;
   }
   
   /* ── Navbar ────────────────────────────────────────────── */
   .cp-navbar {
     position: fixed;
     top: 0;
     left: var(--cp-sidebar-w);
     right: 0;
     height: var(--cp-navbar-h);
     background: rgba(11,11,22,0.85);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--cp-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     z-index: 1020;
     transition: left 350ms cubic-bezier(.4,0,.2,1);
   }
   
   .cp-navbar.expanded {
     left: 0;
   }
   
   .cp-navbar-left,
   .cp-navbar-right {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .cp-navbar-toggle {
     background: none;
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius-sm);
     color: var(--cp-text-muted);
     padding: 6px 10px;
     cursor: pointer;
     font-size: 16px;
     transition: all var(--cp-transition);
   }
   
   .cp-navbar-toggle:hover {
     color: var(--cp-red);
     border-color: var(--cp-border-glow);
   }
   
   .cp-navbar-btn {
     background: none;
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius-sm);
     color: var(--cp-text-muted);
     padding: 6px 12px;
     cursor: pointer;
     font-size: 13px;
     font-family: var(--cp-font);
     transition: all var(--cp-transition);
     display: flex;
     align-items: center;
     gap: 6px;
     text-decoration: none;
   }
   
   .cp-navbar-btn:hover {
     color: var(--cp-red);
     border-color: var(--cp-border-glow);
     background: rgba(255,26,46,0.05);
   }
   
   /* ── Content Area ──────────────────────────────────────── */
   .cp-content {
     margin-left: var(--cp-sidebar-w);
     margin-top: var(--cp-navbar-h);
     padding: 24px;
     min-height: calc(100vh - var(--cp-navbar-h));
     width: calc(100% - var(--cp-sidebar-w));
     transition: margin-left 350ms cubic-bezier(.4,0,.2,1), width 350ms cubic-bezier(.4,0,.2,1);
     animation: fadeIn 400ms ease;
   }
   
   .cp-content.expanded {
     margin-left: 0;
     width: 100%;
   }
   
   .cp-page-title {
     font-size: 22px;
     font-weight: 700;
     margin: 0 0 20px 0;
     color: var(--cp-text);
     letter-spacing: 1px;
   }
   
   .cp-page-title span {
     color: var(--cp-red);
   }
   
   /* ── Cards (Glassmorphism) ─────────────────────────────── */
   .cp-card {
     background: rgba(16,16,30,0.82);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     overflow: hidden;
     transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
     margin-bottom: 20px;
   }
   
   .cp-card:hover {
     border-color: var(--cp-border-glow);
     box-shadow: var(--cp-glow-red);
   }
   
   .cp-card-header {
     padding: 14px 18px;
     border-bottom: 1px solid var(--cp-border);
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.5px;
   }
   
   .cp-card-header .cp-card-title {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .cp-card-header .cp-card-title i {
     color: var(--cp-red);
     font-size: 14px;
   }
   
   .cp-card-body {
     padding: 18px;
   }
   
   /* ── Stat Boxes ────────────────────────────────────────── */
   .cp-stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 16px;
     margin-bottom: 20px;
   }
   
   .cp-stat-box {
     background: rgba(16,16,30,0.82);
     backdrop-filter: blur(10px);
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     padding: 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: all var(--cp-transition);
     position: relative;
     overflow: hidden;
   }
   
   .cp-stat-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 3px;
     border-radius: 0 3px 3px 0;
   }
   
   .cp-stat-box.red::before { background: var(--cp-red); }
   .cp-stat-box.cyan::before { background: var(--cp-cyan); }
   .cp-stat-box.green::before { background: var(--cp-green); }
   .cp-stat-box.magenta::before { background: var(--cp-magenta); }
   
   .cp-stat-box:hover {
     border-color: var(--cp-border-glow);
     box-shadow: var(--cp-glow-red);
     transform: translateY(-2px);
   }
   
   .cp-stat-info h3 {
     margin: 0;
     font-size: 28px;
     font-weight: 700;
     color: var(--cp-text);
     line-height: 1;
   }
   
   .cp-stat-info p {
     margin: 4px 0 0;
     font-size: 12px;
     color: var(--cp-text-muted);
   }
   
   .cp-stat-icon {
     font-size: 28px;
     color: rgba(255,26,46,0.2);
   }
   
   .cp-stat-box.cyan .cp-stat-icon { color: rgba(0,240,255,0.2); }
   .cp-stat-box.green .cp-stat-icon { color: rgba(0,255,136,0.2); }
   .cp-stat-box.magenta .cp-stat-icon { color: rgba(255,0,170,0.2); }
   
   /* ── Tables ────────────────────────────────────────────── */
   .cp-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 12px;
   }
   
   .cp-table th {
     padding: 10px 12px;
     text-align: left;
     font-weight: 700;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--cp-text-muted);
     border-bottom: 1px solid var(--cp-border);
     background: rgba(0,0,0,0.2);
   }
   
   .cp-table td {
     padding: 9px 12px;
     border-bottom: 1px solid rgba(255,255,255,0.03);
     white-space: nowrap;
     vertical-align: middle;
   }
   
   .cp-table tbody tr {
     transition: background var(--cp-transition);
   }
   
   .cp-table tbody tr:hover {
     background: rgba(255,26,46,0.04);
   }
   
   .cp-table .text-right,
   .text-right {
     text-align: right;
   }
   
   /* ── Buttons ───────────────────────────────────────────── */
   .cp-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 16px;
     font-family: var(--cp-font);
     font-size: 13px;
     font-weight: 600;
     border-radius: var(--cp-radius-sm);
     border: 1px solid transparent;
     cursor: pointer;
     transition: all var(--cp-transition);
     letter-spacing: 0.5px;
     text-decoration: none;
     line-height: 1.4;
   }
   
   .cp-btn:disabled,
   .cp-btn.disabled {
     opacity: 0.4;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   .cp-btn-primary {
     background: var(--cp-red);
     color: #fff;
     border-color: var(--cp-red);
   }
   .cp-btn-primary:hover {
     background: #ff3048;
     box-shadow: 0 0 15px rgba(255,26,46,0.3);
     color: #fff;
   }
   
   .cp-btn-success {
     background: rgba(0,255,136,0.12);
     color: var(--cp-green);
     border-color: rgba(0,255,136,0.25);
   }
   .cp-btn-success:hover {
     background: rgba(0,255,136,0.2);
     box-shadow: 0 0 12px rgba(0,255,136,0.15);
   }
   
   .cp-btn-warning {
     background: rgba(245,230,66,0.12);
     color: var(--cp-yellow);
     border-color: rgba(245,230,66,0.25);
   }
   .cp-btn-warning:hover {
     background: rgba(245,230,66,0.2);
     box-shadow: 0 0 12px rgba(245,230,66,0.15);
   }
   
   .cp-btn-danger {
     background: rgba(255,34,85,0.12);
     color: var(--cp-danger);
     border-color: rgba(255,34,85,0.25);
   }
   .cp-btn-danger:hover {
     background: rgba(255,34,85,0.2);
     box-shadow: 0 0 12px rgba(255,34,85,0.15);
   }
   
   .cp-btn-info {
     background: rgba(0,240,255,0.10);
     color: var(--cp-cyan);
     border-color: rgba(0,240,255,0.22);
   }
   .cp-btn-info:hover {
     background: rgba(0,240,255,0.18);
     box-shadow: 0 0 12px rgba(0,240,255,0.15);
   }
   
   .cp-btn-outline {
     background: transparent;
     color: var(--cp-text-muted);
     border-color: var(--cp-border);
   }
   .cp-btn-outline:hover {
     color: var(--cp-text);
     border-color: var(--cp-border-glow);
     background: rgba(255,26,46,0.05);
   }
   
   .cp-btn-sm { padding: 5px 10px; font-size: 11px; }
   .cp-btn-xs { padding: 3px 8px; font-size: 10px; }
   .cp-btn-block { width: 100%; justify-content: center; }
   
   /* ── Bootstrap button overrides ────────────────────────── */
   .btn {
     font-family: var(--cp-font);
     font-weight: 600;
     border-radius: var(--cp-radius-sm);
     transition: all var(--cp-transition);
     letter-spacing: 0.3px;
   }
   
   .btn-primary {
     background: var(--cp-red) !important;
     border-color: var(--cp-red) !important;
     color: #fff !important;
   }
   .btn-primary:hover, .btn-primary:focus {
     background: #ff3048 !important;
     border-color: #ff3048 !important;
     box-shadow: 0 0 15px rgba(255,26,46,0.3) !important;
   }
   
   .btn-success {
     background: rgba(0,255,136,0.15) !important;
     border-color: rgba(0,255,136,0.3) !important;
     color: var(--cp-green) !important;
   }
   .btn-success:hover {
     background: rgba(0,255,136,0.25) !important;
     box-shadow: 0 0 12px rgba(0,255,136,0.2) !important;
   }
   
   .btn-danger {
     background: rgba(255,34,85,0.15) !important;
     border-color: rgba(255,34,85,0.3) !important;
     color: var(--cp-danger) !important;
   }
   .btn-danger:hover {
     background: rgba(255,34,85,0.25) !important;
     box-shadow: 0 0 12px rgba(255,34,85,0.2) !important;
   }
   
   .btn-warning {
     background: rgba(245,230,66,0.15) !important;
     border-color: rgba(245,230,66,0.3) !important;
     color: var(--cp-yellow) !important;
   }
   .btn-warning:hover {
     background: rgba(245,230,66,0.25) !important;
   }
   
   .btn-info {
     background: rgba(0,240,255,0.12) !important;
     border-color: rgba(0,240,255,0.22) !important;
     color: var(--cp-cyan) !important;
   }
   .btn-info:hover {
     background: rgba(0,240,255,0.2) !important;
     box-shadow: 0 0 12px rgba(0,240,255,0.15) !important;
   }
   
   .btn-outline-primary {
     color: var(--cp-red) !important;
     border-color: var(--cp-red) !important;
     background: transparent !important;
   }
   .btn-outline-primary:hover {
     background: rgba(255,26,46,0.1) !important;
     box-shadow: 0 0 10px rgba(255,26,46,0.2) !important;
   }
   
   .btn-outline-secondary {
     color: var(--cp-text-muted) !important;
     border-color: var(--cp-border) !important;
     background: transparent !important;
   }
   .btn-outline-secondary:hover {
     color: var(--cp-text) !important;
     border-color: var(--cp-border-glow) !important;
     background: rgba(255,26,46,0.05) !important;
   }
   
   .btn-outline-info {
     color: var(--cp-cyan) !important;
     border-color: rgba(0,240,255,0.22) !important;
     background: transparent !important;
   }
   .btn-outline-info:hover {
     background: rgba(0,240,255,0.08) !important;
   }
   
   .btn-outline-light {
     color: var(--cp-text-muted) !important;
     border-color: var(--cp-border) !important;
     background: transparent !important;
   }
   .btn-outline-light:hover {
     color: var(--cp-text) !important;
     border-color: var(--cp-text-muted) !important;
     background: rgba(255,255,255,0.04) !important;
   }
   
   .btn-sm { padding: 4px 10px; font-size: 12px; }
   .btn-xs { padding: 2px 8px; font-size: 11px; }
   
   button:disabled,
   input:disabled,
   select:disabled,
   textarea:disabled {
     opacity: 0.4 !important;
     cursor: not-allowed !important;
   }
   
   /* ── Forms ─────────────────────────────────────────────── */
   .form-control,
   input[type="text"],
   input[type="password"],
   input[type="email"],
   input[type="number"],
   select,
   textarea {
     font-family: var(--cp-font);
     font-size: 13px;
     color: var(--cp-text);
     background: var(--cp-bg-deep) !important;
     border: 1px solid var(--cp-border) !important;
     border-radius: var(--cp-radius-sm) !important;
     padding: 8px 12px;
     transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
     width: 100%;
   }
   
   .form-control:focus,
   input:focus,
   select:focus,
   textarea:focus {
     outline: none;
     border-color: var(--cp-red) !important;
     box-shadow: 0 0 0 2px rgba(255,26,46,0.15) !important;
     color: var(--cp-text);
     background: var(--cp-bg-deep) !important;
   }
   
   .form-control::placeholder,
   input::placeholder,
   textarea::placeholder {
     color: var(--cp-text-muted);
   }
   
   .input-group {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     width: 100%;
   }
   
   .input-group .form-control {
     position: relative;
     flex: 1 1 auto;
     width: 1%;
     min-width: 0;
   }
   
   .input-group-append {
     display: flex;
     margin-left: -1px;
   }
   
   .input-group-text {
     display: flex;
     align-items: center;
     padding: 8px 12px;
     font-size: 13px;
     color: var(--cp-text-muted);
     background: var(--cp-bg-surface);
     border: 1px solid var(--cp-border);
     border-radius: 0 var(--cp-radius-sm) var(--cp-radius-sm) 0;
   }
   
   .input-group .form-control:first-child {
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
   
   label {
     font-size: 12px;
     font-weight: 600;
     color: var(--cp-text-muted);
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: 1px;
   }
   
   .form-group {
     margin-bottom: 16px;
   }
   
   /* ── Alerts ────────────────────────────────────────────── */
   .alert {
     border-radius: var(--cp-radius-sm);
     padding: 10px 14px;
     font-size: 13px;
     border: 1px solid;
   }
   
   .alert-danger {
     background: rgba(255,34,85,0.08) !important;
     border-color: rgba(255,34,85,0.25) !important;
     color: var(--cp-danger) !important;
   }
   
   .alert-success {
     background: rgba(0,255,136,0.08) !important;
     border-color: rgba(0,255,136,0.2) !important;
     color: var(--cp-green) !important;
   }
   
   /* ── Badges ────────────────────────────────────────────── */
   .badge {
     font-family: var(--cp-font);
     font-weight: 600;
     font-size: 10px;
     padding: 3px 8px;
     border-radius: 3px;
     letter-spacing: 0.5px;
     text-transform: uppercase;
   }
   
   .badge-success {
     background: rgba(0,255,136,0.15) !important;
     color: var(--cp-green) !important;
   }
   
   .badge-secondary {
     background: rgba(224,230,240,0.08) !important;
     color: var(--cp-text-muted) !important;
   }
   
   .badge-dark {
     background: rgba(0,0,0,0.3) !important;
     color: var(--cp-text-muted) !important;
   }
   
   .badge-primary {
     background: rgba(255,26,46,0.15) !important;
     color: var(--cp-red) !important;
   }
   
   .badge-info {
     background: rgba(0,240,255,0.12) !important;
     color: var(--cp-cyan) !important;
   }
   
   .badge-warning {
     background: rgba(245,230,66,0.12) !important;
     color: var(--cp-yellow) !important;
   }
   
   .badge-danger {
     background: rgba(255,34,85,0.12) !important;
     color: var(--cp-danger) !important;
   }
   
   /* ── Bootstrap Table overrides ─────────────────────────── */
   .table {
     color: var(--cp-text);
   }
   
   .table th {
     border-top: none;
     border-bottom: 1px solid var(--cp-border);
     color: var(--cp-text-muted);
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     background: rgba(0,0,0,0.2);
     padding: 10px 12px;
   }
   
   .table td {
     border-top: 1px solid rgba(255,255,255,0.03);
     padding: 9px 12px;
     vertical-align: middle;
   }
   
   .table-sm th, .table-sm td {
     padding: 6px 10px;
   }
   
   .table-hover tbody tr:hover {
     background-color: rgba(255,26,46,0.04) !important;
     color: var(--cp-text);
   }
   
   .table-responsive {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
   
   /* ── Bootstrap Modal overrides ─────────────────────────── */
   .modal-content {
     background: var(--cp-bg-panel) !important;
     border: 1px solid var(--cp-border) !important;
     border-radius: 14px !important;
     color: var(--cp-text);
   }
   
   .modal-header {
     border-bottom: 1px solid var(--cp-border) !important;
     padding: 16px 20px;
   }
   
   .modal-title {
     font-weight: 700;
     letter-spacing: 0.5px;
     color: var(--cp-text);
   }
   
   .modal-footer {
     border-top: 1px solid var(--cp-border) !important;
     padding: 12px 20px;
   }
   
   .modal-body {
     padding: 20px;
   }
   
   .close, .close:hover {
     color: var(--cp-text-muted) !important;
     text-shadow: none !important;
     opacity: 0.7;
   }
   
   .modal-backdrop {
     background-color: rgba(6,6,14,0.85) !important;
   }
   
   /* ── Bootstrap Card overrides (when used) ──────────────── */
   .card {
     background: rgba(16,16,30,0.82) !important;
     border: 1px solid var(--cp-border) !important;
     border-radius: var(--cp-radius) !important;
     color: var(--cp-text);
   }
   
   .card-header {
     background: rgba(0,0,0,0.15) !important;
     border-bottom: 1px solid var(--cp-border) !important;
     padding: 14px 18px;
   }
   
   .card-body {
     padding: 18px;
   }
   
   .card-title {
     margin-bottom: 0;
     font-weight: 700;
     font-size: 14px;
   }
   
   .bg-dark {
     background-color: var(--cp-bg-panel) !important;
   }
   
   /* ── Text Utilities (Bootstrap override) ───────────────── */
   .text-muted { color: var(--cp-text-muted) !important; }
   .text-success { color: var(--cp-green) !important; }
   .text-danger { color: var(--cp-danger) !important; }
   .text-info { color: var(--cp-cyan) !important; }
   .text-warning { color: var(--cp-yellow) !important; }
   .text-primary { color: var(--cp-red) !important; }
   .text-white { color: var(--cp-text) !important; }
   
   /* ── Callout ───────────────────────────────────────────── */
   .callout {
     border-radius: var(--cp-radius-sm);
     padding: 12px 16px;
     border-left: 4px solid;
     margin-bottom: 16px;
     background: rgba(0,0,0,0.2);
   }
   
   .callout-info {
     border-left-color: var(--cp-cyan);
     background: rgba(0,240,255,0.04);
   }
   
   /* ── Login Page ────────────────────────────────────────── */
   .cp-login-page {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     background: var(--cp-bg-deep);
     position: relative;
     overflow: hidden;
   }
   
   .cp-login-page::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255,26,46,0.08) 0%, transparent 70%);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
   
   .cp-login-box {
     width: 100%;
     max-width: 400px;
     padding: 20px;
     z-index: 1;
     animation: fadeIn 600ms ease;
   }
   
   .cp-login-logo {
     text-align: center;
     margin-bottom: 24px;
   }
   
   .cp-login-logo img {
     height: 90px;
     width: auto;
     margin-bottom: 12px;
     filter: drop-shadow(0 0 20px rgba(255,26,46,0.3));
   }
   
   .cp-login-logo h1 {
     font-size: 20px;
     font-weight: 700;
     color: var(--cp-red);
     letter-spacing: 3px;
     text-transform: uppercase;
     margin: 0;
     animation: neon-flicker 3s ease-in-out infinite;
   }
   
   .cp-login-card {
     background: rgba(16,16,30,0.85);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     padding: 28px;
     box-shadow: var(--cp-glow-red);
   }
   
   .cp-login-card .login-box-msg {
     text-align: center;
     color: var(--cp-text-muted);
     margin-bottom: 20px;
     font-size: 13px;
   }
   
   /* ── Connections / Action Tiles ─────────────────────────── */
   .connections-table {
     font-size: 12px;
   }
   .connections-table code {
     font-size: 11px;
   }
   .connections-table th,
   .connections-table td {
     white-space: nowrap;
   }
   
   .actions-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }
   
   .action-tile {
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     padding: 16px;
     background: rgba(16,16,30,0.6);
     backdrop-filter: blur(6px);
     transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
   }
   
   .action-tile:hover {
     border-color: var(--cp-border-glow);
     box-shadow: var(--cp-glow-red);
   }
   
   .action-tile h6 {
     margin: 0 0 6px 0;
     font-size: 13px;
     font-weight: 700;
     color: var(--cp-text);
   }
   
   .action-tile h6 i {
     color: var(--cp-red);
     margin-right: 4px;
   }
   
   .action-tile p {
     margin: 0 0 12px 0;
     font-size: 12px;
     color: var(--cp-text-muted);
   }
   
   #commandModal .modal-dialog {
     max-width: 1120px;
     margin: 1.25rem auto;
   }
   #commandModal .modal-body {
     max-height: calc(100vh - 210px);
     overflow: auto;
     overscroll-behavior: contain;
   }
   #commandModal .action-tile { min-width: 0; }
   #commandModal .action-tile .d-flex > * { min-width: 0; }
   
   @media (max-width: 991.98px) {
     #commandModal .modal-dialog { max-width: 96vw; margin: 0.75rem auto; }
     #commandModal .modal-body { max-height: calc(100vh - 190px); }
   }
   
   /* ── Programs Box ──────────────────────────────────────── */
   .programs-box {
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     background: rgba(0,0,0,0.3);
     padding: 10px;
     max-height: 240px;
     overflow: auto;
     font-size: 12px;
   }

   /* No modal: não encolher com flex (evita “faixa” de 1px + scrollbar) */
   .cp-modal-programs {
     flex: 0 0 auto;
     min-height: 0;
   }
   .programs-box--modal {
     margin-top: 4px;
     min-height: 140px;
     max-height: min(220px, 28vh);
     flex: none;
     overflow-x: hidden;
     overflow-y: auto;
   }

   /* Coluna central do modal: mais largura e altura para a lista */
   .programs-box--modal-center {
     min-height: 180px;
     max-height: min(360px, 40vh);
   }
   
   .programs-box .prog {
     display: block;
     padding: 8px 0;
     border-bottom: 1px solid rgba(255,255,255,0.04);
   }
   .programs-box .prog-name {
     font-weight: 600;
     margin-bottom: 0;
     word-break: break-word;
   }
   
   .programs-box .prog:last-child { border-bottom: 0; padding-bottom: 0; }
   
   .programs-box code {
     font-size: 11px;
     word-break: break-all;
     white-space: normal;
     max-width: 100%;
   }
   
   /* ── Terminal Styles ───────────────────────────────────── */
   .client-list {
     display: grid;
     gap: 8px;
     margin-top: 8px;
   }
   
   .client-item {
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius-sm);
     padding: 10px 12px;
     cursor: pointer;
     background: var(--cp-bg-surface);
     color: var(--cp-text-muted);
     font-size: 12px;
     font-family: var(--cp-font-mono);
     transition: all var(--cp-transition);
     text-align: left;
     width: 100%;
   }
   
   .client-item:hover {
     border-color: var(--cp-border-glow);
     background: rgba(255,26,46,0.04);
     color: var(--cp-text);
   }
   
   .client-item.active {
     border-color: var(--cp-red);
     background: rgba(255,26,46,0.08);
     color: var(--cp-text);
     box-shadow: 0 0 10px rgba(255,26,46,0.1);
   }
   
   .terminals {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }
   
   .terminal-col h3,
   .terminal-col h6 {
     margin-top: 0;
     margin-bottom: 10px;
     color: var(--cp-text) !important;
   }
   
   .terminal {
     margin: 0;
     min-height: 320px;
     max-height: 500px;
     overflow: auto;
     white-space: pre-wrap;
     word-wrap: break-word;
     background: rgba(6,6,14,0.9);
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius-sm);
     padding: 12px;
     font-family: var(--cp-font-mono);
     font-size: 12px;
     color: var(--cp-text);
     line-height: 1.6;
   }
   
   .command-bar {
     margin-top: 10px;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 8px;
   }
   
   .command-bar input {
     font-family: var(--cp-font-mono) !important;
     font-size: 12px !important;
   }
   
   .terminal-right .line-cmd { color: var(--cp-red); font-weight: 700; }
   .terminal-right .line-out { color: var(--cp-green); }
   .terminal-right .line-err { color: var(--cp-danger); }
   .terminal-right .line-meta { color: var(--cp-text-muted); }
   
   .hidden { display: none; }
   
   /* Terminal narrow (for standalone terminal page) */
   .terminal-narrow {
     max-width: 55vw;
     margin: 0 auto;
   }
   
   @media (max-width: 1200px) {
     .terminal-narrow { max-width: 100%; }
   }
   
   @media (max-width: 1100px) {
     .terminals { grid-template-columns: 1fr; }
   }
   
   /* ── Screen Desktop ────────────────────────────────────── */
   .screen-preview-wrap {
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     background: rgba(0,0,0,0.4);
     min-height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transition: border-color var(--cp-transition);
   }
   
   .screen-preview-wrap:hover {
     border-color: var(--cp-border-glow);
   }
   
   .screen-preview-wrap img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   
   .shots-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 12px;
   }
   
   .shot-card {
     border: 1px solid var(--cp-border);
     border-radius: var(--cp-radius);
     overflow: hidden;
     background: rgba(16,16,30,0.6);
     transition: all var(--cp-transition);
   }
   
   .shot-card:hover {
     border-color: var(--cp-border-glow);
     box-shadow: var(--cp-glow-red);
     transform: translateY(-2px);
   }
   
   .shot-card img {
     width: 100%;
     height: 120px;
     object-fit: cover;
     display: block;
     background: #0a0a12;
   }
   
   .shot-card .meta {
     padding: 8px 10px;
     font-size: 11px;
     color: var(--cp-text-muted);
   }
   
   /* ── Dashboard Map ─────────────────────────────────────── */
   #worldWrap {
     background: var(--cp-bg-deep);
     border-radius: var(--cp-radius-sm);
     border: 1px solid var(--cp-border);
     overflow: hidden;
     position: relative;
     min-height: 420px;
   }
   
   #worldSvg {
     width: 100%;
     height: 420px;
     display: block;
     background: var(--cp-bg-deep);
   }
   
   .country {
     fill: #0a0a18;
     stroke: rgba(255,26,46,0.12);
     stroke-width: 0.6;
     transition: fill 250ms ease;
   }
   
   .country.has { fill: #1a0a12; }
   .country.hot-1 { fill: #2a0f18; }
   .country.hot-2 { fill: #3d1420; }
   .country.hot-3 { fill: #551828; }
   .country.hot-4 { fill: #7a1e32; }
   
   .tooltip {
     position: absolute;
     pointer-events: none;
     background: rgba(11,11,22,0.95);
     border: 1px solid var(--cp-border-glow);
     color: var(--cp-text);
     padding: 6px 10px;
     border-radius: var(--cp-radius-sm);
     font-size: 12px;
     font-family: var(--cp-font);
     transform: translate(-50%, -120%);
     white-space: nowrap;
     display: none;
     z-index: 5;
     box-shadow: 0 0 10px rgba(255,26,46,0.15);
   }
   
   #countryTable td, #countryTable th { vertical-align: middle; }
   
   /* ── Top Actions (index.html) ──────────────────────────── */
   .top-actions {
     display: flex;
     gap: 8px;
     margin-bottom: 10px;
   }
   
   /* ── Responsive ────────────────────────────────────────── */
   @media (max-width: 991.98px) {
     .cp-sidebar {
       transform: translateX(calc(-1 * var(--cp-sidebar-w)));
     }
     .cp-sidebar.mobile-open {
       transform: translateX(0);
     }
     .cp-navbar {
       left: 0;
     }
     .cp-content {
       margin-left: 0;
       width: 100%;
     }
     .cp-stats-grid {
       grid-template-columns: 1fr;
     }
   }
   
   @media (max-width: 576px) {
     .cp-content { padding: 16px; }
     .cp-page-title { font-size: 18px; }
   }
   
   /* ── Utility ───────────────────────────────────────────── */
   .muted { color: var(--cp-text-muted); }
   .gap-8 { gap: 8px; }
   .gap-12 { gap: 12px; }
   .flex-center { display: flex; align-items: center; }
   
   /* Override Bootstrap bg classes */
   .bg-info { background-color: rgba(0,240,255,0.10) !important; }
   .bg-success { background-color: rgba(0,255,136,0.10) !important; }
   .bg-gradient-dark { background: var(--cp-bg-surface) !important; }
   
   /* Small box overrides (dashboard) */
   .small-box {
     border-radius: var(--cp-radius) !important;
     border: 1px solid var(--cp-border) !important;
     position: relative;
     overflow: hidden;
     margin-bottom: 0 !important;
   }
   .small-box .inner { padding: 18px; }
   .small-box .inner h3 {
     font-size: 28px;
     font-weight: 700;
     margin: 0;
     color: var(--cp-text);
   }
   .small-box .inner p { color: var(--cp-text-muted); font-size: 12px; margin: 4px 0 0; }
   .small-box .icon {
     position: absolute;
     top: 12px;
     right: 16px;
     font-size: 42px;
     opacity: 0.15;
   }
   .small-box.bg-info { background: rgba(0,240,255,0.06) !important; }
   .small-box.bg-info .icon { color: var(--cp-cyan); }
   .small-box.bg-success { background: rgba(0,255,136,0.06) !important; }
   .small-box.bg-success .icon { color: var(--cp-green); }
   
   /* Info box overrides */
   .info-box {
     border-radius: var(--cp-radius) !important;
     border: 1px solid var(--cp-border) !important;
     background: var(--cp-bg-surface) !important;
     display: flex;
     align-items: stretch;
     min-height: 80px;
     margin-bottom: 0 !important;
   }
   .info-box-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 70px;
     font-size: 24px;
     color: var(--cp-magenta);
   }
   .info-box-content {
     padding: 12px 14px;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   .info-box-text { font-size: 12px; color: var(--cp-text-muted); }
   .info-box-number { font-size: 22px; font-weight: 700; color: var(--cp-text); }
   .progress-description { font-size: 10px; color: var(--cp-text-muted); }
   
   /* ── Card styling ──────────────────────────────────────── */
   .card {
     background: var(--cp-bg-panel) !important;
     border: 1px solid var(--cp-border) !important;
     border-radius: 12px !important;
     color: var(--cp-text);
     margin-bottom: 20px;
   }
   .card-header {
     background: rgba(255,26,46,0.03) !important;
     border-bottom: 1px solid var(--cp-border) !important;
     padding: 14px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .card-title {
     font-family: var(--cp-font);
     font-weight: 600;
     font-size: 15px;
     margin: 0;
   }
   .card-body {
     padding: 20px;
     min-height: 120px;
   }
   .card-tools {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   /* Connections table: compact rows; ellipsis só em colunas de texto */
   .connections-table {
     min-height: 120px;
   }
   .connections-table.table tbody td,
   .connections-table.table thead th {
     padding: 5px 8px !important;
     line-height: 1.25;
     vertical-align: middle;
   }
   .connections-table td:not(:last-child),
   .connections-table th:not(:last-child) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .connections-table td:last-child,
   .connections-table th:last-child {
     overflow: visible;
     text-overflow: clip;
     white-space: nowrap;
   }
   .connections-table td:nth-child(2) {
     font-family: var(--cp-font-mono);
     font-size: 11px;
     color: var(--cp-red);
     cursor: pointer;
   }
   .connections-table td:nth-child(2):hover {
     text-decoration: underline;
   }
   .card-body .table-responsive {
     min-height: 300px;
   }
   .card-body .connections-page-table-wrap {
     min-height: 0;
   }
   
   /* Force full-width cards and containers */
   .container-fluid {
     width: 100% !important;
     max-width: 100% !important;
     padding-left: 20px;
     padding-right: 20px;
     box-sizing: border-box;
   }
   section.content {
     width: 100%;
     box-sizing: border-box;
   }
   .row {
     margin-left: 0;
     margin-right: 0;
     width: 100%;
   }
   .card {
     width: 100%;
     box-sizing: border-box;
   }
   .table {
     width: 100% !important;
     table-layout: auto;
   }
   
   /* ── Table dark theme ──────────────────────────────────── */
   .table {
     color: var(--cp-text) !important;
     border-collapse: separate;
     border-spacing: 0;
   }
   .table thead th {
     background: rgba(255,26,46,0.06) !important;
     color: var(--cp-red) !important;
     border-bottom: 2px solid var(--cp-border) !important;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 1px;
     padding: 12px 14px !important;
     font-weight: 700;
   }
   .table tbody td {
     border-top: 1px solid var(--cp-border) !important;
     padding: 12px 14px !important;
     font-size: 13px;
     vertical-align: middle;
   }
   .table-hover tbody tr:hover {
     background: rgba(255,26,46,0.06) !important;
   }
   .table-sm td, .table-sm th {
     padding: 10px 12px !important;
   }
   
   /* ── Modal sections (compact cards inside modal) ───────── */
   .cp-modal-section {
     background: rgba(11,11,22,0.6);
     border: 1px solid var(--cp-border);
     border-radius: 8px;
     padding: 10px 12px;
   }
   .cp-modal-section h6 {
     font-family: var(--cp-font);
     font-size: 12px;
     font-weight: 600;
     color: var(--cp-red);
     margin-bottom: 6px;
   }
   .cp-modal-section h6 i {
     color: var(--cp-red);
     margin-right: 4px;
   }
   .cp-modal-section label {
     display: block;
   }
   .cp-modal-section .form-control {
     background: rgba(6,6,14,0.8) !important;
     border: 1px solid var(--cp-border) !important;
     color: var(--cp-text) !important;
     font-size: 12px;
   }
   .cp-modal-section .form-control:focus {
     border-color: var(--cp-red) !important;
     box-shadow: 0 0 0 2px rgba(255,26,46,0.15);
   }
   .cp-modal-section .btn-xs {
     font-size: 10px;
     padding: 3px 8px;
     white-space: nowrap;
     flex-shrink: 0;
   }
   /* Fix select/button rows inside modal */
   .cp-modal-section .d-flex {
     flex-wrap: nowrap;
     align-items: center;
   }
   .cp-modal-section .d-flex > .form-control,
   .cp-modal-section .d-flex > .form-control-sm,
   .cp-modal-section .d-flex > select {
     min-width: 0;
     flex: 1 1 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .cp-modal-section select.form-control-sm {
     height: 28px;
     padding: 2px 6px;
     appearance: auto;
     -webkit-appearance: auto;
   }
   .cp-modal-section .input-group {
     flex-wrap: nowrap;
   }
   .cp-modal-section .input-group .form-control {
     min-width: 0;
   }

   .machine-info-panel {
     max-height: min(42vh, 360px);
     overflow-y: auto;
     flex-shrink: 0;
   }

   /* Clients — modal "Dados guardados": painel máquina mais alto (global .machine-info-panel capa a 360px) */
   #storedDataModal .clients-stored-machine-panel.machine-info-panel {
     max-height: min(72vh, 560px);
   }
   .machine-info-panel .mi-block {
     margin-bottom: 8px;
   }
   .machine-info-panel .mi-title {
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: var(--cp-text-muted);
     margin: 6px 0 4px;
     font-weight: 600;
   }
   .machine-info-line {
     font-size: 10px;
     line-height: 1.35;
     margin-bottom: 2px;
     word-break: break-word;
   }
   .machine-info-line .mi-k {
     color: var(--cp-text-muted);
     margin-right: 4px;
   }
   .machine-info-line .mi-v {
     color: var(--cp-text);
   }
   .machine-mini-table {
     font-size: 9px;
     width: 100%;
     margin: 0;
     color: var(--cp-text);
   }
   .machine-mini-table th,
   .machine-mini-table td {
     padding: 2px 4px !important;
     border-color: var(--cp-border) !important;
     vertical-align: top;
   }
   .machine-mini-table th {
     color: var(--cp-text-muted);
     font-weight: 600;
   }

   /* Admin: âncoras da sidebar (#users, #logs, #settings) */
   body.admin-page #users,
   body.admin-page #logs,
   body.admin-page #settings {
     scroll-margin-top: 76px;
   }
   
   /* ── Modal dark theme ──────────────────────────────────── */
   .modal-content {
     background: var(--cp-bg-panel) !important;
     border: 1px solid var(--cp-border) !important;
     border-radius: 14px !important;
     color: var(--cp-text);
   }
   .modal-header {
     border-bottom: 1px solid var(--cp-border) !important;
     padding: 16px 20px;
   }
   .modal-footer {
     border-top: 1px solid var(--cp-border) !important;
     padding: 12px 20px;
   }
   .modal-title {
     font-family: var(--cp-font);
     font-weight: 600;
   }
   .close {
     color: var(--cp-text-muted) !important;
     text-shadow: none !important;
     opacity: 0.7;
   }
   .close:hover {
     color: var(--cp-red) !important;
     opacity: 1;
   }
   
   
   /* ── AdminLTE class mapping (for JS compatibility) ───── */
   
   .login-page {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
   }
   
   .login-box {
     width: 100%;
     max-width: 400px;
     padding: 20px;
   }
   
   .login-logo {
     text-align: center;
     margin-bottom: 16px;
   }
   
   .login-logo b {
     font-weight: 700;
     color: var(--cp-red);
   }
   
   .login-card-body {
     padding: 24px;
   }
   
   /* card-outline borders as neon */
   .card-primary.card-outline {
     border-top: 2px solid var(--cp-red) !important;
   }
   .card-secondary.card-outline {
     border-top: 2px solid var(--cp-cyan) !important;
   }
   .card-dark.card-outline {
     border-top: 2px solid var(--cp-text-muted) !important;
   }
   
   /* ── Brand link AdminLTE compat ────────────────────────── */
   .brand-link {
     display: flex;
     align-items: center;
     padding: 14px 18px;
     border-bottom: 1px solid var(--cp-border);
     color: var(--cp-red) !important;
     text-decoration: none;
   }
   .brand-text {
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     font-size: 14px;
   }
   
   /* AdminLTE sidebar override — LAYOUT + APPEARANCE */
   .main-sidebar {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     width: 250px;
     z-index: 1038;
     overflow-y: auto;
     overflow-x: hidden;
     background: var(--cp-bg-panel) !important;
     border-right: 1px solid var(--cp-border);
     transition: margin-left 350ms cubic-bezier(.4,0,.2,1),
                 width 350ms cubic-bezier(.4,0,.2,1);
   }
   .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
   .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
     background: rgba(255,26,46,0.08) !important;
     color: var(--cp-red) !important;
   }
   .sidebar-dark-primary .nav-sidebar .nav-link {
     color: var(--cp-text-muted) !important;
     transition: all var(--cp-transition);
   }
   .sidebar-dark-primary .nav-sidebar .nav-link.active {
     color: var(--cp-red) !important;
   }
   .sidebar-dark-primary .nav-sidebar .nav-link:hover {
     color: var(--cp-text) !important;
   }
   .sidebar { padding-top: 0; }
   .user-panel { border-bottom: 1px solid var(--cp-border) !important; }
   .user-panel .info a { color: var(--cp-text) !important; font-weight: 600; }
   
   /* AdminLTE navbar override — LAYOUT + APPEARANCE */
   .main-header {
     position: fixed;
     top: 0;
     left: 250px;
     right: 0;
     height: 50px;
     z-index: 1034;
     display: flex;
     align-items: center;
     background: rgba(11,11,22,0.9) !important;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--cp-border) !important;
     transition: left 350ms cubic-bezier(.4,0,.2,1);
   }
   .main-header .navbar-nav {
     display: flex;
     align-items: center;
     flex-direction: row;
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .main-header .navbar-nav .nav-item {
     display: flex;
     align-items: center;
   }
   .main-header .navbar-nav .nav-link {
     color: var(--cp-text-muted) !important;
     padding: 8px 12px;
     font-size: 16px;
     transition: color var(--cp-transition);
     display: flex;
     align-items: center;
     cursor: pointer;
   }
   .main-header .nav-link:hover {
     color: var(--cp-red) !important;
   }
   .main-header .ml-auto {
     margin-left: auto !important;
   }
   
   /* AdminLTE content wrapper override — LAYOUT */
   .content-wrapper {
     margin-left: 250px;
     margin-top: 50px;
     min-height: calc(100vh - 50px);
     width: calc(100% - 250px);
     padding: 0;
     box-sizing: border-box;
     transition: margin-left 350ms cubic-bezier(.4,0,.2,1),
                 width 350ms cubic-bezier(.4,0,.2,1);
   }
   .dark-mode .content-wrapper {
     background: var(--cp-bg-deep) !important;
   }
   .content-header {
     padding: 16px 24px 0;
   }
   .content-header h1 {
     font-family: var(--cp-font);
     font-weight: 700;
     letter-spacing: 1px;
     font-size: 22px;
     margin: 0;
   }
   .content {
     padding: 0 20px;
     width: 100%;
     box-sizing: border-box;
   }
   
   /* AdminLTE nav-header */
   .nav-header {
     font-size: 10px !important;
     font-weight: 700 !important;
     color: var(--cp-text-muted) !important;
     letter-spacing: 2px !important;
     text-transform: uppercase;
     padding: 12px 18px 4px !important;
   }
   
   /* AdminLTE nav-treeview */
   .nav-treeview .nav-link {
     padding-left: 40px !important;
     font-size: 12px !important;
   }
   
   /* AdminLTE elevation override: no shadows */
   .elevation-4 { box-shadow: none !important; }
   
   /* ── Sidebar collapse (replaces AdminLTE pushmenu) ───── */
   body.sidebar-collapse .main-sidebar {
     margin-left: -250px;
   }
   body.sidebar-collapse .main-header {
     left: 0;
   }
   body.sidebar-collapse .content-wrapper {
     margin-left: 0 !important;
     width: 100% !important;
   }

   /* ── Mobile / tablet: sidebar em overlay (AdminLTE) ───── */
   .sidebar-backdrop {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 1037;
     background: rgba(6, 6, 14, 0.72);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
   }
   body.sidebar-mobile-open .sidebar-backdrop {
     display: block;
   }

   @media (max-width: 991.98px) {
     .main-header {
       left: 0 !important;
       right: 0;
       width: 100%;
       max-width: 100vw;
       padding-left: 4px;
       padding-right: 8px;
     }
     .content-wrapper {
       margin-left: 0 !important;
       width: 100% !important;
       max-width: 100vw;
     }
     .main-sidebar {
       margin-left: 0 !important;
       transform: translateX(-100%);
       transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 1040;
       box-shadow: none;
     }
     body.sidebar-mobile-open .main-sidebar {
       transform: translateX(0);
       box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
     }
     /* No mobile, sidebar-collapse do desktop não deve espremer o layout */
     body.sidebar-collapse .main-header {
       left: 0 !important;
     }
     body.sidebar-collapse .content-wrapper {
       margin-left: 0 !important;
       width: 100% !important;
     }
     body.sidebar-collapse .main-sidebar {
       transform: translateX(-100%);
     }
     body.sidebar-collapse.sidebar-mobile-open .main-sidebar {
       transform: translateX(0);
     }
     .content-header {
       padding: 12px 14px 0;
     }
     .content-header h1 {
       font-size: clamp(1.1rem, 4vw, 1.35rem);
       word-break: break-word;
     }
     .content {
       padding: 0 12px 16px;
     }
     .container-fluid {
       padding-left: 12px !important;
       padding-right: 12px !important;
     }
     .card-header {
       flex-wrap: wrap;
       gap: 8px;
     }
     .card-tools {
       flex-wrap: wrap;
       width: 100%;
       justify-content: flex-end;
     }
     .modal-dialog {
       margin: 0.5rem auto;
       max-width: calc(100vw - 1rem);
     }
     .actions-grid {
       grid-template-columns: 1fr;
     }
     #worldWrap {
       min-height: 260px;
     }
     #worldSvg {
       height: min(50vw, 320px);
       min-height: 220px;
     }
     .shots-grid {
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
     }
     .cp-modal-section .d-flex {
       flex-wrap: wrap;
     }
     .top-actions {
       flex-wrap: wrap;
     }
   }

   @media (max-width: 576px) {
     .main-header .navbar-nav .nav-link {
       padding: 10px 12px;
       min-width: 44px;
       justify-content: center;
     }
     .small-box .inner h3 {
       font-size: 24px;
     }
     .info-box-number {
       font-size: 18px;
     }
     .table thead th,
     .table tbody td {
       padding: 8px 10px !important;
       font-size: 12px;
     }
     .card-body .table-responsive {
       min-height: 0;
     }
   }
   
   /* Treeview sub-menu toggle  */
   .nav-treeview {
     display: none;
     padding-left: 0;
   }
   .nav-item.has-treeview.menu-open > .nav-treeview {
     display: block;
   }
   .nav-item.has-treeview > .nav-link .fas.fa-angle-left {
     transition: transform 250ms ease;
   }
   .nav-item.has-treeview.menu-open > .nav-link .fas.fa-angle-left {
     transform: rotate(-90deg);
   }
   
   /* ── Bootstrap utility fallbacks (for pages without Bootstrap CSS) ── */
   .d-none { display: none !important; }
   .d-block { display: block !important; }
   .d-flex { display: flex !important; }
   .d-inline-block { display: inline-block !important; }
   .mb-1 { margin-bottom: 0.25rem !important; }
   .mb-2 { margin-bottom: 0.5rem !important; }
   .mb-3 { margin-bottom: 1rem !important; }
   .mt-2 { margin-top: 0.5rem !important; }
   .mt-3 { margin-top: 1rem !important; }
   .mr-1 { margin-right: 0.25rem !important; }
   .mr-2 { margin-right: 0.5rem !important; }
   .ml-2 { margin-left: 0.5rem !important; }
   .btn-block { display: block; width: 100%; }
   .text-center { text-align: center !important; }
   
   /* ── Bootstrap button overrides — ALL RED THEME ────────── */
   .btn-primary,
   .btn-success,
   .btn-info {
     background: var(--cp-red) !important;
     border-color: var(--cp-red) !important;
     color: #fff !important;
   }
   .btn-primary:hover,
   .btn-success:hover,
   .btn-info:hover {
     background: #e0152a !important;
     border-color: #e0152a !important;
     box-shadow: 0 0 12px rgba(255,26,46,0.35);
   }
   .btn-warning {
     background: #cc1425 !important;
     border-color: #cc1425 !important;
     color: #fff !important;
   }
   .btn-warning:hover {
     background: #b31020 !important;
     border-color: #b31020 !important;
   }
   .btn-danger {
     background: #8b0a15 !important;
     border-color: #8b0a15 !important;
     color: #fff !important;
   }
   .btn-danger:hover {
     background: #6e0810 !important;
     border-color: #6e0810 !important;
   }
   .btn-outline-primary,
   .btn-outline-info {
     color: var(--cp-red) !important;
     border-color: var(--cp-red) !important;
     background: transparent !important;
   }
   .btn-outline-primary:hover,
   .btn-outline-info:hover {
     background: rgba(255,26,46,0.12) !important;
     color: #fff !important;
   }
   .btn-outline-secondary {
     color: var(--cp-text-muted) !important;
     border-color: var(--cp-border) !important;
     background: transparent !important;
   }
   .btn-outline-secondary:hover {
     background: rgba(255,26,46,0.08) !important;
     color: var(--cp-red) !important;
     border-color: var(--cp-red) !important;
   }
   
   /* ── Badge overrides — RED ─────────────────────────────── */
   .badge-danger,
   .badge-primary,
   .badge-info {
     background: var(--cp-red) !important;
     color: #fff !important;
   }
   .badge-secondary {
     background: rgba(255,26,46,0.15) !important;
     color: var(--cp-red) !important;
     border: 1px solid rgba(255,26,46,0.3);
   }
   .badge-success {
     background: rgba(255,26,46,0.2) !important;
     color: #ff4d5e !important;
   }
   
   /* ── Brand link in sidebar — logo glow ─────────────────── */
   .brand-link {
     display: flex !important;
     align-items: center;
     padding: 12px 16px;
     border-bottom: 1px solid var(--cp-border) !important;
     text-decoration: none !important;
   }
   .brand-link img {
     filter: brightness(2) drop-shadow(0 0 6px rgba(255,26,46,0.3));
   }