@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');


/* MOTORE ANIMAZIONE BARRA */
@keyframes bladeFlow {
    0% { background-position: 200% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes screenFadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

body {
    background-color: var(--bg-color-top);
    position: relative;
    min-height: 100vh;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    
    /* FIX FLASH: Animiamo solo il colore del testo, non lo sfondo */
    transition: color 0.3s ease; 
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    color: var(--text-color);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body::before {
content:'';
position:fixed;
inset:0;
background-image:linear-gradient(180deg,var(--bg-color-top),var(--bg-color-bottom));
background-repeat:no-repeat;
z-index:-1
}

#loading-overlay.hidden {
opacity:0;
pointer-events:none
}

.spinner {
width:40px;
height:40px;
border-radius:50%;
border:4px solid #fff3;
border-top-color:#fff;
animation:spin 1s ease-in-out infinite
}

@keyframes spin {
to {
transform:rotate(360deg)
}
}

.container {
-webkit-overflow-scrolling:touch;
padding:15px;
padding-bottom:100px;
max-width:600px;
margin:0 auto;
position:relative;
box-sizing:border-box
}

body.no-scroll {
overflow-y:hidden
}

.hidden {
display:none!important
}

#home-screen,#add-expense-category-screen,#manage-categories-screen,#add-expense-amount-screen,#view-expenses-screen,#category-detail-screen,#edit-expense-screen,#edit-category-screen,#monthly-history-screen,#weekly-detail-screen,#weekly-category-detail-screen,#chart-screen {
animation:screenFadeIn .25s ease-out
}

.header-icon-btn {
position:absolute;
top:calc(20px + env(safe-area-inset-top));
width:36px;
height:36px;
border-radius:50%;
background:#ffffff26;
backdrop-filter:blur(5px);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:#fff;
z-index:20
}

#home-screen .header p {
grid-column:1 / 2;
grid-row:2 / 3;
text-align:left
}

#home-screen .header #monthly-budget-summary {
grid-column:2 / 3;
grid-row:2 / 3;
place-self:center end;
font-size:10px;
color:#fffc;
padding:0 5px 0 0;
white-space:nowrap;
text-align:right;
line-height:1.3
}

#home-screen .header #monthly-budget-summary h4 {
margin:0;
font-weight:400;
text-transform:uppercase
}

#home-screen .header #monthly-budget-summary .remaining-budget {
font-weight:700;
font-size:14px;
color:#fff;
display:block
}

.card {
background-color:var(--card-bg);
border-radius:12px;
padding:16px;
margin-bottom:20px;
box-shadow:0 4px 12px -2px #0000001a
}

.card,.total-box {
backdrop-filter:blur(14px);
border:1px solid var(--glass-border)
}

.summary-cards {
display:grid;
grid-template-columns:1fr;
gap:15px;
margin-bottom:20px;
margin-top:20px;
position:relative;
z-index:10
}

.summary-cards .total-box {
background-color:var(--card-bg);
padding:16px;
border-radius:12px;
box-shadow:var(--card-shadow);
margin-bottom:0;
border:none;
display:flex;
align-items:center;
gap:15px;
position:relative
}

.total-box-icon {
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0
}

.summary-icon-img {
width:64px;
height:64px;
border-radius:12px
}

#monthly-icon-bg,#weekly-icon-bg {
background-color:transparent;
color:unset
}

.total-box-text {
text-align:left
}

.total-box {
cursor:pointer;
transition:transform .2s
}

.total-box:active {
transform:scale(0.97)
}

.total-box h3 {
margin:0 0 5px;
font-size:20px;
color:var(--text-color);
font-weight:600;
letter-spacing:-.5px
}

.total-box p {
margin:0;
font-size:24px;
font-weight:600;
color:var(--text-color)
}

.total-box .date-range {
font-size:12px;
color:var(--secondary-text-color);
margin-top:4px;
display:block
}

.btn {
display:block;
width:100%;
padding:14px;
background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));
background-size:200% 200%;
animation:gradientMove 4s ease infinite;
color:#fff;
border:none;
border-radius:8px;
font-size:16px;
font-weight:600;
cursor:pointer;
text-align:center;
position:relative;
overflow:hidden;
box-shadow:0 4px 12px -2px #0003;
transition:transform 0.2s,box-shadow 0.2s,filter .2s
}

@keyframes gradientMove {
0% {
background-position:0 50%
}

50% {
background-position:100% 50%
}

100% {
background-position:0 50%
}
}

.btn:active {
filter:brightness(0.9);
transform:translateY(1px);
box-shadow:0 2px 6px -1px #0003
}

.btn-secondary {
background-color:var(--card-bg);
color:var(--text-color);
border:1px solid var(--border-color);
box-shadow:0 2px 4px #0000000d
}

.btn-secondary:active {
background-color:#f7f8fc;
transform:none;
box-shadow:none;
border-color:#d0d2d6
}

.btn-danger {
background-color:var(--red);
box-shadow:0 4px 12px -2px #fa383e66
}

.btn-danger:active {
background-color:#d92e33;
box-shadow:0 2px 6px -1px #fa383e66;
transform:translateY(1px)
}

.actions {
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-bottom:20px
}

#app-version {
text-align:left;
font-size:11px;
color:var(--secondary-text-color);
opacity:.7;
padding-left:5px
}

.category-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
gap:12px
}

.expense-category-item {
aspect-ratio:1 / 1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:10px!important;
text-align:center;
word-break:break-word;
hyphens:auto
}

#add-expense-category-screen .category-grid,#manage-categories-screen .category-grid {
grid-template-columns:repeat(auto-fill,minmax(80px,1fr))
}

#add-expense-category-screen .category-item,#manage-categories-screen .category-item {
min-height:70px;
aspect-ratio:auto
}

.category-item {
background-color:var(--card-bg);
border:1px solid var(--border-color);
padding:10px 5px;
border-radius:8px;
text-align:center;
font-weight:500;
transition:transform 0.1s,box-shadow .2s;
position:relative;
box-shadow:0 2px 6px #0000000f;
font-size:13px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:70px
}

.category-item:active {
transform:scale(0.96)
}

.category-item .delete-icon {
position:absolute;
top:-5px;
right:-5px;
width:20px;
height:20px;
background-color:var(--red);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
cursor:pointer;
border:2px solid #fff
}

.category-item .category-name {
cursor:pointer;
display:block;
padding:5px;
transition:background-color .2s;
border-radius:5px
}

.category-item .budget-bar {
position:absolute;
bottom:0;
left:0;
height:4px;
background-color:var(--green);
border-radius:0 0 8px 8px
}

.expense-category-item {
padding:12px;
border-radius:8px;
color:#fff;
cursor:pointer;
transition:transform .1s
}

.expense-category-item:active {
transform:scale(0.97)
}

.expense-category-item h4 {
margin:0 0 4px;
font-size:16px
}

.expense-category-item p {
margin:0 0 4px;
font-size:12px;
opacity:.9
}

.expense-category-item .amount {
font-size:22px;
font-weight:600;
margin-top:8px
}

#monthly-history-grid .expense-category-item {
cursor:pointer;
transition:transform .1s
}

#monthly-history-grid .expense-category-item:active {
transform:scale(0.97)
}

.input-group {
margin-bottom:20px;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap
}

.input-group label {
display:block;
margin-bottom:8px;
font-weight:500
}

.input-group label input[type="checkbox"] {
margin-right:8px;
vertical-align:middle
}

.input-group input:not([type="checkbox"]),.input-group textarea,.input-group select {
width:100%;
padding:12px;
border:1px solid var(--border-color);
background-color:var(--input-bg);
border-radius:8px;
font-size:16px;
box-sizing:border-box
}

.input-group input:not([type="checkbox"]):focus,.input-group textarea:focus,.input-group select:focus {
outline:none;
border:1px solid transparent;
border-radius:8px;
background-image:linear-gradient(var(--card-bg),var(--card-bg)),linear-gradient(90deg,#5A7BED,#C764E3);
background-origin:border-box;
background-clip:padding-box,border-box;
box-shadow:0 0 0 2px #c764e333;
color:var(--text-color)
}

textarea {
resize:vertical;
min-height:60px
}

.icon-select-grid {
display:flex;
flex-wrap:wrap;
gap:12px;
padding-top:5px
}

#new-category-icon-select-group,#edit-shortcut-section .input-group:has(.icon-select-grid) {
display:block!important;
width:100%
}

.icon-select-item {
width:40px;
height:40px;
border-radius:8px;
border:2px solid var(--border-color);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .2s
}

.icon-select-item svg {
width:20px;
height:20px;
color:var(--secondary-text-color);
transition:color .2s
}

.icon-select-item.selected {
border-color:var(--primary-color);
background-color:#f0f5ff
}

.icon-select-item.selected svg {
color:var(--primary-color)
}

.modal-content h3 {
margin-top:0
}

.modal-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:20px
}

#no-expenses-message {
text-align:center;
padding:30px;
color:var(--secondary-text-color)
}

.expense-list-item {
background-color:var(--card-bg);
border:1px solid var(--border-color);
border-radius:8px;
padding:12px;
margin-bottom:10px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
transition:background-color 0.2s,box-shadow .2s;
box-shadow:0 1px 2px #0000000d;
position:relative;
padding-right:40px
}

.expense-list-item:active {
background-color:#f0f2f5;
box-shadow:none;
transform:scale(0.99)
}

.expense-list-item .details {
font-size:15px
}

.expense-list-item .details .note {
font-size:13px;
color:var(--secondary-text-color);
margin-top:4px
}

.expense-list-item .amount {
font-size:18px;
font-weight:600;
color:var(--primary-color)
}

.expense-list-item .delete-icon {
position:absolute;
top:50%;
right:8px;
transform:translateY(-50%);
width:24px;
height:24px;
background-color:var(--red);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
cursor:pointer;
border:2px solid #fff;
box-shadow:0 1px 3px #0003;
opacity:.7;
transition:opacity .2s
}

.expense-list-item:hover .delete-icon {
opacity:1
}

.expense-list-item .delete-icon:active {
transform:translateY(-50%) scale(0.9);
opacity:1
}

.category-summary-item {
background-color:var(--card-bg);
border:1px solid var(--border-color);
border-radius:8px;
padding:12px;
margin-bottom:10px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
transition:background-color 0.2s,box-shadow .2s;
box-shadow:0 1px 2px #0000000d
}

.category-summary-item:active {
background-color:#f0f2f5;
box-shadow:none;
transform:scale(0.99)
}

.category-summary-item .details {
font-size:16px;
font-weight:500
}

.import-export-section {
margin-top:30px;
padding-top:20px;
border-top:1px solid var(--border-color)
}

.import-export-section h3 {
text-align:center;
color:var(--secondary-text-color);
margin-bottom:15px
}

.import-export-actions {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px
}

#import-file-input {
display:none
}

#toast-message {
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background-color:var(--toast-bg);
color:#fff;
padding:10px 20px;
border-radius:20px;
font-size:14px;
z-index:2000;
opacity:0;
transition:opacity .3s ease-in-out;
pointer-events:none
}

#toast-message.visible {
opacity:1
}

#chart-container {
width:100%;
max-width:600px;
margin:20px 0;
padding:10px;
background-color:var(--card-bg);
border-radius:8px;
border:none;
box-sizing:border-box
}

#pie-chart {
max-height:450px;
max-width:100%;
width:100%
}

@keyframes fadeSlide {
from {
opacity:0;
transform:translateY(10px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.total-box,.expense-category-item,.category-summary-item {
animation:fadeSlide .4s ease-out
}

.category-item:hover {
transform:translateY(-2px);
box-shadow:0 4px 12px #0000001a
}

#history-selector-group,/* (Alpha 91) Sostituito #monthly-history-grid */
#view-expenses-grid,#no-expenses-message,#category-selection-grid,#manage-categories-screen #existing-categories-block,/* (Alpha 85) */
#data-screen .import-export-section,/* (Alpha 85) */
#edit-category-screen .card:first-of-type,#add-expense-amount-screen .card:first-of-type,#expense-list,#weekly-detail-list,#weekly-category-detail-list,#edit-expense-screen .card:first-of-type {
margin-top:20px
}

#chart-screen > .header + .card {
margin-top:20px
}

.bottom-nav-bar {
position:fixed;
bottom:0;
left:0;
width:100%;
height:65px;
background-color:var(--card-bg);
border-top:1px solid var(--glass-border);
backdrop-filter:blur(14px);
display:flex;
justify-content:space-around;
align-items:center;
z-index:1000;
padding-bottom:env(safe-area-inset-bottom)
}

.nav-btn {
touch-action:manipulation;
background-color:transparent;
border:none;
padding:4px 0 0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
flex:1;
color:var(--secondary-text-color);
cursor:pointer;
transition:color .2s;
height:100%
}

.nav-btn svg {
width:26px;
height:26px;
stroke-width:1.5;
pointer-events:none
}

.nav-btn span {
font-size:10px;
margin-top:4px;
pointer-events:none
}

.nav-btn:active {
transform:scale(0.95)
}

.nav-btn-add-special svg {
width:44px;
height:44px;
stroke-width:1.5;
stroke:currentcolor
}

.fixed-overlay-container {
position:fixed;
bottom:80px;
left:15px;
right:15px;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
pointer-events:none;
padding-bottom:env(safe-area-inset-bottom)
}

.fixed-overlay-container > * {
pointer-events:auto
}

#app-version-fixed {
font-size:11px;
color:var(--secondary-text-color);
opacity:.7
}

