/* ═══════════════════════════════════════════════════════════════════════════
   GenCut HQ Dashboard — style.css
   Dark theme, glass panels, mobile-first responsive
   ═══════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
/* RTL support for Hebrew/Arabic user content */
.task-name,.dp-desc,.user-row,.bug-desc,.al-t,.al-s,.k-l,
textarea,input[type="text"],.login-input,.detail-panel .dp-desc{unicode-bidi:plaintext;direction:auto}
[dir="rtl"],[lang="he"]{direction:rtl;text-align:right}
:root{
  --bg:#050505;--bg2:#080808;--card:rgba(49,194,165,0.04);
  --border:rgba(49,194,165,0.08);--border-h:rgba(49,194,165,0.25);
  --accent:#31C2A5;--accent-dim:rgba(49,194,165,0.15);
  --text:#fff;--text2:rgba(255,255,255,0.35);--text3:rgba(255,255,255,0.2);
  --danger:#ef4444;--warn:#eab308;--success:#22c55e;--purple:#818cf8;--orange:#f97316;--blue:#60a5fa;
  --font-d:'Space Grotesk',sans-serif;--font-b:'Inter',sans-serif;
  --r:14px;--rs:8px;
  /* Social tab aliases */
  --teal:var(--accent);
  --txt:var(--text);--txt2:var(--text2);--txt3:var(--text3);
  --glass:rgba(49,194,165,0.04);--glass-border:rgba(49,194,165,0.08);
  --r-lg:16px;--font:var(--font-b);--mono:'JetBrains Mono',monospace;
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-b);background:var(--bg);color:var(--text)}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(49,194,165,0.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(49,194,165,0.03) 0%,transparent 50%);pointer-events:none;z-index:0}
#app{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
.login-screen{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg)
}
.login-screen::before{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(49,194,165,0.08) 0%,transparent 60%);
  pointer-events:none
}
.login-box{
  text-align:center;position:relative;z-index:1;
  padding:48px 40px;max-width:400px;width:100%;
  background:rgba(8,8,8,0.6);
  border:1px solid var(--border);border-radius:24px;
  backdrop-filter:blur(20px)
}
.login-logo{width:64px;height:64px;border-radius:16px;margin-bottom:20px;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.login-title{
  font-family:var(--font-d);font-size:1.8rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;
  background:linear-gradient(135deg,#fff 30%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text
}
.login-sub{color:var(--text2);font-size:0.9rem;margin-bottom:32px}
.login-btn{
  display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:center;
  padding:14px 32px;border:none;border-radius:14px;font-size:0.95rem;font-weight:600;
  font-family:var(--font-d);cursor:pointer;transition:all 0.2s
}
.login-btn-google{
  background:var(--accent);color:var(--bg);
  box-shadow:0 4px 20px rgba(49,194,165,0.25);margin-bottom:0
}
.login-btn-google:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(49,194,165,0.35)}
.login-btn-google svg{width:20px;height:20px}
.login-divider{
  display:flex;align-items:center;gap:12px;margin:20px 0;
  color:var(--text3);font-size:0.75rem;text-transform:uppercase;letter-spacing:1px
}
.login-divider::before,.login-divider::after{
  content:'';flex:1;height:1px;background:var(--border)
}
.login-token-section{text-align:left}
.login-label{display:block;font-size:0.72rem;color:var(--text2);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.login-input{
  width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:var(--text);font-size:0.85rem;font-family:var(--font-b);outline:none;
  margin-bottom:10px;transition:border-color 0.15s
}
.login-input:focus{border-color:var(--border-h)}
.login-input::placeholder{color:var(--text3)}
.login-btn-token{
  background:rgba(255,255,255,0.06);color:var(--text);
  border:1px solid var(--border);width:100%
}
.login-btn-token:hover{background:rgba(255,255,255,0.1);border-color:var(--border-h)}
.login-error{color:var(--danger);font-size:0.82rem;margin-top:16px;display:none;font-weight:500}
.login-loading{display:none;color:var(--text2);font-size:0.85rem;margin-top:16px}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER (mobile)
   ═══════════════════════════════════════════════════════════════════════════ */
.hdr{padding:12px 16px 10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:rgba(8,8,8,0.95);backdrop-filter:blur(20px);flex-shrink:0;z-index:10}
.hdr-left{display:flex;align-items:center;gap:10px}
.hdr-logo{width:26px;height:26px;border-radius:5px}
.hdr-title{font-family:var(--font-d);font-weight:600;font-size:1.05rem;background:linear-gradient(to right,#fff,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-dim);border:1.5px solid rgba(49,194,165,0.3);display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:var(--accent);font-weight:600;cursor:pointer;position:relative}
.avatar-menu{display:none;position:absolute;top:36px;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:4px 0;min-width:140px;z-index:99}
.avatar-menu.show,.avatar-menu.open{display:block}
.avatar-menu-item{padding:10px 16px;font-size:0.78rem;color:var(--text2);cursor:pointer}
.avatar-menu-item:hover{background:var(--card);color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════ */
.content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.tab-content{display:none;padding:16px 16px 24px;animation:fadeIn 0.15s}
.tab-content.active{display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 1px rgba(49,194,165,0.06)}50%{box-shadow:0 0 0 1px rgba(49,194,165,0.12), 0 0 20px rgba(49,194,165,0.05)}}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM NAV (mobile)
   ═══════════════════════════════════════════════════════════════════════════ */
.nav{display:flex;justify-content:space-around;padding:8px 0 max(env(safe-area-inset-bottom,8px),12px);background:rgba(8,8,8,0.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);flex-shrink:0;z-index:10}
.ni{text-align:center;cursor:pointer;position:relative;padding:5px 8px;-webkit-tap-highlight-color:transparent}
.ni-i{font-size:1.15rem;margin-bottom:2px}
.ni-l{font-size:0.6rem;font-weight:600;letter-spacing:0.3px}
.ni.on .ni-l{color:var(--accent)}.ni:not(.on) .ni-l{color:var(--text3)}.ni:not(.on) .ni-i{opacity:0.35}
.badge{position:absolute;top:-2px;right:-3px;background:var(--danger);color:#fff;font-size:0.5rem;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid var(--bg2)}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section Label ── */
.lbl{font-size:0.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:10px;font-weight:600}

/* ── KPI Grid ── */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.k{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:all 0.15s}
.k:hover{border-color:var(--border-h)}.k:active{transform:scale(0.97)}
.k-l{font-size:0.7rem;color:var(--text2);margin-bottom:4px}
.k-v{font-family:var(--font-d);font-size:1.6rem;font-weight:700;line-height:1;margin-bottom:3px}
.k-c{font-size:0.65rem;font-weight:600}
.up{color:var(--accent)}.warn{color:var(--warn)}.bad{color:var(--danger)}

/* ── Pills ── */
.pills{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;padding:7px 14px;background:var(--accent-dim);border:1px solid rgba(49,194,165,0.12);border-radius:16px;font-size:0.72rem;color:var(--accent);font-weight:600;white-space:nowrap;cursor:pointer;transition:all 0.15s}
.pill:active,.pill.on{background:rgba(49,194,165,0.2);border-color:rgba(49,194,165,0.4)}
.pill-ghost{background:transparent;border-color:var(--border);color:var(--text3)}

/* ── Alert Items ── */
.al{border-radius:12px;padding:12px 14px;margin-bottom:8px;border-left:3px solid;cursor:pointer;transition:all 0.15s}
.al:hover{background:rgba(255,255,255,0.015)}.al:active{background:rgba(255,255,255,0.03)}
.al-bug{background:rgba(239,68,68,0.04);border-color:var(--danger)}
.al-task{background:rgba(49,194,165,0.04);border-color:var(--accent)}
.al-ms{background:rgba(99,102,241,0.04);border-color:var(--purple)}
.al-t{font-size:0.82rem;font-weight:600;margin-bottom:2px}
.al-bug .al-t{color:var(--danger)}.al-task .al-t{color:var(--accent)}.al-ms .al-t{color:var(--purple)}
.al-s{font-size:0.7rem;color:var(--text2)}
.al-arrow{float:right;color:var(--text3);font-size:0.85rem}

/* ── Chart Box ── */
.chart-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px}
.chart-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chart-t{font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.7)}
.chart-p{font-size:0.65rem;color:rgba(49,194,165,0.6);font-weight:600;text-transform:uppercase;letter-spacing:1px}

/* ── Sub-Tabs ── */
.sub-tabs{display:flex;gap:1px;margin-bottom:14px;border-bottom:1px solid var(--border);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.sub-tabs::-webkit-scrollbar{display:none}
.sub-tab{padding:9px 14px;font-size:0.75rem;color:var(--text3);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}
.sub-tab.on{color:var(--accent);border-color:var(--accent)}

/* ── Stat Rows ── */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:background 0.1s}
.stat-row:hover{background:rgba(49,194,165,0.02)}.stat-row:active{background:rgba(49,194,165,0.04)}
.stat-label{font-size:0.82rem;color:rgba(255,255,255,0.6)}
.stat-val{font-family:var(--font-d);font-weight:700;font-size:0.95rem}

/* ═══════════════════════════════════════════════════════════════════════════
   MILESTONE
   ═══════════════════════════════════════════════════════════════════════════ */
.ms-bar{background:var(--card);border:1px solid rgba(99,102,241,0.12);border-radius:12px;padding:14px;margin-bottom:16px;cursor:pointer;transition:all 0.15s}
.ms-bar:hover{border-color:rgba(99,102,241,0.25)}
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ms-name{font-size:0.85rem;font-weight:700;color:var(--purple)}
.ms-pct{font-family:var(--font-d);font-size:0.9rem;font-weight:700;color:var(--purple)}
.ms-progress{height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden}
.ms-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--accent));border-radius:2px}
.ms-items{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ms-item{font-size:0.62rem;padding:4px 9px;border-radius:8px;font-weight:600}
.ms-done{background:rgba(34,197,94,0.1);color:var(--success);text-decoration:line-through;opacity:0.5}
.ms-pending{background:rgba(234,179,8,0.08);color:var(--warn)}
.ms-active{background:rgba(99,102,241,0.1);color:var(--purple)}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK ROWS (Monday-style)
   ═══════════════════════════════════════════════════════════════════════════ */
.group-by{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.group-by-label{font-size:0.72rem;color:var(--text3);font-weight:600}
.group-by-select{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--text);font-size:0.75rem;font-family:var(--font-b);cursor:pointer;outline:none;-webkit-appearance:none}
.group-by-select option{background:var(--bg2);color:var(--text)}

.task-group{margin-bottom:18px}
.task-group-header{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer}
.task-group-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.task-group-name{font-size:0.82rem;font-weight:700;flex:1}
.task-group-count{font-size:0.65rem;color:var(--text2);background:rgba(255,255,255,0.04);padding:2px 7px;border-radius:6px}

.task-header{display:grid;grid-template-columns:1fr 72px 52px 58px;gap:4px;padding:6px 8px;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.8px;color:var(--text3);font-weight:600}
.task-row{display:grid;grid-template-columns:1fr 72px 52px 58px;gap:4px;padding:11px 8px;border-bottom:1px solid rgba(255,255,255,0.025);cursor:pointer;transition:background 0.1s;align-items:center}
.task-row:hover{background:rgba(49,194,165,0.03)}.task-row:active{background:rgba(49,194,165,0.06)}
.task-name{font-size:0.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-status{font-size:0.58rem;font-weight:700;padding:3px 6px;border-radius:4px;text-align:center;text-transform:uppercase}
.st-todo{background:rgba(234,179,8,0.12);color:var(--warn)}
.st-prog{background:rgba(99,102,241,0.12);color:var(--purple)}
.st-done{background:rgba(34,197,94,0.12);color:var(--success)}
.task-pri{font-size:0.65rem;font-weight:700;text-align:center}
.pri-h{color:var(--danger)}.pri-m{color:var(--warn)}.pri-l{color:var(--text3)}
.task-owner{font-size:0.65rem;color:var(--text2);text-align:center}

.group-add{display:flex;gap:6px;padding:6px 0;margin-top:4px}
.group-add input{flex:1;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:8px;padding:9px 12px;color:var(--text);font-size:0.75rem;font-family:var(--font-b);outline:none}
.group-add input:focus{border-color:var(--border-h)}
.group-add input::placeholder{color:var(--text3)}
.group-add button{background:var(--accent);color:var(--bg);border:none;border-radius:8px;padding:9px 16px;font-weight:700;font-size:0.72rem;cursor:pointer}

/* ═══════════════════════════════════════════════════════════════════════════
   IDEAS
   ═══════════════════════════════════════════════════════════════════════════ */
.idea-input{margin-bottom:14px}
.idea-textarea{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:14px;color:var(--text);font-size:0.82rem;font-family:var(--font-b);outline:none;resize:none;min-height:70px}
.idea-textarea:focus{border-color:var(--border-h)}
.idea-textarea::placeholder{color:var(--text3)}
.idea-submit{display:flex;justify-content:flex-end;margin-top:8px}
.idea-submit button{background:var(--accent);color:var(--bg);border:none;border-radius:8px;padding:9px 20px;font-weight:700;font-size:0.75rem;cursor:pointer}

.idea-row{display:grid;grid-template-columns:1fr 36px 36px 36px 36px 42px;gap:3px;padding:10px 6px;border-bottom:1px solid rgba(255,255,255,0.025);cursor:pointer;transition:background 0.1s;align-items:center;font-size:0.72rem}
.idea-row:hover{background:rgba(49,194,165,0.03)}.idea-row:active{background:rgba(49,194,165,0.06)}
.idea-head{display:grid;grid-template-columns:1fr 36px 36px 36px 36px 42px;gap:3px;padding:5px 6px;font-size:0.55rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);font-weight:600}
.road-btn{font-size:0.55rem;padding:4px 6px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(49,194,165,0.15);border-radius:5px;cursor:pointer;font-weight:700;text-align:center}
.road-btn:hover{background:rgba(49,194,165,0.25)}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.price-tbl{width:100%;border-collapse:collapse;font-size:0.75rem}
.price-tbl th{text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);font-weight:600;font-size:0.6rem}
.price-tbl td{padding:9px 6px;border-bottom:1px solid rgba(255,255,255,0.025);color:rgba(255,255,255,0.65);cursor:pointer}
.price-tbl tr:hover td{background:rgba(49,194,165,0.03)}
.provider-cell{font-weight:600;color:var(--text)}
.audio-badge{font-size:0.55rem;padding:2px 6px;border-radius:5px;background:rgba(249,115,22,0.1);color:var(--orange);font-weight:700;margin-left:3px}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */
.social-broadcast{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:14px;margin-bottom:16px}
.social-broadcast-hdr{font-size:10px;font-weight:900;color:var(--teal);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.social-broadcast-platforms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.broadcast-chip{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--txt2);padding:3px 8px;border:1px solid;border-radius:12px;cursor:pointer;user-select:none}
.broadcast-chip input{width:12px;height:12px;accent-color:var(--teal)}
.social-broadcast-input{display:flex;gap:8px}
.social-broadcast-input textarea{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--txt);font-family:var(--font);resize:none}
.social-broadcast-input textarea:focus{outline:none;border-color:var(--teal)}
.btn-teal{background:var(--teal);color:var(--bg);border:none;border-radius:8px;padding:8px 18px;font-size:10px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-teal:hover{filter:brightness(1.15)}
.btn-teal:disabled{opacity:.5;cursor:not-allowed}
.social-kpis{display:flex;gap:12px;margin-bottom:16px}
.social-kpi{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--r);padding:10px 16px;flex:1;text-align:center}
.social-kpi b{display:block;font-size:20px;color:var(--txt);font-weight:900}
.social-kpi span{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px}
.social-card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;transition:all .2s}
.social-card-disconnected{opacity:.6}
.social-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.social-name{font-size:13px;font-weight:800;color:var(--txt);flex:1}
.social-status{font-size:8px;font-weight:800;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}
.ss-active{background:rgba(78,205,196,.15);color:var(--teal)}
.ss-none{background:rgba(255,255,255,.05);color:var(--txt3)}
.social-disconnect{background:none;border:none;color:var(--txt3);font-size:16px;cursor:pointer;padding:0 4px;transition:color .2s}
.social-disconnect:hover{color:var(--danger)}
.social-stats{display:flex;gap:12px;margin-bottom:6px}
.social-stat{font-size:11px;color:var(--txt2)}
.social-stat b{color:var(--txt)}
.social-inbox{border-top:1px solid var(--border);padding-top:6px;margin-top:4px}
.social-msg{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:11px}
.social-msg-author{font-weight:700;color:var(--teal);white-space:nowrap}
.social-msg-text{color:var(--txt2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-reply-btn{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:13px;padding:0 4px;transition:color .2s}
.social-reply-btn:hover{color:var(--teal)}
.social-reply-input{display:flex;gap:4px;margin-top:4px}
.social-reply-input input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:10px;color:var(--txt);font-family:var(--font)}
.social-reply-input input:focus{outline:none;border-color:var(--teal)}
.social-reply-input button{background:var(--teal);color:var(--bg);border:none;border-radius:6px;padding:4px 10px;font-size:9px;font-weight:800;cursor:pointer}
.social-quick-post{border-top:1px solid var(--border);padding-top:6px;margin-top:4px}
.social-quick-post input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:10px;color:var(--txt);font-family:var(--font);box-sizing:border-box}
.social-quick-post input:focus{outline:none;border-color:var(--teal)}
.btn-connect{border:none;border-radius:8px;padding:8px 16px;font-size:11px;font-weight:800;color:#fff;cursor:pointer;margin-top:8px;transition:all .2s;display:block;width:100%;text-align:center}
.btn-connect:hover{filter:brightness(1.15)}
.social-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.5px}
.social-post-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.social-post-badges{display:flex;gap:3px;flex-shrink:0}
.social-post-content{flex:1;font-size:11px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-post-time{font-size:9px;color:var(--txt3);white-space:nowrap;font-family:var(--mono)}

/* ═══════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════════════════════ */
.toggle{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;margin-left:10px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.08);border-radius:20px;transition:0.2s}
.toggle-slider:before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.2s}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px)}
.toggle input:disabled+.toggle-slider{opacity:0.4;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL PANEL (expandable)
   ═══════════════════════════════════════════════════════════════════════════ */
.detail-panel{display:none;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:14px;margin:4px 0 10px;animation:fadeIn 0.15s}
.detail-panel.open{display:block}
.detail-panel .dp-row{display:flex;justify-content:space-between;padding:5px 0;font-size:0.75rem}
.detail-panel .dp-label{color:var(--text2)}
.detail-panel .dp-val{color:var(--text);font-weight:500}
.detail-panel .dp-desc{font-size:0.75rem;color:var(--text2);line-height:1.5;margin-top:6px}
.detail-panel .dp-actions{display:flex;gap:6px;margin-top:10px}
.detail-panel .dp-btn{font-size:0.68rem;padding:5px 12px;border-radius:6px;font-weight:600;cursor:pointer;border:none}
.dp-btn-primary{background:var(--accent);color:var(--bg)}
.dp-btn-secondary{background:rgba(255,255,255,0.06);color:var(--text2)}
.dp-btn-danger{background:rgba(239,68,68,0.1);color:var(--danger)}
.dp-select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:0.72rem;font-family:inherit;outline:none}
.dp-select:focus{border-color:var(--accent)}
.detail-panel .dp-label{font-size:0.65rem;color:var(--text3);margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:400px;animation:fadeIn 0.15s}
.modal-title{font-family:var(--font-d);font-size:1.1rem;font-weight:700;margin-bottom:16px}
.modal-field{margin-bottom:12px}
.modal-field label{display:block;font-size:0.72rem;color:var(--text2);margin-bottom:4px;font-weight:600}
.modal-field input,.modal-field select,.modal-field textarea{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:0.82rem;font-family:var(--font-b);outline:none}
.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus{border-color:var(--border-h)}
.modal-field select option{background:var(--bg2)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal-actions button{padding:10px 20px;border-radius:8px;font-weight:700;font-size:0.78rem;cursor:pointer;border:none;transition:all 0.15s}
.modal-actions button:hover{transform:translateY(-1px)}
.modal-cancel{background:rgba(255,255,255,0.06);color:var(--text2)}
.modal-save{background:var(--accent);color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERIC MODAL (JS-created via ui.js modal())
   ═══════════════════════════════════════════════════════════════════════════ */
.gen-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.15s}
.gen-modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:420px;animation:slideUp 0.2s}
.gen-modal-title{font-family:var(--font-d);font-size:1.1rem;font-weight:700;margin-bottom:12px}
.gen-modal-body{font-size:0.85rem;color:var(--text2);line-height:1.6;margin-bottom:20px}
.gen-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.gen-modal-actions button{padding:10px 20px;border-radius:8px;font-weight:700;font-size:0.78rem;cursor:pointer;border:none;transition:all 0.15s}
.gen-modal-actions button:hover{transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
#toast-container{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  pointer-events:auto;padding:12px 20px;border-radius:12px;font-size:0.82rem;font-weight:600;
  font-family:var(--font-d);color:#fff;cursor:pointer;max-width:360px;
  backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,0.3);
  animation:toastIn 0.25s ease-out;transition:opacity 0.2s,transform 0.2s
}
.toast.removing{animation:toastOut 0.2s ease-in forwards}
.toast-success{background:rgba(34,197,94,0.9);border:1px solid rgba(34,197,94,0.4)}
.toast-error{background:rgba(239,68,68,0.9);border:1px solid rgba(239,68,68,0.4)}
.toast-info{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.08)}
.toast-warn{background:rgba(234,179,8,0.9);border:1px solid rgba(234,179,8,0.4);color:var(--bg)}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════════ */
.skeleton{
  background:linear-gradient(90deg, rgba(49,194,165,0.04) 0%, rgba(49,194,165,0.08) 50%, rgba(49,194,165,0.04) 100%);
  background-size:400px 100%;animation:shimmer 1.5s infinite;
  border-radius:10px;height:48px;margin-bottom:8px
}
.skeleton-sm{height:24px;width:60%;margin-bottom:6px}
.skeleton-lg{height:120px;margin-bottom:12px}
.skeleton-circle{width:32px;height:32px;border-radius:50%}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC — Sub-cards, User rows, Roadmap, Queue widget
   ═══════════════════════════════════════════════════════════════════════════ */
