/*
  app.css
  --------
  Stili condivisi di applicazione (lavagna, auth, pagine interne) + landing page.
*/

:root{--bg:#0f172a;--panel:#111827;--fg:#e5e7eb;--muted:#9ca3af;--accent:#60a5fa;--danger:#ef4444;--attr-indent:0px;}
*{box-sizing:border-box;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}
body{margin:0;background:linear-gradient(180deg,#0b1224,#0f172a);color:var(--fg);}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:rgba(17,24,39,.85);backdrop-filter:blur(8px);position:sticky;top:0;border-bottom:1px solid rgba(255,255,255,.08);}
.brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.brandMark{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.30);color:rgba(229,231,235,.95)}
.brandText{white-space:nowrap;max-width:48vw;overflow:hidden;text-overflow:ellipsis}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tool{display:inline-flex;align-items:center;gap:8px;line-height:1;background:rgba(31,41,55,.92);color:var(--fg);border:1px solid rgba(255,255,255,.10);padding:7px 11px;border-radius:999px;cursor:pointer;font-size:14px;backdrop-filter:blur(6px)}
.toolIcon{display:inline-flex;opacity:.92}
.tool:hover{background:rgba(36,48,66,.98);transform:translateY(-.5px)}
.tool:active{transform:translateY(0)}
.tool.selected{outline:2px solid rgba(96,165,250,.7);border-color:rgba(96,165,250,.55)}
.tool.danger{border-color:rgba(239,68,68,.5)}
.tool.disabled{opacity:.45;pointer-events:none}

/* separatore toolbar */
.sep{width:1px;height:22px;background:rgba(255,255,255,.12)}

/* --- Layout lavagna --- */
.help,.props{background:rgba(17,24,39,.72);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px}
.help h3,.props h3{margin:0 0 10px 0}
.help ul{margin:0;padding-left:18px;color:var(--muted)}
.canvasWrap{position:relative}
#board{display:block;width:100%;height:100%;background:radial-gradient(circle at 10px 10px, rgba(255,255,255,.04) 1px, transparent 1px);background-size:28px 28px;cursor:crosshair;}
.status{position:absolute;left:12px;bottom:12px;z-index:40;max-width:min(520px, calc(100% - 24px));pointer-events:none}

.field{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.fieldRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
input{padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#0b1224;color:var(--fg)}
.hidden{display:none}
.muted{color:var(--muted)}
.small{font-size:12px}
label.importLabel{display:inline-flex;align-items:center;gap:8px}
.panelTitle{margin:6px 0 0 0;font-size:14px;letter-spacing:.2px}
.attrControls{margin-top:8px;display:flex;gap:8px;align-items:center}

/* Tabella attributi */
.attrTable{margin-top:8px;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;overflow-x:auto}
/* L'intestazione resta a 7 colonne; le righe ora sono su 2 livelli (vedi sotto) */
.attrHead{display:grid;grid-template-columns:1.4fr 1fr .6fr .8fr .9fr .9fr 34px;gap:8px;align-items:center;padding:8px 10px;background:rgba(0,0,0,.25);color:var(--muted);font-size:12px}

/* --- Attributi: riga su 2 livelli per dare spazio al nome --- */
.attrRows{display:flex;flex-direction:column}
.attrRow{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}
.attrRowTop{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center}
.attrRowTop input[type="text"]{width:100%;font-size:15px;font-weight:700}

.attrRowBottom{display:grid;grid-template-columns:.8fr .9fr .9fr .9fr 34px;gap:8px;align-items:end}
.attrField{display:flex;flex-direction:column;gap:4px;min-width:0}
.attrMiniLabel{color:var(--muted);font-size:11px;line-height:1}
.attrDeleteWrap{display:flex;align-items:flex-end;justify-content:flex-end}

/* Gli elementi dentro i field devono adattarsi */
.attrRowBottom select{width:100%}

@media (max-width: 720px){
  .attrHead{display:none}
  .attrRowTop{grid-template-columns:1fr}
  .attrRowBottom{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .attrDeleteWrap{justify-content:flex-start}
}

/* Input e controlli */
.attrRow input[type="text"], .attrRow select{width:100%}
.attrRow label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}

.iconBtn{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--fg);border-radius:8px;width:34px;height:34px;cursor:pointer}
.iconBtn:hover{background:rgba(255,255,255,.06)}

.zoomBox{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;align-items:center;z-index:30;background:rgba(17,24,39,.75);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);padding:8px;border-radius:12px}
.zoomLabel{min-width:52px;text-align:center;color:var(--muted);font-size:12px}

/* --- Auth / Login page --- */
.authBody{min-height:100vh;background:radial-gradient(1200px 500px at 20% 10%, rgba(96,165,250,.20), transparent 55%),radial-gradient(900px 540px at 80% 20%, rgba(239,68,68,.14), transparent 55%),linear-gradient(180deg,#0b1224,#0f172a);}
.authMain{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.authCard{width:min(520px,100%);background:rgba(17,24,39,.78);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:18px 18px 16px 18px;box-shadow:0 14px 60px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.authHeader{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.authLogo{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.28);color:rgba(229,231,235,.95)}
.authTitle{font-weight:800;letter-spacing:.2px;font-size:18px}
.authSubtitle{color:var(--muted);font-size:13px;margin-top:2px}

.authAlert{display:flex;gap:10px;align-items:center;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:rgba(239,68,68,.95);border-radius:12px;padding:10px 12px;margin:10px 0 14px 0;font-weight:600}
.authAlertIcon{display:flex}
.authAlert.success{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22);color:rgba(34,197,94,.95)}
.authAlert.info{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.22);color:rgba(96,165,250,.95)}

.authForm{display:flex;flex-direction:column;gap:10px}
.authLabel{color:rgba(229,231,235,.9);font-size:13px;margin-top:4px}
.authInputRow{display:flex;align-items:center;gap:10px;background:#0b1224;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 12px}
.authInputIcon{color:rgba(156,163,175,.95);display:flex}
.authInput{flex:1;border:0;background:transparent;color:var(--fg);outline:none;font-size:16px;line-height:22px;padding:2px 2px;font-weight:600;letter-spacing:.2px}

.authDivider{display:flex;align-items:center;gap:10px;margin:14px 0 12px 0;color:var(--muted);font-size:12px}
.authDivider:before,.authDivider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.10)}
.authDivider span{padding:0 6px}

.authButtons{display:flex;flex-direction:column;gap:10px}
.authBtn{display:inline-flex;align-items:center;gap:10px;justify-content:center;text-decoration:none;user-select:none;border-radius:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);background:#1f2937;color:var(--fg);font-size:14px;font-weight:700;cursor:pointer}
.authBtn:hover{background:#243042}
.authBtnIcon{display:flex}
.authBtn.primary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.85));border-color:rgba(96,165,250,.5)}
.authBtn.primary:hover{filter:brightness(1.02)}
.authBtn.secondary{background:rgba(255,255,255,.06)}

.authBtn.oauth{justify-content:flex-start;padding-left:14px}
.authBtn.oauth.google{background:rgba(255,255,255,.06)}
.authBtn.oauth.github{background:rgba(255,255,255,.06);}
.authBtn.oauth.github .authBtnIcon{color:#e5e7eb}

.authEye{border:0;background:transparent;color:rgba(156,163,175,.95);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;border-radius:8px}
.authEye:hover{background:rgba(255,255,255,.06);color:rgba(229,231,235,.95)}
.authEye:focus{outline:2px solid rgba(96,165,250,.55);outline-offset:2px}

.authFootnote{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.4}

/* Link di default: ripristina colore e hover (senza toccare i bottoni .tool) */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Pagina progetti (/app): margini piccoli */
.appPage{max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:360px 1fr;align-items:start;gap:16px}
.createCard{position:sticky;top:78px}

/* Tabelle più allineate */
.tableHead,.tableRow{display:grid;grid-template-columns:minmax(200px,1fr) 160px minmax(260px,380px);gap:12px;align-items:center}
.tableHead{padding:10px 12px;background:rgba(0,0,0,.22);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.tableRow{padding:12px;border-top:1px solid rgba(255,255,255,.08)}

.rowTitle{display:block}
.rowLink{color:rgba(229,231,235,.95);font-weight:800;text-decoration:none}
.rowLink:hover{text-decoration:underline}

.rowActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rowActions .tool{padding:6px 10px;font-size:13px}

/* Card un filo più "premium" */
.props{box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* --- Top menu (sopra la toolbar) --- */
.menuBar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:rgba(2,6,23,.78);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.menuLeft,.menuCenter,.menuRight{display:flex;align-items:center;gap:10px}
.menuBrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(229,231,235,.95)}
.menuBrandMark{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.28)}
.menuBrandText{font-weight:900;letter-spacing:.2px}

.menuDrop{position:relative}
.menuDrop summary{list-style:none;cursor:pointer;user-select:none;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(17,24,39,.55);color:rgba(229,231,235,.95);font-weight:700}
.menuDrop summary::-webkit-details-marker{display:none}
.menuDrop[open] summary{outline:2px solid rgba(96,165,250,.35);border-color:rgba(96,165,250,.35)}
.menuPanel{position:absolute;top:44px;left:0;min-width:220px;background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px;z-index:50}
.menuPanelRight{left:auto;right:0}
.menuItem{padding:9px 10px;border-radius:10px;color:rgba(229,231,235,.95);text-decoration:none;font-weight:700}
.menuItem:hover{background:rgba(255,255,255,.06);text-decoration:none}
.menuLink{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);text-decoration:none;color:rgba(229,231,235,.95);background:rgba(17,24,39,.40);font-weight:800}
.menuLink:hover{background:rgba(255,255,255,.06);text-decoration:none}

@media (max-width: 900px){
  .menuCenter{gap:6px}
  .menuDrop summary{padding:7px 10px;font-size:13px}
  .menuBrandText{display:none}
}

/* --- Footer --- */
.footer{margin-top:18px;border-top:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.55);backdrop-filter:blur(8px)}
.footerInner{max-width:1200px;margin:0 auto;padding:14px;color:rgba(229,231,235,.92);display:flex;flex-direction:column;gap:2px}
.footerTitle{font-weight:900;letter-spacing:.2px}
.footerText{font-size:13px}

