/*
  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; --card-bg: linear-gradient(180deg, rgba(3,37,65,0.88), rgba(6,45,85,0.72));
  /* Altezza topbar: default storico, viene ricalcolata via JS nelle pagine lavagna */
  --topbar-height: 74px;
  /* Spazio extra dovuto alla tabbar (Originale/Ristrutturato): aggiornato via CSS quando la tabbar è presente */
  --board-tabs-offset: 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;}

/* Sposta status e zoom/save un po' più su quando è presente la tabbar, per evitare che finiscano fuori */
.status{position:absolute;left:12px;bottom:calc(72px + var(--board-tabs-offset));z-index:40;max-width:min(520px, calc(100% - 24px));pointer-events:none}

/* Meta progetto in alto a sinistra */
.boardMeta{
  position:absolute;
  left:12px;
  top:12px;
  z-index:45;
  max-width:min(320px, calc(100% - 24px));
  min-width:min(320px, calc(100% - 24px));
  background:rgba(17,24,39,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.boardMetaHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}
.boardMeta h3{font-size:15px;font-weight:900}

/* Overlay in basso a destra per zoom e saveStatus */
.canvasOverlayRight{position:absolute;right:12px;bottom:calc(65px + var(--board-tabs-offset));display:flex;gap:10px;align-items:center;z-index:50}

/* Overlay in alto a destra per pulsante toggle proprietà */
.canvasOverlayTopRight{position:absolute;right:12px;top:12px;display:flex;gap:10px;align-items:center;z-index:50}

/* Pulsante toggle pannello proprietà */
.panelToggleBtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(17,24,39,.75);color:var(--fg);cursor:pointer;backdrop-filter:blur(6px)}
.panelToggleBtn:hover{background:rgba(17,24,39,.9);border-color:rgba(255,255,255,.2)}

/* Pannello proprietà schema logico testuale (trascinabile, fisso nel viewport) */
.logicalTextPropsPanel{
  position:fixed;
  left:12px;
  top:160px;
  z-index:900;
  background:rgba(15,23,42,.93);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  min-width:196px;
  max-width:230px;
  box-shadow:0 4px 24px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  color:rgba(229,231,235,.92);
  font-size:13px;
  user-select:none;
  pointer-events:auto;
}
.logicalTextPropsPanel.ltpp-hidden{display:none !important}
.logicalTextPropsPanel.ltpp-dragging{
  opacity:.88;
  box-shadow:0 8px 32px rgba(0,0,0,.65);
  transition:none !important;
}
.ltpp-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 11px 7px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  color:rgba(96,165,250,.95);
  cursor:grab;
}
.ltpp-header:active{cursor:grabbing}
.ltpp-body{
  padding:8px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.ltpp-row{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  padding:4px 5px;
  border-radius:6px;
  transition:background 0.14s;
  line-height:1.3;
}
.ltpp-row:hover{background:rgba(255,255,255,.06)}
.ltpp-row input[type="checkbox"]{
  accent-color:rgba(96,165,250,.9);
  width:14px;height:14px;
  cursor:pointer;
  flex-shrink:0;
  margin:0;
}
.ltpp-swatch{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.ltpp-swatch-fk{background:rgba(168,85,247,.85)}
.ltpp-swatch-nullable{
  background:transparent;
  color:rgba(255,255,255,.9);
  font-size:13px;
  width:auto;
  border-radius:0;
}
.ltpp-label{font-size:13px}

/* ================================================================
   Script SQL — overlay e pannello DB
   ================================================================ */
.sqlScriptOverlay{
  position:fixed;
  z-index:200;
  display:none;
  flex-direction:column;
  background:rgba(8,14,28,.97);
  overflow:hidden;
}
.sqlScriptToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:rgba(15,23,42,.95);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.sqlScriptTitle{
  font-size:13px;
  font-weight:700;
  color:rgba(96,165,250,.95);
  letter-spacing:.03em;
}
.sqlCopyBtn{
  display:inline-flex;align-items:center;
  padding:5px 12px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,24,39,.75);
  color:rgba(229,231,235,.9);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.sqlCopyBtn:hover{background:rgba(17,24,39,.95);border-color:rgba(255,255,255,.22)}
.sqlContent{
  flex:1;
  overflow:auto;
  margin:0;
  padding:16px 24px;
  font-family:'JetBrains Mono',Consolas,monospace;
  font-size:13px;
  line-height:1.7;
  color:rgba(229,231,235,.88);
  white-space:pre;
  tab-size:2;
}

/* Pannello selezione DB (trascinabile, fisso nel viewport) */
.sqlDbPanel{
  position:fixed;
  left:12px;
  top:160px;
  z-index:910;
  background:rgba(15,23,42,.93);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  min-width:156px;
  max-width:200px;
  box-shadow:0 4px 24px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  color:rgba(229,231,235,.92);
  font-size:13px;
  user-select:none;
  pointer-events:auto;
}
.sqlDbPanel.sqldb-dragging{opacity:.88;box-shadow:0 8px 32px rgba(0,0,0,.65);transition:none!important}
.sqldb-header{
  display:flex;align-items:center;gap:6px;
  padding:8px 11px 7px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-weight:700;font-size:12px;letter-spacing:.03em;
  color:rgba(96,165,250,.95);
  cursor:grab;
}
.sqldb-header:active{cursor:grabbing}
.sqldb-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px}
.sqldb-row{
  display:flex;align-items:center;gap:7px;
  cursor:pointer;padding:4px 5px;border-radius:6px;
  transition:background .14s;line-height:1.3;
}
.sqldb-row:hover{background:rgba(255,255,255,.06)}
.sqldb-row input[type="radio"]{
  accent-color:rgba(96,165,250,.9);
  width:13px;height:13px;cursor:pointer;flex-shrink:0;margin:0;
}
.sqldb-label{font-size:12.5px}
.sqldb-separator{height:1px;background:rgba(255,255,255,.22);margin:8px 2px}
.sqldb-check-row input[type="checkbox"]{
  accent-color:rgba(96,165,250,.9);
  width:13px;height:13px;cursor:pointer;flex-shrink:0;margin:0;
}

/* =========================================
   Modale "Needs Restructure"
   ========================================= */
.nrmSteps{
  list-style:none;
  margin:0 0 18px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nrmSteps li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.5;
}
.nrmStepIcon{
  font-size:18px;
  flex-shrink:0;
  margin-top:1px;
  width:24px;
  text-align:center;
}
.nrmCta{
  margin:0;
  padding:12px 14px;
  background:rgba(96,165,250,.1);
  border-left:3px solid rgba(96,165,250,.6);
  border-radius:0 6px 6px 0;
  font-size:13.5px;
  line-height:1.5;
}

.saveStatus{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95)}
.saveStatus.isSaving{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.3);color:rgba(234,179,8,.95)}
.saveStatus.isError{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:rgba(239,68,68,.95)}
.saveStatus.isSaved{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:rgba(34,197,94,.95)}
.saveStatus.isDirty{background:rgba(156,163,175,.15);border:1px solid rgba(156,163,175,.35);color:rgba(156,163,175,.95)}
.saveStatus::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}
.saveStatus.hidden{display:none}
.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)}

