/* app.lommo.studio: base comune delle pagine (dal mock area personale v03 e dal mock ingresso v04, 5/11/2026) */
@font-face{font-family:'Clash';src:url('../fonts/clash/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash';src:url('../fonts/clash/ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/Satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --brick:#c0432f; --brick-deep:#a2362a; --cream:#fbedd6; --cream-bg:#fdf4e7; --cream-2:#f7e8cf;
  --navy:#13285e; --ink:#2a1c14; --muted:#7a6452; --ok:#2f8f4e; --ok-chiaro:#e3f1e7; --errore:#b3261e;
  --line:rgba(42,28,20,.12); --line-forte:rgba(42,28,20,.22); --foglio:#fffdf9; --campo:#fff;
  --blu-pieno:#13285e; --r:10px; --r-card:18px; --ease:cubic-bezier(.16,1,.3,1); --snap:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Satoshi',system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink);
  background:radial-gradient(ellipse at 20% -10%,rgba(251,237,214,.9) 0%,transparent 55%),var(--cream-bg);min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}

/* dark theme: from sunset to sunrise, or chosen with the button (cookie lommo_tema) */
html.scuro{--cream-bg:#16120f;--cream:#2c221a;--cream-2:#33281f;--foglio:#1f1914;--campo:#16120f;--ink:#f1e4d1;--muted:#a8927d;
  --line:rgba(241,228,209,.11);--line-forte:rgba(241,228,209,.24);--navy:#a9bcf5;--blu-pieno:#1c2f66;--ok-chiaro:rgba(47,143,78,.2);--brick:#d95a43;--errore:#f2b8b5}
html.scuro body{background:radial-gradient(ellipse at 20% -10%,rgba(80,52,30,.35) 0%,transparent 55%),var(--cream-bg)}
html.scuro .testa{background:rgba(22,18,15,.85)}
html.scuro .s-prova{background:rgba(232,163,58,.18);color:#f0c070}
body,.testa,.tile,.tendina,.foglio,.studio,footer{transition:background-color .8s var(--ease),color .8s var(--ease),border-color .8s var(--ease)}
.tema{min-width:34px;justify-content:center;background:none;border:1.5px solid var(--line-forte);border-radius:999px;height:34px;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.tema svg{width:16px;height:16px}

/* desk frame */
.app{position:relative}
body.w-scrivania{background:var(--cream-2)}
body.w-scrivania .app{max-width:1240px;margin:18px auto 0;background:var(--cream-bg);border-radius:22px 22px 0 0;box-shadow:0 30px 60px -30px rgba(42,28,20,.45),0 0 0 1px var(--line);overflow:clip;min-height:calc(100vh - 18px)}
html.scuro body.w-scrivania{background:#0e0b09}
@media (max-width:640px){body.w-scrivania .app{margin-top:0;border-radius:0}}

/* header */
.testa{position:sticky;top:0;z-index:80;background:rgba(253,244,231,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.testa .in{max-width:1180px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:10px;position:relative}
.marchio{display:flex;align-items:center;color:var(--brick);text-decoration:none;cursor:pointer;background:none;border:none}
.marchio svg{height:24px;width:auto;display:block}
nav.menu{display:flex;gap:2px;margin-left:18px}
.voce{position:relative}
.voce > button,.voce > a{background:none;border:none;font-weight:500;font-size:15px;color:var(--muted);padding:7px 12px;border-radius:999px;display:flex;gap:6px;align-items:center;text-decoration:none;transition:background .25s var(--snap),color .25s var(--snap)}
.voce > button:hover,.voce.aperta > button,.voce > a:hover{color:var(--ink);background:rgba(42,28,20,.05)}
.voce > button svg{width:12px;height:12px;transition:transform .3s var(--snap)}
.voce.aperta > button svg{transform:rotate(180deg)}
.tendina{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--foglio);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 40px -18px rgba(42,28,20,.35);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s var(--snap),transform .25s var(--snap)}
.voce.aperta .tendina{opacity:1;transform:none;pointer-events:auto}
.tendina a,.tendina button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:none;text-align:left;padding:9px 10px;border-radius:9px;font-size:15px;text-decoration:none}
.tendina a:hover,.tendina button:hover{background:var(--cream-bg)}
.tendina .ic{width:30px;height:30px;border-radius:8px;background:var(--cream);color:var(--brick);display:grid;place-items:center;flex:0 0 auto}
.tendina .ic svg{width:17px;height:17px}
.tendina .stato{margin-left:auto}
.chi{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.burger{display:none;background:none;border:1.5px solid var(--line-forte);border-radius:10px;width:44px;height:44px}

/* user's studio mark: header avatar and studio card */
.logo-utente{border-radius:10px;background:var(--brick);color:#fff;display:grid;place-items:center;font-family:'Clash';font-weight:700;letter-spacing:-.02em;position:relative;overflow:hidden;border:none}
.logo-utente::after{content:'';position:absolute;right:-30%;bottom:-30%;width:70%;height:70%;border-radius:50%;background:rgba(255,255,255,.16)}
.avatar.logo-utente{width:34px;height:34px;border-radius:9px;font-size:13px}

/* status pills */
.stato{font-weight:700;font-size:11.5px;letter-spacing:.04em;border-radius:999px;padding:2px 9px;white-space:nowrap}
.s-attivo{background:var(--ok-chiaro);color:var(--ok)}
.s-gratis{background:rgba(19,40,94,.08);color:var(--navy)}
html.scuro .s-gratis{background:rgba(169,188,245,.12)}
.s-prova{background:#fff1c9;color:#8a5a00}
.s-attivare{background:var(--cream-2);color:var(--brick-deep)}
.s-presto{background:transparent;color:var(--muted);border:1px dashed var(--line-forte)}

main{max-width:1180px;margin:0 auto;padding:clamp(28px,5vw,60px) 16px 80px}
.vista{display:none}.vista.on{display:block;animation:entra .55s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.colonna{max-width:560px;margin:0 auto}
.occhiello{font-family:'Clash';font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
h1{font-family:'Clash';font-weight:700;font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.02em;color:var(--navy);margin-top:10px;text-wrap:balance}
.colonna h1{font-size:clamp(30px,4.6vw,46px);line-height:1.06}
.lead{font-size:17px;color:var(--muted);margin-top:12px;max-width:56ch}
.lead b{color:var(--ink)}

/* sheet, fields, buttons */
.foglio{background:var(--foglio);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,4vw,36px);margin-top:28px;box-shadow:0 1px 2px rgba(42,28,20,.04),0 12px 32px -18px rgba(42,28,20,.18)}
.foglio p + p{margin-top:10px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo > span{font-size:14px;font-weight:700}
.aiuto{font-size:13.5px;color:var(--muted);line-height:1.45}
input[type=email],input[type=text]{width:100%;padding:12px 14px;border:1.5px solid var(--line-forte);border-radius:var(--r);background:var(--campo);color:var(--ink);font:inherit;font-size:16px;outline:none;transition:border-color .25s var(--snap),box-shadow .25s var(--snap)}
input::placeholder{color:#b3a08f}
input:focus{border-color:var(--brick);box-shadow:0 0 0 4px rgba(192,67,47,.14)}
.spunta{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;cursor:pointer}
.spunta input{width:18px;height:18px;margin-top:3px;accent-color:var(--brick);flex:0 0 auto}
.spunta a{color:var(--brick);font-weight:700}
.errore{color:var(--errore);font-size:14.5px;font-weight:700;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Clash';font-weight:600;font-size:16px;padding:13px 24px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:48px;
  transition:transform .35s var(--snap),box-shadow .35s var(--snap),background .25s var(--snap)}
.btn-p{background:var(--brick);color:#fff;box-shadow:0 1px 2px rgba(162,54,42,.3)}
.btn-p:hover{background:var(--brick-deep);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(162,54,42,.6)}
.btn-p:active{transform:translateY(0) scale(.98)}
.btn-p[disabled]{opacity:.6;cursor:wait;transform:none}
.btn-s{background:transparent;color:var(--ink);border:1.5px solid var(--line-forte)}
.btn-s:hover{border-color:var(--ink)}
.btn-pericolo{background:transparent;color:var(--errore);border:1.5px solid currentColor}
.btn-pieno{width:100%;margin-top:22px}
.azioni{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.link{background:none;border:none;color:var(--brick);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.busta{width:64px;height:64px;border-radius:18px;background:var(--cream);display:grid;place-items:center;color:var(--brick)}
.busta svg{width:32px;height:32px}
.email-usata{display:inline-block;margin-top:6px;font-weight:700;color:var(--ink);background:var(--cream-2);padding:2px 10px;border-radius:8px;word-break:break-all}

/* footer */
footer{border-top:1px solid var(--line);margin-top:20px}
footer .in{max-width:1180px;margin:0 auto;padding:26px 16px 30px;display:flex;gap:18px 28px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer .marchio svg{height:18px}
footer nav{display:flex;gap:6px 20px;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
footer .chi-sei{margin-left:auto}
footer .chi-sei b{color:var(--ink)}
footer .esci{color:var(--brick);font-weight:700;background:none;border:none;padding:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- personal area (mock area personale v03) ---- */
.saluto{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.studio{display:flex;gap:14px;align-items:center;text-align:left;background:var(--cream-2);border:1px solid var(--line);border-left:3px solid var(--brick);border-radius:var(--r-card);padding:14px 18px 14px 14px;min-width:300px;
  transition:transform .35s var(--snap),box-shadow .35s var(--snap)}
.studio:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(42,28,20,.45)}
.studio .logo-utente{width:54px;height:54px;font-size:20px;border-radius:14px;flex:0 0 auto}
.studio small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:'Clash';font-weight:600}
.studio b{display:block;font-family:'Clash';font-weight:600;font-size:17px;margin:2px 0 4px}
.gruppo{margin-top:52px}
.gruppo-testa{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.gruppo-testa h2{font-family:'Clash';font-weight:600;font-size:22px;letter-spacing:-.01em}
.gruppo-testa span{font-size:14px;color:var(--muted)}
.griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{position:relative;text-align:left;text-decoration:none;background:var(--foglio);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;min-height:150px;display:flex;flex-direction:column;gap:10px;
  transition:transform .35s var(--snap),box-shadow .35s var(--snap),border-color .25s var(--snap)}
.tile:hover{transform:translateY(-3px);border-color:var(--line-forte);box-shadow:0 16px 30px -20px rgba(42,28,20,.4)}
.tile .ic{width:46px;height:46px;border-radius:13px;background:var(--cream);color:var(--brick);display:grid;place-items:center}
.tile .ic svg{width:24px;height:24px}
.tile h3{font-family:'Clash';font-weight:600;font-size:17px;line-height:1.15;margin-top:auto}
.tile p{font-size:13.5px;color:var(--muted);line-height:1.4}
.tile .stato{position:absolute;top:16px;right:16px}
.tile.grande{grid-column:span 2;background:var(--blu-pieno);color:#fff;border-color:transparent}
.tile.grande .ic{background:rgba(255,255,255,.12);color:#fff}
.tile.grande p{color:rgba(255,255,255,.72)}
.tile.grande .s-presto{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.4)}
.tile.spento{background:transparent;border-style:dashed}
.tile.spento .ic{background:var(--cream-2);color:var(--muted)}
.tile.spento h3{color:var(--muted)}
.strumento{max-width:760px}
.indietro{background:none;border:none;color:var(--brick);font-weight:700;margin-bottom:18px}
.dati{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;font-size:15px}
.dati dt{color:var(--muted)}
.dati dd{font-weight:700;word-break:break-all}
.attenzione{border-color:var(--errore)}

@media (max-width:980px){.griglia{grid-template-columns:repeat(2,minmax(0,1fr))}.saluto{grid-template-columns:1fr}.studio{min-width:0}}
@media (max-width:860px){nav.menu,.chi .nome{display:none}.burger{display:block}
  nav.menu.mobile{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--foglio);border-bottom:1px solid var(--line);padding:10px 16px;margin:0}
  nav.menu.mobile .tendina{position:static;opacity:1;transform:none;pointer-events:auto;box-shadow:none;border:none;display:none;padding:0 0 8px}
  nav.menu.mobile .voce.aperta .tendina{display:block}}
@media (max-width:520px){.griglia{grid-template-columns:1fr}.tile.grande{grid-column:span 1}footer .chi-sei{margin-left:0}}