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

.laser24.l24-app {
  --bg0: #101519;   /* grafite */
  --bg1: #171D22;
  --bg2: #1F262C;
  --bg3: #28313A;
  --line: #28313A;
  --line2: #323C45;
  --text: #EAEEF1;
  --muted: #8B98A3;
  --accent: #2D6CFF;   /* blu-laser */
  --accent-2: #1E4FD1;
  --ok: #12A150;
  --blue: #5B8CFF;
  --canvas: #0B0E10;   /* canvas scuro */
  --dot: #28313A;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg0); color: var(--text);
}
/* spigoli vivi (KERF = machinato) */
.laser24.l24-app * { border-radius: 0 !important; }

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

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

/* scrollbar */
.laser24.l24-app .l24-pane::-webkit-scrollbar-thumb { background: #28313A; }

/* rifinitura: accento blu su bordi/focus attivi (il base usa gia' var(--accent)) */
.laser24.l24-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) -> qui le ridefiniamo in stile KERF, scoped al configuratore. ---- */
.laser24.l24-app .lv3-header { background: #0B0E10; border-bottom: 1px solid var(--line); flex: none; }
.laser24.l24-app .lv3-header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; }
.laser24.l24-app .lv3-header-left, .laser24.l24-app .lv3-header-right { display: flex; align-items: center; gap: 12px; }
.laser24.l24-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; }
.laser24.l24-app .lv3-mark { color: var(--accent); flex: none; }
.laser24.l24-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; }
.laser24.l24-app .lv3-icon:hover { color: #fff; background: var(--bg2); }
.laser24.l24-app .lv3-icon .material-symbols-outlined { font-size: 22px; line-height: 1; }