.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,.08);
  border-radius:10px;
  overflow:hidden; /* evita scrollbar doppie */
}
/* 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}

/* Header attributi con filtro */
.attrHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}
.attrHeader .attrFilterInput{max-width:160px}

/* --- 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:6px}
.attrRowTop{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center}
.attrRowTop input[type="text"]{width:100%;font-size:15px;font-weight:700}

.attrRowBottom{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow:hidden; /* evita overflow laterale */ }
.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{display:flex;gap:8px;align-items:center;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)}

/* OAuth buttons: centra icona + testo nel bottone */
.authBtn.oauth{justify-content:center;padding-left:12px}

.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);margin-bottom:16px}
.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}

.menuTopLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  text-decoration:none;
  line-height:1;
  font-weight:600;
}
.menuTopLink:hover{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.28);
}

/* Pulsante Dona PayPal */
.btnDonate{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:#FFC439;color:#003087;
  border:1px solid #e5a600;
  font-weight:800;font-size:13px;line-height:1;
  cursor:pointer;text-decoration:none;
  transition:background .15s,box-shadow .15s,transform .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  font-family:inherit;
}
.btnDonate:hover{
  background:#FFD566;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  transform:translateY(-.5px);
}
.btnDonate:active{
  background:#e5a600;
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btnDonate svg{flex-shrink:0;color:#003087;}

@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}

/* --- Landing: pricing badge (FREE) --- */
.priceBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:10px 0;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:rgba(240,253,244,.98); /* green-50 */
  background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.88));
  border:1px solid rgba(34,197,94,.55);
  box-shadow:0 10px 24px rgba(34,197,94,.14);
}

/* Variante opzionale se mai usato su card scure più intense */
.priceCard.highlight .priceBadge{
  box-shadow:0 12px 28px rgba(34,197,94,.18);
}

/* --- Landing: sections padding (mobile) --- */
@media (max-width: 680px){
  .landingBody{padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);}
  .landingMain{padding-left:10px;padding-right:10px}
}

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

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

/* 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(720px,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;max-height:calc(100vh - 120px);overflow:auto}
.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}
.modalBody .field{margin-top:0}
.modalBody label{color:rgba(229,231,235,.90);font-size:13px;font-weight:800;letter-spacing:.15px}
.modalBody input,.modalBody textarea{width:100%}
.modalBody textarea{resize:vertical;min-height:80px;max-height:40vh}
.modalBody input:focus,.modalBody textarea:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* Floating left panel (props) */
.floatingPanel{
  position:fixed;
  left:24px;
  top:80px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:440px;
  max-width:calc(100% - 48px);
  /* match lavagna .props background: semi-transparent dark */
  background: rgba(17,24,39,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:6px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.45);
  color:var(--fg);
  max-height: calc(100vh - 120px);
  overflow:hidden;
  transition: transform 180ms ease, opacity 180ms ease;
}

.floatingPanel.fp-hidden{display:none !important}

.floatingPanel .panelHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 8px;border-bottom:1px solid rgba(255,255,255,0.04);margin:0;width:100%;box-sizing:border-box}
.floatingPanel .panelTitle{font-weight:900;font-size:15px;line-height:1}
.floatingPanel .panelBody{padding:4px 8px;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 180px);scrollbar-width:none;-ms-overflow-style:none}
.floatingPanel .panelBody::-webkit-scrollbar{display:none}
.floatingPanel .panelFooter{padding:3px 8px;border-top:1px solid rgba(255,255,255,0.04);display:flex;justify-content:flex-end;gap:8px}

/* Riduci margini superiori dei campi nella finestra proprietà (senza cambiare font) */
.floatingPanel .field{margin-top:2px;gap:4px}
.floatingPanel label{font-size:13px}

/* Larghezze variabili del pannello in base al tipo selezionato */
.floatingPanel.panel-compact{width:320px}
.floatingPanel.panel-medium{width:320px}
.floatingPanel.panel-wide{width:320px}

/* Small responsive adjustments */
@media (max-width:900px) {
  .floatingPanel { left: 12px; right: 12px; width: auto; max-width: calc(100% - 24px); top: 64px; }
  .panelToggleBtn { right: 8px; top: 8px; }
  .boardMeta{left:8px;top:8px;max-width:calc(100% - 16px)}
}

/* Compatta la tabella attributi nel pannello flottante */
.floatingPanel .attrControls{gap:6px}
.floatingPanel .attrRow{display:flex;flex-direction:column;gap:6px;padding:6px 8px}
.floatingPanel .attrRowTop{display:grid;grid-template-columns:1fr auto 28px;gap:8px;align-items:center}
.floatingPanel .attrRowBottom{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:hidden}

/* Evita display:contents per le righe nel pannello */
.floatingPanel .attrRowTop,
.floatingPanel .attrRowBottom{display:flex !important}
.floatingPanel .attrRowTop{display:grid !important}

/* Vincoli sempre in orizzontale */
.attrSectionConstraints{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}

/* Pulsante elimina attributo: stile precedente */
.attrDeleteBtn.iconBtn{width:28px;height:28px;border-radius:8px}

/* Azioni proprietà: Elimina + controlli attributi su una riga */
.propsActionRow{padding-top:6px;padding-bottom:10px}
.propsActionRowInner{display:flex;align-items:center;justify-content:space-between;gap:10px}
.propsActionRowInner > #btnDelete{flex:0 0 auto}
.propsActionRowInner > .attrControls{margin-top:0}

/* su pannelli stretti consenti wrap */
.floatingPanel.panel-compact .propsActionRowInner{flex-wrap:wrap;justify-content:flex-start}

/* Bottoni nella riga: testo centrato */
.propsActionRow .attrControls > .tool,
.propsActionRow .attrControls > button.tool{
  justify-content:center;
  text-align:center;
}

/* =========================================================
   Attributi: stile combo tipo + vincoli a badge (pill)
   ========================================================= */

/* Combo tipo (select) */
.attrTypeSelect,
.props .attrTypeSelect,
.floatingPanel .attrTypeSelect{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  background-image:
          linear-gradient(45deg, transparent 50%, rgba(229,231,235,.75) 50%),
          linear-gradient(135deg, rgba(229,231,235,.75) 50%, transparent 50%),
          linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0));
  background-position:
          calc(100% - 16px) calc(50% - 3px),
          calc(100% - 11px) calc(50% - 3px),
          100% 0;
  background-size:5px 5px, 5px 5px, 2.2em 100%;
  background-repeat:no-repeat;
}
.attrTypeSelect:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* Attributi: riempi tutta la riga con il campo Nome (nessun margine a destra) */
.attrRowTop,
.floatingPanel .attrRowTop{
  width:100%;
}

/* il wrapper del nome deve poter crescere fino in fondo */
.attrNameWrap{flex:1;min-width:0;}
.attrNameWrap input[type="text"],
.attrNameWrap .attrNameInput{
  width:100%;
  flex:1;
  min-width:0;
}

/* Vincoli: la riga deve prendere tutta la larghezza e la X va a destra */
.attrSectionConstraints,
.props .attrSectionConstraints,
.floatingPanel .attrSectionConstraints{
  width:100%;
  flex:1;
}

