/* =========================================================
   PageForge — sistema visivo
   Dominante: verde petrolio #122e3a
   Type: Libre Caslon Text (titoli) · Exo 2 (testo/UI)
   Tutto ad angoli vivi. Niente ombre sui tasti.
   ========================================================= */

:root {
  /* ---- Scala petrolio (famiglia cromatica unica) ---- */
  --petrol-900: #0b1c25;   /* più scuro del brand */
  --petrol-800: #102733;
  --petrol-700: #122e3a;   /* COLORE DOMINANTE (dato dall'utente) */
  --petrol-600: #1a4150;
  --petrol-500: #235566;
  --petrol-400: #356f80;
  --accent:     #1f8194;   /* teal acceso: highlight "PDF", link */
  --accent-600: #1a6f80;

  /* ---- TEMA LIGHT (default) ---- */
  --bg:            #f0f4f5;   /* leggerissima velatura di petrolio */
  --bg-tint:       #e7eef0;   /* velatura un filo più marcata */
  --surface:       #ffffff;
  --surface-2:     #f7fafa;
  --line:          #d7e0e2;
  --line-soft:     #e4ebec;

  --text:          #122e3a;   /* titoli / testo forte */
  --text-body:     #3f5560;   /* paragrafi */
  --text-muted:    #6f8590;   /* secondario */
  --text-faint:    #93a6ae;   /* istruzioni mono */

  --primary:       #122e3a;
  --primary-hover: #0b1c25;   /* -10% luminosità */
  --on-primary:    #ffffff;

  /* drop area */
  --drop-bg:       #e9eff1;
  --drop-bg-hover: #d8e2e5;   /* ~ -10% */
  --drop-border:   #c5d2d6;

  /* misure */
  --maxw: 1180px;
  --tap: 44px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
  --bg:            #0c1c24;
  --bg-tint:       #0f242e;
  --surface:       #122e3a;   /* il dominante diventa la superficie */
  --surface-2:     #16363f;
  --line:          #1f4350;
  --line-soft:     #1a3b47;

  --text:          #eef4f5;
  --text-body:     #b6c7cd;
  --text-muted:    #87a0a9;
  --text-faint:    #6a838d;

  --primary:       #2b6b7b;   /* su scuro serve un petrolio più luminoso */
  --primary-hover: #347d8f;   /* +10% */
  --on-primary:    #f3fafb;

  --accent:        #44a7ba;
  --accent-600:    #5bb8c9;

  --drop-bg:       #102b35;
  --drop-bg-hover: #163844;   /* +10% su scuro */
  --drop-border:   #244c59;
}

/* ===================== icone (Material Symbols Outlined) ===================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-size: 22px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* dimensioni per contesto */
.theme-toggle .material-symbols-outlined { font-size: 20px; }
.btn .material-symbols-outlined { font-size: 19px; }
.btn.lg .material-symbols-outlined { font-size: 21px; }
.pill .material-symbols-outlined { font-size: 18px; }
.dropzone .dz-ico .material-symbols-outlined { font-size: 18px; }
.dz-file .fx .material-symbols-outlined { font-size: 16px; }
.tool-ico .material-symbols-outlined { font-size: 24px; }
.cat-head .tool-ico .material-symbols-outlined { font-size: 26px; }
.link-arrow .material-symbols-outlined { font-size: 17px; }

/* ===================== base ===================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* sopprime le transizioni durante il cambio tema (evita il bug var()+transition di Chrome) */
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

