/* ==========================================================================
   Buggy Manager — design system
   Strati: bootstrap < tokens < bridge < base < layout < components < utilities
   Temi (come in isi_tlc, stessi nomi di token): dark (predefinito) · light · calm · system · obsidian · steamlegacy · stroggos · darkbuggy
   Nessuna risorsa esterna: Bootstrap è servito da noi (vedi vendor/README.md), niente font da CDN.
   ========================================================================== */
@layer bootstrap, tokens, bridge, base, layout, components, utilities;

@import url("vendor/bootstrap.min.css") layer(bootstrap);

/* ============================================================ token */
@layer tokens {
  :root {
    /* geometria */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
    --control-h: 44px;               /* area di tocco ≥ 44 px per campi e pulsanti */
    --container: 1040px; --gutter: 16px; --header-h: 60px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-readable: Verdana, Tahoma, "DejaVu Sans", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
    --ease: 140ms ease;

    /* Predefinito: scuro («Notte»). Buggy è un gatto nero. */
    color-scheme: dark;
    --paper: #0E1217; --surface: #171D24; --sunk: #12171D; --raised: #1E262F;
    --ink: #E7ECF0; --muted: #9AA7B3; --line: #2A343E;
    --bar: #080B0E; --on-bar: #E7ECF0; --accent: #78A9E8;
    --signal: #A78BFA; --on-signal: #100C24;
    --ok: #63C08F; --ok-bg: #16301F; --bad: #F0877B; --bad-bg: #3A1A16; --warn: #F2BE0C; --warn-bg: #3A300C; --info-bg: #15283A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow: 0 10px 28px rgba(0,0,0,.36); --shadow-lg: 0 18px 44px rgba(0,0,0,.5);
    --scrim: rgba(3,5,8,.72);
  }

  :root[data-theme="dark"] { color-scheme: dark; }

  :root[data-theme="light"] {
    color-scheme: light;
    --paper: #E8ECF0; --surface: #FFFFFF; --sunk: #F2F5F7; --raised: #FFFFFF;
    --ink: #15202A; --muted: #556270; --line: #C8D0D7;
    --bar: #15202A; --on-bar: #F2F5F7; --accent: #3657B0;
    --signal: #5B45C6; --on-signal: #FFFFFF;
    --ok: #1F6B45; --ok-bg: #DCEFE3; --bad: #A8281D; --bad-bg: #F7E0DC; --warn: #8A5A00; --warn-bg: #FFF1C2; --info-bg: #E1ECF7;
    --shadow-sm: 0 1px 4px rgba(21,32,42,.08); --shadow: 0 8px 24px rgba(21,32,42,.10); --shadow-lg: 0 16px 40px rgba(21,32,42,.2);
    --scrim: rgba(21,32,42,.55);
  }

  /* «Calmo»: chiaro e morbido, pensato per ridurre lo stimolo visivo */
  :root[data-theme="calm"] {
    color-scheme: light;
    --paper: #F1EEE8; --surface: #FFFDF9; --sunk: #F7F4EE; --raised: #FFFFFF;
    --ink: #26323A; --muted: #56626B; --line: #D9D3C9;
    --bar: #2B3640; --on-bar: #F7F4EE; --accent: #6250A8;
    --signal: #6250A8; --on-signal: #FFFFFF;
    --ok: #1F6B45; --ok-bg: #E2F0E6; --bad: #A8281D; --bad-bg: #F8E4E0; --warn: #8A5A00; --warn-bg: #FBF0CC; --info-bg: #E6EEF8;
    --shadow-sm: 0 1px 4px rgba(38,50,58,.08); --shadow: 0 8px 22px rgba(38,50,58,.10); --shadow-lg: 0 16px 38px rgba(38,50,58,.2);
    --scrim: rgba(38,50,58,.5);
  }

  /* «Come il dispositivo»: segue la preferenza del sistema (scuro se non dichiarata) */
  @media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
      color-scheme: light;
      --paper: #E8ECF0; --surface: #FFFFFF; --sunk: #F2F5F7; --raised: #FFFFFF;
      --ink: #15202A; --muted: #556270; --line: #C8D0D7;
      --bar: #15202A; --on-bar: #F2F5F7; --accent: #3657B0;
      --signal: #5B45C6; --on-signal: #FFFFFF;
      --ok: #1F6B45; --ok-bg: #DCEFE3; --bad: #A8281D; --bad-bg: #F7E0DC; --warn: #8A5A00; --warn-bg: #FFF1C2; --info-bg: #E1ECF7;
      --shadow-sm: 0 1px 4px rgba(21,32,42,.08); --shadow: 0 8px 24px rgba(21,32,42,.10); --shadow-lg: 0 16px 40px rgba(21,32,42,.2);
      --scrim: rgba(21,32,42,.55);
    }
  }

  /* Dai temi di isi_tlc ------------------------------------------------- */
  :root[data-theme="obsidian"] {
    color-scheme: dark;
    --signal: #F2BE0C; --on-signal: #1C1600;
    --paper: #10140D; --surface: #171D13; --sunk: #131910; --raised: #1E2619;
    --ink: #DCE6D1; --muted: #96A486; --line: #394631;
    --bar: #0A0E09; --on-bar: #DCE6D1; --accent: #A7BE72;
    --ok: #7FB05B; --ok-bg: #1B2B16; --bad: #D87869; --bad-bg: #351B17; --warn-bg: #39300D; --info-bg: #17271A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow: 0 8px 22px rgba(0,0,0,.36); --shadow-lg: 0 14px 30px rgba(0,0,0,.48);
    --r-sm: 0; --r-md: 0; --r-lg: 0;
  }

  :root[data-theme="steamlegacy"] {
    color-scheme: dark;
    --signal: #F2BE0C; --on-signal: #1C1600;
    --paper: #10140D; --surface: #171D13; --sunk: #131910; --raised: #20291B;
    --ink: #DCE6D1; --muted: #96A486; --line: #394631;
    --bar: #0A0E09; --on-bar: #DCE6D1; --accent: #A7BE72;
    --ok: #7FB05B; --ok-bg: #1B2B16; --bad: #D87869; --bad-bg: #351B17; --warn-bg: #39300D; --info-bg: #17271A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow: 0 8px 22px rgba(0,0,0,.36); --shadow-lg: 0 14px 30px rgba(0,0,0,.48);
    --r-sm: 0; --r-md: 0; --r-lg: 0;
    --bevel-hi: rgba(255,255,255,.13); --bevel-lo: rgba(0,0,0,.58); --steam-top: #20291B; --steam-bottom: #11160E;
  }

  /* Cyber-militare ispirato a Quake II / Quake 4 (da isi_tlc): ferro, ruggine, fosfori verdi */
  :root[data-theme="stroggos"] {
    color-scheme: dark;
    --paper: #0B0908; --surface: #161210; --sunk: #100D0B; --raised: #261F1A;
    --ink: #F0F5F6; --muted: #A08A78; --line: #3D2F26;
    --bar: #060809; --on-bar: #F0F5F6; --accent: #00FF66;
    --signal: #00FF66; --on-signal: #04140A;
    --ok: #00FF66; --ok-bg: #0B2417; --bad: #FF5A4F; --bad-bg: #2E1210; --warn: #FF8800; --warn-bg: #2E2008; --info-bg: #0E1B1F;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow: 0 8px 22px rgba(0,0,0,.5); --shadow-lg: 0 14px 30px rgba(0,0,0,.6);
    --r-sm: 2px; --r-md: 2px; --r-lg: 3px;
    --font: Rajdhani, "Arial Narrow", system-ui, sans-serif;
  }

  /* DarkBuggy: gatto nero, fosfori verdi, circuiti blu e viola, metallo brunito. */
  :root[data-theme="darkbuggy"] {
    color-scheme: dark;
    --paper: #080D16; --surface: #121C2A; --sunk: #0B1320; --raised: #1C2940;
    --ink: #DFEFE9; --muted: #A1B6B1; --line: #455560;
    --bar: #04070B; --on-bar: #DFEFE9; --accent: #8DBEFF;
    --signal: #AD9AFF; --on-signal: #130D29;
    --ok: #64E8AC; --ok-bg: #102E23; --bad: #FF9B91; --bad-bg: #391E21;
    --warn: #E8BF80; --warn-bg: #332819; --info-bg: #16253B;
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
    --circuit: #B8A1F7; --metal: #8B7154;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow: 0 10px 28px rgba(0,0,0,.5); --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
    --scrim: rgba(3,5,8,.8);
  }

  /* Colore della personalità: ogni colore ha la variante per i temi chiari e per quelli scuri (light-dark()).
     Il testo sopra il colore (--on-pa) ha sempre contrasto ≥ 4,5:1. */
  .pc-slate  { --pa: light-dark(#475569, #A9B7C9); }
  .pc-blue   { --pa: light-dark(#1D4ED8, #7FAEFF); }
  .pc-green  { --pa: light-dark(#15803D, #6FD39B); }
  .pc-amber  { --pa: light-dark(#B45309, #F5B14C); }
  .pc-red    { --pa: light-dark(#B91C1C, #FF8F86); }
  .pc-violet { --pa: light-dark(#6D28D9, #B79BFF); }
  .pc-teal   { --pa: light-dark(#0F766E, #5FD6C9); }
  .pc-rose   { --pa: light-dark(#BE123C, #FF8FAE); }
  .pc-slate, .pc-blue, .pc-green, .pc-amber, .pc-red, .pc-violet, .pc-teal, .pc-rose { --on-pa: light-dark(#FFFFFF, #0B1017); }
  /* Identità della personalità separata dal colore primario blu/viola di Buggy. */
  html:not([class*="pc-"]) { --pa: var(--signal); --on-pa: var(--on-signal); }
}

/* ============================================================ ponte Bootstrap → token */
@layer bridge {
  :root {
    --bs-body-font-family: var(--font); --bs-body-font-size: 1rem; --bs-body-line-height: 1.55;
    --bs-body-color: var(--ink); --bs-body-bg: var(--paper);
    --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted);
    --bs-secondary-bg: var(--sunk); --bs-tertiary-bg: var(--sunk);
    --bs-border-color: var(--line); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg);
    --bs-link-color: var(--accent); --bs-link-hover-color: var(--ink);
    --bs-danger: var(--bad); --bs-success: var(--ok); --bs-warning: var(--warn);
    --bs-code-color: var(--accent);
  }
}

/* ============================================================ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }
  html[data-text="large"]  { font-size: 112.5%; }
  html[data-text="xlarge"] { font-size: 125%; }

  body {
    margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font);
    min-height: 100vh; display: flex; flex-direction: column; -webkit-text-size-adjust: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  h1, h2, h3, h4 { font-family: var(--font); font-weight: 650; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .5rem; }
  h1 { font-size: clamp(1.6rem, 4.5vw, 2rem); line-height: 1.15; }
  h2 { font-size: 1.25rem; line-height: 1.25; }
  h3 { font-size: 1.1rem; line-height: 1.3; }
  p { margin: 0 0 .75rem; }
  a { color: var(--accent); text-underline-offset: 3px; }
  a:hover { color: var(--ink); }
  code, kbd { font-family: var(--font-mono); font-size: .92em; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .05em .4em; color: var(--ink); }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
  [hidden] { display: none !important; }
  legend { float: none; width: auto; font-size: 1rem; font-weight: 600; padding: 0; margin: 0 0 .5rem; }
  fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
  summary { cursor: pointer; }
  hr { border-color: var(--line); opacity: 1; }
  ::selection { background: color-mix(in srgb, var(--signal) 55%, transparent); color: inherit; }

  /* Contrasto alto e carattere leggibile (preferenze della personalità) */
  html[data-contrast="high"] { --line: currentColor; --muted: var(--ink); }
  html[data-contrast="high"][data-theme="light"], html[data-contrast="high"][data-theme="calm"] { --paper: #fff; --surface: #fff; --sunk: #fff; --ink: #000; --accent: #0000c8; }
  html[data-contrast="high"]:not([data-theme="light"]):not([data-theme="calm"]) { --paper: #000; --surface: #000; --sunk: #000; --raised: #000; --ink: #fff; --accent: #9ecbff; }
  html[data-contrast="high"] :focus-visible { outline-width: 4px; }
  html[data-font="readable"] body { font-family: var(--font-readable); letter-spacing: .02em; word-spacing: .08em; line-height: 1.75; }
  html[data-font="readable"] h1, html[data-font="readable"] h2, html[data-font="readable"] h3 { font-family: var(--font-readable); }

  /* Meno movimento: scelta personale e preferenza del sistema */
  html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* ============================================================ layout: tutto su un'unica colonna centrata */
@layer layout {
  .bm-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  @media (min-width: 768px) { :root { --gutter: 24px; } }

  .bm-skip { position: fixed; left: 12px; top: -80px; z-index: 2000; background: var(--signal); color: var(--on-signal);
    padding: 10px 14px; border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--ease); }
  .bm-skip:focus { top: 10px; }

  /* testata */
  .bm-header { background: var(--bar); color: var(--on-bar); border-bottom: 3px solid var(--signal); position: sticky; top: 0; z-index: 1030; }
  .bm-header .navbar { --bs-navbar-padding-y: 0; min-height: var(--header-h); padding-block: 6px; }
  .bm-header .bm-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .bm-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-bar); font-weight: 700; font-size: 1.1rem;
    letter-spacing: -.01em; text-decoration: none; padding-block: 6px; }
  .bm-brand:hover { color: var(--on-bar); }
  .bm-brand .bm-logo { width: 1.5rem; height: 1.5rem; }
  .bm-header .navbar-nav { gap: 2px; }
  .bm-header .dropdown-toggle::after { margin-left: .2em; }
  .bm-header .nav-link { color: color-mix(in srgb, var(--on-bar) 82%, transparent); border-radius: var(--r-md); padding: 8px 12px;
    min-height: 40px; display: inline-flex; align-items: center; gap: 8px; transition: background var(--ease), color var(--ease); }
  .bm-header .nav-link:hover { color: var(--on-bar); background: color-mix(in srgb, var(--on-bar) 10%, transparent); }
  .bm-header .nav-link.active { color: var(--on-bar); background: color-mix(in srgb, var(--on-bar) 14%, transparent); box-shadow: inset 0 -2px 0 var(--signal); }
  .bm-header .navbar-toggler { border-color: color-mix(in srgb, var(--on-bar) 35%, transparent); padding: 8px 10px; }
  .bm-header .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
  .bm-header .navbar-collapse { flex-grow: 1; }
  .bm-bar-actions { display: flex; align-items: center; gap: var(--s-2); }
  .bm-who-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 1199.98px) {
    .bm-header .navbar-collapse { padding: var(--s-3) 0 var(--s-2); }
    .bm-header .navbar-nav { margin-bottom: var(--s-3); }
  }
  @media (min-width: 1200px) { .bm-header .navbar-collapse { display: flex !important; align-items: center; } .bm-header .navbar-nav { margin-left: var(--s-3); } }

  /* contenuto */
  .bm-main { flex: 1 0 auto; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-7);
    display: flex; flex-direction: column; gap: var(--s-4); }
  .bm-main:focus { outline: 0; }
  .bm-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
  .bm-pagehead h1 { margin: 0; }
  .bm-pagehead .bm-sub { color: var(--muted); margin: 4px 0 0; }
  .bm-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
  .bm-stack { display: flex; flex-direction: column; gap: var(--s-4); }
  .bm-grid { display: grid; gap: var(--s-4); }
  @media (min-width: 768px) { .bm-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

  .bm-footer { padding: var(--s-5) var(--gutter) var(--s-6); color: var(--muted); text-align: center; font-size: .9rem; }
  .bm-footer small { display: block; }

  /* pagine di accesso: scheda centrata, anche in verticale */
  .bm-auth { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-6) var(--gutter); }
  .bm-auth-card { width: 100%; max-width: 440px; }
  .bm-auth-card.wide { max-width: 580px; }
  .bm-auth-brand { text-align: center; margin-bottom: var(--s-5); }
  .bm-auth-brand .bm-logo { width: 3rem; height: 3rem; display: block; margin: 0 auto var(--s-2); }
  .bm-auth-brand .bm-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
}

/* ============================================================ componenti */
@layer components {
  /* scheda */
  .bm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
  .bm-card + .bm-card, .bm-stack > .bm-card { margin-top: 0; }
  .bm-card > :last-child { margin-bottom: 0; }
  .bm-card h2 { font-size: 1.15rem; }
  .bm-card.is-off { opacity: .6; }
  .bm-card.is-flat { box-shadow: none; background: var(--sunk); }
  .bm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
  .bm-list > li.bm-card { margin: 0; }
  .bm-help { color: var(--muted); font-size: .9rem; }
  .bm-error { color: var(--bad); font-size: .92rem; margin-top: 4px; }
  .bm-form { max-width: 100%; }
  .bm-card .bm-form { background: none; border: 0; padding: 0; box-shadow: none; }
  .bm-main > .bm-form, .bm-main > form.bm-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
  .bm-main > .alert { margin: 0; }
  .bm-auth-card h1 { font-size: 1.4rem; }
  .bm-auth-card .alert { margin-bottom: var(--s-4); }

  .bm-dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pa); vertical-align: -.1rem; flex: none; }
  .bm-swatch { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); min-height: 40px; }
  .bm-swatch:has(input:checked) { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa); }
  .bm-who { display: inline-flex; align-items: center; gap: .45rem; }
  .bm-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; font-size: 1.05rem; }
  .bm-codes code { display: block; text-align: center; padding: .45rem; user-select: all; }

  /* pulsanti */
  .btn { --bs-btn-border-radius: var(--r-md); min-height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 18px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    transition: background var(--ease), border-color var(--ease), transform var(--ease), filter var(--ease); }
  .btn:hover { background: var(--raised); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
  .btn:active { transform: translateY(1px); }
  .btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }
  .btn-sm { min-height: 36px; padding: 5px 12px; font-size: .92rem; }
  .btn-lg { min-height: 52px; padding: 12px 24px; font-size: 1.1rem; }
  .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
  .btn-primary:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); filter: brightness(.98); }
  .btn-outline-primary, .btn-outline-secondary { background: transparent; color: var(--ink); }
  .btn-outline-primary { border-color: var(--signal); }
  .btn-outline-primary:hover { background: color-mix(in srgb, var(--signal) 16%, transparent); border-color: var(--signal); }
  .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
  html[data-theme="dark"] .btn-danger, html[data-theme="obsidian"] .btn-danger, html[data-theme="steamlegacy"] .btn-danger, html[data-theme="stroggos"] .btn-danger, html:not([data-theme]) .btn-danger { color: #1a0605; }
  .btn-danger:hover { background: var(--bad); color: inherit; filter: brightness(.98); }
  .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
  .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); border-color: transparent; }
  .btn-icon { width: var(--control-h); padding: 0; }

  /* campi */
  .form-label { font-weight: 600; margin-bottom: 6px; }
  .form-control, .form-select { min-height: var(--control-h); background-color: var(--sunk); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--ease), box-shadow var(--ease); }
  textarea.form-control { min-height: 88px; }
  .form-control::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
  .form-control:focus, .form-select:focus { background-color: var(--sunk); color: var(--ink); border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 35%, transparent); }
  .form-select { --bs-form-select-bg-img: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23998f8f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
  .form-check-input { width: 1.25em; height: 1.25em; margin-top: .2em; background-color: var(--sunk); border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
  .form-check-input:checked { background-color: var(--signal); border-color: var(--signal); }
  .form-check-label { padding-left: 4px; }
  .form-control.is-invalid { border-color: var(--bad); }

  /* avvisi, badge, tabs */
  .alert { border-radius: var(--r-md); border: 1px solid var(--line); color: var(--ink); }
  .alert-success { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
  .alert-danger  { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
  .alert-warning { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
  .alert-info    { background: var(--info-bg); }
  /* Etichette: classi nostre (le utilità di Bootstrap con !important vincerebbero sugli strati successivi) */
  .bm-badge { display: inline-block; padding: .25em .7em; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4; vertical-align: middle;
    background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
  .bm-badge.is-ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
  .bm-badge.is-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
  .bm-badge.is-info { background: var(--info-bg); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  .bm-bad { color: var(--bad); }
  .bm-grid-filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .bm-scroll-x { overflow-x: auto; }
  .bm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
  .bm-tabs .nav-link { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; min-height: 40px; padding: 8px 16px; background: var(--surface); }
  .bm-tabs .nav-link:hover { color: var(--ink); background: var(--raised); }
  .bm-tabs .nav-link.active { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 600; }

  .dropdown-menu { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; color: var(--ink); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--ink) 10%, transparent); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-active-bg: var(--signal); --bs-dropdown-link-active-color: var(--on-signal); }
  .dropdown-item { border-radius: var(--r-sm); min-height: 40px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
  .dropdown-item-text { color: var(--muted); }
  details.bm-card > summary { font-weight: 600; }
  table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }

  /* --- Componenti Vue ------------------------------------------------------------------------------ */
  /* avvisi gentili (mai a schermo intero, mai urgenti) */
  .bm-toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1080;
    width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  .bm-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
    background: var(--raised); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-left: 4px solid var(--accent); }
  .bm-toast.is-ok { border-left-color: var(--ok); } .bm-toast.is-bad { border-left-color: var(--bad); } .bm-toast.is-warn { border-left-color: var(--warn); }
  .bm-toast .bm-toast-msg { flex: 1; }
  .bm-toast-enter-active, .bm-toast-leave-active { transition: opacity .18s ease, transform .18s ease; }
  .bm-toast-enter-from, .bm-toast-leave-to { opacity: 0; transform: translateY(8px); }

  /* finestre (<dialog> nativo: fuoco intrappolato e Esc gratis) */
  dialog.bm-dialog { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); padding: 0;
    width: min(520px, calc(100vw - 24px)); box-shadow: var(--shadow-lg); }
  dialog.bm-dialog::backdrop { background: var(--scrim); }
  .bm-dialog-body { padding: var(--s-5); }
  .bm-dialog-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5) var(--s-5); flex-wrap: wrap; }
  dialog.bm-dialog[open] { animation: bm-pop .16s ease; }
  @keyframes bm-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

  .bm-count { display: inline-block; min-width: 1.4em; padding: 0 .45em; border-radius: 999px; background: var(--signal); color: var(--on-signal); font-size: .78rem; font-weight: 700; line-height: 1.5; text-align: center; }
  .bm-count[hidden] { display: none; }

  .bm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); background: var(--sunk); color: var(--muted); white-space: nowrap; }
  .bm-chip.is-late { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: var(--bad-bg); }
  .bm-chip.is-today { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--warn-bg); }
  .bm-chip.is-ok { color: var(--ok); background: var(--ok-bg); }

  .bm-empty { text-align: center; padding: var(--s-6) var(--s-4); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); }
  .bm-empty .bm-empty-icon { font-size: 2.2rem; display: block; margin-bottom: var(--s-2); }
  .bm-empty strong { color: var(--ink); display: block; margin-bottom: 4px; }

  .bm-skel { background: linear-gradient(90deg, var(--sunk), var(--raised), var(--sunk)); background-size: 200% 100%; border-radius: var(--r-md); height: 1.1rem; animation: bm-shimmer 1.4s linear infinite; }
  @keyframes bm-shimmer { to { background-position: -200% 0; } }

  .bm-progress { height: 8px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); overflow: hidden; }
  .bm-progress > span { display: block; height: 100%; background: var(--signal); border-radius: 999px; transition: width .3s ease; }

  /* cattura veloce (in testata e nella pagina Inbox) */
  .bm-capture { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }
  .bm-capture .form-control { flex: 1 1 14rem; min-width: 0; }
  .bm-capture-btn { white-space: nowrap; }

  /* attività */
  .bm-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
  .bm-task { display: flex; gap: var(--s-3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: background var(--ease), border-color var(--ease); }
  .bm-task:hover { background: var(--raised); }
  .bm-task.is-done .bm-task-title { text-decoration: line-through; color: var(--muted); }
  .bm-task-main { flex: 1 1 12rem; min-width: 0; }
  .bm-task-title { font-weight: 600; overflow-wrap: anywhere; }
  .bm-task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .bm-task-notes { color: var(--muted); font-size: .92rem; margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .bm-task-steps { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); }
  .bm-task-steps li { display: flex; align-items: center; gap: 8px; padding-left: 10px; min-height: 40px; }
  .bm-task-steps .is-done span { text-decoration: line-through; color: var(--muted); }
  .bm-check { flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 55%, var(--line)); background: transparent; display: inline-grid; place-items: center; color: var(--on-signal); cursor: pointer; padding: 0; transition: background var(--ease), border-color var(--ease), transform var(--ease); position: relative; }
  .bm-check::before { content: ""; position: absolute; inset: -10px; } /* area di tocco 48 px */
  .bm-check:hover { border-color: var(--signal); }
  .bm-check.is-on { background: var(--signal); border-color: var(--signal); }
  .bm-check.is-sm { width: 22px; height: 22px; }
  .bm-task-actions { display: flex; gap: 4px; flex: none; }
  .bm-list-move, .bm-list-enter-active, .bm-list-leave-active { transition: all .22s ease; }
  .bm-list-enter-from, .bm-list-leave-to { opacity: 0; transform: translateX(-10px); }
  .bm-list-leave-active { position: absolute; }

  /* la prossima azione */
  .bm-next { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); box-shadow: var(--shadow); padding: var(--s-6) var(--s-5); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 9%, var(--surface)), var(--surface)); }
  .bm-next .bm-next-label { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-2); }
  .bm-next .bm-next-title { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--s-2); overflow-wrap: anywhere; }
  .bm-next .bm-task-meta { justify-content: center; margin-bottom: var(--s-4); }
  .bm-next .bm-actions { justify-content: center; }
  .bm-next-steps { text-align: left; max-width: 420px; margin: var(--s-4) auto 0; }
  .bm-next-enter-active, .bm-next-leave-active { transition: opacity .2s ease, transform .2s ease; }
  .bm-next-enter-from { opacity: 0; transform: translateY(10px); } .bm-next-leave-to { opacity: 0; transform: translateY(-10px); }

  /* selettore dell'aspetto */
  .bm-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
  .bm-theme { position: relative; }
  .bm-theme input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
  .bm-theme label { display: block; border: 2px solid var(--line); border-radius: var(--r-md); padding: 10px; cursor: pointer; background: var(--surface); height: 100%; }
  .bm-theme input:checked + label { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
  .bm-theme input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: 2px; }
  .bm-theme .bm-swatchbar { display: flex; height: 34px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; border: 1px solid rgba(128,128,128,.4); }
  .bm-theme .bm-swatchbar i { flex: 1; }
  .bm-theme strong { display: block; font-size: .95rem; }
  .bm-theme small { color: var(--muted); }

  /* tema Steam: smussi squadrati e rilievo, come in isi_tlc */
  :root[data-theme="steamlegacy"] .bm-card, :root[data-theme="steamlegacy"] .btn { background-image: linear-gradient(180deg, var(--steam-top), var(--steam-bottom)); box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo); }
  :root[data-theme="steamlegacy"] .btn-primary { background-image: none; }
  :root[data-theme="steamlegacy"] .bm-header { border-bottom-style: double; border-bottom-width: 4px; }
  :root[data-theme="stroggos"] body { font-weight: 500; letter-spacing: .01em; }
  :root[data-theme="stroggos"] .bm-card { border-color: #5a4536; box-shadow: inset 0 0 0 1px #000, var(--shadow-sm); }
  :root[data-theme="stroggos"] .bm-header { border-bottom-width: 2px; }
}

