diff --git a/quasar.config.ts b/quasar.config.ts
index 68ac12ab..da70404f 100644
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -35,7 +35,6 @@ export default defineConfig((ctx) => {
         node: 'node20',
       },
 
-      // ✅ AGGIUNTO: Importa automaticamente variables.scss ovunque
       sassVariables: 'src/css/variables.scss',
 
       vueRouterMode: 'history',
diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts
index 667882af..96739c13 100755
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -190,6 +190,7 @@ export const shared_consts = {
     PROFILE_COMPLETITION: 1510,
     RISOHOME: 1600,
     RISOHOME_MODERN: 1610,
+    RISOHOME_PAGFINALE: 1615,
     PAGERIS: 1620,
     CMYCIRCUITS: 1630,
     CREA_VOLANTINO: 1700,
@@ -2122,6 +2123,11 @@ export const shared_consts = {
       label: 'RISO Home Modern',
       icon: 'fas fa-home',
     },
+    {
+      value: 1615, // RISOHOME_PAGFINALE
+      label: 'RISO Home (Parte Finale))',
+      icon: 'fas fa-home',
+    },
     {
       value: 1620, // PAGERIS
       label: 'Pagina RIS',
diff --git a/src/components/CGridOriz/CGridOriz.ts b/src/components/CGridOriz/CGridOriz.ts
index 10289cc8..74c6178b 100755
--- a/src/components/CGridOriz/CGridOriz.ts
+++ b/src/components/CGridOriz/CGridOriz.ts
@@ -67,6 +67,11 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    prop_compatto: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     finder: {
       type: Boolean,
       required: false,
diff --git a/src/components/CGridOriz/CGridOriz.vue b/src/components/CGridOriz/CGridOriz.vue
index 99f1bb64..58c31509 100755
--- a/src/components/CGridOriz/CGridOriz.vue
+++ b/src/components/CGridOriz/CGridOriz.vue
@@ -22,6 +22,7 @@
       labelElemFind="trovati"
       :choose_visutype="visuType"
       :butt_modif_new="prop_modif"
+      :compatto="prop_compatto"
       :noresultLabel="
         t('grid.nosearchfound') + ' ' + (showMap ? t('grid.intheareamap') : '')
       "
diff --git a/src/components/CGridTableRec/CGridTableRec.scss b/src/components/CGridTableRec/CGridTableRec.scss
index 9c91f8c8..9cd1fe12 100755
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -1,3 +1,6 @@
+// ========================================
+// SHADOW VARIABLES
+// ========================================
 $shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
 $shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
 $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
@@ -20,22 +23,23 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
   margin-top: 3px;
 }
 
-.q-table td {
-  padding-left: 1px;
-  padding-right: 2px;
-  padding-top: 0;
-  padding-bottom: 0;
-
-  &__title {
-    font-size: 1rem;
-  }
-}
-
 .q-table {
+  td {
+    padding: 0 2px 0 1px;
+
+    &__title {
+      font-size: 1rem;
+    }
+  }
+
   &__col {
     font-size: 1rem;
     color: gray;
   }
+
+  &__top {
+    padding-top: 0 !important;
+  }
 }
 
 .newrec_fields {
@@ -51,10 +55,6 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
   padding: 3px 6px !important;
 }
 
-.q-table__top {
-  padding-top: 0 !important;
-}
-
 // ========================================
 // DIALOG & LAYOUT
 // ========================================
@@ -87,20 +87,21 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
 .carousel-scroll-container {
   overflow-y: auto;
   max-height: calc(100vh - 120px);
-  
+
+  // Scrollbar styling
   &::-webkit-scrollbar {
     width: 6px;
   }
-  
+
   &::-webkit-scrollbar-track {
     background: rgba(0, 0, 0, 0.05);
     border-radius: 3px;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 3px;
-    
+
     &:hover {
       background: rgba(0, 0, 0, 0.3);
     }
@@ -148,15 +149,20 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
 }
 
 // ========================================
-// INFINITE SCROLL
-// ========================================
-// ========================================
-// GRID LAYOUT PER CARD
+// GRID LAYOUT PER CARD (INFINITE SCROLL)
 // ========================================
 .q-infinite-scroll {
   padding: 6px;
   gap: 8px;
-  
+
+  // Mobile: colonna singola
+  @media (max-width: $mobile-breakpoint) {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    gap: 6px;
+  }
+
   // Desktop: layout a griglia 2 colonne
   @media (min-width: $mobile-breakpoint) {
     display: grid;
@@ -164,20 +170,12 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
     gap: 10px;
     padding: 8px;
   }
-  
-  // Desktop large: 3 colonne per schermi molto larghi
+
+  // Desktop large: mantiene 2 colonne con gap maggiore
   @media (min-width: 1400px) {
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
   }
-  
-  // Mobile: colonna singola
-  @media (max-width: $mobile-breakpoint) {
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-    gap: 6px;
-  }
 }
 
 // ========================================
@@ -209,6 +207,10 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
     padding: 3px 6px;
   }
 }
+
+// ========================================
+// GRID CARD ITEM
+// ========================================
 .grid-card-item {
   width: 100%;
   background: rgba(255, 255, 255, 0.7);
@@ -216,14 +218,16 @@ $shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.9);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  padding: 8px; // Spazio tra carousel e card
-  
+  padding: 8px;
+
   @media (max-width: $mobile-breakpoint) {
-    width: 100%;
-    padding: 4px; // Ridotto su mobile
+    padding: 4px;
   }
 }
 
+// ========================================
+// UTILITY CLASSES
+// ========================================
 .fill-all-width {
   width: 100%;
 }
\ No newline at end of file
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index def02555..5fd5a167 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -40,6 +40,7 @@ import { CMyUser } from '../CMyUser';
 import { CMyGroups } from '../CMyGroups';
 import { CMyFieldDb } from '../CMyFieldDb';
 import { CMyRecCard } from '../CMyRecCard';
+import { CMyRecEventi } from '../CMyRecEventi';
 import { CMyRecCatalog } from '../CMyRecCatalog';
 import { CMyRecRaccoltaCataloghi } from '../CMyRecRaccoltaCataloghi';
 import { CMapByTable } from '../CMapByTable';
@@ -176,6 +177,11 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    compatto: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     actionType: {
       type: Number,
       required: false,
@@ -381,6 +387,7 @@ export default defineComponent({
     CMyGroups,
     CMyUser,
     CMyRecCard,
+    CMyRecEventi,
     CMyRecCatalog,
     CMyCardPopup,
     CMyRecGrpCard,
@@ -1341,14 +1348,20 @@ export default defineComponent({
                   obj2.idSkill = idSkill;
                   filtersearch2.push(obj2);
                 }
-              } else if (item.table === toolsext.TABGOODS && item.value === costanti.FILTER_TUTTI) {
+              } else if (
+                item.table === toolsext.TABGOODS &&
+                item.value === costanti.FILTER_TUTTI
+              ) {
                 const obj2: any = {};
                 if (idSectorGood > 0) {
                   // idSectorGood
                   obj2['sectorGood._id'] = idSectorGood;
                   filtersearch2.push(obj2);
                 }
-              } else if (item.table === toolsext.TABBACHECAS && item.value === costanti.FILTER_TUTTI) {
+              } else if (
+                item.table === toolsext.TABBACHECAS &&
+                item.value === costanti.FILTER_TUTTI
+              ) {
                 const obj2: any = {};
                 if (idSectorBacheca > 0) {
                   // idSectorBacheca
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index 301635c8..fc618daf 100755
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -89,6 +89,8 @@
     >
     </CTitleBanner>
 
+
+
     <div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
       <div
         v-if="(prop_search || canEdit) && finder"
@@ -444,7 +446,29 @@
         :style="heightcarousel ? `height: ${heightcarousel}` : ''"
         v-intersection="onIntersection"
       >
+        <div v-if="tablesel === shared_consts.TABLES_MYBACHECAS && compatto">
+          <div
+            v-for="(row, indexrow) in serverData.slice(0, 5)"
+            :key="row._id || indexrow"
+            :class="{
+              row: opt.rowclass,
+              'items-stretch': opt.rowclass,
+            }"
+          >
+            <CMyRecEventi
+              :table="tablesel"
+              :prop_myrec="row"
+              @cmdext="cmdExt"
+              :editOn="editOn"
+              :margin_right="margin_right"
+              :compatto="compatto"
+            >
+            </CMyRecEventi>
+          </div>
+        </div>
+
         <q-carousel
+          v-else
           swipeable
           animated
           :autoplay="autoplay"
@@ -507,6 +531,7 @@
               @cmdext="cmdExt"
               :editOn="editOn"
               :margin_right="margin_right"
+              :compatto="compatto"
             >
             </CMyRecCard>
           </q-carousel-slide>
@@ -523,10 +548,7 @@
 
       <q-infinite-scroll
         ref="myinfscroll"
-        v-else-if="
-          shared_consts.VERTIC_SHOW_GRID.includes(myvertical) &&
-          alreadymounting
-        "
+        v-else-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && alreadymounting"
         :initial-index="0"
         @load="onLoadScroll"
         :offset="350"
@@ -631,6 +653,7 @@
                 @cmdext="cmdExt"
                 :editOn="editOn"
                 :margin_right="margin_right"
+                :compatto="compatto"
               >
               </CMyRecCard>
             </div>
@@ -699,9 +722,7 @@
       </q-infinite-scroll>
       <q-table
         v-else-if="
-          !shared_consts.VERTIC_SHOW_GRID.includes(myvertical) &&
-          serverData &&
-          mycolumns
+          !shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && serverData && mycolumns
         "
         :grid="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
         :grid-header="
@@ -728,55 +749,38 @@
         selection="single"
         v-model:selected="selected"
       >
-        <template
-          v-if="
-            !(
-              myvertical === costanti.VISUTABLE_SCHEDA_USER ||
-              myvertical === 2 ||
-              myvertical === costanti.VISUTABLE_SCHEDA_GROUP
-            )
-          "
-          v-slot:header="props"
-        >
+        <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th> </q-th>
+            <q-th />
             <q-th
-              v-for="col in props.cols"
-              :key="col.name"
+              v-for="(col, index) in (props.cols || []).filter(
+                (c) => c !== undefined && c !== null
+              )"
+              :key="col.name || index"
               :props="props"
               class="text-italic text-weight-bold"
             >
-              <span v-if="col && showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)">
-                {{ col.label }}
+              <span v-if="col">
+                <template
+                  v-if="
+                    !(
+                      myvertical === costanti.VISUTABLE_SCHEDA_USER ||
+                      myvertical === 2 ||
+                      myvertical === costanti.VISUTABLE_SCHEDA_GROUP
+                    ) &&
+                    showColCheck &&
+                    showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)
+                  "
+                >
+                  {{ col.label }}
+                </template>
+                <template v-else-if="col.sortable !== undefined">
+                  {{ col.label }}
+                </template>
               </span>
             </q-th>
           </q-tr>
         </template>
-        <template
-          v-else
-          v-slot:header="props"
-        >
-          <q-tr :props="props">
-            <q-th> </q-th>
-
-            <span
-              v-for="col in props.cols"
-              :key="col.name"
-            >
-              <q-th
-                v-if="col.sortable"
-                :key="col.name"
-                :props="props"
-                class="text-italic text-weight-bold"
-              >
-                <span>
-                  {{ col.label }}
-                </span>
-              </q-th>
-            </span>
-          </q-tr>
-        </template>
-
         <template
           v-slot:top-right
           v-if="tablesList || arrfilters || enableExport"
diff --git a/src/components/CMyEditElem/CMyEditElem.vue b/src/components/CMyEditElem/CMyEditElem.vue
index acd5c024..7be0ded3 100755
--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -1539,6 +1539,41 @@
               label="Bottone Modifica"
               @update:model-value="modifElem"
             ></q-toggle>
+            <q-toggle
+              v-model="myel.parambool5"
+              color="positive"
+              label="Compatto"
+              @update:model-value="modifElem"
+            ></q-toggle>
+
+            <q-input
+              dense
+              label="Titolo Principale"
+              @update:model-value="modifElem"
+              v-model="myel.stiletit_str"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              dense
+              label="Icona Titolo Normale:"
+              @update:model-value="modifElem"
+              v-model="myel.stiletit_icon"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+
+            <q-input
+              dense
+              label="Link Principale: /..."
+              @update:model-value="modifElem"
+              v-model="myel.container2"
+              filled
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
           </div>
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.RACCOLTE_CATALOGHI"></div>
diff --git a/src/components/CMyElem/CMyElem.scss b/src/components/CMyElem/CMyElem.scss
index b8ce3308..99a028c6 100755
--- a/src/components/CMyElem/CMyElem.scss
+++ b/src/components/CMyElem/CMyElem.scss
@@ -1,44 +1,241 @@
+// ========================================
+// COLOR VARIABLES
+// ========================================
 $grayshadow: #555;
-
 $textcol: blue;
 $textcol_scuro: darkblue;
 
+// Dark mode variants
+$grayshadow-dark: #222;
+$textcol-dark: #64b5f6;
+$textcol_scuro-dark: #90caf9;
+
+// ========================================
+// TYPOGRAPHY BASE
+// ========================================
 p {
   margin: 0 0 1.25rem;
-  //text-shadow: .125rem .125rem .25rem $grayshadow;
 }
 
 h4 {
   font-size: 1.25rem;
+  line-height: 1.5;
+  text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+
+  .body--dark & {
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow-dark;
+  }
 }
 
+// ========================================
+// HEADING STYLES
+// ========================================
+.text-h1,
+h1 {
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 3rem;
+  letter-spacing: -0.01562em;
+  margin-bottom: 8px !important;
+}
+
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 3.75rem;
+  letter-spacing: -0.00833em;
+}
+
+.text-weight-bold {
+  font-weight: 700;
+}
+
+.text-vers {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: 0.00937em;
+  text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+
+  .body--dark & {
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow-dark;
+  }
+}
+
+// ========================================
+// CARD & UTILITY
+// ========================================
 .mycard {
   visibility: hidden;
 }
 
+.shadow {
+  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
+
+  .body--dark & {
+    text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow-dark;
+  }
+}
+
+// ========================================
+// LANDING PAGE - BACKGROUND & LAYOUT
+// ========================================
 .landing_background {
-  background: #000 url(/images/foto1.jpg) no-repeat 50% fixed;
-  background-size: cover
+  background: #000 url("/images/foto1.jpg") no-repeat 50% fixed;
+  background-size: cover;
 }
 
-.landing>section {
-  display: -webkit-box;
-  display: -ms-flexbox;
+.landing > section {
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  //padding: 0 16px
+
+  > div {
+    position: relative;
+    width: 100%;
+  }
+
+  &.padding {
+    padding: 5.62rem 1rem;
+  }
+
+  &.padding_testo {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  &.padding_gallery {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+  }
 }
 
+// ========================================
+// LANDING TOOLBAR
+// ========================================
+.landing__toolbar {
+  background: linear-gradient(180deg, #000, transparent);
+  padding: 0 !important;
+
+  .q-btn {
+    border-radius: 0 0 0.315rem 0.315rem;
+    align-self: stretch;
+  }
+}
+
+// ========================================
+// LANDING HERO
+// ========================================
+.landing__hero {
+  min-height: 50vh;
+}
+
+.landing__header {
+  height: 18vh;
+}
+
+.landing__arrow {
+  bottom: 1.5rem;
+  opacity: 0.4;
+}
+
+.landing__front {
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 15%);
+}
+
+.landing__logo {
+  width: 9.4rem;
+  height: 9.4rem;
+  margin-top: 1.315rem;
+}
+
+// ========================================
+// LANDING FEATURES
+// ========================================
+.landing__features {
+  .q-icon {
+    font-size: 4rem;
+  }
+
+  h4,
+  h6 {
+    margin: 1rem 0;
+  }
+
+  p {
+    opacity: 0.7;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}
+
+.feat-descr {
+  font-size: 1.15rem;
+
+  &:hover {
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0.9;
+  }
+}
+
+// ========================================
+// LANDING FOOTER
+// ========================================
+.landing__footer {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 95%, #fff);
+  padding: 4.5rem 1.25rem !important;
+  color: #9f9f9f;
+
+  .body--dark & {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 95%, #1a1a1a);
+    color: #b0b0b0;
+  }
+
+  .doc-link {
+    color: $textcol;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    .body--dark & {
+      color: $textcol-dark;
+    }
+  }
+}
+
+.landing__footer-icons {
+  font-size: 1.75rem;
+
+  a {
+    margin: 0 0.5rem 0.5rem;
+    text-decoration: none;
+    outline: 0;
+    color: $textcol;
+    transition: color 0.28s;
+
+    &:hover {
+      color: $textcol_scuro;
+    }
+
+    .body--dark & {
+      color: $textcol-dark;
+
+      &:hover {
+        color: $textcol_scuro-dark;
+      }
+    }
+  }
+}
+
+// ========================================
+// INTRO SECTION
+// ========================================
 .intro {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
-  /* flex-flow: row nowrap; */
-
-  padding: 1.25rem 0 1.25rem 0;
-  margin: .125rem;
+  padding: 1.25rem 0;
+  margin: 0.125rem;
 
   * {
     width: 100%;
@@ -47,10 +244,7 @@ h4 {
     margin-right: auto;
   }
 
-  &__associazione {
-    min-width: 350px;
-  }
-
+  &__associazione,
   &__comeassociarsi {
     min-width: 350px;
   }
@@ -64,160 +258,20 @@ h4 {
   font-size: 1rem;
 }
 
-.landing>section.padding {
-  padding: 5.62rem 1rem;
-}
-
-.landing>section.padding_testo {
-  padding-top: 1.25rem;
-  padding-bottom: 1rem;
-}
-
-.landing>section.padding_gallery {
-  padding-top: 3.125rem;
-  padding-bottom: 5.625rem;
-}
-
-.landing>section>div {
-  position: relative;
-  width: 100%
-}
-
+// ========================================
+// LAYOUT UTILITIES
+// ========================================
 .maxwidth1200 {
   max-width: 1200px;
 }
 
-.landing__toolbar {
-  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
-  background: linear-gradient(180deg, #000, transparent);
-  padding: 0 !important
-}
-
-.landing__toolbar .q-btn {
-  border-radius: 0 0 .315rem .315rem;
-  -ms-flex-item-align: stretch;
-  align-self: stretch
-}
-
-.landing__hero {
-  min-height: 50vh
-}
-
-.landing__header {
-  height: 18vh
-}
-
-.landing__arrow {
-  bottom: 1.5rem;
-  opacity: .4
-}
-
-.landing__front {
-  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
-  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
-}
-
-.landing__logo {
-  width: 9.40rem;
-  height: 9.40rem;
-  margin-top: 1.315rem;
-  //-webkit-animation: logo-rotate 240s linear infinite;
-  //animation: logo-rotate 240s linear infinite
-}
-
-.landing__features .q-icon {
-  font-size: 4rem
-}
-
-h4 {
-  line-height: 1.5;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-.landing__features h4,
-.landing__features h6 {
-  margin: 1rem 0
-}
-
-.landing__features p {
-  opacity: .7;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.landing__footer {
-  //background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
-  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF);
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  color: #9f9f9f;
-}
-
-.icon_contact:hover {
-  color: blue;
-  border-color: white;
-  border-width: .0625rem;
-}
-
-.landing__footer .doc-link {
-  color: $textcol;
-}
-
-.landing__footer .doc-link:hover {
-  opacity: .8
-}
-
-.feat-descr {
-  font-size: 1.15rem;
-}
-
-.feat-descr:hover {
-  transition: opacity 0.5s ease-in-out;
-  opacity: 0.9;
-}
-
 .q-col-gutter-sm {
-  padding: 3.125rem 3.125rem;
-  //margin-left: -48px
+  padding: 3.125rem;
 }
 
-body.mobile .landing:before {
-  content: "";
-  position: fixed;
-  top: 0;
-  height: 100vh;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  //background: #000 url(/images/cover.jpg) 50%;
-
-  background-size: cover
-}
-
-/*
-@-webkit-keyframes logo-rotate {
-  to {
-    -webkit-transform: rotate(-1turn);
-    transform: rotate(-1turn)
-  }
-}
-
-@keyframes logo-rotate {
-  to {
-    -webkit-transform: rotate(-1turn);
-    transform: rotate(-1turn)
-  }
-}
-*/
-
 .home {
-  //background-color: rgb(250, 250, 250);
   padding: 3.125rem;
   display: flex;
-  //flex-wrap: nowrap;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
@@ -227,86 +281,291 @@ body.mobile .landing:before {
   margin: 3.125rem;
 }
 
-.shadow {
-  //color: white;
-  text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
-}
-
-.text-h1,
-h1 {
-  font-size: 3rem;
-  font-weight: bold;
-  line-height: 3rem;
-  letter-spacing: -.01562em;
-  margin-bottom: 8px !important;
-}
-
-.text-h2 {
-  font-size: 3.75rem;
-  font-weight: 300;
-  line-height: 3.75rem;
-  letter-spacing: -.00833em;
-}
-
-.text-weight-bold {
-  font-weight: 700;
-}
-
-.text-vers {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  letter-spacing: .00937em;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-
-.landing__footer-icons {
-  font-size: 1.75rem
-}
-
-.landing__footer-icons a {
-  margin: 0 .5rem .5rem;
-  text-decoration: none;
-  outline: 0;
-  color: $textcol;
-  transition: color .28s
-}
-
-.landing__footer-icons a:hover {
-  color: $textcol_scuro;
-}
-
-.doc-img {
-  max-width: 100%;
-}
-
-.mylist {
-  background: #3fdaff;
-  padding-left: 1.25rem;
-}
-
-.clgutter {
-  margin-top: 1.25rem;
-  padding: .62rem;
+// ========================================
+// MOBILE BACKGROUND
+// ========================================
+body.mobile .landing::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background-size: cover;
 }
 
+// ========================================
+// GALLERY & CAROUSEL
+// ========================================
 .carousel_img_3 {
-  //background-image: url(/images/cibo_sano.jpg);
   background-size: cover !important;
   background-position: 50% center !important;
   background-repeat: no-repeat !important;
 }
 
-@media (max-width: 718px) {
-  // PER VERSIONE MOBILE
+.custom-caption {
+  text-align: center;
+  padding: 0.75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, 0.3);
 
+  .body--dark & {
+    color: $textcol-dark;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.sfondo-grigio {
+  padding: 1rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, 0.35);
+
+  .body--dark & {
+    color: $textcol-dark;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+// ========================================
+// CONTACTS
+// ========================================
+.mycontacts {
+  color: gray;
+  letter-spacing: 0.078rem;
+
+  .body--dark & {
+    color: #aaa;
+  }
+}
+
+.mycontacts_title {
+  text-shadow: 0.125rem 0.125rem 0.125rem #555;
+  font-weight: bold;
+  color: #999;
+  letter-spacing: 0.125rem;
+
+  .body--dark & {
+    text-shadow: 0.125rem 0.125rem 0.125rem #222;
+    color: #bbb;
+  }
+}
+
+.mycontacts_text {
+  color: #999;
+  letter-spacing: 0.093rem;
+
+  .body--dark & {
+    color: #bbb;
+  }
+}
+
+.icon_contact {
+  &:hover {
+    color: blue;
+    border-color: white;
+    border-width: 0.0625rem;
+
+    .body--dark & {
+      color: $textcol-dark;
+    }
+  }
+}
+
+// ========================================
+// GUTTER & SPACING
+// ========================================
+.clgutter {
+  margin-top: 1.25rem;
+  padding: 0.62rem;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 1.25rem;
+
+  .body--dark & {
+    background: #1a8a9e;
+  }
+}
+
+// ========================================
+// IMAGE
+// ========================================
+.doc-img {
+  max-width: 100%;
+}
+
+// ========================================
+// EDITOR STYLES
+// ========================================
+.clEditDiv {
+  border: 2px solid #c8c9cb;
+  padding: 2px;
+
+  .body--dark & {
+    border-color: #555;
+  }
+}
+
+.clEditNotActive {
+  background-color: #e6e6e6;
+
+  .body--dark & {
+    background-color: #3a3a3a;
+  }
+}
+
+.clEdit {
+  border: 2px solid #f69f09;
+  padding: 2px;
+
+  &:hover {
+    border-color: #11f609;
+    cursor: pointer;
+  }
+}
+
+.selectedElem {
+  border: 3px solid #b91111 !important;
+}
+
+.elemEdit {
+  margin: 3px;
+  padding: 3px;
+  text-align: center;
+  font-weight: bold;
+
+  &:hover {
+    border: 2px solid #11f609;
+    cursor: pointer;
+  }
+}
+
+.myElemBase {
+  margin-bottom: 16px;
+}
+
+// ========================================
+// ALIGNMENT UTILITIES
+// ========================================
+.align_center {
+  text-align: center;
+}
+
+.align_right {
+  text-align: right;
+}
+
+.align_left {
+  text-align: left;
+}
+
+// ========================================
+// FLEX UTILITIES
+// ========================================
+.flex3 {
+  display: flex;
+  justify-content: space-between;
+  background-color: green;
+
+  .body--dark & {
+    background-color: #1b5e20;
+  }
+}
+
+// ========================================
+// CONTENT SECTION
+// ========================================
+.content-section {
+  background: white;
+  border-radius: $r-lg;
+  padding: $s-sm;
+  margin-bottom: $s-sm;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .body--dark & {
+    background: #2d2d2d;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+
+    &:hover {
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $s-sm;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+
+    .body--dark & {
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+// ========================================
+// SECTION TITLE
+// ========================================
+.section-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: $s-sm;
+  background: $gradient-primary;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  .q-icon {
+    background: $gradient-primary;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .body--dark & {
+    background: $gradient-primary;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    .q-icon {
+      background: $gradient-primary;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
+// ========================================
+// MOBILE RESPONSIVE
+// ========================================
+@media (max-width: 718px) {
   .landing__hero {
-    text-align: center
+    text-align: center;
+
+    .text-h1,
+    h1 {
+      font-size: 2rem;
+      line-height: 2.05rem;
+      margin-bottom: 1.25rem;
+    }
   }
 
   .landing__header {
-    height: 7vh
+    height: 7vh;
   }
 
   .clgutter {
@@ -314,43 +573,42 @@ h1 {
     padding: 0;
   }
 
-  .landing__hero .text-h1,
-  h1 {
-    font-size: 2rem;
-    line-height: 2.05rem;
-    margin-bottom: 1.25rem
+  .landing > section {
+    &.padding {
+      padding: 2.5rem 1rem;
+    }
+
+    &.padding_testo {
+      padding-top: 1.25rem;
+      padding-bottom: 1rem;
+    }
+
+    &.padding_gallery {
+      padding-top: 3.125rem;
+      padding-bottom: 5.625rem;
+      max-width: 800px;
+
+      > div {
+        padding-top: 3.125rem;
+        padding-bottom: 5.625rem;
+      }
+    }
   }
 
-  .landing>section.padding {
-    padding: 2.5rem 1rem;
-  }
-
-  .landing>section.padding_testo {
-    padding-top: 1.25rem;
-    padding-bottom: 1rem;
-  }
-
-  .landing>section.padding_gallery {
-    padding-top: 3.125rem;
-    padding-bottom: 5.625rem;
-
-    max-width: 800px;
-  }
-
-  .landing>section.padding_gallery>div {
-    padding-top: 3.125rem;
-    padding-bottom: 5.625rem;
-
-  }
-
-  .landing__features h4,
-  .landing__features h6 {
-    margin: 1.25rem 0
+  .landing__features {
+    h4,
+    h6 {
+      margin: 1.25rem 0;
+    }
   }
 
   h4 {
     line-height: 1.4;
     text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+
+    .body--dark & {
+      text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow-dark;
+    }
   }
 
   .landing .feature-item {
@@ -367,13 +625,11 @@ h1 {
   }
 
   .landing__hero-btns {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center
+    justify-content: center;
   }
 
   .q-col-gutter-sm {
-    padding: .625rem .315rem;
+    padding: 0.625rem 0.315rem;
   }
 
   .text-subtitle1 {
@@ -383,91 +639,4 @@ h1 {
   .text-vers {
     font-size: 0.6rem;
   }
-
-}
-
-.custom-caption {
-  text-align: center;
-  padding: .75rem;
-  color: $textcol;
-  background-color: rgba(0, 0, 0, .3);
-}
-
-.sfondo-grigio {
-  padding: 1rem;
-  color: $textcol;
-  background-color: rgba(0, 0, 0, .35);
-}
-
-.mycontacts {
-  color: gray;
-  letter-spacing: 0.078rem;
-}
-
-.mycontacts_title {
-  text-shadow: 0.125rem 0.125rem 0.125rem #555;
-  font-weight: bold;
-  color: #999;
-  letter-spacing: 0.125rem;
-}
-
-.mycontacts_text {
-  color: #999;
-  letter-spacing: 0.093rem;
-}
-
-.clEditDiv {
-  border: #c8c9cb solid 2px;
-  padding: 2px;
-}
-
-.clEditNotActive {
-  background-color: #e6e6e6;
-}
-
-.clEdit {
-  border: #f69f09 solid 2px;
-  padding: 2px;
-}
-
-.clEdit:hover {
-  border: #11f609 solid 2px;
-  cursor: pointer;
-}
-
-.selectedElem {
-  border: #b91111 solid 3px !important;
-}
-
-.align_center {
-  text-align: center;
-}
-
-.align_right {
-  text-align: right;
-}
-
-.align_left {
-  text-align: left;
-}
-
-.flex3 {
-  display: flex;
-  justify-content: space-between;
-  background-color: green;
-}
-
-.elemEdit {
-  margin: 3px;
-  padding: 3px;
-  text-align: center;
-  font-weight: bold;
-}
-
-.elemEdit:hover {
-  border: #11f609 solid 2px;
-  cursor: pointer;
-}
-.myElemBase{
-  margin-bottom: 16px;
 }
\ No newline at end of file
diff --git a/src/components/CMyElem/CMyElem.ts b/src/components/CMyElem/CMyElem.ts
index 958a9d63..1de8431d 100755
--- a/src/components/CMyElem/CMyElem.ts
+++ b/src/components/CMyElem/CMyElem.ts
@@ -38,6 +38,7 @@ import { HomeRiso } from '@/components/HomeRiso';
 import mycircuits from '@/views/user/mycircuits/mycircuits.vue';
 import PageRis from '@/components/pageris/pageris.vue';
 import { Riso_Home_Modern } from '@/components/Riso_Home_Modern';
+import { Riso_Home_ParteFinale } from '@/components/Riso_Home_ParteFinale';
 import { InvitaAmico } from '@/components/InvitaAmico';
 import { CMyVideoYoutube } from '@/components/CMyVideoYoutube';
 import { editprofile } from '@/components/editprofile';
@@ -110,6 +111,7 @@ export default defineComponent({
     InvitaAmico,
     HomeRiso,
     Riso_Home_Modern,
+    Riso_Home_ParteFinale,
     CMyEditor,
     mycircuits,
     editprofile,
diff --git a/src/components/CMyElem/CMyElem.vue b/src/components/CMyElem/CMyElem.vue
index 2f451235..621d1c5b 100755
--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -109,6 +109,12 @@
         >
           <Riso_Home_Modern />
         </div>
+        <div
+          v-else-if="myel.type === shared_consts.ELEMTYPE.RISOHOME_PAGFINALE"
+          class="myElemBase"
+        >
+          <Riso_Home_ParteFinale />
+        </div>
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE"
           class="myElemBase"
@@ -137,15 +143,16 @@
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.CREA_VOLANTINO"
           class="myElemBase"
-        >˚
-                  <div
+        >
+          ˚
+          <div
             v-if="editOn"
             class="elemEdit"
           >
             CREA POSTER VOLANTINI:
           </div>
 
-        <EventPosterGenerator></EventPosterGenerator>
+          <EventPosterGenerator></EventPosterGenerator>
         </div>
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER"
@@ -622,23 +629,48 @@
         </div>
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ"
-          class="myElemBase"
         >
-          <div
-            v-if="editOn"
-            class="elemEdit"
+          <section
+            class="content-section"
           >
-            Visualizzatore Tabelle
-          </div>
-          <CGridOriz
-            :table="myel.container"
-            :tipovisu="myel.number"
-            :prop_search="myel.parambool"
-            :finder="myel.parambool2"
-            :showMap="myel.parambool3"
-            :heightcarousel="myel.heightcarousel"
-            :prop_modif="myel.parambool4"
-          ></CGridOriz>
+            <div
+              v-if="myel.stiletit_str"
+              class="section-header"
+            >
+              <h2 class="section-title">
+                <q-icon
+                  v-if="myel.stiletit_icon"
+                  :name="myel.stiletit_icon || 'event'"
+                />
+                {{ myel.stiletit_str }}
+              </h2>
+              <q-btn
+                v-if="myel.container2"
+                flat
+                dense
+                round
+                icon="arrow_forward"
+                @click="naviga(myel.container2)"
+              />
+            </div>
+
+            <div
+              v-if="editOn"
+              class="elemEdit"
+            >
+              Visualizzatore Tabelle
+            </div>
+            <CGridOriz
+              :table="myel.container"
+              :tipovisu="myel.number"
+              :prop_search="myel.parambool"
+              :finder="myel.parambool2"
+              :showMap="myel.parambool3"
+              :heightcarousel="myel.heightcarousel"
+              :prop_modif="myel.parambool4"
+              :prop_compatto="myel.parambool5"
+            ></CGridOriz>
+          </section>
         </div>
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.SEARCHPRODUCT"
@@ -701,6 +733,7 @@
                 :showMap="false"
                 :prop_modif="tools.isAdmin()"
                 :enableExport="true"
+                :prop_compatto="myel.number === -1"
               ></CGridOriz>
             </q-tab-panel>
 
@@ -784,6 +817,7 @@
                 :showMap="false"
                 :prop_modif="tools.isAdmin()"
                 :enableExport="true"
+                :prop_compatto="myel.number === -1"
               ></CGridOriz>
             </q-tab-panel>
 
diff --git a/src/components/CMyRecCard/CMyRecCard.scss b/src/components/CMyRecCard/CMyRecCard.scss
index 0a30cf46..763acaf1 100755
--- a/src/components/CMyRecCard/CMyRecCard.scss
+++ b/src/components/CMyRecCard/CMyRecCard.scss
@@ -4,7 +4,7 @@
 .rec-card-wrapper {
   margin: 3px auto;
   padding: 0;
-  width: 100%; // Aggiungi questa riga
+  width: 100%;
 
   @media (max-width: $mobile-breakpoint) {
     margin: 2px auto;
@@ -12,19 +12,55 @@
 
   &.is-even {
     .modern-rec-card {
-      background: linear-gradient(135deg, rgba(49, 153, 239, 0.249) 0%, rgba(25, 118, 210, 0.03) 100%);
+      background: linear-gradient(
+        135deg, 
+        rgba(49, 153, 239, 0.15) 0%, 
+        rgba(25, 118, 210, 0.03) 100%
+      );
       border-color: rgba(66, 165, 245, 0.12);
     }
   }
 
   &.is-odd {
     .modern-rec-card {
-      background: linear-gradient(135deg, rgba(38, 197, 218, 0.344) 0%, rgba(0, 150, 136, 0.03) 100%);
+      background: linear-gradient(
+        135deg, 
+        rgba(38, 197, 218, 0.2) 0%, 
+        rgba(0, 150, 136, 0.03) 100%
+      );
       border-color: rgba(38, 198, 218, 0.12);
     }
   }
 }
 
+// Dark mode alternating colors
+body.body--dark,
+.body--dark {
+  .rec-card-wrapper {
+    &.is-even {
+      .modern-rec-card {
+        background: linear-gradient(
+          135deg, 
+          rgba(49, 153, 239, 0.2) 0%, 
+          rgba(25, 118, 210, 0.08) 100%
+        );
+        border-color: rgba(66, 165, 245, 0.2);
+      }
+    }
+
+    &.is-odd {
+      .modern-rec-card {
+        background: linear-gradient(
+          135deg, 
+          rgba(38, 197, 218, 0.25) 0%, 
+          rgba(0, 150, 136, 0.08) 100%
+        );
+        border-color: rgba(38, 198, 218, 0.2);
+      }
+    }
+  }
+}
+
 // ========================================
 // CARD EVENTO (Calendar View)
 // ========================================
@@ -32,14 +68,14 @@
   display: flex;
   gap: 6px;
   margin-bottom: 6px;
-  background: white;
+  background: var(--app-bg-card);
   border-radius: $border-radius;
   overflow: hidden;
-  box-shadow: $shadow-md;
+  box-shadow: var(--app-shadow-md);
   transition: box-shadow $transition-speed ease;
 
   &:hover {
-    box-shadow: $shadow-hover;
+    box-shadow: var(--app-shadow-lg);
   }
 
   @media (max-width: $mobile-breakpoint) {
@@ -135,7 +171,7 @@
 .user-avatar {
   margin-top: 6px;
   border: 2px solid rgba(255, 255, 255, 0.3);
-  box-shadow: $shadow-sm;
+  box-shadow: var(--app-shadow-sm);
 
   @media (max-width: $mobile-breakpoint) {
     margin-top: 5px;
@@ -148,8 +184,6 @@
   flex: 1;
   position: relative;
   overflow: hidden;
-
-  // L'altezza viene gestita dinamicamente dal Vue
 }
 
 .event-image {
@@ -171,10 +205,10 @@
 // CARD RECORD PRINCIPALE
 // ========================================
 .modern-rec-card {
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--app-bg-card);
+  border: 1px solid var(--app-border-color);
   border-radius: $border-radius;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--app-shadow-sm);
   padding: 6px;
   transition: all $transition-speed ease;
   margin-bottom: 3px;
@@ -182,7 +216,7 @@
   overflow: hidden;
 
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: var(--app-shadow-md);
     transform: translateY(-1px);
   }
 
@@ -222,8 +256,8 @@
 }
 
 .record-avatar {
-  box-shadow: $shadow-sm;
-  border: 2px solid rgba(0, 0, 0, 0.05);
+  box-shadow: var(--app-shadow-sm);
+  border: 2px solid var(--app-border-color);
 
   @media (max-width: $mobile-breakpoint) {
     width: 48px !important;
@@ -269,22 +303,20 @@
 .tag-chip {
   height: 20px;
   font-size: 0.9rem;
-  padding: 0 px;
+  padding: 0 6px;
   border-radius: 4px;
   box-shadow: none;
   font-weight: 500;
 
-  // Categoria principale - più scura e intensa
   &.sector {
     background: linear-gradient(135deg, $primary-color, #1976d2);
     color: white;
   }
 
-  // Sottocategoria - stessa base ma più chiara
   &.subsector {
-    background: linear-gradient(135deg, color.adjust($primary-color, $lightness: 10%), #42a5f5);
+    background: linear-gradient(135deg, $primary-light, #42a5f5);
     color: white;
-    opacity: 0.9; // Opzionale: leggera trasparenza
+    opacity: 0.9;
   }
 
   @media (max-width: $mobile-breakpoint) {
@@ -315,7 +347,7 @@
 
 .description-text {
   font-size: 0.9375rem;
-  color: #2c3e50;
+  color: var(--app-text-primary);
   font-weight: 500;
   line-height: 1.4;
   margin: 3px 0;
@@ -323,7 +355,6 @@
 
   &.event-title {
     font-weight: 600;
-    color: #1a1a1a;
   }
 
   @media (max-width: $mobile-breakpoint) {
@@ -333,7 +364,7 @@
 }
 
 // ========================================
-// PREFERENCES ROW (dopo descrizione)
+// PREFERENCES ROW
 // ========================================
 .preferences-row {
   margin: 8px 0 6px 0;
@@ -357,11 +388,11 @@
 .preference-icon-avatar {
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--app-shadow-sm);
 
   &:hover {
     transform: translateY(-2px) scale(1.08);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--app-shadow-md);
   }
 
   @media (max-width: $mobile-breakpoint) {
@@ -384,11 +415,11 @@
   .user-name {
     flex: 1 1 auto;
     min-width: 0;
-    color: $mainColor;
+    color: var(--app-text-primary);
     font-weight: 600;
     font-size: 0.9rem;
 
-    @media (max-width: $mobile) {
+    @media (max-width: $mobile-breakpoint) {
       font-size: 0.85rem;
     }
   }
@@ -398,8 +429,9 @@
     white-space: nowrap;
     margin-left: auto;
     font-size: 0.85rem;
+    color: var(--app-text-secondary);
 
-    @media (max-width: $mobile) {
+    @media (max-width: $mobile-breakpoint) {
       font-size: 0.75rem;
 
       .stat-item {
@@ -434,8 +466,14 @@
   }
 }
 
+// Dark mode attending badge
+body.body--dark .attending-badge,
+.body--dark .attending-badge {
+  background: rgba(33, 186, 69, 0.2);
+}
+
 .cities-text {
-  color: rgba(44, 62, 80, 0.7); // Grigio bluastro più caldo del grigio puro
+  color: var(--app-text-secondary);
   font-size: 0.85rem;
   display: flex;
   margin-left: auto;
@@ -443,12 +481,13 @@
   gap: 4px;
 
   i {
-    color: rgba($mainColor, 0.6); // Icona location con colore primario attenuato
+    color: var(--app-text-muted);
   }
 
   .cities-text-bold {
     font-weight: bold;
     font-size: 1.1rem;
+    color: var(--app-text-primary);
 
     @media (max-width: $mobile-breakpoint) {
       font-size: 1rem;
@@ -484,11 +523,11 @@
 .action-menu-btn {
   width: 30px;
   height: 30px;
-  color: $grey-color;
+  color: var(--app-text-muted);
   transition: all $transition-speed ease;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--app-border-color);
     color: $primary-color;
   }
 
@@ -511,15 +550,15 @@
   white-space: wrap;
   overflow: hidden;
   font-size: 0.8125rem;
-  color: $grey-color;
+  color: var(--app-text-muted);
 }
 
 .cardrec {
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: $shadow-sm;
+  border: 1px solid var(--app-border-color);
+  box-shadow: var(--app-shadow-sm);
   border-radius: $border-radius;
   padding: 6px;
-  background-color: white;
+  background-color: var(--app-bg-card);
   margin: 3px;
 
   @media (min-width: 500px) {
@@ -532,9 +571,16 @@
   color: $primary-color;
 }
 
+// Dark mode text_title
+body.body--dark .text_title,
+.body--dark .text_title {
+  color: $primary-light;
+}
+
 .event_date {
   font-style: italic;
   font-size: 0.8125rem;
+  color: var(--app-text-secondary);
 }
 
 // ========================================
@@ -543,12 +589,16 @@
 .q-separator {
   margin: 3px 0;
   opacity: 0.5;
+  background: var(--app-divider-color);
 
   @media (max-width: $mobile-breakpoint) {
     margin: 2px 0;
   }
 }
 
+// ========================================
+// CATEGORY HIERARCHY
+// ========================================
 .category-hierarchy {
   display: flex;
   flex-wrap: wrap;
@@ -558,23 +608,28 @@
   .hierarchy-arrow {
     opacity: 0.5;
     font-size: 16px;
+    color: var(--app-text-muted);
   }
 
   @media (max-width: $mobile-breakpoint) {
     gap: 0px;
   }
-
 }
 
+// ========================================
+// CATEGORIES DIALOG
+// ========================================
 .categories-dialog {
   .dialog-header {
     padding: 16px 20px;
+    background: var(--app-bg-card);
   }
 
   .dialog-content {
     padding: 20px;
     max-height: 60vh;
     overflow-y: auto;
+    background: var(--app-bg-card);
   }
 
   .categories-grid {
@@ -590,9 +645,12 @@
   }
 }
 
+// ========================================
+// ANNUNCIO LOCATION
+// ========================================
 .annuncio-location {
   font-size: 1rem;
-  color: #718096;
+  color: var(--app-text-secondary);
   align-items: center;
   gap: 4px;
 
@@ -601,35 +659,148 @@
   }
 }
 
-// Il contenitore padre (q-item o card) deve avere position relative
+// ========================================
+// OVERLAY BUTTONS
+// ========================================
 .q-item,
 .event-card {
   position: relative;
 }
 
-// Bottone overlay fisso a destra
 .action-menu-btn-overlay {
   position: absolute !important;
   top: 8px;
   right: 0px;
   transform: translateY(-50%);
   z-index: 10;
-
-  // Sfondo semi-trasparente per visibilità
-  background: rgba(255, 255, 255, 0.8) !important;
-
-  // Ombra leggera
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background: var(--app-bg-card) !important;
+  box-shadow: var(--app-shadow-sm);
+  transition: all $transition-speed ease;
 
   &:hover {
-    background: rgba(255, 255, 255, 1) !important;
+    background: var(--app-bg-card-hover) !important;
+    box-shadow: var(--app-shadow-md);
   }
 }
 
-// Alternativa: in alto a destra
 .action-menu-btn-overlay--top {
   position: absolute !important;
   top: 4px;
   right: 4px;
   z-index: 10;
+  background: var(--app-bg-card) !important;
+}
+
+// ========================================
+// DARK MODE SPECIFIC OVERRIDES
+// ========================================
+body.body--dark,
+.body--dark {
+  // Event date column - leggermente più scuro in dark mode
+  .event-date-column {
+    background: linear-gradient(135deg, #1565c0, #1976d2);
+  }
+
+  // Tag chips
+  .tag-chip {
+    &.sector {
+      background: linear-gradient(135deg, #1565c0, #1976d2);
+    }
+
+    &.subsector {
+      background: linear-gradient(135deg, #1976d2, #2196f3);
+    }
+  }
+
+  // Time badges nel calendar
+  .time-start,
+  .time-end {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  // User avatar border
+  .user-avatar {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  // Record avatar
+  .record-avatar {
+    border-color: var(--app-border-color-strong);
+  }
+
+  // Preference icon avatar
+  .preference-icon-avatar {
+    &:hover {
+      box-shadow: var(--app-shadow-lg);
+    }
+  }
+
+  // Action menu button hover
+  .action-menu-btn {
+    &:hover {
+      background: var(--app-border-color-strong);
+      color: $primary-light;
+    }
+  }
+}
+
+// ========================================
+// EVENT CARD - Theme Aware
+// ========================================
+.event-card {
+  display: flex;
+  align-items: center;
+  gap: $s-md;
+  
+  // Background con gradiente viola - usa opacità che funziona in entrambi i temi
+  background: linear-gradient(
+    135deg, 
+    rgba(102, 126, 234, 0.08) 0%, 
+    rgba(118, 75, 162, 0.08) 100%
+  );
+  border: 2px solid rgba(102, 126, 234, 0.2);
+  border-radius: $r-md;
+  padding: $s-md;
+  min-width: 280px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.4);
+  }
+
+  // ========================================
+  // EVENT DATE BADGE
+  // ========================================
+  .event-date {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: $gradient-primary;
+    color: white;
+    border-radius: $r-sm;
+    padding: $s-sm;
+    min-width: 50px;
+    z-index: 1;
+
+    // Posizionamento assoluto (dalla seconda definizione)
+    position: absolute;
+    top: $s-sm;
+    left: $s-sm;
+
+    .event-day {
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .event-month {
+      font-size: 0.9rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/CMyRecCard/CMyRecCard.ts b/src/components/CMyRecCard/CMyRecCard.ts
index fc2b33c8..51ee69f6 100755
--- a/src/components/CMyRecCard/CMyRecCard.ts
+++ b/src/components/CMyRecCard/CMyRecCard.ts
@@ -44,6 +44,11 @@ export default defineComponent({
       required: false,
       default: 0,
     },
+    compatto: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   setup(props, { emit }) {
diff --git a/src/components/CMyRecCard/CMyRecCard.vue b/src/components/CMyRecCard/CMyRecCard.vue
index a5b29bd0..62ebe9d6 100755
--- a/src/components/CMyRecCard/CMyRecCard.vue
+++ b/src/components/CMyRecCard/CMyRecCard.vue
@@ -65,7 +65,6 @@
         />
       </div>
     </div>
-
     <!-- Card Record Principale -->
     <q-item
       v-if="myrec"
@@ -343,7 +342,11 @@
               class="annuncio-location"
             >
               <span v-if="ind > 0"></span>
-              <span v-if="table === shared_consts.TABLES_MYHOSPS" class="cities-text-bold">{{ rec.comune }} ({{ rec.prov }})</span>
+              <span
+                v-if="table === shared_consts.TABLES_MYHOSPS"
+                class="cities-text-bold"
+                >{{ rec.comune }} ({{ rec.prov }})</span
+              >
               <span v-else>{{ rec.comune }} ({{ rec.prov }})</span>
             </span>
           </div>
diff --git a/src/components/CMyRecEventi/CMyRecEventi.scss b/src/components/CMyRecEventi/CMyRecEventi.scss
new file mode 100644
index 00000000..83cebab1
--- /dev/null
+++ b/src/components/CMyRecEventi/CMyRecEventi.scss
@@ -0,0 +1,759 @@
+// ========================================
+// WRAPPER CARD - ALTERNATING COLORS
+// ========================================
+.rec-card-wrapper {
+  margin: 3px auto;
+  padding: 0;
+  width: 100%; // Aggiungi questa riga
+
+  @media (max-width: $mobile-breakpoint) {
+    margin: 2px auto;
+  }
+
+  &.is-even {
+    .modern-rec-card {
+      background: linear-gradient(135deg, rgba(49, 153, 239, 0.249) 0%, rgba(25, 118, 210, 0.03) 100%);
+      border-color: rgba(66, 165, 245, 0.12);
+    }
+  }
+
+  &.is-odd {
+    .modern-rec-card {
+      background: linear-gradient(135deg, rgba(38, 197, 218, 0.344) 0%, rgba(0, 150, 136, 0.03) 100%);
+      border-color: rgba(38, 198, 218, 0.12);
+    }
+  }
+}
+
+// ========================================
+// CARD EVENTO (Calendar View)
+// ========================================
+.event-card {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+  background: white;
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-shadow: $shadow-md;
+  transition: box-shadow $transition-speed ease;
+
+  &:hover {
+    box-shadow: $shadow-hover;
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 5px;
+    margin-bottom: 5px;
+  }
+}
+
+.event-date-column {
+  flex: 0 0 70px;
+  background: linear-gradient(135deg, $primary-color, #42a5f5);
+  padding: 6px 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $mobile-breakpoint) {
+    flex: 0 0 65px;
+    padding: 5px 2px;
+  }
+}
+
+.date-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  color: white;
+  text-align: center;
+}
+
+.day-of-week {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.9;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.5625rem;
+  }
+}
+
+.day-number {
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1;
+  margin: 3px 0;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 1.625rem;
+    margin: 2px 0;
+  }
+}
+
+.month-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.75rem;
+  }
+}
+
+.time-start,
+.time-end {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  margin-top: 2px;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.625rem;
+    padding: 1px 4px;
+  }
+}
+
+.date-separator {
+  font-size: 0.9375rem;
+  margin: 3px 0;
+  opacity: 0.8;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.875rem;
+    margin: 2px 0;
+  }
+}
+
+.user-avatar {
+  margin-top: 6px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  box-shadow: $shadow-sm;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin-top: 5px;
+    width: 36px !important;
+    height: 36px !important;
+  }
+}
+
+.event-image-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+
+  // L'altezza viene gestita dinamicamente dal Vue
+}
+
+.event-image {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transition: transform $transition-speed ease;
+
+  &:hover {
+    transform: scale(1.03);
+  }
+
+  :deep(.q-img__image) {
+    object-fit: cover;
+  }
+}
+
+// ========================================
+// CARD RECORD PRINCIPALE
+// ========================================
+.modern-rec-card {
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: $border-radius;
+  box-shadow: $shadow-sm;
+  padding: 6px;
+  transition: all $transition-speed ease;
+  margin-bottom: 3px;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: $shadow-md;
+    transform: translateY(-1px);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 5px;
+    margin-bottom: 2px;
+  }
+}
+
+// ========================================
+// AVATAR SECTION
+// ========================================
+.avatar-section {
+  position: relative;
+  padding: 0 !important;
+  margin-right: 6px;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin-right: 5px;
+  }
+}
+
+.type-badge {
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  z-index: 1;
+  font-size: 0.625rem;
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-weight: 600;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.5625rem;
+    padding: 1px 4px;
+  }
+}
+
+.record-avatar {
+  box-shadow: $shadow-sm;
+  border: 2px solid rgba(0, 0, 0, 0.05);
+
+  @media (max-width: $mobile-breakpoint) {
+    width: 48px !important;
+    height: 48px !important;
+  }
+
+  :deep(.q-img) {
+    border-radius: 50%;
+  }
+}
+
+// ========================================
+// CONTENT SECTION
+// ========================================
+.content-section {
+  padding: 0 6px 0 0 !important;
+  min-width: 0;
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 0 5px 0 0 !important;
+  }
+}
+
+.tags-row {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 3px;
+  margin-bottom: 3px;
+
+  .status-row {
+    display: flex;
+    gap: $s-xs;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 2px;
+    margin-bottom: 2px;
+  }
+}
+
+.tag-chip {
+  height: 20px;
+  font-size: 0.9rem;
+  padding: 0 px;
+  border-radius: 4px;
+  box-shadow: none;
+  font-weight: 500;
+
+  // Categoria principale - più scura e intensa
+  &.sector {
+    background: linear-gradient(135deg, $primary-color, #1976d2);
+    color: white;
+  }
+
+  // Sottocategoria - stessa base ma più chiara
+  &.subsector {
+    background: linear-gradient(135deg, color.adjust($primary-color, $lightness: 10%), #42a5f5);
+    color: white;
+    opacity: 0.9; // Opzionale: leggera trasparenza
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    height: 19px;
+    font-size: 0.8rem;
+    padding: 0 4px;
+  }
+
+  :deep(.q-chip__content) {
+    padding: 0;
+  }
+}
+
+.status-badge {
+  font-size: 0.6875rem;
+  padding: 2px 5px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.625rem;
+    padding: 2px 4px;
+    gap: 2px;
+  }
+}
+
+.description-text {
+  font-size: 0.9375rem;
+  color: $text-secondary; // Era #2c3e50
+  font-weight: 500;
+  line-height: 1.4;
+  margin: 3px 0;
+  word-break: break-word;
+
+  .body--dark & {
+    color: $text-secondary-dark;
+  }
+
+  &.event-title {
+    font-weight: 600;
+    color: $text-primary; // Era #1a1a1a
+
+    .body--dark & {
+      color: $text-primary-dark;
+    }
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.875rem;
+    margin: 2px 0;
+  }
+}
+// ========================================
+// PREFERENCES ROW (dopo descrizione)
+// ========================================
+.preferences-row {
+  margin: 8px 0 6px 0;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin: 6px 0 4px 0;
+  }
+}
+
+.preferences-icons-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 5px;
+  }
+}
+
+.preference-icon-avatar {
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    transform: translateY(-2px) scale(1.08);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    width: 28px !important;
+    height: 28px !important;
+
+    .q-icon {
+      font-size: 16px !important;
+    }
+  }
+}
+
+.user-stats-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $s-sm;
+  flex-wrap: wrap;
+
+  .user-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: $mainColor;
+    font-weight: 600;
+    font-size: 0.9rem;
+
+    @media (max-width: $mobile) {
+      font-size: 0.85rem;
+    }
+  }
+
+  .stats-container {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    margin-left: auto;
+    font-size: 0.85rem;
+
+    @media (max-width: $mobile) {
+      font-size: 0.75rem;
+
+      .stat-item {
+        margin-left: 4px;
+
+        .q-icon {
+          font-size: 12px !important;
+        }
+      }
+    }
+  }
+}
+
+.attending-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: $positive-color;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  margin: 3px 0;
+  padding: 3px 6px;
+  background: rgba(33, 186, 69, 0.1);
+  border-radius: 6px;
+  width: fit-content;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.75rem;
+    margin: 2px 0;
+    padding: 2px 5px;
+    gap: 2px;
+  }
+}
+
+.cities-text {
+  color: rgba(44, 62, 80, 0.7); // Grigio bluastro più caldo del grigio puro
+  font-size: 0.85rem;
+  display: flex;
+  margin-left: auto;
+  flex-flow: wrap;
+  gap: 4px;
+
+  i {
+    color: rgba($mainColor, 0.6); // Icona location con colore primario attenuato
+  }
+
+  .cities-text-bold {
+    font-weight: bold;
+    font-size: 1.1rem;
+
+    @media (max-width: $mobile-breakpoint) {
+      font-size: 1rem;
+    }
+  }
+}
+
+.cities-contrib-row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 6px;
+  }
+}
+
+// ========================================
+// ACTIONS SECTION
+// ========================================
+.actions-section {
+  padding: 0 !important;
+  align-self: flex-start;
+  margin-left: 3px;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin-left: 2px;
+  }
+}
+
+.action-menu-btn {
+  width: 30px;
+  height: 30px;
+  color: $grey-color;
+  transition: all $transition-speed ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: $primary-color;
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    width: 28px;
+    height: 28px;
+  }
+}
+
+// ========================================
+// LEGACY SUPPORT
+// ========================================
+.myflex {
+  display: flex;
+  flex: 1;
+}
+
+.text_user_city {
+  text-overflow: ellipsis;
+  white-space: wrap;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  color: $grey-color;
+}
+
+.cardrec {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: $shadow-sm;
+  border-radius: $border-radius;
+  padding: 6px;
+  background-color: white;
+  margin: 3px;
+
+  @media (min-width: 500px) {
+    margin: 2px;
+    padding: 5px;
+  }
+}
+
+.text_title {
+  color: $primary-color;
+}
+
+.event_date {
+  font-style: italic;
+  font-size: 0.8125rem;
+}
+
+// ========================================
+// SEPARATOR
+// ========================================
+.q-separator {
+  margin: 3px 0;
+  opacity: 0.5;
+
+  @media (max-width: $mobile-breakpoint) {
+    margin: 2px 0;
+  }
+}
+
+.category-hierarchy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+
+  .hierarchy-arrow {
+    opacity: 0.5;
+    font-size: 16px;
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    gap: 0px;
+  }
+
+}
+
+.categories-dialog {
+  .dialog-header {
+    padding: 16px 20px;
+  }
+
+  .dialog-content {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  .categories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .category-chip {
+    font-size: 1.1rem;
+    padding: 8px 12px;
+    font-weight: 500;
+  }
+}
+
+.annuncio-location {
+  font-size: 1rem;
+  color: #718096;
+  align-items: center;
+  gap: 4px;
+
+  &::before {
+    content: '📍';
+  }
+}
+
+// Il contenitore padre (q-item o card) deve avere position relative
+.q-item,
+.event-card {
+  position: relative;
+}
+
+// Bottone overlay fisso a destra
+.action-menu-btn-overlay {
+  position: absolute !important;
+  top: 8px;
+  right: 0px;
+  transform: translateY(-50%);
+  z-index: 10;
+
+  // Sfondo semi-trasparente per visibilità
+  background: rgba(255, 255, 255, 0.8) !important;
+
+  // Ombra leggera
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background: rgba(255, 255, 255, 1) !important;
+  }
+}
+
+// Alternativa: in alto a destra
+.action-menu-btn-overlay--top {
+  position: absolute !important;
+  top: 4px;
+  right: 4px;
+  z-index: 10;
+}
+
+// ==========================================
+// EVENT CARD
+// ==========================================
+.event-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: $s-md;
+  background: $gradient-hover;
+  border: 2px solid rgba($primary-color, 0.2);
+  border-radius: $r-md;
+  padding: $s-md;
+  min-width: 280px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  .body--dark & {
+    background: $gradient-hover-dark;
+    border-color: rgba($primary-color-dark, 0.3);
+  }
+
+  // Hover state
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba($primary-color, 0.2);
+    border-color: rgba($primary-color, 0.4);
+
+    .body--dark & {
+      box-shadow: 0 4px 16px rgba($primary-color-dark, 0.3);
+      border-color: rgba($primary-color-dark, 0.5);
+    }
+  }
+
+  // ========== EVENT DATE BADGE ==========
+  .event-date {
+    position: absolute;
+    top: $s-sm;
+    left: $s-sm;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: $gradient-primary;
+    color: $text-on-primary;
+    border-radius: $r-sm;
+    padding: $s-sm;
+    min-width: 50px;
+
+    .body--dark & {
+      background: $gradient-primary-dark;
+    }
+
+    .event-day {
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .event-month {
+      font-size: 0.9rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+  }
+
+  // ========== EVENT INFO ==========
+  .event-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .event-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: $text-primary;
+
+      .body--dark & {
+        color: $text-primary-dark;
+      }
+    }
+
+    .event-location {
+      font-size: 1rem;
+      color: $text-muted;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .body--dark & {
+        color: $text-muted-dark;
+      }
+    }
+  }
+
+  // ========== EVENT IMAGE ==========
+  .event-image {
+    width: 80px;
+    height: 80px;
+    border-radius: $r-sm;
+    flex-shrink: 0;
+  }
+
+  .event-image-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $gradient-placeholder;
+
+    .body--dark & {
+      background: $gradient-placeholder-dark;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/CMyRecEventi/CMyRecEventi.ts b/src/components/CMyRecEventi/CMyRecEventi.ts
new file mode 100755
index 00000000..4b1a79ef
--- /dev/null
+++ b/src/components/CMyRecEventi/CMyRecEventi.ts
@@ -0,0 +1,198 @@
+import type { PropType } from 'vue';
+import { defineComponent, onMounted, ref, watch, computed } from 'vue';
+import { useUserStore } from '@store/UserStore';
+import type { IUserFields } from 'model';
+import { IImgGallery, IUserProfile } from 'model';
+import { costanti } from '@costanti';
+import { shared_consts } from '@/common/shared_vuejs';
+import { fieldsTable } from '@store/Modules/fieldsTable';
+import { tools } from '@tools';
+import { toolsext } from '@store/Modules/toolsext';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { CMyCardPopup } from '@/components/CMyCardPopup';
+import { useRouter } from 'vue-router';
+import { useCalendarStore } from '@/store/CalendarStore';
+import { useGlobalStore } from '@/store/globalStore';
+
+export default defineComponent({
+  name: 'CMyRecEventi',
+  components: { CMyCardPopup },
+  emits: ['setCmd', 'cmdext'],
+  props: {
+    table: {
+      type: String,
+      required: true,
+    },
+    prop_myrec: {
+      type: Object as PropType<any>,
+      required: false,
+      default: null,
+    },
+    indexRow: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    editOn: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    margin_right: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    compatto: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  setup(props, { emit }) {
+    const userStore = useUserStore();
+    const calendarStore = useCalendarStore();
+    const globalStore = useGlobalStore();
+    const $q = useQuasar();
+    const { t } = useI18n();
+    const $router = useRouter();
+
+    const myrec = ref(<any>null);
+    const showPreferencesDialog = ref(false);
+
+    const visupage = ref(false);
+    const disabilita = computed(() => {
+      return props.table === shared_consts.TABLES_MYBACHECAS;
+    });
+    const arrSubSector = computed(() => {
+      return tools.getArrSubSector(props.table, myrec.value);
+    });
+    const arrSector = computed(() => {
+      return tools.getArrSector(props.table, myrec.value);
+    });
+
+    const getColorSubSector = computed(() => {
+      return arrSector.value && arrSector.value.length == 1 ? arrSector.value[0].color : 'primary'
+    })
+
+    watch(
+      () => props.prop_myrec,
+      (newval, oldval) => {
+        mounted();
+      }
+    );
+
+    function mounted() {
+      if (props.prop_myrec) {
+        myrec.value = props.prop_myrec;
+      }
+    }
+
+    function showBadge() {
+      if (shared_consts.TABLES_SHOW_ADTYPE.includes(props.table)) {
+        return true;
+      }
+
+      return false;
+    }
+
+    function getImgUser(profile: IUserFields) {
+      return userStore.getImgByProfile(profile);
+    }
+
+    function naviga(path: string) {
+      $router.push(path);
+    }
+
+    function setCmd(
+      $q: any,
+      cmd: number,
+      myusername: string,
+      value: any,
+      groupname: string
+    ) {
+      emit('setCmd', $q, cmd, myusername, value, groupname);
+    }
+
+    function cmdExt(cmd: any, val1: any, val2: any) {
+      emit('cmdext', cmd, val1, val2);
+    }
+
+    function navigaExt(obj: any) {
+      cmdExt(costanti.CMD_SHOW_PAGE, null, obj);
+      //let link = shared_consts.getDirectoryByTable(props.table) + '/' + obj._id
+      //console.log('link', link)
+      //$router.push(link)
+    }
+
+    function getNameToShow(user: IUserFields, col = null) {
+      if (myrec.value.groupname) return myrec.value.groupname;
+      else return userStore.getNameToShow(user, col);
+    }
+
+    function isPartecipero() {
+      return (
+        props.table === shared_consts.TABLES_MYBACHECAS &&
+        calendarStore.isPartecipero(myrec.value._id, props.table)
+      );
+    }
+
+    function computedWidth() {
+      //const width = tools.getwidth($q) - 20;
+      //return `${Math.min(width, 600)}px`; // Limita la larghezza massima a 600px
+
+      const width = tools.getwidth($q);
+      // Limita la larghezza per evitare overflow
+      return `${Math.min(width - 40, 600)}px`;
+
+      //return '100%'; // Rimuovi la limitazione a 600px
+    }
+
+    function computedEventImageHeight() {
+      const width = tools.getwidth($q);
+      const isMobile = width < 768;
+      const cardWidth = Math.min(width - 20, 600);
+
+      if (isMobile) {
+        // Mobile: aspect ratio 16:9, minimo 200px
+        const calculatedHeight = Math.round((cardWidth - 70) * 0.5625);
+        return `${Math.max(calculatedHeight, 200)}px`;
+      } else {
+        // Desktop: altezza fissa ottimale 220px
+        return '220px';
+      }
+    }
+    onMounted(mounted);
+
+    return {
+      t,
+      myrec,
+      costanti,
+      getImgUser,
+      naviga,
+      navigaExt,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      toolsext,
+      fieldsTable,
+      cmdExt,
+      visupage,
+      showBadge,
+      getNameToShow,
+      isPartecipero,
+      calendarStore,
+      disabilita,
+      globalStore,
+      computedWidth,
+      computedEventImageHeight,
+      arrSubSector,
+      arrSector,
+      getColorSubSector,
+      showPreferencesDialog,
+    };
+  },
+});
diff --git a/src/components/CMyRecEventi/CMyRecEventi.vue b/src/components/CMyRecEventi/CMyRecEventi.vue
new file mode 100755
index 00000000..4cd3a176
--- /dev/null
+++ b/src/components/CMyRecEventi/CMyRecEventi.vue
@@ -0,0 +1,104 @@
+<template>
+  <div
+    v-if="myrec"
+    class="event-card"
+    @click="navigaExt(myrec)"
+  >
+    <q-img
+      :src="
+        myrec.photos
+          ? tools.getFullFileName(myrec.photos, table, myrec.username, '')
+          : '/images/event-placeholder.png'
+      "
+      :alt="myrec.descr"
+      class="event-image"
+      @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
+    >
+      <template v-slot:error>
+        <div class="event-image-placeholder">
+          <q-icon
+            name="event"
+            size="2rem"
+            color="grey-5"
+          />
+        </div>
+      </template>
+    </q-img>
+    <div class="event-date">
+      <span class="event-day">{{ tools.getstrDay(myrec.dateTimeStart) }}</span>
+      <span class="event-month">{{
+        tools.getstrMonth3Letters(myrec.dateTimeStart)
+      }}</span>
+    </div>
+    <div class="event-info">
+      <span class="event-title">{{ myrec.descr }}</span>
+      <span class="event-location">
+        <div class="cities-text">
+          <span
+            v-for="(rec, ind) of myrec.mycities"
+            :key="ind"
+            class="annuncio-location"
+          >
+            <span v-if="ind > 0"></span>
+            <span
+              v-if="table === shared_consts.TABLES_MYHOSPS"
+              class="cities-text-bold"
+              >{{ rec.comune }} ({{ rec.prov }})</span
+            >
+            <span v-else>{{ rec.comune }} ({{ rec.prov }})</span>
+          </span>
+        </div>
+      </span>
+    </div>
+    <q-icon name="chevron_right" size="lg" />
+  </div>
+
+  <!-- Categories Dialog -->
+  <q-dialog v-model="showPreferencesDialog">
+    <q-card
+      class="categories-dialog"
+      :style="{ minWidth: $q.screen.lt.sm ? '90vw' : '400px' }"
+    >
+      <q-card-section class="dialog-header">
+        <div class="text-h6">Categorie</div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section class="dialog-content">
+        <div class="categories-grid">
+          <q-chip
+            v-for="(rec, ind) of myrec.preferences"
+            :key="ind"
+            class="category-chip shadow-3"
+            :style="`background-color: ${tools.getPreferenceById(rec).color}; opacity: 0.85; color: white;`"
+          >
+            <q-icon
+              :name="tools.getPreferenceById(rec).icon"
+              left
+              size="18px"
+            />
+            {{ tools.getPreferenceById(rec).label }}
+          </q-chip>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="Chiudi"
+          color="primary"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./CMyRecEventi.ts"></script>
+
+<style lang="scss" scoped>
+@import './CMyRecEventi.scss';
+</style>
diff --git a/src/components/CMyRecEventi/index.ts b/src/components/CMyRecEventi/index.ts
new file mode 100755
index 00000000..53ab2c21
--- /dev/null
+++ b/src/components/CMyRecEventi/index.ts
@@ -0,0 +1 @@
+export { default as CMyRecEventi } from './CMyRecEventi.vue'
diff --git a/src/components/CMySelect/CMySelect.ts b/src/components/CMySelect/CMySelect.ts
index eace6779..827b17ee 100755
--- a/src/components/CMySelect/CMySelect.ts
+++ b/src/components/CMySelect/CMySelect.ts
@@ -367,7 +367,7 @@ export default defineComponent({
     }
 
     function update() {
-      console.log('update', props.value, props);
+
       // console.log(' #### mounted myselect', props.options, 'arrvalue', myarrvalue.value)
       let rec: any;
       if (optionsreal.value) {
diff --git a/src/components/CPageUserNotFound/CPageUserNotFound.vue b/src/components/CPageUserNotFound/CPageUserNotFound.vue
index e7810342..d6a1e972 100755
--- a/src/components/CPageUserNotFound/CPageUserNotFound.vue
+++ b/src/components/CPageUserNotFound/CPageUserNotFound.vue
@@ -35,7 +35,6 @@ const username = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/css/variables.scss';
 
 .user-not-found-container {
   min-height: calc(100vh - #{$headerHeight});
diff --git a/src/components/CSendCoins/CSendCoins.ts b/src/components/CSendCoins/CSendCoins.ts
index 061e0daa..107be78e 100755
--- a/src/components/CSendCoins/CSendCoins.ts
+++ b/src/components/CSendCoins/CSendCoins.ts
@@ -378,6 +378,15 @@ export default defineComponent({
       });
     }
 
+    function invio_ris_caricamento() {
+      $q.loading.show({
+        message: 'Invio RIS in corso...',
+        spinnerColor: 'green',
+        backgroundColor: 'primary',
+        messageColor: 'white',
+      });
+    }
+
     function fine_caricamento() {
       $q.loading.hide();
     }
@@ -531,7 +540,7 @@ export default defineComponent({
     // ═══════════════════════════════════════════════════════════════
     // METHODS - Send Mode
     // ═══════════════════════════════════════════════════════════════
-    function sendCoin() {
+    async function sendCoin() {
       const ok =
         (to_user_real.value && to_user_real.value.username) ||
         (props.to_group && props.to_group.groupname) ||
@@ -563,12 +572,55 @@ export default defineComponent({
         myrecsendcoin.dest = to_user_real.value ? to_user_real.value.username : '';
 
         if (myrecsendcoin) {
-          tools
-            .sendCoinsByCircuit($q, $router, circuitloaded.value, myrecsendcoin)
-            .then((ris: any) => {
+          const orig = myrecsendcoin.grouporig || myrecsendcoin.contoComOrig || '';
+          const dest =
+            myrecsendcoin.groupdest || myrecsendcoin.contoComDest || myrecsendcoin.dest;
+
+          // Seleziona il messaggio appropriato
+          const messageKey = orig
+            ? 'circuit.question_sendcoinsto_from'
+            : 'circuit.question_sendcoinsto';
+
+          // Parametri comuni per i messaggi
+          const msgParams = {
+            coin: circuitloaded.value.symbol,
+            dest,
+            qty: myrecsendcoin.qty,
+            circuit: circuitloaded.value.name,
+            ...(orig && { from: orig }),
+          };
+
+          // Mostra dialog di conferma
+          $q.dialog({
+            title: t('db.domanda'),
+            message: t(messageKey, msgParams),
+            ok: {
+              label: t('dialog.yes'),
+              color: 'primary',
+              push: true,
+            },
+            cancel: {
+              label: t('dialog.cancel'),
+              color: 'secondary',
+            },
+          })
+            .onOk(async () => {
+              invio_ris_caricamento();
+              const ris = await tools.sendCoinsByCircuit(
+                $q,
+                circuitloaded.value,
+                myrecsendcoin
+              );
               if (ris) {
                 showpage.value = false;
               }
+              fine_caricamento()
+            })
+            .onCancel(() => {
+              return false;
+            })
+            .onDismiss(() => {
+              return false;
             });
         }
       }
diff --git a/src/components/CStatusReg/CStatusReg.vue b/src/components/CStatusReg/CStatusReg.vue
index 3298f70e..5586c8e3 100755
--- a/src/components/CStatusReg/CStatusReg.vue
+++ b/src/components/CStatusReg/CStatusReg.vue
@@ -222,7 +222,7 @@
           </q-expansion-item>
         </q-list>
 
-        <div class="chart-wrapper">
+        <div v-if="tools.isAdmin()" class="chart-wrapper">
           <CLineChart :mydata="datastat.reg_daily" :title="t('stat.reg_daily')"
             color="blue" bordercolor="blue" :sum="true" :showMedia="true" />
         </div>
diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.scss b/src/components/Riso_Home_Modern/Riso_Home_Modern.scss
index dc523e00..9abbfd5a 100644
--- a/src/components/Riso_Home_Modern/Riso_Home_Modern.scss
+++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.scss
@@ -1,1551 +1,533 @@
-@import 'src/css/variables.scss';
 
-// Container principale
+/* =========================================================
+   RISO Home (modern) — refresh estetico
+   - layout più "card-first"
+   - glassmorphism leggero
+   - hover/focus states + touch friendly
+   - safe-area per PWA
+   ========================================================= */
+
 .riso-modern-home {
-  padding: $s-sm;
+  padding: $s-md;
+  padding-bottom: calc(#{$s-md} + env(safe-area-inset-bottom));
   max-width: 1200px;
   margin: 0 auto;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%);
-  min-height: 100vh;
+display: flex;
+  flex-direction: column;
+  gap: $s-md;
+
 }
 
-// ========== HERO CARDS ==========
+/* ---------------- Header ---------------- */
+.riso-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $s-sm;
+  padding: $s-sm $s-sm;
+  border-radius: $r-lg;
+
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08);
+  backdrop-filter: blur(12px);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: $s-sm;
+    min-width: 0;
+  }
+
+  .header-avatar {
+    background: rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .header-avatar-text {
+    font-weight: 800;
+    font-size: 1.05rem;
+    letter-spacing: 0.02em;
+  }
+
+  .header-text {
+    min-width: 0;
+  }
+
+  .header-greeting {
+    font-weight: 800;
+    font-size: 1.02rem;
+    line-height: 1.15;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .u-strong {
+    font-weight: 900;
+  }
+
+  .header-sub {
+    opacity: 0.75;
+    font-size: 0.86rem;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header-action-btn {
+    opacity: 0.9;
+  }
+}
+
+:global(body.body--dark) {
+  .riso-header {
+    background: rgba(16, 24, 40, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
+
+    .header-avatar {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.10);
+    }
+
+    .header-sub {
+      opacity: 0.82;
+    }
+  }
+}
+
+/* ---------------- Hero tiles ---------------- */
 .hero-cards {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: $s-md;
-  margin-bottom: $s-lg;
 
-  @media (min-width: 600px) {
-    grid-template-columns: repeat(4, 1fr);
+  @media (min-width: 700px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 
 .hero-card {
-  background: $gradient-primary;
+  position: relative;
   border-radius: $r-lg;
-  padding: $s-lg;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: $s-sm;
+  padding: $s-md;
   color: white;
   cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  position: relative;
+  user-select: none;
+  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.22);
   overflow: hidden;
-  min-height: 140px;
 
-  &::before {
+  /* shimmer accent */
+  &::after {
     content: '';
     position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    transition: left 0.6s ease;
-  }
-
-  &:hover::before {
-    left: 100%;
+    inset: -60% -60% auto auto;
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.14);
+    filter: blur(2px);
+    transform: translate(40%, -35%);
+    pointer-events: none;
   }
 
   &:hover {
-    transform: translateY(-4px) scale(1.02);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    transform: translateY(-2px);
+    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.28);
+    filter: saturate(1.05);
   }
 
   &:active {
-    transform: translateY(-2px) scale(1);
+    transform: translateY(0px) scale(0.99);
   }
 
-  .q-icon {
-    opacity: 0.95;
-  }
-
-  .card-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-    text-align: center;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  }
-
-  .card-subtitle {
-    font-size: 1rem;
-    opacity: 0.9;
-    text-align: center;
-  }
-
-  &.gradient-success {
-    background: $gradient-success;
-  }
-
-  &.gradient-accent {
-    background: $gradient-accent;
-  }
-
-  &.gradient-info {
-    background: $gradient-info;
-  }
-
-  &.gradient-orange {
-    background: $gradient-orange;
+  &:focus-visible {
+    outline: 3px solid rgba(255, 255, 255, 0.65);
+    outline-offset: 2px;
   }
 }
 
-// ========== SECTION TITLE ==========
-.section-title {
-  font-size: 1.2rem;
-  font-weight: 700;
-  margin: 0;
+.hero-card-top {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: $s-sm;
-  background: $gradient-primary;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+}
 
-  .q-icon {
-    background: $gradient-primary;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.hero-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.20);
+}
+
+.hero-chevron {
+  opacity: 0.9;
+}
+
+.hero-badge {
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.hero-card-body {
+  margin-top: $s-sm;
+  display: grid;
+  gap: 2px;
+}
+
+.card-title {
+  font-size: 1.04rem;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.card-subtitle {
+  font-size: 0.86rem;
+  opacity: 0.92;
+  line-height: 1.25;
+}
+
+/* Varianti gradient (riuso variabili già presenti) */
+.gradient-primary { background: $gradient-primary; }
+.gradient-secondary { background: $gradient-secondary; }
+.gradient-accent { background: $gradient-accent; }
+.gradient-orange { background: $gradient-orange; }
+
+/* ---------------- Wallet section ---------------- */
+.wallet-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $s-sm;
+  padding: $s-md;
+  border-radius: $r-lg;
+
+  background: rgba(255, 255, 255, 0.70);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08);
+  backdrop-filter: blur(12px);
+
+  .wallet-header-left {
+    display: flex;
+    gap: $s-sm;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .wallet-mini-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 14px;
+    display: grid;
+    place-items: center;
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .wallet-header-text {
+    min-width: 0;
+  }
+
+  .wallet-header-sub {
+    margin-top: 2px;
+    font-size: 0.86rem;
+    opacity: 0.72;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .wallet-expand-icon {
+    opacity: 0.8;
   }
 }
 
 .section-title-white {
-  font-size: 1.2rem;
-  font-weight: 700;
   margin: 0;
+  font-size: 1.1rem;
+  font-weight: 900;
+  letter-spacing: 0.01em;
+}
+
+.wallet-section-content {
   display: flex;
-  align-items: center;
-  gap: $s-sm;
-  color: white;
-
-  .q-icon {
-    color: white;
-  }
-}
-
-.section-title-center {
-  font-size: 1.3rem;
-  font-weight: 700;
-  margin: 0 0 $s-lg 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: $s-sm;
-  background: $gradient-primary;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-
-  .q-icon {
-    background: $gradient-primary;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-// ========== QUICK ACTIONS ==========
-.quick-actions-section {
-  background: white;
-  border-radius: $r-lg;
-  padding: $s-md;
-  margin-bottom: $s-lg;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-
-  .actions-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: $s-sm;
-    margin-top: $s-md;
-
-    @media (min-width: 600px) {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-
-  .action-btn {
-    padding: $s-md $s-sm;
-    font-size: 1rem;
-    font-weight: 600;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
-// ========== STATS SECTION ==========
-.stats-section {
-  background: white;
-  border-radius: $r-lg;
-  padding: $s-lg;
-  margin-bottom: $s-lg;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: $s-md;
-
-    @media (max-width: 599px) {
-      grid-template-columns: repeat(3, 1fr);
-      gap: $s-sm;
-    }
-  }
-}
-
-// ========== WALLET SECTION ==========
-.wallet-section {
-  margin-bottom: $s-lg;
-}
-
-.avviso-card {
-  background: $gradient-orange;
-  border-radius: $r-md;
-  padding: $s-md;
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
-  color: white;
+  flex-direction: column;
+  gap: $s-md;
+  margin-top: $s-sm;
 }
 
 .wallet-card {
-  background: $gradient-primary;
-  border-radius: $r-md;
+  border-radius: $r-lg;
   padding: $s-md;
   color: white;
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
-
-  .wallet-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: $s-lg;
-  }
-
-  .wallet-balances {
-    margin-bottom: $s-lg;
-
-    .balance-primary {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      margin-bottom: $s-md;
-
-      .balance-label {
-        font-size: 0.95rem;
-        opacity: 0.9;
-      }
-
-      .balance-value {
-        font-size: 2.8rem;
-        font-weight: 800;
-        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-        letter-spacing: -0.5px;
-      }
-
-      .balance-hint {
-        font-size: 0.8rem;
-        opacity: 0.75;
-        font-style: italic;
-      }
-    }
-
-    .balance-secondary {
-      display: flex;
-      align-items: baseline;
-      gap: $s-sm;
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(5px);
-      padding: $s-sm $s-md;
-      border-radius: $r-sm;
-
-      .balance-label-small {
-        font-size: 1rem;
-        opacity: 0.9;
-      }
-
-      .balance-value-small {
-        font-size: 1.3rem;
-        font-weight: 700;
-      }
-    }
-  }
-
-  .wallet-limits {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: $s-sm;
-    margin-bottom: $s-lg;
-
-    .limit-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(5px);
-      padding: $s-sm;
-      border-radius: $r-sm;
-      border: 2px solid rgba(255, 255, 255, 0.2);
-
-      &.negative {
-        border-color: rgba(239, 68, 68, 0.4);
-      }
-
-      &.positive {
-        border-color: rgba(16, 185, 129, 0.4);
-      }
-
-      .q-icon {
-        opacity: 0.8;
-      }
-
-      .limit-label {
-        font-size: 0.9rem;
-        opacity: 0.85;
-        text-align: center;
-      }
-
-      .limit-value {
-        font-size: 1.1rem;
-        font-weight: 700;
-      }
-    }
-  }
-
-  .wallet-stats {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: $s-md;
-    margin-bottom: $s-lg;
-
-    .stat-item {
-      display: flex;
-      align-items: center;
-      gap: $s-sm;
-      background: rgba(255, 255, 255, 0.15);
-      backdrop-filter: blur(10px);
-      padding: $s-md;
-      border-radius: $r-md;
-
-      .q-icon {
-        background: rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        padding: $s-xs;
-      }
-
-      .stat-content {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-
-        .stat-value {
-          font-size: 1.3rem;
-          font-weight: 700;
-        }
-
-        .stat-label {
-          font-size: 0.8rem;
-          opacity: 0.9;
-        }
-      }
-    }
-  }
-
-  .wallet-detail-btn {
-    width: 100%;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    color: white;
-    font-weight: 600;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.3);
-    }
-  }
+  background: $gradient-primary;
+  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.22);
 }
 
-// ========== CONTENT SECTION ==========
-.content-section {
-  background: white;
-  border-radius: $r-lg;
-  padding: $s-md;
-  margin-bottom: $s-md;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-
-  &:hover {
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-  }
-
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: $s-md;
-    padding-bottom: $s-sm;
-    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
-  }
+.wallet-card-glass {
+  /* mantiene i contenuti leggibili senza perdere il vibe */
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.92), rgba(118, 75, 162, 0.90));
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(10px);
 }
 
-// ========== EVENTS ==========
-.events-scroll {
-  display: flex;
-  gap: $s-md;
-  overflow-x: auto;
-  padding-bottom: $s-sm;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    height: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: $gradient-primary;
-    border-radius: 2px;
-  }
-}
-
-.event-card {
+.wallet-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: $s-md;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-  border: 2px solid rgba(102, 126, 234, 0.2);
-  border-radius: $r-md;
-  padding: $s-md;
-  min-width: 280px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
-    border-color: rgba(102, 126, 234, 0.4);
-  }
-
-  .event-date {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: $gradient-primary;
-    color: white;
-    border-radius: $r-sm;
-    padding: $s-sm;
-    min-width: 50px;
-
-    .event-day {
-      font-size: 1.5rem;
-      font-weight: 700;
-      line-height: 1;
-    }
-
-    .event-month {
-      font-size: 0.9rem;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-  }
-
-  .event-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    .event-title {
-      font-size: 1rem;
-      font-weight: 600;
-      color: #1a202c;
-    }
-
-    .event-location {
-      font-size: 1rem;
-      color: #718096;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      &::before {
-        content: '📍';
-      }
-    }
-  }
-}
-
-// ========== ACTIVITY ==========
-.activity-list {
-  display: flex;
-  flex-direction: column;
   gap: $s-sm;
-}
+  margin-bottom: $s-md;
 
-.activity-item {
-  display: flex;
-  align-items: center;
-  gap: $s-md;
-  padding: $s-md;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: $r-md;
-  cursor: pointer;
-  transition: all 0.3s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.05);
-    transform: translateX(4px);
-  }
-
-  .activity-content {
-    flex: 1;
+  .wallet-title-row {
     display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    .activity-title {
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: #1a202c;
-    }
-
-    .activity-time {
-      font-size: 0.8rem;
-      color: #718096;
-    }
+    align-items: center;
+    gap: $s-sm;
+    font-weight: 900;
+    letter-spacing: 0.01em;
   }
 
-  .activity-amount {
-    font-size: 1rem;
-    font-weight: 700;
+  .wallet-title {
+    font-size: 0.98rem;
+  }
 
-    .positive {
-      color: #10b981;
-    }
-
-    .negative {
-      color: #ef4444;
-    }
+  .wallet-refresh-btn {
+    opacity: 0.92;
   }
 }
 
-// ========== STATS ==========
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: $s-xs;
-  padding: $s-lg;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-  border-radius: $r-md;
-  border: 2px solid rgba(102, 126, 234, 0.1);
-  transition: all 0.3s ease;
+/* balance overview (2 mini barre) */
+.circuits-balance-overview {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $s-md;
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+  @media (min-width: 700px) {
+    grid-template-columns: 1fr 1fr;
   }
+}
 
-  .stat-number {
-    font-size: 2rem;
+/* selector */
+.circuit-selector {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $s-sm;
+  flex-wrap: wrap;
+
+  .selector-label {
+    display: flex;
+    align-items: center;
+    gap: $s-sm;
     font-weight: 800;
-    background: $gradient-primary;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    line-height: 1;
   }
 
-  .stat-text {
-    font-size: 1rem;
-    color: #718096;
-    font-weight: 600;
-    text-align: center;
+  .selector-emoji {
+    filter: saturate(1.1);
   }
 
-  @media (max-width: 599px) {
-    padding: $s-md;
-    gap: 4px;
-
-    .stat-number {
-      font-size: 1.6rem;
-    }
-
-    .stat-text {
-      font-size: 0.9rem;
-    }
-  }
-}
-
-// ========== COMMUNITY SECTION ==========
-.community-section {
-  display: flex;
-  flex-direction: column;
-  gap: $s-md;
-  margin-bottom: $s-md;
-}
-
-.community-card {
-  background: white;
-  border-radius: $r-lg;
-  padding: $s-md;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-
-  &:hover {
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+  .selector-text {
+    opacity: 0.92;
   }
 
-  .community-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: $s-md;
-    padding-bottom: $s-sm;
-    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
-  }
-
-  .community-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: $s-sm;
-    background: $gradient-primary;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-
-    .q-icon {
-      background: $gradient-primary;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-}
-
-// ========== ORGANIZATIONS ==========
-.org-scroll {
-  display: flex;
-  gap: $s-md;
-  overflow-x: auto;
-  padding-bottom: $s-sm;
-  margin-bottom: $s-md;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    height: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 100%);
-    border-radius: 2px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05);
-  }
-}
-
-.org-card-scroll {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: $s-sm;
-  padding: $s-lg;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 197, 253, 0.05) 100%);
-  border: 2px solid rgba(59, 130, 246, 0.2);
-  border-radius: $r-md;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  min-width: 120px;
-  flex-shrink: 0;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
-    border-color: rgba(59, 130, 246, 0.4);
-  }
-
-  .org-name {
-    font-size: 0.9rem;
-    font-weight: 600;
-    text-align: center;
-    color: #1a202c;
-    line-height: 1.2;
-  }
-
-  .org-members {
-    font-size: 0.9rem;
-    color: #718096;
-  }
-}
-
-.view-all-btn {
-  width: 100%;
-  margin-top: $s-sm;
-  font-weight: 600;
-}
-
-// ========== TELEGRAM ==========
-.telegram-grid-modern {
-  display: grid;
-  gap: $s-md;
-
-  @media (max-width: 599px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (min-width: 600px) and (max-width: 899px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (min-width: 900px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.telegram-card-modern {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: $s-md;
-  background: linear-gradient(135deg, #0088cc 0%, #2babd9 100%);
-  border-radius: $r-lg;
-  padding: $s-xl;
-  transition: all 0.3s ease;
-  text-decoration: none;
-  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.3);
-  position: relative;
-  overflow: hidden;
-  min-height: 140px;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    transition: left 0.6s ease;
-  }
-
-  &:hover::before {
-    left: 100%;
-  }
-
-  &:hover {
-    transform: translateY(-4px) scale(1.02);
-    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4);
-  }
-
-  .telegram-icon-wrapper {
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(5px);
-    border-radius: 50%;
-    padding: $s-lg;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .telegram-content-modern {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: $s-sm;
-    width: 100%;
-
-    .telegram-title {
-      font-weight: 700;
-      color: white;
-      font-size: 1rem;
-      text-align: center;
-      flex: 1;
-    }
-
-    .q-icon {
-      color: white;
-      opacity: 0.9;
-    }
-  }
-}
-
-// ========== FOOTER ==========
-.footer-section {
-  display: flex;
-  justify-content: space-around;
-  padding: $s-lg;
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(10px);
-  border-radius: $r-lg;
-  gap: $s-sm;
-  margin-bottom: $s-xl;
-
-  .footer-btn {
-    flex: 1;
-    font-weight: 600;
-    color: #667eea;
-
-    &:hover {
-      background: rgba(102, 126, 234, 0.1);
-    }
-  }
-}
-
-// ========== DIALOG ANNUNCI ==========
-.annunci-dialog {
-  max-width: 500px;
-  width: 90vw;
-
-  .dialog-header {
-    background: $gradient-primary;
-    color: white;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: $s-lg;
-
-    .dialog-title {
-      margin: 0;
-      font-size: 1.3rem;
-      font-weight: 700;
-    }
-  }
-
-  .dialog-content {
-    padding: $s-md;
-  }
-
-  .annunci-options-mobile {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: $s-sm;
-  }
-
-  .annuncio-option {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: $s-sm;
-    padding: $s-md;
-    border-radius: $r-lg;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    color: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    position: relative;
-    overflow: hidden;
-    min-height: 140px;
-    justify-content: center;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -100%;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-      transition: left 0.5s ease;
-    }
-
-    &:hover::before {
-      left: 100%;
-    }
-
-    &:hover {
-      transform: translateY(-4px) scale(1.02);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-    }
-
-    &:active {
-      transform: translateY(-2px) scale(1);
-    }
-
-    .q-icon {
-      opacity: 0.95;
-    }
-
-    .option-title {
-      font-size: 1.5rem;
-      font-weight: 700;
-      text-align: center;
-      line-height: 1.2;
-    }
-
-    .option-subtitle {
-      font-size: 1rem;
-      opacity: 0.9;
-      text-align: center;
-      line-height: 1.3;
-    }
-
-    &.gradient-indigo {
-      background: $gradient-indigo;
-    }
-
-    &.gradient-red {
-      background: $gradient-red;
-    }
-
-    &.gradient-lime {
-      background: $gradient-lime;
-    }
-
-    &.gradient-teal {
-      background: $gradient-teal;
-    }
-  }
-
-  @media (max-width: 599px) {
-    .annuncio-option {
-      padding: $s-md;
-      min-height: 130px;
-
-      .q-icon {
-        font-size: 2rem !important;
-      }
-
-      .option-title {
-        font-size: 1.3rem;
-      }
-
-      .option-subtitle {
-        font-size: 0.9rem;
-      }
-    }
-  }
-}
-
-// ========== ANIMATIONS ==========
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-section {
-  animation: fadeIn 0.5s ease-out;
-}
-
-// ========== RESPONSIVE ==========
-@media (max-width: 599px) {
-  .riso-modern-home {
-    padding: $s-xs;
-  }
-
-  .hero-card {
-    min-height: 120px;
-    padding: $s-md;
-
-    .card-title {
-      font-size: 1rem;
-    }
-
-    .card-subtitle {
-      font-size: 0.9rem;
-    }
-
-    .q-icon {
-      font-size: 2rem !important;
-    }
-  }
-
-  .content-section {
-    padding: $s-sm;
-  }
-
-  .section-title {
-    font-size: 1.1rem;
-  }
-
-  .wallet-card {
-    .wallet-balances {
-      .balance-primary {
-        .balance-value {
-          font-size: 2.2rem;
-        }
-      }
-
-      .balance-secondary {
-        .balance-value-small {
-          font-size: 1.1rem;
-        }
-      }
-    }
-
-    .wallet-limits {
-      .limit-item {
-        padding: $s-xs;
-
-        .limit-label {
-          font-size: 0.7rem;
-        }
-
-        .limit-value {
-          font-size: 1rem;
-        }
-      }
-    }
-  }
-}
-
-
-// Azioni RIS
-.ris-actions-section {
-  margin-bottom: $s-lg;
-}
-
-.ris-actions-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $s-md;
-}
-
-.ris-action-btn {
-  padding: $s-lg;
-  font-size: 1rem;
-  font-weight: 700;
-  transition: all 0.3s ease;
-  min-height: 60px;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-  }
-
-  &.send-btn {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    color: white;
-  }
-
-  &.receive-btn {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    color: white;
-  }
-}
-
-// Community Actions
-.community-actions-section {
-  background: white;
-  border-radius: $r-lg;
-  padding: $s-md;
-  margin-bottom: $s-lg;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.community-actions-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $s-md;
-  margin-top: $s-md;
-}
-
-.community-action-btn {
-  padding: $s-lg $s-md;
-  font-size: 0.95rem;
-  font-weight: 600;
-  transition: all 0.3s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  }
-}
-
-// Wallet rivisitato
-.wallet-activity-focus {
-  background: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(10px);
-  border-radius: $r-md;
-  padding: $s-lg;
-  margin-bottom: $s-lg;
-
-  .activity-message {
-    display: flex;
-    align-items: center;
-    gap: $s-md;
-    margin-bottom: $s-md;
-
-    .activity-text {
-      font-size: 1rem;
-      font-weight: 600;
-      line-height: 1.4;
-    }
-  }
-
-  .last-trade {
-    display: flex;
-    align-items: center;
-    gap: $s-sm;
-    font-size: 0.9rem;
-    opacity: 0.9;
+  .circuit-toggle {
+    background: rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    padding: 4px;
   }
 }
 
 .wallet-transactions {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: $s-sm;
-  margin-bottom: $s-lg;
+  margin-top: $s-md;
 
-  @media (max-width: 599px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .transaction-stat {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(5px);
-    padding: $s-md;
-    border-radius: $r-sm;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-
-    &.total {
-      border-color: rgba(255, 255, 255, 0.4);
-    }
-
-    .stat-number {
-      font-size: 1.5rem;
-      font-weight: 800;
-      line-height: 1;
-    }
-
-    .stat-label {
-      font-size: 0.9rem;
-      opacity: 0.9;
-      text-align: center;
-    }
-
-    .q-icon {
-      opacity: 0.8;
-      margin-bottom: 2px;
-    }
+  @media (min-width: 700px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 
-.wallet-balances-compact {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(5px);
-  border-radius: $r-sm;
-  padding: $s-md;
-  margin-bottom: $s-lg;
-
-  .balance-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 4px 0;
-
-    .balance-label-compact {
-      font-size: 1rem;
-      opacity: 0.9;
-    }
-
-    .balance-value-compact {
-      font-size: 1.1rem;
-      font-weight: 700;
-
-      &.positive {
-        color: #d1fae5;
-      }
-    }
-  }
-
-  .balance-limits-compact {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $s-sm;
-    padding-top: $s-sm;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-
-    .limit-compact {
-      font-size: 0.8rem;
-      opacity: 0.85;
-
-      &.negative {
-        color: #fecaca;
-      }
-
-      &.positive {
-        color: #d1fae5;
-      }
-    }
-  }
-}
-
-// Eventi con immagine
-.event-card {
-  position: relative;
-
-  .event-image {
-    width: 80px;
-    height: 80px;
-    border-radius: $r-sm;
-    flex-shrink: 0;
-  }
-
-  .event-image-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
-  }
-
-  .event-date {
-    position: absolute;
-    top: $s-sm;
-    left: $s-sm;
-    z-index: 1;
-  }
-}
-
-// Telegram con immagini
-.telegram-card-modern {
-  min-height: 180px;
-
-  .telegram-card-image {
-    width: 100%;
-    height: 120px;
-    border-radius: $r-md $r-md 0 0;
-    position: relative;
-  }
-
-  .telegram-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 136, 204, 0.7);
-    backdrop-filter: blur(2px);
-  }
-}
-
-// Footer moderno più visibile
-.footer-section-modern {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: $s-md;
-  padding: $s-lg $s-sm;
-  margin-bottom: $s-xl;
-
-  @media (max-width: 599px) {
-    grid-template-columns: 1fr;
-  }
-
-  .footer-btn-modern {
-    padding: $s-lg;
-    font-size: 0.95rem;
-    font-weight: 700;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
-// Selettore circuito
-.circuit-selector {
-  margin-bottom: $s-lg;
-
-  .selector-label {
-    display: flex;
-    align-items: center;
-    gap: $s-xs;
-    margin-bottom: $s-sm;
-
-    .selector-emoji {
-      font-size: 1.2rem;
-      animation: pointRight 1.5s ease-in-out infinite;
-    }
-
-    .selector-text {
-      font-size: 0.85rem;
-      font-weight: 600;
-      opacity: 0.9;
-    }
-  }
-
-  .circuit-toggle {
-    width: 100%;
-
-    :deep(.q-btn) {
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-      font-weight: 600;
-
-      &.q-btn--active {
-        background: white;
-      }
-    }
-  }
-}
-
-// Animazione puntamento
-@keyframes pointRight {
-
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(4px);
-  }
-}
-
-// Overview saldi circuiti
-.circuits-balance-overview {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: $s-sm;
-  margin-bottom: $s-lg;
-
-  .circuit-balance-mini {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(5px);
-    border-radius: $r-sm;
-    padding: 0px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-
-    .circuit-name {
-      display: block;
-      font-size: 0.9rem;
-      font-weight: bold;
-      opacity: 0.9;
-      margin-bottom: 4px;
-      font-weight: 600;
-    }
-
-    .balance-mini-row {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      font-size: 0.8rem;
-
-      strong {
-        font-weight: 700;
-      }
-    }
-  }
-}
-
-// Transazioni recenti
-.recent-transactions {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(5px);
+.transaction-stat {
   border-radius: $r-md;
-  padding: $s-md;
-  margin-bottom: $s-lg;
+  padding: $s-sm;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  display: grid;
+  gap: 2px;
+  justify-items: center;
+  text-align: center;
 
-  .transactions-title {
-    margin: 0 0 $s-md 0;
-    font-size: 0.95rem;
-    font-weight: 700;
-    opacity: 0.95;
+  .stat-number {
+    font-size: 1.05rem;
+    font-weight: 900;
+    line-height: 1.2;
   }
 
-  .transaction-list {
-    display: flex;
-    flex-direction: column;
-    gap: $s-sm;
+  .stat-label {
+    font-size: 0.78rem;
+    opacity: 0.92;
   }
 
-  .transaction-item {
-    display: flex;
-    align-items: center;
-    gap: $s-sm;
-    background: rgba(255, 255, 255, 0.1);
-    padding: $s-sm;
-    border-radius: $r-sm;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-      transform: translateX(4px);
-    }
-
-    .transaction-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-
-      .transaction-desc {
-        font-size: 1rem;
-        font-weight: 600;
-      }
-
-      .transaction-time {
-        font-size: 0.9rem;
-        opacity: 0.8;
-      }
-    }
-
-    .transaction-amount {
-      font-size: 0.95rem;
-      font-weight: 700;
-
-      &.positive {
-        color: #d1fae5;
-      }
-
-      &.negative {
-        color: #fecaca;
-      }
-    }
+  .q-icon {
+    opacity: 0.9;
   }
 }
 
-// Banner inviti
-.invite-banner {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
-  border: 2px solid rgba(16, 185, 129, 0.3);
-  border-radius: $r-md;
-  padding: $s-md;
-  margin-bottom: $s-md;
-
-  .invite-message {
-    display: flex;
-    gap: $s-md;
-    align-items: flex-start;
-
-    .invite-text {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-
-      .invite-main {
-        font-size: 0.9rem;
-        font-weight: 600;
-        line-height: 1.4;
-      }
-
-      .invite-count {
-        font-size: 0.8rem;
-        color: #059669;
-
-        strong {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-
-// Circuiti overview
-.circuits-overview-section {
-  background: white;
+/* banner */
+.avviso-card {
   border-radius: $r-lg;
   padding: $s-md;
-  margin-bottom: $s-md;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.22);
+  color: white;
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(234, 88, 12, 0.92));
+  border: 1px solid rgba(255, 255, 255, 0.18);
 
-  .circuits-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: $s-md;
-    margin: $s-md 0;
-  }
-
-  .circuit-info-card {
+  .wallet-activity-focus {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: $s-sm;
+  }
+
+  .close-btn {
+    opacity: 0.9;
+  }
+
+  .activity-message {
+    display: flex;
+    gap: $s-sm;
+    align-items: flex-start;
+    flex: 1;
+  }
+
+  .activity-text {
+    font-weight: 800;
+    line-height: 1.25;
+  }
+
+  .details-btn {
+    margin-top: $s-sm;
+    width: 100%;
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.18);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.22);
+
+    .btn-icon { margin-right: $s-xs; }
+    .btn-arrow { margin-left: auto; opacity: 0.9; }
+  }
+}
+
+/* ---------------- Dialog annunci ---------------- */
+.annunci-dialog {
+  width: min(560px, 92vw);
+  border-radius: $r-lg;
+  overflow: hidden;
+}
+
+.dialog-header {
+  padding: $s-md;
+
+  .dialog-title-row {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: $s-xs;
-    padding: $s-lg;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
-    border-radius: $r-md;
-    border: 2px solid rgba(102, 126, 234, 0.1);
+    justify-content: space-between;
+    gap: $s-sm;
+  }
 
-    .circuit-stat-number {
-      font-size: 2rem;
-      font-weight: 800;
-      background: $gradient-primary;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      line-height: 1;
-    }
+  .dialog-title {
+    margin: 0;
+    font-weight: 900;
+    font-size: 1.15rem;
+  }
 
-    .circuit-stat-label {
-      font-size: 1rem;
-      color: #718096;
-      font-weight: 600;
-      text-align: center;
-    }
+  .dialog-subtitle {
+    margin-top: 4px;
+    font-size: 0.9rem;
+    opacity: 0.72;
   }
 }
 
-// Strette di mano
-.handshake-avatars {
+.annunci-list {
+  padding: 0;
+}
+
+.annunci-item {
+  min-height: 74px;
+  color: white;
+  border-radius: 0;
+  transition: filter 140ms ease;
   position: relative;
-  display: flex;
-  width: 48px;
+  overflow: hidden;
 
-  .avatar-overlap {
-    position: absolute;
-    left: 16px;
+  /* Quasar adds a light overlay on hover/focus; we force a darker overlay so white titles stay readable */
+  .q-focus-helper {
+    background: rgba(0, 0, 0, 0.22) !important;
+    opacity: 0;
+    transition: opacity 120ms ease;
   }
-}
 
-.close-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  color: rgba(255, 255, 255, 0.7);
+  &:hover .q-focus-helper,
+  &:focus .q-focus-helper,
+  &.q-item--active .q-focus-helper,
+  &.q-item--highlighted .q-focus-helper {
+    opacity: 1;
+  }
 
   &:hover {
-    color: white;
+    filter: saturate(1.06);
+  }
+
+  &.disabled {
+    opacity: 0.72;
+  }
+
+  .annunci-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    display: grid;
+    place-items: center;
+    background: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.20);
+  }
+
+  .option-title {
+    font-weight: 900;
+    letter-spacing: 0.01em;
+  }
+
+  .option-subtitle {
+    opacity: 0.92;
   }
 }
 
-// Header transazioni con toggle
-.transactions-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: $s-md;
+/* gradients used in list */
+.gradient-green { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.gradient-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.gradient-lime { background: linear-gradient(135deg, #84cc16, #22c55e); }
+.gradient-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
 
-  .transactions-title {
-    margin: 0;
-    font-size: 0.95rem;
-    font-weight: 700;
-    opacity: 0.95;
+:global(body.body--dark) {
+  .wallet-section-header {
+    background: rgba(16, 24, 40, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
+
+    .wallet-mini-icon {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.10);
+    }
+
+    .wallet-header-sub {
+      opacity: 0.85;
+    }
   }
 }
-
-// Transazioni community con 2 avatar
-.transaction-users {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.transaction-amount.community {
-  color: #a78bfa; // Viola per transazioni community
-  font-weight: 700;
-}
\ No newline at end of file
diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.ts b/src/components/Riso_Home_Modern/Riso_Home_Modern.ts
index 953fcf30..91c9e021 100644
--- a/src/components/Riso_Home_Modern/Riso_Home_Modern.ts
+++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.ts
@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { CRISBalanceBar } from '@/components/CRISBalanceBar';
 import { tools } from '@tools';
-import { useUserStore } from 'app/src/store';
+import { useCircuitStore, useGlobalStore, useUserStore } from 'app/src/store';
 
 const isTest = true; // Cambia a false in produzione
 
@@ -15,8 +15,8 @@ export default defineComponent({
     // State
     const showAnnunciDialog = ref(false);
     const showBannScambio = ref(true);
+    const walletSectionOpen = ref(false);
 
-    const selectedCircuit = ref<'provinciale' | 'italia'>('provinciale');
     const handshakesView = ref<'mine' | 'all'>('mine');
 
     const transactionsView = ref<'mine' | 'all'>('mine');
@@ -60,12 +60,9 @@ export default defineComponent({
     const lastTradeTime = ref('Mai');
 
     const userStore = useUserStore()
+    const circuitStore = useCircuitStore()
+    const globalStore = useGlobalStore()
 
-    // Organizzazioni
-    const organizations = ref<any[]>([
-      // Esempio struttura:
-      // { initial: 'AS', name: 'Associazione Locale', membersCount: 45 }
-    ]);
 
     // Telegram
     const telegramLinks = ref<any[]>([
@@ -78,6 +75,8 @@ export default defineComponent({
     const hasOrganizations = computed(() => organizations.value.length > 0);
     const hasTelegramLinks = computed(() => telegramLinks.value.length > 0);
 
+    const organizations = computed(() => globalStore.getMyGroups())
+
     // ========== METODI DA IMPLEMENTARE ==========
 
     // Dialog Annunci
@@ -193,7 +192,7 @@ export default defineComponent({
 
     const openOrganization = (org: any) => {
       // TODO: aprire dettaglio organizzazione
-      // $router.push(`/groups/${org.id}`)
+      $router.push(`/grp/${org.groupname}`)
     };
 
     const goToAllOrganizations = () => {
@@ -217,296 +216,6 @@ export default defineComponent({
       // $router.push('/info')
     };
 
-    const loadTestData = () => {
-      if (!isTest) return;
-
-      // Circuito Provinciale
-      circuits.value.provinciale = {
-        title: 'RIS Provinciale',
-        availableBalance: 50,
-        realBalance: -50,
-        trustLimit: -100,
-        maxAccumulation: 200,
-        totalTransactions: 15,
-        sentCount: 8,
-        receivedCount: 7,
-        uniqueMembers: 12,
-        lastTradeTime: '2 giorni fa',
-        recentTransactions: [
-          { userInitial: 'M', description: 'Ortaggi freschi', time: '2h fa', amount: 15 },
-          {
-            userInitial: 'L',
-            description: 'Lezione chitarra',
-            time: '5h fa',
-            amount: -25,
-          },
-          {
-            userInitial: 'G',
-            description: 'Riparazione bici',
-            time: '1 giorno fa',
-            amount: 30,
-          },
-        ],
-      };
-
-      // Circuito Italia
-      circuits.value.italia = {
-        title: 'RIS Italia',
-        availableBalance: -50,
-        realBalance: 150,
-        trustLimit: -200,
-        maxAccumulation: 400,
-        totalTransactions: 8,
-        sentCount: 3,
-        receivedCount: 5,
-        uniqueMembers: 7,
-        lastTradeTime: '5 giorni fa',
-        recentTransactions: [
-          {
-            userInitial: 'A',
-            description: 'Consulenza legale',
-            time: '3 giorni fa',
-            amount: -80,
-          },
-          {
-            userInitial: 'F',
-            description: 'Prodotti artigianali',
-            time: '4 giorni fa',
-            amount: 50,
-          },
-          {
-            userInitial: 'S',
-            description: 'Corso di cucina',
-            time: '5 giorni fa',
-            amount: -40,
-          },
-        ],
-      };
-
-      // Transazioni community (tutti)
-      allTransactions.value = [
-        {
-          fromInitial: 'M',
-          toInitial: 'L',
-          fromName: 'Mario',
-          toName: 'Laura',
-          amount: 25,
-          time: '1h fa',
-        },
-        {
-          fromInitial: 'G',
-          toInitial: 'C',
-          fromName: 'Giovanni',
-          toName: 'Chiara',
-          amount: 40,
-          time: '2h fa',
-        },
-        {
-          fromInitial: 'P',
-          toInitial: 'A',
-          fromName: 'Paolo',
-          toName: 'Anna',
-          amount: 15,
-          time: '3h fa',
-        },
-      ];
-      // Community
-      invitesSent.value = 7;
-
-      myHandshakes.value = [
-        { userInitial: 'M', name: 'Mario Rossi', time: '2 giorni fa' },
-        { userInitial: 'L', name: 'Laura Bianchi', time: '3 giorni fa' },
-        { userInitial: 'G', name: 'Giovanni Verdi', time: '1 settimana fa' },
-        { userInitial: 'C', name: 'Chiara Neri', time: '2 settimane fa' },
-        { userInitial: 'P', name: 'Paolo Conti', time: '3 settimane fa' },
-      ];
-
-      allHandshakes.value = [
-        {
-          user1Initial: 'A',
-          user2Initial: 'B',
-          user1Name: 'Anna',
-          user2Name: 'Bruno',
-          time: '1h fa',
-        },
-        {
-          user1Initial: 'C',
-          user2Initial: 'D',
-          user1Name: 'Carlo',
-          user2Name: 'Diana',
-          time: '3h fa',
-        },
-        {
-          user1Initial: 'E',
-          user2Initial: 'F',
-          user1Name: 'Elena',
-          user2Name: 'Franco',
-          time: '5h fa',
-        },
-        {
-          user1Initial: 'G',
-          user2Initial: 'H',
-          user1Name: 'Giulia',
-          user2Name: 'Hugo',
-          time: '1 giorno fa',
-        },
-        {
-          user1Initial: 'I',
-          user2Initial: 'L',
-          user1Name: 'Irene',
-          user2Name: 'Luca',
-          time: '2 giorni fa',
-        },
-      ];
-
-      // Eventi test data con immagini
-      upcomingEventsCount.value = 7;
-      recentEvents.value = [
-        {
-          day: '15',
-          month: 'DIC',
-          title: 'Mercatino di Natale',
-          location: 'Roma Centro',
-          id: 1,
-          image: '',
-        },
-        {
-          day: '20',
-          month: 'DIC',
-          title: 'Corso di Panificazione',
-          location: 'Milano',
-          id: 2,
-          image: '',
-        },
-        {
-          day: '22',
-          month: 'DIC',
-          title: 'Scambio Semi e Piante',
-          location: 'Bologna',
-          id: 3,
-          image: '',
-        },
-        {
-          day: '28',
-          month: 'DIC',
-          title: 'Incontro Produttori Locali',
-          location: 'Firenze',
-          id: 4,
-          image: '',
-        },
-        {
-          day: '05',
-          month: 'GEN',
-          title: 'Festa della Comunità',
-          location: 'Torino',
-          id: 5,
-          image: '',
-        },
-      ];
-
-      // Scambi test data
-      recentTrades.value = [
-        {
-          userInitial: 'M',
-          description: 'Scambio ortaggi freschi',
-          time: '2h fa',
-          amount: 15,
-        },
-        {
-          userInitial: 'L',
-          description: 'Lezione di chitarra',
-          time: '5h fa',
-          amount: -25,
-        },
-        {
-          userInitial: 'G',
-          description: 'Riparazione bicicletta',
-          time: '1 giorno fa',
-          amount: 30,
-        },
-        {
-          userInitial: 'A',
-          description: 'Pane fatto in casa',
-          time: '2 giorni fa',
-          amount: -10,
-        },
-        {
-          userInitial: 'S',
-          description: 'Consulenza informatica',
-          time: '3 giorni fa',
-          amount: 40,
-        },
-      ];
-
-      // Statistiche test data
-      totalMembers.value = 342;
-      totalTrades.value = 1567;
-      totalEvents.value = 89;
-
-      // Organizzazioni test data
-      organizations.value = [
-        { initial: 'AS', name: 'Associazione Scambio Locale', membersCount: 45, id: 1 },
-        { initial: 'GP', name: 'Gruppo Produttori Bio', membersCount: 32, id: 2 },
-        { initial: 'CE', name: 'Comunità Energetica', membersCount: 28, id: 3 },
-        { initial: 'RT', name: 'Rete Tempo', membersCount: 56, id: 4 },
-        { initial: 'OC', name: 'Orto Condiviso', membersCount: 23, id: 5 },
-        { initial: 'LB', name: 'La Banca del Tempo', membersCount: 41, id: 6 },
-        { initial: 'MP', name: 'Mercato Popolare', membersCount: 38, id: 7 },
-        { initial: 'CC', name: 'Casa Comune', membersCount: 19, id: 8 },
-        { initial: 'SF', name: 'Sharing Food', membersCount: 27, id: 9 },
-        { initial: 'EA', name: 'Economia Alternativa', membersCount: 34, id: 10 },
-      ];
-
-      // Telegram test data con immagini
-      telegramLinks.value = [
-        {
-          title: 'Canale Principale RISO',
-          url: 'https://t.me/riso_italia',
-          image: '/images/telegram-main.jpg',
-        },
-        {
-          title: 'Gruppo Scambi Locali',
-          url: 'https://t.me/riso_scambi',
-          image: '/images/telegram-scambi.jpg',
-        },
-        {
-          title: 'Eventi e Incontri',
-          url: 'https://t.me/riso_eventi',
-          image: '/images/telegram-eventi.jpg',
-        },
-      ];
-    };
-
-    // Dati circuiti
-    const circuits = ref({
-      provinciale: {
-        availableBalance: 0,
-        realBalance: 0,
-        trustLimit: -100,
-        maxAccumulation: 200,
-        totalTransactions: 0,
-        sentCount: 0,
-        receivedCount: 0,
-        uniqueMembers: 0,
-        lastTradeTime: 'Mai',
-        recentTransactions: [] as any[],
-        title: 'RIS Provinciale',
-      },
-      italia: {
-        availableBalance: 0,
-        realBalance: 0,
-        trustLimit: -200,
-        maxAccumulation: 400,
-        totalTransactions: 0,
-        sentCount: 0,
-        receivedCount: 0,
-        uniqueMembers: 0,
-        lastTradeTime: 'Mai',
-        recentTransactions: [] as any[],
-        title: 'RIS Italia',
-      },
-    });
-
     // Dati community
     const invitesSent = ref(0);
     const myHandshakes = ref<any[]>([]);
@@ -516,11 +225,6 @@ export default defineComponent({
     const activeCircuitsCount = ref(2);
     const totalCircuitsAvailable = ref(12);
 
-    // Computed per circuito corrente
-    const currentCircuitData = computed(() => {
-      return circuits.value[selectedCircuit.value];
-    });
-
     // Metodi
     const openTransaction = (tx: any) => {
       // TODO: aprire dettaglio transazione
@@ -535,7 +239,7 @@ export default defineComponent({
       // $router.push('/circuits')
     };
 
-    loadTestData();
+    //loadTestData();
 
     onMounted(() => {
       showBannScambio.value = tools.getCookieBool('bann_scambio', true);
@@ -605,10 +309,7 @@ export default defineComponent({
       uniqueMembers,
       lastTradeTime,
       goToCircuits,
-      selectedCircuit,
       handshakesView,
-      circuits,
-      currentCircuitData,
       invitesSent,
       myHandshakes,
       allHandshakes,
@@ -622,6 +323,8 @@ export default defineComponent({
       transactionsView,
       allTransactions,
       userStore,
+      walletSectionOpen,
+      circuitStore,
     };
   },
 });
diff --git a/src/components/Riso_Home_Modern/Riso_Home_Modern.vue b/src/components/Riso_Home_Modern/Riso_Home_Modern.vue
index 014c7d58..5497ca03 100644
--- a/src/components/Riso_Home_Modern/Riso_Home_Modern.vue
+++ b/src/components/Riso_Home_Modern/Riso_Home_Modern.vue
@@ -1,614 +1,168 @@
 <template>
   <div class="riso-modern-home">
-    <!-- Hero Section: Card Principali -->
+    <!-- Header -->
+    <header class="riso-header">
+      <div class="header-left">
+        <q-avatar
+          size="44px"
+          class="header-avatar"
+        >
+          <span class="header-avatar-text">
+            {{ (userStore.my.username || 'R').slice(0, 1).toUpperCase() }}
+          </span>
+        </q-avatar>
+
+        <div class="header-text">
+          <div class="header-greeting">
+            Ciao, <span class="u-strong">{{ userStore.my.username }}</span>
+          </div>
+          <div class="header-sub">Rete Italiana Scambio Orizzontale</div>
+        </div>
+      </div>
+
+      <div class="header-actions">
+        <q-btn
+          flat
+          round
+          dense
+          icon="help_outline"
+          class="header-action-btn"
+          aria-label="Guida"
+          @click="openGuide"
+        />
+      </div>
+    </header>
+
+    <!-- Hero Section: Azioni principali -->
     <section class="hero-cards">
-      <!-- Card Annunci -->
+      <!-- Annunci -->
       <div
         class="hero-card gradient-primary"
+        role="button"
+        tabindex="0"
+        v-ripple
         @click="openAnnunciDialog"
+        @keyup.enter="openAnnunciDialog"
+        @keyup.space.prevent="openAnnunciDialog"
       >
-        <q-icon
-          name="campaign"
-          size="2.5rem"
-        />
-        <span class="card-title">Annunci</span>
-        <span class="card-subtitle">Beni, Servizi, Ospitalità</span>
+        <div class="hero-card-top">
+          <div class="hero-icon">
+            <q-icon
+              name="campaign"
+              size="1.6rem"
+            />
+          </div>
+          <q-icon
+            name="chevron_right"
+            size="sm"
+            class="hero-chevron"
+          />
+        </div>
+
+        <div class="hero-card-body">
+          <div class="card-title">Annunci</div>
+          <div class="card-subtitle">Beni · Servizi · Ospitalità</div>
+        </div>
       </div>
 
-      <!-- Card Circuiti RIS -->
+      <!-- Circuiti -->
       <div
-        class="hero-card gradient-success"
+        class="hero-card gradient-secondary"
+        role="button"
+        tabindex="0"
+        v-ripple
         @click="goToCircuits"
+        @keyup.enter="goToCircuits"
+        @keyup.space.prevent="goToCircuits"
       >
-        <q-icon
-          name="fas fa-coins"
-          size="2.5rem"
-        />
-        <span class="card-title">Circuiti RIS</span>
-        <span class="card-subtitle">Gestisci i tuoi RIS</span>
+        <div class="hero-card-top">
+          <div class="hero-icon">
+            <q-img
+              src="/images/1ris_rosso_100.png"
+              width="1.6rem"
+            />
+          </div>
+
+          <q-badge
+            class="hero-badge"
+            color="white"
+            text-color="primary"
+            rounded
+          >
+            {{ circuitStore.quantiCircuitiSonoDentro() }}
+          </q-badge>
+        </div>
+
+        <div class="hero-card-body">
+          <div class="card-title">Circuiti RIS</div>
+          <div class="card-subtitle">Saldi · Limiti · Movimenti</div>
+        </div>
       </div>
 
-      <!-- Card Eventi -->
+      <!-- Eventi -->
       <div
         class="hero-card gradient-accent"
+        role="button"
+        tabindex="0"
+        v-ripple
         @click="goToEvents"
+        @keyup.enter="goToEvents"
+        @keyup.space.prevent="goToEvents"
       >
-        <q-icon
-          name="event"
-          size="2.5rem"
-        />
-        <span class="card-title">Eventi</span>
-        <span class="card-subtitle">{{ upcomingEventsCount }} prossimi</span>
+        <div class="hero-card-top">
+          <div class="hero-icon">
+            <q-icon
+              name="event"
+              size="1.6rem"
+            />
+          </div>
+
+          <!--<q-badge
+            class="hero-badge"
+            color="white"
+            text-color="primary"
+            rounded
+          >
+            {{ upcomingEventsCount }}
+          </q-badge>-->
+        </div>
+
+        <div class="hero-card-body">
+          <div class="card-title">Eventi</div>
+          <div class="card-subtitle">I prossimi nella rete</div>
+        </div>
       </div>
 
-      <!-- Card Profilo -->
+      <!-- Profilo -->
       <div
         class="hero-card gradient-orange"
+        role="button"
+        tabindex="0"
+        v-ripple
         @click="goToProfile"
+        @keyup.enter="goToProfile"
+        @keyup.space.prevent="goToProfile"
       >
-        <q-icon
-          name="account_circle"
-          size="2.5rem"
-        />
-        <span class="card-title">Il mio Profilo</span>
-        <span class="card-subtitle text-italic">({{ userStore.my.username }})</span>
-      </div>
-    </section>
-
-    <!-- Azioni RIS -->
-    <section class="ris-actions-section">
-      <div class="ris-actions-grid">
-        <q-btn
-          unelevated
-          rounded
-          class="ris-action-btn send-btn"
-          icon="arrow_upward"
-          label="Invia RIS"
-          @click="sendRIS"
-        />
-        <q-btn
-          unelevated
-          rounded
-          class="ris-action-btn receive-btn"
-          icon="arrow_downward"
-          label="Ricevi RIS"
-          @click="receiveRIS"
-        />
-      </div>
-    </section>
-
-    <!-- Wallet Card Dettagliata con 2 Circuiti -->
-    <section class="wallet-section">
-      <div class="wallet-card">
-        <div class="wallet-header">
-          <h2 class="section-title-white">
-            <q-icon name="fas fa-coins" />
-            I Tuoi Scambi in RIS
-          </h2>
-          <q-btn
-            flat
-            dense
-            round
-            icon="refresh"
-            text-color="white"
-            @click="refreshWallet"
-          />
-        </div>
-
-        <!-- Saldi Entrambi Circuiti -->
-        <div class="circuits-balance-overview">
-          <div class="circuit-balance-mini">
-            <CRISBalanceBar
-              :current-balance="circuits.provinciale.realBalance"
-              :min-limit="circuits.provinciale.trustLimit"
-              :max-limit="circuits.provinciale.maxAccumulation"
-              :label="circuits.provinciale.title"
-              small
-            />
-          </div>
-          <div class="circuit-balance-mini">
-            <CRISBalanceBar
-              :current-balance="circuits.italia.realBalance"
-              :min-limit="circuits.italia.trustLimit"
-              :max-limit="circuits.italia.maxAccumulation"
-              :label="circuits.italia.title"
-              small
-            />
-          </div>
-        </div>
-      </div>
-      <div class="wallet-card">
-        <!-- Selettore Circuito -->
-        <div class="circuit-selector">
-          <div class="selector-label">
-            <span class="selector-emoji">👉🏻</span>
-            <span class="selector-text">Seleziona il Circuito</span>
-          </div>
-          <q-btn-toggle
-            v-model="selectedCircuit"
-            dense
-            no-caps
-            unelevated
-            rounded
-            toggle-color="white"
-            toggle-text-color="primary"
-            :options="[
-              { label: 'RIS Provinciale', value: 'provinciale' },
-              { label: 'RIS Italia', value: 'italia' },
-            ]"
-            class="circuit-toggle"
-          />
-        </div>
-        <!-- Statistiche transazioni del circuito selezionato -->
-        <div class="wallet-transactions">
-          <div class="transaction-stat total">
+        <div class="hero-card-top">
+          <div class="hero-icon">
             <q-icon
-              name="repeat"
-              size="sm"
+              name="account_circle"
+              size="1.6rem"
             />
-            <span class="stat-number">{{ currentCircuitData.totalTransactions }}</span>
-            <span class="stat-label">Transazioni</span>
           </div>
-          <div class="transaction-stat members">
-            <q-icon
-              name="people"
-              size="sm"
-            />
-            <span class="stat-number">{{ currentCircuitData.uniqueMembers }}</span>
-            <span class="stat-label">Membri coinvolti</span>
-          </div>
-          <div class="transaction-stat sent">
-            <q-icon
-              name="arrow_upward"
-              size="sm"
-            />
-            <span class="stat-number">{{ currentCircuitData.sentCount }}</span>
-            <span class="stat-label">Inviate</span>
-          </div>
-          <div class="transaction-stat received">
-            <q-icon
-              name="arrow_downward"
-              size="sm"
-            />
-            <span class="stat-number">{{ currentCircuitData.receivedCount }}</span>
-            <span class="stat-label">Ricevute</span>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="showBannScambio"
-        class="avviso-card"
-      >
-        <div class="wallet-activity-focus">
-          <q-btn
-            flat
-            dense
-            round
-            icon="close"
-            class="close-btn"
-            @click="
-              showBannScambio = false;
-              tools.setCookie('bann_scambio', '0');
-            "
-          />
-          <div class="activity-message">
-            <q-icon
-              name="people_outline"
-              size="lg"
-            />
-            <span class="activity-text"
-              >Continua a scambiare con più persone per far crescere la tua
-              comunità!</span
-            >
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Prossimi Eventi -->
-    <section
-      v-if="hasEvents"
-      class="content-section"
-    >
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="event" />
-          Prossimi Eventi
-        </h2>
-        <q-btn
-          flat
-          dense
-          round
-          icon="arrow_forward"
-          @click="goToAllEvents"
-        />
-      </div>
 
-      <div
-        v-for="(event, idx) in recentEvents"
-        :key="idx"
-        class="event-card"
-        @click="openEvent(event)"
-      >
-        <q-img
-          :src="event.image || '/images/event-placeholder.png'"
-          class="event-image"
-          ratio="1"
-        >
-          <template
-            v-if="!event.image"
-            v-slot:error
-          >
-            <div class="event-image-placeholder">
-              <q-icon
-                name="event"
-                size="2rem"
-                color="grey-5"
-              />
-            </div>
-          </template>
-        </q-img>
-        <div class="event-date">
-          <span class="event-day">{{ event.day }}</span>
-          <span class="event-month">{{ event.month }}</span>
-        </div>
-        <div class="event-info">
-          <span class="event-title">{{ event.title }}</span>
-          <span class="event-location">{{ event.location }}</span>
-        </div>
-        <q-icon name="chevron_right" />
-      </div>
-    </section>
-
-    <!-- Organizzazioni -->
-    <section
-      v-if="hasOrganizations"
-      class="content-section"
-    >
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="fas fa-users" />
-          Organizzazioni
-        </h2>
-        <q-btn
-          flat
-          dense
-          round
-          icon="arrow_forward"
-          @click="goToAllOrganizations"
-        />
-      </div>
-
-      <div class="org-scroll">
-        <div
-          v-for="(org, idx) in organizations.slice(0, 10)"
-          :key="idx"
-          class="org-card-scroll"
-          @click="openOrganization(org)"
-        >
-          <q-avatar
-            size="50px"
-            color="blue-6"
-            text-color="white"
-          >
-            {{ org.initial }}
-          </q-avatar>
-          <span class="org-name">{{ org.name }}</span>
-          <span class="org-members">{{ org.membersCount }} membri</span>
-        </div>
-      </div>
-    </section>
-
-    <!-- Circuiti RIS Overview -->
-    <!--<section class="circuits-overview-section">
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="account_balance" />
-          Circuiti RIS
-        </h2>
-      </div>
-
-      <div class="circuits-cards">
-        <div class="circuit-info-card">
           <q-icon
-            name="check_circle"
-            color="positive"
-            size="lg"
-          />
-          <span class="circuit-stat-number">{{ activeCircuitsCount }}</span>
-          <span class="circuit-stat-label">Circuiti Attivi</span>
-        </div>
-        <div class="circuit-info-card">
-          <q-icon
-            name="public"
-            color="primary"
-            size="lg"
-          />
-          <span class="circuit-stat-number">{{ totalCircuitsAvailable }}</span>
-          <span class="circuit-stat-label">Circuiti Disponibili</span>
-        </div>
-      </div>
-
-      <q-btn
-        unelevated
-        rounded
-        class="view-all-btn"
-        label="Esplora tutti i Circuiti"
-        icon-right="arrow_forward"
-        color="primary"
-        @click="goToAllCircuits"
-      />
-    </section>
-    -->
-
-    <!-- Community Actions -->
-    <section class="community-actions-section">
-      <h2 class="section-title">
-        <q-icon name="people" />
-        Community
-      </h2>
-
-      <div class="invite-banner">
-        <div class="invite-message">
-          <q-icon
-            name="campaign"
-            size="md"
-            color="positive"
-          />
-          <div class="invite-text">
-            <span class="invite-main"
-              >Aiuta la community a crescere, parla di RISO ed invita le persone alla
-              App</span
-            >
-            <span class="invite-count"
-              >Hai già inviato <strong>{{ invitesSent }}</strong> inviti</span
-            >
-          </div>
-        </div>
-      </div>
-
-      <div class="community-actions-grid">
-        <q-btn
-          unelevated
-          rounded
-          class="community-action-btn"
-          icon="person_add"
-          label="Invita Amici"
-          color="positive"
-          @click="inviteFriend"
-        />
-        <q-btn
-          unelevated
-          rounded
-          class="community-action-btn"
-          icon="list"
-          label="Lista Iscritti"
-          color="info"
-          @click="showMembers"
-        />
-      </div>
-    </section>
-
-    <!-- Attività Community
-    <section class="community-section">
-      <div class="community-card">
-        <div class="community-header">
-          <h3 class="community-title">
-            <q-icon name="handshake" />
-            Strette di Mano
-          </h3>
-          <q-btn-toggle
-            v-model="handshakesView"
-            dense
-            no-caps
-            unelevated
-            rounded
+            name="chevron_right"
             size="sm"
-            toggle-color="primary"
-            :options="[
-              { label: 'Tue', value: 'mine' },
-              { label: 'Generali', value: 'all' },
-            ]"
+            class="hero-chevron"
           />
         </div>
 
-        <div
-          v-if="handshakesView === 'mine'"
-          class="activity-list"
-        >
-          <div
-            v-for="(handshake, idx) in myHandshakes.slice(0, 5)"
-            :key="idx"
-            class="activity-item"
-            @click="openHandshake(handshake)"
-          >
-            <q-avatar
-              size="40px"
-              color="purple-6"
-              text-color="white"
-            >
-              {{ handshake.userInitial }}
-            </q-avatar>
-            <div class="activity-content">
-              <span class="activity-title">{{ handshake.name }}</span>
-              <span class="activity-time">Stretta di mano {{ handshake.time }}</span>
-            </div>
-            <q-icon
-              name="handshake"
-              color="purple-6"
-            />
-          </div>
-        </div>
-
-        <div
-          v-if="handshakesView === 'all'"
-          class="activity-list"
-        >
-          <div
-            v-for="(handshake, idx) in allHandshakes.slice(0, 5)"
-            :key="idx"
-            class="activity-item"
-            @click="openHandshake(handshake)"
-          >
-            <div class="handshake-avatars">
-              <q-avatar
-                size="32px"
-                color="purple-6"
-                text-color="white"
-              >
-                {{ handshake.user1Initial }}
-              </q-avatar>
-              <q-avatar
-                size="32px"
-                color="purple-4"
-                text-color="white"
-                class="avatar-overlap"
-              >
-                {{ handshake.user2Initial }}
-              </q-avatar>
-            </div>
-            <div class="activity-content">
-              <span class="activity-title"
-                >{{ handshake.user1Name }} e {{ handshake.user2Name }}</span
-              >
-              <span class="activity-time">{{ handshake.time }}</span>
-            </div>
-            <q-icon
-              name="handshake"
-              color="purple-6"
-            />
-          </div>
+        <div class="hero-card-body">
+          <div class="card-title">Il mio profilo</div>
+          <div class="card-subtitle text-italic">@{{ userStore.my.username }}</div>
         </div>
       </div>
-      -->
-
-    <!-- Ultimi Scambi -->
-    <!--<div class="community-card">
-        <div class="community-header">
-          <h3 class="community-title">
-            <q-icon name="swap_horiz" />
-            Ultimi Scambi
-          </h3>
-          <q-btn
-            flat
-            dense
-            round
-            icon="arrow_forward"
-            @click="goToAllTrades"
-          />
-        </div>
-        <div class="activity-list">
-          <div
-            v-for="(trade, idx) in recentTrades.slice(0, 3)"
-            :key="idx"
-            class="activity-item"
-            @click="openTrade(trade)"
-          >
-            <q-avatar
-              size="40px"
-              color="primary"
-              text-color="white"
-            >
-              {{ trade.userInitial }}
-            </q-avatar>
-            <div class="activity-content">
-              <span class="activity-title">{{ trade.description }}</span>
-              <span class="activity-time">{{ trade.time }}</span>
-            </div>
-            <div class="activity-amount">
-              <span :class="trade.amount > 0 ? 'positive' : 'negative'">
-                {{ trade.amount > 0 ? '+' : '' }}{{ trade.amount }} RIS
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>-->
-
-    <!-- Canali Telegram -->
-    <!--<section
-      v-if="hasTelegramLinks"
-      class="content-section"
-    >
-      <div class="section-header">
-        <h2 class="section-title">
-          <q-icon name="telegram" />
-          Unisciti ai Canali
-        </h2>
-      </div>
-
-      <div class="telegram-grid-modern">
-        <a
-          v-for="(link, idx) in telegramLinks.slice(0, 3)"
-          :key="idx"
-          :href="link.url"
-          target="_blank"
-          class="telegram-card-modern"
-        >
-          <q-img
-            v-if="link.image"
-            :src="link.image"
-            class="telegram-card-image"
-            ratio="16/9"
-          >
-            <div class="telegram-overlay">
-              <q-icon
-                name="telegram"
-                size="3rem"
-                color="white"
-              />
-            </div>
-          </q-img>
-          <div
-            v-else
-            class="telegram-icon-wrapper"
-          >
-            <q-icon
-              name="telegram"
-              size="3rem"
-              color="white"
-            />
-          </div>
-          <div class="telegram-content-modern">
-            <span class="telegram-title">{{ link.title }}</span>
-            <q-icon
-              name="open_in_new"
-              size="sm"
-            />
-          </div>
-        </a>
-      </div>
-    </section>
-    -->
-
-    <!-- Footer Links -->
-    <section class="footer-section-modern">
-      <q-btn
-        unelevated
-        rounded
-        class="footer-btn-modern"
-        icon="help_outline"
-        label="FAQ"
-        color="primary"
-        @click="openFAQ"
-      />
-      <q-btn
-        unelevated
-        rounded
-        class="footer-btn-modern"
-        icon="school"
-        label="Guida"
-        color="secondary"
-        @click="openGuide"
-      />
-      <q-btn
-        unelevated
-        rounded
-        class="footer-btn-modern"
-        icon="support_agent"
-        label="Assistenza"
-        color="positive"
-        @click="openInfo"
-      />
     </section>
 
     <!-- Dialog Annunci -->
@@ -619,65 +173,130 @@
     >
       <q-card class="annunci-dialog">
         <q-card-section class="dialog-header">
-          <h3 class="dialog-title">Scegli Categoria</h3>
-          <q-btn
-            flat
-            round
-            dense
-            icon="close"
-            v-close-popup
-          />
-        </q-card-section>
-
-        <q-card-section class="dialog-content">
-          <div class="annunci-options-mobile">
-            <div
-              class="annuncio-option gradient-indigo"
-              @click="goToGoods"
-            >
-              <q-icon
-                name="fas fa-tshirt"
-                size="2.5rem"
-              />
-              <span class="option-title">Beni</span>
-              <span class="option-subtitle">Autoproduzioni, cibo</span>
-            </div>
-
-            <div
-              class="annuncio-option gradient-red"
-              @click="goToServices"
-            >
-              <q-icon
-                name="fas fa-house-user"
-                size="2.5rem"
-              />
-              <span class="option-title">Servizi</span>
-              <span class="option-subtitle">Competenze, aiuti</span>
-            </div>
-
-            <div
-              class="annuncio-option gradient-lime"
-              @click="goToHospitality"
-            >
-              <q-icon
-                name="fas fa-bed"
-                size="2.5rem"
-              />
-              <span class="option-title">Ospitalità</span>
-              <span class="option-subtitle">Ospitare viaggiatori</span>
-            </div>
-
-            <div class="annuncio-option gradient-teal">
-              <q-icon
-                name="directions_car"
-                size="2.5rem"
-              />
-              <span class="option-title">Trasporti</span>
-              <span class="option-subtitle">Condivisione viaggi</span>
-              <span class="option-subtitle">⚠️ (IN ARRIVO...)</span>
-            </div>
+          <div class="dialog-title-row">
+            <h3 class="dialog-title">Scegli categoria</h3>
+            <q-btn
+              flat
+              round
+              dense
+              icon="close"
+              aria-label="Chiudi"
+              @click="showAnnunciDialog = false"
+            />
           </div>
+          <div class="dialog-subtitle">Apri la sezione giusta in un tap.</div>
         </q-card-section>
+
+        <q-separator />
+
+        <q-list class="annunci-list">
+          <q-item
+            clickable
+            v-ripple
+            class="annunci-item gradient-green"
+            @click="goToGoods"
+          >
+            <q-item-section avatar>
+              <div class="annunci-icon">
+                <q-icon
+                  name="fas fa-tshirt"
+                  size="1.4rem"
+                />
+              </div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="option-title">Beni</q-item-label>
+              <q-item-label
+                caption
+                class="option-subtitle"
+              >
+                Autoproduzioni · Cibo · Oggetti
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="chevron_right" />
+            </q-item-section>
+          </q-item>
+
+          <q-item
+            clickable
+            v-ripple
+            class="annunci-item gradient-red"
+            @click="goToServices"
+          >
+            <q-item-section avatar>
+              <div class="annunci-icon">
+                <q-icon
+                  name="fas fa-house-user"
+                  size="1.4rem"
+                />
+              </div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="option-title">Servizi</q-item-label>
+              <q-item-label
+                caption
+                class="option-subtitle"
+              >
+                Competenze · Aiuti · Consulenze
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="chevron_right" />
+            </q-item-section>
+          </q-item>
+
+          <q-item
+            clickable
+            v-ripple
+            class="annunci-item gradient-lime"
+            @click="goToHospitality"
+          >
+            <q-item-section avatar>
+              <div class="annunci-icon">
+                <q-icon
+                  name="fas fa-bed"
+                  size="1.4rem"
+                />
+              </div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="option-title">Ospitalità</q-item-label>
+              <q-item-label
+                caption
+                class="option-subtitle"
+              >
+                Ospitare · Viaggi · Accoglienza
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-icon name="chevron_right" />
+            </q-item-section>
+          </q-item>
+
+          <q-item
+            class="annunci-item gradient-blue disabled"
+            disable
+          >
+            <q-item-section avatar>
+              <div class="annunci-icon">
+                <q-icon
+                  name="commute"
+                  size="1.4rem"
+                />
+              </div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="option-title">Trasporti</q-item-label>
+              <q-item-label
+                caption
+                class="option-subtitle"
+              >
+                In arrivo…
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
       </q-card>
     </q-dialog>
   </div>
diff --git a/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss
new file mode 100644
index 00000000..9a58e7f9
--- /dev/null
+++ b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss
@@ -0,0 +1,375 @@
+
+/* =========================================================
+   RISO Home (parte finale) — refresh estetico coerente
+   ========================================================= */
+
+.riso-modern-home {
+  padding: $s-md;
+  padding-bottom: calc(#{$s-md} + env(safe-area-inset-bottom));
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: $s-md;
+
+}
+
+/* ---- Section shell (glass card) ---- */
+.content-section,
+.community-actions-section,
+.footer-section-modern {
+  border-radius: $r-lg;
+  padding: $s-md;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08);
+  backdrop-filter: blur(12px);
+}
+
+:global(body.body--dark) {
+  .content-section,
+  .community-actions-section,
+  .footer-section-modern {
+    background: rgba(16, 24, 40, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
+  }
+}
+
+/* ---- Titles ---- */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $s-sm;
+  margin-bottom: $s-sm;
+}
+
+.section-title {
+  font-size: 1.12rem;
+  font-weight: 900;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: $s-sm;
+  letter-spacing: 0.01em;
+
+  /* gradient text */
+  background: $gradient-primary;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  .q-icon {
+    background: $gradient-primary;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+/* ---- Organizations: horizontal scroll ---- */
+.org-scroll {
+  display: flex;
+  gap: $s-sm;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  scroll-snap-type: x mandatory;
+
+  /* smoother */
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.12);
+    border-radius: 999px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+:global(body.body--dark) {
+  .org-scroll::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.16);
+  }
+}
+
+.org-card-scroll {
+  min-width: 190px;
+  max-width: 240px;
+  padding: $s-sm;
+  border-radius: $r-lg;
+  cursor: pointer;
+  scroll-snap-align: start;
+
+  display: grid;
+  grid-template-columns: 54px 1fr;
+  gap: $s-sm;
+  align-items: center;
+
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.14);
+    filter: saturate(1.04);
+  }
+
+  &:active {
+    transform: translateY(0px) scale(0.99);
+  }
+
+  &:focus-visible {
+    outline: 3px solid rgba(102, 126, 234, 0.35);
+    outline-offset: 2px;
+  }
+
+  .org-info {
+    min-width: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .org-name {
+    font-weight: 900;
+    font-size: 0.95rem;
+    line-height: 1.15;
+    opacity: 0.92;
+
+    /* show full titles (no truncation) */
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-word;
+  }
+
+  .org-subtitle {
+    font-size: 0.82rem;
+    opacity: 0.72;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+:global(body.body--dark) {
+  .org-card-scroll {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+
+    &:hover {
+      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.40);
+    }
+
+    .org-subtitle {
+      opacity: 0.84;
+    }
+  }
+}
+
+.org-card-scroll.see-more-card {
+  grid-template-columns: 1fr;
+  place-items: center;
+  text-align: center;
+  background: $gradient-primary;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: white;
+
+  .see-more-circle {
+    width: 54px;
+    height: 54px;
+    border-radius: 18px;
+    display: grid;
+    place-items: center;
+    background: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    margin-bottom: 6px;
+  }
+
+  .see-more-count {
+    font-weight: 900;
+    letter-spacing: 0.02em;
+  }
+
+  .org-name {
+    color: white;
+  }
+}
+
+/* Small helper text under scroll */
+.org-scroll-hint {
+  display: flex;
+  align-items: center;
+  gap: $s-xs;
+  font-size: 0.86rem;
+  opacity: 0.72;
+  margin-top: $s-sm;
+}
+
+/* ---- Community invite banner ---- */
+.invite-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $s-sm;
+  padding: $s-md;
+  border-radius: $r-lg;
+
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(16, 185, 129, 0.10));
+  border: 1px solid rgba(34, 197, 94, 0.22);
+}
+
+:global(body.body--dark) {
+  .invite-banner {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.12));
+    border: 1px solid rgba(34, 197, 94, 0.22);
+  }
+}
+
+.invite-message {
+  display: flex;
+  align-items: flex-start;
+  gap: $s-sm;
+
+  .invite-text {
+    display: grid;
+    gap: 4px;
+  }
+
+  .invite-main {
+    font-weight: 800;
+    line-height: 1.25;
+  }
+
+  .invite-count {
+    font-size: 0.86rem;
+    opacity: 0.78;
+  }
+}
+
+/* ---- Telegram ---- */
+.telegram-grid-modern {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $s-md;
+
+  @media (min-width: 700px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.telegram-card-modern {
+  border-radius: $r-lg;
+  overflow: hidden;
+  text-decoration: none;
+  display: block;
+  color: inherit;
+  position: relative;
+  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
+
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.10);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.14);
+    filter: saturate(1.03);
+  }
+
+  &:active {
+    transform: translateY(0px) scale(0.99);
+  }
+
+  &:focus-visible {
+    outline: 3px solid rgba(59, 130, 246, 0.25);
+    outline-offset: 2px;
+  }
+}
+
+:global(body.body--dark) {
+  .telegram-card-modern {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
+
+    &:hover {
+      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
+    }
+  }
+}
+
+.telegram-card-image {
+  border-radius: 0;
+}
+
+.telegram-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(14, 165, 233, 0.22));
+}
+
+.telegram-icon-wrapper {
+  height: 130px;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.12));
+}
+
+.telegram-card-content {
+  padding: $s-md;
+  display: grid;
+  gap: 4px;
+
+  .telegram-card-title {
+    font-weight: 900;
+    font-size: 1.02rem;
+    line-height: 1.2;
+  }
+
+  .telegram-card-subtitle {
+    font-size: 0.86rem;
+    opacity: 0.74;
+    line-height: 1.25;
+  }
+}
+
+/* ---- Footer ---- */
+.footer-section-modern {
+  display: grid;
+  gap: $s-sm;
+
+  @media (min-width: 700px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    align-items: stretch;
+  }
+}
+
+.footer-btn-modern {
+  width: 100%;
+  border-radius: 16px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  text-transform: none;
+
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  &:hover {
+    filter: saturate(1.03);
+  }
+}
+
+:global(body.body--dark) {
+  .footer-btn-modern {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+  }
+}
diff --git a/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.ts b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.ts
new file mode 100644
index 00000000..5afa67f0
--- /dev/null
+++ b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.ts
@@ -0,0 +1,614 @@
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { CRISBalanceBar } from '@/components/CRISBalanceBar';
+import { tools } from '@tools';
+import { useGlobalStore, useUserStore } from 'app/src/store';
+
+const isTest = true; // Cambia a false in produzione
+
+export default defineComponent({
+  name: 'Riso_Home_ParteFinale',
+  components: { CRISBalanceBar },
+  setup() {
+    const $router = useRouter();
+
+    // State
+    const showAnnunciDialog = ref(false);
+    const showBannScambio = ref(true);
+    const walletSectionOpen = ref(false);
+
+    const selectedCircuit = ref<'provinciale' | 'italia'>('provinciale');
+    const handshakesView = ref<'mine' | 'all'>('mine');
+
+    const transactionsView = ref<'mine' | 'all'>('mine');
+
+    // Transazioni globali community
+    const allTransactions = ref<any[]>([]);
+
+    // Dati wallet (da collegare allo store)
+    const availableBalance = ref(0); // Saldo utilizzabile (include fido)
+    const realBalance = ref(0); // Saldo reale effettivo
+    const trustLimit = ref(-100); // Fido concesso (negativo)
+    const maxAccumulation = ref(200); // Massimo accumulo
+    const receivedCount = ref(0);
+    const sentCount = ref(0);
+
+    // Dati eventi (da collegare allo store)
+    const upcomingEventsCount = ref(0);
+    const recentEvents = ref<any[]>([
+      // Esempio struttura:
+      // { day: '15', month: 'DIC', title: 'Mercatino', location: 'Roma' }
+    ]);
+
+    // Dati attività (da collegare allo store)
+    const recentTrades = ref<any[]>([
+      // Esempio struttura:
+      // { userInitial: 'M', description: 'Scambio completato', time: '2h fa', amount: 50 }
+    ]);
+
+    const recentConnections = ref<any[]>([
+      // Esempio struttura:
+      // { userInitial: 'A', name: 'Mario Rossi', time: '1 giorno fa' }
+    ]);
+
+    // Stats
+    const totalMembers = ref(0);
+    const totalTrades = ref(0);
+    const totalEvents = ref(0);
+
+    const totalTransactions = ref(0);
+    const uniqueMembers = ref(0);
+    const lastTradeTime = ref('Mai');
+
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+
+
+    // Telegram
+    const telegramLinks = ref<any[]>([
+      // Esempio struttura:
+      // { title: 'Canale Principale', url: 'https://t.me/...', image: '/path/to/img' }
+    ]);
+
+    // Computed
+    const hasEvents = computed(() => recentEvents.value.length > 0);
+    const hasOrganizations = computed(() => organizations.value.length > 0);
+    const hasTelegramLinks = computed(() => telegramLinks.value.length > 0);
+
+    const organizations = computed(() => globalStore.getMyGroups())
+
+    // ========== METODI DA IMPLEMENTARE ==========
+
+    // Dialog Annunci
+    const openAnnunciDialog = () => {
+      showAnnunciDialog.value = true;
+    };
+
+    // Navigazione Annunci
+    const goToGoods = () => {
+      showAnnunciDialog.value = false;
+      $router.push('/goods')
+    };
+
+    const goToServices = () => {
+      showAnnunciDialog.value = false;
+      $router.push('/services')
+    };
+
+    const goToHospitality = () => {
+      showAnnunciDialog.value = false;
+      $router.push('/hosps')
+    };
+
+    const goToTransport = () => {
+      showAnnunciDialog.value = false;
+      // TODO: navigare a /transport (da creare?)
+      // $router.push('/transport')
+    };
+
+    // Hero Cards
+    const goToWallet = () => {
+      // TODO: navigare al portafoglio dettagliato
+      // $router.push('/wallet')
+    };
+
+    const goToCircuits = () => {
+      // TODO: navigare ai circuiti RIS
+      $router.push('/circuits')
+    };
+
+    const goToEvents = () => {
+      // TODO: navigare alla lista eventi
+      $router.push('/events')
+    };
+
+    const goToProfile = () => {
+      // TODO: navigare al profilo utente
+      $router.push('/my/' + userStore.my.username)
+    };
+
+    // Azioni Rapide
+    const sendRIS = () => {
+      // TODO: aprire dialog/pagina invio RIS
+    };
+
+    const receiveRIS = () => {
+      // TODO: aprire dialog/pagina ricezione RIS
+    };
+
+    const inviteFriend = () => {
+      // TODO: aprire dialog/pagina invito amico
+    };
+
+    const showMembers = () => {
+      // TODO: navigare alla lista iscritti
+      // $router.push('/members')
+    };
+
+    // Wallet
+    const refreshWallet = () => {
+      // TODO: ricaricare dati wallet dallo store/API
+    };
+
+    const goToTransactions = () => {
+      // TODO: navigare alla lista transazioni
+      // $router.push('/transactions')
+    };
+
+    // Eventi
+    const goToAllEvents = () => {
+      // TODO: navigare a tutti gli eventi
+      $router.push('/events')
+    };
+
+    const openEvent = (event: any) => {
+      // TODO: aprire dettaglio evento
+      // $router.push(`/events/${event.id}`)
+    };
+
+    // Community
+    const openTrade = (trade: any) => {
+      // TODO: aprire dettaglio scambio
+    };
+
+    const openConnection = (connection: any) => {
+      // TODO: aprire profilo utente connesso
+    };
+
+    const goToAllTrades = () => {
+      // TODO: navigare a lista completa scambi
+      // $router.push('/trades')
+    };
+
+    const goToAllConnections = () => {
+      // TODO: navigare a lista completa connessioni
+      // $router.push('/connections')
+    };
+
+    // Organizzazioni
+    const createOrganization = () => {
+      // TODO: aprire form creazione organizzazione
+    };
+
+    const openOrganization = (org: any) => {
+      // TODO: aprire dettaglio organizzazione
+      $router.push(`/grp/${org.groupname}`)
+    };
+
+    const goToAllOrganizations = () => {
+      // TODO: navigare a lista completa organizzazioni
+      $router.push('/groups')
+    };
+
+    // Footer
+    const openFAQ = () => {
+      // TODO: navigare a FAQ
+      $router.push('/faq_ris')
+    };
+
+    const openGuide = () => {
+      // TODO: navigare a guida
+      $router.push('/guida')
+    };
+
+    const openInfo = () => {
+      // TODO: navigare a info
+      // $router.push('/info')
+    };
+
+    const loadTestData = () => {
+      if (!isTest) return;
+
+      // Circuito Provinciale
+      circuits.value.provinciale = {
+        title: 'RIS Provinciale',
+        availableBalance: 50,
+        realBalance: -50,
+        trustLimit: -100,
+        maxAccumulation: 200,
+        totalTransactions: 15,
+        sentCount: 8,
+        receivedCount: 7,
+        uniqueMembers: 12,
+        lastTradeTime: '2 giorni fa',
+        recentTransactions: [
+          { userInitial: 'M', description: 'Ortaggi freschi', time: '2h fa', amount: 15 },
+          {
+            userInitial: 'L',
+            description: 'Lezione chitarra',
+            time: '5h fa',
+            amount: -25,
+          },
+          {
+            userInitial: 'G',
+            description: 'Riparazione bici',
+            time: '1 giorno fa',
+            amount: 30,
+          },
+        ],
+      };
+
+      // Circuito Italia
+      circuits.value.italia = {
+        title: 'RIS Italia',
+        availableBalance: -50,
+        realBalance: 150,
+        trustLimit: -200,
+        maxAccumulation: 400,
+        totalTransactions: 8,
+        sentCount: 3,
+        receivedCount: 5,
+        uniqueMembers: 7,
+        lastTradeTime: '5 giorni fa',
+        recentTransactions: [
+          {
+            userInitial: 'A',
+            description: 'Consulenza legale',
+            time: '3 giorni fa',
+            amount: -80,
+          },
+          {
+            userInitial: 'F',
+            description: 'Prodotti artigianali',
+            time: '4 giorni fa',
+            amount: 50,
+          },
+          {
+            userInitial: 'S',
+            description: 'Corso di cucina',
+            time: '5 giorni fa',
+            amount: -40,
+          },
+        ],
+      };
+
+      // Transazioni community (tutti)
+      allTransactions.value = [
+        {
+          fromInitial: 'M',
+          toInitial: 'L',
+          fromName: 'Mario',
+          toName: 'Laura',
+          amount: 25,
+          time: '1h fa',
+        },
+        {
+          fromInitial: 'G',
+          toInitial: 'C',
+          fromName: 'Giovanni',
+          toName: 'Chiara',
+          amount: 40,
+          time: '2h fa',
+        },
+        {
+          fromInitial: 'P',
+          toInitial: 'A',
+          fromName: 'Paolo',
+          toName: 'Anna',
+          amount: 15,
+          time: '3h fa',
+        },
+      ];
+      // Community
+      invitesSent.value = 7;
+
+      myHandshakes.value = [
+        { userInitial: 'M', name: 'Mario Rossi', time: '2 giorni fa' },
+        { userInitial: 'L', name: 'Laura Bianchi', time: '3 giorni fa' },
+        { userInitial: 'G', name: 'Giovanni Verdi', time: '1 settimana fa' },
+        { userInitial: 'C', name: 'Chiara Neri', time: '2 settimane fa' },
+        { userInitial: 'P', name: 'Paolo Conti', time: '3 settimane fa' },
+      ];
+
+      allHandshakes.value = [
+        {
+          user1Initial: 'A',
+          user2Initial: 'B',
+          user1Name: 'Anna',
+          user2Name: 'Bruno',
+          time: '1h fa',
+        },
+        {
+          user1Initial: 'C',
+          user2Initial: 'D',
+          user1Name: 'Carlo',
+          user2Name: 'Diana',
+          time: '3h fa',
+        },
+        {
+          user1Initial: 'E',
+          user2Initial: 'F',
+          user1Name: 'Elena',
+          user2Name: 'Franco',
+          time: '5h fa',
+        },
+        {
+          user1Initial: 'G',
+          user2Initial: 'H',
+          user1Name: 'Giulia',
+          user2Name: 'Hugo',
+          time: '1 giorno fa',
+        },
+        {
+          user1Initial: 'I',
+          user2Initial: 'L',
+          user1Name: 'Irene',
+          user2Name: 'Luca',
+          time: '2 giorni fa',
+        },
+      ];
+
+      // Eventi test data con immagini
+      upcomingEventsCount.value = 7;
+      recentEvents.value = [
+        {
+          day: '15',
+          month: 'DIC',
+          title: 'Mercatino di Natale',
+          location: 'Roma Centro',
+          id: 1,
+          image: '',
+        },
+        {
+          day: '20',
+          month: 'DIC',
+          title: 'Corso di Panificazione',
+          location: 'Milano',
+          id: 2,
+          image: '',
+        },
+        {
+          day: '22',
+          month: 'DIC',
+          title: 'Scambio Semi e Piante',
+          location: 'Bologna',
+          id: 3,
+          image: '',
+        },
+        {
+          day: '28',
+          month: 'DIC',
+          title: 'Incontro Produttori Locali',
+          location: 'Firenze',
+          id: 4,
+          image: '',
+        },
+        {
+          day: '05',
+          month: 'GEN',
+          title: 'Festa della Comunità',
+          location: 'Torino',
+          id: 5,
+          image: '',
+        },
+      ];
+
+      // Scambi test data
+      recentTrades.value = [
+        {
+          userInitial: 'M',
+          description: 'Scambio ortaggi freschi',
+          time: '2h fa',
+          amount: 15,
+        },
+        {
+          userInitial: 'L',
+          description: 'Lezione di chitarra',
+          time: '5h fa',
+          amount: -25,
+        },
+        {
+          userInitial: 'G',
+          description: 'Riparazione bicicletta',
+          time: '1 giorno fa',
+          amount: 30,
+        },
+        {
+          userInitial: 'A',
+          description: 'Pane fatto in casa',
+          time: '2 giorni fa',
+          amount: -10,
+        },
+        {
+          userInitial: 'S',
+          description: 'Consulenza informatica',
+          time: '3 giorni fa',
+          amount: 40,
+        },
+      ];
+
+      // Statistiche test data
+      totalMembers.value = 342;
+      totalTrades.value = 1567;
+      totalEvents.value = 89;
+
+
+      // Telegram test data con immagini
+      telegramLinks.value = [
+        {
+          title: 'Canale Principale RISO',
+          url: 'https://t.me/riso_italia',
+          image: '/images/telegram-main.jpg',
+        },
+        {
+          title: 'Gruppo Scambi Locali',
+          url: 'https://t.me/riso_scambi',
+          image: '/images/telegram-scambi.jpg',
+        },
+        {
+          title: 'Eventi e Incontri',
+          url: 'https://t.me/riso_eventi',
+          image: '/images/telegram-eventi.jpg',
+        },
+      ];
+    };
+
+    // Dati circuiti
+    const circuits = ref({
+      provinciale: {
+        availableBalance: 0,
+        realBalance: 0,
+        trustLimit: -100,
+        maxAccumulation: 200,
+        totalTransactions: 0,
+        sentCount: 0,
+        receivedCount: 0,
+        uniqueMembers: 0,
+        lastTradeTime: 'Mai',
+        recentTransactions: [] as any[],
+        title: 'RIS Provinciale',
+      },
+      italia: {
+        availableBalance: 0,
+        realBalance: 0,
+        trustLimit: -200,
+        maxAccumulation: 400,
+        totalTransactions: 0,
+        sentCount: 0,
+        receivedCount: 0,
+        uniqueMembers: 0,
+        lastTradeTime: 'Mai',
+        recentTransactions: [] as any[],
+        title: 'RIS Italia',
+      },
+    });
+
+    // Dati community
+    const invitesSent = ref(0);
+    const myHandshakes = ref<any[]>([]);
+    const allHandshakes = ref<any[]>([]);
+
+    // Circuiti overview
+    const activeCircuitsCount = ref(2);
+    const totalCircuitsAvailable = ref(12);
+
+    // Computed per circuito corrente
+    const currentCircuitData = computed(() => {
+      return circuits.value[selectedCircuit.value];
+    });
+
+    // Metodi
+    const openTransaction = (tx: any) => {
+      // TODO: aprire dettaglio transazione
+    };
+
+    const openHandshake = (handshake: any) => {
+      // TODO: aprire dettaglio stretta di mano
+    };
+
+    const goToAllCircuits = () => {
+      // TODO: navigare a lista circuiti
+      // $router.push('/circuits')
+    };
+
+    loadTestData();
+
+    onMounted(() => {
+      showBannScambio.value = tools.getCookieBool('bann_scambio', true);
+
+      //   loadWalletData()
+      //   loadRecentEvents()
+      //   loadRecentActivity()
+      //   loadStats()
+      //   loadOrganizations()
+      //   loadTelegramLinks()
+    });
+
+    return {
+      // State
+      showAnnunciDialog,
+
+      // Data
+      availableBalance,
+      realBalance,
+      trustLimit,
+      maxAccumulation,
+      receivedCount,
+      sentCount,
+      upcomingEventsCount,
+      recentEvents,
+      recentTrades,
+      recentConnections,
+      totalMembers,
+      totalTrades,
+      totalEvents,
+      organizations,
+      telegramLinks,
+
+      // Computed
+      hasEvents,
+      hasOrganizations,
+      hasTelegramLinks,
+
+      // Methods
+      openAnnunciDialog,
+      goToGoods,
+      goToServices,
+      goToHospitality,
+      goToTransport,
+      goToWallet,
+      goToEvents,
+      goToProfile,
+      sendRIS,
+      receiveRIS,
+      inviteFriend,
+      showMembers,
+      refreshWallet,
+      goToTransactions,
+      goToAllEvents,
+      openEvent,
+      openTrade,
+      openConnection,
+      goToAllTrades,
+      goToAllConnections,
+      createOrganization,
+      openOrganization,
+      goToAllOrganizations,
+      openFAQ,
+      openGuide,
+      openInfo,
+      totalTransactions,
+      uniqueMembers,
+      lastTradeTime,
+      goToCircuits,
+      selectedCircuit,
+      handshakesView,
+      circuits,
+      currentCircuitData,
+      invitesSent,
+      myHandshakes,
+      allHandshakes,
+      activeCircuitsCount,
+      totalCircuitsAvailable,
+      openTransaction,
+      openHandshake,
+      goToAllCircuits,
+      showBannScambio,
+      tools,
+      transactionsView,
+      allTransactions,
+      userStore,
+      walletSectionOpen,
+    };
+  },
+});
diff --git a/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.vue b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.vue
new file mode 100644
index 00000000..7ccb8808
--- /dev/null
+++ b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.vue
@@ -0,0 +1,290 @@
+<template>
+  <q-page class="riso-modern-home riso-modern-home--tail">
+
+    <!-- Organizzazioni -->
+    <section
+      v-if="hasOrganizations"
+      class="content-section"
+    >
+      <div class="section-header">
+        <h2 class="section-title">
+          <q-icon name="fas fa-users" />
+          Organizzazioni
+        </h2>
+        <q-btn
+          flat
+          dense
+          round
+          icon="arrow_forward"
+          @click="goToAllOrganizations"
+        />
+      </div>
+
+      <div
+        class="org-scroll"
+        v-if="Array.isArray(organizations) && organizations.length"
+      >
+        <div
+          v-for="(org, idx) in organizations.slice(0, 10)"
+          :key="idx"
+          class="org-card-scroll"
+          role="button"
+          tabindex="0"
+          v-ripple
+          @click="openOrganization(org)"
+          @keyup.enter="openOrganization(org)"
+          @keyup.space.prevent="openOrganization(org)"
+        >
+          <q-avatar size="50px">
+            <q-img
+              :src="userStore.getImgByGroup(org)"
+              :alt="org.title"
+              img-class="imgprofile"
+              height="50px"
+            />
+          </q-avatar>
+          <span class="org-name">{{ org.title }}</span>
+        </div>
+
+        <!-- 🆕 Card "Vedi tutti" se ci sono più di 10 gruppi -->
+        <div
+          v-if="organizations.length > 10"
+          class="org-card-scroll see-more-card"
+          role="button"
+          tabindex="0"
+          v-ripple
+          @click="goToAllOrganizations"
+          @keyup.enter="goToAllOrganizations"
+          @keyup.space.prevent="goToAllOrganizations"
+        >
+          <div class="see-more-circle">
+            <span class="see-more-count">+{{ organizations.length - 10 }}</span>
+          </div>
+          <span class="org-name">Vedi tutti</span>
+        </div>
+      </div>
+
+      <!-- 🆕 Indicatore sotto lo scroll -->
+      <div
+        v-if="organizations.length > 10"
+        class="scroll-hint"
+      >
+        <q-icon
+          name="swipe"
+          size="xs"
+        />
+        <span>Scorri per vedere tutti i {{ organizations.length }} gruppi</span>
+      </div>
+    </section>
+
+    <!-- Community Actions -->
+    <section class="community-actions-section">
+      <h2 class="section-title">
+        <q-icon name="people" />
+        Community
+      </h2>
+
+      <div class="invite-banner">
+        <div class="invite-message">
+          <q-icon
+            name="campaign"
+            size="md"
+            color="positive"
+          />
+          <div class="invite-text">
+            <span class="invite-main"
+              >Aiuta la community a crescere, parla di RISO ed invita le persone alla
+              App</span
+            >
+            <span class="invite-count"
+              >Hai già inviato <strong>{{ invitesSent }}</strong> inviti</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <div class="community-actions-grid">
+        <q-btn
+          unelevated
+          rounded
+          class="community-action-btn"
+          icon="person_add"
+          label="Invita Amici"
+          color="positive"
+          @click="inviteFriend"
+        />
+        <q-btn
+          unelevated
+          rounded
+          class="community-action-btn"
+          icon="list"
+          label="Lista Iscritti"
+          color="info"
+          @click="showMembers"
+        />
+      </div>
+    </section>
+
+    <!-- Canali Telegram -->
+    <!--<section
+      v-if="hasTelegramLinks"
+      class="content-section"
+    >
+      <div class="section-header">
+        <h2 class="section-title">
+          <q-icon name="telegram" />
+          Unisciti ai Canali
+        </h2>
+      </div>
+
+      <div class="telegram-grid-modern">
+        <a
+          v-for="(link, idx) in telegramLinks.slice(0, 3)"
+          :key="idx"
+          :href="link.url"
+          target="_blank"
+          class="telegram-card-modern" v-ripple rel="noopener">
+          <q-img
+            v-if="link.image"
+            :src="link.image"
+            class="telegram-card-image"
+            ratio="16/9"
+          >
+            <div class="telegram-overlay">
+              <q-icon
+                name="telegram"
+                size="3rem"
+                color="white"
+              />
+            </div>
+          </q-img>
+          <div
+            v-else
+            class="telegram-icon-wrapper"
+          >
+            <q-icon
+              name="telegram"
+              size="3rem"
+              color="white"
+            />
+          </div>
+          <div class="telegram-content-modern">
+            <span class="telegram-title">{{ link.title }}</span>
+            <q-icon
+              name="open_in_new"
+              size="sm"
+            />
+          </div>
+        </a>
+      </div>
+    </section>
+    -->
+
+    <!-- Footer Links -->
+    <section class="footer-section-modern">
+      <q-btn
+        unelevated
+        rounded
+        class="footer-btn-modern"
+        icon="help_outline"
+        label="FAQ"
+        color="primary"
+        @click="openFAQ"
+      />
+      <q-btn
+        unelevated
+        rounded
+        class="footer-btn-modern"
+        icon="school"
+        label="Guida"
+        color="secondary"
+        @click="openGuide"
+      />
+      <q-btn
+        unelevated
+        rounded
+        class="footer-btn-modern"
+        icon="support_agent"
+        label="Assistenza"
+        color="positive"
+        @click="openInfo"
+      />
+    </section>
+
+    <!-- Dialog Annunci -->
+    <q-dialog
+      v-model="showAnnunciDialog"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="annunci-dialog">
+        <q-card-section class="dialog-header">
+          <h3 class="dialog-title">Scegli Categoria</h3>
+          <q-btn
+            flat
+            round
+            dense
+            icon="close"
+            v-close-popup
+          />
+        </q-card-section>
+
+        <q-card-section class="dialog-content">
+          <div class="annunci-options-mobile">
+            <div
+              class="annuncio-option gradient-indigo"
+              @click="goToGoods"
+            >
+              <q-icon
+                name="fas fa-tshirt"
+                size="2.5rem"
+              />
+              <span class="option-title">Beni</span>
+              <span class="option-subtitle">Autoproduzioni, cibo</span>
+            </div>
+
+            <div
+              class="annuncio-option gradient-red"
+              @click="goToServices"
+            >
+              <q-icon
+                name="fas fa-house-user"
+                size="2.5rem"
+              />
+              <span class="option-title">Servizi</span>
+              <span class="option-subtitle">Competenze, aiuti</span>
+            </div>
+
+            <div
+              class="annuncio-option gradient-lime"
+              @click="goToHospitality"
+            >
+              <q-icon
+                name="fas fa-bed"
+                size="2.5rem"
+              />
+              <span class="option-title">Ospitalità</span>
+              <span class="option-subtitle">Ospitare viaggiatori</span>
+            </div>
+
+            <div class="annuncio-option gradient-teal">
+              <q-icon
+                name="directions_car"
+                size="2.5rem"
+              />
+              <span class="option-title">Trasporti</span>
+              <span class="option-subtitle">Condivisione viaggi</span>
+              <span class="option-subtitle">⚠️ (IN ARRIVO...)</span>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </q-page>
+</template>
+
+<script lang="ts" src="./Riso_Home_ParteFinale.ts"></script>
+
+<style lang="scss" scoped>
+@import './Riso_Home_ParteFinale.scss';
+</style>
diff --git a/src/components/Riso_Home_ParteFinale/index.ts b/src/components/Riso_Home_ParteFinale/index.ts
new file mode 100644
index 00000000..694f4705
--- /dev/null
+++ b/src/components/Riso_Home_ParteFinale/index.ts
@@ -0,0 +1 @@
+export {default as Riso_Home_ParteFinale} from './Riso_Home_ParteFinale.vue'
diff --git a/src/components/pageris/pageris.scss b/src/components/pageris/pageris.scss
index 4b1d8cc5..c46d1043 100644
--- a/src/components/pageris/pageris.scss
+++ b/src/components/pageris/pageris.scss
@@ -2,60 +2,6 @@
 // CIRCUIT MANAGER - SCSS
 // ========================================
 
-// ========================================
-// CSS Variables
-// ========================================
-:root {
-  --cm-bg-primary: #f5f7fa;
-  --cm-bg-card: #ffffff;
-  --cm-bg-card-hover: #f8fafc;
-  --cm-bg-dialog: #ffffff;
-
-  --cm-border: rgba(0, 0, 0, 0.08);
-  --cm-border-accent: rgba(102, 126, 234, 0.4);
-
-  --cm-text-primary: #1e293b;
-  --cm-text-secondary: #475569;
-  --cm-text-muted: #64748b;
-  --cm-text-hint: #94a3b8;
-
-  --cm-accent: #667eea;
-  --cm-accent-light: rgba(102, 126, 234, 0.1);
-  --cm-positive: #10b981;
-  --cm-negative: #ef4444;
-
-  --cm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --cm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-
-  --cm-nav-bg: rgba(255, 255, 255, 0.98);
-}
-
-.body--dark {
-  --cm-bg-primary: #0f172a;
-  --cm-bg-card: #1e293b;
-  --cm-bg-card-hover: #334155;
-  --cm-bg-dialog: #1e293b;
-
-  --cm-border: rgba(255, 255, 255, 0.1);
-  --cm-border-accent: rgba(102, 126, 234, 0.5);
-
-  --cm-text-primary: #f8fafc;
-  --cm-text-secondary: #e2e8f0;
-  --cm-text-muted: #94a3b8;
-  --cm-text-hint: #64748b;
-
-  --cm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --cm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-
-  --cm-nav-bg: rgba(15, 23, 42, 0.98);
-}
-
-// ========================================
-// Variables
-// ========================================
-$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 $gradient-send: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
 $gradient-receive: linear-gradient(135deg, #10b981 0%, #059669 100%);
 
@@ -71,6 +17,7 @@ $space-lg: 16px;
 $space-xl: 20px;
 $space-xxl: 24px;
 
+
 // ========================================
 // Base
 // ========================================
diff --git a/src/css/app.scss b/src/css/app.scss
index 6ef2c740..e28b0f04 100755
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,17 @@
+// ============================================
+// 1. IMPORTS E CONFIGURAZIONE
+// ============================================
+@use 'sass:math';
 
-/* blocco scroll orizzontale a ogni livello “pagina” */
+
+// ============================================
+// 3. VARIABILI SCSS
+// ============================================
+
+
+// ============================================
+// 4. RESET E BASE
+// ============================================
 html,
 body,
 #q-app {
@@ -8,94 +20,182 @@ body,
   overflow-x: hidden !important;
 }
 
+html {
+  font-size: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Segoe UI', Söhne, ui-sans-serif, system-ui, -apple-system, 
+               Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, 
+               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--app-text-primary) !important;
+  line-height: 1.7;
+  background: linear-gradient(180deg, var(--app-bg-primary) 0%, var(--app-bg-secondary) 100%) !important;
+  min-height: 100vh;
+  transition: background 0.3s ease, color 0.3s ease;
+  
+  @media (max-width: $breakpoint-xs) {
+    line-height: 1.5;
+  }
+}
+
+// Layout containers
 .q-layout,
 .q-page-container,
 .q-page {
   max-width: 100%;
   overflow-x: hidden;
-
-  /* evita barre X su page container */
-  @media (max-width: 600px) {}
 }
 
+#q-app,
+.q-page,
+.q-page-container {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
 
-// Variabili per riusabilità
-$heading-primary-size-mobile: 1.25rem;
-$heading-primary-size-desktop: 1.5rem;
-$heading-primary-weight: 700;
-$heading-primary-letter-spacing: -0.02em;
-$heading-primary-line-height: 1.3;
-
+// ============================================
+// 5. TYPOGRAPHY
+// ============================================
 h1 {
-  // Font size fluido e responsive
   font-size: clamp($heading-primary-size-mobile, 4vw, $heading-primary-size-desktop);
-
-  // Typography
   font-weight: $heading-primary-weight;
   letter-spacing: $heading-primary-letter-spacing;
   line-height: $heading-primary-line-height;
-
-  // Migliora la leggibilità
   color: var(--q-primary, #1976d2);
-
-  // Anti-aliasing per rendering più pulito
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  // Spacing opzionale
   margin-bottom: 1rem;
-
-  // Transizione smooth per dark mode
   transition: color 0.3s ease;
 }
 
-body {
-  font-family: 'Segoe UI', Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  line-height: 1.7;
-  /*background: linear-gradient(135deg, #f5f7fa 0%, #f3fff2 100%);*/
-  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
-
-  //font-size: 1rem;
-  @media (max-width: 600px) {
-    line-height: 1.5;
+h2, .text-subtitle1 {
+  margin-bottom: 6px;
+  font-size: 1.35rem;
+  font-weight: 400;
+  letter-spacing: 0.00937em;
+  
+  &.big {
+    font-size: 1.5rem;
   }
+  
+  @media (max-width: $breakpoint-sm) {
+    line-height: 2rem;
+  }
+}
+
+h3, .text-subtitle2 {
+  margin-bottom: 4px;
+  font-size: 1.15rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: 0.00937em;
+}
+
+.text-subtitle3 {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: 0.00937em;
+  
+  &_short {
+    line-height: 1.25rem;
+  }
+}
+
+p {
+  font-size: 125%;
+  margin: 0 0 8px;
+  
+  @media (max-width: $breakpoint-sm) {
+    text-justify: auto;
+    margin: 0 0 4px;
+  }
+}
+
+// Text utilities
+.text-h7 { font-size: 1rem; }
+.text-h8 { font-size: 0.85rem !important; }
+.text-h9 { font-size: 0.65rem !important; }
+
+.text-big {
+  font-size: 1.5rem;
+  font-weight: 500;
+  
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.25rem;
+  }
+}
+
+.text-sobig {
+  @media (max-width: $breakpoint-sm) {
+    font-size: 1.50rem;
+  }
+}
+
+.text-small {
+  font-size: 0.90rem;
+  
+  @media (max-width: 500px) {
+    font-size: 0.8rem !important;
+  }
+}
+
+.text-shadow {
+  text-shadow: 0.15rem 0.15rem 0.15rem $gray-shadow;
+}
+
+.text-section {
+  font-size: 1.15rem;
+  font-weight: bold;
 }
 
 .text-mycol {
   color: #333333 !important;
 }
 
-.bg-mycol {
-  background: #333333 !important;
+.text-blueviolet {
+  color: blueviolet;
 }
 
-html {
-  font-size: 100%; // default font size (browser 16) -> (10 62.5%)
+.text-strike {
+  text-decoration-line: line-through;
 }
 
-p {
-  font-size: 125%; // default font size (browser 16) -> (10 62.5%)
-  margin: 0 0 8px;
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-// Liste più universali e flessibili
+.text-evidente, .text-evidente2 {
+  font-size: 1.25rem;
+  color: blue;
+  line-height: 1.75rem;
+  letter-spacing: 0.01em;
+}
+
+.text-evidente2 {
+  letter-spacing: 0.005em;
+}
+
+// ============================================
+// 6. LISTE
+// ============================================
 ul {
   padding: 0;
-
-  // Lista di default con checkmark
+  
   &:not(.q-list) li {
     list-style: none;
-
+    
     &::before {
       content: '\2713';
-      color: #667eea;
+      color: $primary-accent;
       display: inline-block;
       width: 1em;
-
-      @media (max-width: 600px) {
+      
+      @media (max-width: $breakpoint-xs) {
         margin-left: 5px;
       }
     }
@@ -103,12 +203,12 @@ ul {
 }
 
 ol li::before {
-  color: #667eea;
+  color: $primary-accent;
   display: inline-block;
   width: 1em;
   margin-left: 20px;
-
-  @media (max-width: 600px) {
+  
+  @media (max-width: $breakpoint-xs) {
     margin-left: 5px;
   }
 }
@@ -116,95 +216,219 @@ ol li::before {
 li {
   font-size: 18px;
   line-height: 1.7;
-
-  @media (max-width: 600px) {
+  
+  @media (max-width: $breakpoint-xs) {
     font-size: 1rem;
   }
 }
 
-.logo {
-  margin-left: auto;
-  margin-right: auto;
-
-  max-height: 200px;
-  max-width: 200px;
-
-  @media (max-width: 718px) {
-    max-height: 130px;
-    max-width: 130px;
+// ============================================
+// 7. CARD SYSTEM
+// ============================================
+.q-card {
+  background: var(--app-bg-card);
+  border-radius: var(--app-border-radius);
+  box-shadow: var(--app-shadow-sm);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    box-shadow: var(--app-shadow-md);
   }
 }
 
-$grayshadow: #555;
-
-$graytext: #555;
-
-$textcol: blue;
-$textcol_scuro: darkblue;
-$heightBtn: 100%;
-
-.flex-item {
-  // background-color: #d5e2eb;
-  display: flex;
-  padding: 2px;
-  margin: 2px;
-  margin-left: 3px;
-  margin-right: 3px;
-  color: #000;
-  font-size: 0.9rem;
-  height: $heightBtn;
-  line-height: $heightBtn;
-  vertical-align: middle;
-  //flex: 0 0 100%;
+.my-card {
+  width: 100%;
+  min-width: 280px;
+  padding: 1rem;
+  
+  @media (max-width: 360px) {
+    min-width: 240px;
+  }
+  
+  @media (max-width: $breakpoint-md) {
+    max-width: 1024px !important;
+    min-width: 250px;
+  }
 }
 
-.flex-item-btn {
-  padding: 8px;
-  margin: 10px;
-  line-height: 20px;
+.my-card-withshadow {
+  width: 100%;
+  max-width: 300px;
+  min-width: 300px;
+  padding: 1rem;
+}
+
+.my-card-big {
+  width: 100%;
+  padding: 1rem;
+  box-shadow: none;
+  
+  @media (max-width: $breakpoint-sm) {
+    max-width: 400px;
+    padding: 0.5rem;
+  }
+}
+
+.my-card-shadow {
+  width: 100%;
+  margin: 1rem auto;
+  min-width: 0;
+  padding-bottom: 20px;
+  border-radius: 30px;
+  
+  @media (max-width: $breakpoint-md) {
+    max-width: 1024px;
+    min-width: 300px;
+  }
+}
+
+.my-card-selected {
+  transition: box-shadow 0.3s;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
+  color: blue;
+  background-color: lightblue;
+}
+
+.my-card-prod {
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
+  width: 100%;
+  max-width: 300px;
+  padding: 0.5rem;
+  
+  &:hover {
+    transform: scale(1.02);
+  }
+  
+  @media (max-width: $breakpoint-sm) {
+    max-width: 400px;
+    padding: 1rem;
+  }
+}
+
+.my-card-elem {
+  flex: 0 0 auto;
+  margin-right: 1rem;
+  scroll-snap-align: start;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+// Card sections
+.q-card__section {
+  @media (max-width: $breakpoint-xs) {
+    padding: 8px !important;
+  }
+}
+
+.q-card-section-small {
+  padding: 0;
+}
+
+// ============================================
+// 8. BUTTONS
+// ============================================
+.q-btn {
+  &:not(.q-btn--flat):not(.q-btn--outline) {
+    box-shadow: var(--app-shadow-sm);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover:not(.q-btn--disable) {
+      box-shadow: var(--app-shadow-md);
+      transform: translateY(-2px);
+    }
+    
+    &:active:not(.q-btn--disable) {
+      transform: translateY(0);
+      box-shadow: var(--app-shadow-sm);
+    }
+  }
+}
+
+.butt_rounded {
+  border-radius: 12px;
+  background-color: var(--app-bg-card);
+}
+
+.butt_green {
+  background-color: rgb(202, 232, 202) !important;
+}
+
+.buttreg {
   font-weight: bold;
-  font-size: 2em;
+}
+
+.mybtn_sticky {
+  opacity: 0.6;
+  
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.btn-edit-floating {
+  position: relative;
+  top: 4px;
+  right: 0;
+  z-index: 10;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+  
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.fixed-button {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 1000;
+}
+
+.fixed-button2 {
+  position: fixed;
+  bottom: 16px;
+  right: 120px;
+  z-index: 1000;
+}
+
+.center-button {
+  display: flex;
+  justify-content: center;
+}
+
+.buttons_bottom {
+  max-width: 700px !important;
+  margin: 0 auto;
+  justify-content: space-around;
   text-align: center;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .2s;
-}
-
-.fade-enter,
-.fade-leave-to
-
-/* .fade-leave-active below version 2.1.8 */
-  {
-  opacity: 0;
-}
-
-.slide-enter-active {
-  animation: slide-in 0.2s ease-out forwards;
-}
-
-.slide-leave-active {
-  animation: slide-out 0.5s ease-out forwards;
-}
-
-@keyframes slide-in {
-  from {
-    transform: translateX(-500px);
-  }
-
-  to {
-    transform: translateX(0);
+  padding: 8px 0;
+  
+  @media (max-width: 700px) {
+    max-width: 400px;
   }
 }
 
-@keyframes slide-out {
-  from {
-    transform: translateX(0);
+// ============================================
+// 9. FORM ELEMENTS
+// ============================================
+.q-field {
+  &__control {
+    border-radius: 10px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
   }
-
-  to {
-    transform: translateX(1600px);
+  
+  &--focused .q-field__control {
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
   }
 }
 
@@ -216,11 +440,194 @@ $heightBtn: 100%;
   height: 90px;
 }
 
+.selectorwide {
+  min-width: 240px;
+  font-size: 1rem;
+}
+
+.combowidth, .comboselector {
+  min-width: 190px;
+  
+  @media (max-width: 450px) {
+    min-width: 125px;
+    white-space: nowrap;
+  }
+}
+
+.comboselector {
+  font-size: 0.85rem !important;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.popupedit {
+  border: 1px solid #bbb;
+  border-radius: var(--app-border-radius);
+}
+
+// ============================================
+// 10. DIALOG & MODAL
+// ============================================
+.q-dialog__backdrop {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.q-dialog .q-card {
+  border-radius: 20px;
+}
+
+.q-dialog-on-top {
+  align-self: flex-start !important;
+}
+
+.no-padding-dialog .q-dialog__inner {
+  padding: 0 !important;
+}
+
+.dialog_annunci {
+  max-width: 700px !important;
+  
+  @media (max-width: 700px) {
+    max-width: 100% !important;
+  }
+}
+
+.dialog_card {
+  min-width: auto;
+  width: 100% !important;
+  margin: 0 2px !important;
+  
+  @media (max-width: $breakpoint-xs) {
+    width: auto;
+    min-width: auto;
+  }
+}
+
+.dialog_class {
+  max-width: 800px;
+  width: 100%;
+  
+  @media (max-width: $breakpoint-xs) {
+    max-width: 100%;
+  }
+}
+
+// ============================================
+// 11. LIST & ITEMS
+// ============================================
+.q-list {
+  .q-item {
+    border-radius: 10px;
+    margin-bottom: 2px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    
+    &--active {
+      background: rgba(25, 118, 210, 0.1);
+      color: var(--q-primary);
+      font-weight: 600;
+    }
+  }
+}
+
+.q-item__section--side {
+  margin-left: 0 !important;
+}
+
+@media (max-width: $breakpoint-xs) {
+  .q-item {
+    padding: 2px 4px;
+  }
+}
+
+// ============================================
+// 12. TABS
+// ============================================
+.q-tabs {
+  .q-tab {
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    
+    &--active {
+      background: rgba(25, 118, 210, 0.1);
+    }
+  }
+}
+
+.q-tab-panel {
+  @media (max-width: $breakpoint-xs) {
+    padding: 4px;
+  }
+}
+
+.mysmalltabs {
+  padding-left: 1px !important;
+  padding-right: 1px !important;
+}
+
+// ============================================
+// 13. BADGE & CHIP
+// ============================================
+.q-badge {
+  border-radius: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.q-chip {
+  border-radius: 16px;
+  font-weight: 600;
+  box-shadow: var(--app-shadow-sm);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: var(--app-shadow-md);
+    transform: translateY(-1px);
+  }
+}
+
+.mybadge {
+  border-radius: 10px !important;
+  text-shadow: 0.05rem 0.05rem 0.15rem #878787;
+}
+
+.chip_shadow {
+  border-radius: 20px;
+  background: linear-gradient(45deg, #3a90e7, #8e92e4) !important;
+  box-shadow: 1px 1px 3px #5f6f8b;
+  color: #ffffff;
+}
+
+// ============================================
+// 14. NOTIFICATIONS & BANNERS
+// ============================================
+.q-notification {
+  border-radius: 12px;
+  box-shadow: var(--app-shadow-md);
+  
+  &__message {
+    font-weight: 500;
+  }
+}
+
 .my-notif-class {
   font-weight: bold;
   font-size: 1rem;
   border-radius: 30px !important;
-  text-shadow: .05rem .05rem .15rem #878787;
+  text-shadow: 0.05rem 0.05rem 0.15rem #878787;
 }
 
 .mybanner {
@@ -229,6 +636,19 @@ $heightBtn: 100%;
   text-align: center;
 }
 
+.mybanner-small {
+  font-weight: bold;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.mybanner_left {
+  padding: 4px;
+  font-weight: bold;
+  font-size: 1rem;
+  text-align: left;
+}
+
 .update-banner {
   background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
   color: white !important;
@@ -236,11 +656,11 @@ $heightBtn: 100%;
   padding: 12px 16px !important;
   box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
   animation: slideDown 0.4s ease;
-
+  
   .q-banner__avatar {
     align-self: center;
   }
-
+  
   .q-banner__content {
     padding: 0;
   }
@@ -270,365 +690,512 @@ $heightBtn: 100%;
   line-height: 1.4;
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 600px) {
+@media (max-width: $breakpoint-xs) {
   .update-banner {
     padding: 10px 12px !important;
   }
-
+  
   .update-title {
     font-size: 1.1rem;
   }
-
+  
   .update-message {
     font-size: 0.9rem;
   }
-
+  
   .update-icon {
     font-size: 1.5rem;
   }
 }
 
-.mybanner-small {
-  font-weight: bold;
-  font-size: 0.85rem;
-  text-align: center;
-}
-
-
-
-.mybanner_left {
-  padding: 4px;
-  font-weight: bold;
-  font-size: 1rem;
-  text-align: left;
-}
-
-.lowperc {
-  color: red;
-}
-
-.medperc {
-  color: blue;
-}
-
-.highperc {
-  color: green;
-}
-
-.hide-if-small {
-  @media (max-width: 600px) {
-    display: none;
+// ============================================
+// 15. AVATAR & IMAGES
+// ============================================
+.q-avatar {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  img {
+    object-fit: cover;
+  }
+  
+  &:hover {
+    transform: scale(1.05);
   }
 }
 
-.thiny-if-small {
-  @media (max-width: 600px) {
-    max-width: 22px;
+.logo {
+  margin: 0 auto;
+  max-height: 200px;
+  max-width: 200px;
+  
+  @media (max-width: $breakpoint-sm) {
+    max-height: 130px;
+    max-width: 130px;
   }
 }
 
-.links,
-.links a {
-  text-shadow: 1px 1px 1px #555 !important;
-  // font-weight: bold;
-  color: cornflowerblue !important;
+.img {
+  max-width: 100%;
+  height: auto;
 }
 
-.links:hover {
-  color: white !important;
-}
-
-.text-subtitle1,
-h2 {
-  margin-bottom: 6px;
-  font-size: 1.35rem;
-  font-weight: 400;
-  text-shadow: .25 .25rem .5rem $grayshadow;
-  letter-spacing: .00937em;
-
-  &.big {
-    font-size: 1.5rem;
-  }
-
-  @media (max-width: 768px) {
-    line-height: 2rem;
+.img2 {
+  margin: 0 auto;
+  max-height: 550px;
+  max-width: 550px;
+  
+  @media (max-width: $breakpoint-sm) {
+    max-height: 350px;
+    max-width: 350px;
   }
 }
 
-.text-price {
-  margin-bottom: 6px;
-  font-size: 1.10rem;
-  font-weight: 400;
-  text-shadow: .25 .25rem .5rem $grayshadow;
-  letter-spacing: .00937em;
-
-  &.big {
-    font-size: 1.5rem;
-  }
+.imgintro {
+  margin: 0 auto;
 }
 
-.text-subtitle2,
-h3 {
-  margin-bottom: 4px;
-  font-size: 1.15rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  letter-spacing: .00937em;
-  text-shadow: .0625rem .0625rem .125rem $grayshadow;
+.imgautosize {
+  display: block;
+  margin: auto;
 }
 
-.text-subtitle3 {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  letter-spacing: .00937em;
-}
-
-.text-subtitle3_short {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  letter-spacing: .00937em;
-}
-
-.text-3d {
-  letter-spacing: .00937em;
-  font-size: 1rem;
-  text-shadow: 1rem 1rem 2rem #ff0;
-}
-
-.text-currency {
-  padding: 2px 2px;
-  font-size: 0.65rem;
-  font-weight: bold !important;
-  line-height: 1.55rem;
-  text-shadow: .0525rem .0525rem .125rem rgb(0, 0, 0);
-  letter-spacing: .00937em;
-}
-
-@media (max-width: 718px) {
-  // PER VERSIONE MOBILE
-
-  p {
-    // font-size: 100%; // default font size (browser 16) -> (10 62.5%)
-    // font-family: "Abyssinica SIL", serif;
-    text-justify: auto;
-    margin: 0 0 4px;
-  }
-
-  .text-subtitle1 {
-    font-size: 1.25rem;
-  }
-
-  .text-subtitle2 {
-    font-size: 1rem;
-  }
-
-  .text-subtitle3 {
-    font-size: 0.75rem;
-  }
-
-  .text-subtitle4 {
-    font-size: 0.7rem;
-  }
-
-  .cltexth3 {
-    font-size: 1.25rem;
-  }
-
-  .text-big {
-    font-size: 1.25rem;
-  }
-
-  .text-sobig {
-    font-size: 1.50rem;
-  }
-}
-
-.dialog_annunci {
-  max-width: 700px !important;
-
-  @media (max-width: 700px) {
-    /* Versione Mobile */
-    max-width: 100% !important;
-  }
-
-}
-
-.my-card {
-  width: 100%;
-  min-width: 280px;
-  padding: 1rem 1rem;
-
-  /* più sicuro su mobile */
-  @media (max-width: 360px) {
-    min-width: 240px;
-  }
-
-  @media (max-width: 1024px) {
-    /* Versione Mobile */
-    max-width: 1024px !important;
-    min-width: 250px;
-  }
-
-  // box-shadow: none;
-}
-
-.my-card-withshadow {
-  width: 100%;
-  max-width: 300px;
-  min-width: 300px;
-  padding: 1rem 1rem;
-
+.imglink {
+  cursor: pointer;
 }
 
 .myimgtitle {
   max-width: 100%;
   width: 100%;
-
-  @media (max-width: 718px) {}
 }
 
 .myimgproduct {
   max-width: 100%;
   height: 300px;
-
-  @media (max-width: 718px) {
+  
+  @media (max-width: $breakpoint-sm) {
     height: 250px;
   }
 }
 
-.my-card-big {
-  width: 100%;
-  padding: 1rem 1rem;
-
-  box-shadow: none;
-
-  @media (max-width: 718px) {
-    // PER VERSIONE MOBILE
-    max-width: 400px;
-    padding: 0.5rem 0.5rem;
-
-  }
+.myimg-view {
+  border-radius: 5px !important;
+  height: 90px;
 }
 
-.my-card-selected {
-  transition: box-shadow 0.3s;
-  /* Add a transition for a smooth effect */
+.imgprofile {
+  border: 0;
+  border-radius: 16px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
-  color: blue;
-  background-color: lightblue;
+  margin: 1px;
+  object-position: 50% 5% !important;
+  object-fit: contain !important;
 }
 
-.my-card-prod:hover {
-  transition: transform .2s;
-  transform: scale(1.02);
+.imgprofile_small {
+  border: 0;
+  border-radius: 30px;
+  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
+  margin: 1px;
+  transform: scale(1.0);
 }
 
-.my-card-prod {
-  transition: box-shadow 0.3s ease, transform 0.3s ease;
-  /* Add a transition for a smooth effect */
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
-  width: 100%;
+.iconprofile_small {
+  border-radius: 30px;
+}
+
+.img_effetto_3d {
+  border-radius: 10px !important;
+  height: 300px;
   max-width: 300px;
-  padding: 0.5rem 0.5rem;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+}
 
-  box-shadow: none;
+.image-circle {
+  border-radius: 50%;
+  object-fit: cover;
+  overflow: hidden;
+}
 
-  @media (max-width: 718px) {
-    // PER VERSIONE MOBILE
-    max-width: 400px;
-    padding: 1rem 1rem;
+.image-ombra {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
 
+.image-round-bordered {
+  border-radius: 22px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  object-fit: cover;
+  border: 2px solid #6b6e68a1;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
+    transform: scale(1.05);
   }
 }
 
-.text-trans {
-  opacity: 0.9;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-  filter: alpha(opacity=90);
+.fit_img {
+  max-width: 100%;
+  height: auto;
 }
 
-.text-spacetrans {
-  padding: 0 !important;
-  background: rgba(0, 0, 0, 0.3) !important;
-  border-radius: 30px !important;
+.center_img {
+  display: block !important;
+  margin: 0 auto;
 }
 
-.text-shadow {
-  text-shadow: .15rem .15rem .15rem $grayshadow;
+.center-150 {
+  width: 150px;
+  margin: 0 auto;
 }
 
-.citazione {
-  font-size: 0.75rem;
-  font-family: "Lucida Calligraphy", serif;
+// ============================================
+// 16. CAROUSEL
+// ============================================
+.card-carousel-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
 }
 
-.cltexth3,
-.cltexth2,
-.cltexth4,
-.cltexth5,
-.cltexth6 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-  letter-spacing: .01em;
-  text-align: center !important;
+.card-carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 1rem 0;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .row.no-wrap {
+    flex-wrap: nowrap !important;
+  }
 }
 
-.cltexth4 {
-  font-size: 1.15rem;
+.q-carousel__slide {
+  background-size: contain !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
 }
 
-.cltexth5 {
-  font-size: 1rem;
+.carousel_img, .carousel_img_3 {
+  background-size: contain !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
 }
 
-.cltexth6 {
-  font-size: 0.75rem;
+.carousel_img_3 {
+  background-size: cover !important;
 }
 
-.cltexth2 {
-  font-size: 1.5rem;
+.img-container {
+  overflow: hidden;
+  
+  .q-img {
+    height: 100%;
+    object-fit: contain;
+  }
 }
 
-.boldhigh,
-.boldop,
-.text-big {
+.swipe-indicator {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  
+  &.left { left: 10px; }
+  &.right { right: 10px; }
+}
+
+.scroll-indicator {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ccc;
+  margin: 0 4px;
+  transition: background-color 0.3s ease;
+  
+  &.active {
+    background-color: #000;
+  }
+}
+
+// ============================================
+// 17. STEPPER
+// ============================================
+.q-stepper__tab {
+  padding: 3px !important;
+}
+
+.q-stepper--horizontal .q-stepper__step-inner {
+  padding: 16px !important;
+  
+  @media (max-width: $breakpoint-xs) {
+    padding: 8px !important;
+  }
+}
+
+// ============================================
+// 18. TABLE
+// ============================================
+.my-sticky-header-table {
+  .q-table__middle {
+    max-height: 650px !important;
+    
+    @media (max-width: $breakpoint-sm) {
+      max-height: 400px !important;
+    }
+  }
+  
+  thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  
+  thead tr:first-child th {
+    top: 0;
+  }
+  
+  &.q-table--loading thead tr:last-child th {
+    top: 60px;
+  }
+}
+
+.table-price {
+  margin: auto;
+  border-collapse: collapse;
+  
+  td {
+    padding: 8px;
+    text-align: right;
+    vertical-align: middle;
+  }
+}
+
+.label-price {
+  font-weight: bold;
+}
+
+.value-price {
+  font-size: 1.2em;
+  text-align: right;
+}
+
+// ============================================
+// 19. DRAWER
+// ============================================
+.q-drawer {
+  .q-drawer__content {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+    
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+
+// ============================================
+// 20. TOOLTIP
+// ============================================
+.q-tooltip {
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 0.85rem;
   font-weight: 500;
-  text-shadow: .05rem .05rem .05rem $grayshadow;
+  box-shadow: var(--app-shadow-md);
 }
 
-.boldop {
-  color: darkblue;
+// ============================================
+// 21. SEPARATOR
+// ============================================
+.q-separator {
+  background: var(--app-border-color);
 }
 
-.text-big {
-  font-size: 1.5rem;
+.barretta-sep {
+  background-color: #dadce0;
+  border-radius: 2px;
+  height: 4px;
+  width: 100%;
 }
 
+// ============================================
+// 22. TOGGLE
+// ============================================
+.toggle-enhanced {
+  --q-toggle-thumb-color: var(--q-color-grey-4);
+  --q-toggle-track-color: rgba(255, 255, 255, 0.2);
+  
+  &.q-toggle--dark {
+    --q-toggle-thumb-color: var(--q-color-grey-5);
+    --q-toggle-track-color: rgba(255, 255, 255, 0.25);
+  }
+  
+  &.q-toggle--truthy {
+    --q-toggle-thumb-color: var(--q-color-green);
+    --q-toggle-track-color: rgba(0, 150, 0, 0.5);
+  }
+  
+  .q-toggle__label {
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: var(--q-color-grey-10);
+    margin-left: 0.5rem;
+  }
+  
+  &:hover:not(.disabled) .q-toggle__inner {
+    filter: drop-shadow(0 0 3px rgba(0, 200, 0, 0.4));
+  }
+  
+  &.disabled {
+    opacity: 0.6;
+  }
+}
+
+// ============================================
+// 23. FLEX LAYOUT
+// ============================================
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  height: 100%;
+}
+
+.flex-card {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  margin: 0 0.5rem;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.flex-item {
+  display: flex;
+  padding: 2px;
+  margin: 2px 3px;
+  color: #000;
+  font-size: 0.9rem;
+  height: 100%;
+  line-height: 100%;
+  vertical-align: middle;
+  
+  @media (max-width: $breakpoint-xs) {
+    padding: 1px;
+    margin: 1px;
+  }
+}
+
+.flex-item-btn {
+  padding: 8px;
+  margin: 10px;
+  line-height: 20px;
+  font-weight: bold;
+  font-size: 2em;
+  text-align: center;
+}
+
+.flex-item-book {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  flex-grow: 0;
+}
+
+.flex-container-book {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0;
+  justify-content: space-evenly;
+}
+
+.row.no-wrap {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.cards-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  max-width: 200px;
+  margin: 0 10px;
+  text-align: center;
+}
+
+.card-row {
+  display: flex;
+  justify-content: center;
+  flex-direction: column !important;
+}
+
+.cards-container {
+  display: flex;
+  flex-direction: column !important;
+}
+
+.card-width-200 {
+  width: 100%;
+  max-width: 200px;
+}
+
+.card-width-250 {
+  width: 100%;
+  max-width: 250px;
+}
+
+.centeritems {
+  place-content: center;
+}
+
+// ============================================
+// 24. POSITIONING
+// ============================================
 .center_to_image {
   position: absolute;
   left: 0;
@@ -638,90 +1205,13 @@ h3 {
   text-align: center;
 }
 
-
-.center_img {
-  display: block !important;
-  margin-left: auto;
-  margin-right: auto;
+.centermydiv, .centermydiv2 {
+  margin: 0 auto;
+  display: block;
 }
 
-.padding_cell {
-  padding: 0.75rem 0.5rem;
-}
-
-@media (max-width: 3000px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 750px !important;
-  }
-}
-
-
-@media (max-width: 1200px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 700px !important;
-  }
-}
-
-.maxwidth {
-  max-width: 1200px !important;
-}
-
-@media (max-width: 1000px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 650px !important;
-  }
-}
-
-@media (max-width: 800px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 550px !important;
-  }
-}
-
-@media (max-width: 700px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 400px !important;
-  }
-}
-
-@media (max-width: 600px) {
-
-  .myclimg,
-  .maxwidth {
-    height: 400px !important;
-  }
-}
-
-// preloading images:
-@media screen {
-  div#preloader {
-    position: absolute;
-    left: -9999px;
-    top: -9999px;
-  }
-
-  div#preloader img {
-    display: block;
-  }
-}
-
-@media print {
-
-  div#preloader,
-  div#preloader img {
-    visibility: hidden;
-    display: none;
-  }
+.centermydiv2 {
+  display: initial;
 }
 
 .tothebottomfixed {
@@ -746,121 +1236,24 @@ h3 {
   top: 20px;
 }
 
-.centermydiv {
+.fixed-toggle {
+  position: absolute;
+  top: 60px;
+  left: 20px;
+  z-index: 1000;
+}
+
+.align_elem_right {
   margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-.centermydiv2 {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.text-verified {
-  font-size: 1.25rem;
-  text-shadow: .05rem .05rem .15rem #fff;
-  background-color: red;
-  border-radius: 1rem !important;
-  text-align: center;
-  margin: 5px;
-}
-
-.text-evidente {
-  font-size: 1.25rem;
-  color: blue;
-  line-height: 1.75rem;
-  letter-spacing: .01em;
-}
-
-.text-evidente2 {
-  font-size: 1.25rem;
-  color: blue;
-  line-height: 1.75rem;
-  letter-spacing: .005em;
-}
-
-
-.shadow-max {
-  //color: white;
-  text-shadow: .25rem .25rem .5rem $grayshadow;
-}
-
-.myshadow {
-  //color: white;
-  text-shadow: .05rem .05rem .1rem $grayshadow;
-  font-weight: bold;
-}
-
-.myh4 {
-  font-size: 1.25rem;
-  color: red;
-  line-height: 125%;
-}
-
-.mybtn_sticky {
-  opacity: 0.6;
-}
-
-.mybtn_sticky:hover {
-  opacity: 1;
-}
-
-.imgautosize {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: auto;
-  margin-bottom: auto;
-  display: block;
-}
-
-.margin_buttons {
-  margin: -8px -8px;
-}
-
-.margin_buttons>* {
-  margin: 12px 12px !important;
-}
-
-.fa-flag-it:before {
-  content: url('/svg/flag_it.svg');
-}
-
-.fa-flag-us:before {
-  content: url('/svg/flag_us.svg');
-}
-
-
-.fa-flag-es:before {
-  content: url('/svg/flag_es.svg');
-}
-
-.fa-flag-gb:before {
-  content: url('/svg/flag_gb.svg');
-}
-
-.fa-flag-de:before {
-  content: url('/svg/flag_de.svg');
-}
-
-.animazione {
-  animation-duration: 2s;
-  animation-fill-mode: both;
-}
-
-.anim1 {
-  animation-duration: 0.5s;
-  animation-fill-mode: both;
-}
-
-.wrapword {
-  overflow-wrap: break-word;
 }
 
+// ============================================
+// 25. BORDERS
+// ============================================
 .clBorderWarning,
 .clBorderZoom,
 .clBorderTutor {
-  border: #f69f09 solid 5px;
+  border: $warning-color solid 5px;
   border-radius: 32px;
   font-size: 1rem;
   padding: 6px;
@@ -881,6 +1274,10 @@ h3 {
   padding: 8px;
 }
 
+.clBorderSteps {
+  border-color: green;
+}
+
 .clBorderSperator {
   background-color: blue;
   font-size: 1rem;
@@ -901,7 +1298,7 @@ h3 {
   border-radius: 16px;
   font-size: 1rem;
   margin-top: 2px;
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
 .clBorderTutor {
@@ -909,26 +1306,6 @@ h3 {
   border: #f634b5 solid 2px;
 }
 
-.clBorderSteps {
-  border-color: green;
-}
-
-.text-h5-diff {
-  @media (max-width: 600px) {
-    font-size: 1.25rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    letter-spacing: normal;
-  }
-}
-
-.text-h7-dense {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  letter-spacing: normal;
-}
-
 .clBorderSmall {
   border: #dfe3f6 solid 1px;
   border-radius: 16px;
@@ -939,111 +1316,51 @@ h3 {
 .clBorderxs {
   border: #dfe3f6 solid 1px;
   border-radius: 16px;
-  padding-left: 3px;
-  padding-right: 3px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.img {
-  max-width: 100%;
-  height: auto;
-
-}
-
-.imgintro {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.img2 {
-  margin-left: auto;
-  margin-right: auto;
-
-  max-height: 550px;
-  max-width: 550px;
-
-  @media (max-width: 718px) {
-    max-height: 350px;
-    max-width: 350px;
-  }
-}
-
-.center-150 {
-  width: 150px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.text-h7 {
-  font-size: 1rem;
-}
-
-.text-h7 {
-  font-size: 1rem;
-}
-
-.text-h8 {
-  font-size: 0.85rem !important;
-}
-
-.text-h9 {
-  font-size: 0.65rem !important;
+  padding: 0 3px;
 }
 
 .bordo_stondato,
 .bordo_stondato_blu {
   margin: 4px;
   border-radius: 3rem;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding: 8px 14px;
   border: solid 3px #49b502;
 }
 
 .bordo_stondato_blu {
-  border: solid 3px #0f01b5;
+  border-color: #0f01b5;
 }
 
 .bordo_stondato2,
 .bordo_stondato_blu2 {
   margin: 4px;
   border-radius: 3rem;
-  padding-left: 2px;
-  padding-right: 2px;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding: 2px;
   border: solid 3px #49b502;
 }
 
+.bordo_stondato_blu2 {
+  border-color: #0f01b5;
+}
+
 .bordo_stondato_stretto {
   margin: 4px;
   border-radius: 3rem;
-  padding-left: 2px;
-  padding-right: 2px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding: 0 2px;
   border: solid 3px #49b502;
 }
 
 .bordo_stondato_small {
-  margin: 0px;
+  margin: 0;
   border-radius: 2rem;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding: 0 4px;
   border: solid 2px #49b502;
 }
 
 .bordo_stondato_pending,
 .bordo_quadrato_pending {
   margin: 4px;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding: 0 14px;
   border: solid 1px #4a6598;
 }
 
@@ -1054,10 +1371,7 @@ h3 {
 .bordo_stondato_circuiti {
   margin: 4px;
   border-radius: 1.15rem;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding: 2px 5px;
   border: solid 2px #a5aacc;
   box-shadow: 0 0 6px rgba(246, 246, 246, 0.2);
 }
@@ -1065,85 +1379,241 @@ h3 {
 .bordo_quadrato {
   margin: 1px;
   border-radius: 0.5rem;
-  padding-left: 2px;
-  padding-right: 2px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: 4px 2px;
   border: solid 2px #2d3e88;
 }
 
-
-.bordo_stondato_blu2 {
-  border: solid 3px #0f01b5;
+// ============================================
+// 26. BACKGROUND & COLORS
+// ============================================
+.bg-mycol {
+  background: #333333 !important;
 }
 
-
-.my-sticky-header-table .q-table__middle {
-  max-height: 650px !important;
-
-  @media (max-width: 718px) {
-    // PER VERSIONE MOBILE
-    max-height: 400px !important;
-  }
+.background-even {
+  background-color: var(--background-even);
 }
 
-/*
-.my-sticky-header-table .q-table__top,
-.my-sticky-header-table .q-table__bottom,
-.my-sticky-header-table thead tr:first-child th {
-  background-color: #f0ffff;
-}
-*/
-
-.my-sticky-header-table thead tr th {
-  position: sticky;
-  z-index: 1;
+.background-odd {
+  background-color: var(--background-odd);
 }
 
-.my-sticky-header-table thead tr:first-child th {
-  top: 0;
+.sfondo_gradiente_blu {
+  background: linear-gradient(180deg, 
+    rgba(0, 70, 255, 0.25), 
+    rgba(0, 70, 255, 0.55), 
+    rgba(0, 70, 255, 0.75)) !important;
 }
 
-.my-sticky-header-table.q-table--loading thead tr:last-child th {
-  /* height of all previous header rows */
-  top: 60px;
+.sfondo_gradiente_fuchsia {
+  background: linear-gradient(180deg, 
+    rgba(255, 0, 150, 0.25), 
+    rgba(255, 0, 150, 0.55), 
+    rgba(255, 0, 150, 0.75)) !important;
 }
 
-.my-card-shadow {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  min-width: 0;
-  /* lascia che si adatti */
+.sfondo_gradiente_verde {
+  background: linear-gradient(180deg, 
+    rgba(12, 181, 12, 0.35),
+    rgba(4, 185, 4, 0.55), 
+    rgba(12, 181, 12, 0.75)) !important;
+}
 
-  padding-bottom: 20px;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.sfondo_gradiente_arancione {
+  background: linear-gradient(180deg, 
+    rgba(255, 165, 0, 0.25), 
+    rgba(255, 165, 0, 0.55), 
+    rgba(255, 165, 0, 0.75)) !important;
+}
+
+.sfondo_gradiente_giallo {
+  background: linear-gradient(180deg, 
+    rgba(255, 255, 0, 0.25), 
+    rgba(255, 255, 0, 0.55), 
+    rgba(255, 255, 0, 0.75)) !important;
+}
+
+.sfondo_gradiente_rosso {
+  background: linear-gradient(180deg, 
+    rgba(255, 0, 0, 0.15),
+    lightblue,
+    rgba(255, 0, 0, 0.15)) !important;
+}
+
+.sfondo_trasparente {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+.poster_shadows {
   border-radius: 30px;
+  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
+}
 
-  // transition: transform .2s ease-out;
+.sfondo_print {
+  background-color: #17ead9;
+}
 
-  @media (max-width: 1024px) {
-    max-width: 1024px;
-    min-width: 300px;
+.sfondo_margine {
+  background-color: #d8f38a;
+}
+
+// Status colors
+.lowperc { color: red; }
+.medperc { color: blue; }
+.highperc { color: green; }
+
+.circuito_abilitato {
+  background-color: green;
+  color: green;
+  margin-right: 4px;
+  padding: 2px;
+  font-weight: bold;
+}
+
+.circuito_fase_2 {
+  background-color: orange;
+  color: white;
+  margin-right: 4px;
+  padding: 2px;
+  font-weight: bold;
+}
+
+.circuito_in_creazione {
+  background-color: blue;
+  color: white;
+  margin-right: 4px;
+  padding: 2px;
+  font-weight: bold;
+}
+
+// ============================================
+// 27. LINKS
+// ============================================
+.links,
+.links a {
+  text-shadow: 1px 1px 1px #555 !important;
+  color: cornflowerblue !important;
+}
+
+.links:hover {
+  color: white !important;
+}
+
+.underline {
+  text-decoration: underline;
+  color: blue;
+  
+  &:hover {
+    font-weight: bold;
+    cursor: pointer;
   }
 }
 
-.my-card-shadow:hover {
-
-  // transition: transform .2s ease-in;
-  // transform: scale(1.03);
-  @media (max-width: 500px) {
-    // transform: scale(1);
+.fake-link {
+  font-weight: bold;
+  
+  @media (max-width: $breakpoint-xs) {
+    color: #1976D2;
+    text-decoration: underline !important;
+    cursor: pointer;
+  }
+  
+  &:hover {
+    color: #0D47A1;
   }
 }
 
+// ============================================
+// 28. HERO & CONTAINER
+// ============================================
+.hero {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  text-align: center;
+  padding: 40px 20px;
+  color: white;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    border-radius: 20px;
+  }
+}
 
-.text-small {
-  font-size: 0.90rem;
+.hero-content {
+  position: relative;
+  z-index: 2;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
 
-  @media (max-width: 500px) {
-    font-size: 0.8rem !important;
+.intro {
+  font-size: 1.3rem;
+  color: #ddd;
+  margin-bottom: 1.5rem;
+  font-style: italic;
+}
+
+.cta {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 14px 28px;
+  background-color: $success-color;
+  color: white;
+  border-radius: 50px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
+  align-self: center;
+  
+  &:hover {
+    background-color: color.adjust($success-color, $lightness: -10%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 14px rgba(76, 175, 80, 0.4);
+  }
+}
+
+.containerhome {
+  background: var(--app-bg-card);
+  border-radius: 18px;
+  box-shadow: var(--app-shadow-md);
+  padding: 32px;
+  margin-bottom: 32px;
+  transition: transform 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-4px);
+  }
+}
+
+.container {
+  background: var(--app-bg-card);
+  border-radius: 12px;
+  box-shadow: var(--app-shadow-sm);
+  transition: transform 0.2s ease;
+}
+
+.fulldiv {
+  min-height: 100% !important;
+  max-width: 1024px !important;
+  min-width: 1024px !important;
+  
+  @media (max-width: $breakpoint-md) {
+    max-width: 1024px !important;
+    min-width: 300px !important;
   }
 }
 
@@ -1154,7 +1624,7 @@ h3 {
 
 .myheader {
   padding: 5px;
-
+  
   @media (max-width: 500px) {
     padding: 1px;
   }
@@ -1162,167 +1632,42 @@ h3 {
 
 #mybody {
   padding: 5px;
-
+  
   @media (max-width: 500px) {
     padding: 1px;
   }
 }
 
-.iconplusminus {
-  font-size: 6px;
+// ============================================
+// 29. CITATIONS & COMMENTS
+// ============================================
+.citazione {
+  font-size: 0.75rem;
+  font-family: "Lucida Calligraphy", serif;
 }
 
-.clpos {
-  color: #C0C0C0;
+.citation {
+  font-style: italic;
+  border-left: 4px solid #cccccc;
+  margin: 10px 0;
+  padding: 10px 20px;
+  color: var(--app-text-secondary);
+  background-color: var(--app-bg-card);
 }
 
-.clresp {
-  color: #206d24;
-}
-
-.clrespempty {
-  color: #DDDDDD;
-}
-
-@media (max-width: 600px) {
-  .flex-item {
-    padding: 1px;
-    margin: 1px;
-  }
-
-  .flex-container {
-    margin: 0;
-    padding: 0;
-  }
-
-
-  .q-tab-panel {
-    padding: 4px;
-  }
-
-  .q-item {
-    padding: 2px 4px;
-  }
-}
-
-.q-item__section--side {
-  margin-left: 0px !important;
-}
-
-.underline {
-  text-decoration: underline;
-  color: blue;
-}
-
-.underline:hover {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.imglink {
-  cursor: pointer;
-}
-
-.centeritems {
-  place-content: center;
-}
-
-.combowidth,
-.comboselector {
-  min-width: 190px;
-
-  @media (max-width: 450px) {
-    min-width: 125px;
-    white-space: nowrap;
-  }
-}
-
-.comboselector {
-  font-size: 0.85rem !important;
-  flex-wrap: nowrap;
-  white-space: nowrap;
-}
-
-.myimg-view {
-  border-radius: 5px !important;
-  height: 90px;
-}
-
-.dialog_card {
-  min-width: auto;
-  width: 100% !important;
-  margin-left: 2px !important;
-  margin-right: 2px !important;
-
-  @media (max-width: 600px) {
-    width: auto;
-    min-width: auto;
-  }
-
-}
-
-.wrap_anywhere {
-  overflow-wrap: anywhere;
-}
-
-.imgprofile {
-  border: 0px solid rgb(29, 118, 13);
-  border-radius: 16px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
-  margin: 1px;
-  object-position: 50% 5% !important;
-  object-fit: contain !important;
-
-  @media (max-width: 600px) {
-    /* Versione Mobile */
-  }
-}
-
-.imgprofile_small {
-  border: 0px solid rgb(29, 118, 13);
-  border-radius: 30px;
-  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
-  margin: 1px;
-  transform: scale(1.0);
-}
-
-.iconprofile_small {
-  border-radius: 30px;
-}
-
-.fill-all-width {
-  width: -webkit-fill-available;
-}
-
-.small-screen-only {
-  @media (max-width: $breakpoint-xs-max) {
-    display: block;
-  }
-
-  @media (min-width: $breakpoint-sm-min) {
-    display: none;
-  }
-}
-
-.large-screen-only {
-  @media (max-width: $breakpoint-xs-max) {
-    display: none;
-  }
-
-  @media (min-width: $breakpoint-sm-min) {
-    display: block;
-  }
-}
-
-.no-padding {
-  padding: 0 !important;
-}
-
-.popupedit {
-  border: 1px solid #bbb;
-  border-radius: $generic-border-radius
+.comment {
+  font-size: 0.9em;
+  color: var(--app-text-muted);
+  background-color: var(--app-bg-card);
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: var(--app-shadow-sm);
+  margin: 10px 0;
 }
 
+// ============================================
+// 30. EVENTS
+// ============================================
 .dateevent {
   border-radius: 16px;
   border: red solid 2px;
@@ -1332,7 +1677,6 @@ h3 {
   margin-left: 5px;
   font-size: 0.85rem;
   color: darkblue;
-
 }
 
 .datainizio,
@@ -1340,27 +1684,204 @@ h3 {
   font-weight: bold;
 }
 
-.accom_num,
-.accom_maxosp {
+.ev_dayofweek {
+  color: grey;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  text-align: center;
+  margin-bottom: -4px;
+}
+
+.ev_day {
+  color: var(--app-text-primary);
   font-size: 1.25rem;
-  background-color: green;
   font-weight: bold;
-  color: white;
-  margin-right: 10px;
-  padding: 10px;
+  text-align: center;
 }
 
-.accom_maxosp {
-  background-color: blue !important;
+.ev_month {
+  color: var(--app-text-primary);
+  font-size: 1rem;
+  text-align: center;
 }
 
-.img_effetto_3d {
-  border-radius: 10px !important;
-  height: 300px;
-  max-width: 300px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
+.ev_hour {
+  color: green;
+  font-size: 0.85rem;
+  text-align: center;
 }
 
+.ev_hour_end {
+  color: red;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+// ============================================
+// 31. PRICING
+// ============================================
+.text-price {
+  margin-bottom: 6px;
+  font-size: 1.10rem;
+  font-weight: 400;
+  letter-spacing: 0.00937em;
+  
+  &.big {
+    font-size: 1.5rem;
+  }
+}
+
+.text-currency {
+  padding: 2px;
+  font-size: 0.65rem;
+  font-weight: bold !important;
+  line-height: 1.55rem;
+  text-shadow: 0.0525rem 0.0525rem 0.125rem rgb(0, 0, 0);
+  letter-spacing: 0.00937em;
+}
+
+.product-price-discount {
+  font-weight: 500;
+  line-height: 1.2;
+  font-size: 1rem;
+  color: #f60;
+  margin-bottom: 5px;
+}
+
+.ordine_scontato_nuovo {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: green;
+  background-image: linear-gradient(to right, #d5ffd5, #dfff06);
+  padding: 6px;
+  border-radius: 8px;
+  box-shadow: var(--app-shadow-sm);
+}
+
+.ordine_scritta_sconto {
+  font-size: 1rem;
+  color: red;
+  background-color: #fff5ee;
+  padding: 2px;
+  border-radius: 8px;
+  box-shadow: var(--app-shadow-sm);
+  text-align: center;
+}
+
+.ordine_scontato {
+  color: gray;
+  font-size: 0.85rem;
+}
+
+.sconto-label {
+  font-weight: bold;
+  margin-left: 5px;
+}
+
+.sconto-text {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+// ============================================
+// 32. MAP MARKERS
+// ============================================
+.marker-mini-icon {
+  position: absolute;
+  top: 5px;
+  left: 9px;
+  font-size: 20px;
+}
+
+.marker-circle {
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  background-color: white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+}
+
+.marker-shadow {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 3px;
+  left: 8px;
+  z-index: -10;
+  opacity: 1;
+}
+
+.custom-icon .material-icons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 40px;
+  color: blue;
+}
+
+.current-location-icon {
+  background-color: #4A89F3;
+  border: 3px solid #FFFFFF;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px #4A89F3;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 50%;
+    background-color: #FFFFFF;
+    border-radius: 50%;
+    opacity: 0.4;
+  }
+}
+
+.custom-zoom-button {
+  background-color: white;
+  border: 2px solid #007bff;
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  margin-top: 10px;
+  z-index: 1000;
+  
+  &:hover {
+    background-color: #007bff;
+    color: white;
+  }
+}
+
+// ============================================
+// 33. VIDEO EMBED
+// ============================================
+.aspect-ratio-box {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; // 16:9
+  max-width: 800px;
+  margin: 0 auto;
+  
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+
+// ============================================
+// 34. FONTS
+// ============================================
 @font-face {
   font-family: WalterTurncoat;
   src: url(./fonts/walterturncoat.woff);
@@ -1406,27 +1927,27 @@ h3 {
   font-size: 1.25rem;
   color: #8300e9 !important;
   font-weight: 500;
-  text-shadow: .1rem .1rem .1rem $grayshadow;
+  text-shadow: 0.1rem 0.1rem 0.1rem $gray-shadow;
 }
 
 .title_view_shadow {
   font-family: WalterTurncoat, handwriting, Arial, sans-serif;
   font-size: 1.15rem;
-  text-shadow: .05rem .05rem .05rem $grayshadow;
-  letter-spacing: 0px !important;
+  text-shadow: 0.05rem 0.05rem 0.05rem $gray-shadow;
+  letter-spacing: 0 !important;
 }
 
 .title_view_small_shadow {
   font-family: WalterTurncoat, handwriting, Arial, sans-serif;
   font-size: 0.75rem;
-  text-shadow: .05rem .05rem .05rem $grayshadow;
+  text-shadow: 0.05rem 0.05rem 0.05rem $gray-shadow;
   letter-spacing: 0.25px;
 }
 
 .title_view_subtitle_shadow {
   font-family: Arial, sans-serif;
   font-size: 0.7rem;
-  text-shadow: .05rem .05rem .05rem $grayshadow;
+  text-shadow: 0.05rem 0.05rem 0.05rem $gray-shadow;
   letter-spacing: 0.15px;
 }
 
@@ -1437,170 +1958,56 @@ h3 {
   min-height: 27px;
 }
 
-
 .text-normal {
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 1rem;
-  color: #666;
+  color: var(--app-text-muted);
   line-height: 1.7em;
   font-weight: 500;
-  -webkit-font-smoothing: antialiased;
-}
-
-.q-carousel__slide {
-  background-size: contain !important;
-  background-position: 50% center !important;
-  background-repeat: no-repeat !important;
-}
-
-.carousel_img {
-  //background-image: url(/images/cibo_sano.jpg);
-  background-size: contain !important;
-  background-position: 50% center !important;
-  background-repeat: no-repeat !important;
-}
-
-.username {
-  font-weight: bold;
-  text-shadow: .25 .25rem .5rem $grayshadow;
-  letter-spacing: 0.025rem;
-  font-style: italic;
-}
-
-.q-card__section {
-  @media (max-width: 600px) {
-    padding: 8px !important;
-  }
-}
-
-.align_elem_right {
-  margin-left: auto;
-}
-
-.text-section {
-  font-size: 1.15rem;
-  font-weight: bold;
-}
-
-.sezioni {
-  vertical-align: center;
-  padding: 4px;
-}
-
-.mysmalltabs {
-  padding-left: 1px !important;
-  padding-right: 1px !important;
-}
-
-.feat-descr {
-  font-size: 1.15rem;
-}
-
-.circuito_abilitato {
-  background-color: green;
-  color: green;
-  margin-right: 4px;
-  padding: 2px;
-  font-weight: bold;
-}
-
-.circuito_fase_2 {
-  background-color: orange;
-  color: white;
-  margin-right: 4px;
-  padding: 2px;
-  font-weight: bold;
-}
-
-.circuito_in_creazione {
-  background-color: blue;
-  color: white;
-  margin-right: 4px;
-  padding: 2px;
-  font-weight: bold;
-}
-
-.q-pa-xxs {
-  padding: 2px 2px;
-}
-
-.q-pa-sm2 {
-  padding: 12px 12px;
-}
-
-.carousel_img_3 {
-  background-size: cover !important;
-  background-position: 50% center !important;
-  background-repeat: no-repeat !important;
-}
-
-.poster_shadows {
-  border-radius: 30px;
-  background: #1729ea;
-  background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
-  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
-}
-
-.chip_shadow {
-  border-radius: 20px;
-  background: #1729ea;
-  background: -webkit-linear-gradient(45deg, #1e90ff, #3742fa) !important;
-  /* A combination of lighter blues */
-  background: linear-gradient(45deg, #3a90e7, #8e92e4) !important;
-  box-shadow: 1px 1px 3px #5f6f8b;
-  color: #ffffff;
-  /* Ensure the text is white for better contrast */
-}
-
-.last_access {
-  opacity: 0.7;
-  margin-top: -10px;
-  color: white;
-  z-index: 100;
-  margin-bottom: 5px;
-  padding: 5px;
-  border-radius: 20px;
-  background: #109d3b;
-  background: -webkit-linear-gradient(45deg, #0a7e23, #0c28b8) !important;
-  background: linear-gradient(45deg, #0a7e23, #0c28b8) !important;
-}
-
-.duration-2s {
-  transition-duration: 5s !important;
-}
-
-.duration-3s {
-  transition-duration: 3s !important;
-}
-
-.duration-4s {
-  transition-duration: 4s !important;
-}
-
-.duration-5s {
-  transition-duration: 5s !important;
 }
 
+// ============================================
+// 35. ANIMATIONS
+// ============================================
+// Fade
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .fade-enter-from,
+.fade-enter,
 .fade-leave-to {
   opacity: 0;
 }
 
+// Slide
+.slide-enter-active {
+  animation: slide-in 0.2s ease-out forwards;
+}
+
+.slide-leave-active {
+  animation: slide-out 0.5s ease-out forwards;
+}
+
+@keyframes slide-in {
+  from { transform: translateX(-500px); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-out {
+  from { transform: translateX(0); }
+  to { transform: translateX(1600px); }
+}
+
+// Accordion
 .accordion-enter-active,
 .accordion-leave-active {
   transition: max-height 0.3s ease;
 }
 
 .accordion-enter,
-.accordion-leave-to
-
-/* .accordion-leave-active nella versione 2.1.8 e precedenti */
-  {
+.accordion-leave-to {
   max-height: 0;
   overflow: hidden;
 }
@@ -1608,13 +2015,13 @@ h3 {
 .accordion-enter-to,
 .accordion-leave {
   max-height: 500px;
-  /* Imposta a quanto vuoi che si espanda */
 }
 
 .accordion-content {
   overflow: hidden;
 }
 
+// From Sky
 .fromsky-enter-active,
 .fromsky-leave-active {
   transition: opacity 2s ease;
@@ -1629,6 +2036,7 @@ h3 {
   opacity: 0;
 }
 
+// Move animations
 .anim_toBottom {
   animation: moveToBottom 2s ease-in-out;
 }
@@ -1638,234 +2046,100 @@ h3 {
 }
 
 @keyframes moveToRight {
-  0% {
-    transform: translateX(-300px);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
+  from { transform: translateX(-300px); }
+  to { transform: translateX(0); }
 }
 
 @keyframes moveToBottom {
-  0% {
-    transform: translateY(-100px);
-  }
+  from { transform: translateY(-100px); }
+  to { transform: translateY(0); }
+}
 
-  100% {
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
 
-
-.film,
-.effect {
-  width: 100%;
-  height: 100%;
-  filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
-.film:after,
-.effect:after {
-  content: '';
-  width: 120%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  padding-left: 100px;
-  opacity: 0.5;
-  animation: film-scratch 0.45s steps(1) infinite;
-  background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
-}
-
-.effect:after {
-  left: 30%;
-  animation: effect-scratch 2s infinite;
-}
-
-.grain {
-  width: 100%;
-  height: 100%;
-}
-
-.grain:after {
-  content: '';
-  width: 110%;
-  height: 110%;
-  top: -5%;
-  left: -5%;
-  opacity: .25;
-  background-image:
-    repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
-    repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
-  animation: grain 0.5s steps(1) infinite;
-  filter: drop-shadow(0px 0px 1px black);
-}
-
-@keyframes grain {
-
-  0%,
-  100% {
-    transform: translate(0, 0);
+// Fade In Up
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  10% {
-    transform: translate(-1%, -1%);
-  }
-
-  20% {
-    transform: translate(1%, 1%);
-  }
-
-  30% {
-    transform: translate(-2%, -2%);
-  }
-
-  40% {
-    transform: translate(3%, 3%);
-  }
-
-  50% {
-    transform: translate(-3%, -3%);
-  }
-
-  60% {
-    transform: translate(4%, 4%);
-  }
-
-  70% {
-    transform: translate(-4%, -4%);
-  }
-
-  80% {
-    transform: translate(2%, 2%);
-  }
-
-  90% {
-    transform: translate(-3%, -3%);
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-@keyframes film-scratch {
-
-  0%,
-  100% {
+@keyframes slideInFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+  to {
+    opacity: 1;
     transform: translateX(0);
-    opacity: 0.5;
-  }
-
-  10% {
-    transform: translateX(-1%);
-  }
-
-  20% {
-    transform: translateX(1%);
-  }
-
-  30% {
-    transform: translateX(-2%);
-    opacity: 0.75;
-  }
-
-  40% {
-    transform: translateX(3%);
-  }
-
-  50% {
-    transform: translateX(-3%);
-    opacity: 0.5;
-  }
-
-  60% {
-    transform: translateX(8%);
-  }
-
-  70% {
-    transform: translateX(-3%);
-  }
-
-  80% {
-    transform: translateX(10%);
-    opacity: 0.25;
-  }
-
-  90% {
-    transform: translateX(-2%);
   }
 }
 
-@keyframes effect-scratch {
-  0% {
+@keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
     transform: translateX(0);
-    opacity: 0.75;
-  }
-
-  10% {
-    transform: translateX(-1%);
-  }
-
-  20% {
-    transform: translateX(1%);
-  }
-
-  30% {
-    transform: translateX(-2%);
-  }
-
-  40% {
-    transform: translateX(3%);
-  }
-
-  50% {
-    transform: translateX(-3%);
-    opacity: 0.5;
-  }
-
-  60% {
-    transform: translateX(8%);
-  }
-
-  70% {
-    transform: translateX(-3%);
-  }
-
-  80% {
-    transform: translateX(10%);
-    opacity: 0.25;
-  }
-
-  90% {
-    transform: translateX(20%);
-  }
-
-  100% {
-    transform: translateX(30%);
   }
 }
 
-/**** OLD FILM EFFECT END ****/
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 
+// Animation utility classes
+.fade-in-up { animation: fadeInUp 0.4s ease; }
+.slide-in-from-left { animation: slideInFromLeft 0.4s ease; }
+.slide-in-from-right { animation: slideInFromRight 0.4s ease; }
+.scale-in { animation: scaleIn 0.3s ease; }
+
+// Zoom Image
 @keyframes zoomImg {
   0% {
     transform: translate(-75%, 10%) scale(1.5);
     opacity: 0.6;
   }
-
   20% {
     transform: translate(-15%, 10%) scale(1.5);
     opacity: 1;
   }
-
   50% {
     transform: translate(-15%, 25%) scale(1.4);
     opacity: 1;
   }
-
   80% {
     transform: translate(-65%, 25%) scale(1.4);
     opacity: 1;
   }
-
   100% {
     transform: translate(-75%, 10%) scale(1.5);
     opacity: 0.6;
@@ -1876,99 +2150,278 @@ h3 {
   animation: zoomImg 20s linear infinite;
 }
 
-.animate__animated.animate__slow3 {
-  -webkit-animation-duration: calc(1s * 3);
-  animation-duration: calc(1s * 3);
-  -webkit-animation-duration: calc(var(--animate-duration) * 3);
-  animation-duration: calc(var(--animate-duration) * 3);
+// Duration modifiers
+.duration-2s { transition-duration: 2s !important; }
+.duration-3s { transition-duration: 3s !important; }
+.duration-4s { transition-duration: 4s !important; }
+.duration-5s { transition-duration: 5s !important; }
+
+// Animate.css extensions
+.animate__animated {
+  &.animate__slow3 { animation-duration: calc(var(--animate-duration, 1s) * 3); }
+  &.animate__slow4 { animation-duration: calc(var(--animate-duration, 1s) * 4); }
+  &.animate__slow5 { animation-duration: calc(var(--animate-duration, 1s) * 5); }
+  &.animate__slow10 { animation-duration: calc(var(--animate-duration, 1s) * 10); }
+  &.animate__slow20 { animation-duration: calc(var(--animate-duration, 1s) * 20); }
+  &.animate__slow30 { animation-duration: calc(var(--animate-duration, 1s) * 30); }
+  &.animate__slow50 { animation-duration: calc(var(--animate-duration, 1s) * 50); }
+  
+  &.animate__ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  &.animate__linear { transition-timing-function: linear; }
+  &.animate__ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+  &.animate__ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+  &.animate__ease { transition-timing-function: ease; }
 }
 
-.animate__animated.animate__slow4 {
-  -webkit-animation-duration: calc(1s * 4);
-  animation-duration: calc(1s * 4);
-  -webkit-animation-duration: calc(var(--animate-duration) * 4);
-  animation-duration: calc(var(--animate-duration) * 4);
+.animazione {
+  animation-duration: 2s;
+  animation-fill-mode: both;
 }
 
-.animate__animated.animate__slow5 {
-  -webkit-animation-duration: calc(1s * 5);
-  animation-duration: calc(1s * 5);
-  -webkit-animation-duration: calc(var(--animate-duration) * 5);
-  animation-duration: calc(var(--animate-duration) * 5);
+.anim1 {
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
 }
 
-.animate__animated.animate__slow10 {
-  -webkit-animation-duration: calc(1s * 10);
-  animation-duration: calc(1s * 10);
-  -webkit-animation-duration: calc(var(--animate-duration) * 10);
-  animation-duration: calc(var(--animate-duration) * 10);
+// ============================================
+// 36. FILM EFFECTS
+// ============================================
+.film,
+.effect {
+  width: 100%;
+  height: 100%;
+  filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
+  
+  &:after {
+    content: '';
+    width: 120%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding-left: 100px;
+    opacity: 0.5;
+    animation: film-scratch 0.45s steps(1) infinite;
+    background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
+  }
 }
 
-.animate__animated.animate__slow20 {
-  -webkit-animation-duration: calc(1s * 20);
-  animation-duration: calc(1s * 20);
-  -webkit-animation-duration: calc(var(--animate-duration) * 20);
-  animation-duration: calc(var(--animate-duration) * 20);
+.effect:after {
+  left: 30%;
+  animation: effect-scratch 2s infinite;
 }
 
-.animate__animated.animate__slow30 {
-  -webkit-animation-duration: calc(1s * 30);
-  animation-duration: calc(1s * 30);
-  -webkit-animation-duration: calc(var(--animate-duration) * 30);
-  animation-duration: calc(var(--animate-duration) * 30);
+.grain {
+  width: 100%;
+  height: 100%;
+  
+  &:after {
+    content: '';
+    width: 110%;
+    height: 110%;
+    top: -5%;
+    left: -5%;
+    opacity: 0.25;
+    background-image:
+      repeating-conic-gradient(var(--black, #000) 0%, transparent 0.00003%, transparent 0.0005%, transparent 0.00095%),
+      repeating-conic-gradient(var(--black, #000) 0%, transparent 0.00005%, transparent 0.00015%, transparent 0.0009%);
+    animation: grain 0.5s steps(1) infinite;
+    filter: drop-shadow(0px 0px 1px black);
+  }
 }
 
-.animate__animated.animate__slow50 {
-  -webkit-animation-duration: calc(1s * 50);
-  animation-duration: calc(1s * 50);
-  -webkit-animation-duration: calc(var(--animate-duration) * 50);
-  animation-duration: calc(var(--animate-duration) * 50);
+@keyframes grain {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-1%, -1%); }
+  20% { transform: translate(1%, 1%); }
+  30% { transform: translate(-2%, -2%); }
+  40% { transform: translate(3%, 3%); }
+  50% { transform: translate(-3%, -3%); }
+  60% { transform: translate(4%, 4%); }
+  70% { transform: translate(-4%, -4%); }
+  80% { transform: translate(2%, 2%); }
+  90% { transform: translate(-3%, -3%); }
 }
 
-.animate__animated.animate__ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+@keyframes film-scratch {
+  0%, 100% { transform: translateX(0); opacity: 0.5; }
+  10% { transform: translateX(-1%); }
+  20% { transform: translateX(1%); }
+  30% { transform: translateX(-2%); opacity: 0.75; }
+  40% { transform: translateX(3%); }
+  50% { transform: translateX(-3%); opacity: 0.5; }
+  60% { transform: translateX(8%); }
+  70% { transform: translateX(-3%); }
+  80% { transform: translateX(10%); opacity: 0.25; }
+  90% { transform: translateX(-2%); }
 }
 
-.animate__animated.animate__linear {
-  transition-timing-function: linear;
+@keyframes effect-scratch {
+  0% { transform: translateX(0); opacity: 0.75; }
+  10% { transform: translateX(-1%); }
+  20% { transform: translateX(1%); }
+  30% { transform: translateX(-2%); }
+  40% { transform: translateX(3%); }
+  50% { transform: translateX(-3%); opacity: 0.5; }
+  60% { transform: translateX(8%); }
+  70% { transform: translateX(-3%); }
+  80% { transform: translateX(10%); opacity: 0.25; }
+  90% { transform: translateX(20%); }
+  100% { transform: translateX(30%); }
 }
 
-.animate__animated.animate__ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+// ============================================
+// 37. UTILITY CLASSES
+// ============================================
+// Spacing
+.q-pa-xxs { padding: 2px; }
+.q-pa-sm2 { padding: 12px; }
+.q-mx-xxs { margin: 0 2px; }
+.q-mx-xxs-left { margin-left: 2px; }
+.padding_cell { padding: 0.75rem 0.5rem; }
+.padding-bott { padding-bottom: 50px; }
+.no-padding { padding: 0 !important; }
+.margin_buttons {
+  margin: -8px;
+  
+  > * {
+    margin: 12px !important;
+  }
 }
 
-.animate__animated.animate__ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+// Display
+.hide-if-small {
+  @media (max-width: $breakpoint-xs) {
+    display: none;
+  }
 }
 
-.animate__animated.animate__ease {
-  transition-timing-function: ease;
+.thiny-if-small {
+  @media (max-width: $breakpoint-xs) {
+    max-width: 22px;
+  }
 }
 
-.buttreg {
+.small-screen-only {
+  display: none;
+  
+  @media (max-width: $breakpoint-xs) {
+    display: block;
+  }
+}
+
+.large-screen-only {
+  display: block;
+  
+  @media (max-width: $breakpoint-xs) {
+    display: none;
+  }
+}
+
+// Text
+.wrapword { overflow-wrap: break-word; }
+.wrap_anywhere { overflow-wrap: anywhere; }
+.uppercase { text-transform: uppercase; }
+.lineheight-normal { line-height: normal !important; }
+
+// Misc
+.cursor-pointer { cursor: pointer; }
+.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.fill-all-width { width: -webkit-fill-available; }
+.semi-transparent { opacity: 0.7; }
+.text-trans {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+
+.text-spacetrans {
+  padding: 0 !important;
+  background: rgba(0, 0, 0, 0.3) !important;
+  border-radius: 30px !important;
+}
+
+.custom-z-index { z-index: 2000 !important; }
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+// ============================================
+// 38. FLAGS
+// ============================================
+.fa-flag-it::before { content: url('/svg/flag_it.svg'); }
+.fa-flag-us::before { content: url('/svg/flag_us.svg'); }
+.fa-flag-es::before { content: url('/svg/flag_es.svg'); }
+.fa-flag-gb::before { content: url('/svg/flag_gb.svg'); }
+.fa-flag-de::before { content: url('/svg/flag_de.svg'); }
+
+// ============================================
+// 39. MISC COMPONENTS
+// ============================================
+.accom_num,
+.accom_maxosp {
+  font-size: 1.25rem;
+  background-color: green;
   font-weight: bold;
+  color: white;
+  margin-right: 10px;
+  padding: 10px;
 }
 
-.semi-transparent {
+.accom_maxosp {
+  background-color: blue !important;
+}
+
+.text-verified {
+  font-size: 1.25rem;
+  text-shadow: 0.05rem 0.05rem 0.15rem #fff;
+  background-color: red;
+  border-radius: 1rem !important;
+  text-align: center;
+  margin: 5px;
+}
+
+.username {
+  font-weight: bold;
+  letter-spacing: 0.025rem;
+  font-style: italic;
+}
+
+.last_access {
   opacity: 0.7;
+  margin-top: -10px;
+  color: white;
+  z-index: 100;
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 20px;
+  background: linear-gradient(45deg, #0a7e23, #0c28b8) !important;
 }
 
-.elem {
-  padding: 0;
+.numfav_text {
+  text-align: center;
+  color: grey;
+  font-size: 0.8rem;
 }
 
-.small_side {
-  padding-left: 4px !important;
+.sezioni {
+  vertical-align: center;
+  padding: 4px;
 }
 
-.selectorwide {
-  min-width: 240px;
-  font-size: 1rem;
-}
-
-.fit_img {
-  max-width: 100%;
-  height: auto;
+.feat-descr {
+  font-size: 1.15rem;
 }
 
 .show_province_title {
@@ -1978,574 +2431,11 @@ h3 {
   color: #A0A0A0;
 }
 
-.buttons_bottom {
-  max-width: 700px !important;
-
-  margin-left: auto;
-  justify-content: space-around;
-  margin-right: auto;
-  text-align: center;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  @media (max-width: 700px) {
-    /* Versione Mobile */
-    max-width: 400px;
-  }
-}
-
-.body--light {
-  .buttons_bottom {
-    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(255, 255, 255, .7)));
-    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 15%)
-  }
-}
-
-.body--dark {
-  .buttons_bottom {
-    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
-    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
-  }
-}
-
-.fulldiv {
-  min-height: 100% !important;
-  max-width: 1024px !important;
-  min-width: 1024px !important;
-
-  @media (max-width: 1024px) {
-    /* Versione Mobile */
-    max-width: 1024px !important;
-    min-width: 300px !important;
-  }
-}
-
-.padding-bott {
-  padding-bottom: 50px;
-}
-
-.visudialog {
-
-  else {
-    width: 700px !important;
-    max-width: 80vw !important;
-    color: red;
-  }
-}
-
-.numfav_text {
-  text-align: center;
-  color: grey;
-  font-size: 0.8rem;
-}
-
-.butt_rounded {
-  border-radius: 12px;
-}
-
-.body--light {
-  .butt_rounded {
-    background-color: rgb(234, 241, 244);
-  }
-}
-
-.body--dark {
-  .butt_rounded {
-    background-color: black;
-  }
-}
-
-.q-mx-xxs-left {
-  margin-left: 2px;
-}
-
-.q-mx-xxs {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
-.butt_green {
-  background-color: rgb(202, 232, 202) !important;
-}
-
-.ev_dayofweek {
-  color: grey;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  text-align: center;
-  margin-bottom: -4px;
-}
-
-.ev_day {
-  color: black;
-  font-size: 1.25rem;
-  font-weight: bold;
-  text-align: center;
-}
-
-.ev_month {
-  color: black;
-  font-size: 1rem;
-  text-align: center;
-}
-
-.ev_hour,
-.ev_hour_end {
-  color: black;
-  font-size: 0.85rem;
-  text-align: center;
-}
-
-.ev_hour {
-  color: green;
-}
-
-.ev_hour_end {
-  color: red;
-}
-
-.col-105 {
-  height: auto;
-  width: 90%;
-}
-
-.col-15 {
-  height: auto;
-  width: 10%;
-}
-
-.lineheight-normal {
-  line-height: normal !important;
-}
-
 .clDescrEstesa {
   font-size: 1rem;
   line-height: normal !important;
 }
 
-.aspect-ratio-box {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%;
-  max-width: 800px;
-  /* Limita la larghezza massima */
-  margin: 0 auto;
-  /* Centra il video orizzontalmente */
-
-  /* 16:9 Aspect Ratio */
-}
-
-.aspect-ratio-box iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  /* Rimuovi eventuali bordi */
-}
-
-.fake-link {
-  font-weight: bold;
-
-  @media (max-width: 600px) {
-    color: #1976D2;
-    text-decoration: underline !important;
-    cursor: pointer;
-  }
-}
-
-.fake-link:hover {
-  color: #0D47A1;
-}
-
-.fixed-toggle {
-  position: absolute;
-  /* Posizionamento fisso */
-  top: 60px;
-  /* Distanza dal bordo superiore */
-  left: 20px;
-  /* Distanza dal bordo sinistro */
-  z-index: 1000;
-  /* Assicurati che sia sopra gli altri elementi */
-}
-
-.btn-edit-floating {
-  position: relative;
-  top: 4px;
-  right: 0px;
-  z-index: 10;
-  opacity: 0.5;
-  transition: opacity 0.3s ease;
-}
-
-.btn-edit-floating:hover {
-  opacity: 1;
-}
-
-.marker-mini-icon {
-  position: absolute;
-  top: 5px;
-  left: 9px;
-  font-size: 20px;
-}
-
-.marker-circle {
-  position: absolute;
-  /* Posizionamento assoluto */
-  top: 15px;
-  /* Centra verticalmente */
-  left: 50%;
-  /* Centra orizzontalmente */
-  width: 24px;
-  /* Dimensione del cerchio */
-  height: 24px;
-  /* Dimensione del cerchio */
-  background-color: white;
-  /* Colore bianco del cerchio */
-  border-radius: 50%;
-  /* Rende il cerchio rotondo */
-  transform: translate(-50%, -50%);
-  /* Centra esattamente il cerchio */
-  z-index: 0;
-  /* Assicurati che sia sotto l'icona principale */
-}
-
-.marker-shadow {
-  width: 40px;
-  /* Dimensione dell'ombra, dovrebbe corrispondere all'icona principale */
-  height: 40px;
-  /* Dimensione dell'ombra */
-  position: absolute;
-  /* Posizionamento assoluto per posizionarla correttamente */
-  top: 3px;
-  /* Allineata sopra */
-  left: 8px;
-  /* Allineata a sinistra */
-  z-index: -10;
-  /* Assicurati che l'ombra sia sotto */
-  opacity: 1;
-  /* L'opacità dell'ombra per un effetto realistico */
-}
-
-.custom-icon .material-icons {
-  position: absolute;
-  /* Posizionamento assoluto per centrare */
-  top: 50%;
-  /* Posizionamento verticale */
-  left: 50%;
-  /* Posizionamento orizzontale */
-  transform: translate(-50%, -50%);
-  /* Centra l'icona */
-  font-size: 40px;
-  /* Dimensione dell'icona 20x20 */
-  color: blue;
-  /* Colore dell'icona (puoi cambiarlo) */
-}
-
-.current-location-icon {
-  background-color: #4A89F3;
-  border: 3px solid #FFFFFF;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px #4A89F3;
-}
-
-.current-location-icon::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 50%;
-  height: 50%;
-  background-color: #FFFFFF;
-  border-radius: 50%;
-  opacity: 0.4;
-}
-
-.q-dialog-on-top {
-  align-self: flex-start !important;
-}
-
-.no-padding-dialog .q-dialog__inner {
-  padding: 0 !important;
-  /* Rimuove il padding dal dialog */
-}
-
-.custom-zoom-button {
-  background-color: white;
-  border: 2px solid #007bff;
-  /* Colore del bordo */
-  border-radius: 4px;
-  padding: 5px 10px;
-  cursor: pointer;
-  margin-top: 10px;
-  /* Spaziatura dal bordo superiore */
-  z-index: 1000;
-  /* Assicurati che appaia sopra altri controlli */
-}
-
-.custom-zoom-button:hover {
-  background-color: #007bff;
-  /* Colore di sfondo al passaggio del mouse */
-  color: white;
-  /* Colore del testo al passaggio del mouse */
-}
-
-.barretta-sep {
-  background-color: #dadce0;
-  border-radius: 2px;
-  height: 4px;
-  width: 100%;
-}
-
-.fixed-button {
-  position: fixed;
-  bottom: 16px;
-  /* Distanza dal fondo */
-  right: 16px;
-  /* Distanza dal lato */
-  z-index: 1000;
-  /* Opzionale: assicura che il bottone sia sopra altri elementi */
-}
-
-.fixed-button2 {
-  position: fixed;
-  bottom: 16px;
-  /* Distanza dal fondo */
-  right: 120px;
-  /* Distanza dal lato */
-  z-index: 1000;
-  /* Opzionale: assicura che il bottone sia sopra altri elementi */
-}
-
-.text-blueviolet {
-  color: blueviolet;
-}
-
-$verde: #008000;
-$blu: blue;
-$rosso: #ff0000;
-$trasparenza: 0.15;
-$coloreprincipale: lightblue;
-
-.sfondo_gradiente_blu {
-  background: linear-gradient(180deg, rgba(0, 70, 255, 0.25), rgba(0, 70, 275, 0.55), rgba(0, 70, 255, 0.75)) !important;
-}
-
-.sfondo_gradiente_fuchsia {
-  background: linear-gradient(180deg, rgba(255, 0, 150, 0.25), rgba(255, 0, 150, 0.55), rgba(255, 0, 150, 0.75)) !important;
-}
-
-.sfondo_gradiente_verde {
-  background: linear-gradient(180deg, rgba(12, 181, 12, 0.852)rgba(4, 185, 4, 0.55), rgba(12, 181, 12, 0.852)) !important;
-}
-
-.sfondo_trasparente {
-  background: rgba(0, 0, 0, 0.05) !important;
-}
-
-.sfondo_gradiente_arancione {
-  background: linear-gradient(180deg, rgba(255, 165, 0, 0.25), rgba(255, 165, 0, 0.55), rgba(255, 165, 0, 0.75)) !important;
-}
-
-.sfondo_gradiente_giallo {
-  background: linear-gradient(180deg, rgba(255, 255, 0, 0.25), rgba(255, 255, 0, 0.55), rgba(255, 255, 0, 0.75)) !important;
-}
-
-.sfondo_gradiente_rosso {
-  background: linear-gradient(180deg,
-      rgba(color.channel($rosso, "red", $space: rgb),
-        color.channel($rosso, "green", $space: rgb),
-        color.channel($rosso, "blue", $space: rgb),
-        $trasparenza ),
-      $coloreprincipale,
-      rgba(color.channel($rosso, "red", $space: rgb),
-        color.channel($rosso, "green", $space: rgb),
-        color.channel($rosso, "blue", $space: rgb),
-        $trasparenza )) !important;
-}
-
-.card-carousel-container {
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.card-carousel {
-  display: flex;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  padding: 1rem 0;
-}
-
-.card-carousel .row.no-wrap {
-  flex-wrap: nowrap !important;
-  /* solo dentro il carousel */
-}
-
-.card-carousel::-webkit-scrollbar {
-  display: none;
-}
-
-.my-card-elem {
-  flex: 0 0 auto;
-  margin-right: 1rem;
-  scroll-snap-align: start;
-  overflow: hidden;
-  transition: transform 0.3s ease;
-}
-
-.cards-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.card-item {
-  display: flex;
-  flex-direction: column;
-  max-width: 200px;
-  /* Massima larghezza per la card */
-  margin: 0 10px;
-  /* Spazio tra le card */
-  text-align: center;
-}
-
-.flex-container {
-  display: flex;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  height: 100%;
-  /*padding: 0.5rem;*/
-}
-
-.flex-card {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
-  margin: 0 0.5rem;
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-/* Aggiungi questi stili per gestire lo scroll orizzontale se necessario */
-.q-carousel__slide {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-}
-
-.row.no-wrap {
-  flex-wrap: nowrap;
-  min-width: 0;
-  /* consenti ai figli di restringersi */
-  // gap: 1rem;
-}
-
-.card-width-200 {
-  width: 100%;
-  max-width: 200px;
-}
-
-.card-width-250 {
-  width: 100%;
-  max-width: 250px;
-}
-
-.my-card-elem:hover {
-  transform: scale(1.05);
-}
-
-.img-container {
-  /*height: 150px; */
-  overflow: hidden;
-}
-
-.img-container .q-img {
-  height: 100%;
-  object-fit: contain;
-}
-
-.swipe-indicator {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.5);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: opacity 0.3s ease;
-}
-
-.swipe-indicator.left {
-  left: 10px;
-}
-
-.swipe-indicator.right {
-  right: 10px;
-}
-
-.scroll-indicator {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #ccc;
-  margin: 0 4px;
-  transition: background-color 0.3s ease;
-}
-
-.dot.active {
-  background-color: #000;
-}
-
-.image-circle {
-  border-radius: 50%;
-  /* Rende l'immagine rotonda */
-  object-fit: cover;
-  /* Mantiene le proporzioni dell'immagine */
-  overflow: hidden;
-  /* Nasconde eventuali parti in eccesso */
-}
-
-.image-ombra {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-.image-round-bordered {
-  border-radius: 22px;
-
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-  object-fit: cover;
-
-  border: 2px solid #6b6e68a1;
-}
-
-/* Per aggiungere un effetto di transizione al passaggio del mouse */
-.image-round-bordered:hover {
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
-  /* Ombra più marcata al passaggio del mouse */
-  transform: scale(1.05);
-  /* Effetto di zoom al passaggio del mouse */
-  transition: all 0.3s ease;
-  /* Transizione fluida */
-}
-
 .titolo_card:hover {
   color: blue;
   text-decoration: underline;
@@ -2555,617 +2445,147 @@ $coloreprincipale: lightblue;
 .mylabfooter img {
   border-radius: 50%;
   object-fit: cover;
-
 }
 
-:root {
-  --background-even-light: rgba(211, 211, 211, 0.3);
-  --background-odd-light: white;
-  --background-even-dark: rgba(45, 45, 45, 0.7);
-  /* Aggiustare per il tema dark */
-  --background-odd-dark: rgba(30, 30, 30, 1);
-  /* Aggiustare per il tema dark */
-  --text-color: #555;
-  --bg-color: #f9f9f9;
+// Responsive heights
+.myclimg,
+.maxwidth {
+  @media (max-width: 3000px) { height: 750px !important; }
+  @media (max-width: $breakpoint-lg) { height: 700px !important; }
+  @media (max-width: 1000px) { height: 650px !important; }
+  @media (max-width: 800px) { height: 550px !important; }
+  @media (max-width: 700px) { height: 400px !important; }
+  @media (max-width: $breakpoint-xs) { height: 400px !important; }
 }
 
-body.body--dark {
-  --text-color: #bbb;
-  --bg-color: #333;
+.maxwidth {
+  max-width: 1200px !important;
 }
 
-.background-even {
-  background-color: rgba(211, 211, 211, 0.3);
+// Typography responsive classes
+.cltexth2,
+.cltexth3,
+.cltexth4,
+.cltexth5,
+.cltexth6 {
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: 0.01em;
+  text-align: center !important;
 }
 
-.background-odd {
-  background-color: white;
+.cltexth2 { font-size: 1.5rem; }
+.cltexth3 { font-size: 1.25rem; }
+.cltexth4 { font-size: 1.15rem; }
+.cltexth5 { font-size: 1rem; }
+.cltexth6 { font-size: 0.75rem; }
 
-  @media (prefers-color-scheme: dark) {
-    background-color: rgba(140, 140, 140, 0.3);
+.text-h5-diff {
+  @media (max-width: $breakpoint-xs) {
+    font-size: 1.25rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+    letter-spacing: normal;
   }
 }
 
-.q-stepper__tab {
-  padding: 3px 3px !important;
+.text-h7-dense {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: normal;
 }
 
-.q-stepper--horizontal .q-stepper__step-inner {
-  padding: 16px !important;
-
-  @media (max-width: 600px) {
-    padding: 8px !important;
-  }
+.boldhigh,
+.boldop,
+.text-big {
+  font-weight: 500;
+  text-shadow: 0.05rem 0.05rem 0.05rem $gray-shadow;
 }
 
-.dialog_class {
-  max-width: 800px;
-  width: 100%;
-
-  @media (max-width: 600px) {
-    max-width: 100%;
-  }
+.boldop {
+  color: darkblue;
 }
 
-.citation {
-  font-style: italic;
-  /* Testo in corsivo per indicare una citazione */
-  border-left: 4px solid #cccccc;
-  /* Barra verticale per evidenziare la citazione */
-  margin: 10px 0;
-  /* Spaziatura verticale */
-  padding: 10px 20px;
-  /* Spaziatura interna */
-  color: #555555;
-  /* Colore del testo leggermente attenuato */
-  background-color: #f9f9f9;
-  /* Sfondo leggero per evidenziare la citazione */
+.myshadow {
+  text-shadow: 0.05rem 0.05rem 0.1rem $gray-shadow;
+  font-weight: bold;
 }
 
-.comment {
-  font-size: 0.9em;
-  /* Testo leggermente più piccolo */
-  color: #666666;
-  /* Colore del testo attenuato */
-  background-color: #f4f4f4;
-  /* Sfondo neutro */
-  padding: 10px;
-  /* Spaziatura interna */
-  border-radius: 5px;
-  /* Angoli arrotondati */
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  /* Leggera ombra per effetto di profondità */
-  margin: 10px 0;
-  /* Spaziatura verticale */
+.shadow-max {
+  text-shadow: 0.25rem 0.25rem 0.5rem $gray-shadow;
 }
 
-.flex-container-book {
-  display: flex;
-  flex-direction: row;
-  /* Allineamento orizzontale */
-  flex-wrap: wrap;
-  gap: 0px;
-  /* Spaziatura tra gli elementi */
-  justify-content: space-evenly;
+.myh4 {
+  font-size: 1.25rem;
+  color: red;
+  line-height: 125%;
 }
 
-.flex-item-book {
-  display: flex;
-  /* Rende il div un container flex per allineare i contenuti */
-  justify-content: center;
-  /* Allineamento orizzontale al centro */
-  align-items: center;
-  /* Allineamento verticale al centro */
-  padding: 0px;
-  flex-grow: 0;
-  /* Opzionale: permette agli elementi di crescere uniformemente */
+// Column widths
+.col-105 {
+  height: auto;
+  width: 90%;
 }
 
+.col-15 {
+  height: auto;
+  width: 10%;
+}
+
+// Iconplus minus
+.iconplusminus { font-size: 6px; }
+.clpos { color: #C0C0C0; }
+.clresp { color: #206d24; }
+.clrespempty { color: #DDDDDD; }
+.elem { padding: 0; }
+.small_side { padding-left: 4px !important; }
+
+// Card page break
 .card-page {
   break-after: page;
   page-break-after: always;
+  
+  &::after {
+    content: '';
+    display: block;
+    page-break-after: always;
+  }
 }
 
-.card-page::after {
-  content: '';
-  display: block;
-  page-break-after: always;
-}
-
-.card-row {
-  display: flex;
-  justify-content: center;
-  flex-direction: column !important;
-}
-
-.cards-container {
-  display: flex;
-  flex-direction: column !important;
-}
-
-.sfondo_print {
-  background-color: #17ead9;
-}
-
-.sfondo_margine {
-  background-color: #d8f38a;
-}
-
-.q-card-section-small {
-  padding: 0px;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.custom-z-index {
-  z-index: 2000 !important;
-}
-
-.mybadge {
-  border-radius: 10px !important;
-  text-shadow: .05rem .05rem .15rem #878787;
-}
-
-.no-print {
-  // display: none !important;
-}
-
+// Macro junior
 .macro-junior {
   font-family: 'Comic Sans MS', cursive, sans-serif;
   font-size: 12px;
   color: #ccc;
   line-height: 1.3;
-}
-
-.macro-junior h2 {
-  font-style: italic;
-  font-weight: bold;
-  margin: 0 0 6px 0;
-  font-size: 16px;
-}
-
-.macro-junior p {
-  margin: 0 0 8px 0;
-}
-
-.macro-junior blockquote {
-  font-style: italic;
-  font-weight: bold;
-  margin: 6px 0;
-  padding-left: 12px;
-  border-left: 3px solid #333;
-  color: #ccc;
-  font-size: 12px;
-  line-height: 1.3;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.7);
-  /* Sfondo semi-trasparente */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-.text-strike {
-  text-decoration-line: line-through;
-}
-
-.product-price-discount {
-  font-weight: 500;
-  line-height: 1.2;
-  font-size: 1rem;
-  color: #f60;
-  margin-bottom: 5px;
-}
-
-.ordine_scontato_nuovo {
-  font-size: 1.1rem;
-  font-weight: bold;
-  color: green;
-  background-image: linear-gradient(to right, #d5ffd5, #dfff06);
-  /* gradiente di sfondo che va bene con il colore green per il testo */
-  padding: 6px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.ordine_scritta_sconto {
-  font-size: 1rem;
-  color: red;
-  background-color: #fff5ee;
-  /* seashell color background */
-  padding: 2px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-
-.center-button {
-  display: flex;
-  justify-content: center;
-}
-
-.sconto-label {
-  font-weight: bold;
-  margin-left: 5px;
-}
-
-.sconto-text {
-  font-weight: bold;
-  font-size: 1rem;
-}
-
-.table-price {
-  margin: auto;
-  border-collapse: collapse;
-}
-
-.table-price td {
-  padding: 8px;
-  text-align: right;
-  vertical-align: middle;
-}
-
-.label-price {
-  font-weight: bold;
-}
-
-.value-price {
-  font-size: 1.2em;
-  text-align: right;
-}
-
-.ordine_scontato {
-  color: gray;
-  font-size: 0.85rem;
-}
-
-.hero {
-  position: relative;
-  border-radius: 20px;
-  overflow: hidden;
-  text-align: center;
-  padding: 40px 20px;
-  color: white;
-
-  // Altezza minima per evitare il collassamento
-  min-height: 400px;
-
-  // Centra il contenuto verticalmente
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  // Background: immagine + overlay
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5); // overlay scuro
-    z-index: 1;
-    border-radius: 20px;
+  
+  h2 {
+    font-style: italic;
+    font-weight: bold;
+    margin: 0 0 6px;
+    font-size: 16px;
+  }
+  
+  p {
+    margin: 0 0 8px;
+  }
+  
+  blockquote {
+    font-style: italic;
+    font-weight: bold;
+    margin: 6px 0;
+    padding-left: 12px;
+    border-left: 3px solid #333;
+    color: #ccc;
+    font-size: 12px;
+    line-height: 1.3;
   }
 }
 
-.hero-content {
-  position: relative;
-  z-index: 2; // sopra l'overlay
-  max-width: 800px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.intro {
-  font-size: 1.3rem;
-  color: #ddd; // testo chiaro, visibile sopra lo sfondo scuro
-  margin-bottom: 1.5rem;
-  font-style: italic;
-}
-
-.cta {
-  display: inline-block;
-  margin-top: 1rem;
-  padding: 14px 28px;
-  background-color: #4caf50;
-  color: white;
-  border-radius: 50px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
-  align-self: center; // centrato in flex-column
-
-  &:hover {
-    background-color: #388e3c;
-    transform: translateY(-2px);
-    box-shadow: 0 6px 14px rgba(76, 175, 80, 0.4);
-  }
-}
-
-// Stili aggiuntivi per la pagina
-.containerhome {
-  background: white;
-  border-radius: 18px;
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09);
-  padding: 32px;
-  margin-bottom: 32px;
-  transition: transform 0.2s ease;
-}
-
-.containerhome:hover {
-  transform: translateY(-4px);
-}
-
-.container {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s ease;
-}
-
-.toggle-enhanced {
-  /* Per migliorare contrasto dello stato OFF */
-  --q-toggle-thumb-color: var(--q-color-grey-4);
-  --q-toggle-track-color: rgba(255, 255, 255, 0.2);
-
-  &.q-toggle--dark {
-    --q-toggle-thumb-color: var(--q-color-grey-5);
-    --q-toggle-track-color: rgba(255, 255, 255, 0.25);
-  }
-
-  /* Colore quando attivo */
-  &.q-toggle--truthy {
-    --q-toggle-thumb-color: var(--q-color-green);
-    --q-toggle-track-color: rgba(0, 150, 0, 0.5);
-  }
-
-  /* Migliora leggibilità dell’etichetta */
-  .q-toggle__label {
-    font-weight: 500;
-    font-size: 0.9rem;
-    color: var(--q-color-grey-10);
-    margin-left: 0.5rem;
-  }
-
-  /* Hover/focus con leggero bagliore */
-  &:hover:not(.disabled) .q-toggle__inner {
-    filter: drop-shadow(0 0 3px rgba(0, 200, 0, 0.4));
-  }
-
-  /* Quando disabilitato */
-  &.disabled {
-    opacity: 0.6;
-  }
-}
-
-#q-app,
-.q-page,
-.q-page-container {
-  word-break: break-word;
-  overflow-wrap: anywhere;
-}
-
-.card-group-scrollable {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch; // smooth scroll su iOS
-  scrollbar-width: none; // nasconde scrollbar su Firefox
-  -ms-overflow-style: none; // nasconde scrollbar su IE/Edge
-}
-
-.card-group-scrollable::-webkit-scrollbar {
-  display: none; // nasconde scrollbar su WebKit
-}
-
-.flex-card {
-  flex: 0 0 auto !important; // evita che si restringano
-  margin: 0 0.5rem;
-  max-width: none;
-}
-
-.row.no-wrap {
-  min-width: fit-content; // permette alla riga di espandersi oltre il container
-  flex-wrap: nowrap !important;
-}
-
-// ==========================================
-// AGGIUNTE STILE RISO - Da inserire in fondo a app.scss
-// ==========================================
-
-// ==========================================
-// MIGLIORAMENTI GLOBALI BOTTONI QUASAR
-// ==========================================
-.q-btn {
-  &:not(.q-btn--flat):not(.q-btn--outline) {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover:not(.q-btn--disable) {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
-      transform: translateY(-2px);
-    }
-
-    &:active:not(.q-btn--disable) {
-      transform: translateY(0);
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
-    }
-  }
-}
-
-// ==========================================
-// CARD MODERNE CON HOVER
-// ==========================================
-.q-card {
-  border-radius: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  &:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
-  }
-}
-
-// ==========================================
-// INPUT E FORM MODERNI
-// ==========================================
-.q-field {
-  &__control {
-    border-radius: 10px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.02);
-    }
-  }
-
-  &--focused {
-    .q-field__control {
-      box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb), 0.2);
-    }
-  }
-}
-
-// ==========================================
-// DIALOG CON BACKDROP BLUR
-// ==========================================
-.q-dialog__backdrop {
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  background: rgba(0, 0, 0, 0.4);
-}
-
-.q-dialog .q-card {
-  border-radius: 0px;
-}
-
-// ==========================================
-// LISTE CON HOVER MODERNO
-// ==========================================
-.q-list {
-  .q-item {
-    border-radius: 10px;
-    margin-bottom: 2px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    &--active {
-      background: rgba(var(--q-primary-rgb), 0.1);
-      color: var(--q-primary);
-      font-weight: 600;
-    }
-  }
-}
-
-// ==========================================
-// TABS MODERNE
-// ==========================================
-.q-tabs {
-  .q-tab {
-    border-radius: 10px;
-    font-weight: 600;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    &--active {
-      background: rgba(var(--q-primary-rgb), 0.1);
-    }
-  }
-}
-
-// ==========================================
-// BADGE E CHIP MIGLIORATI
-// ==========================================
-.q-badge {
-  border-radius: 12px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-
-.q-chip {
-  border-radius: 16px;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-
-  &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-    transform: translateY(-1px);
-  }
-}
-
-// ==========================================
-// TOOLTIP MIGLIORATI
-// ==========================================
-.q-tooltip {
-  border-radius: 8px;
-  padding: 6px 12px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-}
-
-// ==========================================
-// NOTIFICHE CON SHADOW
-// ==========================================
-.q-notification {
-  border-radius: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
-
-  &__message {
-    font-weight: 500;
-  }
-}
-
-// ==========================================
-// AVATAR CON HOVER
-// ==========================================
-.q-avatar {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-  img {
-    object-fit: cover;
-  }
-
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-
-// ==========================================
-// SEPARATOR PIÙ SOTTILE
-// ==========================================
-.q-separator {
-  background: rgba(0, 0, 0, 0.06);
-}
-
-// ==========================================
-// SCROLLBAR PERSONALIZZATA MODERNA
-// ==========================================
+// ============================================
+// 40. SCROLLBARS
+// ============================================
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -3179,7 +2599,7 @@ body.body--dark {
   background: rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   transition: background 0.3s ease;
-
+  
   &:hover {
     background: rgba(0, 0, 0, 0.25);
   }
@@ -3191,184 +2611,202 @@ body.body--dark {
   scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
 }
 
-// ==========================================
-// DRAWER CON SCROLLBAR PERSONALIZZATA
-// ==========================================
-.q-drawer {
-  .q-drawer__content {
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 3px;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.3);
-      }
-    }
-  }
-}
-
-// ==========================================
-// ANIMAZIONI AGGIUNTIVE
-// ==========================================
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInFromLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInFromRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-// Classi utility per animazioni
-.fade-in-up {
-  animation: fadeInUp 0.4s ease;
-}
-
-.slide-in-from-left {
-  animation: slideInFromLeft 0.4s ease;
-}
-
-.slide-in-from-right {
-  animation: slideInFromRight 0.4s ease;
-}
-
-.scale-in {
-  animation: scaleIn 0.3s ease;
-}
-
-// ==========================================
-// UTILITY CLASSES AGGIUNTIVE
-// ==========================================
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.smooth-transition {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.no-select {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-}
-
-// ==========================================
-// FOCUS ACCESSIBILE
-// ==========================================
+// ============================================
+// 41. FOCUS & ACCESSIBILITY
+// ============================================
 *:focus-visible {
-  outline: 2px solid var(--q-primary);
+  outline: 2px solid var(--q-primary, #1976d2);
   outline-offset: 2px;
   border-radius: 4px;
 }
 
-// ==========================================
-// DARK MODE MIGLIORATO
-// ==========================================
-.body--dark {
-  .q-card {
-    background: #2a2a2a;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+// ============================================
+// 42. PRELOADER
+// ============================================
+@media screen {
+  div#preloader {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    
+    img {
+      display: block;
+    }
   }
+}
 
+@media print {
+  div#preloader,
+  div#preloader img {
+    visibility: hidden;
+    display: none;
+  }
+}
+
+// ============================================
+// 43. DARK MODE
+// ============================================
+.body--dark {
+  
+  // Cards
+  .q-card {
+    background: var(--app-bg-card);
+    box-shadow: var(--app-shadow-sm);
+  }
+  
+  // Lists
   .q-item:hover {
     background: rgba(255, 255, 255, 0.08);
   }
-
+  
+  // Forms
   .q-field__control {
     &:hover {
       background: rgba(255, 255, 255, 0.05);
     }
   }
-
+  
+  // Buttons bottom
+  .buttons_bottom {
+    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 15%);
+  }
+  
+  .butt_rounded {
+    background-color: #1a1a1a;
+  }
+  
+  // Text colors
+  h1 {
+    color: var(--q-primary, #42a5f5);
+  }
+  
+  .text-mycol {
+    color: #e0e0e0 !important;
+  }
+  
+  .ev_day,
+  .ev_month {
+    color: var(--app-text-primary);
+  }
+  
+  // Scrollbar
   ::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
-
+    
     &:hover {
       background: rgba(255, 255, 255, 0.3);
     }
   }
+  
+  // Separator
+  .q-separator {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  
+  // Specific overrides
+  .citation {
+    border-left-color: #555;
+    background-color: var(--app-bg-card);
+    color: var(--app-text-secondary);
+  }
+  
+  .comment {
+    background-color: var(--app-bg-card);
+    color: var(--app-text-muted);
+  }
+  
+  // Dots
+  .dot {
+    background-color: #555;
+    
+    &.active {
+      background-color: #fff;
+    }
+  }
+  
+  // Hero
+  .hero::before {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  
+  // Containers
+  .containerhome,
+  .container {
+    background: var(--app-bg-card);
+  }
+  
+  // Borders
+  .clBorderSmall,
+  .clBorderxs {
+    border-color: #404040;
+  }
+  
+  // Overlay
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
 }
 
-// ==========================================
-// RESPONSIVE - Riduzione spazi mobile
-// ==========================================
-@media (max-width: 600px) {
+// Light mode specific (for buttons_bottom)
+.body--light {
+  .buttons_bottom {
+    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7) 15%);
+  }
+}
+
+// ============================================
+// 44. RESPONSIVE - Mobile Overrides
+// ============================================
+@media (max-width: $breakpoint-xs) {
   .q-card {
     border-radius: 12px;
   }
-
+  
   .q-card__section {
     padding: 12px;
   }
-
+  
   .q-dialog .q-card {
-    border-radius: 0px;
+    border-radius: 16px;
+  }
+  
+  .flex-item {
+    padding: 1px;
+    margin: 1px;
+  }
+  
+  .flex-container {
+    margin: 0;
+    padding: 0;
   }
 }
 
-// ==========================================
-// PRINT STYLES
-// ==========================================
-@media print {
+@media (max-width: $breakpoint-sm) {
+  .text-subtitle1 {
+    font-size: 1.25rem;
+  }
+  
+  .text-subtitle2 {
+    font-size: 1rem;
+  }
+  
+  .text-subtitle3 {
+    font-size: 0.75rem;
+  }
+  
+  .text-subtitle4 {
+    font-size: 0.7rem;
+  }
+  
+  .cltexth3 {
+    font-size: 1.25rem;
+  }
+}
 
+// ============================================
+// 45. PRINT STYLES
+// ============================================
+@media print {
   .q-header,
   .q-footer,
   .q-drawer,
@@ -3376,9 +2814,19 @@ body.body--dark {
   .no-print {
     display: none !important;
   }
-
+  
   .q-page {
     padding: 0;
     margin: 0;
   }
+  
+  body {
+    background: white !important;
+    color: black !important;
+  }
+  
+  .q-card {
+    box-shadow: none !important;
+    border: 1px solid #ccc;
+  }
 }
\ No newline at end of file
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 58b89ca3..9f9341bb 100755
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -12,15 +12,21 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2;
-$secondary : #26A69A;
-$accent    : #9C27B0;
+// ==========================================
+// QUASAR VARIABLES - THEMING UFFICIALE
+// ==========================================
 
-$dark      : #1D1D1D;
-
-$positive  : #21BA45;
-$negative  : #C10015;
-$info      : #31CCEC;
-$warning   : #F2C037;
+// ==========================================
+// COLORI QUASAR (OBBLIGATORI)
+// ==========================================
+$primary   : #1976d2;
+$secondary : #26a69a;
+$accent    : #9c27b0;
 
+$dark      : #1d1d1d;
+$dark-page : #121212;
 
+$positive  : #21ba45;
+$negative  : #c10015;
+$info      : #31ccec;
+$warning   : #f2c037;
diff --git a/src/css/variables.scss b/src/css/variables.scss
old mode 100755
new mode 100644
index 8d1f8a93..6a088424
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -2,37 +2,179 @@
 // VARIABILI STILE RISO - Moderno e Minimalista
 // ==========================================
 
-// Colori principali - Palette moderna
+// ==========================================
+// CSS CUSTOM PROPERTIES PER THEMING DINAMICO
+// Queste DEVONO essere qui per funzionare con Quasar
+// ==========================================
+:root {
+  // === BACKGROUNDS ===
+  --app-bg-primary: #f1f5f9;
+  --app-bg-secondary: #e2e8f0;
+  --app-bg-tertiary: #f8fafc;
+  --app-bg-card: #ffffff;
+  --app-bg-card-hover: #f8fafc;
+  --app-bg-input: #ffffff;
+  --app-bg-overlay: rgba(0, 0, 0, 0.5);
+  
+  // === TEXT ===
+  --app-text-primary: #2c3e50;
+  --app-text-secondary: #555555;
+  --app-text-muted: #666666;
+  --app-text-disabled: #999999;
+  --app-text-inverse: #ffffff;
+  
+  // === BORDERS ===
+  --app-border-color: rgba(0, 0, 0, 0.08);
+  --app-border-color-strong: rgba(0, 0, 0, 0.15);
+  --app-divider-color: rgba(0, 0, 0, 0.06);
+  
+  // === SHADOWS ===
+  --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --app-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --app-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
+  
+  // === SCROLLBAR ===
+  --app-scrollbar-thumb: rgba(0, 0, 0, 0.15);
+  --app-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
+  --app-scrollbar-track: transparent;
+  
+  // === MISC ===
+  --app-backdrop-blur: blur(10px);
+  --background-even: rgba(211, 211, 211, 0.3);
+  --background-odd: #ffffff;
+}
+
+// ==========================================
+// DARK MODE - CSS Custom Properties Override
+// Usa html.body--dark per massima specificità
+// ==========================================
+html.body--dark,
+body.body--dark,
+.body--dark {
+  // === BACKGROUNDS ===
+  --app-bg-primary: #0a0a0a;
+  --app-bg-secondary: #121212;
+  --app-bg-tertiary: #1a1a1a;
+  --app-bg-card: #1e1e1e;
+  --app-bg-card-hover: #2a2a2a;
+  --app-bg-input: #2a2a2a;
+  --app-bg-overlay: rgba(0, 0, 0, 0.7);
+  
+  // === TEXT ===
+  --app-text-primary: #e4e4e7;
+  --app-text-secondary: #a1a1aa;
+  --app-text-muted: #71717a;
+  --app-text-disabled: #52525b;
+  --app-text-inverse: #18181b;
+  
+  // === BORDERS ===
+  --app-border-color: rgba(255, 255, 255, 0.1);
+  --app-border-color-strong: rgba(255, 255, 255, 0.2);
+  --app-divider-color: rgba(255, 255, 255, 0.08);
+  
+  // === SHADOWS (più intense per dark mode) ===
+  --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --app-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --app-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
+  --app-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.7);
+  
+  // === SCROLLBAR ===
+  --app-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --app-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+  
+  // === MISC ===
+  --background-even: rgba(45, 45, 45, 0.7);
+  --background-odd: #1e1e1e;
+}
+
+
+// Light mode
+$text-primary: #1a1a1a;
+$text-secondary: #2c3e50;
+$text-muted: #6c757d;
+$text-light: #8a9aa9;
+
+// Dark mode
+$text-primary-dark: #f5f5f5;
+$text-secondary-dark: #b8c5d3;
+$text-muted-dark: #8a9aa9;
+$text-light-dark: #6c757d;
+
+// ==========================================
+// VARIABILI SCSS STATICHE (non cambiano con dark mode)
+// ==========================================
+
+// Colori principali
 $mainStyle: #4975BA;
 $mainColor: #3c4858;
 
-// Variables
-$primary-color: #1976d2;
+
+// ==========================================
+// COLOR VARIABLES - AGGIORNATE
+// ==========================================
+
+// Primary colors
+$primary-color: #667eea;
+$primary-color-dark: #7c93f0;
+
 $primary-light: #42a5f5;
 $primary-dark: #1565c0;
 $accent-color: #26a69a;
 
+// Text colors - Light mode
+$text-primary: #1a202c;
+$text-secondary: #2c3e50;
+$text-muted: #718096;
+$text-on-primary: #ffffff;
+
+// Text colors - Dark mode
+$text-primary-dark: #f7fafc;
+$text-secondary-dark: #b8c5d3;
+$text-muted-dark: #a0aec0;
+
+// Placeholder gradients
+$gradient-placeholder: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+$gradient-placeholder-dark: linear-gradient(135deg, #374151 0%, #4b5563 100%);
+
+
+$gray-shadow: #555;
+$primary-accent: #667eea;
+$success-color: #4caf50;
+$warning-color: #f69f09;
+$danger-color: #ff0000;
+
 $secondary-color: #26a69a;
 $positive-color: #21ba45;
 $negative-color: #c10015;
-$success-color: #21ba45;
-$warning-color: #f2c037;
 $info-color: #31ccec;
 $orange-color: #ff9800;
+
+// Card styles
 $card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 $card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);
+
+// Border radius
 $border-radius: 16px;
-$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-$grey-text: #555;
-$grey-color: #666;
-$grey-light: #999;
-
+$border-radius-sm: 12px;
+$border-radius-lg: 24px;
 $radius-sm: 8px;
 $radius-md: 12px;
 $radius-lg: 16px;
 $radius-xl: 20px;
 
+// Transitions
+$transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-speed: 0.3s;
+
+// Greys
+$grey-text: #555;
+$grey-color: #666;
+$grey-light: #999;
+
+// Spacing
 $space-xs: 4px;
 $space-sm: 8px;
 $space-md: 12px;
@@ -40,29 +182,37 @@ $space-lg: 16px;
 $space-xl: 20px;
 $space-xxl: 24px;
 
-// Gialli
+$s-xs: 4px;
+$s-sm: 8px;
+$s-md: 12px;
+$s-lg: 16px;
+$s-xl: 20px;
+
+$r-sm: 8px;
+$r-md: 12px;
+$r-lg: 16px;
+$r-xl: 20px;
+
+// Colori specifici
 $yellow1: #f8ab1c;
 $yellow2: rgb(221, 144, 35);
 $yellow3: #f8d71c;
 
-// Blu
 $blue1: #4286f4;
 $blue2: #a9dff5;
 
-// Rossi e arancio
 $red1: #c84242;
 $orange1: #cf7219;
 $rose1: #dd4587;
 
-// Verdi
 $green1: #5cb85c;
 $green2: #CEE8DF;
 $green3: #70BEB1;
 $green4: #4c964c;
 
-// Marroni
 $brown1: #D99E7E;
 
+// Export per JavaScript
 :export {
   mainStyle: $mainStyle;
   red1: $red1;
@@ -76,19 +226,11 @@ $brown1: #D99E7E;
   green3: $green3;
 }
 
-$s-xs: 4px;
-$s-sm: 8px;
-$s-md: 12px;
-$s-lg: 16px;
-$s-xl: 20px;
-
-$r-sm: 8px;
-$r-md: 12px;
-$r-lg: 16px;
-$r-xl: 20px;
-
-// Gradienti
+// ==========================================
+// GRADIENTI - LIGHT MODE
+// ==========================================
 $gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+$gradient-secondary: linear-gradient(135deg, #a9dff5 0%, #3889da 100%);
 $gradient-blue: linear-gradient(135deg, #3889da 0%, #4e57a7 100%);
 $gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 $gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
@@ -103,9 +245,208 @@ $gradient-card-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
 $gradient-card-white: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
 $gradient-hover: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
 
+// ==========================================
+// GRADIENTI - DARK MODE
+// ==========================================
+// Versioni più scure e desaturate per dark mode
+
+$gradient-primary-dark: linear-gradient(135deg, #4c5fd7 0%, #5c3a7e 100%);
+$gradient-secondary-dark: linear-gradient(135deg, #2a4a5f 0%, #1e4976 100%);
+$gradient-blue-dark: linear-gradient(135deg, #2563a8 0%, #3a4280 100%);
+$gradient-accent-dark: linear-gradient(135deg, #c06cc9 0%, #c4404f 100%);
+$gradient-success-dark: linear-gradient(135deg, #3584c9 0%, #00b8bf 100%);
+$gradient-info-dark: linear-gradient(135deg, #5a9e9a 0%, #a8889a 100%);
+$gradient-orange-dark: linear-gradient(135deg, #c45a0e 0%, #b8440a 100%);
+$gradient-indigo-dark: linear-gradient(135deg, #434da8 0%, #4c5fd7 100%);
+$gradient-red-dark: linear-gradient(135deg, #c44545 0%, #b84a7a 100%);
+$gradient-lime-dark: linear-gradient(135deg, #5f9410 0%, #0a8a5f 100%);
+$gradient-teal-dark: linear-gradient(135deg, #0e8a7e 0%, #048a9e 100%);
+
+$gradient-card-dark: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
+$gradient-card-elevated-dark: linear-gradient(to bottom, #2d2d2d 0%, #252525 100%);
+$gradient-hover-dark: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
 
 // ==========================================
-// SCALA GRIGI - Stile RISO pulito
+// GRADIENTI AGGIUNTIVI DARK MODE
+// ==========================================
+// Per superfici e background
+
+$gradient-surface-dark: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
+$gradient-surface-elevated-dark: linear-gradient(135deg, #242424 0%, #2a2a2a 100%);
+$gradient-overlay-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
+
+// ==========================================
+// MIXIN PER GESTIONE GRADIENTI
+// ==========================================
+@mixin gradient-adaptive($light-gradient, $dark-gradient) {
+  background: $light-gradient;
+  
+  .body--dark & {
+    background: $dark-gradient;
+  }
+}
+
+// ==========================================
+// CLASSI UTILITY PER GRADIENTI
+// ==========================================
+.bg-gradient-primary {
+  background: $gradient-primary;
+  
+  .body--dark & {
+    background: $gradient-primary-dark;
+  }
+}
+
+.bg-gradient-secondary {
+  background: $gradient-secondary;
+  
+  .body--dark & {
+    background: $gradient-secondary-dark;
+  }
+}
+
+.bg-gradient-blue {
+  background: $gradient-blue;
+  
+  .body--dark & {
+    background: $gradient-blue-dark;
+  }
+}
+
+.bg-gradient-accent {
+  background: $gradient-accent;
+  
+  .body--dark & {
+    background: $gradient-accent-dark;
+  }
+}
+
+.bg-gradient-success {
+  background: $gradient-success;
+  
+  .body--dark & {
+    background: $gradient-success-dark;
+  }
+}
+
+.bg-gradient-info {
+  background: $gradient-info;
+  
+  .body--dark & {
+    background: $gradient-info-dark;
+  }
+}
+
+.bg-gradient-orange {
+  background: $gradient-orange;
+  
+  .body--dark & {
+    background: $gradient-orange-dark;
+  }
+}
+
+.bg-gradient-indigo {
+  background: $gradient-indigo;
+  
+  .body--dark & {
+    background: $gradient-indigo-dark;
+  }
+}
+
+.bg-gradient-red {
+  background: $gradient-red;
+  
+  .body--dark & {
+    background: $gradient-red-dark;
+  }
+}
+
+.bg-gradient-lime {
+  background: $gradient-lime;
+  
+  .body--dark & {
+    background: $gradient-lime-dark;
+  }
+}
+
+.bg-gradient-teal {
+  background: $gradient-teal;
+  
+  .body--dark & {
+    background: $gradient-teal-dark;
+  }
+}
+
+.bg-gradient-card {
+  background: $gradient-card-light;
+  
+  .body--dark & {
+    background: $gradient-card-dark;
+  }
+}
+
+.bg-gradient-card-white {
+  background: $gradient-card-white;
+  
+  .body--dark & {
+    background: $gradient-card-elevated-dark;
+  }
+}
+
+.bg-gradient-hover {
+  background: $gradient-hover;
+  
+  .body--dark & {
+    background: $gradient-hover-dark;
+  }
+}
+
+// ==========================================
+// GRADIENTI PER TESTO
+// ==========================================
+.text-gradient-primary {
+  background: $gradient-primary;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  
+  .body--dark & {
+    background: $gradient-primary-dark;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.text-gradient-accent {
+  background: $gradient-accent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  
+  .body--dark & {
+    background: $gradient-accent-dark;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.text-gradient-success {
+  background: $gradient-success;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  
+  .body--dark & {
+    background: $gradient-success-dark;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+// ==========================================
+// SCALA GRIGI
 // ==========================================
 $w255: rgb(255, 255, 255);
 $w250: rgb(250, 250, 250);
@@ -139,7 +480,7 @@ $g20: rgb(20, 20, 20);
 $g10: rgb(10, 10, 10);
 $g0: rgb(0, 0, 0);
 
-$ombre: rgba(10, 10, 10, 0.08); // Ridotta per stile più pulito
+$ombre: rgba(10, 10, 10, 0.08);
 
 // ==========================================
 // TIPOGRAFIA
@@ -147,39 +488,28 @@ $ombre: rgba(10, 10, 10, 0.08); // Ridotta per stile più pulito
 $mainFont: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
 // ==========================================
-// BREAKPOINT - Mobile first
+// BREAKPOINTS
 // ==========================================
 $mini: "(max-width: 1000px)";
 $desktop: "(min-width: 1001px)";
 $tablet: "(min-width: 601px) and (max-width: 1000px)";
 $mobile: "(max-width: 600px)";
 
-$border-radius: 16px;
-$border-radius-sm: 12px;
-$border-radius-lg: 24px;
+$mobile-breakpoint: 768px;
+$mobile-footer-height: 80px;
+$small-breakpoint: 600px;
 
-$transition-speed: 0.3s;
+// Shadows
 $shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
 $shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
 $shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
 $shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
 
-
-$mobile-breakpoint: 768px;
-$mobile-footer-height: 80px;
-$small-breakpoint: 600px;
-
-
-
 // ==========================================
-// DIMENSIONI HEADER - Più compatto
+// DIMENSIONI
 // ==========================================
-$headerHeight: 52px; // Ridotto da 60px
+$headerHeight: 52px;
 $headerColor: #373F46;
-
-// ==========================================
-// ALTRE DIMENSIONI
-// ==========================================
 $Loadersize: 20px;
 $boutonfont: 14px;
 $boutonH: 20px;
@@ -187,7 +517,7 @@ $aside-w: 180px;
 $contentSize: 170px;
 
 // ==========================================
-// MIXIN MODERNI
+// MIXIN
 // ==========================================
 @mixin transition($args...) {
   transition: $args;
@@ -240,17 +570,12 @@ $contentSize: 170px;
   filter: $property;
 }
 
-// ==========================================
-// NUOVI MIXIN STILE RISO
-// ==========================================
 @mixin card-shadow {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
-              0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--app-shadow-sm);
 }
 
 @mixin card-shadow-hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
-              0 2px 6px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--app-shadow-md);
 }
 
 @mixin smooth-transition {
@@ -259,8 +584,14 @@ $contentSize: 170px;
 
 @mixin glass-effect {
   background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: var(--app-backdrop-blur);
+  -webkit-backdrop-filter: var(--app-backdrop-blur);
+}
+
+@mixin glass-effect-dark {
+  background: rgba(30, 30, 30, 0.8);
+  backdrop-filter: var(--app-backdrop-blur);
+  -webkit-backdrop-filter: var(--app-backdrop-blur);
 }
 
 // ==========================================
@@ -327,4 +658,17 @@ $contentSize: 170px;
   src: url('/src/css/fonts/DINPro-Medium.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
-}
\ No newline at end of file
+}
+
+// Typography
+$heading-primary-size-mobile: 1.25rem;
+$heading-primary-size-desktop: 1.5rem;
+$heading-primary-weight: 700;
+$heading-primary-letter-spacing: -0.02em;
+$heading-primary-line-height: 1.3;
+
+// Breakpoints
+$breakpoint-xs: 600px;
+$breakpoint-sm: 768px;
+$breakpoint-md: 1024px;
+$breakpoint-lg: 1200px;
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index 4e68a633..29f382c5 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -163,6 +163,7 @@ export interface IMyElem {
   parambool2?: boolean
   parambool3?: boolean
   parambool4?: boolean
+  parambool5?: boolean
   number?: number
   num2?: number
   imgback?: string
@@ -195,6 +196,8 @@ export interface IMyElem {
   elemsText?: IElemText[]
   titleBanner?: string
   classBanner?: string
+  stiletit_str?: string
+  stiletit_icon?: string
   color?: string
   rows?: any[]
   columns?: any[]
diff --git a/src/store/CircuitStore.ts b/src/store/CircuitStore.ts
index ed184a3e..5962886a 100755
--- a/src/store/CircuitStore.ts
+++ b/src/store/CircuitStore.ts
@@ -352,6 +352,12 @@ export const useCircuitStore = defineStore('CircuitStore', {
       return false;
     },
 
+    quantiCircuitiSonoDentro() {
+      const userStore = useUserStore();
+
+      return userStore.my.profile.mycircuits.length
+    },
+
     updateListCircuit(visu: number, sortbyuser?: boolean) {
       const userStore = useUserStore();
 
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index 62599f1a..0a61718f 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -800,6 +800,11 @@ export const colmyelems = [
     label_trans: 'myelems.parambool4',
     fieldtype: costanti.FieldType.boolean,
   }),
+  AddCol({
+    name: 'parambool5',
+    label_trans: 'myelems.parambool5',
+    fieldtype: costanti.FieldType.boolean,
+  }),
   AddCol({
     name: 'number',
     label_trans: 'myelems.number',
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index bd93e106..e57d510f 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -7461,10 +7461,9 @@ export const tools = {
 
   async sendCoinsByCircuit(
     $q: any,
-    $router: any,
     circuit: ICircuit,
     sendcoinrec: ISendCoin
-  ): Promise<void> {
+  ): Promise<boolean> {
     const userStore = useUserStore();
     const notifStore = useNotifStore();
     const { username } = userStore.my;
@@ -7473,83 +7472,48 @@ export const tools = {
     const orig = sendcoinrec.grouporig || sendcoinrec.contoComOrig || '';
     const dest = sendcoinrec.groupdest || sendcoinrec.contoComDest || sendcoinrec.dest;
 
-    // Parametri comuni per i messaggi
-    const msgParams = {
-      coin: circuit.symbol,
-      dest,
-      qty: sendcoinrec.qty,
-      circuit: circuit.name,
-      ...(orig && { from: orig }), // Aggiunge 'from' solo se esiste
-    };
+    try {
+      const res = await userStore.setCircuitCmd(
+        $q,
+        t,
+        username,
+        sendcoinrec.circuitname,
+        shared_consts.CIRCUITCMD.SENDCOINS_REQ,
+        true,
+        sendcoinrec
+      );
 
-    // Seleziona il messaggio appropriato
-    const messageKey = orig
-      ? 'circuit.question_sendcoinsto_from'
-      : 'circuit.question_sendcoinsto';
+      console.log('setCircuitCmd', res);
 
-    // Mostra dialog di conferma
-    return new Promise((resolve, reject) => {
-      $q.dialog({
-        title: t('db.domanda'),
-        message: t(messageKey, msgParams),
-        ok: {
-          label: t('dialog.yes'),
-          color: 'primary',
-          push: true,
-        },
-        cancel: {
-          label: t('dialog.cancel'),
-          color: 'secondary',
-        },
-      })
-        .onOk(async () => {
-          try {
-            const res = await userStore.setCircuitCmd(
-              $q,
-              t,
-              username,
-              sendcoinrec.circuitname,
-              shared_consts.CIRCUITCMD.SENDCOINS_REQ,
-              true,
-              sendcoinrec
-            );
+      if (!res?.cansend) {
+        tools.showNegativeNotif($q, res?.errormsg || t('errors.generic'));
+        return false;
+      }
 
-            console.log('setCircuitCmd', res);
+      // Aggiorna gli account utente se presenti
+      if (res.useraccounts?.length > 0) {
+        userStore.my.profile.useraccounts = res.useraccounts;
+      }
 
-            if (!res?.cansend) {
-              tools.showNegativeNotif($q, res?.errormsg || t('errors.generic'));
-              return resolve();
-            }
+      // Aggiorna dati
+      tools.updateMyData(res);
+      notifStore.updateNotification = true;
 
-            // Aggiorna gli account utente se presenti
-            if (res.useraccounts?.length > 0) {
-              userStore.my.profile.useraccounts = res.useraccounts;
-            }
-
-            // Aggiorna dati e naviga
-            tools.updateMyData(res);
-            notifStore.updateNotification = true;
-
-            tools.showPositiveNotif(
-              $q,
-              t('circuit.coins_sent', {
-                qty: sendcoinrec.qty,
-                symbol: circuit.symbol,
-                dest,
-              })
-            );
-
-            $router.push('/circuits');
-            resolve();
-          } catch (error) {
-            console.error('Errore invio coins:', error);
-            tools.showNegativeNotif($q, t('errors.generic'));
-            reject(error);
-          }
+      tools.showPositiveNotif(
+        $q,
+        t('circuit.coins_sent', {
+          qty: sendcoinrec.qty,
+          symbol: circuit.symbol,
+          dest,
         })
-        .onCancel(() => resolve())
-        .onDismiss(() => resolve());
-    });
+      );
+
+      return true;
+    } catch (error) {
+      console.error('Errore invio coins:', error);
+      tools.showNegativeNotif($q, t('errors.generic'));
+      return false;
+    }
   },
   /* return await new Promise((resolve, reject) => {
       resolve(false)
diff --git a/src/store/globalStore.ts b/src/store/globalStore.ts
index 6e6a29f5..230e1aa5 100644
--- a/src/store/globalStore.ts
+++ b/src/store/globalStore.ts
@@ -3643,5 +3643,9 @@ export const useGlobalStore = defineStore('GlobalStore', {
     async sendInviteEmail(email: string) {
       // ...
     },
+
+    getMyGroups() {
+      return this.mygroups.sort((a, b) => (a.title > b.title) ? 1 : -1);
+    }
   },
 });