#theme-toggle-btn {
background-color:var(--card-bg);
color:var(--secondary-text-color);
border:1px solid var(--glass-border);
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
backdrop-filter:blur(14px);
box-shadow:0 4px 12px #0000001a;
}

#theme-toggle-btn:active {
transform:scale(0.95)
}

.nav-btn.active {
color:#5A7BED
}

.nav-btn.active span {
font-weight:600;
color:transparent;
background:linear-gradient(90deg,#5A7BED,#C764E3);
background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text
}



.budget-progress-bar-container {
width:100%;
height:6px;
background-color:var(--border-color);
border-radius:3px;
margin-top:10px;
overflow:hidden
}

.budget-progress-bar-fill {
height:100%;
width:0;
background-color:var(--green);
border-radius:3px;
transition:width .5s ease-out,background-color .5s ease
}

.budget-progress-bar-fill.warning {
background-color:var(--yellow)
}

.budget-progress-bar-fill.danger {
background-color:var(--red)
}

#recent-expenses-container {
margin-top:30px
}

.recent-expenses-title {
font-size:20px;
font-weight:600;
color:var(--text-color);
margin-bottom:15px;
padding-left:5px
}

#recent-expenses-list {
display:flex;
flex-direction:column;
gap:10px
}

.recent-expense-item {
display:flex;
align-items:center;
gap:15px;
padding:12px;
cursor:pointer;
transition:transform .1s;
position:relative;
z-index:1;
border-radius:8px;
overflow:hidden;
border:none!important;
box-shadow:none
}

.recent-expense-item:active {
transform:scale(0.98)
}

.recent-expense-amount span {
background:linear-gradient(90deg,#5A7BED,#C764E3);
background-clip:text;
background-clip:text;
color:transparent;
font-weight:700;
display:inline-block;
width:100%;
text-align:right
}

#smart-insight-container {
margin:15px 0 5px;
padding:10px 15px;
border-radius:50px;
display:flex;
align-items:center;
gap:10px;
background:var(--card-bg);
color:var(--text-color);
position:relative;
z-index:1
}

.insight-icon {
font-size:16px
}

.insight-text {
font-size:13px;
font-weight:500
}

.tags-container {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px
}

.tag-chip {
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
user-select:none;
position:relative;
z-index:1;
overflow:hidden
}

.tag-chip:active {
transform:scale(0.95)
}

#home-screen .header #open-search-btn {
grid-column:2 / 3;
grid-row:1 / 2;
place-self:center end;
width:36px;
height:36px;
background:#ffffff26;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
backdrop-filter:blur(5px);
color:#fff;
transition:transform .2s
}

#home-screen .header #open-search-btn:active {
transform:scale(0.9)
}

#home-screen .header #open-search-btn svg {
width:18px;
height:18px
}

#search-overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:var(--bg-color-top);
z-index:2000;
display:flex;
flex-direction:column;
padding:0;
animation:screenFadeIn .2s ease-out
}

.search-input-wrapper {
flex:1;
background:var(--input-bg);
height:40px;
border-radius:10px;
display:flex;
align-items:center;
padding:0 10px;
border:1px solid transparent
}

.search-input-wrapper:focus-within {
border-color:#5A7BED;
box-shadow:0 0 0 2px #5a7bed33
}

.search-input-wrapper input {
flex:1;
border:none;
background:transparent!important;
height:100%;
font-size:16px;
color:var(--text-color);
padding:0 8px;
outline:none;
box-shadow:none!important
}

.search-icon {
width:18px;
height:18px;
opacity:.5;
color:var(--text-color)
}

.close-icon {
font-size:20px;
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
opacity:.5;
cursor:pointer;
color:var(--text-color)
}

#cancel-search-text-btn {
background:none;
border:none;
padding:0;
color:var(--primary-color);
font-size:16px;
cursor:pointer
}

#search-results-list {
flex:1;
overflow-y:auto;
padding:15px;
-webkit-overflow-scrolling:touch
}

#search-placeholder-msg {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:60%;
opacity:.4;
color:var(--secondary-text-color)
}

.placeholder-icon {
font-size:40px;
margin-bottom:10px
}



#monthly-history-grid .expense-category-item {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:85px;
padding:10px 5px
}

#monthly-history-grid .expense-category-item h4 {
margin:0;
font-size:16px;
font-weight:600;
color:var(--text-color);
white-space:nowrap
}

.week-range-label {
font-size:12px;
opacity:.6;
margin:2px 0 6px;
color:var(--text-color);
white-space:nowrap
}

#monthly-history-grid .expense-category-item .amount {
font-size:18px;
font-weight:700;
margin:0;
background:linear-gradient(90deg,#5A7BED,#C764E3);
background-clip:text;
background-clip:text;
color:transparent;
position:relative;
z-index:3
}

.scope-switcher {
display:flex;
background:#0003;
border-radius:20px;
padding:3px;
margin:10px auto;
width:fit-content;
border:1px solid var(--glass-border)
}

.scope-option {
padding:6px 16px;
font-size:12px;
font-weight:600;
border-radius:16px;
cursor:pointer;
color:var(--secondary-text-color);
transition:all .2s ease
}

.scope-option.active {
background:var(--card-bg);
color:var(--text-color);
box-shadow:0 2px 8px #0000001a
}

.savings-fill {
background-color:#FFD60A!important;
background-image:linear-gradient(45deg,#FFD60A,#FF9F0A);
box-shadow:0 0 10px #ffd60a4d;
transition:width .8s cubic-bezier(0.4,0,0.2,1)
}

#fixed-expenses-summary {
position:absolute;
top:15px;
right:15px;
display:flex;
gap:5px;
z-index:10!important;
pointer-events:none
}

.summary-icon-item {
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 2px 4px #0000004d)
}

.summary-icon-item svg {
width:100%;
height:100%;
color:var(--primary-color)
}

#modal-note-input {
width:100%;
margin-top:15px;
padding:12px;
border-radius:8px;
border:1px solid var(--border-color);
background-color:var(--input-bg);
color:var(--text-color);
font-size:14px;
box-sizing:border-box;
outline:none
}

#edit-category-recurring-group {
display:flex!important
}

#savings-carousel {
display:flex;
gap:15px;
overflow-x:auto;
padding-bottom:10px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none
}

#savings-carousel::-webkit-scrollbar {
display:none
}

.saving-goal-card {
min-width:85%;
scroll-snap-align:center;
background:var(--card-bg);
border-radius:16px;
padding:15px;
position:relative;
border:1px solid var(--border-color);
box-shadow:0 4px 10px #0000000d
}

.goal-progress-bg {
background-color:var(--input-bg);
height:8px;
border-radius:4px;
margin-top:10px;
overflow:hidden
}

.goal-progress-fill {
height:100%;
background:linear-gradient(45deg,#FFD60A,#FF9F0A);
border-radius:4px;
transition:width .5s ease
}

.manage-goal-item {
background:var(--card-bg);
border:1px solid var(--border-color);
padding:12px;
border-radius:8px;
display:flex;
justify-content:space-between;
align-items:center
}

#savings-carousel {
display:flex;
gap:15px;
overflow-x:auto;
padding:5px 2px 20px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch
}

#savings-carousel::-webkit-scrollbar {
display:none
}

.saving-goal-card {
min-width:85vw;
width:85vw;
scroll-snap-align:center;
background:var(--card-bg);
border-radius:16px;
padding:20px;
position:relative;
border:1px solid var(--border-color);
box-shadow:0 8px 20px -5px #00000026;
display:flex;
flex-direction:column;
gap:15px
}

.goal-header-row {
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px
}

.goal-percent-badge {
background:#5a7bed26;
color:var(--primary-color);
padding:4px 10px;
border-radius:12px;
font-size:12px;
font-weight:800;
flex-shrink:0
}

.goal-amounts {
display:flex;
align-items:baseline;
flex-wrap:wrap;
gap:6px
}

.goal-current {
font-size:28px;
font-weight:800;
color:var(--text-color);
line-height:1
}

.goal-target {
font-size:14px;
opacity:.6;
white-space:nowrap
}

.goal-progress-bg {
width:100%;
height:10px;
background-color:var(--input-bg);
border-radius:5px;
overflow:hidden
}

.goal-progress-fill {
height:100%;
background:linear-gradient(90deg,#FFD60A,#FF9F0A);
border-radius:5px;
transition:width .6s cubic-bezier(0.4,0,0.2,1)
}

.saving-goal-card .btn-secondary {
padding:12px 0;
font-size:14px;
flex:1;
margin:0
}

#savings-container {
padding-bottom:25px
}

.carousel-pagination {
display:flex;
justify-content:center;
align-items:center;
gap:8px;
position:absolute;
bottom:10px;
left:0;
right:0;
height:12px;
pointer-events:none
}

.pagination-dot {
width:8px;
height:8px;
border-radius:50%;
background-color:var(--secondary-text-color);
opacity:.3;
transition:all .3s cubic-bezier(0.25,0.8,0.25,1)
}

.pagination-dot.active {
width:20px;
opacity:1;
background-color:var(--primary-color);
border-radius:4px;
box-shadow:0 2px 6px #5a7bed4d
}

.header-icon-btn {
position:absolute!important;
top:calc(15px + env(safe-area-inset-top))!important;
width:36px;
height:36px;
background:#ffffff26;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter:blur(5px);
z-index:10;
color:#fff
}


.header-icon-btn,#home-screen .header #theme-toggle-btn {
position:absolute!important;
top:calc(20px + env(safe-area-inset-top))!important;
width:36px!important;
height:36px!important;
background:#ffffff26!important;
backdrop-filter:blur(5px)!important;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
z-index:20;
box-shadow:none!important;
border:none!important;
margin:0!important
}

#theme-toggle-btn span {
font-size:18px!important;
line-height:1;
margin-top:2px
}

#open-search-btn svg {
width:18px;
height:18px
}

.header-info-row {
width:100%!important;
display:flex!important;
justify-content:space-between!important;
align-items:flex-end!important;
padding:0 5px!important;
box-sizing:border-box!important
}

#home-screen .header p#current-date {
text-align:left!important;
background:none!important
}

#monthly-budget-summary {
text-align:right!important;
margin:0!important
}

#monthly-budget-summary h4 {
margin:0!important;
font-size:10px!important;
opacity:.7!important;
font-weight:400!important;
letter-spacing:.5px!important
}

#monthly-budget-summary .remaining-budget {
margin:0!important;
font-size:16px!important;
font-weight:700!important;
color:var(--text-color)!important
}

.edit-icon-goal {
width:24px;
height:24px;
background-color:var(--primary-color);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
cursor:pointer;
margin-right:10px;
box-shadow:0 2px 5px #0000001a
}

.edit-icon-goal:active {
transform:scale(0.9)
}

.tabs-container {
display:flex;
background-color:var(--input-bg);
padding:4px;
border-radius:10px;
margin-bottom:20px;
border:1px solid var(--border-color)
}

.tab-btn {
flex:1;
padding:10px 5px;
border:none;
background:transparent;
color:var(--secondary-text-color);
font-weight:600;
font-size:13px;
cursor:pointer;
border-radius:8px;
transition:all .2s ease;
text-align:center
}

.tab-btn.active {
background-color:var(--card-bg);
color:var(--primary-color);
box-shadow:0 2px 6px #0000001a
}

:root {
--grad-dark-start:#5A7BED;
--grad-dark-end:#C764E3;
--grad-light-start:#ED4C95;
--grad-light-end:#FA8E41;
--orange: #FF9F0A; 
}

.card,.total-box,.category-item,.expense-category-item,.btn-secondary,.recent-expense-item,.tag-chip {
border:none!important;
position:relative!important;
z-index:1;
border-radius:12px!important;
transition:transform 0.1s,box-shadow .2s!important;
background-clip:padding-box!important;
box-sizing:border-box!important
}

.card > *,.total-box > *,.category-item > *,.expense-category-item > *,.btn-secondary > *,.recent-expense-item > *,.tag-chip > * {
position:relative;
z-index:10
}

.btn.btn-secondary,.btn-secondary {
background-image:none!important;
background-color:transparent!important;
text-align:center
}