/* --- Pagine /app (progetti) --- */
.appPage{max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:360px 1fr;align-items:start;gap:16px}
.createCard{position:sticky;top:78px}

.tableHead,.tableRow{display:grid;grid-template-columns:minmax(200px,1fr) 160px minmax(260px,380px);gap:12px;align-items:center}
.tableHead{padding:10px 12px;background:rgba(0,0,0,.22);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.tableRow{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.rowTitle{display:block}
.rowLink{color:rgba(229,231,235,.95);font-weight:800;text-decoration:none}
.rowLink:hover{text-decoration:underline}
.rowActions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.rowActions .tool{padding:6px 10px;font-size:13px}
.props{box-shadow:0 10px 30px rgba(0,0,0,.22)}

@media (max-width: 980px){
  .main.appPage{grid-template-columns:1fr !important;}
  .appPage{padding:10px;}
  .createCard{position:static}
  .tableHead,.tableRow{grid-template-columns:1fr 1fr;}
}

@media (max-width: 640px){
  .appPage{padding:8px;}
  .hideSm{display:none}
  .tableHead,.tableRow{grid-template-columns:1fr;}
  .rowActions{justify-content:flex-start}
}

.cardGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.infoRow{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.infoKey{color:var(--muted);font-size:12px;margin-bottom:4px}
.infoVal{font-weight:700}

/* Evito che i link stile bottone (.tool) riprendano underline dai link globali; i link della toolbar restano puliti anche su hover. */
.tool,a.tool{text-decoration:none}
.tool:hover,a.tool:hover{text-decoration:none}

/* --- App page ("wow" mode) --- */
.appShell{grid-template-columns:380px 1fr;grid-template-rows:auto auto;gap:16px}
.appHero{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 280px at 10% 20%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(620px 260px at 85% 30%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(180deg, rgba(17,24,39,.78), rgba(17,24,39,.62));
  box-shadow:0 18px 70px rgba(0,0,0,.30);
}
.appHeroTitle{display:flex;align-items:center;gap:12px}
.appHeroIcon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(96,165,250,.18);border:1px solid rgba(96,165,250,.28);color:rgba(229,231,235,.98)}
.appHeroH{font-weight:950;letter-spacing:.2px;font-size:18px}
.appHeroSub{color:rgba(156,163,175,.95);font-size:13px;margin-top:2px}
.appHeroRight{display:flex;align-items:center;gap:10px}
.appStat{background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px 12px;min-width:110px;text-align:right}
.appStatK{color:rgba(156,163,175,.95);font-size:12px}
.appStatV{font-weight:950;font-size:20px;letter-spacing:.2px}

.appCard{background:rgba(17,24,39,.74);border:1px solid rgba(255,255,255,.12);border-radius:16px}
.appCardTitle{display:flex;align-items:center;gap:8px}

.inputPill{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid rgba(255,255,255,.10)}
.inputPill input{border:0;background:transparent;padding:0;outline:none;width:100%}
.inputIcon{color:rgba(156,163,175,.95);display:flex}

.appActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tool.appPrimary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.86));border-color:rgba(96,165,250,.45)}
.tool.appPrimary:hover{filter:brightness(1.02)}

.quickGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.quickCard{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.quickCard:hover{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));text-decoration:none}
.quickI{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.24);color:rgba(229,231,235,.95)}
.quickT{font-weight:900;color:rgba(229,231,235,.95)}
.quickS{color:rgba(156,163,175,.95);font-size:12px;margin-top:2px}

.projectsHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.10);color:rgba(156,163,175,.95);font-weight:800;font-size:12px}

.rowMeta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(96,165,250,.09);border:1px solid rgba(96,165,250,.16);color:rgba(229,231,235,.92);font-size:12px;font-weight:700}
.chip.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:rgba(156,163,175,.95)}

/* --- /app: ricerca, ordinamento, thumbnails --- */
.projectsTools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0}
.sortPills{display:flex;gap:8px;flex-wrap:wrap}
.sortBtn.selected{outline:2px solid rgba(96,165,250,.35);border-color:rgba(96,165,250,.35)}

.projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:minmax(280px,1fr) 170px minmax(260px,400px)}

.rowTop{display:flex;gap:12px;align-items:flex-start}
.thumb{border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(2,6,23,.35)}
.rowText{display:flex;flex-direction:column}

@media (max-width: 980px){
  .projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .projectsGrid .tableHead,.projectsGrid .tableRow{grid-template-columns:1fr;}
}

/* --- Landing / Homepage (NUOVO) --- */
.landingBody{min-height:100vh;
  background:
    radial-gradient(1200px 600px at 12% 10%, rgba(96,165,250,.24), transparent 60%),
    radial-gradient(900px 620px at 82% 18%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 520px at 30% 95%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg,#0b1224,#0f172a);
}

.landingHeader{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  background:rgba(2,6,23,.62);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}

.landingBrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(229,231,235,.98)}
.landingBrandMark{width:34px;height:34px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:950;letter-spacing:.2px;
  background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.28)}
.landingBrandText{font-weight:950;letter-spacing:.2px}

.landingNav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.landingNavLink{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(17,24,39,.35);
  text-decoration:none;color:rgba(229,231,235,.92);font-weight:800;font-size:13px}
.landingNavLink:hover{background:rgba(255,255,255,.06);text-decoration:none}

.landingActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.landingBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(17,24,39,.55);color:rgba(229,231,235,.97);
  text-decoration:none;font-weight:900;letter-spacing:.2px;font-size:14px}
.landingBtn:hover{background:rgba(255,255,255,.06);text-decoration:none}
.landingBtn.primary{background:linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.86));border-color:rgba(96,165,250,.45)}
.landingBtn.primary:hover{filter:brightness(1.02)}
.landingBtn.big{padding:12px 16px;border-radius:16px;font-size:15px}

.landingMain{max-width:1600px;margin:0 auto;padding:22px 10px 40px 10px}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:stretch}
.heroLeft{padding:18px 4px}
.heroBadge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.20);color:rgba(229,231,235,.95);font-weight:900;font-size:12px}
.heroTitle{margin:12px 0 8px 0;font-size:40px;line-height:1.06;letter-spacing:-.6px}
.heroSubtitle{margin:0;color:rgba(156,163,175,.98);font-size:15px;line-height:1.6;max-width:54ch}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.heroTrust{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin-top:18px}
.trustItem{background:rgba(17,24,39,.60);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px}
.trustK{color:rgba(156,163,175,.95);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}
.trustV{margin-top:6px;font-weight:950}

.heroRight{display:flex;flex-direction:column;gap:12px}
.shotCard{margin-top:15px; background:rgba(17,24,39,.70);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.35)}

/* Solo home: piccolo distacco sopra le card nella colonna mockup */
.landingBody .heroRight .shotCard{margin-top:15px}

.shotCard.mini{box-shadow:0 12px 50px rgba(0,0,0,.25)}
.shotTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;background:rgba(2,6,23,.35);border-bottom:1px solid rgba(255,255,255,.08)}
.shotTitle{font-weight:950}
.dots{display:flex;gap:6px}
.dots span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.18)}
.dots span:nth-child(1){background:rgba(239,68,68,.55)}
.dots span:nth-child(2){background:rgba(245,158,11,.55)}
.dots span:nth-child(3){background:rgba(34,197,94,.50)}

