@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #0b0f17; /* Deep dark space-slate */
  --bg2: #111622; /* Card background */
  --bg3: #181f30; /* Active states & inputs */
  --card: #111622;
  --card-border: rgba(255, 255, 255, 0.05);
  --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  --primary: #3b82f6; /* Modern VK-blue */
  --primary-hover: #2563eb;
  --secondary: rgba(255, 255, 255, 0.04);
  --secondary-hover: rgba(255, 255, 255, 0.08);
  --accent: #00f2fe; /* Glowing active cyan */
  --text: #f8fafc; /* Primary white text */
  --text-link: #3b82f6;
  --muted: #64748b; /* Sleek cool gray */
  --success: #10b981;
  --error: #ef4444;
  --font: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
  --r: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Modal Tabs */
.modal-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--card-border); padding-bottom: 0px; }
.modal-tab { padding: 12px 16px; cursor: pointer; color: var(--muted); font-size: 14px; transition: var(--r); font-weight: 600; border-bottom: 2px solid transparent; }
.modal-tab:hover { color: var(--text); background: var(--bg3); border-radius: 8px 8px 0 0; }
.modal-tab.active { color: var(--text); border-bottom: 2px solid var(--primary); }

.tab-content-item { display: none; animation: fadeIn 0.3s ease; }
.tab-content-item.active { display: block; }

/* Advanced Account Picker */
.account-chip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto; padding: 5px; }
.account-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--card-border); border-radius: 8px; cursor: pointer; transition: var(--r); position: relative; }
.account-chip:hover { background: var(--secondary-hover); border-color: rgba(255, 255, 255, 0.1); }
.account-chip input { cursor: pointer; accent-color: var(--primary); }
.account-chip.selected { border-color: var(--primary); background: rgba(59, 130, 246, 0.08); }
.account-chip .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:8px; height: 8px;}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background: rgba(255, 255, 255, 0.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background: rgba(255, 255, 255, 0.15)}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.mono{font-family:var(--mono)}