h1, h2, h3, h4 {
  font-family: "Libre Caslon Text", Georgia, serif;
  color: var(--text);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

.mono {
  font-family: "Exo 2", monospace;
  font-feature-settings: "tnum";
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* fondino soffuso statico (versione "ferma" dell'effetto home), su tutte le
   pagine TRANNE la home — che ha il campo di particelle animato. */
body:not(.is-home)::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 16% 16%, rgba(31, 129, 148, .10), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(53, 111, 128, .09), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(91, 185, 125, .07), transparent 28%);
}
[data-theme="dark"] body:not(.is-home)::before {
  background:
    radial-gradient(circle at 16% 16%, rgba(68, 167, 186, .12), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(53, 111, 128, .14), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(91, 185, 125, .08), transparent 28%);
}

.accent { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ===================== header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 70px;
  transition: height .4s var(--ease);
}

/* --- header condensato durante lo scroll --- */
.site-header .nav,
.site-header .header-right {
  transition: opacity .28s var(--ease), transform .4s var(--ease);
}
.site-header .brand .word {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .28s var(--ease), max-width .4s var(--ease),
              margin-left .4s var(--ease);
}
.site-header.is-condensed .wrap { height: 50px; }
.site-header.is-condensed .brand .word {
  opacity: 0;
  max-width: 0;
  margin-left: -12px;
}
.site-header.is-condensed .nav,
.site-header.is-condensed .header-right {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .wrap,
  .site-header .nav,
  .site-header .header-right,
  .site-header .brand .word { transition: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 8px;
}
.brand .mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--primary) 14%, transparent) 0 5px,
      transparent 5px 10px),
    var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: .12em;
}
.brand .word {
  font-family: "Exo 2", sans-serif;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand .word b { font-weight: 700; }
.brand .word span { font-weight: 400; }

.nav {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 17px;
  font-size: 14.5px;
  color: var(--text-body);
}
.nav a { position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav a:hover { color: var(--accent); }
/* megamenu Strumenti */
.nav-mega { position: relative; display: inline-flex; align-items: center; }
.nav-mega-btn { font-family: inherit; font-size: 15px; color: var(--text-body); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 4px 0; }
.nav-mega-btn .material-symbols-outlined { font-size: 18px; transition: transform .2s var(--ease); }
.nav-mega-btn:hover { color: var(--accent); }
.nav-mega:hover .nav-mega-btn .material-symbols-outlined { transform: rotate(180deg); }
.mega-panel { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 540px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 14px; display: none; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-mega:hover .mega-panel, .nav-mega:focus-within .mega-panel { display: grid; }
.mega-panel a { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; color: var(--text); }
.mega-panel a:hover { background: var(--bg-tint); }
.mega-panel a .material-symbols-outlined { color: var(--accent); font-size: 22px; flex: none; }
.mega-panel .mt b { font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 700; display: block; }
.mega-panel .mt .d { font-size: 12px; color: var(--text-muted); }
.mega-panel .mega-flow { grid-column: 1 / -1; background: var(--primary-soft); }
@media (max-width: 980px) { .mega-panel { min-width: 320px; } }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* toggle tema */
.theme-toggle {
  width: 40px; height: 40px;
  padding: 0; border-radius: 0;
  flex: none;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-body);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { background: var(--bg-tint); }
.theme-toggle svg { width: 18px; height: 18px; }
/* le icone riempiono il bottone e centrano il glifo (fix centratura Material Symbols) */
.theme-toggle .i-moon, .theme-toggle .i-sun { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 1; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: flex; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ===================== tasti ===================== */
.btn {
  font-family: "Exo 2", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  min-height: var(--tap);
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  /* angoli vivi, niente ombra */
  border-radius: 0;
  box-shadow: none;
  transition: background .18s var(--ease), transform .08s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: var(--primary-hover); }      /* +/-10% */
.btn:active { transform: scale(.97); }                 /* animazione click */
/* feedback al rollover su tutti i pulsanti */
.btn:hover, .pill:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(11,28,37,.12); }
[data-theme="dark"] .btn:hover, [data-theme="dark"] .pill:hover { box-shadow: 0 5px 16px rgba(0,0,0,.4); }

.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn.ghost:hover {
  background: var(--bg-tint);
  border-color: var(--text-muted);
}

.btn.lg { font-size: 17px; min-height: 52px; padding: 0 30px; }
.btn .ico { width: 17px; height: 17px; }

/* link freccia */
.link-arrow {
  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover { gap: 10px; color: var(--accent-600); }

/* ===================== DROP AREA ===================== */
/* proprietà animabile per il riempimento che nasce dall'icona */
@property --reveal {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
/* rettangolo angoli vivi · niente tratteggio · icona quadrata + scritte in
   basso a sinistra · riempimento "reveal" che nasce dall'icona · angoli che si
   arrotondano a fine corsa. Markup legacy `.dropzone > .icon/.title/.subtitle/.hint`,
   usato da TUTTE le pagine-strumento e dall'editor (classe attiva: .drag-over). */
.dropzone {
  position: relative; display: grid;
  grid-template-columns: auto 1fr;
  align-content: end; justify-items: start;
  gap: 0 14px;
  width: 100%; min-height: 200px; padding: 22px;
  background: var(--drop-bg); border: 1px solid var(--drop-border);
  border-radius: 0; cursor: pointer; overflow: hidden; text-align: left;
  transition: border-color .25s var(--ease),
              border-radius .55s cubic-bezier(.22, 1.42, .4, 1);
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--text-muted); border-radius: 22px; }
.dropzone::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--drop-bg-hover); --reveal: 0px;
  -webkit-mask: radial-gradient(circle at 39px calc(100% - 39px), #000 var(--reveal), transparent calc(var(--reveal) + 80px));
          mask: radial-gradient(circle at 39px calc(100% - 39px), #000 var(--reveal), transparent calc(var(--reveal) + 80px));
  transition: --reveal .26s cubic-bezier(.4, 0, .2, 1);
}
.dropzone:hover::before, .dropzone.drag-over::before { --reveal: 1200px; }
@media (prefers-reduced-motion: reduce) { .dropzone, .dropzone::before { transition: none; } }
.dropzone > * { position: relative; z-index: 1; }
.dropzone .icon {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 34px; height: 34px; margin: 0; border-radius: 0;
  background: var(--primary); display: grid; place-items: center;
  transition: background .25s var(--ease);
}
.dropzone:hover .icon, .dropzone.drag-over .icon { background: var(--petrol-400); transform: none; }
[data-theme="dark"] .dropzone:hover .icon,
[data-theme="dark"] .dropzone.drag-over .icon { background: var(--accent); }
.dropzone .icon svg { width: 16px; height: 16px; stroke: var(--on-primary); }
.dropzone .title {
  grid-column: 2; grid-row: 1; align-self: end; margin: 0;
  font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 600; color: var(--text);
}
.dropzone .subtitle {
  grid-column: 2; grid-row: 2; align-self: start;
  font-family: "Exo 2", ui-monospace, monospace; font-size: 12px; color: var(--text-faint); letter-spacing: .02em;
}
/* invito al clic, uguale su tutte le dropzone, a fianco del titolo (font del titolo) */
.dropzone .title::after {
  content: " · oppure clicca per selezionarlo";
  font-weight: 400; color: var(--text-muted);
}
.dropzone .hint { display: none; }
.dropzone input[type=file] { display: none; }
/* l'attributo hidden deve avere la precedenza sul display:grid qui sopra */
.dropzone[hidden] { display: none; }

/* stato file caricato */
.dz-files {
  margin-top: 22px;
  display: none;
  flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.dz-files.show { display: flex; }
.dz-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
}
.dz-file .fx { width: 26px; height: 26px; flex:none; display:grid; place-items:center; background: var(--bg-tint); color: var(--accent); }
.dz-file .fx svg { width: 14px; height: 14px; }
.dz-file .meta { color: var(--text-faint); font-size: 12px; margin-left: auto; }

/* ===================== card / superfici ===================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 26px;
}

.eyebrow {
  font-family: "Exo 2", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag {
  font-family: "Exo 2", sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 3px 7px;
}

/* divisore */
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ===================== footer ===================== */
.site-footer {
  background: var(--petrol-700);
  color: #cdd9dd;
  margin-top: 96px;
}
[data-theme="dark"] .site-footer { background: var(--petrol-900); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 32px;
}
.foot-brand .word { color: #fff; }
.foot-brand p { color: #93a8ae; font-size: 14px; margin-top: 14px; max-width: 240px; }
.foot-col h5 {
  font-family: "Exo 2", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f878e;
  margin: 0 0 16px;
}
.foot-col a {
  display: block;
  font-size: 14px;
  color: #c2d0d4;
  padding: 5px 0;
  transition: color .18s var(--ease);
}
.foot-col a:hover { color: #fff; }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
  color: #7d9298;
}

/* ===================== pill filtri / segmented ===================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pill {
  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-body);
  cursor: pointer;
  border-radius: 0;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .08s var(--ease);
}
.pill:hover { background: var(--bg-tint); }
.pill:active { transform: scale(.97); }
.pill.is-on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pill .ico { width: 15px; height: 15px; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--surface);
}
.seg button {
  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  background: transparent;
  border: 0;
  color: var(--text-body);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .08s var(--ease);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--bg-tint); }
.seg button:active { transform: scale(.97); }
.seg button.is-on { background: var(--primary); color: var(--on-primary); }

/* input testo (pagina strumento) */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }
.field input {
  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 0;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* tool icon box */
.tool-ico {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  background: var(--bg-tint);
  color: var(--accent);
}
.tool-ico svg { width: 21px; height: 21px; }

/* ===================== utilità ===================== */
.center { text-align: center; }
.section { padding: 72px 0; }

@media (max-width: 820px) {
  .nav { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 20px; }
}

/* =========================================================
   PageForge — marchio reale (icona + scritta), aggiunto al
   design handoff. Sostituisce i segnaposto "logo" mono.
   ========================================================= */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px; position: relative;
  flex: none; overflow: hidden;
  background: linear-gradient(150deg, var(--accent), var(--petrol-900));
}
.logo-mark::before { /* corpo pagina */
  content: ""; position: absolute; inset: 8px 9px 7px 8px;
  background: #fff; border-radius: 2px 5px 2px 2px;
  clip-path: polygon(0 0, 64% 0, 100% 34%, 100% 100%, 0 100%);
}
.logo-mark::after { /* angolo piegato */
  content: ""; position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; background: var(--accent);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.logo-word {
  font-family: "Exo 2", sans-serif; font-size: 21px;
  letter-spacing: -.01em; color: var(--text); font-weight: 400;
}
.logo-word b { font-weight: 700; color: var(--accent); }
/* header: la scritta usa .word (animazione condense) ma "Forge" resta accent */
.brand .word b { color: var(--accent); }
/* nel footer petrolio scuro il marchio va in chiaro */
.site-footer .logo-word { color: #fff; }
.site-footer .logo-word b { color: var(--accent); }
/* variante piccola (es. topbar editor) */
.logo-sm .logo-mark { width: 28px; height: 28px; border-radius: 7px; }
.logo-sm .logo-word { font-size: 17px; }

/* ===================== icone lucide (tile) ===================== */
[data-lucide] { width: 20px; height: 20px; stroke-width: 1.9; display: inline-block; }

/* =========================================================
   Home — tile moduli (mantenute come adesso, mappate sui
   token del nuovo design). Render da tools-data.js in #grid.
   ========================================================= */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module-card {
  position: relative; overflow: hidden;
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 26px;
  display: flex; gap: 22px; align-items: flex-start; color: inherit;
  transition: border-color .25s var(--ease);
}
/* effetto luce di sfondo: riempimento che nasce da sinistra (come il drag&drop) */
.module-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); --reveal: 0px;
  -webkit-mask: radial-gradient(circle at 48px 50%, #000 var(--reveal), transparent calc(var(--reveal) + 140px));
          mask: radial-gradient(circle at 48px 50%, #000 var(--reveal), transparent calc(var(--reveal) + 140px));
  transition: --reveal .42s cubic-bezier(.4, 0, .2, 1);
}
.module-card:hover::before { --reveal: 1500px; }
.module-card > * { position: relative; z-index: 1; }
.module-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .module-card::before { transition: none; } }
/* tile disabilitata (es. IA): visibile ma con velo non cliccabile */
.module-card.is-disabled { cursor: not-allowed; }
.module-card.is-disabled::before { display: none; }
.module-card.is-disabled:hover { border-color: var(--line); }
.module-card .m-veil { position: absolute; inset: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: saturate(.5) blur(.5px); display: flex; align-items: flex-start; justify-content: flex-end; }
.module-card .m-veil-tag { margin: 16px 18px; font-family: "Exo 2", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); background: var(--surface); border: 1px solid var(--line); padding: 4px 11px; border-radius: 999px; }
.module-card > .tile {
  width: 54px; height: 54px; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.module-card > .tile [data-lucide] { width: 25px; height: 25px; stroke-width: 2; }
.m-body { flex: 1; min-width: 0; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.m-head h4 {
  font-family: "Exo 2", sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.m-open {
  font-family: "Exo 2", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--accent); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.m-open [data-lucide] { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.module-card:hover .m-open [data-lucide] { transform: translate(2px, -2px); }
.module-card > .m-body > p { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.module-feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 4px 26px; margin-top: 14px;
}
.feat { font-size: 12.5px; line-height: 1.45; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.feat b { color: var(--text); font-weight: 600; font-family: "Exo 2", sans-serif; }
.feat span { color: var(--text-muted); }
.feat.is-soon i {
  font-style: normal; font-family: "Exo 2", monospace; font-size: 8.5px;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-tint); color: var(--text-muted);
  padding: 1px 5px; border-radius: 5px; margin-left: 5px; vertical-align: middle;
}
.badge-new {
  font-family: "Exo 2", sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--accent); background: var(--bg-tint);
  padding: 3px 7px; border-radius: 6px; text-transform: uppercase;
}
/* colori-categoria delle tile icona */
.tile.t-primary { background: var(--bg-tint); color: var(--accent); }
.tile.t-yellow  { background: #FDF2DE; color: #B07A12; }
.tile.t-green   { background: #E6F4EC; color: #2E8B57; }
.tile.t-red     { background: #FBE7E3; color: #E04C3C; }
.tile.t-teal    { background: #E1F4F6; color: #1B8F9B; }
.tile.t-violet  { background: #ECEAF8; color: #6B5BD2; }
.tile.t-blue    { background: #E4EDFB; color: #2E5FB0; }
[data-theme="dark"] .tile.t-yellow { background: #322713; }
[data-theme="dark"] .tile.t-green  { background: #16321F; }
[data-theme="dark"] .tile.t-red    { background: #34201C; }
[data-theme="dark"] .tile.t-teal   { background: #133035; }
[data-theme="dark"] .tile.t-violet { background: #221F33; }
[data-theme="dark"] .tile.t-blue   { background: #182539; }

@media (max-width: 600px) {
  .module-card { flex-direction: column; gap: 14px; padding: 18px; }
  .module-feats { grid-template-columns: 1fr; }
}

/* =========================================================
   COMPAT — nomi token/classi dell'ex pageforge.css rimappati
   sul nuovo design. Permette alle pagine-strumento di adottare
   la nuova grafica caricando solo styles.css (+ tools.css /
   blocco compat inline dell'editor) senza riscrivere i markup.
   I --fg-* sono LETTERALI (non var) per evitare cicli con i
   blocchi inline che fanno `--text: var(--fg-1)`.
   ========================================================= */
:root {
  --ink-deep:       var(--petrol-900);
  --primary-press:  var(--petrol-900);
  --primary-soft:   color-mix(in srgb, var(--accent) 12%, var(--surface));

  --fg-1: #122e3a;  --fg-2: #3f5560;  --fg-3: #6f8590;
  --rule: var(--line);
  --surface-warm: var(--surface-2);

  --c-yellow: #F5B335; --c-green: #5BB97D; --c-red: #E04C3C; --c-teal: var(--accent);
  --tint-primary: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --tint-yellow: #FDF2DE; --tint-green: #E6F4EC; --tint-red: #FBE7E3;
  --tint-teal: #E1F4F6; --tint-violet: #ECEAF8; --accent-violet: #6B5BD2;
  --success: #2E8B57; --warning: #C8881A; --danger: #C9382A; --info: var(--accent);

  --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px;
  --shadow-sm: 0 1px 2px rgba(11,28,37,.05);
  --shadow-md: 0 6px 18px rgba(11,28,37,.08);
  --shadow-lg: 0 18px 50px rgba(11,28,37,.14);
  --shadow-primary: none;

  --font-display: "Libre Caslon Text", Georgia, serif;
  --font-body:    "Exo 2", system-ui, sans-serif;
  --font-mono:    "Exo 2", ui-monospace, monospace;
}
[data-theme="dark"] {
  --fg-1: #eef4f5; --fg-2: #b6c7cd; --fg-3: #87a0a9;
  --primary-soft:  color-mix(in srgb, var(--accent) 22%, var(--surface));
  --tint-primary:  color-mix(in srgb, var(--accent) 22%, var(--surface));
  --tint-yellow: #322713; --tint-green: #16321F; --tint-red: #34201C;
  --tint-teal: #133035; --tint-violet: #221F33;
}

/* sezione "Come si usa" (passaggi numerati) — condivisa fra le pagine-strumento */
.org-help { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 26px; }
.org-help h2 { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: 18px; margin: 0 0 16px; color: var(--text); }
.org-steps { display: flex; flex-direction: column; gap: 12px; }
.org-step { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.org-step .ic { width: 34px; height: 34px; flex: none; background: var(--bg-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.org-step .ic [data-lucide] { width: 18px; height: 18px; }
.org-step-txt { flex: 1; min-width: 0; }
.org-step-txt b { display: block; font-family: "Exo 2", sans-serif; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.org-step-txt p { font-size: 12.5px; color: var(--text-body); line-height: 1.45; }

/* layout / utilità legacy */
.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* bottoni legacy (.btn-*) — look nuovo (angoli vivi, niente ombre) */
.btn-primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); box-shadow: none; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg-tint); border-color: var(--text-muted); }
.btn-soft { background: var(--bg-tint); color: var(--accent); border: 1px solid var(--line); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 16.5px; }

/* chip filtri legacy → look pill */
.chip {
  font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-body);
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover { background: var(--bg-tint); }
.chip.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip [data-lucide] { width: 15px; height: 15px; }

/* tile icona base (i colori .t-* sono definiti sopra) */
.tile { width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.tile [data-lucide] { width: 21px; height: 21px; }

/* lang switcher (i18n) */
.lang-switcher { display: flex; gap: 2px; margin-right: 4px; }
.lang-btn {
  font-family: "Exo 2", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 8px; border: 1px solid transparent; cursor: pointer; background: transparent; color: var(--text-muted);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.lang-btn:hover { background: var(--bg-tint); color: var(--text); }
.lang-btn.active { background: var(--bg-tint); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }