/* ============================================================
   MULTISTREAM DASHBOARD v2 — main.css
   ============================================================ */
:root {
  --bg-primary:   #0f0f13;
  --bg-secondary: #1a1a24;
  --bg-panel:     #16161f;
  --bg-message:   #1e1e2a;
  --bg-message-alt:#191926;
  --bg-header:    #12121a;
  --border:       #2a2a3a;
  --border-thick: #3a3a50;
  --text:         #e8e8f0;
  --text-sub:     #9090a8;
  --text-muted:   #5a5a70;
  --accent:       #6c63ff;
  --accent-h:     #7c73ff;
  --youtube:  #ff0000;
  --kick:     #53fc18;
  --tiktok:   #fe2c55;
  --twitch:   #9146ff;
  --success:  #2ecc71;
  --warning:  #f39c12;
  --danger:   #e74c3c;
  --info:     #3498db;
  --col-divider: 3px solid #2a2a3a;
  --fs: 13px;
}

[data-theme="light"] {
  --bg-primary:   #f0f0f5;
  --bg-secondary: #e4e4ee;
  --bg-panel:     #f8f8fc;
  --bg-message:   #ffffff;
  --bg-message-alt:#f3f3f8;
  --bg-header:    #e0e0ea;
  --border:       #c8c8d8;
  --border-thick: #b0b0c8;
  --text:         #1a1a2e;
  --text-sub:     #5a5a78;
  --text-muted:   #9090a8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--fs); background: var(--bg-primary); color: var(--text); overflow: hidden; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-thick); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── App Shell ─────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Topbar ────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; height: 52px; background: var(--bg-header);
  border-bottom: var(--col-divider); flex-shrink: 0; gap: 12px; z-index: 100;
}
.logo { font-size: 17px; font-weight: 800; color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.logo span { color: var(--text-sub); font-weight: 400; font-size: 11px; margin-left: 5px; }
.topbar-stats { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: center; font-size: 12px; color: var(--text-sub); }
.topbar-stats strong { color: var(--text); }
.live-badge { color: var(--success); font-weight: 700; animation: liveFlash 2s infinite; }
@keyframes liveFlash { 0%,100%{opacity:1} 50%{opacity:.4} }
.topbar-user { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 8px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

/* ── Session bar ───────────────────────────────────────────── */
#session-bar {
  display: flex; align-items: center; gap: 10px; padding: 5px 14px;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-size: 12px; flex-wrap: wrap;
}
.session-status { display: flex; align-items: center; gap: 6px; }
.session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.session-dot.active { background: var(--success); animation: pulse 2s infinite; }
.session-timer { font-weight: 700; color: var(--text); min-width: 60px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Buttons ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:6px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn:hover { background:var(--border-thick); border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-h); }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.success { background:var(--success); border-color:var(--success); color:#fff; }
.btn.sm { padding:3px 8px; font-size:11px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Dashboard grid ────────────────────────────────────────── */
#dashboard { display:flex; flex:1; overflow-x:auto; overflow-y:hidden; }

/* ── Platform column ───────────────────────────────────────── */
.platform-col { display:flex; flex-direction:column; min-width:280px; flex:1; border-right:var(--col-divider); background:var(--bg-panel); position:relative; }
.platform-col:last-child { border-right:none; }
.platform-col.dragging { opacity:.5; cursor:grabbing; }
.platform-col.drag-over { border-left:3px solid var(--accent); }
.platform-col.col-hidden { display:none; }

/* ── Column header ─────────────────────────────────────────── */
.col-header { padding:9px 11px 7px; background:var(--bg-header); border-bottom:var(--col-divider); flex-shrink:0; cursor:grab; user-select:none; }
.col-header:active { cursor:grabbing; }
.col-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.platform-name { font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.plt-dot { width:9px; height:9px; border-radius:50%; }
.col-header-meta { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-sub); }
.vc-dot { width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; }
.msg-badge { background:var(--bg-secondary); border-radius:9px; padding:1px 6px; font-size:10px; }
.col-header-btns button { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px 5px; border-radius:4px; font-size:12px; transition:color .15s,background .15s; }
.col-header-btns button:hover { color:var(--text); background:var(--bg-secondary); }

/* ── Filter chips ──────────────────────────────────────────── */
.col-filters { display:flex; gap:4px; padding:5px 9px; background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-wrap:wrap; flex-shrink:0; }
.f-btn { font-size:10px; padding:2px 7px; border-radius:9px; border:1px solid var(--border); background:none; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.f-btn:hover { color:var(--text); border-color:var(--text-sub); }
.f-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Search ────────────────────────────────────────────────── */
.col-search { padding:5px 9px; background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-shrink:0; }
.col-search input { width:100%; padding:4px 9px; background:var(--bg-primary); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:12px; outline:none; }
.col-search input:focus { border-color:var(--accent); }
.col-search input::placeholder { color:var(--text-muted); }

/* ── TikTok category ───────────────────────────────────────── */
.tt-cat-bar { display:flex; align-items:center; gap:7px; padding:5px 9px; background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:11px; flex-shrink:0; }
.tt-cat-bar label { color:var(--text-muted); white-space:nowrap; }
.tt-cat-bar select { flex:1; padding:3px 6px; background:var(--bg-primary); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:11px; outline:none; }

/* ── Chat feed ─────────────────────────────────────────────── */
.chat-feed { flex:1; overflow-y:auto; padding:4px 3px; display:flex; flex-direction:column; gap:1px; }
.chat-feed.paused { opacity:.8; }

/* ── Messages ──────────────────────────────────────────────── */
.chat-msg { display:flex; flex-direction:column; padding:4px 7px; border-radius:4px; background:var(--bg-message); cursor:pointer; position:relative; transition:background .12s; border-left:3px solid transparent; }
.chat-msg:nth-child(even) { background:var(--bg-message-alt); }
.chat-msg:hover { background:var(--bg-secondary); }
.chat-msg.msg-moderator  { border-left-color:var(--info); }
.chat-msg.msg-subscriber { border-left-color:var(--success); }
.chat-msg.msg-vip        { border-left-color:var(--warning); }
.chat-msg.msg-cyrillic   { border-left-color:#a855f7; }
.chat-msg.msg-highlighted{ outline:1px solid var(--accent); background:rgba(108,99,255,.1)!important; }

.event-banner { display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:5px; font-size:12px; font-weight:600; margin:2px 3px; }
.event-gift        { background:linear-gradient(90deg,rgba(254,44,85,.13),transparent); border-left:3px solid var(--tiktok); color:var(--tiktok); }
.event-membership  { background:linear-gradient(90deg,rgba(241,196,15,.12),transparent); border-left:3px solid #f1c40f; color:#f1c40f; }
.event-follow      { background:linear-gradient(90deg,rgba(46,204,113,.12),transparent); border-left:3px solid var(--success); color:var(--success); }
.event-superchat   { background:linear-gradient(90deg,rgba(255,0,0,.12),transparent); border-left:3px solid var(--youtube); color:var(--youtube); }
.event-subscription{ background:linear-gradient(90deg,rgba(145,70,255,.12),transparent); border-left:3px solid var(--twitch); color:var(--twitch); }
.event-bits        { background:linear-gradient(90deg,rgba(52,152,219,.12),transparent); border-left:3px solid var(--info); color:var(--info); }
.event-ban         { background:linear-gradient(90deg,rgba(231,76,60,.12),transparent); border-left:3px solid var(--danger); color:var(--danger); }
.event-system      { color:var(--text-muted); font-style:italic; font-size:11px; padding:3px 7px; }

.msg-header { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:1px; }
.msg-user { font-weight:600; font-size:12px; color:var(--text); cursor:pointer; }
.msg-user:hover { text-decoration:underline; }
.msg-time { font-size:10px; color:var(--text-muted); margin-left:auto; }
.msg-body { font-size:var(--fs); color:var(--text); line-height:1.4; word-break:break-word; }

/* ── Badges ────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; font-size:9px; font-weight:700; padding:1px 5px; border-radius:7px; letter-spacing:.3px; text-transform:uppercase; }
.b-mod     { background:rgba(52,152,219,.25); color:#3498db; }
.b-sub     { background:rgba(46,204,113,.25); color:#2ecc71; }
.b-vip     { background:rgba(243,156,18,.25); color:#f39c12; }
.b-owner   { background:rgba(231,76,60,.25); color:#e74c3c; }
.b-cyr     { background:rgba(168,85,247,.3); color:#a855f7; }
.b-gifter  { background:rgba(254,44,85,.25); color:#fe2c55; }
.b-chatter { background:rgba(108,99,255,.3); color:#6c63ff; }

/* ── Context menu ──────────────────────────────────────────── */
.ctx-menu { position:fixed; background:var(--bg-secondary); border:1px solid var(--border-thick); border-radius:8px; min-width:175px; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.45); overflow:hidden; animation:ctxIn .1s ease; }
@keyframes ctxIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.ctx-head { padding:7px 11px; font-size:11px; color:var(--text-muted); border-bottom:1px solid var(--border); font-weight:600; }
.ctx-item { display:flex; align-items:center; gap:7px; padding:7px 11px; font-size:12px; cursor:pointer; color:var(--text); transition:background .1s; }
.ctx-item:hover { background:var(--bg-message); }
.ctx-item.danger { color:var(--danger); }
.ctx-item.warn   { color:var(--warning); }
.ctx-sep { height:1px; background:var(--border); margin:2px 0; }

/* ── Command bar ───────────────────────────────────────────── */
.cmd-bar { padding:6px 7px 5px; background:var(--bg-header); border-top:var(--col-divider); flex-shrink:0; }
.cmd-row1 { display:flex; gap:5px; margin-bottom:4px; }
.cmd-row2 { display:flex; gap:5px; }
.cmd-bar select, .cmd-bar input { padding:5px 7px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:12px; outline:none; }
.cmd-bar select:focus, .cmd-bar input:focus { border-color:var(--accent); }
.cmd-bar select { max-width:120px; cursor:pointer; }
.cmd-bar input { flex:1; }
.broadcast-lbl { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text-muted); white-space:nowrap; cursor:pointer; }
.broadcast-lbl input { accent-color:var(--accent); cursor:pointer; }

/* ── Platform color accents ────────────────────────────────── */
[data-platform="YouTube"] .platform-name { color:var(--youtube); }
[data-platform="YouTube"] .plt-dot { background:var(--youtube); }
[data-platform="Kick"]    .platform-name { color:var(--kick); }
[data-platform="Kick"]    .plt-dot { background:var(--kick); }
[data-platform="TikTok"]  .platform-name { color:var(--tiktok); }
[data-platform="TikTok"]  .plt-dot { background:var(--tiktok); }
[data-platform="Twitch"]  .platform-name { color:var(--twitch); }
[data-platform="Twitch"]  .plt-dot { background:var(--twitch); }

/* ── Settings modal ────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:1000; display:flex; align-items:center; justify-content:center; animation:fadeIn .2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--bg-panel); border:1px solid var(--border-thick); border-radius:12px; width:90%; max-width:680px; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:slideUp .2s ease; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-head h2 { font-size:15px; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.modal-close:hover { color:var(--text); background:var(--bg-secondary); }
.modal-tabs { display:flex; border-bottom:1px solid var(--border); padding:0 18px; flex-shrink:0; overflow-x:auto; }
.m-tab { padding:9px 14px; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s; }
.m-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.modal-body { flex:1; overflow-y:auto; padding:18px; }
.modal-foot { padding:10px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* Settings rows */
.s-section { margin-bottom:22px; }
.s-section h3 { font-size:11px; font-weight:700; color:var(--text-sub); margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; }
.s-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); }
.s-row:last-child { border-bottom:none; }
.s-label { font-size:13px; flex:1; }
.s-desc  { font-size:11px; color:var(--text-muted); }
.s-row select, .s-row input[type=text], .s-row input[type=number], .s-row input[type=color] { padding:4px 7px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:12px; outline:none; min-width:120px; }
.s-row input[type=color] { min-width:36px; padding:2px; cursor:pointer; height:26px; }
.s-row input:focus, .s-row select:focus { border-color:var(--accent); }
.toggle { position:relative; width:36px; height:19px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-sl { position:absolute; inset:0; background:var(--border-thick); border-radius:19px; cursor:pointer; transition:.2s; }
.toggle-sl::before { content:''; position:absolute; left:3px; top:3px; width:13px; height:13px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .toggle-sl { background:var(--accent); }
.toggle input:checked + .toggle-sl::before { transform:translateX(17px); }

/* Connected account cards */
.account-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:11px; margin-bottom:8px; }
.account-card-head { display:flex; align-items:center; justify-content:space-between; }
.account-platform { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.account-status { font-size:11px; padding:2px 8px; border-radius:9px; }
.status-connected    { background:rgba(46,204,113,.2); color:var(--success); }
.status-disconnected { background:rgba(90,90,112,.2); color:var(--text-muted); }
.status-expired      { background:rgba(243,156,18,.2); color:var(--warning); }
.account-details { margin-top:8px; font-size:11px; color:var(--text-muted); display:flex; gap:12px; }
.account-actions { margin-top:8px; display:flex; gap:6px; }

/* Commands */
.cmd-list { display:flex; flex-direction:column; gap:5px; }
.cmd-item { display:flex; align-items:center; gap:7px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:5px; padding:5px 9px; }
.cmd-item-name { font-weight:600; color:var(--accent); min-width:85px; font-size:12px; }
.cmd-item input { flex:1; background:none; border:none; color:var(--text); font-size:12px; outline:none; }
.cmd-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; }
.cmd-del:hover { color:var(--danger); }

/* ── Toast ─────────────────────────────────────────────────── */
#toasts { position:fixed; bottom:14px; right:14px; z-index:10000; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
.toast { padding:9px 14px; border-radius:7px; font-size:12px; font-weight:500; max-width:300px; box-shadow:0 4px 16px rgba(0,0,0,.4); animation:toastIn .25s ease,toastOut .25s ease 2.7s forwards; pointer-events:auto; }
@keyframes toastIn  { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateX(16px)} }
.toast-info    { background:var(--info);    color:#fff; }
.toast-success { background:var(--success); color:#fff; }
.toast-warn    { background:var(--warning); color:#fff; }
.toast-error   { background:var(--danger);  color:#fff; }

/* ── Mod confirmation ──────────────────────────────────────── */
.mod-confirm { position:fixed; top:64px; left:50%; transform:translateX(-50%); background:var(--bg-secondary); border:1px solid var(--border-thick); border-radius:7px; padding:9px 18px; font-size:12px; z-index:9998; box-shadow:0 4px 16px rgba(0,0,0,.4); animation:toastIn .2s ease; color:var(--text); max-width:380px; text-align:center; }

/* ── Stream logs page ──────────────────────────────────────── */
.logs-page { min-height:100vh; background:var(--bg-primary); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; overflow-y:auto; }
.logs-nav { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--bg-header); border-bottom:var(--col-divider); position:sticky; top:0; z-index:50; }
.logs-nav .logo { font-size:16px; font-weight:800; color:var(--accent); }
.logs-content { max-width:1200px; margin:0 auto; padding:24px; }
.logs-header { margin-bottom:20px; }
.logs-header h1 { font-size:22px; font-weight:700; margin-bottom:4px; }
.logs-header p  { font-size:13px; color:var(--text-muted); }

/* Platform tabs */
.p-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.p-tab { padding:9px 18px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all .15s; }
.p-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.p-tab:hover:not(.active) { color:var(--text); }

/* Stream cards */
.stream-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.stream-card { background:var(--bg-panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .15s; }
.stream-card:hover { border-color:var(--accent); }
.stream-card-head { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; }
.stream-card-title { font-weight:700; font-size:14px; margin-bottom:3px; }
.stream-card-date  { font-size:11px; color:var(--text-muted); }
.stream-card-dur   { font-size:11px; color:var(--text-sub); background:var(--bg-secondary); padding:2px 8px; border-radius:9px; white-space:nowrap; }
.stream-card-body  { padding:12px 14px; }
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.metric { display:flex; flex-direction:column; }
.metric-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:1px; }
.metric-value { font-size:14px; font-weight:700; color:var(--text); }
.metric-value.na { font-size:11px; font-weight:400; color:var(--text-muted); font-style:italic; }
.stream-card-foot { padding:8px 14px; border-top:1px solid var(--border); display:flex; gap:6px; justify-content:flex-end; }

/* Filters bar */
.logs-filters { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.logs-filters select, .logs-filters input { padding:5px 9px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:5px; color:var(--text); font-size:12px; outline:none; }
.logs-filters select:focus, .logs-filters input:focus { border-color:var(--accent); }
.logs-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.logs-empty h3 { font-size:18px; margin-bottom:8px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .platform-col { min-width:260px; }
  .topbar-stats { display:none; }
  .logs-content { padding:14px; }
  .stream-cards { grid-template-columns:1fr; }
}

/* Live badge states */
.live-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}
.live-badge.is-live {
  color: #ff3333;
  animation: liveBlink 1.8s ease-in-out infinite;
}
.live-badge.not-live {
  color: #555;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

.chat-emote { height:20px; width:auto; vertical-align:middle; display:inline-block; margin:0 1px; }
.b-ver { background:rgba(155,89,182,.25); color:#9b59b6; }