.category-item::before,.btn.btn-secondary::before,.btn-secondary::before,.expense-category-item::before,.recent-expense-item::before,.tag-chip::before,#monthly-history-grid .expense-category-item::before {
content:'';
position:absolute;
inset:0;
padding:2.5px;
border-radius:12px;
background:linear-gradient(90deg,currentcolor,currentcolor);
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
mask-composite:exclude;
z-index:5;
pointer-events:none
}

.btn:not(.btn-secondary) {
border:none!important;
color:#fff!important;
border-radius:12px!important;
position:relative;
z-index:1
}

.btn:not(.btn-secondary)::before {
display:none!important
}

.saving-goal-card {
min-width:100%!important;
width:100%!important;
box-sizing:border-box!important;
scroll-snap-align:center
}

#savings-carousel {
padding:5px 2px 20px!important;
margin:0 -2px
}

#chart-screen .card {
width:100%!important;
min-width:100%!important;
box-sizing:border-box!important;
border-radius:16px!important;
padding:20px!important;
border:none!important;
position:relative!important;
z-index:1;
background-clip:border-box!important;
display:block!important
}

#chart-screen .card::before {
content:'';
position:absolute;
inset:2.5px;
border-radius:13px;
z-index:-1;
mask:none!important;
mask:none!important
}

#chart-screen .card {
background-image:none!important;
position:relative!important;
z-index:1;
border-radius:16px!important;
width:100%!important;
box-sizing:border-box!important
}

#chart-screen .card::before {
display:none!important
}

#chart-screen .card.hidden {
display:none!important
}

.btn-social {
width:100%;
padding:12px;
border-radius:12px;
font-weight:600;
font-size:15px;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:transform .1s;
position:relative;
z-index:1
}

.btn-social:active {
transform:scale(0.98)
}

.btn-social.google {
background-color:#FFF;
color:#1f1f1f;
box-shadow:0 2px 5px #0003;
border:1px solid #0000001a!important
}

body.privacy-on .amount,body.privacy-on .remaining-budget,body.privacy-on #weekly-total,body.privacy-on #monthly-total,body.privacy-on .goal-current,body.privacy-on .goal-target,body.privacy-on #savings-current,body.privacy-on #savings-target,body.privacy-on .recent-expense-amount span {
filter:blur(6px);
user-select:none;
transition:filter .3s ease
}

body.privacy-on .amount:hover,body.privacy-on #weekly-total:hover,body.privacy-on #monthly-total:hover {
filter:blur(0);
cursor:pointer
}

.header-icon-btn.right-secondary {
position:absolute!important;
top:calc(5px + env(safe-area-inset-top))!important;
right:65px!important;
width:36px!important;
height:36px!important;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff26;
cursor:pointer;
z-index:20;
color:#fff;
backdrop-filter:blur(5px)
}

#theme-toggle-btn,#privacy-btn,#open-search-btn {
top:calc(0px + env(safe-area-inset-top))!important
}

.calendar-day {
aspect-ratio:1/1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
position:relative;
background:var(--bg-overlay);
color:var(--primary-text);
border:1px solid #ffffff0d
}

.calendar-day.selected {
background-image:linear-gradient(135deg,var(--grad-start),var(--grad-end))!important;
color:#fff!important;
box-shadow:0 4px 10px #0000004d;
border:none
}

.day-indicator {
width:6px!important;
height:6px!important;
border-radius:50%;
background-color:#FF3B30!important;
box-shadow:0 0 4px #ff3b3099;
position:absolute;
bottom:4px;
left:50%;
transform:translateX(-50%);
z-index:10
}

.calendar-day.selected .day-indicator {
background-color:#FFF!important;
box-shadow:none
}

#calendar-screen .header p {
margin-top:0!important;
opacity:.7;
font-size:12px
}

.header-icon-btn,#cal-prev-btn,#cal-next-btn,#theme-toggle-btn,#privacy-btn,#open-search-btn {
position:absolute!important;
top:calc(5px + env(safe-area-inset-top))!important
}

#cal-prev-btn {
left:15px!important;
top:calc(10px + env(safe-area-inset-top))!important
}

#cal-next-btn {
right:15px!important;
top:calc(10px + env(safe-area-inset-top))!important
}

#monthly-budget-summary {
cursor:pointer;
transition:opacity .2s;
padding:5px;
margin-right:-5px!important;
border-radius:8px
}

#monthly-budget-summary:active {
opacity:.5;
background-color:#ffffff1a
}

#edit-image-preview-container {
cursor:pointer!important;
position:relative!important;
z-index:50!important;
pointer-events:auto!important;
transition:transform .1s
}

#edit-image-preview-container:active {
transform:scale(0.98);
opacity:.8
}

#edit-image-preview {
-webkit-touch-callout:none!important;
user-select:none!important;
user-select:none!important;
pointer-events:none!important
}

#edit-remove-image-btn {
z-index:10000!important;
pointer-events:auto!important;
cursor:pointer!important
}

#photo-container {
touch-action:none;
user-select:none;
user-select:none;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center
}

.photo-zoomed {
cursor:grab;
max-width:none!important;
max-height:none!important;
width:auto!important;
height:auto!important
}

.close-modal-icon {
position:absolute!important;
top:calc(20px + env(safe-area-inset-top))!important;
right:20px!important;
z-index:100000!important;
width:40px!important;
height:40px!important;
border-radius:50%;
background:#0009!important;
color:#fff!important;
border:1px solid #ffffff4d!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:20px!important;
cursor:pointer!important;
backdrop-filter:blur(4px)
}

.close-modal-icon:active {
transform:scale(0.9);
background:#fff3!important
}

html,body {
overflow-x:hidden!important;
width:100%!important;
max-width:100%!important;
position:relative
}

body.no-scroll {
overflow:hidden!important
}

.bottom-nav-bar {
position:fixed!important;
bottom:0!important;
left:0!important;
width:100%!important;
z-index:9000!important;
transform:translateZ(0)
}

.btn:not(.btn-secondary),.btn-danger {
box-shadow:inset 0 1px 0 #ffffff4d!important
}

.btn:not(.btn-secondary):active,.btn-danger:active {
box-shadow:none!important;
transform:scale(0.98)
}



html body #chart-screen .card::before,html body #chart-screen .card::after {
display:none!important;
content:none!important
}

.category-item .delete-icon {
position:absolute!important;
top:-6px!important;
right:-6px!important;
width:22px!important;
height:22px!important;
background-color:var(--red)!important;
color:#fff!important;
border-radius:50%!important;
border:2px solid var(--card-bg)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:14px!important;
font-weight:700!important;
line-height:1!important;
padding-bottom:2px!important;
box-shadow:0 2px 4px #0003!important;
z-index:20!important
}

.add-new-item-btn:active {
transform:scale(0.95);
background:#ffffff0d!important;
opacity:1
}

.add-new-item-btn {
height:70px!important;
min-height:70px!important;
width:100%!important;
border:2px dashed #80808066!important;
background-color:transparent!important;
background-image:none!important;
color:var(--text-color)!important;
font-size:30px!important;
font-weight:300!important;
line-height:1!important;
opacity:.5;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:14px!important;
cursor:pointer;
box-shadow:none!important;
backdrop-filter:none!important
}

.add-new-item-btn:active {
background-color:#8080801a!important;
opacity:1;
transform:scale(0.95)
}

#add-expense-amount-screen {
padding-bottom:100px!important;
overflow-y:auto
}

#add-expense-amount-screen .actions {
margin-bottom:20px!important
}

.header:not(#home-screen .header) h1 {
margin-top:5px!important;
margin-bottom:5px!important;
font-size:22px!important;
line-height:1.2!important;
text-align:center!important
}

#cal-prev-btn,#cal-next-btn,.header-icon-btn {
position:absolute!important;
top:calc(20px + env(safe-area-inset-top))!important;
margin:0!important
}

#home-screen .header #theme-toggle-btn,#home-screen .header #open-search-btn,#home-screen .header #privacy-btn,#cal-prev-btn,#cal-next-btn,.header-icon-btn {
position:absolute!important;
top:calc(5px + env(safe-area-inset-top))!important;
margin:0!important;
z-index:1005!important;
display:flex!important;
align-items:center!important;
justify-content:center!important
}

#home-screen .header #theme-toggle-btn,#cal-prev-btn {
left:15px!important;
right:auto!important
}

#home-screen .header #open-search-btn,#cal-next-btn {
right:15px!important;
left:auto!important
}

#home-screen .header #privacy-btn {
right:60px!important;
left:auto!important
}

#chart-screen .header + div {
padding-bottom:0!important;
margin-bottom:0!important
}

#chart-screen .header + div + .card {
margin-top:20px!important
}

.btn-switch {
transition:all .2s ease
}

.btn-switch.active {
background:var(--card-bg)!important;
color:var(--text-color)!important;
box-shadow:0 2px 5px #0000001a!important
}

.btn-switch:not(.active) {
background:transparent!important;
color:var(--secondary-text-color)!important;
box-shadow:none!important
}

.btn-switch {
transition:all .2s ease;
border:1px solid transparent!important;
background:transparent!important;
opacity:.6
}

#type-switch-expense.active {
background-color:var(--card-bg)!important;
color:var(--red)!important;
border:1px solid var(--red)!important;
box-shadow:0 2px 8px #ff3b3026!important;
font-weight:600!important;
opacity:1
}

#type-switch-income.active {
background-color:var(--card-bg)!important;
color:var(--green)!important;
border:1px solid var(--green)!important;
box-shadow:0 2px 8px #34c75926!important;
font-weight:600!important;
opacity:1
}

body.privacy-on #monthly-income-display,body.privacy-on #monthly-balance-display {
filter:blur(6px);
user-select:none;
transition:filter .3s ease
}

body.privacy-on #monthly-income-display:hover,body.privacy-on #monthly-balance-display:hover {
filter:blur(0);
cursor:pointer
}

.delete-icon,.delete-btn-group {
background-color:transparent!important;
border:none!important;
box-shadow:none!important;
color:var(--secondary-text-color)!important;
opacity:.5;
width:36px!important;
height:36px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:50%!important;
transition:all .2s ease;
z-index:20!important
}

.delete-icon svg,.delete-btn-group svg {
width:20px;
height:20px;
stroke-width:1.8
}

.delete-icon:active,.delete-btn-group:active {
color:var(--red)!important;
background-color:#ff3b301a!important;
opacity:1;
transform:scale(1.1)
}

.expense-list-item .delete-icon {
position:absolute!important;
top:50%!important;
transform:translateY(-50%)!important;
right:5px!important
}

.expense-list-item .delete-icon:active {
transform:translateY(-50%) scale(1.1)!important
}

.category-item .delete-icon,.manage-goal-item .delete-icon {
position:absolute!important;
top:0!important;
right:0!important;
margin:0!important
}

body.privacy-on #global-balance-display {
filter:blur(6px);
transition:filter .3s ease
}

body.privacy-on #global-balance-display:hover {
filter:blur(0)
}

.income-chip {
background:var(--input-bg);
border:1px solid var(--border-color);
border-radius:10px;
padding:10px 5px;
text-align:center;
font-size:11px;
font-weight:600;
cursor:pointer;
transition:all .2s;
display:flex;
flex-direction:column;
align-items:center;
gap:5px
}

.income-chip .emoji {
font-size:18px
}

.income-chip.selected {
background:#34c75926;
border-color:var(--green);
color:var(--green);
box-shadow:0 2px 8px #34c75933
}

.switch input {
display:none
}

.slider.round:before {
position:absolute;
content:"";
height:18px;
width:18px;
left:2px;
bottom:2px;
background-color:var(--secondary-text-color);
transition:.4s;
border-radius:50%
}

input:checked + .slider {
background-color:var(--primary-color)!important;
border-color:var(--primary-color)!important
}

input:checked + .slider:before {
transform:translateX(16px);
background-color:#fff
}

#toast-message {
position:fixed!important;
bottom:90px!important;
left:50%!important;
transform:translateX(-50%)!important;
z-index:10000!important;
background-color:#141414f2!important;
color:#FFF!important;
font-weight:500!important;
text-align:center!important;
padding:12px 24px!important;
border-radius:50px!important;
box-shadow:0 4px 15px #0000004d!important;
backdrop-filter:blur(10px)!important;
border:1px solid #ffffff1a!important;
width:auto!important;
max-width:85%!important;
white-space:nowrap!important;
opacity:0;
pointer-events:none;
transition:opacity .3s ease
}

#toast-message.visible {
opacity:1!important
}

#home-screen .header .header-info-row {
display:flex!important;
flex-direction:row!important;
justify-content:space-between!important;
align-items:flex-end!important;
width:100%!important;
padding:0 10px 5px!important;
margin-top:5px!important;
box-sizing:border-box!important
}

#current-date,#monthly-budget-summary {
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
margin:0!important;
padding:0!important;
height:auto!important;
line-height:1!important;
background:none!important;
border:none!important
}

#current-date {
text-align:left!important;
align-items:flex-start!important
}

#monthly-budget-summary {
text-align:right!important;
align-items:flex-end!important
}

