/* bersys.es — tokens de tema compartits + menú d'engranatge */
:root{
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:14px; --radius-s:9px;
  --ok:#22c55e; --warn:#eab308; --bad:#ef4444;
  --dur:.22s;
}
/* Fosc (per defecte) */
:root,[data-theme="dark"]{
  --bg:#0b100d; --surface:#121a15; --surface-2:#1a241e; --border:#25332a;
  --text:#e6efe9; --muted:#8fa397; --shadow:0 6px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f3f6f4; --surface:#ffffff; --surface-2:#eaf0ec; --border:#d3ddd6;
  --text:#14201a; --muted:#5a6b61; --shadow:0 6px 20px rgba(20,40,30,.12);
  color-scheme:light;
}
/* Paletes (accent) */
:root,[data-palette="verd"]{--accent:#22c55e;--accent-2:#16a34a;--accent-soft:rgba(34,197,94,.14);--accent-contrast:#04210f}
[data-palette="taronja"]{--accent:#F5520A;--accent-2:#d9460a;--accent-soft:rgba(245,82,10,.15);--accent-contrast:#fff}
[data-palette="blau"]{--accent:#3b82f6;--accent-2:#2563eb;--accent-soft:rgba(59,130,246,.15);--accent-contrast:#fff}
[data-palette="ambre"]{--accent:#f59e0b;--accent-2:#d97706;--accent-soft:rgba(245,158,11,.15);--accent-contrast:#2a1800}
[data-palette="violeta"]{--accent:#a855f7;--accent-2:#9333ea;--accent-soft:rgba(168,85,247,.15);--accent-contrast:#fff}
[data-palette="rosa"]{--accent:#ec4899;--accent-2:#db2777;--accent-soft:rgba(236,72,153,.15);--accent-contrast:#fff}
/* Tints del fons segons paleta en mode fosc */
[data-theme="dark"][data-palette="blau"]{--bg:#0a0e14;--surface:#111823;--surface-2:#18212f;--border:#243045}
[data-theme="dark"][data-palette="ambre"]{--bg:#110e09;--surface:#1a1610;--surface-2:#231d14;--border:#3a2f1f}
[data-theme="dark"][data-palette="violeta"]{--bg:#0f0b14;--surface:#17111f;--surface-2:#20182b;--border:#33264a}
[data-theme="dark"][data-palette="rosa"]{--bg:#130a0f;--surface:#1c1117;--surface-2:#261720;--border:#3d2433}

[data-anim="off"] *,[data-anim="off"] *::before,[data-anim="off"] *::after{
  animation:none!important; transition:none!important; scroll-behavior:auto!important;
}

/* Botó engranatge */
.bp-gear{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:9000;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--dur)}
.bp-gear.bp-inline{position:static;box-shadow:none;width:38px;height:38px}
.bp-gear:hover{transform:rotate(45deg)}
.bp-gear svg{width:21px;height:21px}
.bp-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9001;opacity:0;pointer-events:none;transition:opacity var(--dur)}
.bp-back.open{opacity:1;pointer-events:auto}
.bp-panel{position:fixed;z-index:9002;right:0;left:0;bottom:0;background:var(--surface);color:var(--text);font-family:var(--font);
  border-top:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform var(--dur) ease;box-shadow:var(--shadow);max-height:85vh;overflow:auto}
.bp-panel.open{transform:none}
@media (min-width:640px){
  .bp-panel{left:auto;right:16px;top:64px;bottom:auto;width:320px;border:1px solid var(--border);border-radius:var(--radius);
    transform:translateY(-8px) scale(.97);opacity:0;pointer-events:none;transition:all var(--dur)}
  .bp-panel.open{transform:none;opacity:1;pointer-events:auto}
}
.bp-panel h3{margin:0 0 14px;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.bp-x{background:none;border:0;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.bp-row{margin:0 0 16px}
.bp-lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.bp-seg{display:flex;background:var(--surface-2);border-radius:var(--radius-s);padding:3px;gap:3px}
.bp-seg button{flex:1;border:0;background:none;color:var(--text);padding:9px;border-radius:7px;cursor:pointer;font:inherit;font-size:.9rem}
.bp-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-contrast);font-weight:600}
.bp-sw{display:flex;gap:10px;flex-wrap:wrap}
.bp-sw button{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;outline-offset:2px}
.bp-sw button[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.bp-toggle{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.bp-toggle input{appearance:none;width:46px;height:26px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;transition:background var(--dur)}
.bp-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:all var(--dur)}
.bp-toggle input:checked{background:var(--accent)}
.bp-toggle input:checked::after{left:22px;background:var(--accent-contrast)}
[hidden]{display:none!important}
/* Nota «(CLM)» al costat dels logos de les eines de bersys.es */
.clm { color: inherit !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; font-weight: 300 !important; font-size: .62em; letter-spacing: .04em; opacity: .6; margin-left: .35em; text-transform: none !important; vertical-align: .12em; white-space: nowrap; }
.logo .clm { margin-left: -4px; }
.clm { cursor: help; }
.clm-tip { position: fixed; z-index: 10000; background: #111; color: #fff; font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 8px 12px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; white-space: nowrap; }
.clm-tip::before { content: "✦ "; color: #D97757; }
.clm-tip.on { opacity: 1; transform: none; }
[data-theme="light"] .clm-tip { background: #1a1a1a; }

/* Selector de temes (apps amb data-temes) */
.bp-temes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-temes button { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-s); border: 2px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; text-align: left; }
.bp-temes button[aria-pressed="true"] { border-color: var(--accent); }
.bp-tsw { display: flex; border-radius: 6px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(127,127,127,.3); }
.bp-tsw i { width: 10px; height: 26px; display: block; }
.bp-seg button { white-space: nowrap; font-size: .82rem; padding: 9px 6px; }