/* ==========================================================================
   ReconQL — style.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0A0E13;
  --panel: #10151C;
  --panel-2: #141B24;
  --card: #131922;
  --border: #212B37;
  --border-soft: #1A222C;
  --text: #E8EDF2;
  --text-dim: #8996A5;
  --text-faint: #57626F;
  --accent: #39C7B8;
  --accent-dim: #2B9C90;
  --accent-soft: rgba(57,199,184,0.12);
  --amber: #E3A73B;
  --amber-soft: rgba(227,167,59,0.12);
  --gray-soft: rgba(137,150,165,0.12);
  --code-bg: #0D1219;
  --code-text: #B9C4CE;
  --body-gradient: linear-gradient(180deg, #0D1319 0%, #0A0E13 340px);
  --radius: 8px;
}

html[data-theme="light"]{
  --bg: #F4F5F7;
  --panel: #FFFFFF;
  --panel-2: #F0F1F4;
  --card: #FFFFFF;
  --border: #DCE0E5;
  --border-soft: #E8EAED;
  --text: #1A1F26;
  --text-dim: #5C6773;
  --text-faint: #8A93A0;
  --amber-soft: rgba(150,101,12,0.10);
  --gray-soft: rgba(92,103,115,0.08);
  --code-bg: #F3F4F6;
  --code-text: #2A313A;
  --body-gradient: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 340px);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  background-image: linear-gradient(180deg, #0D1319 0%, #0A0E13 340px);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  line-height: 1.5;
  font-size: 14.5px;
}

::selection{ background: var(--accent); color: #06110F; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
a{ color: inherit; }
button{ font-family: inherit; }

.shell{ max-width: 1400px; margin: 0 auto; padding: 0 22px 60px; }

/* ---------- Toasts ---------- */
.toast-container{
  position: fixed; top: 16px; right: 16px; z-index: 200;
  display:flex; flex-direction:column; gap:8px;
}
.toast{
  background: var(--panel-2);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  max-width: 320px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6);
}
.toast.show{ opacity: 1; transform: translateY(0); }

/* ---------- Top bar ---------- */
.topbar{ position: relative; padding: 22px 0 20px; margin-bottom: 22px; }
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 55%); opacity: 0.55;
}
.brand-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:30px; height:30px; border-radius:7px;
  background: var(--accent-soft); border:1px solid var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent); font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px;
}
.brand h1{ font-size:18px; margin:0; font-weight:700; letter-spacing:-0.01em; }
.brand .tag{ display:block; font-size:11.5px; color: var(--text-dim); font-weight:500; }
.brand-actions{ display:flex; gap:8px; }
.icon-btn{
  background: var(--panel-2); border:1px solid var(--border); color: var(--text-dim);
  font-size:12px; font-weight:600; padding:8px 12px; border-radius:6px; cursor:pointer;
}
.icon-btn:hover{ border-color: var(--accent-dim); color: var(--accent); }

.stats{ display:flex; gap:16px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11.5px; color: var(--text-dim); }
.stats b{ color: var(--accent); font-weight:600; }

.control-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.domain-block{ flex: 1 1 340px; }
.domain-block label, .engine-block label, .filter-block label, .runner-block label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.09em;
  color: var(--text-faint); font-weight:600; margin-bottom:7px;
}
textarea#domainInput{
  width:100%; resize:vertical; min-height:42px; max-height:120px;
  font-family:'JetBrains Mono',monospace; font-size:13.5px; padding:10px 12px;
  border-radius:6px; border:1.5px solid var(--border); background: var(--panel-2); color: var(--text);
}
textarea#domainInput::placeholder{ color: var(--text-faint); }

.domain-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.domain-chip{
  display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  background: var(--panel-2); border:1px solid var(--border); color: var(--text-dim);
  padding:4px 8px 4px 10px; border-radius:12px;
}
.domain-chip button{ background:none; border:none; color: var(--text-faint); cursor:pointer; font-size:13px; line-height:1; padding:0 2px; }
.domain-chip button:hover{ color: var(--amber); }

