/* FB Scraper Pro — Design System */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --accent:#00ff9c;--bg:#0d0f12;--bg1:#0b0d10;--bg2:#14171c;
  --line:#1f2329;--text:#e6edf3;--text2:#8b96a5;--text3:#4a5568;
  --ok:#22c55e;--warn:#f59e0b;--err:#ef4444;--cyan:#4dd0ff;
  --font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
  --sb-w:220px;--tb-h:38px;
}
body[data-theme="light"]{
  --accent:#10b981;--bg:#f8fafc;--bg1:#fff;--bg2:#f1f5f9;
  --line:#e2e8f0;--text:#0f172a;--text2:#475569;--text3:#94a3b8;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;overflow:hidden;height:100vh}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--tb-h);background:var(--bg1);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:16px;z-index:100;font-family:var(--mono);font-size:.7rem}
.tb-brand{color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:1px}
.tb-tickers{display:flex;gap:12px;color:var(--text3)}
.tb-tick b{color:var(--ok);margin-left:2px}
.tb-stats{margin-left:auto;display:flex;gap:14px}
.tb-stat{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.tb-stat small{font-size:.55rem;color:var(--text3);text-transform:uppercase}
.tb-stat b{color:var(--accent);font-size:.72rem}

/* SIDEBAR */
.sidebar{position:fixed;top:var(--tb-h);left:0;bottom:0;width:var(--sb-w);background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:90;overflow-y:auto}
.sb-nav{flex:1;padding:8px}
.sb-section{margin-bottom:8px}
.sb-label{display:block;font-size:.6rem;text-transform:uppercase;color:var(--text3);padding:8px 10px 4px;letter-spacing:1.5px;font-family:var(--mono)}
.sb-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:none;background:none;color:var(--text2);font-size:.78rem;cursor:pointer;border-radius:6px;font-family:var(--font);transition:all .15s}
.sb-btn:hover{background:var(--bg2);color:var(--text)}
.sb-btn.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.sb-glyph{width:18px;text-align:center;font-size:.85rem}
.sb-btn kbd{margin-left:auto;font-size:.6rem;color:var(--text3);font-family:var(--mono);background:var(--bg2);padding:1px 5px;border-radius:3px}
.sb-footer{padding:10px;border-top:1px solid var(--line)}
.sb-colors{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.color-dot{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}
.color-dot.active{border-color:var(--text);transform:scale(1.2)}

/* MAIN */
.main{position:fixed;top:var(--tb-h);left:var(--sb-w);right:0;bottom:0;overflow-y:auto;padding:24px;background:var(--bg)}
.page{display:none}
.page.active{display:block}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.78rem;border-radius:6px;cursor:pointer;font-family:var(--font);transition:all .15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}
.btn-primary:hover{opacity:.85}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}
.btn-secondary{background:var(--bg2);color:var(--text2)}
.btn-ghost{background:none;border:none;color:var(--accent);padding:4px 8px}
.btn-sm{padding:3px 8px;font-size:.72rem}

/* FORMS */
.form-input{width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font-size:.82rem;font-family:var(--font);transition:border-color .2s}
.form-input:focus{outline:none;border-color:var(--accent)}
textarea.form-input{resize:vertical;min-height:60px}
.form-label{display:block;font-size:.72rem;color:var(--text2);margin-bottom:4px;font-weight:500}
.form-group{margin-bottom:12px}
.form-row{display:flex;gap:12px;align-items:flex-end}
.form-check{display:flex;align-items:center;gap:6px;font-size:.78rem;cursor:pointer}
.form-check input[type="checkbox"]{accent-color:var(--accent)}

/* TABLES */
.data-table{width:100%;border-collapse:collapse;font-size:.78rem}
.data-table th{background:var(--bg2);color:var(--text2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);position:sticky;top:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px}
.data-table td{padding:6px 10px;border-bottom:1px solid var(--line)}
.data-table tr:hover{background:var(--bg2)}
.empty-row td{text-align:center;padding:40px;color:var(--text3)}