/* ============================================================ utilità */
@layer utilities {
  .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bm-center { text-align: center; }
  .bm-nowrap { white-space: nowrap; }
  .bm-mt-0 { margin-top: 0 !important; }
  .bm-hide-sm { display: none; } @media (min-width: 576px) { .bm-hide-sm { display: initial; } }
}

/* ---- aggiunte ai componenti (campo data, mostra password) ---- */
@layer components {
  .bm-capture .bm-date { flex: 0 1 11rem; }
  .bm-reveal { position: relative; display: block; }
  .bm-reveal .form-control { padding-right: 5.5rem; }
  .bm-reveal-btn { position: absolute; right: 4px; top: 4px; min-height: 36px; }
  @media print { .bm-header, .bm-footer, .bm-toasts, .bm-actions, .btn { display: none !important; } .bm-codebox { border: 1px solid #000; } }
}

@layer components {
  .bm-qr { display: inline-block; background: #fff; padding: 12px; border-radius: var(--r-md); line-height: 0; }
  .bm-qr svg { width: min(224px, 70vw); height: auto; }
  .bm-secret { font-size: 1.05rem; letter-spacing: .08em; user-select: all; word-break: break-all; }
}

/* Pulsanti nella testata (barra sempre scura, anche nei temi chiari). Stesso strato di .btn: qui vince la specificità. */
@layer components {
  .bm-header .btn { color: var(--on-bar); border-color: color-mix(in srgb, var(--on-bar) 35%, transparent); background: transparent; }
  .bm-header .btn:hover { background: color-mix(in srgb, var(--on-bar) 12%, transparent); color: var(--on-bar); }
  .bm-header :focus-visible { outline-color: light-dark(#A78BFA, var(--signal)); }
  .bm-header .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
  .bm-header .btn-primary:hover { background: var(--signal); color: var(--on-signal); filter: brightness(.98); }
}

@layer components {
  /* Su schermi stretti il pulsante di cattura è solo «＋» (il nome per i lettori di schermo resta «Cattura al volo») */
  @media (max-width: 459.98px) { .bm-capture-label { display: none; } .bm-brand { font-size: 1rem; } }

  /* Interruttori: forma e colori dal tema (la manopola è un cerchio disegnato con i colori del tema) */
  .form-switch .form-check-input { width: 2.6em; height: 1.45em; border-radius: 2em; margin-left: 0; float: none; flex: none; --knob: color-mix(in srgb, var(--ink) 65%, var(--sunk));
    background-image: radial-gradient(circle at .75em 50%, var(--knob) 0 .5em, transparent .52em); background-repeat: no-repeat; background-size: 100% 100%; transition: background-color var(--ease); }
  .form-switch .form-check-input:checked { --knob: var(--on-signal); background-image: radial-gradient(circle at calc(100% - .75em) 50%, var(--knob) 0 .5em, transparent .52em); }
  .form-switch { display: flex; align-items: flex-start; gap: .75rem; padding-left: 0; }
  .form-switch .form-check-label { padding-left: 0; }
}

@layer components {
  /* Schermi stretti: le azioni di un'attività vanno sotto il titolo, a tutta larghezza */
  @media (max-width: 575.98px) {
    .bm-task { flex-wrap: wrap; }
    .bm-task-main { flex-basis: calc(100% - 48px); }
    .bm-task-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
    .bm-capture .btn { flex: 1 1 auto; }
    .bm-next { padding-inline: var(--s-4); }
    .bm-next .bm-actions .btn-lg { min-height: var(--control-h); font-size: 1rem; }
  }
}

@layer components {
  .pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--raised); --bs-pagination-hover-color: var(--ink);
    --bs-pagination-hover-border-color: var(--line); --bs-pagination-active-bg: var(--signal); --bs-pagination-active-color: var(--on-signal); --bs-pagination-active-border-color: var(--signal);
    --bs-pagination-disabled-bg: var(--sunk); --bs-pagination-disabled-color: var(--muted); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-focus-bg: var(--raised);
    --bs-pagination-focus-color: var(--ink); --bs-pagination-border-radius: var(--r-md); flex-wrap: wrap; gap: 4px; justify-content: center; margin: 0; }
  .pagination .page-link { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
  nav[role="navigation"] .small.text-muted { color: var(--muted) !important; }
}

@layer components {
  .bm-note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .bm-task-title { overflow-wrap: anywhere; }
  .bm-task-actions { flex-wrap: wrap; }
  .bm-condition { border-inline-start: 2px solid var(--bm-border, #777); padding-inline-start: .8rem; }
}

@layer components {
  .bm-sublist { margin-inline-start: var(--s-5); border-inline-start: 3px solid var(--signal); }
  @media (max-width: 575px) { .bm-sublist { margin-inline-start: var(--s-2); } }
}

@layer components {
  :root[data-theme="darkbuggy"] .bm-header { border-bottom-color: var(--signal); box-shadow: 0 1px 0 var(--metal); }
  :root[data-theme="darkbuggy"] .bm-card { border-top-color: var(--metal); box-shadow: inset 0 1px 0 rgba(184,161,247,.15), var(--shadow-sm); }
  :root[data-theme="darkbuggy"] .bm-pagehead h1 { text-shadow: 0 0 12px rgba(100,232,172,.14); }
  :root[data-theme="darkbuggy"] .bm-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--circuit); }
  :root[data-theme="darkbuggy"] .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  :root[data-theme="darkbuggy"][data-contrast="high"] .bm-card { border-color: var(--ink); }
}

@layer components {
 .bm-nav { display:flex; flex:1; gap:12px; align-items:center; flex-wrap:wrap; }
 .bm-nav-items { flex-direction:row; gap:4px; flex-wrap:wrap; }
 .bm-nav-group { position:relative; }
 .bm-nav-group summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
 .bm-nav-group summary::-webkit-details-marker { display:none; }
 .bm-nav-group summary::after { content:"▾"; font-size:.75em; }
 .bm-nav-panel { position:absolute; top:100%; left:0; z-index:1040; min-width:220px; list-style:none; margin:4px 0 0; padding:6px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--raised); color:var(--ink); box-shadow:var(--shadow); }
 .bm-nav-panel-end { left:auto; right:0; }
 .bm-nav-panel .dropdown-item { color:var(--ink); min-height:44px; display:flex; align-items:center; gap:6px; }
 .bm-nav-panel .dropdown-item:hover { background:var(--sunk); color:var(--ink); }
 .bm-nav-panel .dropdown-item[aria-current="page"] { background:var(--signal); color:var(--on-signal); }
 .bm-dashboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); align-items:start; }
 .bm-dashboard .bm-card { min-width:0; margin:0; }
 .bm-dashboard-settings { padding:0; list-style:none; }
 .bm-dashboard-settings li { padding:12px 0; border-bottom:1px solid var(--line); }
 .bm-dashboard-settings label { flex:1; }
 @media(max-width:767px) { .bm-nav { flex-basis:100%; } .bm-nav-items { width:100%; } .bm-nav-panel { position:static; box-shadow:none; } .bm-dashboard { grid-template-columns:1fr; } }
}

/* Struttura condivisa: la testata ha due file deliberate, non dipende dal collasso Bootstrap. */
@layer components {
 :root { --container:1180px; }
 .bm-header-top { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:20px; min-height:76px; padding-block:12px; }
 .bm-header .bm-header-top { flex-wrap:nowrap; }
 .bm-brand { gap:10px; font-size:1.05rem; }
 .bm-brand-sub { display:block; font-size:.69rem; color:var(--muted); font-weight:400; margin-top:2px; letter-spacing:.08em; }
 .bm-header-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-shrink:0; }
 .bm-nav-strip { border-top:1px solid color-mix(in srgb,var(--on-bar) 12%,transparent); }
 .bm-nav-items { display:flex; flex-wrap:wrap; align-items:center; padding:6px 0; margin:0; list-style:none; gap:4px; }
 .bm-nav-items .nav-link { display:flex; align-items:center; gap:8px; min-height:42px; white-space:nowrap; font-size:.9rem; }
 .bm-header .bm-nav-strip .bm-container { display:block; }
 .bm-nav-panel { max-width:min(320px,90vw); }
 .bm-header .bm-who { max-width:220px; }
 .bm-main { padding-top:30px; padding-bottom:48px; }
 .bm-pagehead { gap:20px; align-items:center; margin-bottom:24px; }
 .bm-pagehead h1 { font-size:clamp(1.55rem,2.4vw,2.1rem); letter-spacing:-.03em; line-height:1.2; }
 .bm-eyebrow { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin:0 0 8px; }
 .bm-footer { background:var(--sunk); border-top:1px solid var(--line); margin-top:auto; padding:24px 0; color:var(--muted); text-align:left; }
 .bm-footer-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
 .bm-footer strong { color:var(--ink); font-size:.95rem; }.bm-footer p { font-size:.75rem; margin:7px 0 0; }.bm-footer-motto { font-size:.8rem; max-width:250px; }
 .bm-dashboard { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:18px; }
 .bm-dashboard .bm-card { display:flex; flex-direction:column; min-height:220px; padding:24px; }
 .bm-dashboard .bm-card > h2 { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
 .bm-dashboard .bm-card > a:last-child { margin-top:auto; padding-top:16px; font-size:.85rem; }
 .bm-dashboard .bm-task { padding:10px 0; background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; }
 .bm-dashboard .bm-task-main a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none; }
 .bm-dashboard .bm-card:first-child { border-color:color-mix(in srgb,var(--signal) 50%,var(--line)); }
 .bm-dashboard .bm-card:first-child h3 { font-size:1.15rem; }.bm-dashboard .bm-card > p:first-of-type { font-size:1rem; }
 .bm-knowledge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
 .bm-knowledge-grid .bm-card { min-width:0; display:flex; flex-direction:column; }.bm-knowledge-grid .bm-actions { margin-top:auto; }
 .bm-preview { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); font-size:.9rem; }
 .bm-clean-link { text-decoration:none; color:var(--ink); }.bm-clean-link:hover { color:var(--signal); }
 .bm-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.bm-stat { font-size:clamp(1.15rem,2.4vw,1.9rem); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
 .bm-ledger-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }.bm-ledger-entry .bm-actions { grid-column:1/-1; }
 .bm-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }.bm-toolbar > .form-control { flex:2; min-width:180px; }.bm-toolbar > .form-select { flex:1; min-width:170px; }.bm-toolbar label { flex:1; min-width:160px; }
 .bm-editor-card { max-width:900px; margin-inline:auto; }.bm-writing-field { line-height:1.75; padding:16px; resize:vertical; }
 .bm-chart { height:240px; margin-bottom:20px; }
 .bm-capture-types,.bm-mood-states { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
 .bm-capture-types .btn { border-radius:999px; min-height:40px; }.bm-capture-types .btn[aria-pressed="true"] { background:var(--signal); color:var(--on-signal); border-color:var(--signal); }
 .bm-dialog .bm-writing-field { min-height:200px; }.bm-compose-caption { display:flex; justify-content:space-between; gap:12px; font-size:.78rem; color:var(--muted); }
 .bm-wellbeing-grid { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:22px; align-items:start; }.bm-mood-form-panel { position:sticky; top:155px; }.bm-mood-journal { min-width:0; }
 .bm-mood-entry { position:relative; border-inline-start:3px solid var(--signal); }.bm-mood-entry time { display:block; margin-top:8px; }.bm-mood-entry h3 { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-top:20px; }.bm-mood-entry .bm-note-body { font-size:.94rem; }
 .bm-mood-states .btn[aria-pressed="true"] { border-color:var(--signal); background:color-mix(in srgb,var(--signal) 15%,var(--surface)); }
 .bm-tasks .bm-task-main,.bm-card { overflow-wrap:anywhere; }
 @media(max-width:1000px) { .bm-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); }.bm-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media(max-width:767px) { .bm-header-top { gap:10px; min-height:66px; }.bm-header-tools { gap:8px; }.bm-brand-sub { display:none; }.bm-brand { font-size:.88rem; }.bm-logo { width:30px; height:30px; }.bm-header .bm-who { max-width:100px; }.bm-nav-items { gap:2px; }.bm-nav-items .nav-link { padding:8px 10px; font-size:.83rem; }.bm-nav-panel { position:static; }.bm-wellbeing-grid { grid-template-columns:1fr; }.bm-mood-form-panel { position:static; }.bm-knowledge-grid { grid-template-columns:1fr; }.bm-footer-inner { flex-direction:column; align-items:flex-start; gap:12px; } }
 @media(max-width:480px) { .bm-dashboard { grid-template-columns:1fr; }.bm-brand span { max-width:95px; }.bm-header .bm-who-name { max-width:66px; }.bm-capture-label { display:none; }.bm-main { padding-top:22px; }.bm-ledger-entry { grid-template-columns:1fr; }.bm-stat-grid .bm-card { padding:16px; } }
}
@layer components {
 :root[data-theme="darkbuggy"] body { background:radial-gradient(ellipse at 85% 0%,rgba(100,124,232,.09),transparent 45%),var(--paper); }
 :root[data-theme="darkbuggy"] .bm-header { background:linear-gradient(110deg,#0A101B,#131A2C); border-bottom:1px solid #435675; box-shadow:0 8px 28px rgba(0,0,0,.25); }
 :root[data-theme="darkbuggy"] .bm-nav-link,:root[data-theme="darkbuggy"] .nav-link.active { box-shadow:inset 0 -2px 0 var(--circuit); }
 :root[data-theme="darkbuggy"] .bm-card { background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 97%,var(--circuit)),var(--surface)); border:1px solid #344157; border-top-color:#52637A; box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(220,232,255,.04); }
 :root[data-theme="darkbuggy"] .bm-eyebrow { color:var(--circuit); }:root[data-theme="darkbuggy"] .bm-count { background:var(--circuit); color:#082219; }
 :root[data-theme="darkbuggy"] .bm-footer { background:linear-gradient(110deg,#0B1320,#101A2B); border-top-color:#46506A; }
 :root[data-theme="darkbuggy"] .bm-pagehead h1 { text-shadow:none; }
 :root[data-theme="darkbuggy"] .btn { transition:background .12s,border-color .12s,box-shadow .12s; }
 :root[data-theme="darkbuggy"] .btn-primary { box-shadow:0 4px 16px rgba(150,124,232,.12); }
 :root[data-theme="darkbuggy"][data-contrast="high"] .bm-card { background:var(--surface); border-color:var(--ink); }
 :root[data-motion="reduce"] .btn { transition:none; }
 @media(prefers-reduced-motion:reduce) { :root[data-theme="darkbuggy"] .btn { transition:none; } }
}

@layer components { .bm-header-tools .bm-nav-panel { position:absolute; } }

/* Shell SPA. Geometrie condivise, colori sempre dai token del tema scelto. */
@layer components {
 :root { --bm-sidebar:248px; --bm-topbar:76px; }
 body[data-bm-persona] .bm-topbar { margin-left:var(--bm-sidebar); width:calc(100% - var(--bm-sidebar)); border-bottom:1px solid var(--line); background:var(--bar); box-shadow:none; }
 .bm-topbar .bm-header-top { min-height:var(--bm-topbar); padding-inline:clamp(20px,3vw,44px); }
 .bm-topbar .bm-brand { display:none; }
 .bm-workspace-name { color:var(--on-bar); font-size:.7rem; font-weight:650; letter-spacing:.13em; }.bm-workspace-name span { display:block; font-size:.82rem; font-weight:400; letter-spacing:0; opacity:.7; margin-top:3px; }
 .bm-sidebar { position:fixed; inset:0 auto 0 0; width:var(--bm-sidebar); z-index:1035; color:var(--ink); background:var(--sunk); border-right:1px solid var(--line); }
 .bm-menu-toggle { display:none; }
 .bm-sidebar-panel { height:100%; display:flex; flex-direction:column; padding:24px 16px 12px; }
 .bm-sidebar-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:650; font-size:.96rem; padding:0 4px 24px; }
 .bm-sidebar-brand img { flex-shrink:0; }.bm-sidebar-brand small { display:block; font-size:.68rem; font-weight:400; color:var(--muted); margin-top:3px; }
 .bm-side-nav { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; padding:0 2px; }
 .bm-side-link { display:flex; align-items:center; gap:11px; min-height:42px; padding:9px 12px; margin:3px 0; border:1px solid transparent; border-radius:var(--r-md); color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:500; line-height:1.3; }
 .bm-side-link:hover { color:var(--ink); background:var(--raised); }.bm-side-link[aria-current="page"] { color:var(--ink); border-color:color-mix(in srgb,var(--signal) 35%,var(--line)); background:color-mix(in srgb,var(--signal) 12%,var(--sunk)); box-shadow:inset 3px 0 0 var(--signal); }
 .bm-nav-icon { width:20px; flex-shrink:0; text-align:center; font-size:1.1rem; line-height:1; color:var(--accent); }.bm-side-link .bm-count { margin-left:auto; }
 .bm-side-group { margin-top:16px; }.bm-side-group > summary { display:flex; justify-content:space-between; align-items:center; padding:5px 12px; color:var(--muted); font-size:.67rem; font-weight:650; text-transform:uppercase; letter-spacing:.11em; list-style:none; cursor:pointer; min-height:34px; }.bm-side-group > summary::-webkit-details-marker { display:none; }.bm-side-group[open] > summary span { transform:rotate(180deg); }
 .bm-side-divider { height:1px; background:var(--line); margin:20px 12px 12px; }
 .bm-sidebar-bottom { border-top:1px solid var(--line); padding-top:8px; margin-top:12px; }.bm-sidebar-bottom p { font-size:.66rem; line-height:1.6; color:var(--muted); padding:8px 12px 0; }
 .bm-menu-backdrop { display:none; }
 body[data-bm-persona] .bm-main { width:calc(100% - var(--bm-sidebar)); max-width:none; margin-left:var(--bm-sidebar); margin-right:0; padding:36px clamp(20px,3vw,44px) 48px; }
 body[data-bm-persona] .bm-footer { margin-left:var(--bm-sidebar); border-top:1px solid var(--line); padding:20px 0; }.bm-footer .bm-container { padding-inline:clamp(20px,3vw,44px); max-width:none; }.bm-footer-motto { color:var(--muted); font-size:.73rem; }
 .bm-pagehead { margin-bottom:28px; }.bm-pagehead .bm-sub { max-width:65ch; line-height:1.6; font-size:.9rem; margin-top:8px; }
 .bm-card { border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 3px 12px rgba(0,0,0,.08); }
 .bm-dashboard { gap:18px; }.bm-dashboard > .bm-card { min-height:190px; padding:22px; }.bm-dashboard .bm-card > h2 { color:var(--muted); letter-spacing:.08em; }
 .bm-dashboard .bm-task-main a { color:var(--ink); font-size:.9rem; line-height:1.6; }.bm-dashboard .bm-task-main a:hover { color:var(--accent); }.bm-dashboard .bm-card > a:last-child { text-decoration:none; padding:16px 0 0; color:var(--accent); }.bm-dashboard .bm-card > a:last-child::after { content:' →'; }
 .bm-task { min-width:0; }.bm-task-main { min-width:0; }.bm-task-actions,.bm-actions { flex-wrap:wrap; }.bm-task-title { overflow-wrap:anywhere; }
 .bm-table-scroll { overflow-x:auto; max-width:100%; border-radius:var(--r-md); margin-bottom:16px; }.bm-table-scroll table { margin-bottom:0; }.bm-table-scroll:focus-visible { outline-offset:3px; }
 .bm-form,.bm-editor-card { max-width:880px; }.bm-form input,.bm-form select,.bm-form textarea { max-width:100%; }.bm-tabs { flex-wrap:wrap; gap:6px; }
 .bm-routing .bm-route-progress { position:fixed; top:0; left:var(--bm-sidebar); right:0; height:3px; background:var(--signal); z-index:1100; }
 .bm-routing #contenuto { opacity:.65; cursor:progress; }.bm-routing #contenuto form[data-bm-submitting] { pointer-events:none; }
 #contenuto { scroll-margin-top:calc(var(--bm-topbar) + 16px); }#contenuto [id] { scroll-margin-top:calc(var(--bm-topbar) + 16px); }
 @media(min-width:1600px) { body[data-bm-persona] .bm-main > * { max-width:1360px; margin-inline:auto; } }
 @media(max-width:1200px) { .bm-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); }.bm-wellbeing-grid { grid-template-columns:1fr; }.bm-mood-form-panel { position:static; } }
 @media(max-width:900px) {
  :root { --bm-topbar:68px; }
  body[data-bm-persona] .bm-topbar { margin-left:0; width:100%; z-index:1040; }.bm-topbar .bm-header-top { padding:10px 16px 10px 62px; min-height:var(--bm-topbar); }.bm-topbar .bm-brand { display:flex; }.bm-workspace-name { display:none; }.bm-topbar .bm-brand-sub { display:none; }.bm-topbar .bm-brand { font-size:.86rem; }.bm-topbar .bm-logo { width:28px; height:28px; }.bm-header .bm-who { max-width:120px; }
  .bm-sidebar { position:static; width:auto; height:0; border:0; background:transparent; }
  .bm-menu-toggle { display:flex; align-items:center; justify-content:center; position:fixed; top:14px; left:14px; z-index:1050; width:40px; height:40px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--sunk); color:var(--ink); list-style:none; cursor:pointer; }.bm-menu-toggle::-webkit-details-marker { display:none; }
  .bm-sidebar-panel { position:fixed; top:calc(var(--bm-topbar) + 10px); left:12px; bottom:16px; width:min(320px,calc(100vw - 24px)); height:auto; padding:20px 14px 12px; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); background:var(--sunk); z-index:1040; }
  .bm-sidebar:not([open]) .bm-sidebar-panel { display:none; }.bm-sidebar-brand { padding-bottom:18px; }.bm-menu-open { overflow:hidden; }.bm-menu-open .bm-menu-backdrop { display:block; position:fixed; inset:var(--bm-topbar) 0 0; background:rgba(0,0,0,.5); z-index:1036; }.bm-menu-open .bm-footer { pointer-events:none; }
  body[data-bm-persona] .bm-main { width:100%; margin:0; padding:28px 20px 36px; }body[data-bm-persona] .bm-footer { margin-left:0; }.bm-footer .bm-container { padding-inline:20px; }.bm-routing .bm-route-progress { left:0; }.bm-header-tools { gap:8px; }
 }
 @media(max-width:600px) {
  .bm-topbar .bm-header-top { padding-left:58px; padding-right:12px; gap:8px; }.bm-topbar .bm-brand span { max-width:90px; }.bm-topbar .bm-logo { display:none; }.bm-header .bm-who { max-width:100px; }.bm-header .bm-who-name { max-width:56px; }.bm-capture-label { display:none; }
  body[data-bm-persona] .bm-main { padding:24px 16px 32px; }.bm-pagehead { flex-direction:column; align-items:flex-start; gap:14px; }.bm-pagehead > .btn { align-self:flex-start; }.bm-pagehead h1 { font-size:1.65rem; }.bm-dashboard { grid-template-columns:1fr; gap:14px; }.bm-dashboard > .bm-card { min-height:160px; }.bm-card { padding:18px; }.bm-actions { gap:8px; }.bm-task { flex-wrap:wrap; }.bm-task-actions { width:100%; justify-content:flex-start; margin-left:0; padding-top:8px; }.bm-actions .btn,.bm-task-actions .btn { min-height:42px; }.bm-footer-motto { display:none; }.bm-stat { font-size:1.35rem; }
 }
 :root[data-theme="darkbuggy"] .bm-sidebar { background:linear-gradient(180deg,#0B1320,#0A101B); border-right-color:#344157; }
 :root[data-theme="darkbuggy"] .bm-sidebar-panel { background:transparent; }:root[data-theme="darkbuggy"] .bm-topbar { background:color-mix(in srgb,var(--bar) 94%,var(--surface)); border-bottom-color:var(--line); }
 :root[data-theme="darkbuggy"] .bm-side-link[aria-current="page"] { background:linear-gradient(100deg,rgba(173,154,255,.15),rgba(141,190,255,.04)); border-color:#524D76; box-shadow:inset 3px 0 0 var(--signal); }:root[data-theme="darkbuggy"] .bm-nav-icon { color:var(--circuit); }
 :root[data-theme="darkbuggy"] .bm-card { box-shadow:0 8px 24px rgba(0,0,0,.15); }:root[data-theme="darkbuggy"] .bm-sidebar-brand img { filter:drop-shadow(0 0 9px rgba(173,154,255,.14)); }
 @media(max-width:900px) { :root[data-theme="darkbuggy"] .bm-sidebar-panel { background:var(--sunk); } }
 :root[data-contrast="high"] .bm-side-link { color:var(--ink); }:root[data-contrast="high"] .bm-side-link[aria-current="page"] { background:var(--signal); color:var(--on-signal); border-color:var(--ink); }:root[data-contrast="high"] .bm-side-link[aria-current="page"] .bm-nav-icon { color:inherit; }
 @media(prefers-reduced-motion:reduce) { .bm-side-link,.bm-routing #contenuto { transition:none; } }
}

@layer components { @media(max-width:900px) { .bm-js .bm-sidebar:not([data-bound]) .bm-sidebar-panel { display:none; } } }