.attrSectionConstraints .attrDelInline{
  margin-left:auto;
}

/* FIX: nome attributo deve riempire tutta la colonna della grid */
.attrRowTop{
  grid-template-columns: minmax(0, 1fr) 150px;
}
.floatingPanel .attrRowTop{
  grid-template-columns: minmax(0, 1fr) auto;
}
.attrNameWrap{width:100%;display:block}

/* FIX: le pill dei vincoli non devono ereditare lo stile label della riga (che le rende "checkbox normali") */
.attrRow label.attrPill,
.floatingPanel .attrRow label.attrPill,
.props .attrRow label.attrPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(2,6,23,.45);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(229,231,235,.92);
  cursor:pointer;
}

.attrRow label.attrPill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Pill vincoli: stato selezionato (check celeste + bordo/accento) */
.attrRow label.attrPill input:checked + span,
.floatingPanel .attrRow label.attrPill input:checked + span,
.props .attrRow label.attrPill input:checked + span{
  color:#fff;
}

.attrRow label.attrPill input:checked + span::before,
.floatingPanel .attrRow label.attrPill input:checked + span::before,
.props .attrRow label.attrPill input:checked + span::before{
  content:'✓ ';
  color:rgba(96,165,250,.95);
  font-weight:900;
}

.attrRow label.attrPill:has(input:checked),
.floatingPanel .attrRow label.attrPill:has(input:checked),
.props .attrRow label.attrPill:has(input:checked){
  border-color:rgba(96,165,250,.45);
  background:rgba(96,165,250,.12);
}

/* Topbar: centra i tool (evita regressioni: i bottoni restano al centro) */
.toolbarCenter{
  width:100%;
  justify-content:center;
  position:relative;
}

.toolbarCenter .toolbarLeft{
  position:absolute;
  left:0;
}

/* =========================================================
   Proprietà ISA + Collegamento: stile select e checkbox coerente
   (mirato solo al pannello proprietà, non tocca entity/relation)
   ========================================================= */

/* Select nel pannello (ISA + cardinalità) come combo "tipo" */
.floatingPanel #isaFields select,
.floatingPanel #cardinalityFields select{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  background-image:
          linear-gradient(45deg, transparent 50%, rgba(229,231,235,.75) 50%),
          linear-gradient(135deg, rgba(229,231,235,.75) 50%, transparent 50%),
          linear-gradient(to right, rgba(255,255,255,.08), rgba(255,255,255,0));
  background-position:
          calc(100% - 16px) calc(50% - 3px),
          calc(100% - 11px) calc(50% - 3px),
          100% 0;
  background-size:5px 5px, 5px 5px, 2.2em 100%;
  background-repeat:no-repeat;
}
.floatingPanel #isaFields select:focus,
.floatingPanel #cardinalityFields select:focus{outline:2px solid rgba(96,165,250,.45);outline-offset:2px}

/* ISA children: checkbox più "moderna" (chip) */
.floatingPanel #propIsaChildren .attrRow{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* chip/label per ogni child, includendo checkbox */
.floatingPanel #propIsaChildren .attrRow label,
.floatingPanel #propIsaChildren .attrRow span{
  color:rgba(229,231,235,.92);
}

.floatingPanel #propIsaChildren input[type="checkbox"]{
  width:16px;
  height:16px;
  border-radius:4px;
  accent-color: rgba(96,165,250,.95);
}

/* CardPair: allinea meglio i due select come nei controlli moderni */
.floatingPanel .cardPair{display:flex;gap:8px;align-items:center}
.floatingPanel .cardPair select{min-width:90px}

/* --- Make menuItem buttons look exactly like links --- */
button.menuItem{
  appearance:none;
  -webkit-appearance:none;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-weight:700;
}

button.menuItem:focus{
  outline: none;
}

button.menuItem:focus-visible{
  outline: 2px solid rgba(96,165,250,.35);
  border-radius: 10px;
}

/* =========================================
   Tabs vista lavagna (Originale / Ristrutturato)
   ========================================= */
.topbarBoardOnly{flex-direction:column;align-items:stretch}

.boardViewTabs{
  display:block;
  padding:8px 14px 0 14px;
  background:rgba(17,24,39,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Quando la tabbar è presente, alza gli overlay bottom (status/zoom) per evitare che finiscano troppo in basso */
.topbarBoardOnly:has(.boardViewTabs){
  --board-tabs-offset: 34px;
}

.boardViewTabList{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.boardViewTab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  text-decoration:none;
  color:rgba(229,231,235,.88);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.2px;
  line-height:1;
}

.boardViewTab:hover{
  color:rgba(255,255,255,.98);
  border-bottom-color:rgba(255,255,255,.18);
}

.boardViewTab.active{
  color:rgba(255,255,255,.98);
  border-bottom-color:rgba(96,165,250,.75);
}

.boardViewTab:focus{outline:none}
.boardViewTab:focus-visible{
  outline:2px solid rgba(96,165,250,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* Tab bloccato (richiede ristrutturazione) */
.boardViewTabLocked{
  cursor:pointer;
  opacity:.5;
  gap:5px;
}
.boardViewTabLocked:hover{
  opacity:.75;
  border-bottom-color:rgba(255,255,255,.12);
}
.boardViewTabLockIcon{
  flex-shrink:0;
  opacity:.7;
}

/* =========================================
   Restructure wizard (modal) – fix layout opzioni (attributi composti)
   Evita testo fuori/una lettera per riga per interferenze CSS globali.
========================================= */
#restructureModal #restructureSteps .rwChoices{display:flex;flex-direction:column;gap:8px;}
#restructureModal #restructureSteps .rwChoice{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;

  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
#restructureModal #restructureSteps .rwChoice:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);}
#restructureModal #restructureSteps .rwChoice.rwChoice--active{border-color:rgba(96,165,250,.40);background:rgba(96,165,250,.10);}

#restructureModal #restructureSteps .rwChoice__radio{
  flex:0 0 auto;
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: rgba(96,165,250,.95);
}

#restructureModal #restructureSteps .rwChoice__text{
  box-sizing:border-box;
  flex:1 1 auto;
  min-width:0;
  display:block;

  /* reset robusto contro CSS 'strani' */
  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  float: none !important;

  font-weight:600;
  letter-spacing:0;
  color:rgba(229,231,235,.92);
  line-height:1.25;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

#restructureModal #restructureSteps .rwChecks{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#restructureModal #restructureSteps .rwCheck{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;

  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  cursor:pointer;
}
#restructureModal #restructureSteps .rwCheck:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03);}

#restructureModal #restructureSteps .rwCheck__box{
  flex:0 0 auto;
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: rgba(96,165,250,.95);
}

#restructureModal #restructureSteps .rwCheck__text{
  box-sizing:border-box;
  flex:1 1 auto;
  min-width:0;
  display:block;

  writing-mode: horizontal-tb !important;
  transform: none !important;
  position: static !important;
  float: none !important;

  font-weight:600;
  letter-spacing:0;
  color:rgba(229,231,235,.92);
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

#restructureModal #restructureSteps .rwInlineRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#restructureModal #restructureSteps .rwInlineRow input[type="text"],
#restructureModal #restructureSteps .rwInlineRow input[type="number"]{
  padding:8px 10px;
  border-radius:10px;
}

