*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #07070f;
  --bg2:      #0e0e1a;
  --bg3:      #151526;
  --border:   rgba(255,255,255,0.08);
  --purple:   #7c3aed;
  --purple-l: #9d5cf6;
  --green:    #10b981;
  --red:      #ef4444;
  --yellow:   #f59e0b;
  --text:     #e2e2f0;
  --muted:    #8b8bab;
  --radius:   14px;
  --sidebar:  240px;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── AUTH ───────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #2d1b6933 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 100% 100%, #1e3a5f33 0%, transparent 60%),
              var(--bg);
}

.auth-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: fadeUp 0.4s ease;
}

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

.logo-wrap { text-align: center; margin-bottom: 28px; }
.logo-icon { font-size: 2.5rem; margin-bottom: 10px; }
.logo-wrap h1 { font-size: 1.4rem; font-weight: 700; }
.logo-wrap p  { color: var(--muted); font-size: .85rem; margin-top: 4px; }

.tabs { display: flex; background: var(--bg2); border-radius: 8px; padding: 4px; margin-bottom: 24px; }
.tab  { flex: 1; padding: 8px; border: none; background: transparent; color: var(--muted);
        cursor: pointer; border-radius: 6px; font-family: inherit; font-size: .9rem; transition: all .2s; }
.tab.active { background: var(--purple); color: #fff; font-weight: 600; }

/* ── FIELDS ─────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
.field input,
.field textarea,
.field select {
  width: 100%; padding: 10px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-family: inherit; font-size: .9rem; outline: none; transition: border-color .2s;
}
.field input:focus,
.field textarea:focus { border-color: var(--purple); }
.field textarea { resize: vertical; }
.field small { color: var(--muted); font-size: .78rem; margin-top: 4px; display: block; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  background: var(--purple); color:#fff; border:none; border-radius:9px;
  padding:10px 20px; font-family:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.btn-primary:hover { background: var(--purple-l); transform: translateY(-1px); }
.btn-primary.full  { width:100%; padding:12px; }

.btn-secondary {
  background: var(--bg2); color:var(--text); border:1px solid var(--border);
  border-radius:9px; padding:10px 20px; font-family:inherit; font-size:.9rem;
  cursor:pointer; transition:all .2s;
}
.btn-secondary:hover { border-color: var(--purple); }

.btn-sm {
  background: var(--purple); color:#fff; border:none; border-radius:7px;
  padding:8px 14px; font-family:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer;
}

.btn-logout {
  background: transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:8px; padding:7px 12px; font-family:inherit; font-size:.82rem;
  cursor:pointer; width:100%; margin-top:10px; transition:all .2s;
}
.btn-logout:hover { border-color:var(--red); color:var(--red); }

.btn-danger {
  background: transparent; color:var(--red); border:1px solid var(--red);
  border-radius:7px; padding:5px 10px; font-family:inherit; font-size:.78rem;
  cursor:pointer; transition:all .2s;
}
.btn-danger:hover { background: var(--red); color:#fff; }

.error-msg { background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3);
             color:var(--red); border-radius:8px; padding:10px 14px; font-size:.85rem; margin-bottom:12px; }

/* ── LAYOUT ─────────────────────────────────────────── */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 20px 14px;
  position: fixed; height: 100vh; top: 0; left: 0; z-index: 50;
}

.sidebar-logo { font-size: 1.1rem; font-weight: 700; padding: 10px 6px 24px;
                display:flex; align-items:center; gap:8px; }
.sidebar-logo span { font-size: .9rem; }

nav { flex: 1; }
.nav-item {
  display:block; padding:10px 12px; border-radius:9px; color:var(--muted);
  text-decoration:none; font-size:.88rem; font-weight:500;
  cursor:pointer; margin-bottom:4px; transition:all .2s;
}
.nav-item:hover { background:var(--bg3); color:var(--text); }
.nav-item.active { background:rgba(124,58,237,.2); color:var(--purple-l); }

