:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#6a737d; --line:#e1e4e8; --brand:#2f6df6; --err:#c62828; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14171b; --card:#1c2026; --ink:#e8eaed; --muted:#9aa3ad; --line:#2b3138; --brand:#6b97ff; --err:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.topbar { display:flex; align-items:center; gap:1.5rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar nav { display:flex; gap:1rem; }
.topbar-right { margin-left:auto; display:flex; gap:1rem; align-items:center; }
.topbar a { color:var(--ink); text-decoration:none; } .topbar a:hover { color:var(--brand); }
.brand { display:flex; align-items:center; }
.brand img { display:block; height:32px; width:auto; }
.auth-logo { text-align:center; margin-bottom:1rem; }
.auth-logo img { height:150px; width:auto; max-width:100%; }
main { max-width:960px; margin:1.5rem auto; padding:0 1rem; display:grid; gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.25rem; }
.card.narrow { max-width:420px; margin:2rem auto; width:100%; }
h1 { margin:0 0 .75rem; font-size:1.4rem; } h2 { margin:0 0 .75rem; font-size:1.1rem; }
label { display:block; margin-bottom:.75rem; font-size:.9rem; color:var(--muted); }
input, select { display:block; width:100%; margin-top:.25rem; padding:.55rem .7rem; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button { font:inherit; padding:.45rem .9rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); cursor:pointer; }
button:hover { border-color:var(--brand); }
button.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
button.link { border:0; background:none; color:var(--brand); padding:0; }
.lang { display:flex; gap:.25rem; } .lang button { padding:.15rem .5rem; text-transform:uppercase; font-size:.8rem; }
.lang .current { background:var(--brand); border-color:var(--brand); color:#fff; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
th { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.actions { display:flex; gap:.5rem; justify-content:flex-end; } .actions form { margin:0; }
.flash { margin:0; padding:.7rem 1rem; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.flash.ok { border-color:#2e9e5b; } .flash.error { border-color:var(--err); color:var(--err); }
.error { color:var(--err); } .muted { color:var(--muted); }
code { background:var(--bg); padding:.1rem .35rem; border-radius:4px; }
@media (max-width:600px) { .topbar { gap:.75rem; } table { font-size:.9rem; } }

/* Bots i coneixement */
textarea { display:block; width:100%; margin-top:.25rem; padding:.55rem .7rem; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:6px; resize:vertical; }
small { display:block; margin-top:.25rem; color:var(--muted); font-size:.8rem; }
label.check { display:flex; gap:.5rem; align-items:center; color:var(--ink); } label.check input { width:auto; margin:0; }
input[readonly] { color:var(--muted); }
a.button { display:inline-block; padding:.45rem .9rem; border:1px solid var(--line); border-radius:6px; color:var(--ink); text-decoration:none; }
a.button:hover { border-color:var(--brand); }
.crumbs { margin:0; } .crumbs a { color:var(--muted); text-decoration:none; }
td.wrap { word-break:break-word; }
details { margin-top:.75rem; border-top:1px solid var(--line); padding-top:.75rem; }
summary { cursor:pointer; font-weight:600; margin-bottom:.5rem; }
form.inline { display:flex; gap:.5rem; align-items:center; } form.inline input { margin:0; flex:1; }
.hits { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.75rem; }
.hits li { border:1px solid var(--line); border-radius:8px; padding:.75rem; }
.hit-meta { font-size:.85rem; color:var(--muted); margin-bottom:.4rem; }
.hits pre { margin:0; white-space:pre-wrap; word-break:break-word; font:inherit; font-size:.9rem; }
.card.danger { border-color:var(--err); }
.htmx-indicator { opacity:0; } .htmx-request .htmx-indicator { opacity:1; }

/* Xat de prova */
.chat-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .chat-head h2 { margin:0; }
.chat-log { display:flex; flex-direction:column; gap:.6rem; min-height:6rem; max-height:26rem; overflow-y:auto; padding:.75rem; margin:.5rem 0 1rem; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.chat-msg { max-width:85%; padding:.55rem .8rem; border-radius:12px; white-space:pre-wrap; word-break:break-word; }
.chat-msg.user { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:3px; }
.chat-msg.assistant { align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:3px; }
.chat-msg.error { align-self:flex-start; color:var(--err); border:1px solid var(--err); background:transparent; }
.chat-src { align-self:flex-start; font-size:.78rem; color:var(--muted); margin:-.3rem 0 0 .4rem; }
.field-help { margin:-.4rem 0 .9rem 1.6rem; }

/* Widget */
textarea.mono, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .grid2 input[type=color] { height:2.5rem; padding:.2rem; }
.usage { font-weight:600; }
@media (max-width:600px) { .grid2 { grid-template-columns:1fr; } }

/* Converses */
.crumbs-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:.5rem 0 1rem; }
.stats div { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; display:flex; flex-direction:column; }
.stats strong { font-size:1.25rem; } .stats span { font-size:.8rem; color:var(--muted); }
.filters { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; margin:.5rem 0 1rem; } .filters label { margin:0; flex:1; min-width:10rem; }
td.nowrap, .nowrap { white-space:nowrap; }
.pager { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; gap:1rem; }
dl.meta { display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1rem; margin:0 0 1.25rem; } dl.meta dt { color:var(--muted); } dl.meta dd { margin:0; }
.transcript { display:flex; flex-direction:column; gap:1rem; }
.turn { max-width:88%; } .turn.user { align-self:flex-end; } .turn.assistant { align-self:flex-start; }
.turn-head { display:flex; gap:.6rem; font-size:.85rem; margin-bottom:.2rem; } .turn.user .turn-head { justify-content:flex-end; }
.bubble { padding:.6rem .9rem; border-radius:12px; white-space:pre-wrap; word-break:break-word; background:var(--bg); border:1px solid var(--line); }
.turn.user .bubble { background:var(--brand); border-color:var(--brand); color:#fff; }
.turn-foot { font-size:.78rem; margin-top:.25rem; }

/* Botons d'icona */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); text-decoration:none; }
.icon-btn:hover { border-color:var(--brand); color:var(--brand); }
.icon-btn:focus-visible, a.row-link:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
a.row-link { color:var(--ink); font-weight:600; text-decoration:none; } a.row-link:hover { color:var(--brand); text-decoration:underline; }

/* Comptadors sobre les icones, taula de camps de leads */
.icon-btn { position:relative; }
.badge { position:absolute; top:-7px; right:-7px; min-width:1.15rem; height:1.15rem; padding:0 .28rem; border-radius:999px; background:var(--brand); color:#fff; font-size:.7rem; font-weight:700; line-height:1.15rem; text-align:center; pointer-events:none; }
.table-wrap { overflow-x:auto; }
table.fields { width:auto; margin:.25rem 0 1rem; } table.fields th, table.fields td { padding:.35rem .9rem .35rem 0; }
table.fields input[type=checkbox] { width:auto; margin:0; }
.tag { display:inline-block; font-size:.7rem; padding:.05rem .4rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.row-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Organització activa: badge fi a la dreta de la barra, separat del menú */
.org-badge { --b-bg:#eef3ff; --b-line:#c9d7fb; --b-ink:#1f4fc4;
  display:inline-flex; align-items:center; gap:.4rem; box-sizing:border-box; height:1.75rem; max-width:16rem; padding:0 .7rem;
  border:1px solid var(--b-line); border-radius:999px; background:var(--b-bg); color:var(--b-ink);
  font-size:.8rem; font-weight:600; line-height:1; letter-spacing:.01em; text-decoration:none; white-space:nowrap; }
@media (prefers-color-scheme: dark) { .org-badge { --b-bg:#1f2a47; --b-line:#34457a; --b-ink:#a9c0ff; } }
a.org-badge:hover { border-color:var(--b-ink); }
a.org-badge:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.org-badge .org-name { overflow:hidden; text-overflow:ellipsis; }
.org-badge .org-state { flex:none; padding-left:.4rem; border-left:1px solid var(--b-line); font-weight:500; opacity:.85; }
.org-badge.inactive { border-style:dashed; }
.org-badge.warn { --b-bg:#fdeceb; --b-line:#f1b8b4; --b-ink:#b3261e; }
@media (prefers-color-scheme: dark) { .org-badge.warn { --b-bg:#3a1f1e; --b-line:#7a3a37; --b-ink:#ffb4ad; } }
.topbar-right { gap:.9rem; }
@media (max-width:600px) { .org-badge { max-width:11rem; } }

/* Retenció, avisos i satisfacció */
hr.sep { border:0; border-top:1px solid var(--line); margin:1.5rem 0 1rem; }
h3 { margin:0 0 .5rem; font-size:1rem; }
fieldset.choices { border:1px solid var(--line); border-radius:8px; padding:.6rem .9rem; margin:0 0 .9rem; } fieldset.choices legend { padding:0 .4rem; color:var(--muted); font-size:.85rem; }
label.radio { display:flex; gap:.6rem; align-items:flex-start; margin:.4rem 0; color:var(--ink); } label.radio input { width:auto; margin:.25rem 0 0; }
label.radio small { margin:0; }
.sat { display:inline-block; font-size:.72rem; font-weight:600; padding:.1rem .5rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.sat.satisfied { color:#1d7a46; border-color:#9fd5b5; background:#eaf7ef; } .sat.unsatisfied { color:#b3261e; border-color:#f1b8b4; background:#fdeceb; }
.sat.neutral { color:var(--muted); } .sat.unknown { color:var(--muted); border-style:dashed; }
@media (prefers-color-scheme: dark) { .sat.satisfied { color:#7fd6a0; background:#15301f; border-color:#2c6a45; } .sat.unsatisfied { color:#ffb4ad; background:#3a1f1e; border-color:#7a3a37; } }
.summary-line { display:block; margin-top:.2rem; font-size:.82rem; color:var(--muted); }
.summary-box { border:1px solid var(--line); border-radius:8px; padding:.7rem .9rem; margin:0 0 1.25rem; background:var(--bg); } .summary-box p { margin:.2rem 0; }