/* ── UNUGHA Brand Audit Dashboard ── */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0F172A;--bg2:#1E293B;--bg3:#334155;
  --cyan:#06B6D4;--amber:#F59E0B;--green:#10B981;--red:#F43F5E;--purple:#8B5CF6;
  --text:#E2E8F0;--text2:#94A3B8;--text3:#64748B;
}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ── NAV ── */
.topnav{display:flex;align-items:center;gap:16px;padding:14px 28px;background:var(--bg2);
  border-bottom:1px solid var(--bg3);position:sticky;top:0;z-index:50;}
.nav-brand{font-size:18px;font-weight:700;white-space:nowrap;margin-right:8px;}
.nav-brand strong{background:linear-gradient(135deg,var(--cyan),var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav-links{display:flex;gap:6px;flex:1;}
.nav-btn{background:none;border:1px solid transparent;color:var(--text2);padding:7px 16px;
  border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:.2s;}
.nav-btn:hover,.nav-btn.active{background:var(--bg3);color:var(--text);border-color:var(--bg3);}
.nav-right{display:flex;align-items:center;gap:10px;}
.status-dot{width:9px;height:9px;border-radius:50%;}
.status-dot.online{background:var(--green);box-shadow:0 0 6px var(--green);}
.status-dot.offline{background:var(--text3);}

/* ── LAYOUT ── */
.container{max-width:1280px;margin:0 auto;padding:28px 24px 80px;}
.tab{display:none;flex-direction:column;gap:20px;}
.tab.active{display:flex;}
.header-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;}

h1{font-size:26px;font-weight:800;margin-bottom:4px;}
.gradient-text{background:linear-gradient(135deg,var(--cyan),var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}

/* ── BUTTONS ── */
.btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;border:none;transition:.2s;}
.btn-cyan{background:var(--cyan);color:#0F172A;}
.btn-cyan:hover{background:#22D3EE;transform:translateY(-1px);}
.btn-outline{background:var(--bg2);color:var(--text2);border:1px solid var(--bg3);}
.btn-outline:hover{background:var(--bg3);color:var(--text);}
.select{background:var(--bg2);color:var(--text);border:1px solid var(--bg3);
  padding:8px 14px;border-radius:8px;font-family:inherit;font-size:13px;cursor:pointer;}

/* ── METRIC CARDS ── */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.metric-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:16px;
  padding:20px;transition:.25s;position:relative;overflow:hidden;}
.metric-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:16px 16px 0 0;}
.metric-card[data-platform="ig"]::before{background:#EC4899;}
.metric-card[data-platform="x"]::before{background:#64748B;}
.metric-card[data-platform="yt"]::before{background:var(--cyan);}
.metric-card[data-platform="tiktok"]::before{background:var(--bg3);}
.metric-card[data-platform="linkedin"]::before{background:#0A66C2;}
.metric-card[data-platform="facebook"]::before{background:#1877F2;}
.metric-card:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 8px 30px #06B6D411;}

.mc-icon{font-size:28px;margin-bottom:8px;}
.mc-label{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;
  letter-spacing:.5px;}
.mc-handle{font-size:11px;color:var(--text3);margin-bottom:10px;}
.mc-followers{font-size:28px;font-weight:800;line-height:1;}
.mc-sub{font-size:11px;color:var(--text3);margin-bottom:8px;}
.mc-stat{font-size:12px;color:var(--text2);}
.mc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--bg3);}
.mc-status{font-size:11px;color:var(--text3);}
.mc-status.ok{color:var(--green);}
.mc-btn{background:var(--bg3);color:var(--text2);border:none;padding:4px 12px;
  border-radius:6px;cursor:pointer;font-size:11px;font-family:inherit;transition:.2s;}
.mc-btn:hover{background:var(--cyan);color:#0F172A;}

/* ── SUMMARY BAR ── */
.summary-bar{display:flex;align-items:center;gap:0;background:var(--bg2);
  border:1px solid var(--bg3);border-radius:12px;overflow:hidden;padding:0 4px;}
.sb-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 12px;gap:4px;}
.sb-sep{width:1px;height:40px;background:var(--bg3);}
.sb-val{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--amber));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sb-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;}

/* ── TOGGLE ── */
.toggle-label{display:flex;align-items:center;cursor:pointer;}
.toggle-label input{display:none;}
.toggle-slider{width:38px;height:22px;background:var(--bg3);border-radius:11px;
  position:relative;transition:.2s;}
.toggle-slider::after{content:"";position:absolute;width:16px;height:16px;
  background:var(--text2);border-radius:50%;top:3px;left:3px;transition:.2s;}
.toggle-label input:checked + .toggle-slider{background:var(--cyan);}
.toggle-label input:checked + .toggle-slider::after{transform:translateX(16px);background:#0F172A;}

/* ── CHART ── */
.chart-container{background:var(--bg2);border:1px solid var(--bg3);border-radius:16px;
  padding:24px;height:300px;}

/* ── HISTORY TABLE ── */
.history-table-wrap{background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;
  overflow:hidden;}
.history-table{width:100%;border-collapse:collapse;font-size:13px;}
.history-table th{text-align:left;padding:12px 16px;font-size:11px;color:var(--text3);
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bg3);
  background:var(--bg);position:sticky;top:0;}
.history-table td{padding:10px 16px;border-bottom:1px solid var(--bg3);}
.history-table tr:last-child td{border-bottom:none;}
.history-table tbody tr:hover{background:#ffffff08;}

/* ── CREDENTIALS ── */
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.cred-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;padding:20px;}
.cred-header{font-size:15px;font-weight:700;margin-bottom:16px;color:var(--cyan);}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px;}
.input{width:100%;background:var(--bg);border:1px solid var(--bg3);border-radius:8px;
  padding:8px 12px;color:var(--text);font-size:13px;font-family:inherit;
  transition:.2s;}
.input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #06B6D422;}

/* ── ALERT ── */
.alert{padding:14px 18px;border-radius:10px;font-size:13px;line-height:1.6;
  border-left:3px solid;}
.alert-info{background:#06B6D411;border-color:var(--cyan);color:var(--text2);}

/* ── LOGS ── */
.logs-container{background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;
  padding:20px;min-height:300px;max-height:500px;overflow:auto;}
.logs-container pre{font-family:'JetBrains Mono','Fira Code',monospace;line-height:1.6;}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--bg2);border:1px solid var(--cyan);color:var(--text);
  padding:12px 24px;border-radius:10px;font-size:13px;z-index:200;
  transition:transform .3s ease;box-shadow:0 8px 30px #0005;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ── SENTIMENT CARDS ── */
.sentiment-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;padding:12px 18px;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.sentiment-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.sentiment-score{font-size:20px;font-weight:800;line-height:1;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .topnav{flex-wrap:wrap;gap:8px;}
  .nav-links{flex-wrap:wrap;}
  .container{padding:16px 12px 80px;}
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
  .summary-bar{flex-wrap:wrap;}
  .sb-item{flex:0 0 50%;}
  .sb-sep{display:none;}
  .header-row{flex-direction:column;}
}
@media(max-width:480px){
  .metrics-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .mc-followers{font-size:22px;}
}