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

:root {
  --bg-primary: #010101;
  --bg-secondary: #0a0a0a;
  --bg-card: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.15);
  --text-primary: #f0f0f0;
  --text-secondary: #888;
  --text-muted: #555;
  --cyan: #25F4EE;
  --pink: #FE2C55;
  --purple: #7B2FFF;
  --green: #00E676;
  --yellow: #FFD600;
  --red: #FF3D3D;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
}

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

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

/* ─── HEADER ─────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(1,1,1,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.header-left { display:flex; align-items:center; gap:14px; }
.logo-icon {
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800;
}
.header h1 { font-size:1.3rem; font-weight:700; }
.header h1 span {
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.header-right { display:flex; align-items:center; gap:16px; }
.account-count {
  background:var(--glass); border:1px solid var(--glass-border);
  padding:6px 14px; border-radius:20px;
  font-size:0.8rem; color:var(--text-secondary);
}
.account-count strong { color:var(--cyan); }

/* ─── NAV TABS ───────────────────────────── */
.nav-tabs {
  display:flex; gap:4px;
  padding:12px 32px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
}
.nav-tab {
  padding:10px 20px;
  border-radius:var(--radius-sm);
  font-size:0.85rem; font-weight:500;
  color:var(--text-secondary);
  cursor:pointer; border:none; background:none;
  transition:all .2s;
  white-space:nowrap;
}
.nav-tab:hover { color:var(--text-primary); background:var(--glass); }
.nav-tab.active {
  color:var(--cyan);
  background:rgba(37,244,238,0.08);
}
.nav-tab .badge {
  display:inline-block;
  background:var(--pink);
  color:#fff; font-size:0.7rem;
  padding:1px 7px; border-radius:10px;
  margin-left:6px; font-weight:600;
}

/* ─── MAIN CONTAINER ─────────────────────── */
.main { padding:24px 32px; max-width:1400px; margin:0 auto; }
.section { display:none; animation:fadeIn .3s ease; }
.section.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.section-title {
  font-size:1.4rem; font-weight:700;
  margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.section-title .icon { font-size:1.3rem; }

/* ─── CARDS GRID ─────────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px; margin-bottom:24px;
}

/* ─── ACCOUNT CARD ───────────────────────── */
.account-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  transition:all .25s;
  position:relative; overflow:hidden;
}
.account-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.account-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  opacity:0; transition:opacity .3s;
}
.account-card:hover::before { opacity:1; }
.account-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.account-avatar {
  width:50px; height:50px; border-radius:50%;
  border:2px solid var(--border);
  object-fit:cover; background:var(--bg-secondary);
}
.account-avatar-placeholder {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700;
}
.account-name { font-weight:600; font-size:1rem; }
.account-id { font-size:0.75rem; color:var(--text-muted); margin-top:2px; font-family:monospace; }
.account-meta { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.meta-badge {
  font-size:0.75rem; padding:4px 10px;
  border-radius:6px; background:var(--glass);
  border:1px solid var(--glass-border);
}
.meta-badge.valid { color:var(--green); border-color:rgba(0,230,118,0.2); }
.meta-badge.expired { color:var(--red); border-color:rgba(255,61,61,0.2); }
.account-actions { display:flex; gap:8px; }

/* ─── BUTTONS ────────────────────────────── */
.btn {
  padding:8px 18px; border-radius:var(--radius-sm);
  font-size:0.85rem; font-weight:500; cursor:pointer;
  border:1px solid var(--border); background:var(--glass);
  color:var(--text-primary); transition:all .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover { background:var(--bg-card); border-color:var(--border-hover); }
.btn-primary {
  background:linear-gradient(135deg,var(--cyan),#1ad4cf);
  color:#000; border:none; font-weight:600;
}
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-danger { color:var(--red); border-color:rgba(255,61,61,0.2); }
.btn-danger:hover { background:rgba(255,61,61,0.1); }
.btn-pink {
  background:linear-gradient(135deg,var(--pink),#e0264c);
  color:#fff; border:none; font-weight:600;
}
.btn-pink:hover { filter:brightness(1.1); }
.btn-lg { padding:12px 28px; font-size:0.95rem; border-radius:var(--radius); }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

.add-account-card {
  background:var(--bg-card);
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:40px 20px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; cursor:pointer;
  transition:all .25s;
  min-height:180px;
}
.add-account-card:hover { border-color:var(--cyan); background:rgba(37,244,238,0.03); }
.add-account-card .plus { font-size:2.5rem; color:var(--cyan); font-weight:300; line-height:1; }
.add-account-card span { font-size:0.9rem; color:var(--text-secondary); }

/* ─── VIDEO SELECT ───────────────────────── */
.video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px; margin-bottom:20px;
}
.video-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px; cursor:pointer;
  transition:all .2s;
}
.video-item:hover { border-color:var(--border-hover); }
.video-item.selected { border-color:var(--cyan); background:rgba(37,244,238,0.05); }
.video-item .filename { font-size:0.85rem; font-weight:500; margin-bottom:6px; word-break:break-all; }
.video-item .meta { font-size:0.75rem; color:var(--text-muted); display:flex; gap:12px; }

/* ─── FORM ───────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:6px; color:var(--text-secondary); }
.form-input {
  width:100%; padding:10px 14px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:0.9rem; font-family:'Inter',sans-serif;
  transition:border-color .2s;
}
.form-input:focus { outline:none; border-color:var(--cyan); }
textarea.form-input { min-height:80px; resize:vertical; }
.form-select {
  width:100%; padding:10px 14px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:0.9rem; cursor:pointer;
}

/* ─── CHECKBOX ───────────────────────────── */
.checkbox-group { display:flex; flex-wrap:wrap; gap:10px; }
.checkbox-item {
  display:flex; align-items:center; gap:8px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:8px 14px; cursor:pointer;
  transition:all .2s;
}
.checkbox-item:hover { border-color:var(--border-hover); }
.checkbox-item.checked { border-color:var(--cyan); background:rgba(37,244,238,0.06); }
.checkbox-item input[type="checkbox"] { accent-color:var(--cyan); }
.checkbox-item .cb-avatar { width:28px; height:28px; border-radius:50%; }
.checkbox-item .cb-name { font-size:0.85rem; }

/* ─── HISTORY TABLE ──────────────────────── */
.table-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow-x:auto;
}
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  padding:14px 16px; text-align:left;
  font-size:0.75rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  background:var(--bg-secondary);
}
.data-table td {
  padding:12px 16px; font-size:0.85rem;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--glass); }