#current-date h4,#monthly-budget-summary h4 {
display:block!important;
margin:0 0 4px!important;
padding:0!important;
font-size:10px!important;
line-height:1!important;
opacity:.7!important;
font-weight:400!important
}

#current-date p,#monthly-budget-summary .remaining-budget {
display:block!important;
margin:0!important;
padding:0!important;
font-size:16px!important;
font-weight:700!important;
line-height:1!important;
height:16px!important;
overflow:visible!important
}

#balance-strip span {
color:var(--secondary-text-color)!important;
opacity:.7!important;
font-weight:400!important;
letter-spacing:.5px!important
}

#search-results-list {
padding-bottom:110px!important
}

#chart-screen,#data-screen,#calendar-screen,#monthly-history-screen,#weekly-detail-screen,#weekly-category-detail-screen,#monthly-category-detail-screen,#add-expense-category-screen,#manage-categories-screen,#add-expense-amount-screen,#view-expenses-screen,#category-detail-screen,#edit-expense-screen,#edit-category-screen {
padding-top:115px!important
}

#home-screen .header #theme-toggle-btn,#home-screen .header #open-search-btn,#home-screen .header #privacy-btn,#cal-prev-btn,#cal-next-btn,.header-icon-btn {
position:absolute!important;
top:calc(5px + env(safe-area-inset-top))!important;
margin:0!important;
z-index:2005!important
}

#home-screen .header #theme-toggle-btn,#cal-prev-btn {
left:15px!important;
right:auto!important
}

#home-screen .header #open-search-btn,#cal-next-btn {
right:15px!important;
left:auto!important
}

#home-screen .header #privacy-btn {
right:60px!important;
left:auto!important
}

#smart-insight-container {
margin-top:15px!important;
margin-bottom:0!important
}

#balance-strip {
margin-top:15px!important;
margin-bottom:0!important;
padding-top:12px!important;
padding-bottom:12px!important
}

.summary-cards {
margin-top:15px!important;
margin-bottom:0!important;
gap:15px!important
}

#savings-container {
margin-top:25px!important;
margin-bottom:0!important
}

#recent-header-btn {
padding-top:5px!important
}

#home-screen > .card:last-child {
margin-top:25px!important
}

#home-screen #smart-insight-container {
margin-top:5px!important;
margin-bottom:0!important
}

/* Mantieni overlay inattivo di default */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;            /* nascosto finché non serve */
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.0);
    pointer-events: none;
    /* transition: background-color .2s ease, opacity .2s ease; */
    overscroll-behavior: contain;
}

/* Quando il modal è visibile attivalo esplicitamente */
.modal-overlay.visible {
    display: flex !important;
    background-color: rgba(0,0,0,0.6) !important;
    pointer-events: auto !important;
    z-index: 20000 !important;
}

/* ============================================================
   GESTIONE BOX OPZIONI (Extra Budget & Contanti)
   ============================================================ */

/* 1. LAYOUT BASE (Struttura) */
.extra-budget-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    margin-top: 10px; /* Spazio uniforme sopra */
}

.extra-budget-box label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}

/* ============================================================
   FIX TITOLI GRANDI (Senza ingrandire Header)          MARGINI PERSONALIZZATI
   ============================================================ */


/* 2. Titoli ALTRE SCHERMATE ("Insights", "Archivio"...) */
.header:not(#home-screen .header) h1 {
    font-size: 28px !important; /* Un po' più grande del normale */
    line-height: 1 !important;
    margin-bottom: 5px !important;
    margin-top: -3px !important;
    padding-top: 0 !important;
}

/* 3. Aggiustamento Sottotitoli (per compensare lo spazio rubato dal titolo) */
.header p {
    font-size: 11px !important;
    margin:0!important;
    color:#fffc;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    opacity: 0.7 !important;
}

/* ============================================================
   POSIZIONE VERTICALE ICONE HEADER
   ============================================================ */
#home-screen .header #theme-toggle-btn,
#home-screen .header #open-search-btn,
#home-screen .header #privacy-btn,
#cal-prev-btn, 
#cal-next-btn,
.header-icon-btn {
    /* MODIFICA QUESTO NUMERO PER ALZARE/ABBASSARE */
    /* 5px = Vicino al bordo alto (Default) */
    /* 10px = Un po' più in basso */
    /* 15px = Centrato se l'header è molto alto */
    top: calc(-5px + env(safe-area-inset-top)) !important; 
}

/* Nascondi i box Extra Budget e Contanti solo nella sezione Entrata */
#income-input-section .extra-budget-box,
#income-input-section #extra-budget-row,
#income-input-section #cash-row {
  display: none !important;
}


/* ============================================================
   FIX SPAZIATURA SOTTO HEADER (Tira su il contenuto)
   ============================================================ */

/* 2. Per TUTTE LE ALTRE SCHERMATE (che hanno header compatti) */
#chart-screen,
#data-screen,
#calendar-screen,
#monthly-history-screen,
#weekly-detail-screen,
#weekly-category-detail-screen,
#monthly-category-detail-screen,
#add-expense-category-screen,
#manage-categories-screen,
#add-expense-amount-screen,
#view-expenses-screen,
#category-detail-screen,
#edit-expense-screen,
#edit-category-screen {
    /* Era 115px. Abbassalo. 
       Prova 90px o 95px */
    padding-top: 119px !important; 
}

/* 3. Riduciamo il margine del primo elemento (es. Smart Insight) */
#smart-insight-container {
    margin-top: 5px !important; /* Avvicina la lampadina all'header */
}

/* ============================================================
   FIX LEGGIBILITÀ HOME (Testi più Grandi)
   ============================================================ */

/* 1. STRISCIA BILANCIO (Entrate | Saldo | Conto) */
/* Le etichette (es. "Entrate") */
#balance-strip span {
    font-size: 16px !important; /* Da 9px a 11px */
    opacity: 0.9 !important;    /* Più visibile */
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/* Le cifre (es. "+€1500.00") */
#monthly-income-display,
#monthly-balance-display,
#global-balance-display {
    font-size: 16px !important; /* Da 13px a 16px */
    margin-top: 2px !important; /* Spazio per respirare */
}

/* 2. BUDGET RESIDUO (Nell'Header) */
/* L'etichetta "BUDGET RESIDUO" */
#monthly-budget-summary h4 {
    font-size: 11px !important; /* Da 10px a 11px */
    opacity: 0.9 !important;
}

/* La cifra gigante del budget */
#monthly-budget-summary .remaining-budget {
    font-size: 22px !important; /* Da 16px a 22px (Molto più grande) */
    line-height: 1.2 !important;
}

/* 3. LINK "GESTISCI" (Sopra i Wallet) */
#manage-savings-link {
    font-size: 14px !important; /* Da 12px a 14px */
    font-weight: 600 !important;
}

/* 4. DATA NELLA CARD SETTIMANA */
#weekly-date-range {
    font-size: 13px !important; /* Da 11px/12px a 13px */
    opacity: 0.8 !important;    /* Meno trasparente */
    font-weight: 500 !important;
    margin-top: 6px !important;
}

/* BONUS: Data odierna in alto a sinistra (Opzionale, per equilibrio) */
#current-date p {
    font-size: 18px !important; /* Da 16px a 18px */
}

/* ============================================================
   FIX SIMMETRIA HEADER (Etichette Identiche)
   ============================================================ */

/* Seleziona SIA "Domenica" (sx) CHE "Budget Residuo" (dx) */
#current-date h4, 
#monthly-budget-summary h4 {
    font-size: 16px !important;      /* Dimensione identica */
    opacity: 0.9 !important;         /* Stessa visibilità */
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    font-weight: 400 !important;     /* Peso normale per entrambe */
    margin: 0 0 2px 0 !important;    /* Stesso spazietto sotto */
    color: inherit !important;       /* Eredita il colore (bianco o scuro) */
}

/* Assicuriamo che la data sotto sia grande e bilanciata */
#current-date p {
    font-size: 22px !important;      /* Identica alla cifra del budget */
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* ============================================================
   FIX VISIBILITÀ SOTTOTITOLI (Tutte le schermate)
   ============================================================ */

/* Seleziona i sottotitoli di tutti gli header TRANNE quello della Home */
.header:not(#home-screen .header) p {
    margin:0!important;
    margin-top: 0 !important;

    font-size: 14px !important;      /* Aumentato da 11/12px */
    opacity: 0.95 !important;        /* Quasi completamente opaco */
    font-weight: 400 !important;     /* Peso standard */
    letter-spacing: 0.3px !important;
    margin-top: 4px !important;      /* Un po' d'aria dal titolo */
    line-height: 1.3 !important;
}

/* Opzionale: Aumenta leggermente anche i titoli principali delle altre pagine per bilanciare */
.header:not(#home-screen .header) h1 {
    font-size: 24px !important;      /* Ben visibile */
    margin-bottom: 2px !important;
}

/* ============================================================
   FIX VISIBILITÀ TOAST (Messaggi Conferma)
   ============================================================ */
#toast-message {
    /* LIVELLO MASSIMO: Vince su Navbar (19000) e Modale (20000) */
    z-index: 30000 !important; 
    
    /* POSIZIONE: Sopra la Navbar */
    bottom: 100px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: fixed !important;
    
    /* ESTETICA */
    background-color: rgba(20, 20, 20, 0.95) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    
    /* TRANSIZIONE */
    opacity: 0;
    transition: opacity 0.3s ease, bottom 0.3s ease;
}

/* Quando è attivo */
#toast-message.visible {
    opacity: 1 !important;
    bottom: 110px !important; /* Piccola animazione di salita */
}

/* ============================================================
   FONT PREMIUM (Solo Titoli Header)
   ============================================================ */

/* Applica SOLO al titolo principale H1 dentro l'Header.
   Tutto il resto (Mese, Settimana, Numeri) rimane standard. */
/* ============================================================
   FIX SPAZIATURA FONT MANROPE (Header Secondari)
   ============================================================ */

/* Aumenta lo spazio sotto il Titolo nelle pagine interne (No Home) */
.header:not(#home-screen .header) h1 {
    margin-bottom: 6px !important;  /* Aumentato da 2px a 6px */
    line-height: 1.3 !important;    /* Aumentato per evitare che le lettere g/j/p tocchino sotto */
    padding-bottom: 2px !important; /* Sicurezza extra */
}

/* ============================================================
   FIX SPLASH SCREEN: V6 (LUMINOSITÀ 0.7)
   ============================================================ */

#loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    
    /* SFONDO 0.7
       Start: 30% scuro in alto (per far vedere il cielo).
       End: 70% scuro in basso (per far risaltare la scritta).
    */
    background: 
        linear-gradient(180deg, rgba(35, 26, 56, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%),
        url('splash_bg.png') !important;
        
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    transition: opacity 0.3s ease-out !important;
}

/* Riduciamo leggermente il bagliore dietro al logo per far vedere la foto */
.splash-glow-bg {
    background: radial-gradient(circle, rgba(90, 127, 255, 0.2) 0%, transparent 60%) !important;
    opacity: 0.6 !important;
}

