/* ...existing styles... */
:root { --bg: #ffffff; --fg: #111; --muted:#666; --line:#e9e9e9; --accent:#111; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
h1 { font-size: 28px; margin: 24px 0 4px; }
.subtitle { color: var(--muted); margin: 0 0 24px; }
.mode-switch { display:flex; align-items:center; gap:10px; margin-bottom: 16px; }
.mode-btn { border:1px solid var(--line); background:#f7f7f7; padding:10px 14px; border-radius:8px; cursor:pointer; }
.mode-btn.primary { background:#111; color:#fff; border-color:#111; }
.mode-help, .help { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#f0f0f0; color:#444; font-size:12px; cursor:help; }
.search-card, .results-card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
label { font-weight:600; }
input[type="text"], textarea, select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.filters { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
button { cursor:pointer; transition: transform .04s ease; }
button:active { transform: translateY(1px); }
/* cancel press animation for the iOS switch */
.toggle-include:active { transform: none; }
/* iOS-style include toggle */
.toggle-include {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: #e9e9ea; /* iOS off track */
  border: none;
  padding: 0;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  transition: background-color .2s ease;
}
.toggle-include .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.04);
  transform: translateX(0);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.toggle-include[aria-pressed="true"] { background: #34c759; /* iOS green */ }
.toggle-include[aria-pressed="true"] .knob { transform: translateX(20px); } /* 22px final left -> 20px delta */
.toggle-include:focus-visible {
  box-shadow: 0 0 0 3px rgba(52,199,89,0.35), inset 0 0 0 1px rgba(0,0,0,0.06);
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toggle-include, .toggle-include .knob { transition: none; }
}
button.primary { background:#111; color:#fff; border:none; padding:10px 14px; border-radius:8px; }
button.ghost { background:#fff; color:#111; border:1px solid var(--line); padding:10px 12px; border-radius:8px; }
button.toggle { border:1px solid var(--line); background:#fff; border-radius:20px; padding:8px 12px; }
button.toggle.active { background:#111; color:#fff; border-color:#111; }
button.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.controls { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.badge { border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; background:#f7f7f7; }
.table-wrapper { overflow:auto; border:1px solid var(--line); border-radius:8px; }
table { width:100%; border-collapse:collapse; min-width:1100px; table-layout: auto; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow:hidden; text-overflow:ellipsis; }
/* zebra rows */
tbody tr:nth-child(odd){ background:#fcfcfc; }
/* resizable headers */
th { background:#fafafa; font-weight:600; position:sticky; top:0; }
th .resizer { position:absolute; right:0; top:0; width:6px; height:100%; cursor:col-resize; }
.quick-filter { max-width:280px; }
/* reference cell */
.ref-authors { font-style:italic; display:block; color:#222; }
.ref-title { font-weight:700; display:block; color:#111; }
.ref-journal { color:#444; display:block; }
/* banner */
.banner { margin:8px 0; padding:8px 12px; border:1px solid #fde68a; background:#fff7ed; color:#92400e; border-radius:8px; }
/* side panel */
.side-panel { position: fixed; right:0; top:0; bottom:0; width:340px; background:#fff; border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,0.06); padding:12px; z-index:1000; }
.side-panel.hidden { display:none; }
.side-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.side-panel-body label { display:block; font-weight:600; margin:10px 0 6px; }
.side-panel-body input, .side-panel-body textarea { width:100%; }
.pagination { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding-top:10px; }
.loading { position: fixed; inset:0; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; background: rgba(255,255,255,0.8); z-index:999; }
.hidden { display:none; }
.spinner { width:32px; height:32px; border-radius:50%; border:3px solid #ddd; border-top-color:#111; animation:spin 0.8s linear infinite; }
.progress-wrap { width:280px; height:6px; border-radius:999px; background:#eee; overflow:hidden; margin-top:6px; }
.progress-bar { height:100%; background:#111; width:0%; transition: width .2s ease; }
@keyframes spin { to { transform: rotate(360deg);} }
.footer { color: var(--muted); }
.warn { margin-top:6px; color:#b45309; background:#fff7ed; border:1px solid #fde68a; padding:8px 10px; border-radius:8px; font-size:13px; }
/* Responsive */
@media (max-width: 720px) {
  .controls { flex-direction:column; align-items:stretch; }
  .results-header { flex-direction:column; gap:10px; align-items:flex-start; }
}
.row-num { text-align:center; margin-top:4px; font-size:12px; color: var(--muted); }