.sub-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.15s}
.sub-card:hover{border-color:var(--border-h)}
.sub-name{font-size:0.82rem;font-weight:600}
.sub-detail{font-size:0.68rem;color:var(--text2);margin-top:2px}
.sub-price{font-family:var(--font-d);font-size:0.92rem;font-weight:700;text-align:right}
.sub-freq{font-size:0.62rem;color:var(--text2)}
.free-badge{font-size:0.62rem;padding:4px 10px;border-radius:8px;background:rgba(49,194,165,0.1);color:var(--accent);font-weight:600}

.user-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.025);cursor:pointer;transition:background 0.1s}
.user-row:hover{background:rgba(49,194,165,0.02)}.user-row:active{background:rgba(49,194,165,0.04)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:var(--accent);font-weight:600;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:0.68rem;color:var(--text2)}
.user-gc{font-family:var(--font-d);font-size:0.88rem;font-weight:700;color:var(--accent)}

.rm-version{margin-bottom:18px}
.rm-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer}
.rm-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.rm-ver{font-family:var(--font-d);font-size:0.92rem;font-weight:700}
.rm-desc{font-size:0.68rem;color:var(--text2);flex:1}
.rm-item{display:flex;align-items:center;gap:8px;padding:7px 0 7px 18px;font-size:0.75rem;color:rgba(255,255,255,0.55);cursor:pointer;transition:color 0.1s}
.rm-item:hover{color:var(--text)}
.rm-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.55rem}
.rm-check.done{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* ── Gen Queue Widget ── */
.queue-widget{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:16px}
.q-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.03)}
.q-stat{text-align:center}
.q-num{font-family:var(--font-d);font-size:1.2rem;font-weight:700;display:block;line-height:1}
.q-label{font-size:0.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.q-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.q-item:last-child{border-bottom:none}
.q-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.q-dot-active{background:var(--accent);box-shadow:0 0 6px rgba(49,194,165,0.4);animation:qPulse 2s infinite}
.q-dot-pending{background:var(--warn);opacity:0.5}
.q-dot-failed{background:var(--danger)}
@keyframes qPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.q-info{flex:1;min-width:0}
.q-model{font-size:0.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-user{font-size:0.62rem;color:var(--text3)}
.q-progress{display:flex;align-items:center;gap:8px;width:90px;flex-shrink:0}
.q-bar{flex:1;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden}
.q-fill{height:100%;background:linear-gradient(90deg,var(--accent),rgba(49,194,165,0.6));border-radius:2px;transition:width 0.3s}
.q-pct{font-size:0.62rem;font-weight:700;color:var(--accent);width:28px;text-align:right;font-family:var(--font-d)}
.q-wait{font-size:0.62rem;color:var(--text3);font-weight:600;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SPINNER (inline)
   ═══════════════════════════════════════════════════════════════════════════ */
.spinner{width:18px;height:18px;border:2px solid rgba(49,194,165,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block}
.spinner-lg{width:32px;height:32px;border-width:3px}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-state{text-align:center;padding:40px 20px;color:var(--text3)}
.empty-state-icon{font-size:2rem;margin-bottom:8px;opacity:0.3}
.empty-state-text{font-size:0.85rem;font-weight:500}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (>=768px) — sidebar replaces bottom nav
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  :root{
    --sidebar-w:220px;
  }

  #app{flex-direction:row;height:100vh}
  .hdr{display:none}
  .nav{display:none}

  /* ── Sidebar ── */
  .sidebar{
    display:flex !important;flex-direction:column;width:var(--sidebar-w);
    position:fixed;top:0;left:0;bottom:0;z-index:21;
    background:linear-gradient(180deg, rgba(10,10,10,0.98) 0%, rgba(6,6,6,0.98) 100%);
    backdrop-filter:blur(40px);
    border-right:1px solid var(--border);padding:0
  }
  .sb-header{
    padding:24px 20px 20px;display:flex;align-items:center;gap:12px;
    border-bottom:1px solid rgba(49,194,165,0.05)
  }
  .sb-logo{width:32px;height:32px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
  .sb-title{
    font-family:var(--font-d);font-weight:700;font-size:1.15rem;letter-spacing:-0.02em;
    background:linear-gradient(135deg, #fff 30%, var(--accent));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
  }
  .sb-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px}
  .sb-item{
    display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;
    cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
    color:rgba(255,255,255,0.4);font-size:0.88rem;font-weight:500;
    font-family:var(--font-d);position:relative;letter-spacing:-0.01em
  }
  .sb-item:hover{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.8);transform:translateX(2px)}
  .sb-item.on{
    background:linear-gradient(135deg, rgba(49,194,165,0.12), rgba(49,194,165,0.06));
    color:var(--accent);font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(49,194,165,0.1)
  }
  .sb-item.on::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0
  }
  .sb-item .sb-icon{width:20px;text-align:center;font-size:1rem;opacity:0.9}
  .sb-badge{
    margin-left:auto;background:linear-gradient(135deg,var(--danger),#dc2626);
    color:#fff;font-size:0.58rem;padding:2px 7px;border-radius:8px;font-weight:700;
    box-shadow:0 2px 8px rgba(239,68,68,0.3)
  }
  .sb-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:6px 16px}
  .sb-footer{
    padding:16px 20px;border-top:1px solid rgba(49,194,165,0.05);
    display:flex;align-items:center;gap:12px;cursor:pointer;
    transition:background 0.15s
  }
  .sb-footer:hover{background:rgba(255,255,255,0.02)}
  .sb-avatar{
    width:32px;height:32px;border-radius:8px;
    background:linear-gradient(135deg,rgba(49,194,165,0.15),rgba(49,194,165,0.05));
    border:1.5px solid rgba(49,194,165,0.2);
    display:flex;align-items:center;justify-content:center;
    font-size:0.65rem;color:var(--accent);font-weight:600
  }
  .sb-user{flex:1}
  .sb-user-name{font-size:0.82rem;font-weight:600;color:var(--text);font-family:var(--font-d)}
  .sb-user-role{font-size:0.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px}

  /* ── Main Content ── */
  .content{margin-left:var(--sidebar-w);flex:1;height:100vh;overflow-y:auto;scroll-behavior:smooth}
  .tab-content{padding:32px 36px 48px;max-width:1200px;margin:0 auto}

  /* ── Scrollbar ── */
  .content::-webkit-scrollbar{width:6px}
  .content::-webkit-scrollbar-track{background:transparent}
  .content::-webkit-scrollbar-thumb{background:rgba(49,194,165,0.15);border-radius:3px}
  .content::-webkit-scrollbar-thumb:hover{background:rgba(49,194,165,0.3)}

  /* ── Desktop label ── */
  .lbl{
    font-size:0.72rem;margin-bottom:18px;letter-spacing:2.5px;
    display:flex;align-items:center;gap:12px
  }
  .lbl::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(49,194,165,0.1),transparent)}

  /* ── Desktop KPI ── */
  .kpi{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
  .k{padding:20px 24px;border-radius:14px}
  .k-l{font-size:0.75rem;margin-bottom:8px}
  .k-v{font-size:2rem;margin-bottom:5px}
  .k-c{font-size:0.72rem}

  /* ── Desktop charts ── */
  .chart-box{padding:24px;border-radius:16px;margin-bottom:20px}
  .chart-t{font-size:0.95rem}

  /* ── Desktop sub-tabs ── */
  .sub-tabs{margin-bottom:24px}
  .sub-tab{padding:12px 22px;font-size:0.82rem}

  /* ── Desktop tasks ── */
  .task-header{grid-template-columns:1fr 120px 80px 100px;padding:10px 16px}
  .task-row{grid-template-columns:1fr 120px 80px 100px;padding:14px 16px;border-radius:8px;border-bottom:none}
  .task-row:hover{transform:translateX(2px)}
  .task-name{font-size:0.88rem}
  .task-status{font-size:0.65rem;padding:5px 12px;border-radius:6px}

  /* ── Desktop ideas ── */
  .idea-head{grid-template-columns:1fr 70px 70px 70px 70px 80px;padding:8px 12px}
  .idea-row{grid-template-columns:1fr 70px 70px 70px 70px 80px;padding:12px 12px;border-bottom:none}

  /* ── Desktop modals ── */
  .modal-box{border-radius:20px;padding:32px;max-width:440px;box-shadow:0 24px 80px rgba(0,0,0,0.6)}

  /* ── Home grid (desktop 2-column) ── */
  .home-grid{display:grid;grid-template-columns:1fr 360px;gap:28px}
  .home-left,.home-right{min-width:0}

  /* ── Queue desktop ── */
  .q-num{font-size:1.3rem}
  .q-progress{width:110px}

  /* ── Toast desktop position ── */
  #toast-container{top:20px;right:24px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDER DESKTOP (>=900px) — enhanced typography
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:900px){
  :root{
    --sidebar-w:260px;
    --bg-elevated:rgba(255,255,255,0.018);
    --glow:0 0 0 1px rgba(49,194,165,0.06), 0 8px 32px rgba(0,0,0,0.3);
    --glow-hover:0 0 0 1px rgba(49,194,165,0.15), 0 12px 40px rgba(0,0,0,0.4);
    --font-mono:'JetBrains Mono',monospace;
  }

  body::before{background:
    radial-gradient(ellipse at 15% 0%, rgba(49,194,165,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(129,140,248,0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(49,194,165,0.015) 0%, transparent 70%)
  }

  .tab-content{padding:40px 48px 60px;max-width:1280px}

  /* Enhanced KPI cards */
  .k{
    padding:24px 28px;border-radius:16px;
    background:var(--bg-elevated);
    border:1px solid rgba(49,194,165,0.06);
    box-shadow:var(--glow);
    position:relative;overflow:hidden
  }
  .k::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(49,194,165,0.15),transparent)
  }
  .k:hover{
    border-color:rgba(49,194,165,0.15);
    box-shadow:var(--glow-hover);
    transform:translateY(-2px)
  }
  .k-v{font-size:2.2rem;letter-spacing:-0.03em}

  /* Enhanced chart boxes */
  .chart-box{
    padding:28px;border-radius:18px;
    background:var(--bg-elevated);
    box-shadow:var(--glow);
    border:1px solid rgba(49,194,165,0.06);
    position:relative;overflow:hidden
  }
  .chart-box::before{
    content:'';display:block;position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(49,194,165,0.12),transparent);
    pointer-events:none
  }

  /* Enhanced milestone */
  .ms-bar{
    padding:28px;border-radius:18px;
    background:rgba(99,102,241,0.03);
    box-shadow:0 0 0 1px rgba(99,102,241,0.08), 0 8px 32px rgba(0,0,0,0.25)
  }
  .ms-bar:hover{box-shadow:0 0 0 1px rgba(99,102,241,0.15), 0 12px 40px rgba(0,0,0,0.35)}

  /* Home grid wider */
  .home-grid{grid-template-columns:1fr 380px;gap:32px}

  /* Enhanced queue widget */
  .queue-widget{
    padding:20px 24px;border-radius:16px;
    background:var(--bg-elevated);box-shadow:var(--glow);
    border:1px solid rgba(49,194,165,0.06)
  }

  /* Enhanced login */
  .login-box{padding:56px 48px;border-radius:28px;max-width:440px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .sidebar{display:none !important}
  .home-grid{display:block}
  .home-grid .home-right{margin-top:16px}
  .social-kpis{flex-direction:column}

  /* Ideas: hide score columns on narrow screens */
  .idea-head,.idea-row{grid-template-columns:1fr 36px 42px}
  .idea-head span:nth-child(3),.idea-head span:nth-child(4),.idea-head span:nth-child(5),
  .idea-row span:nth-child(3),.idea-row span:nth-child(4),.idea-row span:nth-child(5){display:none}

  .price-tbl{font-size:0.7rem}
  .price-tbl th{padding:6px 4px;font-size:0.55rem}
  .price-tbl td{padding:8px 4px}
}

@media(max-width:599px){
  #prod-analytics .kpi{grid-template-columns:1fr 1fr !important}
  #prod-analytics div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr 1fr !important}
  .chart-box div[style*="display:flex;gap:20px"]{flex-direction:column}
  .chart-box div[style*="display:flex;gap:20px"] canvas{max-width:100% !important}
}

@media(max-width:380px){
  .tab-content{padding:14px 12px 20px}
  .kpi{gap:8px}
  .k{padding:12px}
  .k-v{font-size:1.4rem}
  .task-header,.task-row{grid-template-columns:1fr 60px 42px 48px;gap:3px}
  .group-by{flex-wrap:wrap}
}

/* === Owner Queue page ============================================== */
/* Base button helpers (used by queue page; no generic .btn existed before) */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:var(--font-b);transition:all .15s;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-secondary{background:var(--bg2);border:1px solid var(--border);color:var(--text2)}
.btn-secondary:hover{border-color:var(--border-h);color:var(--text)}

.queue-page{padding:24px;max-width:1100px;margin:0 auto;font-size:16px;line-height:1.55}
.queue-page h1{font-size:28px;font-weight:700}
.queue-page h2{font-size:19px;font-weight:700;margin-bottom:12px}

.queue-header{margin-bottom:28px}
.queue-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.queue-stats{display:flex;gap:16px;align-items:center;margin:14px 0;flex-wrap:wrap}
.queue-stats .stat{background:var(--bg2);padding:6px 14px;border-radius:8px;font-size:15px}
.queue-stats .stat b{color:var(--accent);font-weight:700;margin-right:4px}
.queue-search{width:100%;padding:10px 14px;font-size:15px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-b);outline:none}
.queue-search:focus{border-color:var(--border-h)}
.queue-search::placeholder{color:var(--text3)}

