/* ============================================================
   LAVORI24 — DESIGN SYSTEM CONDIVISO ("Liquid Cosmos")
   Fonte di verità UNICA del look della suite. Ogni app importa
   questo file e usa le classi/variabili l24-* per avere tutte le
   pagine con lo stesso stile della home lavori24.it.

   Uso:  <link rel="stylesheet" href="/shared/l24-suite.css">
         <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   Sfondo: <div class="l24-cosmos"></div> come primo figlio del body.
   Classi namespaced l24- per non entrare in conflitto col CSS esistente.
   ============================================================ */

:root {
  /* palette */
  --l24-bg-deep:#05030d; --l24-bg-night:#080b1f; --l24-bg-indigo:#15113a;
  --l24-violet:#4c1d95; --l24-amethyst:#8b5cf6; --l24-lavender:#c4b5fd; --l24-neon:#b79cff;
  --l24-gold:#f5c542; --l24-gold-soft:#ffe8a3; --l24-copper:#d98f43;
  --l24-ui:#f8fafc; --l24-muted:rgba(248,250,252,0.74); --l24-faint:rgba(248,250,252,0.55);
  /* vetro */
  --l24-glass-bg:rgba(255,255,255,0.06); --l24-glass-bg-strong:rgba(255,255,255,0.09);
  --l24-glass-border:rgba(255,255,255,0.14); --l24-glass-hi:rgba(255,255,255,0.20);
  /* forma + tipografia */
  --l24-r:20px; --l24-r-card:26px; --l24-r-pill:999px;
  --l24-sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  /* gradienti tinta per app/icone */
  --l24-grad-gold:linear-gradient(150deg,#f5c542,#d99a2e 70%,#6e4d12);
  --l24-grad-amethyst:linear-gradient(150deg,#a78bfa,#6d28d9 70%,#2a1140);
  --l24-grad-indigo:linear-gradient(150deg,#818cf8,#4338ca 70%,#1e1b4b);
  --l24-grad-copper:linear-gradient(150deg,#fbbf6b,#d98f43 70%,#6b3a14);
}

/* base (opzionale: applica .l24 al body o usa le classi singole) */
.l24-base { color: var(--l24-ui); background: var(--l24-bg-deep);
  font-family: var(--l24-sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }

/* ---- SFONDO astratto Liquid Cosmos ---- */
.l24-cosmos { position: fixed; inset: 0; z-index: -3; overflow: hidden;
  background:
    radial-gradient(40% 52% at 82% 14%, rgba(139,92,246,0.28), transparent 60%),
    radial-gradient(30% 40% at 90% 88%, rgba(245,197,66,0.10), transparent 60%),
    radial-gradient(48% 60% at 8% 96%, rgba(76,29,149,0.26), transparent 64%),
    linear-gradient(150deg, #05030d 0%, #080b1f 44%, #15113a 100%); }
.l24-cosmos::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(130% 120% at 50% 42%, transparent 58%, rgba(5,3,13,0.5) 100%); }

/* ---- VETRO ---- */
.l24-glass { background: var(--l24-glass-bg); border: 1px solid var(--l24-glass-border);
  box-shadow: inset 0 1px 0 var(--l24-glass-hi), 0 20px 60px rgba(0,0,0,0.32);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }

/* ---- NAV flottante ---- */
.l24-nav { display:flex; align-items:center; justify-content:space-between; gap:16px;
  width: min(1240px, calc(100vw - 36px)); margin: 16px auto 0; padding: 10px 14px;
  border-radius: var(--l24-r-pill); background: var(--l24-glass-bg); border:1px solid var(--l24-glass-border);
  box-shadow: inset 0 1px 0 var(--l24-glass-hi), 0 20px 60px rgba(0,0,0,0.4); backdrop-filter: blur(24px) saturate(140%); }
.l24-brand { display:inline-flex; align-items:center; gap:11px; color: var(--l24-ui); }
.l24-brand-mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background: var(--l24-grad-amethyst); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(139,92,246,0.4); }
.l24-brand b { font-weight:700; letter-spacing:0.06em; font-size:15px; } .l24-brand b span { color: var(--l24-gold-soft); }

/* ---- BOTTONI ---- */
.l24-btn, .l24-btn-gold, .l24-btn-ghost { border:0; min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; border-radius: var(--l24-r-pill); padding:0 20px; font-weight:600; font-size:14px;
  font-family: var(--l24-sans); cursor:pointer; transition: transform .2s, box-shadow .2s, border-color .2s; text-decoration:none; }
.l24-btn-gold { color:#1c1206; background: linear-gradient(135deg, var(--l24-gold-soft), var(--l24-gold) 45%, #c39433);
  box-shadow: 0 14px 36px rgba(232,198,106,0.26), inset 0 1px 0 rgba(255,255,255,0.5); }
.l24-btn-gold:hover { transform: translateY(-2px); }
.l24-btn-ghost { background: rgba(255,255,255,0.06); border:1px solid var(--l24-glass-border); color: var(--l24-ui); }
.l24-btn-ghost:hover { border-color: rgba(196,181,253,0.5); }

/* ---- TIPOGRAFIA / ETICHETTE ---- */
.l24-eyebrow { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius: var(--l24-r-pill);
  background: rgba(255,255,255,0.05); border:1px solid var(--l24-glass-border); color: var(--l24-neon);
  font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }
.l24-h1 { margin:0; font-family: var(--l24-sans); font-weight:700; font-size:clamp(2.2rem,5.4vw,4rem);
  line-height:1.02; letter-spacing:-0.05em;
  background: linear-gradient(118deg,#fff,#ECE9FF 46%, var(--l24-lavender) 78%, var(--l24-gold-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.l24-lead { color: var(--l24-muted); font-size:18px; line-height:1.6; }
.l24-muted { color: var(--l24-muted); } .l24-faint { color: var(--l24-faint); }

/* ---- CARD / PANNELLI ---- */
.l24-card { padding:22px; border-radius: var(--l24-r-card);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
  border:1px solid var(--l24-glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 24px 70px rgba(0,0,0,0.34);
  backdrop-filter: blur(24px) saturate(140%);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s; }
.l24-card--hover:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(196,181,253,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 34px 90px rgba(0,0,0,0.46), 0 0 30px rgba(139,92,246,0.14); }

/* ---- FORM ---- */
.l24-input, .l24-select { width:100%; min-height:44px; border-radius:12px; border:1px solid var(--l24-glass-border);
  background: rgba(255,255,255,0.04); color: var(--l24-ui); padding:0 14px; font: inherit; outline:0; }
.l24-input:focus, .l24-select:focus { border-color: rgba(196,181,253,0.6); box-shadow: 0 0 0 4px rgba(139,92,246,0.16); }
.l24-label { display:block; font-size:13px; color: var(--l24-muted); margin-bottom:12px; }
.l24-label .l24-input { margin-top:6px; }

/* ---- PILLS / BADGE / STATI ---- */
.l24-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius: var(--l24-r-pill);
  font-size:12px; font-weight:600; }
.l24-pill::before { content:""; width:7px; height:7px; border-radius:50%; }
.l24-st-active { color:#6ee7b7; background:rgba(52,211,153,0.12); } .l24-st-active::before { background:#34d399; }
.l24-st-trial  { color:var(--l24-lavender); background:rgba(139,92,246,0.14); } .l24-st-trial::before { background:var(--l24-amethyst); }
.l24-st-past   { color:var(--l24-gold-soft); background:rgba(245,197,66,0.14); } .l24-st-past::before { background:var(--l24-gold); }
.l24-st-cancel { color:#fca5a5; background:rgba(248,113,113,0.12); } .l24-st-cancel::before { background:#f87171; }

/* ---- ICONE APP (gradiente per tinta) ---- */
.l24-appicon { display:grid; place-items:center; color:#fff; border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -8px 16px rgba(0,0,0,0.4); }
.l24-t-gold{ background:var(--l24-grad-gold);} .l24-t-amethyst{ background:var(--l24-grad-amethyst);}
.l24-t-indigo{ background:var(--l24-grad-indigo);} .l24-t-copper{ background:var(--l24-grad-copper);}

/* ---- utilità ---- */
.l24-wrap { width: min(1240px, calc(100vw - 36px)); margin: 0 auto; }
@media (prefers-reduced-motion: reduce){ .l24-card,.l24-btn,.l24-btn-gold,.l24-btn-ghost{ transition:none; } }