/* ============================================================
   KRATOS PANEL — Tema Gamer Preto/Vermelho
   ============================================================ */
:root {
  --red:      #c0392b;
  --red-dark: #96281b;
  --red-glow: #e74c3c;
  --bg:       #0a0a0a;
  --bg2:      #111111;
  --bg3:      #1a1a1a;
  --card:     #141414;
  --border:   #2a2a2a;
  --text:     #e8e8e8;
  --muted:    #666;
  --green:    #27ae60;
  --yellow:   #f39c12;
  --font:     'Inter', 'Segoe UI', sans-serif;
  --mono:     'JetBrains Mono', 'Fira Code', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; min-height:100vh; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--red-dark); border-radius:3px; }

/* LAYOUT */
.layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform .25s; }
.sidebar-logo { padding:22px 20px 18px; border-bottom:1px solid var(--border); text-align:center; }
.sidebar-logo .logo-icon { font-size:28px; display:block; margin-bottom:4px; }
.sidebar-logo .logo-name { font-size:18px; font-weight:700; color:var(--red-glow); letter-spacing:.5px; text-shadow:0 0 12px rgba(231,76,60,.4); }
.sidebar-logo .logo-sub  { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
.sidebar-nav  { flex:1; overflow-y:auto; padding:12px 0; }
.nav-section  { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; padding:14px 20px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; color:#aaa; text-decoration:none; border-left:3px solid transparent; transition:all .2s; font-size:13.5px; }
.nav-item:hover { color:var(--text); background:rgba(192,57,43,.08); border-left-color:var(--red-dark); }
.nav-item.active { color:var(--red-glow); background:rgba(192,57,43,.14); border-left-color:var(--red-glow); }
.nav-item .icon { font-size:16px; width:20px; text-align:center; }
.sidebar-footer { padding:14px 20px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.sidebar-footer a { color:var(--red-dark); text-decoration:none; display:flex; align-items:center; gap:6px; padding:6px 0; }
.sidebar-footer a:hover { color:var(--red-glow); }

/* MAIN */
.main { margin-left:240px; flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar { background:var(--bg2); border-bottom:1px solid var(--border); padding:0 28px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar-title { font-size:16px; font-weight:600; }
.topbar-user  { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.topbar-user .badge { background:var(--red-dark); color:#fff; font-size:10px; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; }
.topbar-user .badge.revenda { background:#2c5f8a; }
.page { padding:28px; }

/* CARDS */
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:20px; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-title  { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.card-body   { padding:20px; }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card  { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:20px; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--red-dark); }
.stat-card .stat-icon  { font-size:22px; margin-bottom:10px; display:block; }
.stat-card .stat-val   { font-size:26px; font-weight:700; color:var(--red-glow); font-family:var(--mono); line-height:1; }
.stat-card .stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* TABLE */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; padding:10px 14px; font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr { border-bottom:1px solid #1e1e1e; transition:background .15s; }
tbody tr:hover { background:rgba(255,255,255,.03); }
tbody tr:last-child { border-bottom:none; }
td { padding:11px 14px; white-space:nowrap; }

/* BADGES */
.badge-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 10px; border-radius:20px; font-weight:500; }
.badge-status.online  { background:rgba(39,174,96,.15); color:#2ecc71; }
.badge-status.offline { background:rgba(102,102,102,.15); color:var(--muted); }
.badge-status.expired { background:rgba(192,57,43,.15); color:var(--red-glow); }
.badge-status.valid   { background:rgba(39,174,96,.12); color:#27ae60; }
.badge-status.xray-on  { background:rgba(39,174,96,.15); color:#2ecc71; }
.badge-status.xray-off { background:rgba(192,57,43,.15); color:var(--red-glow); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:6px; font-size:12.5px; font-weight:500; border:none; cursor:pointer; text-decoration:none; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--red-dark); color:#fff; }
.btn-primary:hover { background:var(--red-glow); box-shadow:0 0 12px rgba(231,76,60,.3); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:#444; }
.btn-danger { background:rgba(192,57,43,.15); color:var(--red-glow); border:1px solid rgba(192,57,43,.3); }
.btn-danger:hover { background:rgba(192,57,43,.3); }
.btn-success { background:rgba(39,174,96,.15); color:#2ecc71; border:1px solid rgba(39,174,96,.3); }
.btn-success:hover { background:rgba(39,174,96,.3); }
.btn-warn { background:rgba(243,156,18,.1); color:var(--yellow); border:1px solid rgba(243,156,18,.25); }
.btn-warn:hover { background:rgba(243,156,18,.25); }
.btn-sm { padding:5px 10px; font-size:11.5px; }
.btn-group { display:flex; gap:6px; flex-wrap:wrap; }

/* FORMS */
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
label { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; }
input, select, textarea { background:var(--bg3); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:9px 12px; font-size:13.5px; font-family:var(--font); outline:none; transition:border .2s; width:100%; }
input:focus, select:focus, textarea:focus { border-color:var(--red-dark); box-shadow:0 0 0 2px rgba(192,57,43,.15); }
input::placeholder { color:var(--muted); }
textarea { resize:vertical; min-height:100px; font-family:var(--mono); font-size:12px; }
select option { background:var(--bg3); }

/* ALERTS */
.alert { padding:12px 16px; border-radius:6px; margin-bottom:16px; font-size:13px; display:flex; align-items:center; gap:8px; }
.alert-success { background:rgba(39,174,96,.12); border:1px solid rgba(39,174,96,.25); color:#2ecc71; }
.alert-error   { background:rgba(192,57,43,.12); border:1px solid rgba(192,57,43,.3);  color:var(--red-glow); }
.alert-warn    { background:rgba(243,156,18,.1);  border:1px solid rgba(243,156,18,.25); color:var(--yellow); }

/* MODAL */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:center; justify-content:center; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:10px; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; margin:16px; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title  { font-size:15px; font-weight:600; }
.modal-close  { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.modal-close:hover { color:var(--red-glow); }
.modal-body   { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* TERMINAL */
.terminal { background:#050505; border:1px solid #1e1e1e; border-radius:8px; padding:16px; font-family:var(--mono); font-size:12px; color:#ccc; line-height:1.7; overflow-x:auto; white-space:pre-wrap; }

/* LOGIN */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); background-image:radial-gradient(ellipse at 20% 50%,rgba(192,57,43,.07) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(192,57,43,.05) 0%,transparent 50%); }
.login-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:42px 40px; width:380px; }
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo .icon { font-size:42px; display:block; margin-bottom:8px; }
.login-logo h1 { font-size:22px; font-weight:700; color:var(--red-glow); text-shadow:0 0 20px rgba(231,76,60,.35); }
.login-logo p  { font-size:12px; color:var(--muted); margin-top:4px; }
.login-box .form-group { margin-bottom:16px; }
.btn-login { width:100%; justify-content:center; padding:11px; font-size:14px; margin-top:8px; background:var(--red-dark); color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; transition:all .2s; }
.btn-login:hover { background:var(--red-glow); box-shadow:0 0 20px rgba(231,76,60,.3); }

/* XRAY */
.json-editor { width:100%; min-height:400px; font-family:var(--mono); font-size:12.5px; background:#050505; color:#e8e8e8; border:1px solid var(--border); border-radius:8px; padding:16px; resize:vertical; line-height:1.6; }

/* BOT */
.template-card { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:12px; }
.template-card .tpl-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #1e1e1e; }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:13.5px; }
.toggle-sub   { font-size:11.5px; color:var(--muted); margin-top:2px; }
.toggle { position:relative; width:42px; height:22px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:22px; cursor:pointer; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; width:16px; height:16px; background:#fff; border-radius:50%; bottom:3px; left:3px; transition:.3s; }
.toggle input:checked + .toggle-slider { background:var(--red-dark); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* RESPONSIVE */
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .page { padding:16px; }
  .login-box { width:calc(100% - 32px); padding:28px 20px; }
}