#restructureModal #restructureSteps .riTypeAttrBox,
#restructureModal #restructureSteps .rkChooseBox,
#restructureModal #restructureSteps .rmEntityBox,
#restructureModal #restructureSteps .rmDupBox{
  border-left:2px solid rgba(96,165,250,.25);
  padding-left:12px;
  margin-left:18px;
}

/* =========================================
   Restructure wizard – riepilogo finale (step 5)
========================================= */
#restructureModal #restructureSteps .rwSummary{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#restructureModal #restructureSteps .rwSumRow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}

#restructureModal #restructureSteps .rwSumIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  flex:0 0 22px;
  margin-top:1px;
}

#restructureModal #restructureSteps .rwSumIcon--ok{
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.35);
  color:rgba(34,197,94,.98);
}

#restructureModal #restructureSteps .rwSumIcon--warn{
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.35);
  color:rgba(245,158,11,.98);
}

#restructureModal #restructureSteps .rwSumText{min-width:0;flex:1 1 auto;}
#restructureModal #restructureSteps .rwSumTitle{font-weight:900;letter-spacing:.1px;}

#restructureModal #restructureSteps .rwSumNote{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.30);
  background:rgba(245,158,11,.08);
  color:rgba(251,191,36,.98);
  line-height:1.35;
}

/* =========================================================
   Global form controls: select, textarea, file input
   Consistent with the dark theme (matches input styling)
   ========================================================= */
select{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1224;
  color:var(--fg);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(229,231,235,.6) 50%),
    linear-gradient(135deg, rgba(229,231,235,.6) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 9px) calc(50% - 3px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
  cursor:pointer;
}
select:focus{
  outline:2px solid rgba(96,165,250,.45);
  outline-offset:1px;
}
select option{
  background:#121826;
  color:#fff;
}

textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1224;
  color:var(--fg);
  resize:vertical;
  font-family:inherit;
  font-size:inherit;
  line-height:1.5;
}
textarea:focus{
  outline:2px solid rgba(96,165,250,.45);
  outline-offset:1px;
}

input[type="file"]{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.45);
  color:var(--fg);
  cursor:pointer;
}
input[type="file"]::file-selector-button{
  padding:6px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(96,165,250,.12);
  color:rgba(229,231,235,.95);
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  margin-right:10px;
  transition:background .15s,border-color .15s;
}
input[type="file"]::file-selector-button:hover{
  background:rgba(96,165,250,.22);
  border-color:rgba(96,165,250,.4);
}

/* =====================================================================
 *  ATTRIBUTI — Migliorie UX pannello proprietà (v2)
 *  Indentazione gerarchica, badge colorati, caret collapse,
 *  hover state, tree connector per sotto-attributi composti.
 * ===================================================================== */

/* Hover row */
.attrRow{transition:background .12s ease;border-radius:6px}
.attrRow:hover{background:rgba(96,165,250,.06)}

/* Sotto-attributo: indent + tree connector ad "L" */
.attrRow.isSubAttr{
  padding-left:calc(10px + var(--attr-indent, 18px));
  position:relative;
}
.attrRow.isSubAttr::before{
  /* linea verticale che scende dal parent */
  content:'';
  position:absolute;
  left:calc(var(--attr-indent, 18px) - 8px);
  top:0;
  bottom:50%;
  width:2px;
  background:rgba(168,85,247,.45);
  border-radius:2px;
}
.attrRow.isSubAttr::after{
  /* tratto orizzontale verso la riga */
  content:'';
  position:absolute;
  left:calc(var(--attr-indent, 18px) - 8px);
  top:50%;
  width:14px;
  height:2px;
  background:rgba(168,85,247,.45);
  border-radius:2px;
}
.attrRow.isSubAttr.isLastChild::before{
  /* ultima foglia: la linea verticale si interrompe a metà */
  bottom:50%;
}

/* Marker tree (nascosto, sostituito da pseudo-elementi sopra) */
.attrTreeMarker{display:none}

/* Chip "Sub" più visibile */
.attrSubChip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.4px;
  color:#fff;
  background:linear-gradient(135deg, rgba(168,85,247,.85), rgba(124,58,237,.95));
  border:1px solid rgba(255,255,255,.18);
  text-transform:uppercase;
}

/* Pill vincoli: ridisegno con varianti colorate */
.attrPill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;font-weight:600;color:var(--muted);
  cursor:pointer;user-select:none;
  transition:all .12s ease;
}
.attrPill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.attrPill input[type="checkbox"]{accent-color:var(--accent);cursor:pointer}

/* Pill ATTIVE — varianti semantiche.
 * NB: i checkbox sono dentro la label, quindi :has() colora la label
 * automaticamente quando il checkbox è :checked. */
.attrPill:has(input[type="checkbox"]:checked){
  color:#fff;border-color:transparent;
}
.attrPill:nth-child(1):has(input[type="checkbox"]:checked){
  /* Key */
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 1px 6px rgba(34,197,94,.35);
}
.attrPill:nth-child(2):has(input[type="checkbox"]:checked){
  /* Null */
  background:linear-gradient(135deg,#64748b,#475569);
}
.attrPill:nth-child(3):has(input[type="checkbox"]:checked){
  /* Multi */
  background:linear-gradient(135deg,#f59e0b,#d97706);
  box-shadow:0 1px 6px rgba(245,158,11,.35);
}
.attrPill:nth-child(4):has(input[type="checkbox"]:checked){
  /* Comp */
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 1px 6px rgba(168,85,247,.35);
}

/* Pulsante "+ sotto-attributo" più visibile su composti */
.attrAddSubBtn{
  background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,163,74,.28))!important;
  border:1px solid rgba(34,197,94,.45)!important;
  color:#86efac!important;
  font-weight:700;font-size:12px;padding:4px 10px;border-radius:8px;
}
.attrAddSubBtn:hover{
  background:linear-gradient(135deg, rgba(34,197,94,.30), rgba(16,163,74,.45))!important;
  color:#fff!important;
}

/* Caret di collapse per attributi composti */
.attrCaret{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;font-size:10px;line-height:1;
  transition:transform .15s ease, background .12s;
}
.attrCaret:hover{background:rgba(255,255,255,.08);color:var(--fg)}
.attrCaret.isCollapsed{transform:rotate(-90deg)}

/* Riga "composta" (parent): leggera enfasi visiva */
.attrRow.isComposite{
  background:linear-gradient(90deg, rgba(168,85,247,.06), transparent 60%);
  border-left:2px solid rgba(168,85,247,.40);
  padding-left:8px;
}
.attrRow.isComposite.isSubAttr{
  /* per i sub-composti, manteniamo l'indent ma riduciamo la barra */
  border-left:2px solid rgba(168,85,247,.30);
}

/* Separatore visivo tra blocco chiavi e altri attributi */
.attrKeySeparator{
  height:1px;margin:6px 0;
  background:linear-gradient(90deg, transparent, rgba(34,197,94,.45), transparent);
}