/* ── CARDS ── */
.glass, .stat-card, .section-card, .auth-card, .bento-item, .pricing-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:10px;border:none;
  font-family:var(--font);font-weight:600;font-size:14px;
  cursor:pointer;text-decoration:none;transition:var(--r);white-space:nowrap;
}
.btn-primary{background:var(--primary);color:#fff;box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);}
.btn-primary:hover{background:var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);}
.btn-outline{background:transparent;border:1px solid rgba(59, 130, 246, 0.4);color:#60a5fa}
.btn-outline:hover{background:rgba(59, 130, 246, 0.08); border-color: var(--primary);}
.btn-ghost{background:transparent;color:var(--muted);padding:8px 16px}
.btn-ghost:hover{color:var(--text); background:var(--bg3)}
.btn-sm{padding:8px 14px;font-size:13px; border-radius: 8px;}
.btn-block{width:100%}
.btn-danger{background:transparent;border:1px solid rgba(239, 68, 68, 0.4);color:#f87171}
.btn-danger:hover{background:rgba(239, 68, 68, 0.08); border-color: var(--error);}

/* ── FORMS ── */
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--muted);text-transform: uppercase; letter-spacing: 0.5px;}
.form-control {
  width:100%;padding:12px 16px;
  background:rgba(0, 0, 0, 0.25);
  border:1px solid rgba(255, 255, 255, 0.06);
  border-radius:10px;color:var(--text);
  font-family:var(--font);font-size:14px;
  transition:var(--r);outline:none;
}
.form-control:focus{border-color:var(--primary);background:rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);}
.form-control::placeholder{color:rgba(255, 255, 255, 0.25)}
select.form-control option{background:var(--card)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:30px;font-size:11px;font-weight:700;}
.badge-active{color:#fff;background:rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399;}
.badge-paused{color:var(--muted);background:rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);}
.badge-banned{color:#fff;background:rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171;}
.badge-cooldown{color:#fff;background:rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24;}
.badge-draft{color:var(--muted);background:rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);}
.badge-running{color:#fff;background:rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); color: #60a5fa;}
.badge-done{color:#fff;background:rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399;}

/* ── SIDEBAR ── */
.app-wrap{display:flex;min-height:100vh; max-width: 1200px; margin: 0 auto; padding-top: 56px;}

.sidebar {
  width:240px;flex-shrink:0;
  background:transparent;
  display:flex;flex-direction:column;
  position:fixed;height:calc(100vh - 56px);z-index:200;
  transition:var(--r);
  overflow-y: auto;
  padding-top: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.nav{flex:1;padding:0 12px;display:flex;flex-direction:column;gap:4px}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  transition: var(--r);
  border-right: 3px solid transparent;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}
.nav-item.active {
  background: rgba(0, 242, 254, 0.04);
  border-right: 3px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}
.nav-icon{
  font-size:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color: inherit;
  opacity: 0.85;
}
.nav-icon svg { width: 18px; height: 18px; stroke-width: 2px; }
.nav-label{flex:1}
.nav-group-label {
  padding: 20px 14px 6px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 1px;
}

.sidebar-balance {
  margin:16px 12px;padding:14px;
  background: rgba(255, 255, 255, 0.02);
  border:1px solid rgba(255,255,255,0.05);border-radius:12px;
}
.balance-label{font-size:11px;color:var(--muted);margin-bottom:4px; text-transform: uppercase; letter-spacing: 0.5px;}
.balance-val{font-size:18px;font-weight:800;color:var(--text);font-family: var(--mono);}
.sidebar-bottom{padding:16px 12px}

/* ── MAIN ── */
.main {
  flex:1;margin-left:240px;
  min-height:100vh;
  background: transparent;
  padding: 24px 28px;
}

.topbar {
  display:flex;justify-content:space-between;align-items:center;
  padding:0 max(28px, calc(50vw - 600px));
  height: 56px;
  border-bottom:1px solid rgba(255, 255, 255, 0.03);
  background: rgba(11, 15, 23, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position:fixed;top:0;left:0;right:0;z-index:1000;
}
.vk-logo-header {
  font-size:22px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.page-title{display: none;}
.topbar-right{display:flex;align-items:center;gap:20px}
.clock{font-size:13.5px;color:var(--muted); font-weight: 600; font-family: var(--mono);}
.header-profile { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #f8fafc; cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: var(--r); }
.header-profile:hover { background: rgba(255, 255, 255, 0.04); }
.header-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #00f2fe); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

.content{padding:0}

/* ── STATS GRID ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card {
  padding:20px;
}
.stat-icon{font-size:22px;margin-bottom:12px;color:var(--primary)}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:4px; font-weight: 600;}
.stat-val{font-size:28px;font-weight:800;color:var(--text); font-family: var(--mono);}

/* ── SECTION CARD ── */
.section-card{padding:24px; margin-bottom: 24px; border-radius: 16px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 14px;}
.section-title{font-size:16px;font-weight:700}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:12px 14px;font-size:12.5px;color:var(--muted);border-bottom:1px solid rgba(255, 255, 255, 0.04);font-weight:600; text-transform: uppercase; letter-spacing: 0.5px;}
.tbl td{padding:14px;border-bottom:1px solid rgba(255, 255, 255, 0.03);font-size:14px;vertical-align:middle;color:var(--text)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255, 255, 255, 0.01)}
.tbl-name{font-weight:600;color:var(--text)}

/* ── PROGRESS BAR ── */
.progress{height:8px;background:rgba(255, 255, 255, 0.05);border-radius:4px;overflow:hidden;margin-top:6px}
.progress-bar{height:100%;background:linear-gradient(90deg, #3b82f6, #00f2fe);border-radius:4px}

/* ── AUTH PAGES ── */
.auth-bg {
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);
}
.auth-card {
  width:100%;max-width:400px;
  padding:40px;
}
.auth-logo{font-size:32px;font-weight:800;letter-spacing:-0.5px;text-align:center;margin-bottom:24px;color:var(--text);}
.auth-title{font-size:22px;text-align:center;margin-bottom:8px; font-weight: 700;}
.auth-sub{text-align:center;color:var(--muted);margin-bottom:28px;font-size:14px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--muted);font-size:12px; font-weight: 600;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255, 255, 255, 0.05)}
.auth-link{text-align:center;margin-top:24px;font-size:14px;color:var(--muted)}
.auth-link a{color:var(--text-link);text-decoration:none;font-weight:600}
.auth-link a:hover{text-decoration:underline}

/* ── MODALS ── */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:20px;padding:32px;width:100%;max-width:550px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-title{font-size:20px;font-weight:800}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:22px;padding:4px;transition:var(--r)}
.modal-close:hover{color:var(--text)}

/* ── GRID HELPERS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}

/* ── UTILS ── */
.text-primary{color:#60a5fa}
.text-secondary{color:#34d399}
.text-accent{color:#f87171}
.text-muted{color:var(--muted)}
.fw-600{font-weight:600}
.fw-500{font-weight:500}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-8{margin-top:8px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.gap-12{display:flex;gap:12px}.gap-16{display:flex;gap:16px}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.empty-state{text-align:center;padding:48px 24px;color:var(--muted)}
.empty-icon{font-size:36px;margin-bottom:16px;display:block;color:#334155}

/* ── ACTIVITY ITEM ── */
.activity-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255, 255, 255, 0.03)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:8px;flex-shrink:0}
.activity-text{font-size:13.5px;color:var(--text)}
.activity-time{font-size:12px;color:var(--muted);margin-top:4px}

/* ── CHART AREA ── */
.chart-wrap{height:180px;background:rgba(0, 0, 0, 0.2);border-radius:12px;
  display:flex;align-items:flex-end;gap:6px;padding:16px;overflow:hidden}
.chart-bar{flex:1;border-radius:4px 4px 0 0;background:var(--primary);
  transition:height 0.3s ease;min-height:6px; opacity: 0.8;}
.chart-bar:hover{opacity: 1; filter: brightness(1.2);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .app-wrap{padding-top: 56px;}
  .topbar{padding:0 20px;}
}
@media(max-width:768px){
  .sidebar{display:none;}
  .main{margin-left:0; padding: 16px;}
  .stats-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
.user-list-item:hover div {
  background: var(--bg3) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── EDITOR TOOLBAR ── */
.tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: var(--r);
  padding: 0;
}
.tool-btn:hover {
  background: var(--bg3);
  color: var(--text);
}
.tool-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

/* SEARCH INPUT TOPBAR */
.search-wrapper-header {
  position: relative;
  max-width: 260px;
  width: 100%;
}
.search-input-header {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: var(--r);
}
.search-input-header:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.search-icon-header {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 14px;
  pointer-events: none;
}