.shotCanvas{height:260px;background:radial-gradient(circle at 30px 30px, rgba(255,255,255,.04) 1px, transparent 1px);background-size:26px 26px}

/* Home: quando l'immagine è in contain, il "vuoto" diventa parte del design */
.landingBody .shotCanvas{
  /* contenitore responsivo: proporzioni reali screenshot (1400x900) */
  height:auto;
  aspect-ratio: 1400 / 900;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(900px 300px at 20% 10%, rgba(96,165,250,.12), transparent 55%),
    radial-gradient(760px 260px at 85% 25%, rgba(168,85,247,.18), transparent 55%),
    radial-gradient(circle at 30px 30px, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:auto, auto, 26px 26px;
}

.landingBody .shotCanvas img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;

  /* niente padding: l'immagine entra al pixel nel contenitore */
  padding:0;
  border-radius:0;
  box-shadow:none;
}

.shotFooter{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:rgba(2,6,23,.28);border-top:1px solid rgba(255,255,255,.08)}

.chipLite{display:inline-flex;align-items:center;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:rgba(156,163,175,.95);font-weight:900;font-size:12px}
.pillLite{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.22);color:rgba(229,231,235,.92);font-weight:900;font-size:12px}

.shotList{display:flex;flex-direction:column;gap:8px;padding:12px}
.shotRow{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(2,6,23,.30);border:1px solid rgba(255,255,255,.08)}
.shotRow .dot{width:10px;height:10px;border-radius:999px;background:rgba(96,165,250,.7)}
.shotRow .t{font-weight:900}
.shotRow .s{color:rgba(156,163,175,.95);font-size:12px;font-weight:800}

.landingSection{margin-top:34px}
.sectionTitle{margin:0;font-size:24px;letter-spacing:-.2px}
.sectionSubtitle{margin:8px 0 0 0;color:rgba(156,163,175,.95);line-height:1.6;max-width:70ch}

.featureGrid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;margin-top:14px}
.featureCard{background:rgba(17,24,39,.68);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.featureIcon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:950;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.24);color:rgba(229,231,235,.95)}
.featureTitle{margin-top:10px;font-weight:950}
.featureText{margin-top:6px;color:rgba(156,163,175,.95);line-height:1.55;font-size:13px}

.screenGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.screenCard{background:rgba(17,24,39,.68);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.screenLabel{font-weight:950}
.screenMock{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.screenHint{color:rgba(156,163,175,.95);font-weight:800}

.pricingHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pricingGrid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:14px}
.priceCard{background:rgba(17,24,39,.64);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px}
.priceCard.highlight{border-color:rgba(96,165,250,.35);box-shadow:0 18px 60px rgba(0,0,0,.24)}
.priceTop{display:flex;flex-direction:column;gap:4px}
.priceName{font-weight:950;font-size:16px}
.priceMeta{color:rgba(156,163,175,.95);font-size:13px}
.priceList{margin:12px 0 0 0;padding-left:18px;color:rgba(156,163,175,.95);line-height:1.7}

.landingCtaStrip{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(2,6,23,.35);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px}
.ctaTitle{font-weight:950}
.ctaText{color:rgba(156,163,175,.95);margin-top:4px}

.landingFooter{margin-top:30px;border-top:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.45);backdrop-filter:blur(8px)}
.landingFooterInner{max-width:1200px;margin:0 auto;padding:16px 16px 22px 16px;display:flex;flex-direction:column;gap:2px}
.landingFooterTitle{font-weight:950;letter-spacing:.2px}
.landingFooterText{font-size:13px}