/* Quando una riga è nascosta dal collapse */
.attrRow.isHiddenByCollapse{display:none!important}

/* Input nome più leggibile su sotto-attributi */
.attrNameInput.isSubName{font-size:14px;font-weight:600;color:rgba(229,231,235,.95)}

/* =====================================================================
 *  CANVAS — assicurazione che non si stiri (display block, no margin extra)
 * ===================================================================== */
#board{display:block;max-width:100%;}

/* =====================================================================
 *  Modern visual system: dark/light themes, homepage, shared pages
 * ===================================================================== */
:root{
  color-scheme:dark;
  --page-bg:
    radial-gradient(1100px 520px at 8% -8%, rgba(14,165,233,.24), transparent 58%),
    radial-gradient(900px 520px at 88% 4%, rgba(245,158,11,.14), transparent 56%),
    linear-gradient(180deg,#08111f 0%,#0f172a 48%,#111827 100%);
  --surface:rgba(15,23,42,.72);
  --surface-strong:rgba(15,23,42,.88);
  --surface-soft:rgba(255,255,255,.045);
  --surface-hover:rgba(255,255,255,.075);
  --line:rgba(226,232,240,.13);
  --line-strong:rgba(226,232,240,.22);
  --fg:#eef4ff;
  --muted:#a9b7cc;
  --accent:#38bdf8;
  --accent-2:#f59e0b;
  --success:#22c55e;
  --shadow-lg:0 24px 80px rgba(0,0,0,.32);
  --shadow-md:0 14px 42px rgba(0,0,0,.22);
}

html[data-theme="light"]{
  color-scheme:light;
  --page-bg:
    radial-gradient(1000px 520px at 8% -8%, rgba(14,165,233,.18), transparent 58%),
    radial-gradient(820px 460px at 86% 0%, rgba(245,158,11,.16), transparent 56%),
    linear-gradient(180deg,#f8fbff 0%,#eef6ff 46%,#f8fafc 100%);
  --bg:#f8fafc;
  --panel:#ffffff;
  --fg:#0f172a;
  --muted:#5d6b82;
  --accent:#0284c7;
  --surface:rgba(255,255,255,.78);
  --surface-strong:rgba(255,255,255,.94);
  --surface-soft:rgba(15,23,42,.045);
  --surface-hover:rgba(2,132,199,.075);
  --line:rgba(15,23,42,.11);
  --line-strong:rgba(15,23,42,.18);
  --shadow-lg:0 24px 80px rgba(15,23,42,.13);
  --shadow-md:0 14px 42px rgba(15,23,42,.10);
}

body,
.landingBody,
.authBody{
  background:var(--page-bg);
  color:var(--fg);
  text-rendering:optimizeLegibility;
}

html:not([data-theme="light"]) .landingBody{
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(56,189,248,.28), transparent 58%),
    radial-gradient(900px 560px at 92% 2%, rgba(168,85,247,.20), transparent 58%),
    radial-gradient(780px 520px at 76% 78%, rgba(245,158,11,.12), transparent 62%),
    radial-gradient(900px 560px at 16% 92%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(135deg, #020617 0%, #07111f 34%, #0f172a 62%, #111827 100%);
  background-attachment:fixed;
}

body:not(.boardBody)::before,
.landingBody::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 72%);
}

.menuBar,
.landingHeader{
  background:color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 44px rgba(2,6,23,.16);
}

.menuBrand,
.landingBrand,
.menuLink,
.menuTopLink,
.landingNavLink,
.rowLink{
  color:var(--fg);
}

.menuBrandMark,
.landingBrandMark,
.appHeroIcon,
.authLogo{
  background:linear-gradient(145deg, rgba(56,189,248,.20), rgba(245,158,11,.13));
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.themeToggle{
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:13px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--fg);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.themeToggle:hover{background:var(--surface-hover);border-color:var(--line-strong);transform:translateY(-1px)}
.themeToggleIcon{display:none}
html[data-theme="dark"] .themeToggleSun{display:flex}
html[data-theme="light"] .themeToggleMoon{display:flex}
.authThemeToggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:30;
  background:var(--surface);
  backdrop-filter:blur(16px);
}

.menuDrop summary,
.menuTopLink,
.menuLink,
.tool,
.landingNavLink,
.landingBtn,
.authBtn{
  border-color:var(--line);
  background:var(--surface-soft);
  color:var(--fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.menuDrop summary:hover,
.menuTopLink:hover,
.menuLink:hover,
.tool:hover,
.landingNavLink:hover,
.landingBtn:hover,
.authBtn:hover{
  background:var(--surface-hover);
  border-color:var(--line-strong);
}
.menuPanel,
.modalCard{
  background:var(--surface-strong);
  border-color:var(--line);
  box-shadow:var(--shadow-lg);
}
.menuItem{color:var(--fg);border-radius:10px}
.menuItem:hover{background:var(--surface-hover)}

.tool.appPrimary,
.tool.primary,
.landingBtn.primary,
.authBtn.primary{
  color:#fff;
  background:linear-gradient(135deg,#0284c7,#0ea5e9 54%,#f59e0b);
  border-color:rgba(14,165,233,.42);
  box-shadow:0 12px 28px rgba(14,165,233,.22);
}

.props,
.appCard,
.featureCard,
.screenCard,
.priceCard,
.trustItem,
.shotCard,
.authCard,
.infoRow,
.quickCard{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px);
}

.appCard,
.featureCard,
.screenCard,
.priceCard,
.trustItem,
.shotCard,
.authCard{border-radius:18px}

.appHero{
  border-color:var(--line);
  background:
    radial-gradient(620px 260px at 12% 18%, rgba(14,165,233,.24), transparent 62%),
    radial-gradient(560px 240px at 88% 22%, rgba(245,158,11,.18), transparent 62%),
    var(--surface);
  box-shadow:var(--shadow-lg);
}

.muted,
.authSubtitle,
.heroSubtitle,
.sectionSubtitle,
.featureText,
.priceMeta,
.priceList,
.screenHint,
.quickS,
.appHeroSub,
.trustK,
.chipLite,
.pill,
.pagerInfo{
  color:var(--muted);
}

input,
select,
textarea,
.authInputRow,
.inputPill,
input[type="file"],
.zoomBox,
.boardMeta,
.floatingPanel,
.modalNotice,
.notice,
.shotRow{
  background:color-mix(in srgb, var(--surface-strong) 76%, transparent);
  border-color:var(--line);
  color:var(--fg);
}
input::placeholder,
textarea::placeholder{color:color-mix(in srgb, var(--muted) 72%, transparent)}
select option{background:var(--panel);color:var(--fg)}

.table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.tableHead{background:color-mix(in srgb, var(--surface-strong) 84%, transparent);color:var(--muted)}
.tableRow{border-top:1px solid var(--line);transition:background .15s ease}
.tableRow:hover{background:var(--surface-hover)}
.badge,
.chip,
.chip.ghost,
.pillLite,
.chipLite{
  border-color:var(--line);
  background:var(--surface-soft);
  color:var(--fg);
}

.landingMain{
  width:min(1240px, calc(100% - 32px));
  max-width:none;
  padding:34px 0 54px;
  position:relative;
}
.landingHeader{padding:12px max(16px, calc((100vw - 1240px) / 2))}
.landingBrandMark{
  width:40px;
  height:40px;
  border-radius:14px;
}
.landingBrandText{font-size:16px}
.landingNavLink{font-size:13px}

.hero{
  min-height:calc(100vh - 140px);
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:34px;
  align-items:center;
}
.heroLeft{
  padding:34px 0;
}
.heroBadge{
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(245,158,11,.12));
  border-color:var(--line);
  color:var(--fg);
}
.heroTitle{
  max-width:12ch;
  margin:16px 0 14px;
  font-size:clamp(44px, 6.1vw, 78px);
  line-height:.98;
  letter-spacing:0;
}
.heroSubtitle{
  max-width:62ch;
  font-size:16px;
}
.heroCtas{margin-top:24px}
.landingBtn.big{min-height:48px;padding:13px 18px;border-radius:14px}
.heroTrust{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:28px;
}
.trustItem{
  padding:14px;
  border-radius:16px;
}
.trustV{color:var(--fg)}
.shotCard{
  overflow:hidden;
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.shotTop,
.shotFooter{
  background:color-mix(in srgb, var(--surface-strong) 72%, transparent);
  border-color:var(--line);
}
.landingBody .shotCanvas{
  background:
    radial-gradient(760px 280px at 18% 8%, rgba(14,165,233,.16), transparent 58%),
    radial-gradient(620px 260px at 90% 20%, rgba(245,158,11,.16), transparent 58%),
    linear-gradient(135deg, rgba(15,23,42,.18), rgba(15,23,42,.04));
}

.landingSection{
  margin-top:68px;
  scroll-margin-top:92px;
}
.sectionTitle{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.06;
  letter-spacing:0;
}
.sectionSubtitle{font-size:15px}
.featureGrid,
.pricingGrid,
.screenGrid{gap:16px}
.featureCard,
.screenCard,
.priceCard{
  padding:18px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.featureCard:hover,
.screenCard:hover,
.priceCard:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 32%, var(--line));
  box-shadow:var(--shadow-lg);
}
.featureIcon{
  background:linear-gradient(145deg, rgba(14,165,233,.18), rgba(245,158,11,.15));
  border-color:var(--line);
}
.featureTitle,
.priceName,
.screenLabel,
.appCardTitle{
  color:var(--fg);
}
.priceCard.highlight{
  border-color:color-mix(in srgb, var(--accent) 44%, var(--line));
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(14,165,233,.18), transparent 60%),
    var(--surface);
}
.screenMock{
  border-color:var(--line);
  background:var(--surface-soft);
}
.landingFooter,
.footer{
  background:color-mix(in srgb, var(--surface-strong) 78%, transparent);
  border-top:1px solid var(--line);
}
.landingFooterInner{
  width:min(1240px, calc(100% - 32px));
  margin:0 auto;
  padding:22px 0;
  color:var(--fg);
}
.landingFooterTitle{font-weight:950}
.landingFooterText{font-size:13px;margin-top:3px}

html[data-theme="light"] .landingBody .shotCanvas,
html[data-theme="light"] .shotCanvas{
  background:
    radial-gradient(760px 280px at 18% 8%, rgba(14,165,233,.10), transparent 58%),
    radial-gradient(620px 260px at 90% 20%, rgba(245,158,11,.12), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(226,232,240,.48));
}
html[data-theme="light"] .shotCard img{filter:saturate(1.04) contrast(1.02)}
html[data-theme="light"] .btnDonate{box-shadow:0 8px 20px rgba(245,158,11,.22)}
html[data-theme="light"] .topbar,
html[data-theme="light"] .boardMeta,
html[data-theme="light"] .zoomBox,
html[data-theme="light"] .floatingPanel{
  background:rgba(15,23,42,.82);
  color:#eef4ff;
}
html[data-theme="light"] body.boardBody{
  background:linear-gradient(180deg,#0b1224,#0f172a);
  color:#eef4ff;
}

@media (max-width:1100px){
  .landingHeader{flex-wrap:wrap}
  .landingNav{order:3;width:100%;justify-content:center}
  .hero{grid-template-columns:1fr;min-height:auto}
  .heroTitle{max-width:14ch}
  .heroRight{max-width:760px;width:100%;margin:0 auto}
  .shotCard{transform:none}
  .featureGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricingGrid{grid-template-columns:1fr}
}

@media (max-width:760px){
  .landingMain{width:min(100% - 24px, 1240px);padding-top:20px}
  .landingHeader{position:sticky;gap:8px;padding:10px 12px}
  .landingBrandText{display:none}
  .landingNav{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .landingNav::-webkit-scrollbar{display:none}
  .landingNavLink{white-space:nowrap;padding:8px 10px}
  .landingActions{margin-left:0}
  .heroLeft{padding:18px 0 8px}
  .heroTitle{font-size:42px;max-width:none}
  .heroTrust{grid-template-columns:1fr 1fr}
  .heroCtas .landingBtn{width:100%}
  .featureGrid,
  .screenGrid,
  .pricingGrid,
  .cardGrid,
  .quickGrid{grid-template-columns:1fr !important}
  .landingSection{margin-top:46px}
  .screenMock{align-items:flex-start;flex-direction:column}
  .menuBar{align-items:flex-start;flex-wrap:wrap;padding:10px 12px}
  .menuCenter,.menuRight{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .menuPanel{position:fixed;left:12px;right:12px;top:auto;min-width:0}
  .themeToggle{width:36px;height:36px}
  .appHero{align-items:flex-start;flex-direction:column}
  .appHeroRight{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .appStat{text-align:left;flex:1 1 120px}
  .modal{padding:10px}
  .modalCard{max-height:calc(100vh - 32px)}
  .modalFooter{justify-content:stretch;flex-wrap:wrap}
  .modalFooter .tool,.modalFooter .landingBtn{flex:1}
}

@media (max-width:460px){
  .heroTitle{font-size:36px}
  .heroTrust{grid-template-columns:1fr}
  .sectionTitle{font-size:28px}
  .featureCard,.screenCard,.priceCard,.trustItem{padding:14px}
  .btnDonate span{display:none}
  .landingBtn,.tool{max-width:100%;white-space:normal;text-align:center}
}

/* =====================================================================
 *  Visual polish pass: cleaner buttons, tighter hero, stronger light mode
 * ===================================================================== */
:root{
  --page-bg:
    radial-gradient(900px 460px at 16% -12%, rgba(56,189,248,.18), transparent 58%),
    radial-gradient(760px 420px at 86% -8%, rgba(16,185,129,.10), transparent 54%),
    linear-gradient(180deg,#09111f 0%,#0d1727 48%,#111827 100%);
  --surface:rgba(15,23,42,.76);
  --surface-strong:rgba(15,23,42,.94);
  --surface-soft:rgba(255,255,255,.055);
  --surface-hover:rgba(255,255,255,.095);
  --accent:#0ea5e9;
  --accent-deep:#0369a1;
  --accent-soft:rgba(14,165,233,.14);
  --button-fg:#f8fbff;
}

html[data-theme="light"]{
  --page-bg:
    radial-gradient(820px 420px at 16% -10%, rgba(14,165,233,.14), transparent 58%),
    radial-gradient(700px 380px at 86% -8%, rgba(16,185,129,.10), transparent 54%),
    linear-gradient(180deg,#f7fbff 0%,#eef6ff 42%,#ffffff 100%);
  --surface:rgba(255,255,255,.92);
  --surface-strong:#ffffff;
  --surface-soft:rgba(2,6,23,.045);
  --surface-hover:rgba(2,132,199,.08);
  --line:rgba(15,23,42,.13);
  --line-strong:rgba(15,23,42,.24);
  --fg:#0b1220;
  --muted:#334155;
  --accent:#0369a1;
  --accent-deep:#075985;
  --accent-soft:rgba(3,105,161,.10);
}

.landingHeader,
.menuBar{
  background:color-mix(in srgb, var(--surface-strong) 92%, transparent);
  box-shadow:0 10px 34px rgba(2,6,23,.12);
}

.landingBtn,
.tool,
.authBtn,
.menuDrop summary,
.menuTopLink,
.menuLink,
.landingNavLink,
.themeToggle{
  min-height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, transparent), color-mix(in srgb, var(--surface-soft) 88%, transparent));
  color:var(--fg);
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 1px 1px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.landingBtn:hover,
.tool:hover,
.authBtn:hover,
.menuDrop summary:hover,
.menuTopLink:hover,
.menuLink:hover,
.landingNavLink:hover,
.themeToggle:hover{
  background:color-mix(in srgb, var(--surface-hover) 70%, var(--surface-strong));
  border-color:var(--line-strong);
  box-shadow:0 8px 22px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.tool.appPrimary,
.tool.primary,
.landingBtn.primary,
.authBtn.primary{
  color:var(--button-fg);
  background:linear-gradient(180deg,#0ea5e9 0%,#0284c7 100%);
  border-color:rgba(14,165,233,.62);
  box-shadow:0 12px 28px rgba(2,132,199,.26), inset 0 1px 0 rgba(255,255,255,.18);
}

.tool.appPrimary:hover,
.tool.primary:hover,
.landingBtn.primary:hover,
.authBtn.primary:hover{
  background:linear-gradient(180deg,#38bdf8 0%,#0284c7 100%);
  border-color:rgba(14,165,233,.76);
  filter:none;
}

.landingBtn.big{
  min-height:46px;
  padding:12px 18px;
  border-radius:13px;
}

.landingMain{
  padding-top:14px;
}

.hero{
  min-height:auto;
  align-items:start;
  padding-top:8px;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
}

.heroLeft{
  padding:8px 0 28px;
}

.heroRight{
  align-self:start;
  padding-top:8px;
}

.landingBody .heroRight .shotCard,
.shotCard{
  margin-top:0;
}

.heroTitle{
  max-width:13ch;
  margin:12px 0 14px;
  font-size:clamp(46px, 5.7vw, 72px);
  line-height:1;
}

.heroSubtitle{
  color:var(--muted);
  font-weight:500;
}

.heroTrust{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:22px;
}

.trustItem{
  min-width:0;
  padding:11px 10px;
  border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 54%, transparent), var(--surface));
}

.trustK{
  font-size:10px;
  letter-spacing:.45px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.trustV{
  margin-top:5px;
  font-size:13px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.heroBadge,
.featureIcon,
.menuBrandMark,
.landingBrandMark,
.appHeroIcon,
.authLogo{
  background:linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 52%, transparent));
  border-color:color-mix(in srgb, var(--accent) 34%, var(--line));
}

.featureCard,
.screenCard,
.priceCard,
.appCard,
.props,
.authCard,
.shotCard,
.trustItem{
  border-color:var(--line);
  box-shadow:0 18px 48px rgba(2,6,23,.16);
}

.featureCard:hover,
.screenCard:hover,
.priceCard:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 36%, var(--line));
}

html[data-theme="light"] .landingBtn,
html[data-theme="light"] .tool,
html[data-theme="light"] .authBtn,
html[data-theme="light"] .menuDrop summary,
html[data-theme="light"] .menuTopLink,
html[data-theme="light"] .menuLink,
html[data-theme="light"] .landingNavLink,
html[data-theme="light"] .themeToggle{
  color:#0b1220;
  background:linear-gradient(180deg,#ffffff,#f3f7fb);
  box-shadow:0 1px 1px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-theme="light"] .tool.appPrimary,
html[data-theme="light"] .tool.primary,
html[data-theme="light"] .landingBtn.primary,
html[data-theme="light"] .authBtn.primary{
  color:#ffffff;
  background:linear-gradient(180deg,#0284c7,#0369a1);
  border-color:rgba(3,105,161,.58);
  box-shadow:0 12px 28px rgba(3,105,161,.22);
}

html[data-theme="light"] .heroSubtitle,
html[data-theme="light"] .sectionSubtitle,
html[data-theme="light"] .featureText,
html[data-theme="light"] .priceMeta,
html[data-theme="light"] .priceList,
html[data-theme="light"] .screenHint,
html[data-theme="light"] .muted,
html[data-theme="light"] .small{
  color:#334155;
}

html[data-theme="light"] .featureTitle,
html[data-theme="light"] .priceName,
html[data-theme="light"] .screenLabel,
html[data-theme="light"] .appCardTitle,
html[data-theme="light"] .trustV,
html[data-theme="light"] .rowLink,
html[data-theme="light"] label{
  color:#0f172a;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .inputPill,
html[data-theme="light"] .authInputRow,
html[data-theme="light"] .table,
html[data-theme="light"] .modalCard,
html[data-theme="light"] .menuPanel{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(15,23,42,.16);
}

html[data-theme="light"] .chip,
html[data-theme="light"] .chip.ghost,
html[data-theme="light"] .chipLite,
html[data-theme="light"] .pill,
html[data-theme="light"] .pillLite{
  color:#0f172a;
  background:#f8fafc;
  border-color:rgba(15,23,42,.14);
}

html[data-theme="light"] .tableHead{
  background:#f1f5f9;
  color:#334155;
}

html[data-theme="light"] .tableRow:hover{
  background:#f8fafc;
}

@media (max-width:1200px){
  .heroTrust{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .landingMain{padding-top:12px}
  .hero{padding-top:0}
  .heroLeft{padding-top:4px}
  .heroTitle{font-size:40px}
  .heroTrust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heroRight{padding-top:0}
}

@media (max-width:460px){
  .heroTrust{grid-template-columns:1fr}
  .landingBtn,.tool{justify-content:center}
}

/* =====================================================================
 *  Homepage refinement: brighter light mode, gradient title, richer badges
 * ===================================================================== */
:root{
  --hero-title-gradient:linear-gradient(92deg,#f8fbff 0%,#7dd3fc 38%,#34d399 78%,#f8fbff 100%);
}

html[data-theme="light"]{
  --page-bg:
    radial-gradient(760px 360px at 18% -10%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(680px 340px at 84% -8%, rgba(16,185,129,.12), transparent 58%),
    linear-gradient(180deg,#fbfdff 0%,#f1f7ff 42%,#ffffff 100%);
  --surface:rgba(255,255,255,.97);
  --surface-strong:#ffffff;
  --surface-soft:#f7fafc;
  --surface-hover:#edf6ff;
  --line:rgba(15,23,42,.16);
  --line-strong:rgba(15,23,42,.28);
  --fg:#07111f;
  --muted:#26364a;
  --hero-title-gradient:linear-gradient(92deg,#07111f 0%,#0369a1 42%,#047857 78%,#0f172a 100%);
}

.heroTitle{
  color:var(--fg);
  background:var(--hero-title-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-wrap:balance;
}

.heroTitle::selection{
  -webkit-text-fill-color:var(--fg);
}

.heroBadge{
  position:relative;
  padding:8px 13px;
  border-radius:999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 70%, transparent), color-mix(in srgb, var(--accent-soft) 90%, transparent));
  box-shadow:0 10px 26px rgba(2,132,199,.10), inset 0 1px 0 rgba(255,255,255,.12);
}

.heroBadge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.heroTrust{
  grid-column:1 / -1;
  width:100%;
  gap:10px;
  margin-top:4px;
}

.trustItem{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:13px 11px 12px;
  min-height:86px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), var(--surface)),
    linear-gradient(135deg, rgba(14,165,233,.10), rgba(16,185,129,.08));
}

.trustItem::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--badge-accent,#0ea5e9);
}

.trustItem::after{
  content:"";
  position:absolute;
  right:-24px;
  top:-28px;
  width:72px;
  height:72px;
  border-radius:999px;
  background:color-mix(in srgb, var(--badge-accent,#0ea5e9) 14%, transparent);
  z-index:-1;
}

.trustItem:nth-child(1){--badge-accent:#0ea5e9}
.trustItem:nth-child(2){--badge-accent:#10b981}
.trustItem:nth-child(3){--badge-accent:#6366f1}
.trustItem:nth-child(4){--badge-accent:#f59e0b}
.trustItem:nth-child(5){--badge-accent:#14b8a6}
.trustItem:nth-child(6){--badge-accent:#8b5cf6}

.trustK{
  color:color-mix(in srgb, var(--badge-accent,#0ea5e9) 72%, var(--fg));
  font-weight:950;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.trustV{
  color:var(--fg);
  font-weight:900;
  font-size:14px;
  line-height:1.32;
  overflow-wrap:normal;
}

html[data-theme="light"] body:not(.boardBody)::before,
html[data-theme="light"] .landingBody::before{
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.42), transparent 70%);
}

html[data-theme="light"] .landingHeader,
html[data-theme="light"] .menuBar{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(15,23,42,.12);
  box-shadow:0 10px 28px rgba(15,23,42,.10);
}

html[data-theme="light"] .landingBrand,
html[data-theme="light"] .menuBrand,
html[data-theme="light"] .menuItem,
html[data-theme="light"] .menuDrop summary,
html[data-theme="light"] .landingNavLink,
html[data-theme="light"] .landingBtn,
html[data-theme="light"] .tool,
html[data-theme="light"] .authBtn,
html[data-theme="light"] a:not(.landingBtn):not(.tool):not(.menuItem):not(.menuBrand):not(.landingBrand){
  color:#07111f;
}

html[data-theme="light"] .heroSubtitle,
html[data-theme="light"] .sectionSubtitle,
html[data-theme="light"] .featureText,
html[data-theme="light"] .priceMeta,
html[data-theme="light"] .priceList,
html[data-theme="light"] .screenHint,
html[data-theme="light"] .quickS,
html[data-theme="light"] .appHeroSub,
html[data-theme="light"] .authSubtitle,
html[data-theme="light"] .authFootnote,
html[data-theme="light"] .infoKey,
html[data-theme="light"] .pagerInfo,
html[data-theme="light"] .muted,
html[data-theme="light"] .small{
  color:#26364a !important;
}

html[data-theme="light"] .featureCard,
html[data-theme="light"] .screenCard,
html[data-theme="light"] .priceCard,
html[data-theme="light"] .appCard,
html[data-theme="light"] .props,
html[data-theme="light"] .authCard,
html[data-theme="light"] .shotCard,
html[data-theme="light"] .trustItem,
html[data-theme="light"] .infoRow,
html[data-theme="light"] .quickCard{
  background:#ffffff;
  border-color:rgba(15,23,42,.14);
  box-shadow:0 18px 48px rgba(15,23,42,.10);
}

html[data-theme="light"] .featureCard:hover,
html[data-theme="light"] .screenCard:hover,
html[data-theme="light"] .priceCard:hover{
  border-color:rgba(3,105,161,.34);
  box-shadow:0 24px 60px rgba(15,23,42,.13);
}

html[data-theme="light"] .heroBadge{
  color:#075985;
  background:linear-gradient(180deg,#ffffff,#eaf6ff);
  border-color:rgba(3,105,161,.20);
}

html[data-theme="light"] .trustItem{
  background:
    linear-gradient(180deg,#ffffff,#f8fbff),
    linear-gradient(135deg, rgba(14,165,233,.08), rgba(16,185,129,.08));
}

html[data-theme="light"] .trustK{
  color:color-mix(in srgb, var(--badge-accent,#0369a1) 82%, #0f172a);
}

html[data-theme="light"] .trustV,
html[data-theme="light"] .featureTitle,
html[data-theme="light"] .priceName,
html[data-theme="light"] .screenLabel,
html[data-theme="light"] .appCardTitle,
html[data-theme="light"] .authTitle,
html[data-theme="light"] .infoVal,
html[data-theme="light"] .rowLink,
html[data-theme="light"] .quickT,
html[data-theme="light"] label{
  color:#07111f !important;
}

html[data-theme="light"] .chip,
html[data-theme="light"] .chip.ghost,
html[data-theme="light"] .chipLite,
html[data-theme="light"] .pill,
html[data-theme="light"] .pillLite,
html[data-theme="light"] .priceBadge{
  color:#0f172a;
  background:#f8fafc;
  border-color:rgba(15,23,42,.16);
}

html[data-theme="light"] .priceBadge{
  color:#064e3b;
  background:linear-gradient(180deg,#dcfce7,#bbf7d0);
  border-color:rgba(22,101,52,.22);
}

html[data-theme="light"] .featureCard svg text,
html[data-theme="light"] .screenCard svg text{
  fill:#0f172a;
}

html[data-theme="light"] .featureCard svg text[fill="#9ca3af"],
html[data-theme="light"] .screenCard svg text[fill="#9ca3af"]{
  fill:#475569;
}

html[data-theme="light"] .featureCard svg rect[fill="rgba(15,23,42,.92)"]{
  fill:#ffffff;
}

html[data-theme="light"] .featureCard svg rect[stroke="rgba(229,231,235,.7)"]{
  stroke:rgba(15,23,42,.38);
}

html[data-theme="light"] .featureCard svg line[stroke="rgba(229,231,235,.65)"]{
  stroke:rgba(15,23,42,.58);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#ffffff;
  color:#07111f;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:#64748b;
}

@media (max-width:1200px){
  .heroTitle{
    max-width:15ch;
  }
}