/* CARDS */
.card{background:var(--bg1);border:1px solid var(--line);border-radius:10px;padding:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:.85rem;font-weight:600}

/* STATS ROW */
.stats-row{display:flex;gap:12px;margin-bottom:16px}
.stat-box{flex:1;background:var(--bg1);border:1px solid var(--line);border-radius:8px;padding:10px 14px;text-align:center}
.stat-box .stat-val{font-size:1.4rem;font-weight:700;font-family:var(--mono);color:var(--accent)}
.stat-box .stat-lbl{font-size:.65rem;color:var(--text3);text-transform:uppercase;margin-top:2px}

/* TABS */
.tab-bar{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:16px}
.tab-btn{padding:8px 16px;background:none;border:none;color:var(--text3);font-size:.78rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.68rem;font-weight:600}
.badge-live{background:rgba(34,197,94,.15);color:#22c55e}
.badge-dead{background:rgba(239,68,68,.1);color:#ef4444}
.badge-unknown{background:rgba(245,158,11,.1);color:#f59e0b}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay[hidden]{display:none}
.modal-overlay.open{display:flex}
.modal-dialog{background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}
.modal-dialog.modal-lg{max-width:800px}
.modal-dialog h3{font-size:.95rem;margin-bottom:12px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* TOAST */
.toast-container{position:fixed;top:calc(var(--tb-h) + 12px);right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;background:var(--bg1);border:1px solid var(--line);font-size:.78rem;animation:slideIn .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.toast svg{width:16px;height:16px;flex-shrink:0}
.toast.success{border-color:var(--ok);color:var(--ok)}
.toast.error{border-color:var(--err);color:var(--err)}
.toast.warn{border-color:var(--warn);color:var(--warn)}
.toast.info{border-color:var(--cyan);color:var(--cyan)}
.toast.hide{animation:slideOut .3s ease forwards}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{to{transform:translateX(100%);opacity:0}}

/* LOG PANEL */
.log-fab{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#000;border:none;font-size:1.1rem;cursor:pointer;z-index:150;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.log-fab-badge{position:absolute;top:-4px;right:-4px;background:var(--err);color:#fff;font-size:.6rem;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.log-panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:160;display:none}
.log-panel-backdrop.open{display:block}
.log-panel{position:fixed;right:0;top:0;bottom:0;width:480px;background:var(--bg1);border-left:1px solid var(--line);z-index:170;transform:translateX(100%);transition:transform .3s ease}
.log-panel.open{transform:translateX(0)}
.log-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:.85rem}
.log-actions{display:flex;gap:8px}
.log-actions button{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--text2)}
.console-area{padding:12px;height:calc(100% - 48px);overflow-y:auto;font-family:var(--mono);font-size:.72rem;line-height:1.6}
.console-line{display:flex;gap:8px;padding:1px 0}
.console-time{color:var(--text3);min-width:60px}
.console-tag{font-weight:700;min-width:36px}
.console-tag.ok{color:var(--ok)}.console-tag.err{color:var(--err)}.console-tag.warn{color:var(--warn)}.console-tag.hint{color:var(--cyan)}

/* TASKS PANEL */
.tasks-panel{position:fixed;bottom:16px;right:80px;width:340px;background:var(--bg1);border:1px solid var(--line);border-radius:12px;z-index:140;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tasks-panel-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:.82rem;font-weight:600}
.tasks-panel-header button{background:none;border:none;color:var(--text2);cursor:pointer}
.tasks-badge{background:var(--accent);color:#000;font-size:.65rem;padding:1px 7px;border-radius:8px;font-weight:700}
.tasks-list{max-height:300px;overflow-y:auto;padding:8px}
.task-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:6px}
.task-card-top{display:flex;align-items:center;gap:6px;font-size:.78rem}
.task-status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.task-status-dot.running{background:var(--accent);animation:pulse 1.5s infinite}
.task-status-dot.done{background:var(--ok)}
.task-status-dot.error{background:var(--err)}
.task-card-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.task-progress-wrap{height:3px;background:var(--line);border-radius:2px;margin:6px 0}
.task-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.task-subtitle{font-size:.7rem;color:var(--text3)}
.task-stats{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.task-stat-pill{font-size:.62rem;padding:2px 6px;border-radius:6px;background:var(--bg);color:var(--text2);font-family:var(--mono)}
.task-card-actions{display:flex;gap:4px;margin-top:6px}
.task-btn-small{background:none;border:1px solid var(--line);color:var(--text2);padding:2px 8px;border-radius:4px;font-size:.68rem;cursor:pointer;display:flex;align-items:center;gap:3px}
.task-btn-small svg{width:12px;height:12px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* MODE SELECTOR */
.mode-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mode-option{border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:border-color .2s}
.mode-option.active{border-color:var(--accent)}
.mode-option-header{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer}
.mode-option-header input[type="radio"]{accent-color:var(--accent)}
.mode-option-body{padding:0 14px 14px;display:none}
.mode-option.active .mode-option-body{display:block}

/* ACCOUNT TABLE */
.acct-status-badge{font-size:.65rem;padding:2px 8px;border-radius:10px;font-weight:700;font-family:var(--mono)}
.acct-status-badge.live{background:rgba(34,197,94,.15);color:#22c55e}
.acct-status-badge.dead{background:rgba(239,68,68,.1);color:#ef4444}
.acct-status-badge.unknown{background:rgba(245,158,11,.1);color:#f59e0b}
.acct-status-badge.checkpoint{background:rgba(245,158,11,.15);color:#f59e0b}
.acct-name-cell{display:flex;align-items:center;gap:6px}
.acct-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--text3);font-weight:700}
.acct-state-cell{display:flex;gap:4px;flex-wrap:wrap}
.row-dead{opacity:.5}
.row-live{}
.row-checkpoint{background:rgba(245,158,11,.05)}

/* HISTORY */
.history-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .15s;font-size:.78rem}
.history-item:hover{background:var(--bg2)}
.history-sdt-badge{font-size:.62rem;padding:2px 6px;border-radius:6px;background:rgba(34,197,94,.15);color:var(--ok);font-family:var(--mono);font-weight:600}

/* SCAN POST CARDS */
.scan-post-card{background:var(--bg1);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;transition:border-color .2s}
.scan-post-card.selected{border-color:var(--accent)}
.sp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0}
.sp-author{font-weight:600;font-size:.82rem}
.sp-time{font-size:.68rem;color:var(--text3)}
.sp-text{font-size:.82rem;line-height:1.5;color:var(--text2);white-space:pre-wrap}
.sp-imgs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sp-imgs img{max-height:120px;border-radius:6px;object-fit:cover}
.sp-foot{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:.7rem;color:var(--text3)}
.sp-meta-pill{background:var(--bg2);padding:2px 8px;border-radius:6px}
.sp-link{color:var(--accent);text-decoration:none}

/* BUFF/COMMENT ACCOUNT LIST */
.buff-acct-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.78rem}
.buff-acct-row:hover{background:var(--bg2)}
.buff-acct-row .avatar{width:28px;height:28px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--text3);font-weight:700;object-fit:cover;flex-shrink:0}
.buff-acct-row .meta{flex:1;min-width:0}
.buff-acct-row .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buff-acct-row .cp{font-size:.68rem;color:var(--text3)}

/* SEG CONTROL */
.seg-control{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg-btn{padding:5px 14px;border:none;background:none;color:var(--text2);font-size:.75rem;cursor:pointer;border-radius:6px;transition:all .15s}
.seg-btn.active{background:var(--accent);color:#000;font-weight:600}

/* FILE DROP */
.file-drop-zone{border:2px dashed var(--line);border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text3);font-size:.82rem}
.file-drop-zone:hover,.file-drop-zone.drag-over{border-color:var(--accent);color:var(--accent)}

/* RESPONSIVE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .3s}
  .sidebar.open{transform:translateX(0)}
  .main{left:0}
  .tb-tickers,.tb-stats{display:none}
}

/* UTILITY */
.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.hidden{display:none!important}