/* Bagliore ambientale dietro al logo */
.splash-glow-bg {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(90, 123, 237, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: breathe 3s infinite ease-in-out;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Spazio ridotto */
    position: relative;
    z-index: 2;
}

/* Scritta (Entrata + Luce che scorre) */
.splash-logo {
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1px;
    /* Gradiente più ampio per permettere l'animazione */
    background: linear-gradient(90deg, #5A7BED, #C764E3, #5A7BED);
    background-size: 200% auto; /* Raddoppia la dimensione per lo scorrimento */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    /* Combina entrata + scorrimento luce (shine) */
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards,
               shine 3s linear infinite;
}

/* Barra */
.splash-bar {
    width: 140px;
    height: 4px; /* Un pixel più alta per visibilità */
    background: rgba(255, 255, 255, 0.1); /* Sfondo del binario più visibile */
    border-radius: 10px;
    overflow: hidden;
    margin-top: 15px;
    opacity: 0;
    /* Animazione di comparsa dell'intera barra */
    animation: fadeIn 0.5s ease 0.2s forwards;
    
    /* FIX ALLINEAMENTO: Assicura che il contenuto parta da sinistra */
    display: flex;
    justify-content: flex-start; 
}

.splash-bar-fill {
    height: 100%;
    width: 0%; /* Parte TASSATIVAMENTE da 0 */
    background: linear-gradient(90deg, #5A7BED, #C764E3);
    box-shadow: 0 0 15px rgba(90, 123, 237, 0.6); /* Glow più intenso */
    border-radius: 10px;
    
    /* FIX ANIMAZIONE:
       - Duration: 1.8s (copre quasi tutto il tempo di attesa di 2s)
       - Timing: Ease-Out (parte veloce, rallenta alla fine) per senso di caricamento
       - Delay: 0.3s (aspetta che appaia il logo)
    */
    animation: loadBar 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* Footer */
.splash-footer {
    position: absolute;
    bottom: 40px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Manrope', sans-serif;
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

/* ANIMAZIONI */
@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    to { opacity: 1; }
}
/* Animazione Progressione 0 -> 100 */
@keyframes loadBar {
    0% { 
        width: 0%; 
    }
    100% { 
        width: 100%; 
    }
}
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* NUOVE ANIMAZIONI PREMIUM */

/* Effetto Galleggiamento (Zero Gravity) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Sale leggermente */
    100% { transform: translateY(0px); }
}

/* Effetto Luce che scorre nel testo */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ============================================================
   EFFETTO METEORE (SPLASH SCREEN) - V2 (Full Screen)
   ============================================================ */

.meteor-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; 
    pointer-events: none;
}

.meteor-container span {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Più grandi e visibili */
    width: 6px; 
    height: 6px;
    background: #fff;
    border-radius: 50%;
    /* Bagliore più forte */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 
                0 0 0 8px rgba(255, 255, 255, 0.1), 
                0 0 24px rgba(255, 255, 255, 1);
    animation: meteor 3s linear infinite;
    opacity: 0;
}

/* La coda della cometa (Più spessa) */
.meteor-container span::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 2px; /* Coda più spessa */
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes meteor {
    0% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: rotate(315deg) translateX(-1500px);
        opacity: 0;
    }
}

/* --- DISTRIBUZIONE A TUTTO SCHERMO --- */
/* Usiamo percentuali per coprire tutto lo schermo dall'alto al basso */

/* In alto a destra */
.meteor-container span:nth-child(1) { top: 0%; right: 0; animation-delay: 0s; animation-duration: 2.5s; }

/* Centro destra */
.meteor-container span:nth-child(2) { top: 40%; right: -100px; animation-delay: 0.2s; animation-duration: 3s; }

/* In basso a destra (per coprire la parte bassa) */
.meteor-container span:nth-child(3) { top: 80%; right: -50px; animation-delay: 0.4s; animation-duration: 2s; }

/* In alto centrale */
.meteor-container span:nth-child(4) { top: -50px; right: 40%; animation-delay: 0.6s; animation-duration: 1.5s; }

/* Centro schermo */
.meteor-container span:nth-child(5) { top: 50%; right: 20%; animation-delay: 0.8s; animation-duration: 2.5s; }

/* Molto in basso */
.meteor-container span:nth-child(6) { top: 90%; right: 10%; animation-delay: 1s; animation-duration: 3s; }

/* In alto a sinistra */
.meteor-container span:nth-child(7) { top: 10%; right: 60%; animation-delay: 1.2s; animation-duration: 1.75s; }

/* Casuale centro */
.meteor-container span:nth-child(8) { top: 30%; right: 30%; animation-delay: 1.4s; animation-duration: 1.25s; }

/* Casuale basso */
.meteor-container span:nth-child(9) { top: 70%; right: 50%; animation-delay: 0.75s; animation-duration: 2.25s; }

/* ============================================================
   FIX DEFINITIVO: TITOLI ANIMATI (SHIMMERING)
   ============================================================ */

/* 1. DEFINIZIONE ANIMAZIONE (Nome Univoco) */
@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* ============================================================
   MOTORE GRAFICO FINALE (HEADER & TITOLI)
   ============================================================ */

/* ============================================================
   DIMENSIONI TITOLI (Da mettere in fondo)
   ============================================================ */

/* Altre Pagine: Compatto */
.header:not(#home-screen .header) h1 {
    font-size: 22px !important;
    padding-top: 5px !important;
    margin-bottom: 2px !important;
}

/* ============================================================
   FIX FINALE: MATERIALE 3D + SPAZIATURA STRETTA
   ============================================================ */

/* 1. STRUTTURA HEADER (Compatta) */
#home-screen .header,
.header {
    /* Sfondo e bordi */
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;

    /* Geometria */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 85px !important;

    /* Spaziatura interna */
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;

    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    /* Stacking */
    z-index: 9000 !important;

    /* Bordo inferiore arrotondato */
    border-radius: 0 0 24px 24px !important;
}

/* 3. VICINANZA CARD (Il trucco per avvicinare tutto) */
/* Riduciamo questo valore per tirare su la card verso l'header */
#home-screen {
    padding-top: 150px !important; 
}

/* Altre pagine */
#chart-screen, 
#data-screen, 
#calendar-screen, 
#manage-categories-screen, 
#add-expense-category-screen {
    padding-top: 120px !important;
}

/* 4. ICONE */
#home-screen .header #theme-toggle-btn,
#home-screen .header #open-search-btn,
#home-screen .header #privacy-btn,
#cal-prev-btn,
#cal-next-btn,
.header-icon-btn {
    position: absolute !important;
    top: calc(15px + env(safe-area-inset-top)) !important;
    z-index: 9001 !important;
}

#home-screen .header #theme-toggle-btn, .header-icon-btn.left { left: 15px !important; }
#home-screen .header #open-search-btn, .header-icon-btn.right { right: 15px !important; }
#home-screen .header #privacy-btn { right: 60px !important; }

/* ============================================================
   BLOCCO ROTAZIONE PREMIUM V2 (Full Screen Meteors)
   ============================================================ */

#landscape-overlay {
    display: none;
}

@media screen and (orientation: landscape) {
    
    /* Blocca scorrimento e fissa altezza */
    html, body {
        overflow: hidden !important;
        height: 100% !important;
        width: 100% !important;
        position: fixed !important; /* Inchioda tutto */
    }

    #landscape-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 200000 !important; /* Sopra a tutto */
        
        /* Sfondo Spaziale */
        background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%) !important;
        
        /* Centratura */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        
        /* Abilita interazione se serve */
        pointer-events: auto;
    }

    /* --- FIX METEORE ORIZZONTALI --- */
    /* Espandiamo il contenitore per coprire la larghezza maggiore */
    #landscape-overlay .landscape-meteors {
        width: 150vw !important; /* Più largo dello schermo */
        height: 150vh !important;
        left: -25vw; /* Centra l'espansione */
        top: -25vh;
    }
    
    /* Rendiamo le meteore più lunghe e veloci in orizzontale */
    #landscape-overlay .landscape-meteors span::before {
        width: 400px !important; /* Coda più lunga */
    }

    /* --- ICONA TELEFONO ANIMATA --- */
    .rotate-animation-wrapper svg {
        color: #fff;
        /* Animazione che suggerisce la rotazione */
        animation: rotatePhoneHint 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }
}

/* Animazione: Dondola da verticale a orizzontale e torna indietro */
@keyframes rotatePhoneHint {
    0% { transform: rotate(-90deg); opacity: 0.5; } /* Parte orizzontale (sbagliato) */
    40% { transform: rotate(0deg); opacity: 1; }    /* Arriva verticale (giusto) */
    80% { transform: rotate(0deg); opacity: 1; }    /* Resta un attimo */
    100% { transform: rotate(-90deg); opacity: 0.5; } /* Ricomincia */
}

/* ============================================================
   ENERGY BLADES FIXED (Logica Unificata - Direzione Invertita)
   ============================================================ */

/* 1. Motore Animazione (Scorrimento INVERTITO) */
@keyframes bladeFlow {
    0% { background-position: 200% 50%; } /* Parte da destra */
    100% { background-position: 0% 50%; } /* Scorre verso sinistra */
}

/* 2. Struttura Base Lama */
.week-blade {
    height: 6px;
    width: 24px;
    border-radius: 2px;
    margin-left: 6px;
    transform: skewX(-20deg);
    position: relative;
    overflow: hidden;
    
    /* FIX CRITICO: Animiamo solo trasformazione e opacità. */
    transition: transform 0.2s, opacity 0.2s !important;
}

/* 3. Lama Corrente (Animata) - Base */
.blade-current {
    /* Fondamentale: Lo sfondo deve essere largo il doppio per scorrere */
    background-size: 200% 100% !important;
    background-color: transparent !important;
    
    /* Avvia animazione */
    animation: bladeFlow 3s infinite linear !important;
    
    opacity: 1 !important;
    z-index: 5;
    transform: skewX(-20deg) scale(1.15); 
}

/* 6. Lame Future (Spente) */
.blade-inactive {
    background: var(--secondary-text-color) !important;
    opacity: 0.2 !important;
}

/* ============================================================
   FIX ACCESSIBILITÀ iOS (Disabilita selezione testo)
   ============================================================ */

/* Blocca selezione testo su tutti gli elementi */
* {
    -webkit-user-select: none !important; 
    user-select: none !important;
}

/* ECCEZIONE: Permetti la selezione SOLO negli input di testo (dove serve!) */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* FIX TESTO TITOLI HEADER (Che a volte vengono bloccati dal sistema) */
.header h1, .header p {
    -webkit-touch-callout: none !important; /* Rimuove il pop-up di default */
}

/* ============================================================
   FIX RICERCA BLOCCATA (Overlay Supremo)
   ============================================================ */

#search-overlay {
    /* LIVELLO: Altissimo, sopra Header e Navbar */
    z-index: 25000 !important; 
    
    /* POSIZIONE: Copre tutto lo schermo */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* SFONDO: Solido (non trasparente) per coprire l'app sotto */
    background-color: var(--bg-color-top) !important;
    
    /* INTERAZIONE: Blocca i click sotto */
    pointer-events: auto !important;
}

/* Barra di ricerca in alto (Input + Annulla) */
.search-header-container {
  /* Spazio per il Notch (Safe Area) */
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;

  /* Sfondo distinto per la barra */
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);

  /* Layout */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- FIX LEGGIBILITÀ CLASSIFICA MESE --- */

/* 1. Ingrandiamo il contenitore e il testo */
.category-summary-item .amount {
    font-size: 19px !important;      /* Più grande (era 16/18) */
    font-weight: 800 !important;     /* Molto grassetto */
    letter-spacing: 0.5px;
    opacity: 1 !important;           /* Massima visibilità */
}

/* ============================================================
   LOGICA SCAMBIO ICONE (V2 - FALLBACK SICURO)
   ============================================================ */

/* 1. IMPOSTAZIONI BASE */
.summary-icon-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
    object-fit: contain;
    padding: 0 !important;
    background: none !important;
}

/* 2. COMPORTAMENTO DI DEFAULT (Se JS fallisce, mostra Dark) */
.img-dark { display: block !important; }
.img-light { display: none !important; }

/* ============================================================
   TEMA DARK "MOONLIGHT TWILIGHT" (V7 - SOFT WHITE #f5f5f7)
   Sfondo: Blu Notte Profondo
   Accenti: Indaco -> Viola -> Fucsia
   Bianchi: Sostituiti con #f5f5f7 (Soft White)
   ============================================================ */

body.theme-pro-dark {
    /* 1. VARIABILI */
    background-color: transparent !important; 
    --header-grad: linear-gradient(90deg, #5A7FFF 0%, #D926A9 25%, #FFFFFF 50%, #D926A9 75%, #5A7FFF 100%);
    --bg-color-top: #231a38 !important;
    --bg-color-bottom: #121216 !important;
    
    --card-bg: rgba(30, 30, 40, 0.6) !important;
    
    /* Bordo Soft White */
    --glass-border: rgba(245, 245, 247, 0.15) !important;
    
    --text-color: #f5f5f7 !important; /* Soft White */
    --secondary-text-color: #a0a0a5 !important; 
    
    --input-bg: rgba(0, 0, 0, 0.3) !important;
    
    /* Bordo Input Soft White */
    --border-color: rgba(245, 245, 247, 0.2) !important;
    
    /* Colori Stato */
    --primary-color: #0A84FF !important;
    --primary-dark: #007AFF !important;
    --green: #05ab3a !important;
    --yellow: #FF9F0A !important;
    --orange: #FF700A !important;
    --red: #FF453A !important;
    
    --toast-bg: #2C2C2E !important;
    
    /* TWILIGHT COLORS */
    --neb-1: #5A7FFF; 
    --neb-2: #A855C9; 
    --neb-3: #D926A9; 
}

/* 2. SFONDO MOONLIGHT */
body.theme-pro-dark::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background-image: linear-gradient(180deg, #231a38 0%, #121216 100%) !important;
    background-size: auto; filter: none; opacity: 1;
}

/* 3. CARD & BOX */
body.theme-pro-dark .card,
body.theme-pro-dark .total-box,
body.theme-pro-dark .category-item,
body.theme-pro-dark .expense-category-item,
body.theme-pro-dark .recent-expense-item,
body.theme-pro-dark .saving-goal-card,
body.theme-pro-dark .btn:not(.btn-secondary),
body.theme-pro-dark .btn-secondary,
body.theme-pro-dark .btn-danger,
body.theme-pro-dark .tag-chip,
body.theme-pro-dark .extra-budget-box {
    background-image: none !important;
    background: linear-gradient(145deg, rgba(60, 60, 80, 0.5) 0%, rgba(20, 20, 30, 0.8) 100%) !important;
    color: var(--text-color) !important;
    
    /* Bordi Soft White */
    border: 1px solid rgba(245, 245, 247, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    
    backdrop-filter: blur(20px) !important;
    position: relative !important; z-index: 1;
    border-radius: 14px !important; overflow: hidden !important;
}

/* 4. BORDI TWILIGHT */
body.theme-pro-dark .category-item::before,
body.theme-pro-dark .btn:not(.btn-secondary)::before,
body.theme-pro-dark .btn-secondary::before,
body.theme-pro-dark .btn-danger::before,
body.theme-pro-dark .expense-category-item::before,
body.theme-pro-dark .recent-expense-item::before,
body.theme-pro-dark .tag-chip::before,
body.theme-pro-dark #monthly-history-grid .expense-category-item::before,
body.theme-pro-dark #chart-screen .card::before {
    display: block !important; content: ''; position: absolute; inset: 0;
    padding: 1.5px !important; border-radius: 14px;
    background: linear-gradient(135deg, var(--neb-1), var(--neb-2), var(--neb-3)) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor; mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: 5; pointer-events: none; opacity: 0.8 !important; filter: brightness(1.2);
}

/* 5. BARRE LATERALI */
body.theme-pro-dark .category-item::after,
body.theme-pro-dark .expense-category-item::after,
body.theme-pro-dark .recent-expense-item::after,
body.theme-pro-dark #monthly-history-grid .expense-category-item::after {
    content: ''; display: block !important; position: absolute;
    left: 0; top: 15%; height: 70%; width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--neb-1), var(--neb-3));
    z-index: 6;
}
/* Eccezioni */
body.theme-pro-dark .btn::after,
body.theme-pro-dark .btn-secondary::after,
body.theme-pro-dark .tag-chip::after,
body.theme-pro-dark #chart-screen .card::after { display: none !important; }