.view-toggle{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.view-btn{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; background: var(--panel-2);
  border:1px solid var(--border); color: var(--text-dim); padding:6px 10px; border-radius:5px; cursor:pointer;
}
.view-btn.active{ background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); }

.engine-block .options{ display:flex; gap:4px; background: var(--panel-2); border:1px solid var(--border); padding:3px; border-radius:6px; }
.engine-block button{ font-size:12px; font-weight:600; padding:7px 11px; border:none; border-radius:4px; background:transparent; color: var(--text-dim); cursor:pointer; }
.engine-block button.active{ background: var(--accent); color:#06110F; }

.filter-block select, .runner-block select{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:8px 10px;
  border:1px solid var(--border); border-radius:5px; background: var(--panel-2); color: var(--text);
}
.custom-date-row{ display:flex; gap:6px; margin-top:8px; }
.custom-date-row input{
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:6px 8px;
  border:1px solid var(--border); border-radius:5px; background: var(--panel-2); color: var(--text);
}
.hint{ display:block; font-size:10.5px; color: var(--text-faint); margin-top:6px; max-width:220px; }

/* ---------- Layout ---------- */
.layout{ display:grid; grid-template-columns: 260px 1fr; gap:20px; align-items:start; transition: grid-template-columns .15s ease; }
.layout.sidebar-collapsed{ grid-template-columns: 56px 1fr; }

.sidebar-shell{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius);
  padding:10px; position:sticky; top:16px; max-height: calc(100vh - 32px); display:flex; flex-direction:column;
}
.sidebar-head{ display:flex; gap:6px; margin-bottom:8px; }
.sidebar-head input{
  flex:1; font-size:12px; padding:7px 9px; border:1px solid var(--border); border-radius:5px;
  background: var(--panel-2); color: var(--text);
}
.collapse-btn{
  background: var(--panel-2); border:1px solid var(--border); color: var(--text-dim);
  border-radius:5px; width:30px; cursor:pointer; flex-shrink:0;
}
.layout.sidebar-collapsed .sidebar-head input,
.layout.sidebar-collapsed .nav-group-label,
.layout.sidebar-collapsed .nav-item span:not(.num),
.layout.sidebar-collapsed .sidebar-tool-link span:not(.dot){ display:none; }

.sidebar{ overflow-y:auto; }
.sidebar-tool-link{
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  background:transparent; border:none; color: var(--text); font-size:13px; font-weight:600;
  padding:9px 10px; border-radius:6px; cursor:pointer; margin-bottom:6px;
}
.sidebar-tool-link .dot{ width:6px; height:6px; border-radius:50%; background: var(--amber); flex-shrink:0; }
.sidebar-tool-link.active, .sidebar-tool-link:hover{ background: var(--panel-2); }

.nav-group{ margin-bottom:4px; }
.nav-group-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.09em; color: var(--text-faint); font-weight:700; padding:10px 10px 6px; }
.nav-item{
  width:100%; display:flex; align-items:baseline; gap:8px; text-align:left; background:transparent;
  border:none; color: var(--text-dim); font-size:12.8px; padding:7px 10px; border-radius:6px; cursor:pointer;
}
.nav-item .num{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color: var(--text-faint); flex-shrink:0; }
.nav-item.active{ background: var(--accent-soft); color: var(--text); }
.nav-item.active .num{ color: var(--accent); }
.nav-item:hover:not(.active){ background: var(--panel-2); color: var(--text); }
.nav-item-row{ display:flex; align-items:center; gap:2px; }
.nav-item-row .nav-item{ flex:1; }
.pin-btn{ background:none; border:none; font-size:11px; opacity:0.5; cursor:pointer; padding:4px; border-radius:4px; flex-shrink:0; }
.pin-btn:hover, .pin-btn.on{ opacity:1; }
.layout.sidebar-collapsed .pin-btn{ display:none; }

