/* ===== Tubo24 — skin "KERF" del configuratore =====
   Direzione KERF: acciaio grafite freddo + blu-laser (Space Grotesk / IBM Plex).
   SOLO CSS: nessun ID/HTML toccato -> logica (bender.js) 100% intatta.
   Caricato solo col tema laser24-kerf. I font sono gia' self-hosted dal tema. */

.bb-app {
  --bg0: #101519; --bg1: #171D22; --bg2: #1F262C; --bg3: #28313A;
  --sclow: #0B0E10;
  --line: #28313A; --line-warm: #28313A;
  --accent: #2D6CFF; --accent-h: #1E4FD1; --accent-2: #7EA6FF;
  --text: #EAEEF1; --muted: #8B98A3; --outline: #5B8CFF;
  --ok: #12A150; --warn: #E8890C;
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  font-family: var(--font);
  background: var(--bg0); color: var(--text);
}
.bb-app * { border-radius: 0 !important; }

/* top bar grafite scura */
.bb-app .bb-appbar { background: #0B0E10; border-bottom: 1px solid var(--line); }
.bb-app .bb-appbrand,
.bb-app .bb-appbrand span { color: #fff; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; }
.bb-app .bb-apptotal { color: #fff; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; }
.bb-app .bb-appnav a { color: var(--muted); }
.bb-app .bb-appnav a:hover { color: #fff; background: var(--bg2); }

/* titoli in display */
.bb-app h1, .bb-app h2, .bb-app h3 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }

/* focus blu */
.bb-app :where(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,108,255,.22); }

/* ---- TOP BAR: il configuratore usa le classi .lv3-* del tema (definite da MATERIA,
   NON da KERF) -> ridefinite in stile KERF, scoped al configuratore. ---- */
.bb-app .lv3-header { background: #0B0E10; border-bottom: 1px solid var(--line); flex: none; }
.bb-app .lv3-header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; }
.bb-app .lv3-header-left, .bb-app .lv3-header-right { display: flex; align-items: center; gap: 12px; }
.bb-app .lv3-brand { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.bb-app .lv3-mark { color: var(--accent); flex: none; }
.bb-app .lv3-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.bb-app .lv3-icon:hover { color: #fff; background: var(--bg2); }
.bb-app .lv3-icon .material-symbols-outlined { font-size: 22px; line-height: 1; }