.sidebar-bottom { margin-top: auto; }
.user-card { display:flex; align-items:center; gap:10px; padding:10px 6px; }
.user-avatar { width:34px; height:34px; border-radius:50%; background:var(--purple);
               display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.fw600 { font-weight:600; font-size:.88rem; }
.plan-badge { font-size:.72rem; padding:2px 8px; border-radius:20px;
              background:rgba(124,58,237,.2); color:var(--purple-l); display:inline-block; margin-top:2px; }

.main-content { margin-left:var(--sidebar); padding:28px; flex:1; }

.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.topbar h2 { font-size:1.5rem; font-weight:700; }

.section-title { font-size:1rem; font-weight:600; margin:24px 0 14px; }

/* ── STATS GRID ─────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:8px; }
.stat-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; text-align:center; transition:transform .2s;
}
.stat-card:hover { transform:translateY(-3px); }
.stat-icon { font-size:1.8rem; margin-bottom:8px; }
.stat-val  { font-size:2rem; font-weight:700; color:var(--purple-l); }
.stat-lbl  { font-size:.8rem; color:var(--muted); margin-top:4px; }

/* ── CHANNELS GRID ──────────────────────────────────── */
.channels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }

.channel-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; transition:all .2s;
}
.channel-card:hover { border-color:rgba(124,58,237,.4); }

.ch-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ch-name   { font-weight:700; font-size:1rem; }
.ch-status { font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:600; }
.ch-status.active   { background:rgba(16,185,129,.15); color:var(--green); }
.ch-status.inactive { background:rgba(239,68,68,.1);  color:var(--red); }

.ch-info { font-size:.78rem; color:var(--muted); display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.ch-info span { display:flex; align-items:center; gap:6px; }

.ch-schedule { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.time-tag { background:rgba(124,58,237,.15); color:var(--purple-l); font-size:.75rem;
            padding:3px 10px; border-radius:20px; font-weight:500; }

.ch-actions { display:flex; gap:8px; }

/* ── LOGS LIST ──────────────────────────────────────── */
.logs-list { display:flex; flex-direction:column; gap:10px; }
.log-item {
  background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:14px 18px; display:flex; align-items:center; gap:14px;
}
.log-status { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.log-status.success { background:var(--green); box-shadow:0 0 8px var(--green); }
.log-status.error   { background:var(--red);   box-shadow:0 0 8px var(--red); }
.log-status.pending { background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
.log-title  { font-size:.9rem; font-weight:500; flex:1; }
.log-meta   { font-size:.75rem; color:var(--muted); }
.log-err    { font-size:.75rem; color:var(--red); margin-top:2px; }

/* ── ADMIN USERS TABLE ──────────────────────────────── */
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { text-align:left; padding:10px 14px; font-size:.8rem; color:var(--muted);
                  border-bottom:1px solid var(--border); }
.admin-table td { padding:12px 14px; font-size:.88rem; border-bottom:1px solid var(--border); }
.admin-table tr:last-child td { border-bottom:none; }

.plan-select { background:var(--bg2); color:var(--text); border:1px solid var(--border);
               border-radius:6px; padding:4px 8px; font-family:inherit; }

/* ── MODAL ──────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--bg3); border:1px solid var(--border); border-radius:18px;
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  animation:slideUp .25s ease;
}
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }

.modal-header { display:flex; align-items:center; justify-content:space-between;
                padding:20px 24px 0; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--muted); font-size:1.2rem;
               cursor:pointer; padding:4px; }
.modal-body   { padding:20px 24px; }
.modal-footer { padding:0 24px 20px; display:flex; justify-content:flex-end; gap:10px; }

/* ── TAG WRAP ───────────────────────────────────────── */
.tag-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:30px; }
.tag      { display:flex; align-items:center; gap:5px; background:rgba(124,58,237,.2);
            color:var(--purple-l); font-size:.8rem; padding:4px 10px; border-radius:20px; }
.tag button { background:none; border:none; color:var(--purple-l); cursor:pointer; font-size:.9rem; }

.row-flex { display:flex; gap:8px; align-items:center; }
.row-flex input { flex:1; }

/* ── UTILS ──────────────────────────────────────────── */
.hidden { display:none !important; }
.empty-state { text-align:center; color:var(--muted); padding:50px 20px; }
.empty-state .big { font-size:2.5rem; margin-bottom:10px; }

@media (max-width:900px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .sidebar { transform:translateX(-100%); }
  .main-content { margin-left:0; }
}