style.css

/* Base GitHub-dark */
:root{
  --bg:#0d1117;
  --surface:#161b22;
  --border:#30363d;
  --text:#e6edf3;
  --muted:#8b949e;
  --accent:#58a6ff;
  --ok:#238636;
}

body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,sans-serif; }
header{ padding:12px 16px; background:#161b22; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
h1{ margin:0; font-size:20px; }
h2{ margin:0 0 8px 0; font-size:16px; }
.hint{ color:var(--muted); font-size:12px; }

button{
  background:#21262d; color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:6px 10px; cursor:pointer;
}
button:hover{ background:#30363d; }
button.small{ font-size:12px; padding:4px 8px; }

input, select{
  background:#0d1117; color:var(--text); border:1px solid var(--border);
  border-radius:6px; padding:6px 8px; width:100%; box-sizing:border-box;
  margin:4px 0 8px 0;
}

/* Panels & layout */
#controls{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:12px; padding:12px 16px; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; }
#dropZone{ border:2px dashed var(--border); border-radius:8px; padding:16px; text-align:center; color:var(--muted); }

main{ display:grid; grid-template-columns: 300px 1fr; gap:12px; padding: 0 16px 16px; }
#threads{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; overflow:auto; max-height:75vh; }
#threadList{ list-style:none; margin:0; padding:0; }
#threadList li{ padding:8px; border-bottom:1px dashed var(--border); cursor:pointer; }
#threadList li:hover{ background:#1f242d; }

#content{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; min-height:70vh; }

/* Search overlay */
#searchOverlay{ position:fixed; inset:0; display:none; z-index:1000; background:rgba(0,0,0,.55); align-items:center; justify-content:center; }
#searchPanel{
  width:min(1100px,95vw); height:min(90vh,95vh);
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
#searchHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-bottom:1px solid var(--border); }
#searchBody{ flex:1; overflow:auto; padding:10px; }
#searchProgress{ height:8px; background:rgba(255,255,255,.12); border-radius:8px; overflow:hidden; display:none; }
#searchProgress .bar{ height:100%; width:0%; background:var(--accent); transition:width .2s ease; }

.results-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap:12px; }
.results-row{ display:flex; gap:12px; overflow-x:auto; }
.card{
  background:#0d1117; border:1px solid var(--border); border-radius:10px;
  padding:10px; min-width:320px; max-height:260px; overflow:hidden; display:flex; flex-direction:column;
}
.card .meta{ color:#8b949e; font-size:12px; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .snippet{ font-size:13px; color:#e6edf3; overflow:hidden; }
.card .actions{ margin-top:auto; display:flex; gap:8px; }

/* Export picker */
#exportPicker{ position:fixed; inset:0; display:none; z-index:1200; background:rgba(0,0,0,.45); align-items:center; justify-content:center; }
#exportCard{
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px;
  width:420px; max-width:96vw; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
#exportCard .row{ display:flex; gap:10px; align-items:center; margin-top:10px; }
#exportCard .actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* Options modal (reused style) */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:2000; }
.modal.hidden{ display:none; }
.modal .modal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  width:min(640px,94vw); max-height:90vh; overflow:auto; padding:14px;
}

/* Puter auth gate modal */
#puterAuthModal{ z-index:3000; }
#puterAuthModal .modal-card header{ font-weight:700; margin-bottom:6px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
.btn {
  background:#21262d; border:1px solid #30363d; color:#e6edf3;
  border-radius:8px; padding:10px 14px; cursor:pointer; font-size:14px;
}
.btn:hover{ background:#30363d; }
.btn.primary{ background:#238636; border-color:#2ea043; }
.btn.primary:hover{ background:#2ea043; }
.auth-widget { margin-top:10px; padding:10px; border:1px dashed #30363d; border-radius:8px; }
/* Job status dock */
#jobStatusDock{
  position:fixed; right:0; bottom:0; width:340px; max-width:100%; max-height:50vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-right:none; border-bottom:none;
  border-top-left-radius:10px; padding:12px; z-index:1500;
}
#jobStatusDock.hidden{ display:none; }
#jobStatusDock header{ font-weight:700; margin-bottom:6px; }
#jobStatusText{ font-size:14px; margin-bottom:8px; }
.progress{ width:100%; height:8px; background:#21262d; border-radius:4px; overflow:hidden; margin-bottom:8px; }
#jobProgressBar{ height:100%; width:0%; background:var(--ok); }
#jobLogs{ font-size:12px; color:var(--muted); max-height:120px; overflow:auto; border-top:1px solid var(--border); padding-top:6px; }
#digestContent{ font-size:14px; line-height:1.45; }

/* Responsive */
@media (max-width: 900px){
  main{ display:block; padding: 0 12px 12px; }
  #threads{ max-height:none; margin:0 0 12px 0; }
  #searchPanel{ width:100%; height:100%; border-radius:0; }
  #jobStatusDock{ width:100%; left:0; border-radius:0; }
  #controls{ padding:12px; }
}