@media (max-width: 1020px){
  .hero{grid-template-columns:1fr}
  .featureGrid{grid-template-columns:1fr 1fr}
  .pricingGrid{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .landingNav{display:none}
  .heroTitle{font-size:32px}
  .heroTrust{grid-template-columns:1fr}
  .screenGrid{grid-template-columns:1fr}
  .landingMain{padding-left:10px;padding-right:10px}
}

/* --- Landing / Homepage --- */

/* Testo hero: rendilo più leggibile quando si usano più paragrafi */
.heroText{margin-top:10px}
.heroText .heroSubtitle{
  max-width:68ch;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* Keyword highlight (solo home) */
.kw{
  display:inline-block;
  padding:.06em .42em;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(229,231,235,.98);
  background:linear-gradient(90deg, rgba(96,165,250,.18), rgba(168,85,247,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 10px 30px rgba(96,165,250,.10);
}

/* Quando la keyword sta a fine riga, evita che si "attacchi" troppo */
.kw{margin:0 .06em}

/* --- Modalità lavagna: altezza canvas solo lì --- */
body.boardBody .canvasWrap #board{height:calc(100vh - 74px)}

/* Layout base */
.main{padding:10px;display:grid;gap:16px}

/* Il canvas ha la sua altezza; non deve influire sulle pagine non-lavagna */
.canvasWrap #board{height:calc(100vh - 74px)}

/* Footer: sempre sotto contenuto */
.footer{padding-bottom:10px}

/* --- Paginazione /app --- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.pagerInfo{color:rgba(156,163,175,.95);font-size:13px;font-weight:700}

/* --- Menu: miglioramenti UX/UI --- */
.menuBar{position:sticky;top:0;z-index:1000;
  background:rgba(2,6,23,.86);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.menuDrop summary{display:flex;align-items:center;gap:8px}
.menuDrop summary:after{content:"▾";opacity:.7;font-size:12px;transform:translateY(-1px)}
.menuDrop[open] summary:after{transform:rotate(180deg) translateY(1px)}

.menuDrop summary{transition:background .15s,border-color .15s,transform .15s}
.menuDrop summary:hover{background:rgba(255,255,255,.06)}
.menuDrop[open] summary{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.35)}

.menuPanel{z-index:1200;min-width:240px}
.menuItem{display:flex;align-items:center;gap:10px}

/* Overlay click-outside (solo visual, JS gestisce chiusura) */
.menuDrop[open] .menuPanel{animation:menuPop .12s ease-out}
@keyframes menuPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* In pagine con toolbar (topbar sticky), evitare che il contenuto finisca sotto: la topbar ha top:0, quindi deve stare sotto al menu */
.topbar{top:52px;z-index:900}

/* --- Dropdown utente (menu a destra) --- */
.userDrop summary{padding:8px 12px}
.userIcon{display:inline-flex;opacity:.9}
.userName{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menuPanelRight{left:auto;right:0}

/* --- Modali (riuso per progetto/account, ecc.) --- */
.modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal.hidden{display:none}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.modalCard{position:relative;width:min(560px,96vw);background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 18px 70px rgba(0,0,0,.55);padding:14px}
.modalHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.modalTitle{font-weight:950;letter-spacing:.2px;font-size:16px}
.modalBody{display:flex;flex-direction:column;gap:10px}
.modalFooter{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
textarea{padding:10px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b1224;color:var(--fg)}

/* --- Topbar lavagna: solo bottoni, centrati --- */
.topbar.topbarBoardOnly{justify-content:center;gap:0}
.topbar.topbarBoardOnly .toolbar.toolbarCenter{width:100%;justify-content:center;flex-wrap:wrap}

/* Separatori toolbar lavagna */
.sep{
  display:inline-block;
  width:1px;
  height:26px;
  margin:0 10px;
  background:rgba(255,255,255,.18);
  border-radius:1px;
  align-self:center;
}

/* --- Indicatore stato salvataggio (topbar) --- */
.saveStatus{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.35);color:rgba(156,163,175,.95);font-weight:800;font-size:12px;user-select:none}
.saveStatus:before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(156,163,175,.85)}
.saveStatus.isSaving{color:rgba(96,165,250,.95);border-color:rgba(96,165,250,.28);background:rgba(96,165,250,.10)}
.saveStatus.isSaving:before{background:rgba(96,165,250,.95)}
.saveStatus.isSaved{color:rgba(34,197,94,.95);border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.10)}
.saveStatus.isSaved:before{background:rgba(34,197,94,.95)}
.saveStatus.isError{color:rgba(239,68,68,.95);border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.10)}
.saveStatus.isError:before{background:rgba(239,68,68,.95)}

/* --- Guidance/status overlay (sempre visibile) --- */
.canvasWrap{position:relative}
.status{position:absolute;left:12px;bottom:12px;z-index:40;max-width:min(520px, calc(100% - 24px));pointer-events:none}

/* Contenitore bottom-right per zoom + save status */
.canvasOverlayRight{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;align-items:center;z-index:40;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px)}
.canvasOverlayRight .zoomBox{position:static;right:auto;bottom:auto;z-index:auto;background:rgba(17,24,39,.75)}

/* il pill di salvataggio in basso accanto allo zoom */
.canvasOverlayRight .saveStatus{white-space:nowrap}

/* La pagina progetto non deve richiedere scroll per vedere overlay: canvasWrap si adatta a viewport */
.main .canvasWrap #board{height:calc(100dvh - 140px)}

/* --- Attributi: tipo nascosto quando Composto --- */
.attrTypeTop{min-width:0}

/* --- Attributi: riga su 2 livelli per dare spazio al nome --- */
.attrRowTop{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center}
.attrRowTop input[type="text"]{width:100%;font-size:15px;font-weight:700}
.attrTypeTop select{width:100%;font-size:12px;padding:8px 10px;line-height:normal}

/* Quando il tipo è nascosto (composito), usa tutto lo spazio per il nome */
.attrRowTop:has(.attrTypeTop[style*="display: none"]) { grid-template-columns: 1fr; }

/* Fallback: se :has non è supportato, almeno evita che il nome diventi troppo stretto */
@supports not selector(:has(*)){
  .attrRowTop{grid-template-columns:1fr;}
  .attrTypeTop{margin-top:6px;}
}

/* --- Attributi: miglior leggibilità sotto-attributi in lista --- */
.attrNameWrap{position:relative;min-width:0}

/* marker: ora è un connettore ad albero (non più un badge con testo) */
.attrTreeMarker{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:calc(var(--attr-indent, 0px) + 18px);
  height:18px;
}

/* Linea verticale (colonna albero) */
.attrRow.isSubAttr .attrTreeMarker:before{
  content:"";
  position:absolute;
  left:calc(var(--attr-indent, 0px) - 9px);
  top:-10px;
  bottom:0;
  width:2px;
  background:rgba(96,165,250,.22);
  border-radius:2px;
}

/* Gomito + nodo */
.attrRow.isSubAttr .attrTreeMarker:after{
  content:"";
  position:absolute;
  left:calc(var(--attr-indent, 0px) - 9px);
  top:50%;
  width:18px;
  height:12px;
  transform:translateY(-50%);
  border-left:2px solid rgba(96,165,250,.28);
  border-bottom:2px solid rgba(96,165,250,.28);
  border-bottom-left-radius:8px;
}

/* Piccolo nodo sul gomito */
.attrRow.isSubAttr .attrTreeMarker{
  background:radial-gradient(circle at calc(var(--attr-indent, 0px) + 0px) 50%, rgba(96,165,250,.95) 2px, transparent 3px);
}

/* Riga figlia: sfondo leggero (tengo solo questo, evito una seconda barra a sinistra) */
.attrRow.isSubAttr{background:linear-gradient(90deg, rgba(96,165,250,.06), transparent 140px)}

/* Nome sotto-attributo: un filo più tenue */
.attrNameInput.isSubName{font-weight:650}

/* --- Tree connector: ultima foglia senza linea che continua sotto --- */
.attrRow.isSubAttr.isLastChild .attrTreeMarker:before{
  /* la linea verticale arriva solo fino al centro (gomito) */
  bottom:50%;
}

/* --- Landing / Homepage --- */
.heroDivider{height:1px;margin:14px 0;
  background:linear-gradient(90deg, transparent, rgba(96,165,250,.40), rgba(168,85,247,.35), transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 0 30px rgba(96,165,250,.12);
  border-radius:999px;
}

/* Cards "In breve" sotto al testo (home) */
.heroHighlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.hlCard{background:rgba(17,24,39,.60);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px}
.hlTitle{font-weight:950;letter-spacing:.2px}
.hlText{margin-top:6px;color:rgba(156,163,175,.95);font-size:13px;line-height:1.5}

.heroLead{margin:0;color:rgba(156,163,175,.98);font-size:16px;line-height:1.65;max-width:68ch}

.heroBullets{margin:12px 0 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:68ch}
.heroBullets li{position:relative;padding-left:28px;color:rgba(156,163,175,.98);line-height:1.55}
.heroBullets li:before{
  content:"";
  position:absolute;left:0;top:.35em;
  width:14px;height:14px;border-radius:999px;
  background:linear-gradient(180deg, rgba(96,165,250,.90), rgba(168,85,247,.75));
  box-shadow:0 0 0 3px rgba(96,165,250,.10);
}

@media (max-width: 680px){
  .heroLead,.heroBullets{max-width:none}
}