/* ── Badges ────────────────────────────────────────────────── */
.badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; letter-spacing: 1px; border: 1px solid var(--border); color: var(--muted); }
.badge.hl  { border-color: var(--accent); color: var(--accent); background: rgba(108,99,255,.12); }
.badge.ok  { border-color: var(--green);  color: var(--green);  background: rgba(166,227,161,.1); }
.badge.err { border-color: var(--red);    color: var(--red);    background: rgba(243,139,168,.1); }

/* ── Section label ─────────────────────────────────────────── */
.sec { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ── Form controls ─────────────────────────────────────────── */
input[type=text], select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: var(--radius); font-family: inherit; font-size: 12px;
  outline: none; transition: border-color .2s;
}
input[type=text]:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
select option { background: var(--card); }
select.auto { width: auto; flex-shrink: 0; }
input[type=range] { width: 100%; accent-color: var(--accent); background: transparent; border: none; padding: 0; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  width: 100%; padding: 9px 14px; border: none; border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .5px; transition: all .2s;
}
.btn:disabled { opacity: .5; transform: none; cursor: wait; }
.btn-p { background: linear-gradient(135deg, var(--accent), #4f46e5); color: #fff; box-shadow: 0 0 18px rgba(108,99,255,.3); }
.btn-p:hover:not(:disabled) { box-shadow: 0 0 28px rgba(108,99,255,.55); transform: translateY(-1px); }
.btn-s { background: var(--border); color: var(--text); }
.btn-s:hover:not(:disabled) { background: #1c1c35; }
.btn-g { background: rgba(166,227,161,.12); color: var(--green); border: 1px solid rgba(166,227,161,.3); }
.btn-g:hover:not(:disabled) { background: rgba(166,227,161,.22); }

.del {
  background: rgba(243,139,168,.12); color: var(--red); border: 1px solid rgba(243,139,168,.25);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 10px; padding: 2px 7px;
  font-family: inherit; transition: background .2s;
}
.del:hover { background: rgba(243,139,168,.25); }

/* ── Algorithm toggle ──────────────────────────────────────── */
.algo-row { display: flex; gap: 5px; }
.algo-btn {
  flex: 1; padding: 7px 4px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); font-size: 10px; cursor: pointer; text-align: center;
  transition: all .2s; letter-spacing: .5px; font-family: inherit;
}
.algo-btn:hover { color: var(--text); }
.algo-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(108,99,255,.12); }

/* ── Legend ────────────────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: 5px; }
.leg-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--c); box-shadow: 0 0 5px var(--c); }

/* ── Spinner / typing ──────────────────────────────────────── */
.thinking { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.typing::after { content: '▋'; animation: blink 1s step-end infinite; }

/* ── Tooltip ───────────────────────────────────────────────── */
#tip {
  position: fixed; display: none; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 11px; font-size: 11px; pointer-events: none;
  max-width: 220px; z-index: 200; line-height: 1.5;
}