/* ─── STATUS BADGES ──────────────────────── */
.status { padding:3px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; display:inline-block; }
.status-pending { background:rgba(255,214,0,0.1); color:var(--yellow); }
.status-uploading { background:rgba(37,244,238,0.1); color:var(--cyan); }
.status-processing { background:rgba(123,47,255,0.1); color:var(--purple); }
.status-published { background:rgba(0,230,118,0.1); color:var(--green); }
.status-failed { background:rgba(255,61,61,0.1); color:var(--red); }

/* ─── PROGRESS BAR ───────────────────────── */
.progress-bar-wrap {
  width:100%; height:6px;
  background:var(--bg-secondary);
  border-radius:3px;
  overflow:hidden; margin-top:8px;
}
.progress-bar-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  transition:width .3s;
  width:0%;
}

/* ─── TOAST ──────────────────────────────── */
.toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:14px 20px;
  background:rgba(10,10,10,0.95);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:0.85rem;
  animation:slideIn .3s ease;
  max-width:380px;
  display:flex; align-items:center; gap:10px;
}
.toast.success { border-left:3px solid var(--green); }
.toast.error { border-left:3px solid var(--red); }
.toast.info { border-left:3px solid var(--cyan); }
@keyframes slideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* ─── EMPTY STATE ────────────────────────── */
.empty-state {
  text-align:center; padding:60px 20px;
  color:var(--text-muted);
}
.empty-state .icon { font-size:3rem; margin-bottom:12px; opacity:.5; }
.empty-state p { font-size:0.9rem; margin-bottom:16px; }

/* ─── POST FORM LAYOUT ──────────────────── */
.post-layout { display:grid; grid-template-columns:1fr 360px; gap:24px; }
@media(max-width:900px) { .post-layout { grid-template-columns:1fr; } }
.post-sidebar {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}
.post-sidebar h3 { font-size:0.95rem; font-weight:600; margin-bottom:14px; }

/* ─── FOOTER ─────────────────────────────── */
.footer {
  text-align:center; padding:24px;
  border-top:1px solid var(--border);
  margin-top:40px;
  font-size:0.8rem; color:var(--text-muted);
}
.footer a { color:var(--text-secondary); text-decoration:none; margin:0 10px; }
.footer a:hover { color:var(--cyan); }

/* ─── LOADING ────────────────────────────── */
.spinner {
  width:20px; height:20px;
  border:2px solid var(--border);
  border-top-color:var(--cyan);
  border-radius:50%;
  animation:spin .6s linear infinite;
  display:inline-block;
}
@keyframes spin { to{transform:rotate(360deg)} }
.loading-overlay {
  position:fixed; inset:0;
  background:rgba(1,1,1,0.7);
  display:flex; align-items:center; justify-content:center;
  z-index:9998; display:none;
}
.loading-overlay.show { display:flex; }