/* 6. STATI ATTIVI */
body.theme-pro-dark .category-item:active,
body.theme-pro-dark .btn:active,
body.theme-pro-dark .btn-secondary:active,
body.theme-pro-dark .recent-expense-item:active,
body.theme-pro-dark .expense-list-item:active,
body.theme-pro-dark .tag-chip:active {
    background: #2C2C35 !important;
    transform: translateY(1px);
}
body.theme-pro-dark .category-item:active::before,
body.theme-pro-dark .btn:active::before,
body.theme-pro-dark .tag-chip:active::before { display: none !important; }

/* 7. HEADER, NAV E INPUT */
body.theme-pro-dark #home-screen .header, body.theme-pro-dark .header {
    background-color: rgba(30, 25, 45, 0.85) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    /* Bordo Soft White */
    border-bottom: 1px solid rgba(245, 245, 247, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
body.theme-pro-dark .bottom-nav-bar {
    background-color: rgba(30, 25, 45, 0.95) !important;
    background-image: none !important;
    /* Bordo Soft White */
    border-top: 1px solid rgba(245, 245, 247, 0.15) !important;
    backdrop-filter: blur(25px) !important;
}
body.theme-pro-dark input, body.theme-pro-dark textarea, body.theme-pro-dark select {
    background-color: rgba(0, 0, 0, 0.3) !important; 
    /* Bordo Input Soft White */
    border: 1px solid rgba(245, 245, 247, 0.2) !important; 
    color: var(--text-color) !important;
}
/* Icona Select SVG aggiornata con colore #f5f5f7 */
body.theme-pro-dark .input-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* 8. TESTI GRADIENTE */
body.theme-pro-dark label, body.theme-pro-dark option { color: var(--text-color) !important; }

body.theme-pro-dark .total-box h3,
body.theme-pro-dark #monthly-card-title, 
body.theme-pro-dark #weekly-card-title,
body.theme-pro-dark #weekly-card-title span,
body.theme-pro-dark .amount, 
body.theme-pro-dark .expense-category-item .amount,
body.theme-pro-dark #stat-total-count,
body.theme-pro-dark #stat-categories-count {
    background: linear-gradient(90deg, var(--neb-1) 0%, var(--neb-2) 50%, var(--neb-3) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800 !important; 
}

/* NAVIGAZIONE ATTIVA */
body.theme-pro-dark .nav-btn.active span,
body.theme-pro-dark .nav-btn.active svg {
    background: linear-gradient(135deg, var(--neb-1), var(--neb-3)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important; stroke: var(--neb-2) !important;
}

body.theme-pro-dark .category-summary-item .amount.status-green { color: var(--green) !important; }
body.theme-pro-dark .category-summary-item .amount.status-red { color: var(--red) !important; }

/* FIX LEGGIBILITÀ */
.header p, 
.input-group p, 
div[style*="font-size:11px"], 
div[style*="font-size: 11px"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    color: var(--secondary-text-color) !important;
} 

/* Grafico */
body.theme-pro-dark #chart-screen .card {
    background: linear-gradient(160deg, #28283299, #0a0a0fcc) !important;
    border: 1px solid rgba(245, 245, 247, 0.1) !important; /* Soft White Border */
    box-shadow: 0 10px 30px #00000080 !important;
}

/* Pulsante Google */
body.theme-pro-dark .btn-social.google { 
    background-color: #f5f5f7 !important; /* Soft White */
    color: #000 !important; box-shadow: none !important; 
}

/* Toast */
body.theme-pro-dark #toast-message { 
    background-color: var(--toast-bg) !important; 
    color: var(--text-color) !important; 
}

/* Icone e Bottoni Header (Glass Soft White) */
body.theme-pro-dark #open-search-btn, 
body.theme-pro-dark #privacy-btn, 
body.theme-pro-dark .header-icon-btn,
body.theme-pro-dark #theme-toggle-btn {
    background: rgba(245, 245, 247, 0.1) !important; /* Soft White Alpha */
    color: #D926A9 !important; /* Soft White */
    opacity: 1 !important;
}

body.theme-pro-dark .img-dark { display: block !important; }
body.theme-pro-dark .img-light { display: none !important; }

/* ============================================================
   FIX ANIMAZIONI TWILIGHT (CON SOFT WHITE)
   ============================================================ */

/* 2. ENERGY BLADE (Barra Settimana) */
body.theme-pro-dark .blade-current {
    background-image: linear-gradient(
        110deg, 
        #5A7FFF 0%,    /* Start: Blu */
        #D926A9 25%,   /* Fucsia */
        #f5f5f7 50%,   /* LUCE SOFT WHITE */
        #D926A9 75%,   /* Fucsia */
        #5A7FFF 100%   /* End: Blu */
    ) !important;
    
    box-shadow: 0 0 15px rgba(217, 38, 169, 0.6) !important; 
    border: 1px solid rgba(245, 245, 247, 0.5) !important; /* Bordo Soft White */
    
    background-size: 200% 100% !important;
    animation: bladeFlow 3s infinite linear !important;
}

/* 3. LAME PASSATE (Statiche) */
body.theme-pro-dark .blade-active:not(.blade-current) {
    background: linear-gradient(90deg, #5A7FFF, #D926A9) !important;
    opacity: 0.7 !important;
}
/* ============================================================
   FIX FLUIDITÀ SPLASH SCREEN (LOOP PERFETTO)
   ============================================================ */

/* 1. Motore dedicato (Scorrimento lungo) */
@keyframes splashFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 2. Scritta con gradiente ciclico */
.splash-logo {
    font-size: 42px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    display: block !important;
    
    /* IL SEGRETO DELLA FLUIDITÀ:
       Start (Blu) -> Luce (Bianco) -> End (Blu).
       Inizia e finisce con lo stesso colore (#5A7FFF), così non vedi lo scatto.
    */
    background-image: linear-gradient(
        90deg,
        #5A7FFF 0%,    /* Blu Indaco */
        #D926A9 25%,   /* Rosa Fucsia */
        #FFFFFF 50%,   /* LUCE CENTRALE */
        #D926A9 75%,   /* Rosa Fucsia */
        #5A7FFF 100%   /* Blu Indaco (Chiude il cerchio) */
    ) !important;
    
    /* La dimensione deve essere 200% per contenere tutto il ciclo */
    background-size: 200% auto !important;
    
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    
    /* Animazione lineare (senza accelerazioni/frenate) */
    animation: splashFlow 3s linear infinite !important;
    
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   SPLASH ICON (UNIFICATO: ANIMAZIONE + GLOW)
   ============================================================ */
.splash-icon svg {
    /* 1. Dimensioni e Stato Iniziale */
    width: 60px;
    height: 60px;
    opacity: 0;
    transform: translateY(20px);

    /* 2. Animazioni Combinate (Entrata scattante + Galleggiamento lento) */
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, 
               float 6s ease-in-out infinite 0.8s;

    /* 3. Stile Visuale (Spessore aumentato per catturare il colore) */
    stroke-width: 2.5px !important;
   
    /* 4. Visibilità */
    overflow: visible !important; /* Fondamentale per non tagliare l'ombra luminosa */
}



/* ============================================================
   FIX DOPPIA FRECCIA (Rimuove freccia di sistema)
   ============================================================ */
select {
    -webkit-appearance: none !important; /* Per Safari/Chrome */
    -moz-appearance: none !important;    /* Per Firefox */
    appearance: none !important;         /* Standard */
}

/* ============================================================
   FIX SPAZIO FILTRI: TESTO PIÙ GRANDE (V2)
   ============================================================ */

#chart-period, 
#chart-category-select {
    /* 1. Aumentiamo il font (da 12px a 13.5px) */
    font-size: 13.5px !important;
    font-weight: 600 !important; /* Un po' meno grassetto per risparmiare spazio */
    
    /* 2. Trucco "Salva Spazio": stringe leggermente le lettere */
    letter-spacing: -0.3px !important;
    
    /* 3. Padding ottimizzato */
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 8px !important;
    padding-right: 22px !important; /* Spazio per la freccia */
    
    /* 4. Freccia */
    background-position: right 6px center !important;
    background-size: 12px !important;
    
    /* 5. Gestione testo lungo (taglia col puntini se non ci sta) */
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* ============================================================
   FIX FORZATO TAB GRAFICI (GRID 50/50)
   ============================================================ */

/* Seleziona il primo gruppo di input dentro la card del grafico */
#chart-screen .card > .input-group:first-of-type {
    display: grid !important;
    /* Due colonne identiche al millimetro */
    grid-template-columns: 1fr 1fr !important; 
    gap: 10px !important;
    width: 100% !important;
}

/* Resetta i contenitori interni */
#chart-screen .card > .input-group:first-of-type > div {
    width: 100% !important;
    min-width: 0 !important;
    /* Disattiva le vecchie regole flex che rompevano le misure */
    flex: unset !important; 
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Assicura che il selettore riempia tutto lo spazio disponibile */
#chart-period, 
#chart-category-select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   TEMA LIGHT "SOLID PLATINUM" (V11 - LIGHTER CARDS)
   Card: #F5F5F7 (Grigio Ghiaccio) - Molto luminoso
   Sfondo: #E5E5EA (Grigio Sistema)
   ============================================================ */

body.theme-pro-light {
    /* 1. VARIABILI */
    background-color: transparent !important; 
    --header-grad: linear-gradient(90deg, #5A7FFF 0%, #D926A9 25%, #7d7d7d 50%, #D926A9 75%, #5A7FFF 100%);
    /* Sfondo Solido (Resta Grigio Medio per contrasto) */
    --bg-color-top: #E5E5EA !important;    
    --bg-color-bottom: #E5E5EA !important; 
    
    /* Card Solide (Grigio Ghiaccio - QUASI BIANCO) */
    --card-bg: #F5F5F7 !important; 
    
    --glass-border: #D1D1D6 !important;
    
    /* Testi (SOFT BLACK) */
    --text-color: #736672 !important;       
    --secondary-text-color: #3C3C43 !important; 
    
    /* Input BIANCHI PURI */
    --input-bg: #FFFFFF !important;
    --border-color: #C7C7CC !important;
    
    /* Colori Stato */
    --primary-color: #0A84FF !important;
    --primary-dark: #007AFF !important;
    
    --green: #05ab3a !important; 
    --yellow: #FF9F0A !important; /* Giallo Oro */
    --orange: #FF700A !important; /* Arancio Acceso (Ben diverso dal rosso) */
    --red: #FF453A !important;    /* Rosso Apple (Ben diverso dall'arancio) */
    
    --toast-bg: #252527 !important;
    
    /* TWILIGHT COLORS */
    --neb-1: #5A7FFF; 
    --neb-2: #A855C9; 
    --neb-3: #D926A9; 
}

/* 2. SFONDO SOLIDO */
body.theme-pro-light::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: #E5E5EA !important;
    opacity: 1;
}

/* 3. CARD & BOX (Nuovo Colore Chiaro) */
body.theme-pro-light .card,
body.theme-pro-light .total-box,
body.theme-pro-light .category-item,
body.theme-pro-light .expense-category-item,
body.theme-pro-light .recent-expense-item,
body.theme-pro-light .saving-goal-card,
body.theme-pro-light .btn:not(.btn-secondary),
body.theme-pro-light .btn-secondary,
body.theme-pro-light .btn-danger,
body.theme-pro-light .tag-chip,
body.theme-pro-light .extra-budget-box {
    background-image: none !important;
    background-color: #F5F5F7 !important; /* LIGHTER GREY */
    color: var(--text-color) !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    position: relative !important; z-index: 1;
    border-radius: 14px !important; overflow: hidden !important;
}

/* 4. BORDI TWILIGHT */
body.theme-pro-light .category-item::before,
body.theme-pro-light .btn:not(.btn-secondary)::before,
body.theme-pro-light .btn-secondary::before,
body.theme-pro-light .btn-danger::before,
body.theme-pro-light .expense-category-item::before,
body.theme-pro-light .recent-expense-item::before,
body.theme-pro-light .tag-chip::before,
body.theme-pro-light #monthly-history-grid .expense-category-item::before,
body.theme-pro-light #chart-screen .card::before {
    display: block !important; content: ''; position: absolute; inset: 0;
    padding: 1.5px !important; border-radius: 14px;
    background: linear-gradient(135deg, var(--neb-1), var(--neb-2), var(--neb-3)) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor; mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    z-index: 5; pointer-events: none; opacity: 1 !important;
}

