/* Social Command Center — compact card layout */
:root {
  --bg:#0F1416;
  --panel:#1A2124;
  --panel-2:#222B2F;
  --ink:#E8EDEE;
  --muted:#7A8488;
  --muted-2:#A5ADAF;
  --accent:#C04A28;
  --accent-dark:#9E3B1F;
  --hot:#E94B2F;
  --border:rgba(255,255,255,0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ----- auth ----- */
.auth-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:40px 32px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.auth-brand { font-weight:700; letter-spacing:0.02em; font-size:18px; margin-bottom:24px; text-align:center; color:var(--muted); text-transform:uppercase; }
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.auth-label input { padding:12px 14px; border-radius:8px; border:1px solid var(--border); background:#0F1416; color:var(--ink); font-size:15px; font-family:inherit; }
.auth-label input:focus { outline:none; border-color:var(--accent); }
.btn-primary { background:var(--accent); color:white; border:none; padding:12px 16px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; }
.btn-primary:hover { background:var(--accent-dark); }
.auth-error { color:#E76F51; font-size:13px; text-align:center; margin-top:4px; }

/* ----- shell + topbar ----- */
.app-shell { min-height:100vh; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:10; }
.brand-tabs { display:flex; gap:4px; }
.brand-tab { padding:6px 12px; font-size:13px; font-weight:600; border-radius:6px; color:var(--muted); cursor:pointer; }
.brand-tab.active { background:var(--accent); color:white; }
.topbar-meta { display:flex; align-items:center; gap:18px; }
.counts { color:var(--muted); font-size:12px; }
.logout-form { margin:0; }
.link-button { background:transparent; border:none; color:var(--muted); font-size:12px; cursor:pointer; font-family:inherit; }
.link-button:hover { color:var(--ink); }

/* ----- queue ----- */
.queue { max-width:1180px; margin:0 auto; padding:24px 24px 64px; }
.queue-header { margin-bottom:16px; }
.queue-header h1 { font-size:22px; font-weight:700; margin:0 0 4px; }
.queue-header .hint { color:var(--muted); font-size:12px; margin:0; }
.queue-empty { display:flex; align-items:center; justify-content:center; padding:120px 24px; }
.queue-empty-card { max-width:520px; text-align:center; }
.queue-empty-card h1 { font-size:22px; font-weight:700; margin:0 0 12px; }
.queue-empty-card p { color:var(--muted); margin:0 0 6px; font-size:13px; }

/* ----- card ----- */
.card-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px 14px; display:flex; gap:12px; align-items:flex-start; transition:background 0.12s ease; }
.card:hover { background:var(--panel-2); }
.card.priority-hot { border-left:3px solid var(--hot); }

.card-left { flex-shrink:0; }
.card-thumb, .card-thumb-placeholder { display:block; width:56px; height:56px; border-radius:6px; overflow:hidden; }
.card-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.card-thumb-placeholder { display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:white; letter-spacing:0.04em; }

.card-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }

.card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted); line-height:1.4; }
.platform-pill { padding:1px 6px; border-radius:3px; font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:0.05em; }
.platform-instagram { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:white; }
.platform-facebook  { background:#1877F2; color:white; }
.platform-tiktok    { background:#000; color:white; border:1px solid #25F4EE; }
.card-handle { font-weight:600; color:var(--muted-2); font-size:11px; }
.ad-badge { background:var(--accent); color:white; padding:1px 5px; border-radius:3px; font-weight:700; font-size:9px; letter-spacing:0.05em; }
.dm-badge { background:#7B5FE0; color:white; padding:1px 5px; border-radius:3px; font-weight:700; font-size:9px; letter-spacing:0.05em; }
.hot-badge { background:rgba(233,75,47,0.18); color:var(--hot); padding:1px 6px; border-radius:3px; font-weight:700; font-size:10px; letter-spacing:0.04em; }

/* classification badge — color by class family */
.class-badge { padding:1px 6px; border-radius:3px; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; background:rgba(255,255,255,0.06); color:var(--muted-2); }
.class-lead                    { background:rgba(58,191,107,0.15); color:#5BD49C; }
.class-question                { background:rgba(78,165,255,0.15); color:#7CB8FF; }
.class-compliment              { background:rgba(216,180,90,0.15); color:#E6CC78; }
.class-complaint, .class-complaint_on_active_ad { background:rgba(233,75,47,0.18); color:#FF8474; }
.class-troll_or_negative_on_ad { background:rgba(233,75,47,0.18); color:#FF8474; }
.class-escalation              { background:rgba(231,46,122,0.20); color:#FF6FB0; }
.class-spam, .class-emoji_only, .class-tag_a_friend { background:rgba(255,255,255,0.05); color:var(--muted); }
.class-other                   { background:rgba(255,255,255,0.06); color:var(--muted-2); }

.card-time { margin-left:auto; font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); }

.card-line { display:flex; gap:8px; align-items:baseline; font-size:13.5px; line-height:1.4; }
.card-author { font-weight:600; flex-shrink:0; color:var(--ink); }
.card-author a { color:var(--ink); }
.author-anon { color:var(--muted); font-style:italic; font-weight:500; }
.card-content { color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

.card-proposal { display:flex; gap:8px; align-items:flex-start; background:rgba(192,74,40,0.08); border-left:2px solid var(--accent); padding:7px 10px; border-radius:0 4px 4px 0; font-size:13.5px; line-height:1.45; margin-top:4px; }
.proposal-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); flex-shrink:0; padding-top:5px; }
.proposal-edit { flex:1; background:transparent; border:none; resize:none; color:var(--ink); font-family:var(--font); font-size:13.5px; line-height:1.45; padding:3px 0; outline:none; min-height:24px; }
.proposal-edit:focus { background:rgba(255,255,255,0.04); border-radius:4px; padding:3px 6px; }
.card-proposal-empty { color:var(--muted); font-size:11.5px; font-style:italic; margin-top:4px; }

.card-actions { display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); margin-top:8px; }
.btn-action { padding:6px 12px; border-radius:5px; font-family:var(--font); font-size:11.5px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all 0.12s ease; letter-spacing:0.02em; }
.btn-action:disabled { opacity:0.5; cursor:not-allowed; }
.btn-approve { background:var(--accent); color:white; }
.btn-approve:hover:not(:disabled) { background:var(--accent-dark); }
.btn-edit { background:#5BA85C; color:white; }
.btn-edit:hover:not(:disabled) { background:#4A8E4B; }
.btn-hide { background:rgba(255,255,255,0.06); color:var(--muted-2); border-color:var(--border); }
.btn-hide:hover:not(:disabled) { background:rgba(255,255,255,0.10); color:var(--ink); }
.btn-skip { background:transparent; color:var(--muted); }
.btn-skip:hover:not(:disabled) { color:var(--ink); }
.action-link { color:var(--muted-2); }
.action-link:hover { color:var(--accent); }
.action-stub { font-style:italic; }

/* ----- status tabs ----- */
.status-tabs { max-width:1180px; margin:0 auto; padding:14px 24px 0; display:flex; gap:2px; border-bottom:1px solid var(--border); }
.status-tab { padding:9px 14px; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.12s ease; display:inline-flex; align-items:center; gap:6px; }
.status-tab:hover { color:var(--ink); text-decoration:none; }
.status-tab.on { color:var(--ink); border-bottom-color:var(--accent); }
.status-tab em { font-style:normal; color:var(--muted); font-size:11px; padding:1px 6px; background:rgba(255,255,255,0.06); border-radius:3px; font-variant-numeric:tabular-nums; }
.status-tab.on em { color:white; background:var(--accent); }

/* ----- filter bar (dropdowns) ----- */
.filterbar { max-width:1180px; margin:0 auto; padding:10px 24px 4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.dd { position:relative; }
.dd > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:6px; font-size:12px; color:var(--muted-2); background:rgba(255,255,255,0.04); border:1px solid var(--border); user-select:none; }
.dd > summary::-webkit-details-marker { display:none; }
.dd > summary::after { content:'▾'; font-size:9px; opacity:0.6; margin-left:2px; }
.dd > summary strong { color:var(--ink); font-weight:600; }
.dd > summary .all { color:var(--muted); font-style:italic; font-weight:500; }
.dd[open] > summary { background:rgba(255,255,255,0.10); color:var(--ink); border-color:var(--accent); }
.dd:hover > summary { color:var(--ink); }

.dd-panel { position:absolute; top:calc(100% + 4px); left:0; z-index:20; min-width:180px; max-height:360px; overflow-y:auto; background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:4px; box-shadow:0 12px 36px rgba(0,0,0,0.5); }
.dd-panel-wide { min-width:240px; }
.dd-opt { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:5px; cursor:pointer; font-size:12.5px; }
.dd-opt:hover { background:rgba(255,255,255,0.06); }
.dd-opt input[type=checkbox], .dd-opt input[type=radio] { accent-color:var(--accent); margin:0; }
.dd-opt span { flex:1; color:var(--ink); text-transform:capitalize; }
.dd-opt em { font-style:normal; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.dd-opt.dd-hot span { color:var(--hot); font-weight:600; }

.filter-clear { font-size:11px; color:var(--muted); padding:6px 10px; border-radius:5px; margin-left:auto; }
.filter-clear:hover { background:rgba(255,255,255,0.08); color:var(--ink); text-decoration:none; }

/* ----- DM-specific card visuals ----- */
.card.type-dm .card-thumb-placeholder { background:linear-gradient(135deg,#7B5FE0,#C04A28); }