*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-body:#0a0a0a;--bg-sidebar:#050505;--bg-card:#141414;--bg-card-hover:#1a1a1a;
  --border-subtle:rgba(255,255,255,.06);--border-active:rgba(255,255,255,.12);
  --text-primary:#f5f5f5;--text-secondary:#888;--text-muted:#555;
  --accent:#00d4aa;--accent-glow:rgba(0,212,170,.35);--accent-soft:rgba(0,212,170,.12);
  --gold:#f5a623;--red:#ff6b6b;--radius:14px;--radius-sm:10px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --input-bg:#0d0d0d;--logo-text:#fff;
}
[data-theme="light"]{
  --bg-body:#eef1f4;--bg-sidebar:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f3f5f7;
  --border-subtle:rgba(0,0,0,.08);--border-active:rgba(0,0,0,.14);
  --text-primary:#141414;--text-secondary:#4a4a4a;--text-muted:#7a7a7a;
  --accent:#00a884;--accent-glow:rgba(0,168,132,.25);--accent-soft:rgba(0,168,132,.12);
  --input-bg:#f7f8fa;--logo-text:#141414;
}
[data-theme="light"] .logo-text h1{color:var(--logo-text);text-shadow:none}
[data-theme="light"] .btn-primary{color:#fff}
[data-theme="light"] .form-group input,[data-theme="light"] .form-group textarea{background:var(--input-bg);border-color:var(--border-subtle)}
[data-theme="light"] .channel-card.tiktok .channel-icon{color:#141414}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);flex-shrink:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle-fixed{position:fixed;top:20px;right:20px;z-index:1000}
body{font-family:'Poppins',sans-serif;background:var(--bg-body);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.panel{display:none;animation:fadeIn .35s ease}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sidebar{width:260px;min-height:100vh;background:var(--bg-sidebar);border-right:1px solid var(--border-subtle);padding:28px 20px;position:fixed;display:flex;flex-direction:column;z-index:100}
.logo-wrap{display:flex;align-items:center;gap:12px;padding-bottom:28px;border-bottom:1px solid var(--border-subtle);margin-bottom:24px}
.logo-icon{width:48px;height:48px;object-fit:contain;border-radius:12px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(0,212,170,.28))}
.logo-text h1{font-size:1.12rem;font-weight:700;color:var(--logo-text,#fff);line-height:1.2}
.logo-text p{font-size:.68rem;color:var(--text-secondary);margin-top:2px}
.nav-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.88rem;font-weight:500;border:1px solid transparent;cursor:pointer;background:none;width:100%;text-align:left;font-family:inherit;margin-bottom:4px;transition:var(--transition)}
.nav-item:hover{color:var(--text-primary);background:rgba(255,255,255,.04)}
.nav-item.active{color:var(--text-primary);background:var(--accent-soft);border-color:rgba(0,212,170,.2)}
.nav-item.active i{color:var(--accent)}
.sidebar-footer{margin-top:auto;padding-top:20px;border-top:1px solid var(--border-subtle);font-size:.7rem;color:var(--text-muted)}
.main{flex:1;margin-left:260px;padding:32px 40px 60px;max-width:1200px}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.top-bar h2{font-size:1.45rem;font-weight:600;letter-spacing:-.03em}
.top-bar p{font-size:.82rem;color:var(--text-secondary);margin-top:4px}
.section-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:14px}
.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px 28px;margin-bottom:20px}
.btn{padding:12px 22px;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:var(--transition)}
.btn-primary{background:linear-gradient(135deg,#00d4aa,#00f5c4);color:#0a0a0a;box-shadow:0 4px 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--border-active);color:var(--text-secondary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{padding:12px 22px;border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,107,107,.3);background:rgba(255,107,107,.12);color:#ff6b6b}
.confirm-check{display:flex;align-items:flex-start;gap:10px}
.form-group textarea{resize:vertical;min-height:80px}
.badge{padding:4px 10px;border-radius:20px;font-size:.65rem;font-weight:600}
.badge-wait{background:rgba(255,255,255,.06);color:var(--text-secondary)}
.badge-pending{background:rgba(245,166,35,.12);color:var(--gold);border:1px solid rgba(245,166,35,.25)}
.badge-ok{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,212,170,.25)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border-subtle)}
th{color:var(--text-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.chart-box{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:20px}
.chart-box h4{font-size:.82rem;margin-bottom:14px;font-weight:600}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:12px 14px;background:var(--input-bg,#0d0d0d);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.85rem}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
.secure-box{background:rgba(0,212,170,.05);border:1px solid rgba(0,212,170,.18);border-radius:var(--radius-sm);padding:16px;margin-bottom:20px;font-size:.78rem;color:var(--text-secondary);line-height:1.6}
.secure-box i{color:var(--accent);margin-right:6px}
.media-preview-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:20px}
.media-preview-modal.open{display:flex}
.media-preview-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(4px)}
.media-preview-dialog{position:relative;z-index:1;width:min(720px,100%);max-height:90vh;background:var(--bg-card);border:1px solid var(--border-active);border-radius:var(--radius);padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.55);overflow:auto}
.media-preview-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.media-preview-close:hover{color:var(--text-primary);border-color:var(--border-active)}
.media-preview-title{font-size:.92rem;margin:0 40px 14px 0;color:var(--text-primary)}
.media-preview-body video,.media-preview-body img{width:100%;max-height:70vh;border-radius:var(--radius-sm);background:#000;display:block;object-fit:contain}
.media-preview-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.media-preview-select-btn{width:100%;padding:14px;font-size:.9rem}
.media-preview-select-btn.is-selected{background:transparent;border:1px solid var(--accent);color:var(--accent)}
[data-theme="light"] .media-preview-select-btn.is-selected{color:var(--accent)}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 0%,rgba(0,212,170,.08),transparent 60%),var(--bg-body)}
.login-card{width:100%;max-width:400px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:40px 36px}
.login-card .logo-wrap{justify-content:center;border:none;padding:0;margin-bottom:28px}
.login-card h2{text-align:center;font-size:1.2rem;margin-bottom:6px}
.login-card .sub{text-align:center;font-size:.78rem;color:var(--text-secondary);margin-bottom:28px}
.login-error{color:var(--red);font-size:.78rem;margin-top:12px;text-align:center;display:none}
.login-error.show{display:block}
.cloud-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(0,212,170,.06);border:1px solid rgba(0,212,170,.15);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-secondary)}