/* 5. BARRE LATERALI */
body.theme-pro-light .category-item::after,
body.theme-pro-light .expense-category-item::after,
body.theme-pro-light .recent-expense-item::after,
body.theme-pro-light #monthly-history-grid .expense-category-item::after {
    content: ''; display: block !important; position: absolute;
    left: 0; top: 15%; height: 70%; width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--neb-1), var(--neb-3));
    z-index: 6;
}
/* Eccezioni */
body.theme-pro-light .btn::after,
body.theme-pro-light .btn-secondary::after,
body.theme-pro-light .tag-chip::after,
body.theme-pro-light #chart-screen .card::after { display: none !important; }

/* 6. STATI ATTIVI */
body.theme-pro-light .category-item:active,
body.theme-pro-light .btn:active,
body.theme-pro-light .btn-secondary:active,
body.theme-pro-light .recent-expense-item:active,
body.theme-pro-light .expense-list-item:active,
body.theme-pro-light .tag-chip:active {
    background-color: #E5E5EA !important; 
    transform: translateY(1px);
}
body.theme-pro-light .category-item:active::before,
body.theme-pro-light .btn:active::before,
body.theme-pro-light .tag-chip:active::before { display: none !important; }

/* 7. HEADER, NAV E INPUT */
body.theme-pro-light #home-screen .header, body.theme-pro-light .header {
    background-color: #F5F5F7 !important; /* Header Chiaro */
    backdrop-filter: none !important;
    border-bottom: 1px solid #D1D1D6 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}
body.theme-pro-light .bottom-nav-bar {
    background-color: #F5F5F7 !important; /* Navbar Chiara */
    border-top: 1px solid #D1D1D6 !important;
    backdrop-filter: none !important;
}
body.theme-pro-light input, body.theme-pro-light textarea, body.theme-pro-light select {
    background-color: #FFFFFF !important; 
    border: 1px solid #C7C7CC !important; 
    color: #736672 !important; 
}
body.theme-pro-light .input-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* 8. ICONE HEADER */
body.theme-pro-light .header-icon-btn {
    background-color: #E5E5EA !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: none !important;
    color: #D926A9 !important; 
}
body.theme-pro-light .header-icon-btn svg { stroke: #D926A9 !important; }

/* 9. TESTI E BILANCIO */
body.theme-pro-light label, body.theme-pro-light option { color: var(--text-color) !important; }
/* LEGGIBILITÀ */
.header p, 
.input-group p, 
div[style*="font-size:11px"], 
div[style*="font-size: 11px"] {
    font-size: 13px !important;      
    font-weight: 600 !important;     
    opacity: 1 !important;           
    color: var(--secondary-text-color) !important;
}

/* CONTO BLU */
body.theme-pro-light #balance-strip span {
    color: #736672 !important; 
    opacity: 0.8 !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #736672 !important;
}
body.theme-pro-light #global-balance-display {
    color: var(--primary-color) !important; 
    -webkit-text-fill-color: var(--primary-color) !important;
    background: none !important;
}

/* VERDE */
body.theme-pro-light #monthly-budget-summary .remaining-budget[style*="rgb(52, 199, 89)"], 
body.theme-pro-light #monthly-income-display,
body.theme-pro-light .amount.status-green,
body.theme-pro-light .expense-list-item .amount[style*="green"],
body.theme-pro-light .category-summary-item .amount[style*="green"],
body.theme-pro-light .amount[style*="color: var(--green)"] {
    color: var(--green) !important;
    -webkit-text-fill-color: var(--green) !important;
    font-weight: 800 !important;
    background: none !important;
}

/* BUDGET RESIDUO */
body.theme-pro-light #monthly-budget-summary .remaining-budget {
    color: #736672 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

/* GRADIENTI */
body.theme-pro-light .total-box h3,
body.theme-pro-light #monthly-card-title, 
body.theme-pro-light #weekly-card-title,
body.theme-pro-light #weekly-card-title span,
body.theme-pro-light .amount:not(.status-green):not(.status-red):not(.status-orange):not([style*="green"]):not([style*="var(--primary-color)"]), 
body.theme-pro-light .expense-category-item .amount,
body.theme-pro-light #stat-total-count,
body.theme-pro-light #stat-categories-count {
    background: linear-gradient(90deg, var(--neb-1) 0%, var(--neb-2) 50%, var(--neb-3) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800 !important;
    display: inline-block !important; 
}

/* NAVIGAZIONE */
body.theme-pro-light .nav-btn.active span,
body.theme-pro-light .nav-btn.active svg {
    background: linear-gradient(135deg, var(--neb-1), var(--neb-3)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
    stroke: var(--neb-2) !important;
}

/* 10. ELEMENTI SPECIALI */
body.theme-pro-light .category-summary-item .amount {
    background: none !important; -webkit-text-fill-color: initial !important; color: var(--text-color) !important;
}
body.theme-pro-light .category-summary-item .amount.status-green { color: var(--green) !important; }
body.theme-pro-light .category-summary-item .amount.status-red { color: var(--red) !important; }
body.theme-pro-light .category-summary-item .amount.status-orange { color: var(--orange) !important; }

/* FINESTRE UNIFORMATE AL GRIGIO GHIACCIO */
body.theme-pro-light #chart-screen .card,
body.theme-pro-light #quick-actions-menu,
body.theme-pro-light .search-header-container,
body.theme-pro-light .btn-social.google {
    background-color: #F5F5F7 !important; /* LIGHTER GREY */
    border: 1px solid #D1D1D6 !important;
}

/* Barra Settimana Animata */
body.theme-pro-light .blade-current {
    background-image: linear-gradient(
        110deg, 
        var(--neb-1) 0%, var(--neb-2) 35%, #FFF 50%, var(--neb-2) 65%, var(--neb-1) 100%
    ) !important;
    box-shadow: 0 0 10px rgba(168, 85, 201, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Gestione Icone */
body.theme-pro-light .img-light { display: block !important; }
body.theme-pro-light .img-dark { display: none !important; }

/* Toast */
body.theme-pro-light #toast-message { background-color: #736672 !important; color: #FFF !important; }
/* ============================================================
   FIX LEGGIBILITÀ TESTI HEADER (TEMA LIGHT)
   Scurisce data, etichette budget e sottotitoli
   ============================================================ */

/* 1. Sottotitoli generici (es. "Panoramica mensile", "Scopri dove vanno...") */
body.theme-pro-light .header p {
    color: #736672 !important; /* Grigio Antracite */
    opacity: 0.9 !important;   /* Quasi pieno */
    font-weight: 600 !important;
}

/* 2. Giorno della settimana (es. "VENERDÌ") */
body.theme-pro-light #current-date h4 {
    color: #736672 !important; /* Grigio Scuro */
    opacity: 1 !important;     /* Niente trasparenza */
    font-weight: 700 !important;
}

/* 3. Etichetta "BUDGET RESIDUO" */
body.theme-pro-light #monthly-budget-summary h4 {
    color: #736672 !important; /* Grigio Scuro */
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* 4. Data Principale (es. "5 Dicembre") */
body.theme-pro-light #current-date p {
    color: #736672 !important; /* Nero Morbido */
    opacity: 1 !important;
}

/* ============================================================
   FIX NAVBAR TEMA LIGHT (ICONE CHIARE)
   Rende le icone inattive più chiare e leggere
   ============================================================ */

body.theme-pro-light .nav-btn:not(.active) {
    color: #736672 !important; /* Grigio Chiaro (Silver) */
    opacity: 1 !important;     /* Rimuove opacità strana */
}

body.theme-pro-light .nav-btn:not(.active) span {
    color: #736672 !important;
    -webkit-text-fill-color: #736672 !important;
}

/* L'icona attiva rimane col gradiente */
body.theme-pro-light .nav-btn.active {
    opacity: 1 !important;
}

/* ============================================================
                MENU RAPIDO V2 
   ============================================================ */

/* 1. OVERLAY (Sfondo Scuro) */
/* --- FIX OVERLAY --- */
#quick-actions-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 30000 !important; /* Altissimo */
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px);
    display: none;
}

#quick-actions-overlay.hidden {
    display: none !important;
}

#quick-actions-overlay:not(.hidden) {
    display: block !important;
}

/* --- FIX MENU (NO TRANSFORM) --- */
#quick-actions-menu {
    position: fixed !important;
    z-index: 30001 !important; /* Sopra l'overlay */
    
    /* POSIZIONAMENTO SENZA TRANSFORM (Anti-Bug) */
    bottom: 120px !important;
    left: 0 !important; 
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* DIMENSIONI FISSE */
    width: 260px !important;
    max-width: 80% !important;
    
    /* VISIBILITÀ */
    display: none; /* Nascosto di base */
    flex-direction: column !important;
    
    /* STILE (Fallback solido se il tema fallisce) */
    background-color: #222 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

/* STILE SPECIFICO PER TEMA LIGHT (Sovrascrive il default) */
body.theme-pro-light #quick-actions-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    color: #000 !important;
}

/* STILE SPECIFICO PER TEMA DARK (Sovrascrive il default) */
body.theme-pro-dark #quick-actions-menu {
    background-color: rgba(30, 30, 40, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* CLASSE VISIBILE */
#quick-actions-menu.visible {
    display: flex !important; /* Forza la visualizzazione */
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animazione Semplice (Senza conflitti di layout) */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

#quick-actions-menu.hidden {
    display: none !important;
}

/* 4. SOVRASCRITTURA TEMI (Colori corretti) */