/* ---------- Main panel ---------- */
.panel{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:22px; min-height:320px; }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border-soft); padding-bottom:16px; margin-bottom:18px; }
.panel-head h2{ font-size:17px; margin:0 0 5px; font-weight:700; }
.panel-head p{ margin:0; color: var(--text-dim); font-size:13px; max-width:64ch; }
.badge{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.04em; padding:5px 9px;
  border-radius:4px; white-space:nowrap; text-transform:uppercase; height:fit-content; border:1px solid; display:inline-block;
}
.badge.high{ color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
.badge.med{ color: var(--amber); border-color:#8a6a24; background: var(--amber-soft); }
.badge.low{ color: var(--text-dim); border-color: var(--border); background: var(--gray-soft); }

.panel-head-right{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.runner-row{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.copy-all{
  font-size:11.5px; font-weight:600; background:transparent; border:1px solid var(--border);
  color: var(--text-dim); padding:6px 10px; border-radius:5px; cursor:pointer; white-space:nowrap;
}
.copy-all:hover{ border-color: var(--accent-dim); color: var(--accent); }

.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.dork-card{
  background: var(--card); border:1px solid var(--border-soft); border-left:2px solid var(--accent-dim);
  border-radius:6px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:9px;
}
.card-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.dork-card h3{ margin:0; font-size:13px; font-weight:600; color: var(--text); }
.star-btn{ background:none; border:none; color: var(--text-faint); font-size:15px; cursor:pointer; line-height:1; flex-shrink:0; }
.star-btn.on, .star-btn:hover{ color: var(--amber); }
.dork-query{
  font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--code-text); background: var(--code-bg);
  border:1px solid var(--border-soft); border-radius:5px; padding:9px 10px; word-break:break-word; line-height:1.55;
}
.card-actions{ display:flex; gap:7px; flex-wrap:wrap; margin-top:1px; }
.btn{
  font-size:11.5px; font-weight:700; letter-spacing:0.02em; padding:6px 10px; border-radius:5px;
  border:1px solid var(--border); background:transparent; color: var(--text-dim); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#06110F; }
.btn.primary:hover{ background: var(--accent-dim); border-color: var(--accent-dim); }
.btn.ghost:hover{ border-color: var(--accent-dim); color: var(--accent); }
.btn.copied{ background: var(--amber); border-color: var(--amber); color:#1B140A; }

/* ---------- External tools ---------- */
.tool-card{ background: var(--card); border:1px solid var(--border-soft); border-left:2px solid var(--amber); border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:9px; }
.tool-card h3{ margin:0; font-size:13px; font-weight:600; }
.tool-card p{ margin:0; font-size:12px; color: var(--text-dim); }
.tool-links{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.tool-links a{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; background: var(--panel-2);
  border:1px solid var(--border); color: var(--text-dim); padding:5px 9px; border-radius:4px; text-decoration:none;
}
.tool-links a:hover{ border-color: var(--amber); color: var(--amber); }

/* ---------- Templates ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.template-chip{
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:8px 12px; border-radius:6px;
  border:1px solid var(--border); background: var(--card); color: var(--text-dim); cursor:pointer;
}
.template-chip:hover{ border-color: var(--accent-dim); color: var(--accent); }
.template-chip.on{ background: var(--accent); border-color: var(--accent); color:#06110F; }

.op-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.op-table th, .op-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-soft); font-size:12.5px; vertical-align:top; }
.op-table th{ color: var(--text-faint); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
.op-table code{ font-family:'JetBrains Mono',monospace; color: var(--accent); }
.op-note{ color: var(--text-dim); }

.custompack-textarea{
  width:100%; min-height:160px; font-family:'JetBrains Mono',monospace; font-size:12px;
  padding:12px; border:1px solid var(--border); border-radius:6px; background: var(--panel-2); color: var(--text);
  resize:vertical; margin-bottom:10px;
}

/* ---------- GitHub builder ---------- */
.gh-builder .builder-grid{ margin-bottom:16px; }
.gh-builder select, .gh-builder input[type=text]{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:8px 10px; border:1px solid var(--border);
  border-radius:5px; background: var(--panel-2); color: var(--text); width:100%;
}
.gh-builder .builder-field label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); font-weight:700; margin-bottom:8px; }

/* ---------- Workflow ---------- */
.workflow-summary{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.wf-stat{ background: var(--card); border:1px solid var(--border-soft); border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:4px; }
.wf-num{ font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; color: var(--accent); }
.wf-stat span:last-child{ font-size:11px; color: var(--text-dim); }

.progress-bar{ height:6px; background: var(--panel-2); border-radius:4px; overflow:hidden; margin-bottom:18px; border:1px solid var(--border-soft); }
.progress-fill{ height:100%; background: var(--accent); transition: width .3s ease; }

.workflow-steps{ display:flex; flex-direction:column; gap:6px; }
.workflow-step{ display:flex; align-items:center; gap:12px; background: var(--card); border:1px solid var(--border-soft); border-radius:6px; padding:9px 12px; }
.workflow-step.done{ border-left:2px solid var(--accent-dim); }
.wf-check{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background: var(--panel-2);
  color: var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:11px; cursor:pointer; flex-shrink:0;
}
.workflow-step.done .wf-check{ background: var(--accent); border-color: var(--accent); color:#06110F; }
.wf-label{ flex:1; text-align:left; background:none; border:none; color: var(--text); font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.workflow-step.done .wf-label{ color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--border); }
.wf-est{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); flex-shrink:0; }

/* ---------- Checklist ---------- */
.checklist{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:8px; }
.checklist-item{ display:flex; align-items:center; gap:10px; background: var(--card); border:1px solid var(--border-soft); border-radius:6px; padding:9px 12px; cursor:pointer; font-size:13px; }
.checklist-item.done{ border-left:2px solid var(--accent-dim); }
.checklist-item.done span{ color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--border); }
.checklist-item input{ accent-color: var(--accent); width:15px; height:15px; }

.empty-state{ color: var(--text-faint); font-size:13px; padding:20px 0; }

/* ---------- History ---------- */
.history-list{ display:flex; flex-direction:column; gap:8px; }
.history-row{ background: var(--card); border:1px solid var(--border-soft); border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.history-meta{ display:flex; gap:10px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); }
.history-ts{ color: var(--text-dim); }
.history-engine{ color: var(--amber); text-transform:uppercase; }
.history-target{ color: var(--accent); }

/* ---------- Sessions ---------- */
.session-save-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.session-save-row input{
  flex:1; min-width:200px; font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:9px 11px;
  border:1px solid var(--border); border-radius:5px; background: var(--panel-2); color: var(--text);
}
.session-list{ display:flex; flex-direction:column; gap:8px; }
.session-row{ background: var(--card); border:1px solid var(--border-soft); border-radius:6px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.session-info{ display:flex; flex-direction:column; gap:3px; }
.session-info strong{ font-size:13px; }
.session-info span{ font-size:11.5px; color: var(--text-dim); font-family:'JetBrains Mono',monospace; }

/* ---------- Builder ---------- */
.builder{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:22px; margin-top:20px; }
.builder-title{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.builder-title h2{ font-size:16px; margin:0; font-weight:700; }
.builder-title span{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); }
.builder p.desc{ color: var(--text-dim); font-size:13px; margin:4px 0 18px; max-width:70ch; }
.builder-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-bottom:16px; }
.builder-field label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-faint); font-weight:700; margin-bottom:8px; }
.chip-set{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:5px 9px; border:1px solid var(--border); border-radius:11px; background: var(--panel-2); color: var(--text-dim); cursor:pointer; user-select:none; }
.chip.on{ background: var(--accent); border-color: var(--accent); color:#06110F; }
select, .builder-field input[type=text], .builder-field input[type=date]{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:8px 10px; border:1px solid var(--border);
  border-radius:5px; background: var(--panel-2); color: var(--text); width:100%;
}
.advanced-ops{ border-top:1px dashed var(--border-soft); padding-top:12px; margin-top:4px; }
.advanced-ops summary{ cursor:pointer; font-size:12px; font-weight:600; color: var(--text-dim); }
.advanced-ops summary:hover{ color: var(--accent); }
.builder-output{ border-top:1px solid var(--border-soft); padding-top:16px; margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.builder-output .dork-query{ font-size:12.5px; min-height:18px; }

/* ---------- Export bar ---------- */
.export-bar{ background: var(--panel); border:1px solid var(--border-soft); border-radius: var(--radius); padding:20px 22px; margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.export-title h2{ font-size:15px; margin:0 0 3px; font-weight:700; }
.export-title span{ font-size:12px; color: var(--text-dim); }
.export-buttons{ display:flex; gap:8px; flex-wrap:wrap; }

.foot{ margin-top:26px; color: var(--text-faint); font-size:11.5px; font-family:'JetBrains Mono',monospace; text-align:center; }

/* ---------- Help modal ---------- */
.modal{
  display:none; position:fixed; inset:0; background: rgba(6,9,13,0.72); z-index:300;
  align-items:center; justify-content:center; padding:20px;
}
.modal.show{ display:flex; }
.modal-content{ background: var(--panel); border:1px solid var(--border); border-radius:10px; padding:22px; max-width:420px; width:100%; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-head h2{ font-size:16px; margin:0; }
.modal-head button{ background:none; border:none; color: var(--text-dim); font-size:20px; cursor:pointer; line-height:1; }
.shortcut-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.shortcut-list li{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim); }
.shortcut-list span{ margin-left:auto; }
kbd{
  font-family:'JetBrains Mono',monospace; font-size:11px; background: var(--panel-2); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:4px; padding:3px 7px; color: var(--text);
}

@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; }
  .layout.sidebar-collapsed{ grid-template-columns: 1fr; }
  .sidebar-shell{ position:static; max-height:none; }
}
@media (max-width: 600px){
  .brand-row{ align-items:flex-start; }
  .export-bar{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- Theme toggle ---------- */
.theme-toggle{ display:flex; gap:2px; background: var(--panel-2); border:1px solid var(--border); padding:3px; border-radius:6px; }
.theme-toggle button{
  font-size:11px; font-weight:600; padding:6px 9px; border:none; border-radius:4px;
  background:transparent; color: var(--text-dim); cursor:pointer;
}
.theme-toggle button.active{ background: var(--accent); color:#06110F; }

/* ---------- Recent targets ---------- */
.recent-targets{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; }
.recent-targets .recent-label{ font-size:10.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; margin-right:2px; }
.recent-chip{
  font-family:'JetBrains Mono',monospace; font-size:11px; background: transparent; border:1px dashed var(--border);
  color: var(--text-faint); padding:4px 9px; border-radius:11px; cursor:pointer;
}
.recent-chip:hover{ border-color: var(--accent-dim); color: var(--accent); border-style:solid; }

/* ---------- Accent picker ---------- */
.accent-picker{ display:flex; gap:5px; align-items:center; }
.accent-swatch{ width:16px; height:16px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.accent-swatch.active{ border-color: var(--text); }

/* ---------- Command palette ---------- */
.palette-content{ max-width:560px; padding:0; overflow:hidden; }
.palette-input{
  width:100%; box-sizing:border-box; padding:16px 18px; font-size:15px; border:none; border-bottom:1px solid var(--border-soft);
  background: var(--panel-2); color: var(--text); font-family:'Inter',sans-serif;
}
.palette-results{ max-height:360px; overflow-y:auto; padding:8px; }
.palette-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:6px; cursor:pointer; font-size:13px;
}
.palette-item .p-type{ font-family:'JetBrains Mono',monospace; font-size:10px; color: var(--text-faint); text-transform:uppercase; }
.palette-item:hover, .palette-item.active{ background: var(--accent-soft); color: var(--text); }
.palette-empty{ padding:20px; text-align:center; color: var(--text-faint); font-size:12.5px; }
.palette-hint{ padding:10px 16px; border-top:1px solid var(--border-soft); font-size:11px; color: var(--text-faint); font-family:'JetBrains Mono',monospace; }

/* ---------- Findings workspace ---------- */
.finding-form{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px; background: var(--card); border:1px solid var(--border-soft); border-radius:8px; padding:16px; margin-bottom:18px; }
.finding-form .full-row{ grid-column: 1 / -1; }
.finding-form input, .finding-form select, .finding-form textarea{
  width:100%; font-family:'Inter',sans-serif; font-size:12.5px; padding:8px 10px; border:1px solid var(--border);
  border-radius:5px; background: var(--panel-2); color: var(--text);
}
.finding-form textarea{ resize:vertical; min-height:50px; }
.finding-list{ display:flex; flex-direction:column; gap:10px; }
.finding-card{ background: var(--card); border:1px solid var(--border-soft); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.finding-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.finding-title{ font-size:14px; font-weight:600; }
.finding-target{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--accent); }
.pill{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; padding:3px 8px; border-radius:10px; border:1px solid var(--border); }
.pill.sev-Critical{ color:#F05252; border-color:#8a2c2c; background: rgba(240,82,82,0.1); }
.pill.sev-High{ color: var(--amber); border-color:#8a6a24; background: var(--amber-soft); }
.pill.sev-Medium{ color:#E3C23B; border-color:#7a6a1f; background: rgba(227,194,59,0.1); }
.pill.sev-Low{ color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
.pill.sev-Info{ color: var(--text-dim); border-color: var(--border); background: var(--gray-soft); }
.finding-notes{ font-size:12.5px; color: var(--text-dim); white-space:pre-wrap; }
.finding-tags{ display:flex; gap:5px; flex-wrap:wrap; }
.finding-tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background: var(--panel-2); border:1px solid var(--border); color: var(--text-dim); padding:2px 7px; border-radius:9px; }
.finding-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.finding-filters select{ font-family:'JetBrains Mono',monospace; font-size:12px; padding:6px 9px; border:1px solid var(--border); border-radius:5px; background: var(--panel-2); color: var(--text); }

/* ---------- Timeline ---------- */
.timeline-list{ display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--border-soft); margin-left:8px; padding-left:20px; }
.timeline-row{ position:relative; padding:10px 0; }
.timeline-row::before{ content:""; position:absolute; left:-25px; top:15px; width:8px; height:8px; border-radius:50%; background: var(--accent); }
.timeline-ts{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-faint); margin-right:10px; }
.timeline-label{ font-size:13px; color: var(--text); }
.timeline-type{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; color: var(--text-faint); margin-left:8px; }

/* ---------- Tool launcher ---------- */
.tool-cmd-card{ background: var(--card); border:1px solid var(--border-soft); border-left:2px solid var(--accent-dim); border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:9px; }
.tool-cmd-card h3{ margin:0; font-size:13px; font-weight:600; }
.tool-cmd-card p{ margin:0; font-size:12px; color: var(--text-dim); }

/* ---------- Assistant panel ---------- */
.assistant-box{ background: var(--card); border:1px solid var(--border-soft); border-radius:8px; padding:18px; margin-bottom:16px; }
.assistant-box h3{ margin:0 0 10px; font-size:13.5px; }
.assistant-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.assistant-list li{ display:flex; align-items:center; gap:10px; font-size:13px; }
.assistant-list button{ background: var(--panel-2); border:1px solid var(--border); color: var(--accent); border-radius:5px; padding:5px 10px; font-size:11.5px; font-weight:600; cursor:pointer; }
.assistant-note{ font-size:12px; color: var(--text-faint); margin-top:10px; }

/* ---------- Toast variants ---------- */
.toast.success{ border-color: var(--accent); }
.toast.warn{ border-color: var(--amber); }
.toast.info{ border-color: var(--border); }

/* ---------- Search tips, warnings, and Why-this-dork panel ---------- */
.dork-tip{ margin:0; font-size:12px; color: var(--text-dim); line-height:1.4; }
.query-warning{
  font-size:11.5px; color: var(--amber); background: var(--amber-soft);
  border:1px solid #8a6a24; border-radius:5px; padding:7px 9px; line-height:1.4;
}
.why-panel{
  background: var(--panel-2); border:1px solid var(--border-soft); border-radius:6px;
  padding:12px 14px; margin-top:2px; display:flex; flex-direction:column; gap:10px;
}
.why-section strong{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); margin-bottom:4px; }
.why-section p{ margin:0; font-size:12.5px; color: var(--text-dim); }
.why-section ul{ margin:0; padding-left:18px; font-size:12px; color: var(--text-dim); }
.why-section ul code{ font-family:'JetBrains Mono',monospace; color: var(--accent); }
.why-engines{ display:flex; gap:6px; flex-wrap:wrap; }