.queue-section{margin-bottom:28px}
.queue-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}

.queue-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;transition:border-color .2s}
.queue-card:hover{border-color:var(--accent-dim)}
.queue-card.kbd-active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(49,194,165,0.2)}
.queue-card[draggable="true"]{cursor:grab}
.queue-card.dragging{opacity:0.5;cursor:grabbing}
.queue-card h3{font-size:16px;font-weight:700;margin-bottom:6px}
.queue-card .desc{color:var(--text2);font-size:14px;margin-bottom:10px}
.queue-card .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.queue-card .tag{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:5px}
.queue-card .tag.t-critical{background:rgba(239,68,68,.12);color:#fca5a5}
.queue-card .tag.t-high{background:rgba(245,158,11,.12);color:#fcd34d}
.queue-card .tag.t-medium{background:rgba(59,130,246,.12);color:#93c5fd}
.queue-card .tag.t-low{background:rgba(113,113,122,.18);color:#d4d4d8}
.queue-card .actions{display:flex;gap:8px;align-items:center;margin-top:10px}
.queue-card .status-select{font-size:13px;padding:4px 8px;background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:6px}
.queue-card .btn-notes{font-size:13px;padding:4px 10px;background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:6px;cursor:pointer}
.queue-card .notes-preview{background:var(--bg2);padding:8px 10px;border-right:3px solid var(--accent);margin-top:8px;font-size:13px;color:var(--text2);border-radius:4px}

/* BUG-066 Fix B: priority left-border accent (scannable at NLE-timeline density) */
.queue-card[data-priority="critical"]{border-left:3px solid var(--danger,#dc2626)}
.queue-card[data-priority="high"]{border-left:3px solid var(--warn,#f59e0b)}
.queue-card[data-priority="medium"]{border-left:3px solid var(--accent,#31C2A5)}
.queue-card[data-priority="low"]{border-left:3px solid transparent}

/* BUG-066 Fix C: inline notes expand — progressive disclosure, zero idle space */
.card-notes-expand{max-height:0;overflow:hidden;transition:max-height 0.18s ease}
.card-notes-open .card-notes-expand{max-height:160px;padding:8px 0 4px}
.card-notes-expand textarea{width:100%;background:var(--bg3,#1f1f23);color:var(--text1,#fafafa);border:1px solid var(--border,rgba(255,255,255,0.1));border-radius:4px;padding:6px 8px;font-family:Heebo,sans-serif;font-size:13px;resize:vertical;min-height:60px;box-sizing:border-box}
.card-notes-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.btn-notes-cancel{font-size:12px;padding:3px 10px;background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:5px;cursor:pointer}
.btn-notes-save{font-size:12px;padding:3px 10px;border-radius:5px;cursor:pointer}

.queue-collapsible{cursor:pointer;user-select:none}
.queue-collapsed h2::after{content:" ▾"}

.queue-sessions{list-style:none;padding:0}
.queue-sessions li{padding:12px 16px;border-bottom:1px dashed var(--border)}
.queue-sessions li:last-child{border-bottom:0}
.queue-sessions .session-title{font-weight:700;font-size:15px}
.queue-sessions .session-date{color:var(--text3);font-size:13px;margin-left:8px}
.queue-sessions .session-bullets{margin-top:6px;padding-right:20px;color:var(--text2);font-size:13px}

/* Dialogs */
.queue-dialog{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:480px;color:var(--text)}
.queue-dialog::backdrop{background:rgba(0,0,0,.6)}
.queue-dialog h3{margin-bottom:14px;font-size:18px}
.queue-dialog label{display:block;margin-bottom:12px;font-size:14px;color:var(--text2)}
.queue-dialog input,.queue-dialog textarea,.queue-dialog select{width:100%;margin-top:4px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;font-size:15px;font-family:var(--font-b);outline:none}
.queue-dialog input:focus,.queue-dialog textarea:focus,.queue-dialog select:focus{border-color:var(--border-h)}
.queue-dialog .dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.queue-dialog .dlg-actions button{padding:9px 18px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:var(--font-b)}
.queue-dialog .dlg-actions .btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* Keyboard help overlay */
.kbd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:1000;cursor:pointer}
.kbd-overlay[hidden]{display:none}
.kbd-content{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px;max-width:400px;cursor:default}
#kbd-close{margin-top:18px;padding:8px 18px;background:var(--accent-dim);color:#fff;border:0;border-radius:6px;cursor:pointer;font-size:14px}
.kbd-content ul{list-style:none;padding:0}
.kbd-content li{padding:6px 0}
.kbd-content kbd{background:var(--bg);padding:2px 8px;border-radius:4px;font-family:var(--mono);border:1px solid var(--border)}

/* Stale-blocker bell dot — used in Task 12 */
#stale-bell-dot{display:none;width:8px;height:8px;background:var(--danger);border-radius:50%;position:absolute;top:6px;right:6px}
#stale-bell-dot.active{display:block}