/* TEMA LIGHT: Bianco */
body.theme-pro-light #quick-actions-menu {
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    border: 1px solid #D1D1D6 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* TEMA DARK: Vetro Scuro */
body.theme-pro-dark #quick-actions-menu {
    background: rgba(25, 25, 35, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* 5. VOCI DEL MENU */
.quick-action-item {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background:#ffffff0d;
    font-weight: 700;
    font-size:14px;
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}

.quick-action-item:active {
transform:scale(0.96);
background:#ffffff1a
}

/* Colori voci Dark */
body.theme-pro-dark .quick-action-item { background: rgba(255,255,255,0.1); }
/* Colori voci Light */
body.theme-pro-light .quick-action-item { background: #F2F2F7; color: #1F2937; }

/* 6. HEADER MENU */
.quick-actions-header {
    text-align: center;
    font-size: 16px;
    text-transform: capitalize;
    opacity: 0.6;
    margin-bottom: 10px;
    letter-spacing:1px
}

/* --- CALENDARIO STILE "OUTLINE" (Fix Invisibilità) --- */

/* 1. GIORNO "OGGI" (Testo Gradiente) */
.calendar-day.is-today {
    border: none !important;
    
    /* Definiamo il gradiente per il testo */
    background-image: linear-gradient(135deg, #5A7BED, #C764E3) !important;
    background-size: 100%;
    
    /* Ritagliamo il gradiente sulla forma del testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    font-weight: 900 !important;
    font-size: 16px !important;
}

/* 2. GIORNO SELEZIONATO (Generico) */
.calendar-day.selected {
    /* Sfondo trasparente per far vedere solo il bordo */
    background: transparent !important; 
    box-shadow: none !important;
    border: none !important;
    
    /* Testo normale (verrà sovrascritto se è "Oggi") */
    -webkit-text-fill-color: var(--text-color) !important;
    color: var(--text-color) !important;
    
    position: relative;
    font-weight: 700;
}

/* 3. IL BORDO SOTTILE (Tramite pseudo-elemento) */
.calendar-day.selected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 2px; /* Spessore bordo */
    background: linear-gradient(135deg, #5A7BED, #C764E3); 
    
    /* Versione WebKit (Chrome, Safari, iOS) */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    /* Versione Standard (Firefox, ecc.) - AGGIUNTA PER RISOLVERE IL WARNING */
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask-composite: exclude;
    
    pointer-events: none;
}

/* 4. FIX CRITICO: OGGI + SELEZIONATO */
/* Quando "Oggi" è selezionato, forziamo il ritorno del gradiente sul testo */
.calendar-day.is-today.selected {
    background-image: linear-gradient(135deg, #5A7BED, #C764E3) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 5. Pallino indicatore */
.day-indicator {
    background-color: #FF3B30 !important;
    box-shadow: none !important;
}

/* --- FIX BORDO ICONA SOLE (TEMA LIGHT) --- */
body.theme-pro-light #home-screen .header #theme-toggle-btn {
    border: 1px solid #D1D1D6 !important; /* Grigio visibile */
    background-color: #E5E5EA !important; /* Sfondo coerente */
    box-shadow: none !important;
}


/* Tipografia Interna */
.modal-content h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.modal-content p {
    margin-bottom: 25px !important;
    opacity: 0.8 !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

/* --- FIX VISIBILITÀ CHECKBOX MANUALE --- */
/* Seleziona il div che ha lo sfondo arancione e lo forza ad apparire */
div[style*="rgba(255, 159, 10, 0.15)"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px; /* Altezza minima per evitare che collassi */
}

/* ============================================================
   STILE TITOLI WALLET (Fix Gradiente Compatto)
   ============================================================ */
.goal-name {
    /* 1. Geometria del testo */
    font-size: 18px;
    font-weight: 800;
    
    /* 2. Troncamento (Ellipsis) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 3. IL FIX FONDAMENTALE */
    /* Il box si stringe attorno al testo, così il gradiente si vede tutto */
    width: fit-content !important; 
    max-width: 100%; /* Ma non deve uscire dalla card se il nome è lunghissimo */
    display: block;
    
    /* 4. Colore Gradiente */
    background-image: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    
    /* Forza il background a stare dentro i confini del testo */
    background-size: 100% auto;
}

/* ============================================================
   FIX GLOBALE GRADIENTI TESTO (GEOMETRIA COMPATTA)
   Forza tutti i testi gradiente ad adattarsi al contenuto
   per mostrare l'intera sfumatura (Blu -> Viola -> Rosa)
   ============================================================ */

/* 1. Titoli Card Home (Mese, Settimana) */
.total-box h3, 
#monthly-card-title, 
#weekly-card-title {
    width: fit-content !important;
    display: block !important;
    margin-right: auto !important; /* Allinea a sinistra */
}

/* 2. Cifre nelle Card (Griglia Home) */
.expense-category-item .amount {
    width: fit-content !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important; /* Centrato */
}

/* 3. Statistiche (Schermata Archivio) */
#stat-total-count, 
#stat-categories-count {
    width: fit-content !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

/* 4. Etichette Navbar Attive */
.nav-btn.active span {
    width: fit-content !important;
    display: inline-block !important;
}

.nav-btn-add-special span,
.nav-btn-add-special.active span {
    display: none !important;
}

/* 6. Importi nelle liste (Facoltativo, spesso sono a destra) */
.amount {
    width: fit-content !important;
    /* Non forziamo display qui per non rompere i flex container delle liste */
}

/* ============================================================
   FIX GRADIENTI DARK MODE (Uniformità con Light)
   Applica il gradiente alle cifre nelle liste Mese/Settimana
   Esclude i colori di stato (Verde, Rosso, Arancio)
   ============================================================ */

body.theme-pro-dark .category-summary-item .amount:not(.status-green):not(.status-red):not(.status-orange),
body.theme-pro-dark .expense-list-item .amount:not([style*="green"]):not([style*="rgb(52, 199, 89)"]):not([style*="var(--green)"]):not([style*="#AF52DE"]) {
    
    /* 1. Gradiente Nebulosa */
    background: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%) !important;
    
    /* 2. Applicazione al testo */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    
    /* 3. Geometria Corretta (Fit Content) */
    width: fit-content !important;
    display: block !important;
    margin-left: auto !important; /* Mantiene l'allineamento a destra */
    
    /* 4. Peso Font */
    font-weight: 800 !important;
}

/* ============================================================
   MOTORE GRAFICO HEADER (FIX DEFINITIVO STABILITÀ)
   ============================================================ */

/* 1. Motore Animazione */
@keyframes titleFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 2. Regola BASE (Geometria + Motore Animazione) */
.header h1, 
#home-screen .header h1 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    text-align: center !important;
    margin: 0 !important;
    
    /* Disabilita selezione testo */
    -webkit-touch-callout: none !important;
    user-select: none !important;

    /* Maschera Testo */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    
    /* --- USO VARIABILE --- */
    background-image: var(--header-grad) !important;
    
    /* Configurazione Motore */
    background-size: 200% auto !important;
    
    /* --- FIX ANTI-BLOCCO REALE --- */
    
    /* 1. Animazione sempre attiva */
    animation: titleFlow 3s linear infinite !important;
    
    /* 2. FONDAMENTALE: Disabilita le transizioni sul background (Causa principale del blocco) */
    transition: none !important; 
    
    /* 3. FONDAMENTALE: Rimuovi accelerazione hardware (Causa del freeze grafico) */
    transform: none !important;
    will-change: auto !important;
    
    /* Dimensioni Default */
    font-size: 24px !important;
    padding-top: 5px !important;
    width: 100% !important;
}

/* 3. Override Dimensioni HOME */
#home-screen .header h1 {
    font-size: 30px !important;
    margin-bottom: 5px !important;
    line-height: 1.1 !important;
}

/* 4. Colore: TEMA DARK (Luce Bianca) */
body.theme-pro-dark .header h1,
body.theme-pro-dark #home-screen .header h1 {
    background-image: linear-gradient(
        90deg,
        #5A7FFF 0%,    
        #D926A9 25%,   
        #FFFFFF 50%,   /* Bianco Puro */
        #D926A9 75%,   
        #5A7FFF 100%   
    ) !important;
}

/* 5. Colore: TEMA LIGHT (Luce Grigia) */
body.theme-pro-light .header h1,
body.theme-pro-light #home-screen .header h1 {
    background-image: linear-gradient(
        90deg,
        #5A7FFF 0%, 
        #D926A9 25%, 
        #7d7d7d 50%,   /* Grigio per contrasto su chiaro */
        #D926A9 75%, 
        #5A7FFF 100%
    ) !important;
}

/* ============================================================
   FIX LAYOUT HOME (Date, Lame e Titoli)
   ============================================================ */

/* 1. CONTENITORE DATA + LAME */
.date-blade-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* 2. STILE LAMA PICCOLA (Solo Geometria) */
/* L'animazione e il colore vengono ereditati automaticamente dal tema */
.mini-blade {
    height: 4px !important;
    width: 14px !important;
    border-radius: 2px;
    margin-left: 2px !important;
    transform: skewX(-20deg);
}

/* ============================================================
   FIX TITOLO MESE (Priorità al Testo)
   ============================================================ */

/* 1. TITOLO: Si prende tutto lo spazio che serve */
#monthly-card-title {
    max-width: none !important;      /* Nessun limite di larghezza */
    width: auto !important;
    white-space: nowrap !important;  /* Niente a capo */
    overflow: visible !important;    /* Niente tagli */
    text-overflow: clip !important;  /* Niente puntini "..." */
    
    position: relative;
    z-index: 5; /* Se si sovrappone, il testo vince (sta sopra) */
    
    /* Un piccolo margine a destra per non toccare il bordo fisico della card */
    margin-right: 10px !important; 
}

/* 2. GRIGLIA ICONE: Compatta e ordinata a destra */
#fixed-expenses-summary {
    /* Posizione */
    top: 12px !important;
    right: 12px !important;
    
    /* Dimensioni */
    width: auto !important;
    max-width: 35% !important; /* Non invadere più del 35% della card */
    
    /* Comportamento: Vanno a capo se sono tante */
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: flex-end !important;
    gap: 3px !important; /* Spazio ridotto tra le icone */
    
    z-index: 4; /* Stanno sotto il testo se c'è collisione */
}

/* Rimpiccioliamo leggermente le icone per farcene stare di più */
.summary-icon-item {
    width: 16px !important;
    height: 16px !important;
}

/* ============================================================
   EMPTY STATES (Illustrazioni Stati Vuoti)
   ============================================================ */

.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    opacity: 0.6;
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    color: var(--secondary-text-color);
    /* Animazione leggera di galleggiamento */
    animation: float 6s ease-in-out infinite;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-color);
}

.empty-state-desc {
    font-size: 13px;
    color: var(--secondary-text-color);
    max-width: 250px;
    line-height: 1.4;
}

/* ============================================================
   FIX VISIBILITÀ ICONE CATEGORIE (HOME & LISTE)
   ============================================================ */

/* Forza dimensione per qualsiasi SVG dentro l'icona della lista */
.recent-expense-icon svg,
.expense-list-item .recent-expense-icon svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important; /* Previene schiacciamento */
    min-height: 24px !important;
    display: block !important;
}

/* Colore di fallback per le linee (se non specificato) */
.recent-expense-icon svg path,
.recent-expense-icon svg circle,
.recent-expense-icon svg rect,
.recent-expense-icon svg polyline,
.recent-expense-icon svg line,
.recent-expense-icon svg polygon {
    vector-effect: non-scaling-stroke;
}

/* ============================================================
   MODALE (DEFINITIVO - UNIFICAZIONE)
   ============================================================ */
.modal-content {
    /* 1. Scroll e Dimensioni (RISOLUZIONE) */
    position: relative !important;
    width: 85% !important;
    max-width: 320px !important;
    min-width: 280px !important;
    
    /* FONDAMENTALE: Forza l'altezza massima interna */
    max-height: 80vh !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain; 
    
    /* Disabilita i conflitti di visualizzazione */
    display: block !important;
    
    /* 2. Posizionamento (Centrato) */
    margin: auto !important; 
    
    /* 3. Estetica */
    padding: 25px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    z-index: 20001 !important;
}

/* Colori Sfondo Modale (Reinseriti qui perché tolti dai temi sopra) */
body.theme-pro-dark .modal-content {
    background-color: rgba(30, 30, 40, 0.95) !important;
    color: #f5f5f7 !important;
    border: 1px solid rgba(245, 245, 247, 0.15) !important;
    overflow-y: auto !important;
}
body.theme-pro-light .modal-content {
    background-color: #F5F5F7 !important;
    color: #736672 !important;
    border: 1px solid #D1D1D6 !important;
    overflow-y: auto !important;
}

/* ============================================================
   FIX SCHIACCIAMENTO LISTE (Ultimi Movimenti & Ricerca)
   ============================================================ */
.recent-expense-item .recent-expense-details {
    flex: 1 !important; /* Si prende lo spazio che avanza */
    min-width: 0 !important; /* Molto importante: permette al testo lungo di essere tagliato */
    margin-right: 10px; /* Spazio prima del prezzo */
}

/* FIX: Forza la dimensione delle icone dentro la griglia Categorie/Gestisci */
#manage-categories-screen .category-item svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

/* ============================================================
   FIX PRIORITÀ COLORI BUDGET (OVERRIDE TOTALE)
   Queste regole vincono su qualsiasi gradiente o tema.
   ============================================================ */

/* 1. VERDE (Sotto soglia) */
.amount.status-green,
.category-summary-item .amount.status-green { 
    color: var(--green) !important; 
    -webkit-text-fill-color: var(--green) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 2. ARANCIONE (Attenzione - 85%+) */
.amount.status-orange,
.category-summary-item .amount.status-orange { 
    color: var(--orange) !important; 
    -webkit-text-fill-color: var(--orange) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 3. ROSSO (Sforato - 100%+) */
.amount.status-red,
.category-summary-item .amount.status-red { 
    color: var(--red) !important; 
    -webkit-text-fill-color: var(--red) !important; 
    background: none !important; 
    background-image: none !important;
}

/* 4. GRADIENTE (Solo se non ha status) */
.status-gradient {
    background: linear-gradient(90deg, #5A7FFF 0%, #A855C9 50%, #D926A9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* FIX CESTINO ULTIMI MOVIMENTI (Priorità sul contenitore specifico) */
.recent-expense-item .delete-icon {
    /* Posizionamento Assoluto */
    position: absolute;
    right: 5px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    z-index: 20 !important; /* Deve vincere sui numeri */
    
    /* Area di tocco */
    width: 30px !important; 
    height: 30px !important;
    
    /* Centratura Icona interna */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FIX Z-INDEX NUMERI (Per non nasconderli dietro il cestino) */
.recent-expense-amount {
    position: relative; 
    z-index: 15; 
    /* Lascia uno spazio a destra per il cestino (35px di spazio) */
    padding-right: 35px;
}