/* === Estratto da <style id="fix-flicker-group-detail"> #1 === */
/* === FIX ANTI-SFARFALLIO GROUP DETAIL TOP AREA === */

html,
body {
  background-color: #090c12 !important;
  overscroll-behavior: none;
}

.view,
.view.active,
.view.active-back,
#group-detail-view {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#group-detail-view .group-stats-launcher-row,
#group-detail-view #group-user-balance,
#group-detail-view .expense-search-wrap,
#group-detail-view .expense-search-input-wrap,
#group-detail-view .expense-filter-toggle {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  contain: paint;
}

@media (max-width: 768px) {
  header,
  #group-detail-view .group-stats-launcher-row,
  #group-detail-view #group-user-balance,
  #group-detail-view .expense-search-wrap,
  #group-detail-view .expense-filter-popover {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  #group-detail-view .group-stats-launcher:hover,
  #group-detail-view .expense-search-wrap:hover,
  #group-detail-view .expense-filter-chip:hover,
  #group-detail-view .list-item:hover {
    transform: translate3d(0, 0, 0) !important;
  }
}

#group-detail-view.active,
#group-detail-view.active-back {
  animation: zsGroupDetailStableIn 90ms ease-out !important;
}

@keyframes zsGroupDetailStableIn {
  from {
    opacity: 0.985;
  }
  to {
    opacity: 1;
  }
}

/* === Estratto da <style> #2 === */
        :root {
            --bg-main: #0B0E14;      
            --bg-card: #151A22;      
            --bg-input: #212836;     
            --text-main: #ffffff;
            --text-muted: #8A93A6;   
            --color-primary: #00FF66;
            --color-danger: #FF3366; 
            --color-owe: #FF3366;    
            --color-lent: #00FF66;
            --radius-card: 20px;
            --radius-btn: 14px;
        }

        /* Reset e Base */
        * { -webkit-tap-highlight-color: transparent; outline: none; box-sizing: border-box; }
        html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

        body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; background-color: var(--bg-main); color: var(--text-main); margin: 0; padding: 0; min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; }
        .app-wrapper { max-width: 480px; margin: auto; position: relative; transition: max-width 0.3s ease; }
        
        header { padding: 20px 20px 15px 20px; font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; background: rgba(11, 14, 20, 0.85); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,0.05); }

        /* FIX UI: Aggiunto flex-shrink 0 e overflow visible per blindare le icone SVG contro lo "schiacciamento" */
        .svg-icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; overflow: visible; }
        
        /* FIX UI: Aggiunto flex-shrink 0 ai bottoni dell'header per mantenerli perfetti */
        .back-btn { background: none; border: none; color: var(--text-main); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; transition: 0.2s; flex-shrink: 0;}
        .back-btn:active { background: rgba(255,255,255,0.1); transform: scale(0.9); }
        
        .icon-btn { background: none; border: none; color: var(--color-primary); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0;}
        .icon-btn:active { transform: scale(0.9); opacity: 0.7; }
        
        .invite-btn { background: rgba(0, 255, 102, 0.1); color: var(--color-primary); border: 1px solid rgba(0, 255, 102, 0.3); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: 0.2s; white-space: nowrap; flex-shrink: 0;}
        .invite-btn:active { transform: scale(0.95); background: rgba(0, 255, 102, 0.2); }

        .view { display: none; padding-bottom: calc(130px + env(safe-area-inset-bottom)); position: relative; left: 0; opacity: 1; transform: none;}
        
        .view.active { display: block; animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .view.active-back { display: block; animation: slideInLeft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        
        @keyframes slideInRight { from { opacity: 0; left: 30px; } to { opacity: 1; left: 0; } }
        @keyframes slideInLeft { from { opacity: 0; left: -30px; } to { opacity: 1; left: 0; } }

        .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; padding: 20px; text-align: center; }
        .login-logo { font-size: 55px; font-weight: 900; letter-spacing: -2px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; user-select: none; }
        .login-subtitle { color: var(--text-muted); margin-bottom: 30px; }
        .auth-form { width: 100%; max-width: 320px; }
        .auth-switch { margin-top: 20px; color: var(--text-muted); font-size: 14px; cursor: pointer; text-decoration: underline; padding: 15px; display: inline-block; }
        
        .btn-google { background: #ffffff; color: #000000; border: none; border-radius: 30px; padding: 16px; font-size: 16px; font-weight: bold; width: 100%; cursor: pointer; margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); transition: 0.2s; }
        .btn-google:active { transform: scale(0.96); }
        .btn-dev { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); border-radius: 30px; padding: 12px; font-size: 14px; font-weight: bold; width: 100%; cursor: pointer; margin-top: 25px; transition: 0.2s; }

        .divider { display: flex; align-items: center; text-align: center; margin: 20px 0; color: var(--text-muted); font-size: 14px; }
        .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .divider:not(:empty)::before { margin-right: .25em; }
        .divider:not(:empty)::after { margin-left: .25em; }

        .global-dashboard { margin: 15px; padding: 30px 20px; border-radius: 24px; background: linear-gradient(135deg, rgba(33, 40, 54, 0.6) 0%, rgba(21, 26, 34, 0.8) 100%); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.05); text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.4); transition: box-shadow 0.4s ease, border-color 0.4s ease; }
        .global-dashboard.glow-lent { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 30px rgba(0, 255, 102, 0.15); border-top: 1px solid rgba(0, 255, 102, 0.3); }
        .global-dashboard.glow-owe { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 30px rgba(255, 51, 102, 0.15); border-top: 1px solid rgba(255, 51, 102, 0.3); }
        
        .global-title { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; font-weight: 700;}
        .global-subtitle { font-size: 15px; font-weight: 600; margin-bottom: 5px;}
        .global-amount { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; font-variant-numeric: tabular-nums;}
        
        .card-list { padding: 0 15px; margin-top: 10px; }
        
        .list-item-wrapper { position: relative; border-radius: var(--radius-card); margin-bottom: 12px; overflow: hidden; background: rgba(255, 51, 102, 0.15); touch-action: pan-y; }
        .swipe-actions { position: absolute; top: 0; right: 0; height: 100%; width: 75px; display: flex; align-items: center; justify-content: center; }
        .swipe-actions .action-btn.delete { width: 100%; height: 100%; background: transparent; color: var(--color-danger); border-radius: 0; display:flex; align-items:center; justify-content:center; }
        
        .list-item { background: var(--bg-card); padding: 18px; border-radius: var(--radius-card); display: flex; align-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,0.03); position: relative; z-index: 2; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .swipeable > .list-item { margin-bottom: 0; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s; } 
        .list-item:active { background: rgba(255,255,255,0.05); transform: scale(0.97); }
        
        .icon-box { width: 48px; height: 48px; background-color: var(--bg-input); border-radius: 14px; margin-right: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink:0; color: var(--color-primary);}
        .icon-box img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
        .icon-box.group-icon { border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: var(--text-main); }

        .date-text { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;}
        .date-num { font-size: 19px; font-weight: 800; margin-top: -3px; color: var(--text-main); font-variant-numeric: tabular-nums;}
        
        .item-details { flex-grow: 1; overflow:hidden;}
        .item-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
        .item-subtitle { font-size: 14px; font-weight: 500; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
        .item-amounts { text-align: right; font-size: 15px; line-height: 1.3; flex-shrink:0; padding-left: 10px; font-variant-numeric: tabular-nums;}
        .owe { color: var(--color-owe); } .lent { color: var(--color-lent); } .neutral { color: var(--text-muted); }

        .user-email { font-size: 16px; color: var(--text-main); font-weight: 700; margin-bottom: 15px; }

        .scrollable-list { max-height: 45vh; overflow-y: auto; padding-right: 5px; }
        
        .form-section { padding: 20px 15px; }
        .input-group { background: var(--bg-card); border-radius: 16px; padding: 8px 18px; margin-bottom: 15px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.03); transition: 0.2s;}
        .input-group:focus-within { border-color: var(--color-primary); background: rgba(0,255,102,0.03); } 
        .input-label { color: var(--color-primary); width: 35px; display: flex; align-items: center;}
        
        input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"] { background: transparent; border: none; color: var(--text-main); font-size: 17px; font-weight: 600; width: 100%; outline: none; padding: 15px 0; font-family: inherit;}
        input[type="number"], input[inputmode="decimal"] { font-size: 22px; font-weight: 800; color: var(--color-primary);}
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.4; cursor: pointer; transition: 0.2s;}
        input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }
        
        .avatar-upload-container { width: 85px; height: 85px; background: rgba(255,255,255,0.03); border-radius: 50%; margin: 0 auto 25px auto; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden; border: 2px dashed rgba(255,255,255,0.2); color: var(--text-muted); transition: 0.2s;}
        .avatar-upload-container:active { transform: scale(0.95); }
        
        .btn-split-summary { background: rgba(255,255,255,0.03); color: var(--text-main); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 18px; font-size: 15px; font-weight: 600; text-align: center; width: 100%; cursor: pointer; margin-top: 10px; transition: 0.2s;}
        .btn-split-summary:active { transform: scale(0.98); background: rgba(255,255,255,0.08); }

        .btn-large { background: var(--color-primary); color: var(--bg-main); border: none; border-radius: 16px; padding: 18px; font-size: 17px; font-weight: 800; width: 100%; cursor: pointer; margin-top: 25px; box-shadow: 0 8px 20px rgba(0, 255, 102, 0.2); transition: 0.2s;}
        .btn-large:active { transform: scale(0.97); box-shadow: 0 4px 10px rgba(0, 255, 102, 0.2); }

        .btn-spinner { width: 20px; height: 20px; border: 3px solid rgba(0,0,0,0.2); border-top-color: var(--bg-main); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
        
        .btn-danger-outline { background: transparent; color: var(--color-danger); border: 1px solid rgba(255, 51, 102, 0.3); margin-top: 15px; box-shadow: none;}
        .btn-danger-outline:active { background: rgba(255, 51, 102, 0.1); }

        .member-tag { display: inline-flex; align-items: center; background: var(--bg-input); color: var(--text-main); padding: 8px 16px; border-radius: 20px; margin: 4px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,0.05); transition: 0.2s;}
        .member-tag:active { transform: scale(0.95); }
        
        .friend-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); padding: 6px 14px 6px 6px; border-radius: 30px; cursor: pointer; white-space: nowrap; border: 1px solid rgba(255,255,255,0.05); transition: 0.2s; user-select: none; }
        .friend-chip:active { transform: scale(0.95); background: rgba(0, 255, 102, 0.1); border-color: var(--color-primary); }
        .friend-chip-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text-main); }
        #recent-friends-list::-webkit-scrollbar { display: none; }

        .bottom-nav { position: fixed; bottom: calc(25px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(21, 26, 34, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); padding: 8px 25px; border-radius: 40px; display: flex; align-items: center; gap: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.6); z-index: 100; }
        .nav-item { background: none; border: none; color: var(--text-muted); padding: 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
        .nav-item:active { transform: scale(0.85); color: var(--text-main); }
        .nav-fab-center { width: 54px; height: 54px; border-radius: 27px; background: var(--color-primary); color: #000; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0,255,102,0.3); transition: 0.2s; }
        .nav-fab-center:active { transform: scale(0.9); box-shadow: 0 4px 10px rgba(0,255,102,0.4); }
        .nav-fab-center svg { stroke-width: 3; width: 28px; height: 28px; }

        .fab-group { position: fixed; bottom: calc(30px + env(safe-area-inset-bottom)); right: 20px; background: var(--color-primary); color: #000; border: none; border-radius: 30px; padding: 16px 24px; font-size: 16px; font-weight: 800; box-shadow: 0 10px 25px rgba(0, 255, 102, 0.3); cursor: pointer; z-index: 10; transition: 0.2s; display: flex; align-items: center; gap: 8px;}
        .fab-group:active { transform: scale(0.95); box-shadow: 0 5px 15px rgba(0, 255, 102, 0.4); }

        .tabs { display: flex; gap: 12px; padding: 15px; overflow-x: auto; justify-content: center;}
        
        .tab-btn { background-color: transparent; color: var(--text-main); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 20px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: 0.2s; display: flex; align-items: center; gap: 8px;}
        .tab-btn.pareggia { border-color: rgba(255, 51, 102, 0.3); color: var(--color-owe); }
        .tab-btn.excel { border-color: rgba(0, 255, 102, 0.3); color: var(--color-lent); }
        .tab-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.05); }
        .tab-btn:disabled { opacity: 0.4; pointer-events: none; }
        
        .empty-state { text-align: center; color: var(--text-muted); padding: 60px 20px; line-height: 1.6; font-size: 16px; font-weight: 500;}
        .empty-icon { color: rgba(255,255,255,0.1); margin-bottom: 20px; display: inline-block; width: 64px; height: 64px; }
        .empty-icon svg { width: 100%; height: 100%; }

        .desktop-actions { display: none; gap: 10px; margin-left: 20px; }
        .action-btn { width: 44px; height: 44px; border-radius: 14px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
        .action-btn:active { transform: scale(0.9); }
        .action-btn.edit { background: rgba(255, 255, 255, 0.05); color: var(--text-main); } 
        .action-btn.delete { background: rgba(255, 51, 102, 0.1); color: var(--color-danger); }

        .payer-btn { background: var(--bg-card); color: var(--text-main); border: 1px solid rgba(255,255,255,0.05); padding: 16px; border-radius: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; flex-grow: 1; text-align: center; font-size: 16px;}
        .payer-btn.selected { background: rgba(0, 255, 102, 0.1); color: var(--color-primary); border-color: var(--color-primary); }
        .payer-btn:active { transform: scale(0.96); }

        .participant-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: 0.2s; margin-bottom: 10px;}
        .participant-row.selected { border-color: rgba(0, 255, 102, 0.3); background: rgba(0, 255, 102, 0.05); }
        .participant-row:active { transform: scale(0.98); } 
    .split-mode-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; }
    .split-mode-btn { background: rgba(255,255,255,0.03); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; min-height: 38px; padding: 0 14px; font-size: 13px; font-weight: 800; cursor: pointer; transition: 0.2s; }
    .split-mode-btn.active { color: var(--color-primary); border-color: rgba(0,255,102,0.35); background: rgba(0,255,102,0.08); }
    .split-mode-btn:active { transform: scale(0.96); }
    .split-custom-list { display:flex; flex-direction:column; gap:10px; margin-top: 14px; }
    .split-custom-row { display:flex; align-items:center; justify-content:space-between; gap:12px; background: var(--bg-card); padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.04); }
    .split-custom-name { font-size: 15px; font-weight: 700; color: var(--text-main); min-width: 0; flex: 1; word-break: break-word; }
    .split-custom-input-wrap { width: 132px; flex-shrink: 0; }
    .split-custom-input { width: 100%; height: 42px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.03); color: var(--color-primary); font-size: 16px; font-weight: 800; text-align: right; padding: 0 12px; outline: none; box-shadow: none; }
    .split-custom-input:focus { border-color: rgba(0,255,102,0.35); background: rgba(0,255,102,0.05); }
    .split-custom-hint { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
    .split-custom-hint.ok { color: var(--color-primary); } 
    .checkbox-custom { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center; transition: 0.2s; background: transparent;}
        .participant-row.selected .checkbox-custom { border-color: var(--color-primary); background: var(--color-primary); }
        .check-svg { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease-out; }
        .participant-row.selected .check-svg { stroke-dashoffset: 0; transition-delay: 0.1s; }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s;}
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-content { background: var(--bg-card); padding: 30px 25px; border-radius: 24px; width: 85%; max-width: 360px; text-align: center; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 40px rgba(0,0,0,0.5); transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
        .modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
        .modal-title { font-size: 20px; font-weight: 800; margin-bottom: 15px; color: var(--color-primary); }
        .modal-body { font-size: 16px; margin-bottom: 25px; line-height: 1.5; color: var(--text-main); white-space: pre-wrap; word-break: break-word;}
        .modal-buttons { display: flex; gap: 12px; }
        .modal-btn { background: var(--color-primary); color: #000; border: none; padding: 16px; border-radius: 14px; font-weight: 800; font-size: 16px; cursor: pointer; flex: 1; transition: 0.2s;}
        .modal-btn:active { transform: scale(0.95); }
        .modal-btn.cancel { background: rgba(255,255,255,0.05); color: var(--text-main); border: 1px solid rgba(255,255,255,0.1); }
        
        .loader { border: 4px solid rgba(255,255,255,0.05); border-top: 4px solid var(--color-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; display: none;}
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
        .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.02) 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite linear; border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,0.02); pointer-events: none; }

        .toast-notification { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: #ffffff; color: #000000; padding: 14px 28px; border-radius: 30px; font-weight: 800; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 2000; display: flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: none; }
        .toast-notification.show { bottom: calc(40px + env(safe-area-inset-bottom)); }

        @media (min-width: 650px) {
            .app-wrapper { max-width: 650px; } 
            .desktop-actions { display: flex; opacity: 0; transform: translateX(15px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
            .swipeable > .list-item:hover .desktop-actions, .list-item:hover .desktop-actions { opacity: 1; transform: translateX(0); } 
            .swipeable > .list-item:hover .item-amounts, .list-item:hover .item-amounts { transform: translateX(-5px); }
        }

        .icon-svg { width: 100%; height: 100%; }

        /* UI LEGALE E IMPOSTAZIONI */
        .settings-list { margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }
        .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 5px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; color: var(--text-main); font-weight: 600; font-size: 16px; transition: 0.2s;}
        .settings-item:active { opacity: 0.7; transform: scale(0.98); }
        .settings-icon-left { display:flex; align-items:center; gap: 15px; }
        .settings-icon-left span[data-svg] { color: var(--color-primary); width: 22px; height: 22px; }
        .settings-chevron { opacity: 0.4; width: 18px; height: 18px; transform: rotate(-90deg); display: inline-block; } 

        .legal-content { color: var(--text-muted); font-size: 15px; line-height: 1.7; padding-bottom: 50px; }
        .legal-content h3 { color: var(--color-primary); font-size: 20px; font-weight: 800; margin-bottom: 20px; margin-top: 10px; letter-spacing: -0.5px;}
        .legal-content h4 { color: var(--text-main); font-size: 17px; font-weight: 700; margin-top: 30px; margin-bottom: 10px; letter-spacing: -0.3px;}
        .legal-content p { margin-bottom: 15px; }
        .legal-content ul, .legal-content ol { padding-left: 20px; margin-bottom: 15px; }
        .legal-content li { margin-bottom: 8px; }
        
        .faq-item { background: var(--bg-card); border-radius: 16px; padding: 20px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.03); }
        .faq-item h4 { color: var(--text-main); font-size: 16px; font-weight: 700; margin-top: 0; margin-bottom: 12px; line-height: 1.4;}
        .faq-item p { color: var(--text-muted); font-size: 14px; margin-bottom: 0; line-height: 1.6; }
    .expense-search-wrap { margin: 12px 15px 4px 15px; padding: 8px; display: flex; flex-direction: column; gap: 8px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(21,26,34,0.98) 0%, rgba(17,22,30,0.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.16); position: relative; }
    .expense-search-toprow { display:flex; align-items:center; gap:8px; }
    .expense-search-input-wrap { position: relative; flex: 1; min-width: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); overflow: hidden; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
    .expense-search-input-wrap:focus-within { border-color: rgba(0,255,102,0.22); background: rgba(255,255,255,0.03); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
    .expense-search-input { width: 100%; height: 42px; padding: 0 14px; border: none; border-radius: 0; background: transparent; color: var(--text-main); font-size: 15px; font-weight: 600; outline: none; box-shadow: none; }
    .expense-search-input::placeholder { color: var(--text-muted); opacity: 1; }
    .expense-search-input:focus { background: transparent; box-shadow: none; }
    .expense-filter-toggle { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); color: var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s; flex-shrink:0; position:relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
    .expense-filter-toggle:active { transform: scale(0.96); }
    .expense-filter-toggle.open, .expense-filter-toggle.active-filter { color: var(--color-primary); border-color: rgba(0,255,102,0.26); background: rgba(0,255,102,0.08); }
    .expense-filter-toggle-badge { position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background: var(--color-primary); box-shadow: 0 0 12px rgba(0,255,102,0.55); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
    .expense-filter-toggle.active-filter .expense-filter-toggle-badge { opacity: 1; transform: scale(1); }
    .expense-filter-toggle-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .hamburger-icon { width: 18px; display:flex; flex-direction:column; gap:4px; }
    .hamburger-icon span { display:block; height:2px; border-radius:999px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
    .expense-filter-toggle.open .hamburger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .expense-filter-toggle.open .hamburger-icon span:nth-child(2) { opacity: 0; }
    .expense-filter-toggle.open .hamburger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .expense-filter-popover { display:none; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 2px; padding-top: 10px; animation: expenseFilterFadeIn 0.18s ease; }
    .expense-filter-popover.open { display:block; }
    .expense-filter-popover-title { margin: 0 0 8px 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
    .expense-filter-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 1px 0 0 0; overflow: visible; scrollbar-width: none; }
    .expense-filter-row::-webkit-scrollbar { display: none; }
    .expense-filter-chip { border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); color: var(--text-muted); min-height: 29px; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: 0.2s; box-shadow: none; }
    .expense-filter-chip.active { color: var(--color-primary); border-color: rgba(0,255,102,0.28); background: rgba(0,255,102,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
    .expense-filter-chip:active { transform: scale(0.96); }
    @keyframes expenseFilterFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
 .expense-filter-toggle { width: 42px; min-width: 42px; padding: 0 11px; gap: 8px; overflow: hidden; }
    .expense-filter-toggle.show-text { width: auto; }
    .expense-filter-toggle-text { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: 0.35px; text-transform: uppercase; transition: max-width 0.22s ease, opacity 0.18s ease; }
    .expense-filter-toggle.show-text .expense-filter-toggle-text { max-width: 90px; opacity: 1; }
    .smart-empty-state { padding: 44px 20px; }
    .smart-empty-state-title { color: var(--text-main); font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin-top: 10px; }
    .smart-empty-state-subtitle { margin-top: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
    .empty-state-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
    .empty-state-action-btn { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text-main); min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.35px; cursor: pointer; }
    .empty-state-action-btn.primary { color: var(--color-primary); border-color: rgba(0,255,102,0.24); background: rgba(0,255,102,0.08); }
    .empty-state-action-btn:active { transform: scale(0.97); }
    .group-insights-strip { margin: 6px 15px 0 15px; display:none !important; flex-direction:column; gap:8px; }
    .group-stats-launcher-row { margin: 10px 15px 10px 15px; display:none; justify-content:center; gap:8px; flex-wrap:wrap; }
    .group-stats-launcher { min-height: 36px; border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, rgba(21,26,34,0.98) 0%, rgba(17,22,30,0.98) 100%); color: var(--text-main); border-radius: 999px; padding: 0 12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03); transition: transform 0.18s, border-color 0.2s, box-shadow 0.2s, background 0.2s; }
    .group-activity-launcher.secondary { border-color: rgba(90,170,255,0.18); background: linear-gradient(180deg, rgba(90,170,255,0.08) 0%, rgba(17,22,30,0.98) 100%); }
    .group-activity-launcher.secondary .group-stats-launcher-icon { color: #8EC5FF; }
    .activity-list { display:flex; flex-direction:column; gap:10px; }
    .activity-group-heading { margin: 8px 2px 2px 2px; color: var(--text-muted); font-size: 11px; font-weight: 900; letter-spacing: 0.9px; text-transform: uppercase; }
    .activity-item { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
    .activity-item.activity-added { border-color: rgba(0,255,102,0.10); }
    .activity-item.activity-modified { border-color: rgba(142,197,255,0.16); background: linear-gradient(180deg, rgba(90,170,255,0.06) 0%, rgba(255,255,255,0.03) 100%); }
    .activity-item.activity-deleted { border-color: rgba(255,51,102,0.16); background: linear-gradient(180deg, rgba(255,51,102,0.06) 0%, rgba(255,255,255,0.03) 100%); }
    .activity-item.activity-settlement { border-color: rgba(255,209,102,0.14); }
    .activity-item-icon { width: 34px; height: 34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.04); color: var(--text-main); font-size: 16px; flex-shrink:0; }
    .activity-item.activity-added .activity-item-icon { background: rgba(0,255,102,0.10); }
    .activity-item.activity-modified .activity-item-icon { background: rgba(142,197,255,0.12); }
    .activity-item.activity-deleted .activity-item-icon { background: rgba(255,51,102,0.12); }
    .activity-item.activity-settlement .activity-item-icon { background: rgba(255,209,102,0.12); }
    .activity-item-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
    .activity-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .activity-item-text { color: var(--text-main); font-size: 14px; font-weight: 700; line-height: 1.45; word-break: break-word; }
    .activity-item-badge { display:inline-flex; align-items:center; justify-content:center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: 0.55px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text-muted); flex-shrink:0; }
    .activity-item-badge.added { color: var(--color-primary); border-color: rgba(0,255,102,0.22); background: rgba(0,255,102,0.08); }
    .activity-item-badge.modified { color: #8EC5FF; border-color: rgba(142,197,255,0.24); background: rgba(142,197,255,0.10); }
    .activity-item-badge.deleted { color: #FF7A9A; border-color: rgba(255,51,102,0.24); background: rgba(255,51,102,0.10); }
    .activity-item-badge.settlement { color: #FFD166; border-color: rgba(255,209,102,0.24); background: rgba(255,209,102,0.10); }
    .activity-item-meta { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.15px; }
    .activity-item-details { display:flex; flex-direction:column; gap:5px; margin-top: 1px; }
    .activity-item-detail { color: var(--text-muted); font-size: 12px; line-height: 1.45; padding-left: 2px; word-break: break-word; }
    .activity-item-detail strong { color: var(--text-main); font-weight: 800; }
    .group-stats-launcher:active { transform: scale(0.97); }
    .group-stats-launcher.primary { border-color: rgba(0,255,102,0.22); background: linear-gradient(180deg, rgba(0,255,102,0.08) 0%, rgba(17,22,30,0.98) 100%); box-shadow: 0 10px 24px rgba(0,255,102,0.10), inset 0 1px 0 rgba(255,255,255,0.03); }
    .group-stats-launcher.warning { border-color: rgba(255,209,102,0.20); background: linear-gradient(180deg, rgba(255,209,102,0.08) 0%, rgba(17,22,30,0.98) 100%); }
    .group-stats-launcher-icon { width: 16px; height: 16px; color: var(--color-primary); display:inline-flex; align-items:center; justify-content:center; }
    .group-stats-launcher-label { font-size: 12px; font-weight: 900; letter-spacing: 0.45px; text-transform: uppercase; }
    .group-stats-launcher-hint { font-size: 11px; font-weight: 800; color: var(--text-muted); max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stats-modal-overlay { z-index: 1400; }
    .stats-modal-card { width: min(92vw, 420px); max-height: min(78vh, 620px); background: linear-gradient(180deg, rgba(21,26,34,0.98) 0%, rgba(11,14,20,0.98) 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.58), 0 0 0 1px rgba(255,255,255,0.02) inset; padding: 20px 18px 18px 18px; display:flex; flex-direction:column; gap:14px; transform: translateY(20px) scale(0.96); transition: transform 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .stats-modal-overlay.active .stats-modal-card { transform: translateY(0) scale(1); }
    .stats-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .stats-modal-title { font-size: 20px; font-weight: 900; letter-spacing: -0.4px; color: var(--text-main); }
    .stats-modal-subtitle { margin-top: 4px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
    .stats-modal-close { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 18px; font-weight: 900; cursor:pointer; flex-shrink:0; }
    .stats-modal-close:active { transform: scale(0.96); }
    .stats-modal-content { overflow-y:auto; padding-right:2px; display:flex; flex-direction:column; gap:10px; }
    .stats-modal-content .group-insights-row { overflow-x:auto; }
    .stats-modal-content .group-insight-chip { min-width: 190px; }
    .stats-modal-content .group-insight-value { max-width: 220px; }
    .stats-modal-empty { text-align:center; color: var(--text-muted); padding: 26px 10px 10px; font-size: 14px; line-height: 1.6; }
    
    .group-insights-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
    .group-insights-row::-webkit-scrollbar { display:none; }
    .group-insight-chip { flex: 0 0 auto; min-width: 0; display:inline-flex; align-items:center; gap:8px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(21,26,34,0.98) 0%, rgba(17,22,30,0.98) 100%); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
    .group-insight-emoji { font-size: 15px; line-height: 1; }
    .group-insight-text { display:flex; flex-direction:column; min-width:0; }
    .group-insight-label { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; white-space: nowrap; }
    .group-insight-value { color: var(--text-main); font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .group-insight-chip.primary { border-color: rgba(0,255,102,0.18); background: linear-gradient(180deg, rgba(0,255,102,0.08) 0%, rgba(17,22,30,0.98) 100%); }
    .group-insight-chip.warning { border-color: rgba(255,191,0,0.16); }
    .group-insight-chip.soft { border-color: rgba(255,255,255,0.08); }
    .group-timeline-item { flex: 0 0 auto; display:inline-flex; align-items:center; gap:6px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 12px; font-weight: 700; }
    .group-timeline-item strong { color: var(--text-main); font-size: 12px; font-weight: 800; }
    .expense-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .expense-badge { display:inline-flex; align-items:center; gap:5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.18px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.04); color: var(--text-muted); }
    .expense-badge.success { color: var(--color-primary); border-color: rgba(0,255,102,0.2); background: rgba(0,255,102,0.08); }
    .expense-badge.warning { color: #FFD166; border-color: rgba(255,209,102,0.18); background: rgba(255,209,102,0.08); }
    .expense-badge.info { color: var(--text-main); }
    .expense-badge.soft { color: var(--text-muted); }
    .recurring-pill.warning { color: #FFD166; border-color: rgba(255,209,102,0.18); background: rgba(255,209,102,0.08); }
    .recurring-pill.success { color: var(--color-primary); border-color: rgba(0,255,102,0.2); background: rgba(0,255,102,0.08); }
    .group-list-chip { display:inline-flex; align-items:center; gap:6px; margin-top:7px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.35px; color: var(--text-muted); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.05); }
    .group-list-chip.primary { color: var(--color-primary); border-color: rgba(0,255,102,0.2); background: rgba(0,255,102,0.08); }
    .group-list-chip.warning { color: #FFD166; border-color: rgba(255,209,102,0.18); background: rgba(255,209,102,0.08); }
    .recurring-meta { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
 .recurring-pill { display:inline-flex; align-items:center; gap:5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
 .recurring-pill.primary { color: var(--color-primary); border-color: rgba(0,255,102,0.22); background: rgba(0,255,102,0.08); }
 .choice-option-btn { width:100%; border:none; border-radius:14px; padding:16px 18px; text-align:left; font-size:15px; font-weight:700; color: var(--text-main); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor:pointer; transition:0.2s; }
 .choice-option-btn:active { transform: scale(0.98); }
 .choice-option-btn.primary { color: var(--color-primary); border-color: rgba(0,255,102,0.26); background: rgba(0,255,102,0.08); }
 .choice-option-btn.danger { color: var(--color-danger); border-color: rgba(255,51,102,0.24); background: rgba(255,51,102,0.08); }
    
 .group-balance-compact { display:flex; flex-direction:column; gap:12px; width:100%; text-align:left; }
 .group-balance-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
 .group-balance-total-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
 .group-balance-total-amount { font-size: 24px; font-weight: 900; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
 .group-balance-total-amount.collect { color: var(--color-lent); }
 .group-balance-total-amount.pay { color: var(--color-owe); }
 .group-balance-list { display:flex; flex-direction:column; gap:8px; }
 .group-balance-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); }
 .group-balance-row-label { min-width:0; flex:1; color: var(--text-main); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .group-balance-row-amount { flex-shrink:0; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
 .group-balance-row-amount.collect { color: var(--color-lent); }
 .group-balance-row-amount.pay { color: var(--color-owe); }
 .group-balance-more { background:none; border:none; color: var(--text-muted); font-size: 13px; font-weight: 800; letter-spacing: 0.2px; padding: 2px 0 0 0; text-align:left; cursor:pointer; align-self:flex-start; }
 .group-balance-more:active { transform: scale(0.98); color: var(--text-main); }

 

    /* === ZeroSync UI Polish: Neon Dark × Minimal Fintech (surgical CSS overrides) === */
    :root {
      --color-accent-cool: #8EC5FF;
      --shadow-soft-premium: 0 14px 34px rgba(0,0,0,0.28);
      --shadow-green-soft: 0 12px 28px rgba(0,255,102,0.10);
      --surface-glass: linear-gradient(180deg, rgba(21,26,34,0.98) 0%, rgba(14,18,25,0.98) 100%);
      --surface-glass-soft: linear-gradient(180deg, rgba(25,31,42,0.96) 0%, rgba(18,22,30,0.96) 100%);
    }

    .bottom-nav {
      border-color: rgba(255,255,255,0.10);
      box-shadow: 0 18px 40px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.04);
      background: linear-gradient(180deg, rgba(24,30,40,0.90) 0%, rgba(18,22,30,0.90) 100%);
    }
    .nav-item { border-radius: 14px; }
    .nav-fab-center {
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: 0 14px 30px rgba(0,255,102,0.22), 0 0 0 1px rgba(255,255,255,0.04) inset;
      background: linear-gradient(180deg, rgba(0,255,102,1) 0%, rgba(0,224,91,1) 100%);
    }

    .list-item-wrapper {
      background: linear-gradient(90deg, rgba(255,51,102,0.16) 0%, rgba(255,51,102,0.10) 100%);
    }
    .list-item {
      background: var(--surface-glass);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 12px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .list-item:active {
      background: linear-gradient(180deg, rgba(28,34,45,0.98) 0%, rgba(17,22,30,0.98) 100%);
    }
    .icon-box {
      background: linear-gradient(180deg, rgba(33,40,54,0.95) 0%, rgba(25,31,42,0.95) 100%);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .item-title {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.38px;
    }
    .item-subtitle {
      font-size: 13px;
      color: rgba(138,147,166,0.98);
      letter-spacing: 0.05px;
    }
    .item-amounts {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.22;
      letter-spacing: -0.15px;
      text-shadow: 0 0 14px rgba(0,0,0,0.12);
    }

    #group-user-balance {
      background: linear-gradient(180deg, rgba(24,30,40,0.98) 0%, rgba(18,22,30,0.98) 100%) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.025) !important;
    }

    .expense-search-wrap {
      border-color: rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(20,25,34,0.98) 0%, rgba(15,19,27,0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 14px 30px rgba(0,0,0,0.18);
    }
    .expense-search-input-wrap {
      border-color: rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.028);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .expense-search-input-wrap:focus-within {
      border-color: rgba(0,255,102,0.26);
      background: rgba(255,255,255,0.04);
      box-shadow: 0 0 0 4px rgba(0,255,102,0.04), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .expense-search-input {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02px;
    }
    .expense-filter-toggle {
      border-color: rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 14px rgba(0,0,0,0.10);
    }
    .expense-filter-toggle.open, .expense-filter-toggle.active-filter {
      color: #04140b;
      border-color: rgba(0,255,102,0.32);
      background: linear-gradient(180deg, rgba(0,255,102,0.94) 0%, rgba(0,224,91,0.90) 100%);
      box-shadow: 0 10px 22px rgba(0,255,102,0.18);
    }
    .expense-filter-toggle.open .expense-filter-toggle-badge,
    .expense-filter-toggle.active-filter .expense-filter-toggle-badge {
      background: #04140b;
      box-shadow: 0 0 12px rgba(4,20,11,0.40);
    }
    .expense-filter-popover {
      border-top: none;
      margin-top: 4px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(10,14,20,0.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 24px rgba(0,0,0,0.18);
    }
    .expense-filter-popover-title {
      margin-bottom: 10px;
      font-size: 10px;
      letter-spacing: 1px;
    }
    .expense-filter-row { gap: 8px; }
    .expense-filter-chip,
    .expense-badge,
    .group-list-chip,
    .recurring-pill,
    .activity-item-badge,
    .empty-state-action-btn {
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border-width: 1px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }
    .expense-filter-chip {
      border-color: rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.035);
      color: rgba(138,147,166,0.98);
    }
    .expense-filter-chip.active {
      color: #04140b;
      border-color: rgba(0,255,102,0.34);
      background: linear-gradient(180deg, rgba(0,255,102,0.94) 0%, rgba(0,224,91,0.88) 100%);
      box-shadow: 0 10px 20px rgba(0,255,102,0.16);
    }
    .expense-badge,
    .group-list-chip,
    .recurring-pill {
      background: rgba(255,255,255,0.045);
      border-color: rgba(255,255,255,0.08);
    }
    .expense-badge.success,
    .group-list-chip.primary,
    .recurring-pill.primary,
    .recurring-pill.success {
      color: var(--color-primary);
      border-color: rgba(0,255,102,0.24);
      background: rgba(0,255,102,0.10);
      box-shadow: 0 10px 20px rgba(0,255,102,0.08);
    }
    .expense-badge.warning,
    .group-list-chip.warning,
    .recurring-pill.warning {
      color: #FFD166;
      border-color: rgba(255,209,102,0.22);
      background: rgba(255,209,102,0.10);
    }
    .activity-item-badge.modified {
      color: var(--color-accent-cool);
      border-color: rgba(142,197,255,0.28);
      background: rgba(142,197,255,0.12);
    }

    .modal-content,
    .stats-modal-card {
      background: linear-gradient(180deg, rgba(24,29,39,0.98) 0%, rgba(14,18,25,0.985) 100%);
      border-color: rgba(255,255,255,0.07);
      box-shadow: 0 28px 64px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .modal-title,
    .stats-modal-title {
      letter-spacing: -0.45px;
    }
    .stats-modal-subtitle,
    .modal-body {
      color: rgba(138,147,166,0.98);
    }

    .input-group,
    .payer-btn,
    .participant-row,
    .split-custom-row {
      background: var(--surface-glass-soft);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .input-group:focus-within {
      border-color: rgba(0,255,102,0.32);
      background: linear-gradient(180deg, rgba(20,28,35,0.98) 0%, rgba(17,22,30,0.98) 100%);
      box-shadow: 0 0 0 4px rgba(0,255,102,0.05), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    #expense-form-view input[inputmode="decimal"] {
      text-shadow: 0 0 18px rgba(0,255,102,0.10);
      font-variant-numeric: tabular-nums;
    }
    .btn-split-summary {
      border-color: rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(24,30,40,0.98) 0%, rgba(18,22,30,0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.12);
      font-weight: 700;
      letter-spacing: -0.1px;
    }
    .btn-split-summary:active {
      background: linear-gradient(180deg, rgba(27,34,45,0.98) 0%, rgba(18,22,30,0.98) 100%);
    }
    .split-mode-row { gap: 10px; }
    .split-mode-btn {
      min-height: 40px;
      padding: 0 16px;
      border-color: rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.018) 100%);
      color: rgba(138,147,166,0.98);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
    }
    .split-mode-btn.active {
      color: #04140b;
      border-color: rgba(0,255,102,0.34);
      background: linear-gradient(180deg, rgba(0,255,102,0.95) 0%, rgba(0,224,91,0.88) 100%);
      box-shadow: 0 10px 22px rgba(0,255,102,0.16);
    }
    .split-custom-row {
      padding: 15px 16px;
      border-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 18px rgba(0,0,0,0.08);
    }
    .split-custom-input {
      border-color: rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      font-variant-numeric: tabular-nums;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .split-custom-input:focus {
      border-color: rgba(0,255,102,0.34);
      background: rgba(0,255,102,0.06);
      box-shadow: 0 0 0 4px rgba(0,255,102,0.05);
    }
    .split-custom-hint {
      font-weight: 700;
      letter-spacing: 0.02px;
    }
    .payer-btn.selected,
    .participant-row.selected {
      border-color: rgba(0,255,102,0.34);
      background: linear-gradient(180deg, rgba(0,255,102,0.10) 0%, rgba(255,255,255,0.03) 100%);
      box-shadow: 0 10px 22px rgba(0,255,102,0.08);
    }

/* === Estratto da <style id="zerosync-ui-premium-polish"> #3 === */
/* ZeroSync Premium UI Polish v1 — visual only, no logic touched */
:root {
  --bg-main: #090c12;
  --bg-card: #121821;
  --bg-input: #1a2230;
  --surface-1: linear-gradient(180deg, rgba(25, 32, 43, 0.98) 0%, rgba(15, 20, 28, 0.98) 100%);
  --surface-2: linear-gradient(180deg, rgba(20, 26, 36, 0.94) 0%, rgba(11, 15, 21, 0.96) 100%);
  --surface-3: linear-gradient(180deg, rgba(28, 36, 49, 0.88) 0%, rgba(16, 21, 29, 0.92) 100%);
  --surface-highlight: linear-gradient(135deg, rgba(0,255,102,0.13) 0%, rgba(142,197,255,0.08) 54%, rgba(255,255,255,0.03) 100%);
  --glass-stroke: rgba(255,255,255,0.08);
  --glass-stroke-strong: rgba(255,255,255,0.14);
  --text-main: #fbfdff;
  --text-muted: #92a0b5;
  --text-soft: #bcc7d7;
  --color-primary: #00f27a;
  --color-primary-2: #7dffd2;
  --color-danger: #ff4f7d;
  --color-warning: #ffd166;
  --color-info: #8ec5ff;
  --shadow-card: 0 18px 42px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-card-soft: 0 10px 24px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.025);
  --shadow-premium: 0 24px 60px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-green: 0 18px 40px rgba(0,255,102,0.14), 0 0 0 1px rgba(0,255,102,0.08) inset;
  --shadow-danger: 0 18px 40px rgba(255,79,125,0.14), 0 0 0 1px rgba(255,79,125,0.08) inset;
  --radius-card: 24px;
  --radius-btn: 18px;
  --radius-pill: 999px;
  --max-width-app: 520px;
}

html {
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(0,255,102,0.08) 0%, rgba(0,255,102,0.00) 58%),
    radial-gradient(780px 520px at 100% 0%, rgba(142,197,255,0.08) 0%, rgba(142,197,255,0.00) 52%),
    linear-gradient(180deg, #090c12 0%, #0b0f16 100%);
}
body {
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.00) 70%),
    linear-gradient(180deg, rgba(9,12,18,0.98) 0%, rgba(8,11,17,1) 100%);
  color: var(--text-main);
  letter-spacing: -0.01em;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(420px 280px at 10% 12%, rgba(0,255,102,0.06) 0%, rgba(0,255,102,0) 72%),
    radial-gradient(460px 320px at 90% 18%, rgba(142,197,255,0.05) 0%, rgba(142,197,255,0) 74%);
  opacity: .95;
}
body::after {
  background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 78%);
  opacity: .22;
}

.app-wrapper {
  max-width: var(--max-width-app);
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}
.view {
  padding-bottom: calc(148px + env(safe-area-inset-bottom));
}
header {
  min-height: 72px;
  padding: 18px 20px 16px 20px;
  background: rgba(11, 14, 20, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 32px rgba(0,0,0,0.14);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
header > span,
header #header-group-title {
  text-shadow: 0 1px 0 rgba(255,255,255,0.03);
}

.svg-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.15;
}
.back-btn,
.icon-btn,
.nav-item,
.action-btn,
.stats-modal-close {
  transition: transform .18s ease, background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.back-btn,
.icon-btn,
.nav-item,
.stats-modal-close {
  border: 1px solid transparent;
}
.back-btn:hover,
.icon-btn:hover,
.nav-item:hover,
.stats-modal-close:hover {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.06);
}
.back-btn:active,
.icon-btn:active,
.nav-item:active,
.action-btn:active,
.stats-modal-close:active {
  transform: scale(.94);
}

.login-container {
  min-height: 100dvh;
  justify-content: center;
  gap: 4px;
  padding: 30px 22px 48px;
}
.login-logo {
  text-shadow: 0 0 18px rgba(0,255,102,0.08);
  margin-bottom: 2px;
}
.login-subtitle {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 26px;
  color: var(--text-muted);
}
.auth-form {
  max-width: 360px;
  background: rgba(16, 21, 29, 0.72);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 28px;
  padding: 22px 18px 18px;
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}
#auth-title {
  margin-top: 2px;
  margin-bottom: 20px !important;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.divider {
  margin: 18px 4px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.34);
}
.auth-switch {
  margin-top: 16px;
  padding: 14px 8px 6px;
  text-decoration: none;
  font-weight: 700;
  color: var(--text-soft);
}
.auth-switch:hover {
  color: var(--text-main);
}

.input-group,
.payer-btn,
.participant-row,
.split-custom-row,
.btn-split-summary,
.settings-item,
.faq-item,
.choice-option-btn,
.expense-search-wrap,
#group-user-balance,
.group-balance-row,
.group-insight-chip,
.group-stats-launcher,
.activity-item,
.modal-content,
.stats-modal-card,
.global-dashboard,
.list-item,
.group-timeline-item {
  border-radius: var(--radius-card);
}

.input-group {
  min-height: 66px;
  padding: 10px 18px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-card-soft);
}
.input-group:focus-within {
  border-color: rgba(0,255,102,0.30);
  background: linear-gradient(180deg, rgba(18, 25, 33, 0.98) 0%, rgba(16, 21, 29, 0.98) 100%);
  box-shadow: 0 0 0 4px rgba(0,255,102,0.05), var(--shadow-card-soft);
}
.input-label {
  width: 40px;
  color: var(--color-primary-2);
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"] {
  color: var(--text-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
input::placeholder {
  color: rgba(146,160,181,0.92);
}
input[type="number"], input[inputmode="decimal"] {
  font-size: 28px;
  letter-spacing: -0.04em;
}

.btn-large,
.btn-google,
.btn-dev,
.btn-split-summary,
.modal-btn,
.choice-option-btn,
.expense-filter-chip,
.split-mode-btn,
.invite-btn,
.empty-state-action-btn,
.group-stats-launcher,
.payer-btn {
  position: relative;
  overflow: hidden;
}
.btn-large::before,
.btn-google::before,
.btn-dev::before,
.btn-split-summary::before,
.modal-btn::before,
.choice-option-btn::before,
.expense-filter-chip::before,
.split-mode-btn::before,
.invite-btn::before,
.empty-state-action-btn::before,
.group-stats-launcher::before,
.payer-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.10) 24%, rgba(255,255,255,0.00) 48%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-large:hover::before,
.btn-google:hover::before,
.btn-dev:hover::before,
.btn-split-summary:hover::before,
.modal-btn:hover::before,
.choice-option-btn:hover::before,
.expense-filter-chip:hover::before,
.split-mode-btn:hover::before,
.invite-btn:hover::before,
.empty-state-action-btn:hover::before,
.group-stats-launcher:hover::before,
.payer-btn:hover::before {
  transform: translateX(120%);
}

.btn-large,
.btn-google,
.btn-dev,
.btn-split-summary,
.modal-btn,
.choice-option-btn,
.invite-btn,
.payer-btn,
.split-mode-btn,
.expense-filter-chip,
.empty-state-action-btn,
.group-stats-launcher {
  min-height: 54px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.015em;
  box-shadow: var(--shadow-card-soft);
}
.btn-large {
  background: linear-gradient(180deg, #00ff7f 0%, #00df6f 100%);
  color: #04140b;
  box-shadow: var(--shadow-green);
}
.btn-large:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(0,255,102,0.18), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.btn-large:active {
  transform: scale(.975);
}
.btn-danger-outline {
  color: #ff7195;
  border: 1px solid rgba(255,79,125,0.28);
  background: linear-gradient(180deg, rgba(255,79,125,0.08) 0%, rgba(255,79,125,0.02) 100%);
  box-shadow: var(--shadow-danger);
}
.btn-google {
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(239,244,249,0.98) 100%);
  box-shadow: 0 16px 36px rgba(255,255,255,0.10);
}
.btn-dev {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.20);
  color: var(--text-soft);
  border-radius: 18px;
}
.btn-split-summary {
  min-height: 58px;
  border-radius: 18px;
  text-align: left;
  padding: 18px 18px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card-soft);
}
.invite-btn {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 18px;
  border: 1px solid rgba(0,255,102,0.24);
  background: linear-gradient(180deg, rgba(0,255,102,0.14) 0%, rgba(0,255,102,0.08) 100%);
  box-shadow: 0 12px 26px rgba(0,255,102,0.12);
}
.modal-btn,
.choice-option-btn {
  border: 1px solid rgba(255,255,255,0.08);
}
.modal-btn.cancel {
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  box-shadow: none;
}

.global-dashboard {
  position: relative;
  overflow: hidden;
  margin: 16px 15px 18px;
  padding: 32px 24px 28px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(0,255,102,0.08) 0%, rgba(142,197,255,0.06) 32%, rgba(19,25,35,0.94) 88%),
    linear-gradient(180deg, rgba(25,32,43,0.96) 0%, rgba(13,18,26,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 62px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
.global-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 90px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.global-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.52);
}
.global-subtitle {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--text-soft);
}
.global-amount {
  font-size: clamp(42px, 9vw, 54px);
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow: 0 4px 22px rgba(0,0,0,0.20);
}

.card-list {
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.list-item-wrapper {
  margin-bottom: 0;
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(255,79,125,0.16) 0%, rgba(255,79,125,0.08) 100%);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16);
}
.list-item {
  min-height: 86px;
  padding: 18px 18px;
  border-radius: 26px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card);
}
.list-item:hover {
  border-color: rgba(255,255,255,0.11);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.icon-box {
  width: 52px;
  height: 52px;
  margin-right: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(31,39,53,0.95) 0%, rgba(22,28,39,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 22px rgba(0,0,0,0.16);
}
.icon-box.group-icon {
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
}
.date-text {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.44);
}
.date-num {
  font-size: 20px;
  letter-spacing: -0.04em;
}
.item-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.025em;
}
.item-subtitle {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-muted);
}
.item-amounts {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.28;
}
.desktop-actions {
  gap: 8px;
}
.action-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.action-btn.edit {
  background: rgba(255,255,255,0.04);
}
.action-btn.delete {
  background: rgba(255,79,125,0.10);
  border-color: rgba(255,79,125,0.20);
}

.group-list-chip,
.expense-badge,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.group-timeline-item,
.expense-filter-chip,
.group-stats-launcher,
.member-tag,
.friend-chip,
.tab-btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.group-list-chip,
.expense-badge,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.expense-filter-chip {
  min-height: 30px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.member-tag {
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.friend-chip {
  min-height: 38px;
  padding: 6px 15px 6px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-card-soft);
}
.friend-chip-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.07) 100%);
}

.bottom-nav {
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(23,29,39,0.92) 0%, rgba(16,21,30,0.92) 100%);
  box-shadow: 0 22px 48px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.045);
  gap: 30px;
}
.nav-item {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--text-main);
  background: rgba(255,255,255,0.05);
}
.nav-fab-center {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 38px rgba(0,255,102,0.22), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.nav-fab-center:hover {
  transform: translateY(-1px);
}
.fab-group {
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00ff7f 0%, #00e170 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 20px 44px rgba(0,255,102,0.18), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.fab-group:hover {
  transform: translateY(-1px);
}

.expense-search-wrap {
  margin: 14px 15px 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(16, 21, 30, 0.70);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-card-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.expense-search-input-wrap {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.expense-search-input {
  height: 46px;
  font-size: 15px;
  font-weight: 750;
}
.expense-filter-toggle {
  height: 46px;
  min-width: 46px;
  border-radius: 14px;
}
.expense-filter-popover {
  margin-top: 6px;
  padding: 12px;
  border-radius: 18px;
}
.expense-filter-chip,
.split-mode-btn,
.payer-btn,
.tab-btn,
.group-stats-launcher {
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.expense-filter-chip:hover,
.split-mode-btn:hover,
.payer-btn:hover,
.tab-btn:hover,
.group-stats-launcher:hover,
.choice-option-btn:hover,
.empty-state-action-btn:hover,
.settings-item:hover,
.friend-chip:hover {
  transform: translateY(-1px);
}
.tab-btn {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 800;
}
.payer-btn,
.participant-row {
  border-radius: 18px;
}
.participant-row {
  padding: 18px 16px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card-soft);
}
.checkbox-custom {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border-width: 2px;
}
.split-mode-btn {
  min-height: 42px;
  border-radius: 14px;
}
.split-custom-row {
  padding: 15px 16px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card-soft);
}
.split-custom-input-wrap {
  width: 138px;
}
.split-custom-input {
  height: 44px;
  border-radius: 13px;
}

#group-user-balance {
  margin: 16px 15px 8px !important;
  padding: 20px 18px !important;
  border-radius: 24px !important;
  background: var(--surface-2) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: var(--shadow-card) !important;
}
.group-stats-launcher-row {
  margin: 14px 15px 6px 15px;
  gap: 10px;
}
.group-stats-launcher {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
}
.group-insights-row {
  gap: 10px;
}
.group-insight-chip {
  padding: 12px 13px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card-soft);
}
.group-insight-label {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.group-insight-value {
  font-size: 13px;
  color: var(--text-soft);
}
.group-timeline-item {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
}

.group-balance-compact {
  gap: 14px;
}
.group-balance-total-amount {
  font-size: 26px;
  letter-spacing: -0.05em;
}
.group-balance-row {
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.group-balance-more {
  color: var(--text-soft);
  font-weight: 850;
}

.modal-overlay {
  background: rgba(5,8,12,0.82);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}
.modal-content,
.stats-modal-card {
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: var(--shadow-premium);
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 72%),
    linear-gradient(180deg, rgba(24,29,39,0.985) 0%, rgba(13,18,26,0.988) 100%);
}
.modal-content {
  padding: 30px 24px 22px;
}
.stats-modal-card {
  padding: 20px 18px 18px;
}
.modal-title,
.stats-modal-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.modal-body,
.stats-modal-subtitle {
  color: var(--text-soft);
  line-height: 1.62;
}
.activity-item {
  padding: 13px;
  border-radius: 20px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}
.activity-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
}
.activity-item-text {
  font-weight: 800;
}
.activity-item-meta,
.activity-item-detail {
  color: var(--text-muted);
}
.stats-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

.settings-list {
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}
.settings-item {
  min-height: 62px;
  padding: 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: transparent;
}
.settings-icon-left {
  gap: 14px;
}
.settings-chevron {
  opacity: 0.42;
}
.legal-content {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.8;
}
.legal-content h3 {
  margin-top: 4px;
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.legal-content h4,
.faq-item h4 {
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.faq-item {
  padding: 22px 18px;
  border-radius: 22px;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-card-soft);
}
.faq-item p,
.legal-content p,
.legal-content li {
  color: var(--text-soft);
}

.avatar-upload-container {
  width: 92px;
  height: 92px;
  margin-bottom: 22px;
  border-radius: 28px;
  background: var(--surface-2);
  border: 1px dashed rgba(255,255,255,0.20);
  box-shadow: var(--shadow-card-soft);
}
.user-email {
  line-height: 1.45;
}

.empty-state,
.smart-empty-state {
  padding: 54px 24px;
}
.empty-icon {
  width: 70px;
  height: 70px;
  color: rgba(255,255,255,0.10);
}
.smart-empty-state-title {
  font-size: 18px;
  letter-spacing: -0.03em;
}
.smart-empty-state-subtitle {
  color: var(--text-soft);
}
.empty-state-actions {
  gap: 10px;
}
.empty-state-action-btn {
  min-height: 38px;
  border-radius: 999px;
}

.loader {
  border-width: 4px;
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.skeleton {
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 18%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 82%);
  background-size: 420px 100%;
}
.toast-notification {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 36px rgba(0,0,0,0.46);
}

@media (min-width: 650px) {
  :root {
    --max-width-app: 760px;
  }
  .app-wrapper {
    max-width: var(--max-width-app);
  }
  .view {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }
  header {
    padding-left: 24px;
    padding-right: 24px;
  }
  .global-dashboard {
    margin-left: 18px;
    margin-right: 18px;
    padding: 34px 28px 30px;
  }
  .card-list {
    padding: 0 18px;
    gap: 14px;
  }
  .expense-search-wrap,
  #group-user-balance,
  .group-stats-launcher-row {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }
  .fab-group {
    right: max(26px, calc(50% - 360px));
  }
  .bottom-nav {
    gap: 36px;
    padding: 10px 24px;
  }
  .auth-form {
    max-width: 390px;
    padding: 24px 20px 18px;
  }
  .list-item:hover .desktop-actions,
  .swipeable > .list-item:hover .desktop-actions {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 390px) {
  .bottom-nav {
    gap: 20px;
    padding: 8px 18px;
  }
  .nav-fab-center {
    width: 56px;
    height: 56px;
  }
  .fab-group {
    padding: 0 18px;
    min-height: 54px;
  }
  .global-dashboard {
    padding: 28px 20px 24px;
  }
  .list-item {
    padding: 16px;
  }
  .input-group {
    min-height: 62px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .list-item,
  .btn-large,
  .btn-google,
  .btn-dev,
  .btn-split-summary,
  .invite-btn,
  .modal-content,
  .stats-modal-card,
  .fab-group,
  .nav-fab-center,
  .input-group,
  .participant-row,
  .payer-btn,
  .split-mode-btn,
  .split-custom-row,
  .group-insight-chip,
  .activity-item,
  .faq-item,
  .settings-item,
  .expense-filter-chip,
  .group-stats-launcher,
  .friend-chip,
  .member-tag {
    will-change: transform, box-shadow, border-color, background-color;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v2"> #4 === */
/* ZeroSync Premium UI Polish v2 — motion, alignment, density, platform fit (visual only) */
:root {
  --zs-motion-fast: 180ms;
  --zs-motion-base: 240ms;
  --zs-motion-slow: 420ms;
  --zs-ease-out: cubic-bezier(.22,1,.36,1);
  --zs-ease-soft: cubic-bezier(.25,.8,.25,1);
  --zs-ease-bounce-soft: cubic-bezier(.2,.9,.22,1.08);
  --zs-stroke-icon: 2.12;
  --zs-icon-size: 21px;
  --zs-touch-min: 44px;
  --zs-hairline: 0.5px;
  --zs-safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  --zs-safe-top: calc(env(safe-area-inset-top, 0px) + 10px);
  --zs-focus-ring: 0 0 0 4px rgba(0,242,122,0.05), 0 0 0 1px rgba(0,242,122,0.18);
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1, "calt" 1, "tnum" 1;
}

/* safer focus treatment for keyboard users without changing layout */
:where(button, [role="button"], input, .list-item, .friend-chip, .member-tag, .expense-filter-chip, .split-mode-btn, .group-stats-launcher):focus-visible {
  outline: none;
  box-shadow: var(--zs-focus-ring), var(--shadow-card-soft);
}

/* global motion tuning */
:where(.btn-large, .btn-google, .btn-dev, .btn-split-summary, .modal-btn, .choice-option-btn, .invite-btn, .payer-btn, .split-mode-btn, .expense-filter-chip, .empty-state-action-btn, .group-stats-launcher, .fab-group, .nav-fab-center, .nav-item, .back-btn, .icon-btn, .action-btn, .stats-modal-close, .friend-chip, .member-tag, .settings-item, .faq-item, .list-item, .group-insight-chip, .group-timeline-item, .activity-item, .input-group, .split-custom-row, .expense-search-wrap, .expense-search-input-wrap, .modal-content, .stats-modal-card, .toast-notification) {
  transition-property: transform, box-shadow, border-color, background-color, color, opacity, filter;
  transition-duration: var(--zs-motion-base);
  transition-timing-function: var(--zs-ease-out);
}

/* premium optical alignment for inline SVG */
.svg-icon,
[data-svg] .svg-icon,
.icon-btn .svg-icon,
.back-btn .svg-icon,
.nav-item .svg-icon,
.nav-fab-center .svg-icon,
.action-btn .svg-icon,
.settings-icon-left .svg-icon,
.group-stats-launcher-icon .svg-icon,
.input-label .svg-icon,
.empty-icon .svg-icon {
  width: var(--zs-icon-size);
  height: var(--zs-icon-size);
  stroke-width: var(--zs-stroke-icon);
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  transform: translateY(.15px);
}
.nav-fab-center .svg-icon { transform: translateY(.35px); }
.group-stats-launcher-icon .svg-icon { width: 16px; height: 16px; }
.settings-icon-left [data-svg],
.input-label [data-svg],
.action-btn [data-svg] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* view transitions feel less raw, more native */
.view.active {
  animation: zsViewEnter var(--zs-motion-slow) var(--zs-ease-out);
}
.view.active-back {
  animation: zsViewEnterBack var(--zs-motion-slow) var(--zs-ease-out);
}
@keyframes zsViewEnter {
  from { opacity: 0; transform: translate3d(14px, 0, 0) scale(.992); filter: saturate(.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); }
}
@keyframes zsViewEnterBack {
  from { opacity: 0; transform: translate3d(-14px, 0, 0) scale(.992); filter: saturate(.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: saturate(1); }
}

header {
  padding-top: max(18px, var(--zs-safe-top));
  min-height: 74px;
}
header > .back-btn,
header > .icon-btn,
header > div > .icon-btn,
header > div > .invite-btn {
  min-width: var(--zs-touch-min);
  min-height: var(--zs-touch-min);
}

/* millimetric spacing/density tuning */
.card-list { gap: 11px; }
.list-item-wrapper { border-radius: 27px; }
.list-item {
  min-height: 84px;
  align-items: center;
  padding-top: 17px;
  padding-bottom: 17px;
}
.item-details { padding-right: 6px; }
.item-title { line-height: 1.16; }
.item-subtitle { line-height: 1.3; }
.item-amounts { min-width: 82px; }
.icon-box { align-self: center; }

/* interactive depth and motion */
.list-item:hover,
.group-insight-chip:hover,
.activity-item:hover,
.faq-item:hover,
.friend-chip:hover,
.member-tag:hover,
.settings-item:hover,
.group-balance-row:hover,
.choice-option-btn:hover,
.input-group:hover,
.expense-search-wrap:hover {
  transform: translateY(-1px);
}
.list-item:hover { box-shadow: 0 22px 48px rgba(0,0,0,0.29), inset 0 1px 0 rgba(255,255,255,0.04); }
.group-insight-chip:hover,
.activity-item:hover,
.group-balance-row:hover,
.choice-option-btn:hover,
.faq-item:hover {
  box-shadow: 0 16px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* buttons & chips: native-like press behavior */
.btn-large,
.btn-google,
.btn-dev,
.btn-split-summary,
.modal-btn,
.choice-option-btn,
.invite-btn,
.payer-btn,
.split-mode-btn,
.expense-filter-chip,
.empty-state-action-btn,
.group-stats-launcher,
.fab-group,
.nav-fab-center,
.nav-item,
.back-btn,
.icon-btn,
.action-btn,
.stats-modal-close,
.friend-chip,
.member-tag,
.tab-btn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn-large:active,
.btn-google:active,
.btn-dev:active,
.btn-split-summary:active,
.modal-btn:active,
.choice-option-btn:active,
.invite-btn:active,
.payer-btn:active,
.split-mode-btn:active,
.expense-filter-chip:active,
.empty-state-action-btn:active,
.group-stats-launcher:active,
.fab-group:active,
.nav-fab-center:active,
.nav-item:active,
.back-btn:active,
.icon-btn:active,
.action-btn:active,
.stats-modal-close:active,
.friend-chip:active,
.member-tag:active,
.tab-btn:active {
  transition-duration: 120ms;
  filter: saturate(1.02);
}
.btn-large:hover,
.fab-group:hover,
.nav-fab-center:hover {
  filter: saturate(1.04) brightness(1.01);
}
.nav-item:hover,
.back-btn:hover,
.icon-btn:hover,
.stats-modal-close:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* touch targets / mobile comfort */
.nav-item,
.back-btn,
.icon-btn,
.stats-modal-close,
.action-btn,
.expense-filter-toggle,
.group-stats-launcher,
.expense-filter-chip,
.split-mode-btn,
.empty-state-action-btn,
.friend-chip,
.member-tag,
.tab-btn {
  min-height: var(--zs-touch-min);
}
.expense-filter-chip,
.split-mode-btn,
.empty-state-action-btn,
.group-stats-launcher,
.member-tag,
.friend-chip,
.tab-btn {
  padding-top: 0;
  padding-bottom: 0;
}

/* bottom nav / fab optimized for iPhone + Android gesture area */
.bottom-nav {
  bottom: var(--zs-safe-bottom);
  transform: translateX(-50%) translateZ(0);
  padding-top: 10px;
  padding-bottom: 10px;
}
.fab-group {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  right: max(18px, env(safe-area-inset-right, 0px) + 16px);
}
.toast-notification.show {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
}

/* input feel more native and aligned */
.input-group,
.expense-search-input-wrap,
.split-custom-input,
#modal-input {
  transform: translateZ(0);
}
.input-group:focus-within,
.expense-search-input-wrap:focus-within,
.split-custom-input:focus,
#modal-input:focus {
  box-shadow: var(--zs-focus-ring), var(--shadow-card-soft) !important;
}
#modal-input {
  min-height: 52px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#expense-form-view .input-group + .input-group { margin-top: 2px; }
#expense-form-view .btn-split-summary + .input-group { margin-top: 14px !important; }

/* filter / chip rhythm & motion */
.expense-filter-row { gap: 9px; }
.expense-filter-chip,
.split-mode-btn,
.group-stats-launcher,
.group-list-chip,
.expense-badge,
.recurring-pill,
.activity-item-badge {
  white-space: nowrap;
  line-height: 1;
}
.expense-filter-chip.active,
.split-mode-btn.active,
.payer-btn.selected,
.participant-row.selected,
.group-stats-launcher.primary {
  transform: translateY(-1px);
}
.expense-filter-popover.open {
  animation: zsFilterPopoverIn 220ms var(--zs-ease-out);
  transform-origin: top center;
}
@keyframes zsFilterPopoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* modal motion: slower, more premium */
.modal-overlay.active .modal-content,
.stats-modal-overlay.active .stats-modal-card {
  animation: zsModalIn 300ms var(--zs-ease-bounce-soft);
}
@keyframes zsModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.975); filter: blur(1.2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.modal-overlay:not(.active) .modal-content,
.stats-modal-overlay:not(.active) .stats-modal-card {
  animation: none;
}
.modal-buttons { gap: 10px; }
.stats-modal-content { scroll-padding-top: 6px; }

/* skeleton refinement */
.skeleton {
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.08) 44%, rgba(255,255,255,0) 68%);
  transform: translateX(-130%);
  animation: zsShimmerPass 1.6s linear infinite;
}
@keyframes zsShimmerPass {
  to { transform: translateX(130%); }
}

/* better balance cards and activity density */
.group-balance-row,
.activity-item,
.group-insight-chip,
.group-timeline-item,
.expense-badges,
.recurring-meta {
  align-items: center;
}
.group-balance-row { min-height: 48px; }
.activity-item-top { align-items: flex-start; }
.activity-item-badge { min-width: 78px; justify-content: center; }
.activity-item-text { line-height: 1.38; }

/* optical consistency for avatars and circular surfaces */
.avatar-upload-container,
#header-group-avatar-img,
#profile-avatar-preview,
#group-avatar-preview,
.icon-box img,
#header-group-avatar-icon {
  transform: translateZ(0);
}
.avatar-upload-container {
  border-style: solid;
}
#header-group-avatar-icon,
#profile-avatar-placeholder,
#group-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* tighter sections without touching structure */
.form-section { padding-top: 18px; padding-bottom: 18px; }
#group-detail-view .card-list,
#home-view .card-list { margin-top: 8px; }
#group-form-view .form-section,
#expense-form-view .form-section,
#split-menu-view .form-section,
#profile-view .form-section { display: grid; gap: 0; }

/* very small devices */
@media (max-width: 390px) {
  :root { --zs-icon-size: 20px; }
  header { min-height: 72px; }
  .item-title { font-size: 15.5px; }
  .item-subtitle { font-size: 12.5px; }
  .group-stats-launcher-row { gap: 8px; }
  .group-stats-launcher-hint { max-width: 80px; }
  .bottom-nav { padding-left: 18px; padding-right: 18px; }
}

/* desktop / pointer devices */
@media (hover: hover) and (pointer: fine) {
  .bottom-nav:hover {
    box-shadow: 0 26px 54px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .fab-group:hover,
  .nav-fab-center:hover,
  .btn-large:hover {
    transform: translateY(-1px) scale(1.01);
  }
  .list-item:hover .item-amounts,
  .swipeable > .list-item:hover .item-amounts {
    transform: translateX(-3px);
  }
  .swipeable > .list-item:hover .icon-box,
  .list-item:hover .icon-box {
    transform: translateY(-1px);
  }
}

/* desktop alignment with existing wider layout */
@media (min-width: 650px) {
  header { min-height: 78px; }
  .card-list { gap: 12px; }
  .list-item { min-height: 88px; }
  .group-stats-launcher-row { margin-top: 12px; }
  .fab-group {
    right: max(24px, calc(50% - 362px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  }
}

/* reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v3"> #5 === */
/* ZeroSync Premium UI Polish v3 — art direction final pass (visual only) */
:root {
  --zs-ds-radius-1: 14px;
  --zs-ds-radius-2: 18px;
  --zs-ds-radius-3: 22px;
  --zs-ds-radius-4: 28px;
  --zs-ds-radius-pill: 999px;
  --zs-ds-space-1: 6px;
  --zs-ds-space-2: 10px;
  --zs-ds-space-3: 14px;
  --zs-ds-space-4: 18px;
  --zs-ds-space-5: 22px;
  --zs-ds-space-6: 28px;
  --zs-ds-shadow-1: 0 8px 20px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.025);
  --zs-ds-shadow-2: 0 16px 36px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.03);
  --zs-ds-shadow-3: 0 24px 56px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
  --zs-ds-surface-strong: linear-gradient(180deg, rgba(28,35,47,0.98) 0%, rgba(16,21,29,0.99) 100%);
  --zs-ds-surface-card: linear-gradient(180deg, rgba(24,31,42,0.985) 0%, rgba(15,20,28,0.99) 100%);
  --zs-ds-surface-soft: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%);
  --zs-ds-stroke-soft: rgba(255,255,255,0.075);
  --zs-ds-stroke-mid: rgba(255,255,255,0.11);
  --zs-ds-text-1: #f9fbff;
  --zs-ds-text-2: #cdd8e7;
  --zs-ds-text-3: #92a0b5;
}

/* --- final design-system unification --- */
.list-item,
.input-group,
.btn-split-summary,
.payer-btn,
.participant-row,
.split-custom-row,
.expense-search-wrap,
.modal-content,
.stats-modal-card,
.faq-item,
.settings-item,
.activity-item,
.group-insight-chip,
.group-balance-row,
.choice-option-btn {
  border-radius: var(--zs-ds-radius-3);
}

.expense-badge,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.expense-filter-chip,
.split-mode-btn,
.group-stats-launcher,
.member-tag,
.friend-chip,
.tab-btn,
.group-timeline-item {
  border-radius: var(--zs-ds-radius-pill);
}

/* --- homepage / dashboard / group cards --- */
#home-view .global-dashboard {
  margin-top: 14px;
  margin-bottom: 16px;
  padding: 34px 24px 30px;
  border-radius: 34px;
  background:
    radial-gradient(220px 120px at 50% -6%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(180px 110px at 18% 18%, rgba(0,242,122,0.10) 0%, rgba(0,242,122,0) 72%),
    radial-gradient(190px 110px at 82% 18%, rgba(142,197,255,0.08) 0%, rgba(142,197,255,0) 74%),
    linear-gradient(145deg, rgba(13,18,26,0.98) 0%, rgba(22,30,40,0.98) 52%, rgba(16,21,29,0.99) 100%);
  box-shadow: 0 28px 64px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 56px rgba(0,242,122,0.06);
}
#home-view .global-dashboard::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.045);
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  padding: 1px;
  opacity: .5;
  pointer-events: none;
}
.global-title {
  font-size: 10px;
  letter-spacing: 0.24em;
}
.global-subtitle {
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}
.global-amount {
  letter-spacing: -0.06em;
  font-weight: 900;
}

#home-view .card-list {
  gap: 12px;
}
#home-view .list-item-wrapper {
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(255,79,125,0.14) 0%, rgba(255,79,125,0.08) 34%, rgba(255,255,255,0.02) 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}
#home-view .list-item {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 18px 18px;
  border-radius: 30px;
  background:
    radial-gradient(120px 70px at 8% 16%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(24,31,42,0.99) 0%, rgba(15,20,28,0.99) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--zs-ds-shadow-2);
}
#home-view .list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.045) 36%, rgba(255,255,255,0) 62%);
  opacity: .8;
  pointer-events: none;
}
#home-view .list-item:hover {
  box-shadow: var(--zs-ds-shadow-3);
}
#home-view .icon-box {
  width: 54px;
  height: 54px;
  margin-right: 16px;
  border-radius: 18px;
  background:
    radial-gradient(60px 36px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(35,44,58,0.98) 0%, rgba(23,29,40,0.98) 100%);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
#home-view .icon-box.group-icon {
  border-radius: 19px;
}
#home-view .item-title {
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
#home-view .item-subtitle {
  font-size: 13px;
  line-height: 1.28;
  color: var(--zs-ds-text-3);
}
#home-view .item-amounts {
  min-width: 90px;
  font-size: 14px;
  line-height: 1.2;
}
#home-view .group-list-chip {
  margin-top: 8px;
  min-height: 28px;
  padding: 0 11px;
}
#home-view .group-list-chip,
#home-view .expense-badge,
#home-view .recurring-pill {
  border-color: rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* home empty state final pass */
#home-view .smart-empty-state,
#home-view .empty-state {
  padding: 68px 24px 60px;
}
#home-view .empty-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.09);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.16));
}
#home-view .smart-empty-state-title {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.035em;
}
#home-view .smart-empty-state-subtitle {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  color: var(--zs-ds-text-2);
}
#home-view .empty-state-action-btn {
  min-height: 40px;
  padding: 0 15px;
}

/* nav + FAB final pass */
.bottom-nav {
  border-radius: 999px;
  border-color: rgba(255,255,255,0.11);
  background:
    radial-gradient(180px 50px at 50% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(24,31,42,0.94) 0%, rgba(15,20,28,0.94) 100%);
  box-shadow: 0 24px 54px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-item {
  color: var(--zs-ds-text-3);
}
.nav-item.active,
.nav-item[aria-current="page"] {
  background: rgba(255,255,255,0.06);
  color: var(--zs-ds-text-1);
}
.nav-fab-center {
  background:
    radial-gradient(56px 22px at 50% 0%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 76%),
    linear-gradient(180deg, rgba(0,255,127,1) 0%, rgba(0,222,108,1) 100%);
  box-shadow: 0 20px 44px rgba(0,255,102,0.24), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.fab-group {
  min-height: 60px;
  padding: 0 24px;
  letter-spacing: -0.015em;
  background:
    radial-gradient(100px 26px at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(0,255,127,1) 0%, rgba(0,222,108,1) 100%);
}

/* --- group detail / search / balance / list --- */
#group-detail-view .expense-search-wrap {
  padding: 10px;
  border-radius: 24px;
  background:
    radial-gradient(140px 48px at 12% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(23,29,39,0.98) 0%, rgba(14,19,27,0.98) 100%);
  box-shadow: var(--zs-ds-shadow-2);
}
#group-detail-view .expense-search-input-wrap {
  min-height: 48px;
  border-radius: 15px;
}
#group-detail-view .expense-search-input {
  height: 48px;
  font-weight: 760;
}
#group-detail-view #group-user-balance {
  border-radius: 26px !important;
  background:
    radial-gradient(140px 42px at 50% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(23,29,39,0.99) 0%, rgba(15,20,28,0.99) 100%) !important;
  box-shadow: var(--zs-ds-shadow-2) !important;
}
#group-detail-view .group-stats-launcher {
  min-height: 42px;
  padding: 0 15px;
}
#group-detail-view .card-list .list-item {
  min-height: 88px;
}

/* --- expense form / split screen final pass --- */
#expense-form-view .form-section,
#split-menu-view .form-section {
  gap: 0;
}
#expense-form-view .input-group,
#split-menu-view .input-group {
  min-height: 70px;
  padding: 11px 18px;
  border-radius: 22px;
}
#expense-form-view #importo-spesa {
  font-size: clamp(30px, 7vw, 34px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #11ff8a;
}
#expense-form-view .btn-split-summary,
#expense-form-view #btn-recurring-summary {
  min-height: 62px;
  padding: 18px 18px;
  border-radius: 22px;
  background:
    radial-gradient(120px 42px at 10% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(24,31,42,0.99) 0%, rgba(15,20,28,0.99) 100%);
  box-shadow: var(--zs-ds-shadow-1);
}
#expense-form-view .btn-large,
#split-menu-view .btn-large {
  min-height: 58px;
  border-radius: 20px;
}
#expense-form-view #btn-settle-expense {
  background: linear-gradient(180deg, rgba(0,242,122,0.08) 0%, rgba(0,242,122,0.03) 100%) !important;
  border-width: 1.5px !important;
}

#split-menu-view h3 {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.50) !important;
  margin-bottom: 12px !important;
}
#split-menu-view .scrollable-list {
  padding-right: 2px;
}
#split-menu-view .payer-btn {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
}
#split-menu-view .participant-row {
  min-height: 60px;
  padding: 16px 16px;
  border-radius: 20px;
}
#split-menu-view .split-mode-row {
  gap: 9px;
  margin-bottom: 10px;
}
#split-menu-view .split-mode-btn {
  min-height: 42px;
  padding: 0 15px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
#split-menu-view .split-custom-list {
  gap: 10px;
  margin-top: 16px;
}
#split-menu-view .split-custom-row {
  min-height: 62px;
  padding: 14px 15px;
  border-radius: 20px;
}
#split-menu-view .split-custom-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
#split-menu-view .split-custom-input-wrap {
  width: 136px;
}
#split-menu-view .split-custom-input {
  height: 46px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
}
#split-menu-view .split-custom-hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--zs-ds-text-2);
}
#split-menu-view .checkbox-custom {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

/* --- badges / chips design-system absolute uniformity --- */
.expense-badge,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.expense-filter-chip,
.split-mode-btn,
.group-stats-launcher,
.member-tag,
.friend-chip,
.tab-btn,
.group-timeline-item {
  min-height: 30px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.group-timeline-item { min-height: 34px; font-size: 11px; text-transform: none; letter-spacing: 0.02em; }
.activity-item-badge { min-width: 80px; }
.member-tag,
.friend-chip,
.tab-btn,
.group-stats-launcher { font-size: 11px; }

/* --- modals / empty states / toast / skeleton final pass --- */
.modal-content,
.stats-modal-card {
  border-radius: 32px;
  border-color: rgba(255,255,255,0.10);
  background:
    radial-gradient(240px 110px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 74%),
    linear-gradient(180deg, rgba(25,32,43,0.99) 0%, rgba(14,19,27,0.995) 100%);
}
.modal-title,
.stats-modal-title {
  font-size: 22px;
  line-height: 1.06;
  letter-spacing: -0.05em;
}
.modal-body,
.stats-modal-subtitle,
.stats-modal-empty {
  color: var(--zs-ds-text-2);
}
.modal-btn,
.choice-option-btn {
  min-height: 52px;
  border-radius: 18px;
}
.choice-option-btn {
  background: var(--zs-ds-surface-soft);
}
.stats-modal-card .activity-list {
  gap: 10px;
}
.activity-group-heading {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.42);
}
.activity-item {
  min-height: 74px;
  padding: 13px;
  border-radius: 22px;
  background:
    radial-gradient(90px 34px at 8% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.03) 100%);
}
.activity-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.activity-item-meta {
  color: rgba(255,255,255,0.46);
  font-size: 11px;
}
.toast-notification {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(242,246,250,0.98) 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42);
}
.skeleton {
  border-radius: 28px;
  border-color: rgba(255,255,255,0.03);
}
.smart-empty-state,
.empty-state {
  text-align: center;
}
.smart-empty-state-title,
.empty-state .smart-empty-state-title {
  font-weight: 900;
}
.smart-empty-state-subtitle,
.empty-state .smart-empty-state-subtitle {
  color: var(--zs-ds-text-2);
}

/* --- profile / faq / legal small consistency pass --- */
.settings-item {
  min-height: 64px;
  border-radius: 0;
}
.faq-item {
  border-radius: 24px;
}
.avatar-upload-container {
  border-radius: 30px;
}

/* --- responsive fine tuning --- */
@media (min-width: 650px) {
  #home-view .global-dashboard { padding: 36px 28px 32px; }
  #home-view .list-item,
  #group-detail-view .card-list .list-item { min-height: 94px; }
  #split-menu-view .split-custom-input-wrap { width: 148px; }
}
@media (max-width: 390px) {
  #home-view .global-dashboard { padding: 30px 20px 26px; border-radius: 30px; }
  #home-view .list-item { min-height: 88px; padding: 16px; }
  #split-menu-view .participant-row,
  #split-menu-view .split-custom-row { padding-left: 14px; padding-right: 14px; }
  #split-menu-view .split-custom-input-wrap { width: 122px; }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v4"> #6 === */
/* ZeroSync Premium UI Polish v4 — pixel-perfect release candidate (visual only) */
:root {
  --zs-rc-max-width: 780px;
  --zs-rc-space-1: 4px;
  --zs-rc-space-2: 8px;
  --zs-rc-space-3: 12px;
  --zs-rc-space-4: 16px;
  --zs-rc-space-5: 20px;
  --zs-rc-space-6: 24px;
  --zs-rc-space-7: 30px;
  --zs-rc-radius-card: 24px;
  --zs-rc-radius-card-lg: 30px;
  --zs-rc-radius-btn: 18px;
  --zs-rc-radius-pill: 999px;
  --zs-rc-text-xs: 10px;
  --zs-rc-text-sm: 12px;
  --zs-rc-text-md: 14px;
  --zs-rc-text-base: 15px;
  --zs-rc-text-lg: 16px;
  --zs-rc-text-xl: 18px;
  --zs-rc-shadow-soft: 0 12px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.025);
  --zs-rc-shadow-card: 0 18px 42px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.03);
  --zs-rc-shadow-premium: 0 26px 58px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
}

.app-wrapper { max-width: var(--zs-rc-max-width); }
body { letter-spacing: -0.011em; }

/* absolute cross-view consistency */
.login-container,
#home-view .view,
#group-detail-view .view,
#expense-form-view .view,
#split-menu-view .view,
.form-section,
.card-list {
  --zs-local-v-gap: var(--zs-rc-space-3);
}

header {
  min-height: 76px;
  padding-left: 20px;
  padding-right: 20px;
}
header > span,
#expense-form-title,
#header-group-title,
#group-form-title,
#auth-title {
  letter-spacing: -0.028em;
}

.svg-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.12;
  transform: translateY(.12px);
}
.icon-box .svg-icon,
.friend-chip-icon .svg-icon,
.group-stats-launcher-icon .svg-icon,
.input-label .svg-icon {
  transform: translateY(.08px);
}

/* login screen consistency */
.login-container {
  padding: max(30px, calc(env(safe-area-inset-top, 0px) + 18px)) 22px calc(52px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
}
.login-logo {
  margin-bottom: 4px;
  letter-spacing: -0.04em;
}
.login-subtitle {
  max-width: 294px;
  margin-bottom: 24px;
  font-size: var(--zs-rc-text-base);
  line-height: 1.62;
}
.auth-form {
  width: min(100%, 390px);
  padding: 24px 18px 18px;
  border-radius: 30px;
}
#auth-title {
  margin-bottom: 18px !important;
  font-size: clamp(28px, 5vw, 30px);
  line-height: 1.04;
}
#login-view .input-group {
  min-height: 64px;
  margin-bottom: 12px;
}
#login-view .btn-large,
#login-view .btn-google,
#login-view .btn-dev {
  min-height: 56px;
}
#login-view .btn-google,
#login-view .btn-dev,
#login-view .btn-large {
  border-radius: 19px;
}
#login-view .divider {
  margin: 16px 2px 14px;
}
#login-view .auth-switch {
  margin-top: 14px;
  padding-top: 12px;
  font-size: 14px;
}

/* general form/input/button rhythm */
.input-group {
  min-height: 68px;
  padding: 10px 18px;
  border-radius: 22px;
}
.input-label {
  width: 40px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"] {
  font-size: 16px;
  line-height: 1.2;
}
.btn-large,
.btn-google,
.btn-dev,
.btn-split-summary,
.modal-btn,
.choice-option-btn,
.payer-btn,
.split-mode-btn,
.expense-filter-chip,
.empty-state-action-btn,
.group-stats-launcher,
.tab-btn {
  font-size: 15px;
  line-height: 1;
}
.btn-large,
.btn-google,
.btn-dev,
.modal-btn,
.choice-option-btn {
  min-height: 56px;
}
.btn-split-summary {
  min-height: 60px;
  padding: 18px 18px;
}

/* home/dashboard/list rhythm */
#home-view .global-dashboard {
  margin: 14px 15px 16px;
  padding: 34px 24px 30px;
}
.global-title {
  font-size: 10px;
  line-height: 1;
}
.global-subtitle {
  font-size: 15px;
  line-height: 1.42;
}
.global-amount {
  line-height: .98;
}
.card-list {
  gap: 12px;
}
.list-item-wrapper {
  border-radius: 28px;
}
.list-item {
  min-height: 90px;
  padding: 17px 18px;
  border-radius: 28px;
}
.icon-box {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  margin-right: 16px;
}
.item-details {
  min-width: 0;
}
.item-title {
  font-size: 16px;
  line-height: 1.14;
  margin-bottom: 4px;
}
.item-subtitle {
  font-size: 13px;
  line-height: 1.28;
}
.item-amounts {
  min-width: 86px;
  font-size: 14px;
  line-height: 1.22;
  padding-left: 12px;
}
.date-text {
  font-size: 10px;
  line-height: 1;
}
.date-num {
  line-height: 1;
}

/* group detail top stack */
#group-detail-view .group-stats-launcher-row {
  margin: 12px 15px 6px 15px;
  gap: 8px;
}
#group-detail-view #group-user-balance {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  padding: 18px 18px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
#group-detail-view .expense-search-wrap {
  margin-top: 12px;
  margin-bottom: 8px;
}
#group-detail-view .expense-search-input-wrap {
  min-height: 46px;
}
#group-detail-view .expense-search-input {
  height: 46px;
  font-size: 15px;
}
.expense-filter-toggle {
  min-width: 46px;
  height: 46px;
}
.expense-filter-chip,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.expense-badge,
.empty-state-action-btn,
.group-stats-launcher,
.split-mode-btn,
.member-tag,
.friend-chip,
.tab-btn {
  min-height: 30px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 10px;
  letter-spacing: 0.075em;
}

/* expense form release-candidate tuning */
#expense-form-view .form-section,
#split-menu-view .form-section,
#group-form-view .form-section,
#profile-view .form-section {
  padding-top: 18px;
  padding-bottom: 18px;
}
#expense-form-view .input-group {
  min-height: 70px;
}
#expense-form-view #importo-spesa {
  font-size: clamp(30px, 7vw, 34px);
  line-height: 1;
}
#expense-form-view .btn-split-summary,
#expense-form-view #btn-recurring-summary {
  min-height: 62px;
  border-radius: 22px;
}
#expense-form-view #btn-save-expense,
#expense-form-view #btn-settle-expense,
#expense-form-view #btn-delete-expense {
  min-height: 58px;
}

/* split screen precision */
#split-menu-view h3 {
  margin-bottom: 12px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
#split-menu-view #payer-options-container {
  gap: 10px !important;
  margin-bottom: 32px !important;
}
#split-menu-view #participants-options-container {
  gap: 10px !important;
}
.payer-btn {
  min-height: 48px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
}
.participant-row {
  min-height: 60px;
  padding: 16px 16px;
  border-radius: 20px;
  margin-bottom: 0;
}
.split-mode-row {
  gap: 8px;
  margin-bottom: 8px;
}
.split-mode-btn {
  min-height: 42px;
  padding: 0 15px;
  font-size: 12px;
}
.split-custom-list {
  gap: 10px;
  margin-top: 16px;
}
.split-custom-row {
  min-height: 62px;
  padding: 14px 15px;
  border-radius: 20px;
}
.split-custom-name {
  font-size: 14px;
  line-height: 1.24;
}
.split-custom-input-wrap {
  width: 138px;
}
.split-custom-input {
  height: 46px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1;
}
.split-custom-hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
}
.checkbox-custom {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

/* modals / activity / empty states / toast */
.modal-content,
.stats-modal-card {
  border-radius: 32px;
}
.modal-content {
  width: min(88vw, 380px);
  padding: 30px 24px 22px;
}
.stats-modal-card {
  width: min(92vw, 430px);
  padding: 20px 18px 18px;
}
.modal-title,
.stats-modal-title {
  font-size: 22px;
  line-height: 1.06;
}
.modal-body,
.stats-modal-subtitle,
.stats-modal-empty {
  font-size: 14px;
  line-height: 1.6;
}
.modal-buttons { gap: 10px; }
.activity-list { gap: 10px; }
.activity-item {
  min-height: 74px;
  padding: 13px;
  border-radius: 22px;
}
.activity-item-text {
  font-size: 14px;
  line-height: 1.38;
}
.activity-item-meta,
.activity-item-detail {
  font-size: 12px;
  line-height: 1.45;
}
.smart-empty-state,
.empty-state {
  padding: 58px 24px;
}
.smart-empty-state-title {
  font-size: 18px;
  line-height: 1.14;
}
.smart-empty-state-subtitle {
  font-size: 14px;
  line-height: 1.58;
}
.toast-notification {
  min-height: 50px;
  padding: 0 22px;
  font-size: 14px;
}

/* nav / fab absolute consistency */
.bottom-nav {
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 10px 22px;
  gap: 30px;
}
.nav-item {
  width: 42px;
  height: 42px;
}
.nav-fab-center {
  width: 60px;
  height: 60px;
}
.fab-group {
  min-height: 58px;
  padding: 0 22px;
  font-size: 15px;
}

/* breakpoint tuning */
@media (max-width: 390px) {
  .login-container { padding-left: 18px; padding-right: 18px; }
  .auth-form { width: 100%; padding: 22px 16px 16px; }
  #auth-title { font-size: 27px; }
  header { min-height: 72px; padding-left: 18px; padding-right: 18px; }
  .global-dashboard { padding: 30px 20px 26px; }
  .list-item { min-height: 86px; padding: 16px; }
  .icon-box { width: 50px; height: 50px; margin-right: 14px; }
  .item-title { font-size: 15.5px; }
  .item-subtitle { font-size: 12.5px; }
  .item-amounts { min-width: 78px; font-size: 13.5px; }
  #group-detail-view #group-user-balance { padding: 17px 16px !important; }
  .input-group { min-height: 64px; padding: 10px 16px; }
  #expense-form-view .input-group { min-height: 66px; }
  #expense-form-view #importo-spesa { font-size: 30px; }
  .btn-split-summary { min-height: 58px; padding: 16px 16px; }
  .payer-btn { min-height: 46px; }
  .participant-row,
  .split-custom-row { padding-left: 14px; padding-right: 14px; }
  .split-custom-input-wrap { width: 122px; }
  .bottom-nav { gap: 20px; padding: 8px 18px; }
  .nav-fab-center { width: 56px; height: 56px; }
  .fab-group { min-height: 54px; padding: 0 18px; }
}

@media (min-width: 391px) and (max-width: 649px) {
  .auth-form { width: min(100%, 372px); }
  .list-item { min-height: 90px; }
  .split-custom-input-wrap { width: 132px; }
}

@media (min-width: 650px) {
  .app-wrapper { max-width: var(--zs-rc-max-width); }
  header { min-height: 80px; padding-left: 24px; padding-right: 24px; }
  .view { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .login-container { padding-top: max(34px, calc(env(safe-area-inset-top, 0px) + 22px)); }
  .auth-form { width: min(100%, 400px); padding: 26px 20px 18px; }
  .global-dashboard { margin-left: 18px; margin-right: 18px; padding: 36px 28px 32px; }
  .card-list { padding-left: 18px; padding-right: 18px; gap: 14px; }
  .list-item { min-height: 94px; padding: 18px 18px; }
  .icon-box { width: 54px; height: 54px; }
  .item-title { font-size: 16px; }
  .item-subtitle { font-size: 13px; }
  #group-detail-view #group-user-balance,
  #group-detail-view .expense-search-wrap,
  #group-detail-view .group-stats-launcher-row,
  #home-view .global-dashboard { margin-left: 18px !important; margin-right: 18px !important; }
  .split-custom-input-wrap { width: 148px; }
  .bottom-nav { gap: 36px; padding: 10px 24px; }
  .fab-group { right: max(24px, calc(50% - 372px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
}

@media (min-width: 901px) {
  .app-wrapper { max-width: 820px; }
  .auth-form { width: min(100%, 410px); }
  .global-dashboard { padding: 38px 30px 34px; }
  .list-item { min-height: 96px; }
  .item-title { font-size: 16.5px; }
  .item-amounts { min-width: 94px; }
  .fab-group { right: max(28px, calc(50% - 390px)); }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v5"> #7 === */
/*
  ZeroSync UI Release QA Checklist — Final Packaging Polish
  --------------------------------------------------------
  [ ] Header: baseline titoli coerente, safe-area corretta, nessun clipping
  [ ] Login: form centrato, CTA allineate, spacing verticale uniforme
  [ ] Home: dashboard/card rhythm costante, importi leggibili, chip compatti
  [ ] Group detail: balance/search/filters su una stessa griglia visiva
  [ ] Expense form: input, summary button e CTA con altezze coerenti
  [ ] Split: payer/participant/custom rows con densità uniforme e checkbox centrati
  [ ] Chips & badge: stessa altezza ottica, stesso padding, stessa baseline
  [ ] Modali: titolo/corpo/bottoni allineati, footer pulito, nessun overflow
  [ ] Toast / FAB / Bottom nav: centrature perfette e distanza costante dal bordo
  [ ] Responsive: nessun salto di ritmo tra <=390px, 391–649px, >=650px, >=901px
  [ ] Accessibilità visuale: focus ring leggibile, hover/active sobrio ma presente
  [ ] Final check: nessuna modifica a JS o struttura, solo micro-polish UI
*/

/* ZeroSync Premium UI Polish v5 — final packaging polish (visual only) */
:root {
  --zs-master-focus: 0 0 0 3px rgba(0,242,122,0.08), 0 0 0 1px rgba(0,242,122,0.18);
  --zs-master-shadow-lite: 0 10px 22px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.025);
  --zs-master-chip-h: 30px;
  --zs-master-chip-px: 11px;
  --zs-master-tight-line: 1.18;
  --zs-master-body-line: 1.56;
}

/* ultra-fine typography QA */
body { line-height: var(--zs-master-body-line); }
header > span,
#header-group-title,
#expense-form-title,
#group-form-title,
#auth-title,
.modal-title,
.stats-modal-title,
.global-title,
.global-subtitle,
.item-title {
  text-wrap: balance;
}
#auth-title,
.modal-title,
.stats-modal-title,
.item-title,
.global-subtitle {
  line-height: var(--zs-master-tight-line);
}
.item-subtitle,
.modal-body,
.stats-modal-subtitle,
.smart-empty-state-subtitle,
.split-custom-hint,
.activity-item-detail,
.activity-item-meta {
  line-height: 1.5;
}

/* header / icon baseline micro-fixes */
header {
  border-bottom-color: rgba(255,255,255,0.055);
}
.svg-icon,
[data-svg] .svg-icon,
.icon-btn .svg-icon,
.back-btn .svg-icon,
.nav-item .svg-icon,
.nav-fab-center .svg-icon,
.action-btn .svg-icon,
.group-stats-launcher-icon .svg-icon,
.input-label .svg-icon,
.settings-icon-left .svg-icon,
.empty-icon .svg-icon {
  transform: translateY(.1px);
}
header .back-btn,
header .icon-btn,
.stats-modal-close,
.nav-item,
.nav-fab-center,
.fab-group,
.expense-filter-toggle {
  will-change: transform, box-shadow;
}

/* login consistency */
.login-container { gap: 5px; }
.login-subtitle { margin-bottom: 22px; }
.auth-form { box-shadow: 0 24px 54px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.04) inset; }
#login-view .input-group:last-of-type { margin-bottom: 10px; }
#login-view .btn-large { margin-top: 4px !important; }
#login-view .btn-google { margin-top: 12px; }
#login-view .btn-dev { margin-top: 18px; }
#login-view .auth-switch { padding-bottom: 4px; }

/* list/card rhythm polish */
.card-list { gap: 11px; }
.list-item-wrapper { box-shadow: 0 12px 24px rgba(0,0,0,0.14); }
.list-item {
  box-shadow: 0 16px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03);
}
.list-item:active { transform: scale(.985); }
.item-title { margin-bottom: 3px; }
.item-subtitle { color: rgba(146,160,181,0.96); }
.item-amounts { line-height: 1.18; }
.icon-box { box-shadow: 0 10px 20px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.035); }

/* balance / search / filter alignment */
#group-detail-view #group-user-balance {
  margin-bottom: 6px !important;
}
.expense-search-wrap { gap: 7px; }
.expense-search-toprow { gap: 8px; }
.expense-search-input { letter-spacing: 0; }
.expense-filter-toggle,
.expense-search-input-wrap,
.split-custom-input,
#modal-input {
  box-shadow: none;
}
.expense-filter-toggle:hover,
.expense-filter-chip:hover,
.split-mode-btn:hover,
.payer-btn:hover,
.friend-chip:hover,
.group-stats-launcher:hover,
.tab-btn:hover {
  border-color: rgba(255,255,255,0.11);
}

/* chips/badges density and baseline */
.expense-badge,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.expense-filter-chip,
.split-mode-btn,
.group-stats-launcher,
.member-tag,
.friend-chip,
.tab-btn,
.group-timeline-item {
  min-height: var(--zs-master-chip-h);
  padding-left: var(--zs-master-chip-px);
  padding-right: var(--zs-master-chip-px);
  line-height: 1;
  align-items: center;
}
.expense-badge,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.expense-filter-chip,
.empty-state-action-btn {
  font-size: 10px;
  letter-spacing: 0.07em;
}
.group-timeline-item { min-height: 32px; }

/* forms / split final QA */
.input-group { margin-bottom: 13px; }
.btn-split-summary { text-align: left; }
.payer-btn,
.participant-row,
.split-custom-row {
  box-shadow: var(--zs-master-shadow-lite);
}
.participant-row,
.split-custom-row { align-items: center; }
.split-mode-row { gap: 8px; }
.split-custom-list { gap: 9px; }
.split-custom-hint { margin-top: 10px; }
.checkbox-custom,
.check-svg { transform: translateZ(0); }

/* modal / activity / empty / toast */
.modal-content,
.stats-modal-card { box-shadow: 0 28px 60px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.035); }
.modal-buttons { align-items: stretch; }
.modal-btn,
.choice-option-btn { box-shadow: 0 8px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.025); }
.activity-list { gap: 9px; }
.activity-item { box-shadow: 0 8px 18px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.025); }
.smart-empty-state,
.empty-state { padding-top: 56px; padding-bottom: 56px; }
.toast-notification {
  left: 50%;
  transform: translateX(-50%);
  min-width: min(280px, calc(100vw - 32px));
  justify-content: center;
  text-align: center;
}

/* nav / fab / toast exact alignment */
.bottom-nav {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.nav-item,
.nav-fab-center,
.fab-group,
.toast-notification {
  backface-visibility: hidden;
}
.fab-group { white-space: nowrap; }

/* focus polish */
:where(button, [role="button"], input, .list-item, .friend-chip, .member-tag, .expense-filter-chip, .split-mode-btn, .group-stats-launcher, .payer-btn, .participant-row, .split-custom-input):focus-visible {
  outline: none;
  box-shadow: var(--zs-master-focus), var(--zs-master-shadow-lite) !important;
}

/* responsive micro-corrections */
@media (max-width: 390px) {
  .card-list { gap: 10px; }
  .login-subtitle { margin-bottom: 20px; }
  .expense-badge,
  .group-list-chip,
  .recurring-pill,
  .activity-item-badge,
  .expense-filter-chip,
  .empty-state-action-btn { min-height: 29px; font-size: 9.5px; }
  .toast-notification { min-width: calc(100vw - 24px); }
}

@media (min-width: 650px) {
  .card-list { gap: 12px; }
  .list-item { min-height: 95px; }
  .fab-group { right: max(24px, calc(50% - 372px)); }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v6"> #8 === */
/* ZeroSync Premium UI Polish v6 — designer surgical fixes (visual only) */

/* 1) Swipe delete fusion on smartphone: the red area becomes part of the card, not a detached block */
@media (max-width: 650px) {
  .list-item-wrapper.swipeable {
    position: relative;
    overflow: hidden;
    border-radius: 28px !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,79,125,0.04) 58%,
        rgba(255,79,125,0.10) 76%,
        rgba(255,79,125,0.18) 100%) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.16) !important;
    isolation: isolate;
  }

  .list-item-wrapper.swipeable::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(120px 86px at 100% 50%, rgba(255,79,125,0.12) 0%, rgba(255,79,125,0.00) 72%),
      linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.025) 100%);
    z-index: 0;
  }

  .list-item-wrapper.swipeable > .list-item {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    border-radius: 28px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  }

  .swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    width: 88px;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    border-radius: 0 28px 28px 0;
    background:
      linear-gradient(90deg,
        rgba(255,79,125,0.00) 0%,
        rgba(255,79,125,0.05) 34%,
        rgba(255,79,125,0.14) 72%,
        rgba(255,79,125,0.22) 100%);
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.04);
    z-index: 1;
    overflow: hidden;
  }

  .swipe-actions .action-btn.delete {
    width: 88px;
    min-width: 88px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0 28px 28px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ff6f96 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swipe-actions .action-btn.delete .svg-icon,
  .swipe-actions .action-btn.delete svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.15;
    filter: drop-shadow(0 0 10px rgba(255,79,125,0.18));
  }

  .swipeable > .list-item:hover .item-amounts,
  .list-item:hover .item-amounts {
    transform: none !important;
  }
}

/* 2) Statistiche + Attività on one row on smartphone: compact premium two-column strip */
@media (max-width: 650px) {
  #group-detail-view .group-stats-launcher-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 8px !important;
    margin: 10px 15px 6px 15px !important;
    justify-content: stretch !important;
    flex-wrap: nowrap !important;
  }

  #group-detail-view .group-stats-launcher,
  #group-detail-view .group-activity-launcher {
    min-width: 0 !important;
    width: 100%;
    max-width: none;
    min-height: 40px !important;
    padding: 0 11px !important;
    gap: 7px !important;
    justify-content: flex-start;
    border-radius: 999px !important;
  }

  #group-detail-view .group-stats-launcher-label {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    min-width: 0;
  }

  #group-detail-view .group-stats-launcher-hint {
    font-size: 10px !important;
    max-width: 54px !important;
    margin-left: auto;
    text-align: right;
  }
}

@media (max-width: 390px) {
  .list-item-wrapper.swipeable,
  .list-item-wrapper.swipeable > .list-item {
    border-radius: 26px !important;
  }

  .swipe-actions,
  .swipe-actions .action-btn.delete {
    width: 82px;
    min-width: 82px;
    border-radius: 0 26px 26px 0 !important;
  }

  #group-detail-view .group-stats-launcher-row {
    gap: 7px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  #group-detail-view .group-stats-launcher,
  #group-detail-view .group-activity-launcher {
    padding: 0 10px !important;
  }

  #group-detail-view .group-stats-launcher-label {
    font-size: 10.5px !important;
  }

  #group-detail-view .group-stats-launcher-hint {
    max-width: 46px !important;
    font-size: 9.5px !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v7"> #9 === */
/* ZeroSync Premium UI Polish v7 — fixed anchors / zero-flicker navigation (visual only) */

/*
  Goal:
  - FAB "Nuova spesa" immediately visible in final position on group detail
  - Bottom nav immediately anchored at bottom on Home, no temporary in-flow jump
  - No JS touched, only CSS stabilization for views that contain fixed anchored UI
*/

/* 1) Fixed-safe view transitions for screens that contain anchored controls */
#home-view.active,
#home-view.active-back,
#group-detail-view.active,
#group-detail-view.active-back {
  animation: zsFixedAnchorFade 120ms linear !important;
  left: 0 !important;
  transform: none !important;
}

@keyframes zsFixedAnchorFade {
  from { opacity: 0.995; }
  to { opacity: 1; }
}

/* 2) Hard-anchor bottom nav and FAB so they render already in final viewport position */
#home-view .bottom-nav,
#group-detail-view .fab-group {
  position: fixed !important;
  visibility: visible !important;
  opacity: 1 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: auto !important;
}

#home-view .bottom-nav {
  left: 50% !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 120 !important;
}

#group-detail-view .fab-group {
  left: auto !important;
  right: max(18px, env(safe-area-inset-right, 0px) + 16px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
  transform: translate3d(0, 0, 0) !important;
  z-index: 120 !important;
}

/* 3) Prevent inherited hover/entry transforms from producing micro-late compositing */
#home-view .bottom-nav,
#group-detail-view .fab-group,
#home-view.active .bottom-nav,
#home-view.active-back .bottom-nav,
#group-detail-view.active .fab-group,
#group-detail-view.active-back .fab-group {
  filter: none !important;
}

/* 4) Mobile fine-tuning where glitch is most noticeable */
@media (max-width: 650px) {
  #home-view.active,
  #home-view.active-back,
  #group-detail-view.active,
  #group-detail-view.active-back {
    animation-duration: 90ms !important;
  }

  #home-view .bottom-nav {
    min-width: max-content;
    max-width: calc(100vw - 28px);
  }

  #group-detail-view .fab-group {
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
}

@media (min-width: 650px) {
  #home-view .bottom-nav {
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  #group-detail-view .fab-group {
    right: max(24px, calc(50% - 372px)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v8"> #10 === */
/* ZeroSync Premium UI Polish v8 — anti white-flash / fast-scroll stability (visual only) */

:root {
  --zs-solid-bg: #090c12;
}

html,
body {
  background: var(--zs-solid-bg) !important;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

body::before,
body::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.app-wrapper,
.view,
#home-view,
#group-detail-view,
#groups-container,
#expenses-container,
.card-list {
  background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Critical fix: remove heavy compositor churn during fast scroll on mobile */
@media (max-width: 650px) {
  .list-item,
  .list-item-wrapper,
  .global-dashboard,
  .expense-search-wrap,
  #group-user-balance,
  .group-stats-launcher,
  .group-insight-chip,
  .activity-item,
  .bottom-nav,
  .fab-group,
  .nav-fab-center,
  .nav-item,
  .icon-box,
  .friend-chip,
  .member-tag,
  .faq-item,
  .settings-item,
  .input-group,
  .participant-row,
  .split-custom-row,
  .btn-large,
  .btn-split-summary,
  .invite-btn {
    will-change: auto !important;
    filter: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Keep the base canvas always dark even when GPU drops gradients for a frame */
  #home-view,
  #group-detail-view,
  #profile-view,
  #faq-view,
  #privacy-view,
  #terms-view,
  #group-form-view,
  #expense-form-view,
  #split-menu-view {
    background: linear-gradient(180deg, #090c12 0%, #0a0f16 100%) !important;
  }

  .card-list {
    contain: paint;
  }

  .list-item-wrapper,
  .list-item,
  .global-dashboard,
  .expense-search-wrap,
  #group-user-balance {
    isolation: isolate;
  }
}

/* iOS/Android momentum-scroll visual hardening */
@supports (-webkit-touch-callout: none) {
  html,
  body,
  .view,
  .card-list,
  #groups-container,
  #expenses-container {
    background-color: #090c12 !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v9"> #11 === */
/* ZeroSync Premium UI Polish v9 — restore mobile scroll, keep anti-flash base */

/*
  v8 was too aggressive on mobile compositing/scroll containers.
  This layer restores natural vertical scrolling while keeping the dark base canvas.
*/

html,
body {
  overscroll-behavior-y: auto !important;
  overflow-y: auto !important;
}

/* Critical: scroll containers must not be transformed on mobile */
.app-wrapper,
.view,
#home-view,
#group-detail-view,
#groups-container,
#expenses-container,
.card-list {
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  overflow: visible !important;
}

@media (max-width: 650px) {
  .app-wrapper,
  .view,
  #home-view,
  #group-detail-view,
  #groups-container,
  #expenses-container,
  .card-list {
    -webkit-overflow-scrolling: touch !important;
    touch-action: auto !important;
  }

  /* v8 containment was too strong for the main scroller */
  .card-list {
    contain: none !important;
  }

  /* keep anti-flash dark base, but stop forcing compositing on scroll-critical wrappers */
  .list-item,
  .list-item-wrapper,
  .global-dashboard,
  .expense-search-wrap,
  #group-user-balance,
  .bottom-nav,
  .fab-group,
  .nav-fab-center,
  .nav-item {
    transform: none;
    -webkit-transform: none;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v10"> #12 === */
/* ZeroSync Premium UI Polish v10 — master scroll stability pass (visual only) */

/*
  Goal:
  - eliminate residual micro-jitter / visual tearing during fast mobile scroll
  - keep scroll fully natural (no blocked scroll, no white flashes)
  - reduce compositor stress only where it hurts, preserving premium look
*/

@media (max-width: 650px) {
  /* 1) Main scroller: keep it simple, native, and stable */
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
  }

  .app-wrapper,
  .view,
  #group-detail-view,
  #home-view {
    contain: none !important;
    isolation: auto !important;
    perspective: none !important;
    will-change: auto !important;
  }

  /* 2) Disable expensive backdrop blur on scroll-heavy surfaces only on mobile */
  #group-detail-view header,
  #group-detail-view .expense-search-wrap,
  #group-detail-view .bottom-nav,
  #group-detail-view .group-stats-launcher,
  #group-detail-view .group-insight-chip,
  #home-view header,
  #home-view .bottom-nav,
  #home-view .global-dashboard {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 3) Replace some heavy layered shadows with cleaner stable mobile shadows */
  #group-detail-view .list-item,
  #home-view .list-item,
  #group-detail-view #group-user-balance,
  #group-detail-view .expense-search-wrap,
  #home-view .global-dashboard,
  .bottom-nav,
  .fab-group {
    box-shadow: 0 10px 24px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.025) !important;
  }

  /* 4) Cards: stop subpixel shimmer from animated/hover polish while scrolling */
  .list-item,
  .list-item-wrapper,
  .icon-box,
  .item-amounts,
  .group-stats-launcher,
  .group-insight-chip,
  .expense-search-wrap,
  #group-user-balance,
  .global-dashboard {
    will-change: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  /* 5) Neutralize mobile hover polish that can create visual micro-jumps on Android */
  .list-item:hover,
  .group-insight-chip:hover,
  .activity-item:hover,
  .faq-item:hover,
  .friend-chip:hover,
  .member-tag:hover,
  .settings-item:hover,
  .group-balance-row:hover,
  .choice-option-btn:hover,
  .input-group:hover,
  .expense-search-wrap:hover,
  .fab-group:hover,
  .nav-fab-center:hover,
  .btn-large:hover,
  .expense-filter-chip:hover,
  .split-mode-btn:hover,
  .payer-btn:hover,
  .tab-btn:hover,
  .group-stats-launcher:hover {
    transform: none !important;
    filter: none !important;
  }

  /* 6) Keep dark canvas always continuous behind the list */
  #group-detail-view,
  #group-detail-view .card-list,
  #group-detail-view #expenses-container,
  #home-view,
  #home-view .card-list,
  #home-view #groups-container {
    background-color: #090c12 !important;
    background-image: none !important;
  }

  /* 7) Subtle optical stabilization for list typography during motion */
  .item-title,
  .item-subtitle,
  .item-amounts,
  .date-text,
  .date-num {
    text-shadow: none !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v11"> #13 === */
/* ZeroSync Premium UI Polish v11 — surgical fix for settled expense cards */

/* Rounded reimbursement detail panel inside settled expense cards */
.expense-rimborsi-panel {
  margin: 0 12px 12px 12px;
  padding: 12px 14px 12px 58px;
  background: linear-gradient(180deg, rgba(0,255,102,0.06) 0%, rgba(0,255,102,0.035) 100%);
  border: 1px solid rgba(0,255,102,0.12);
  border-radius: 16px 16px 22px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.expense-rimborso-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.expense-rimborso-row + .expense-rimborso-row {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.expense-rimborso-icon {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}
.expense-rimborso-text {
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 650px) {
  .expense-rimborsi-panel {
    margin: 0 10px 10px 10px;
    padding: 11px 12px 11px 54px;
    border-radius: 15px 15px 20px 20px;
  }
  .expense-rimborso-text {
    font-size: 12.5px;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v12"> #14 === */
/* ZeroSync Premium UI Polish v12 — group expenses micro-perfection pass */

/* 1) Search placeholder/input optical alignment */
#group-detail-view .expense-search-input {
  padding-left: 18px !important;
}
#group-detail-view .expense-search-input::placeholder {
  transform: translateX(0);
}
@media (max-width: 390px) {
  #group-detail-view .expense-search-input {
    padding-left: 16px !important;
  }
}

/* 2) Summary panel refinement */
#group-detail-view #group-user-balance {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  background:
    radial-gradient(220px 80px at 14% 0%, rgba(0,255,102,0.08) 0%, rgba(0,255,102,0.00) 72%),
    radial-gradient(240px 90px at 100% 0%, rgba(142,197,255,0.08) 0%, rgba(142,197,255,0.00) 74%),
    linear-gradient(180deg, rgba(21,28,38,0.99) 0%, rgba(13,18,26,0.995) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  text-align: left !important;
}
#group-detail-view #group-user-balance::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 38%);
}
#group-detail-view .group-balance-compact {
  position: relative;
  z-index: 1;
  gap: 12px;
}
#group-detail-view .group-balance-mode-single .group-balance-single-card,
#group-detail-view .group-balance-mode-multi .group-balance-total {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
#group-detail-view .group-balance-single-card {
  padding: 14px 14px 15px 14px;
}
#group-detail-view .group-balance-single-card.collect {
  border-color: rgba(0,255,102,0.16);
  background: linear-gradient(180deg, rgba(0,255,102,0.08) 0%, rgba(255,255,255,0.025) 100%);
}
#group-detail-view .group-balance-single-card.pay {
  border-color: rgba(255,79,125,0.16);
  background: linear-gradient(180deg, rgba(255,79,125,0.08) 0%, rgba(255,255,255,0.025) 100%);
}
#group-detail-view .group-balance-single-kicker,
#group-detail-view .group-balance-total-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
#group-detail-view .group-balance-single-main {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
#group-detail-view .group-balance-single-label {
  min-width: 0;
  flex: 1;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
#group-detail-view .group-balance-single-amount {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
#group-detail-view .group-balance-total {
  padding: 14px 14px 15px 14px;
  align-items: flex-end;
}
#group-detail-view .group-balance-total-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#group-detail-view .group-balance-total-caption {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}
#group-detail-view .group-balance-list {
  gap: 9px;
}
#group-detail-view .group-balance-row {
  min-height: 50px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.028) 100%);
  border: 1px solid rgba(255,255,255,0.05);
}
#group-detail-view .group-balance-row.collect {
  border-color: rgba(0,255,102,0.08);
}
#group-detail-view .group-balance-row.pay {
  border-color: rgba(255,79,125,0.08);
}
#group-detail-view .group-balance-row-label {
  font-size: 14px;
  font-weight: 750;
}
#group-detail-view .group-balance-row-amount,
#group-detail-view .group-balance-total-amount {
  text-shadow: none;
}
#group-detail-view .group-balance-more {
  padding-top: 3px;
  color: var(--text-soft);
}

@media (max-width: 650px) {
  #group-detail-view #group-user-balance {
    margin-top: 12px !important;
    padding: 16px 15px !important;
    border-radius: 26px !important;
  }
  #group-detail-view .group-balance-single-card,
  #group-detail-view .group-balance-total {
    border-radius: 18px;
  }
  #group-detail-view .group-balance-single-label {
    font-size: 16px;
  }
  #group-detail-view .group-balance-single-amount,
  #group-detail-view .group-balance-total-amount {
    font-size: 22px;
  }
  #group-detail-view .group-balance-total-caption {
    font-size: 12px;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v13"> #15 === */
/* ZeroSync Premium UI Polish v13 — summary/date/amount micro-fix */

/* Summary: only person name in gold, rest neutral, amount more explicit */
#group-detail-view .group-balance-person-name {
  color: #E7C66A;
  font-weight: 900;
}
#group-detail-view .group-balance-label-tail {
  color: var(--text-main);
  font-weight: 700;
}
#group-detail-view .group-balance-single-label,
#group-detail-view .group-balance-row-label {
  line-height: 1.26;
}
#group-detail-view .group-balance-single-amount.collect {
  color: var(--color-lent);
}
#group-detail-view .group-balance-single-amount.pay {
  color: var(--color-owe);
}
#group-detail-view .group-balance-single-amount,
#group-detail-view .group-balance-row-amount,
#group-detail-view .group-balance-total-amount {
  text-shadow: none;
}

/* Calendar badge: more readable month/day spacing */
#group-detail-view .icon-box .date-text {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
  transform: translateY(0);
}
#group-detail-view .icon-box .date-num {
  margin-top: 0;
  line-height: 0.95;
}

/* Expense card due/owed amount: slightly larger and more visible */
#group-detail-view .item-amounts {
  font-size: 14.5px;
}
#group-detail-view .item-amounts .expense-amount-emphasis {
  display: inline-block;
  margin-top: 2px;
  font-size: 1.12em;
  line-height: 1.02;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

@media (max-width: 650px) {
  #group-detail-view .group-balance-single-label,
  #group-detail-view .group-balance-row-label {
    line-height: 1.24;
  }
  #group-detail-view .icon-box .date-text {
    font-size: 8.6px;
    margin-bottom: 3px;
  }
  #group-detail-view .item-amounts {
    font-size: 14.8px;
  }
  #group-detail-view .item-amounts .expense-amount-emphasis {
    font-size: 1.15em;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v14"> #16 === */
/* ZeroSync Premium UI Polish v14 — modal/activity perfection pass (visual only) */
:root {
  --zs-v14-modal-radius: 34px;
  --zs-v14-soft-radius: 22px;
  --zs-v14-pill-radius: 999px;
  --zs-v14-sticky-top-gap: 4px;
  --zs-v14-sticky-bg: linear-gradient(180deg, rgba(22,28,38,0.98) 0%, rgba(16,21,29,0.96) 100%);
  --zs-v14-sticky-border: rgba(255,255,255,0.08);
  --zs-v14-sticky-shadow: 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* --- Statistiche gruppo / Attività gruppo: zero spigoli visivi --- */
#group-stats-modal .stats-modal-card,
#group-activity-modal .stats-modal-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--zs-v14-modal-radius) !important;
  padding: 22px 19px 18px 19px !important;
  background:
    radial-gradient(260px 120px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 72%),
    linear-gradient(180deg, rgba(24,30,40,0.992) 0%, rgba(14,19,27,0.996) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  isolation: isolate;
}
#group-stats-modal .stats-modal-card::after,
#group-activity-modal .stats-modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

#group-stats-modal .stats-modal-header,
#group-activity-modal .stats-modal-header {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: -2px -3px 8px -3px;
  padding: 0 3px 14px 3px;
  border-top-left-radius: calc(var(--zs-v14-modal-radius) - 6px);
  border-top-right-radius: calc(var(--zs-v14-modal-radius) - 6px);
  background:
    linear-gradient(180deg, rgba(19,24,33,0.97) 0%, rgba(19,24,33,0.88) 72%, rgba(19,24,33,0.00) 100%);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

#group-stats-modal .stats-modal-content,
#group-activity-modal .stats-modal-content {
  position: relative;
  overflow-y: auto;
  padding: 2px 6px 6px 2px;
  margin-right: -2px;
  scroll-padding-top: 78px;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
}
#group-stats-modal .stats-modal-content::-webkit-scrollbar,
#group-activity-modal .stats-modal-content::-webkit-scrollbar {
  width: 7px;
}
#group-stats-modal .stats-modal-content::-webkit-scrollbar-thumb,
#group-activity-modal .stats-modal-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
#group-stats-modal .stats-modal-content::-webkit-scrollbar-track,
#group-activity-modal .stats-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

#group-stats-modal .stats-modal-close,
#group-activity-modal .stats-modal-close {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* --- Activity heading/date: sticky ma leggibile e mai “incollata male” --- */
#group-activity-modal .activity-list {
  gap: 11px !important;
  padding-bottom: 4px;
}
#group-activity-modal .activity-group-heading {
  position: sticky;
  top: var(--zs-v14-sticky-top-gap);
  z-index: 5;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: calc(100% - 4px);
  margin: 2px 0 8px 0 !important;
  padding: 0 14px !important;
  border-radius: var(--zs-v14-pill-radius) !important;
  background: var(--zs-v14-sticky-bg) !important;
  border: 1px solid var(--zs-v14-sticky-border) !important;
  color: rgba(233,239,247,0.90) !important;
  font-size: 11px !important;
  letter-spacing: 0.11em !important;
  box-shadow: var(--zs-v14-sticky-shadow) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  text-shadow: none !important;
  white-space: nowrap;
}
#group-activity-modal .activity-group-heading::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.00) 42%, rgba(142,197,255,0.04) 100%);
  pointer-events: none;
}

/* --- Activity cards: più fluidità e coerenza col resto --- */
#group-activity-modal .activity-item {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 14px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background:
    radial-gradient(120px 38px at 8% 0%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 80%),
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.030) 100%) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.025) !important;
}
#group-activity-modal .activity-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.00) 38%, rgba(255,255,255,0.00) 100%);
  opacity: .65;
}
#group-activity-modal .activity-item-top {
  gap: 10px;
}
#group-activity-modal .activity-item-text {
  line-height: 1.36 !important;
  letter-spacing: -0.015em;
}
#group-activity-modal .activity-item-meta,
#group-activity-modal .activity-item-detail {
  color: rgba(198,207,220,0.78) !important;
}

/* --- Statistiche gruppo: chip e timeline ancora più morbidi --- */
#group-stats-modal .group-insight-chip,
#group-stats-modal .group-timeline-item,
#group-stats-modal .group-stats-launcher,
#group-stats-modal .group-balance-row,
#group-stats-modal .choice-option-btn {
  border-radius: 20px !important;
}
#group-stats-modal .group-insight-chip {
  overflow: hidden;
  border-color: rgba(255,255,255,0.07) !important;
}
#group-stats-modal .group-timeline-item {
  min-height: 36px;
  padding: 0 13px !important;
}

/* --- Smoothing generale su alcuni punti che possono apparire squadrati --- */
.action-btn,
.stats-modal-close,
.group-stats-launcher,
.group-balance-row,
.group-insight-chip,
.activity-item,
.btn-split-summary,
.input-group,
.expense-search-input-wrap,
.expense-filter-toggle,
.split-mode-btn,
.split-custom-input,
.choice-option-btn,
.modal-btn {
  border-radius: max(16px, var(--zs-v14-soft-radius));
}

/* mobile fine tuning */
@media (max-width: 650px) {
  :root {
    --zs-v14-modal-radius: 30px;
    --zs-v14-soft-radius: 20px;
    --zs-v14-sticky-top-gap: 3px;
  }
  #group-stats-modal .stats-modal-card,
  #group-activity-modal .stats-modal-card {
    width: min(92vw, 420px) !important;
    max-height: min(82vh, 650px) !important;
    padding: 20px 16px 16px 16px !important;
  }
  #group-stats-modal .stats-modal-header,
  #group-activity-modal .stats-modal-header {
    padding-bottom: 12px;
  }
  #group-stats-modal .stats-modal-content,
  #group-activity-modal .stats-modal-content {
    scroll-padding-top: 72px;
    padding-right: 4px;
  }
  #group-activity-modal .activity-group-heading {
    min-height: 32px;
    padding: 0 12px !important;
    margin-bottom: 7px !important;
    font-size: 10.5px !important;
  }
  #group-activity-modal .activity-item {
    padding: 13px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --zs-v14-modal-radius: 28px;
  }
  #group-stats-modal .stats-modal-card,
  #group-activity-modal .stats-modal-card {
    width: min(94vw, 390px) !important;
    padding: 18px 14px 14px 14px !important;
  }
  #group-activity-modal .activity-group-heading {
    max-width: calc(100% - 2px);
    letter-spacing: 0.09em !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v15"> #17 === */
/* ZeroSync Premium UI Polish v15 — unified main nav (visual only) */
:root {
  --zs-v15-nav-width: min(92vw, 330px);
  --zs-v15-nav-gap: 24px;
  --zs-v15-nav-pad-x: 20px;
  --zs-v15-nav-pad-y: 9px;
}

#home-view .bottom-nav-unified,
#group-detail-view .bottom-nav-unified {
  width: var(--zs-v15-nav-width);
  max-width: calc(100vw - 28px);
  min-height: 78px;
  padding: var(--zs-v15-nav-pad-y) var(--zs-v15-nav-pad-x);
  gap: var(--zs-v15-nav-gap);
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11) !important;
  background:
    radial-gradient(180px 54px at 50% 0%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.00) 72%),
    linear-gradient(180deg, rgba(24,31,42,0.95) 0%, rgba(15,20,28,0.95) 100%) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  z-index: 130 !important;
}

#home-view .bottom-nav-unified .nav-item,
#group-detail-view .bottom-nav-unified .nav-item {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 15px;
  flex: 0 0 auto;
}

#home-view .bottom-nav-unified .nav-fab-context,
#group-detail-view .bottom-nav-unified .nav-fab-context {
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 20px 44px rgba(0,255,102,0.24), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

#home-view .bottom-nav-unified .nav-item-home[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
  opacity: 1;
  color: var(--text-main);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#group-detail-view .bottom-nav-unified {
  left: 50% !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  transform: translate3d(-50%, 0, 0) !important;
}

#group-detail-view .fab-group {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#home-view,
#group-detail-view {
  padding-bottom: calc(158px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 390px) {
  :root {
    --zs-v15-nav-width: min(94vw, 310px);
    --zs-v15-nav-gap: 18px;
    --zs-v15-nav-pad-x: 18px;
    --zs-v15-nav-pad-y: 8px;
  }
  #home-view .bottom-nav-unified,
  #group-detail-view .bottom-nav-unified {
    min-height: 74px;
  }
  #home-view .bottom-nav-unified .nav-fab-context,
  #group-detail-view .bottom-nav-unified .nav-fab-context {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
  }
}

@media (min-width: 650px) {
  :root {
    --zs-v15-nav-width: 340px;
  }
  #home-view .bottom-nav-unified,
  #group-detail-view .bottom-nav-unified {
    min-height: 80px;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v16"> #18 === */
/* ZeroSync Premium UI Polish v16 — surgical art-direction delta (UI only) */
:root {
  --zs-v16-glow-green: rgba(0,255,122,0.18);
  --zs-v16-glow-blue: rgba(142,197,255,0.15);
  --zs-v16-glow-pink: rgba(255,79,125,0.14);
  --zs-v16-line: rgba(255,255,255,0.08);
  --zs-v16-badge-bg: linear-gradient(180deg, rgba(22,29,39,0.96) 0%, rgba(13,18,26,0.98) 100%);
  --zs-v16-badge-shadow: 0 18px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}

#login-view,
#home-view,
#group-detail-view,
#profile-view,
#expense-form-view,
#split-menu-view,
#group-form-view {
  position: relative;
  isolation: isolate;
}

#home-view::before,
#group-detail-view::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.88;
  background:
    radial-gradient(340px 180px at 14% 2%, rgba(0,255,122,0.08) 0%, rgba(0,255,122,0) 72%),
    radial-gradient(360px 220px at 86% 10%, rgba(142,197,255,0.08) 0%, rgba(142,197,255,0) 74%),
    radial-gradient(260px 150px at 50% 100%, rgba(255,79,125,0.05) 0%, rgba(255,79,125,0) 76%);
}

#login-view .login-logo,
#home-view header > span,
#group-detail-view #header-group-title {
  position: relative;
}

#login-view .login-logo::after,
#home-view header > span::after,
#group-detail-view #header-group-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: min(64px, 48%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,255,122,0) 0%, rgba(0,255,122,0.88) 45%, rgba(142,197,255,0.68) 100%);
  box-shadow: 0 0 16px rgba(0,255,122,0.22);
  opacity: 0.9;
}

#login-view .auth-form {
  position: relative;
  overflow: hidden;
}

#login-view .auth-form::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(220px 72px at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(0,255,122,0.03) 0%, rgba(0,0,0,0) 38%);
}

#login-view .login-logo {
  filter: drop-shadow(0 0 22px rgba(0,255,122,0.08));
}

#dev-mode-btn {
  position: relative;
  padding-left: 34px !important;
  color: #eefdf5 !important;
  border-style: solid !important;
  border-color: rgba(0,255,122,0.22) !important;
  background:
    radial-gradient(100px 28px at 50% 0%, rgba(0,255,122,0.14) 0%, rgba(0,255,122,0) 72%),
    linear-gradient(180deg, rgba(0,255,122,0.12) 0%, rgba(255,255,255,0.03) 100%) !important;
  box-shadow: 0 16px 28px rgba(0,255,122,0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

#dev-mode-btn::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(0,255,122,0.10), 0 0 14px rgba(0,255,122,0.35);
}

header::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,255,122,0.22) 34%, rgba(142,197,255,0.16) 66%, rgba(255,255,255,0) 100%);
  opacity: 0.95;
  pointer-events: none;
}

.icon-box,
.avatar-upload-container,
.friend-chip-icon,
.bottom-nav,
#group-detail-view .fab-group,
#group-detail-view .expense-search-wrap {
  position: relative;
}

.icon-box::after,
.avatar-upload-container::after,
.friend-chip-icon::after,
.bottom-nav::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

.bottom-nav::after {
  border-color: rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 42%);
}

#home-view .global-dashboard,
#group-detail-view #group-user-balance,
#group-detail-view .expense-search-wrap,
#group-detail-view .list-item,
#home-view .list-item,
#group-detail-view .group-stats-launcher,
#group-detail-view .group-insight-chip,
#profile-view .settings-item,
#group-form-view .friend-chip,
#expense-form-view .input-group,
#split-menu-view .participant-row,
#split-menu-view .split-custom-row,
#split-menu-view .payer-btn,
.modal-content,
.stats-modal-card {
  border-color: rgba(255,255,255,0.09);
}

#home-view .global-dashboard,
#group-detail-view #group-user-balance {
  box-shadow:
    0 22px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 48px rgba(0,255,122,0.06);
}

#home-view .global-dashboard {
  background:
    radial-gradient(280px 110px at 50% 0%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(180px 110px at 16% 18%, rgba(0,255,122,0.10) 0%, rgba(0,255,122,0) 72%),
    radial-gradient(210px 112px at 84% 18%, rgba(142,197,255,0.08) 0%, rgba(142,197,255,0) 72%),
    linear-gradient(145deg, rgba(14,20,28,0.99) 0%, rgba(24,32,43,0.99) 52%, rgba(15,20,28,1) 100%);
}

#group-detail-view .expense-search-wrap {
  background:
    radial-gradient(160px 48px at 10% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 74%),
    radial-gradient(120px 70px at 100% 0%, rgba(0,255,122,0.06) 0%, rgba(0,255,122,0) 72%),
    linear-gradient(180deg, rgba(22,29,39,0.99) 0%, rgba(14,18,26,0.99) 100%);
}

#group-detail-view .expense-search-wrap::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,122,0.14) 0%, rgba(0,255,122,0) 70%);
  filter: blur(10px);
  opacity: 0.7;
  pointer-events: none;
}

#group-detail-view .fab-group {
  overflow: hidden;
  background:
    radial-gradient(120px 32px at 50% 0%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(12,255,134,1) 0%, rgba(0,220,108,1) 100%) !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 22px 38px rgba(0,255,122,0.18), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

#group-detail-view .fab-group::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -18px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,122,0.24) 0%, rgba(0,255,122,0) 76%);
  filter: blur(10px);
  pointer-events: none;
}

.nav-item {
  position: relative;
}

.nav-item.active::after,
.nav-item[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,255,122,0.92) 0%, rgba(142,197,255,0.85) 100%);
  box-shadow: 0 0 12px rgba(0,255,122,0.18);
}

#group-detail-view .item-amounts,
#home-view .item-amounts {
  letter-spacing: -0.02em;
}

#group-detail-view .item-amounts .expense-amount-emphasis,
#home-view .item-amounts .expense-amount-emphasis {
  text-shadow: 0 0 16px rgba(0,255,122,0.10);
}

#group-activity-modal .activity-list {
  position: relative;
}

#group-activity-modal .activity-list::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(142,197,255,0.24) 18%, rgba(255,255,255,0.12) 56%, rgba(255,255,255,0) 100%);
  opacity: 0.7;
  pointer-events: none;
}

#group-activity-modal .activity-item-icon {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(14,19,27,0.92);
}

.zs-mode-badge {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px));
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 12px));
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px 0 12px;
  border-radius: 999px;
  color: #eefaf5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--zs-v16-badge-bg);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--zs-v16-badge-shadow);
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.zs-mode-badge.offline {
  border-color: rgba(255,209,102,0.24);
  box-shadow: 0 18px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(255,209,102,0.08);
}

.zs-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #11ff8a 0%, #00d96d 100%);
  box-shadow: 0 0 0 6px rgba(0,255,122,0.10), 0 0 16px rgba(0,255,122,0.34);
  flex-shrink: 0;
}

.zs-mode-badge.offline .zs-mode-dot {
  background: linear-gradient(180deg, #ffd972 0%, #ffbf3b 100%);
  box-shadow: 0 0 0 6px rgba(255,209,102,0.10), 0 0 16px rgba(255,209,102,0.28);
}

.zs-mode-label {
  white-space: nowrap;
}

body.zs-ui-admin-preview #home-view .global-dashboard,
body.zs-ui-admin-preview #group-detail-view #group-user-balance {
  box-shadow:
    0 22px 48px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 58px rgba(255,209,102,0.10);
}

@media (hover: hover) and (pointer: fine) {
  #home-view .list-item:hover,
  #group-detail-view .list-item:hover,
  #group-detail-view .group-stats-launcher:hover,
  #group-detail-view .group-insight-chip:hover,
  #group-detail-view #group-user-balance:hover,
  #group-detail-view .expense-search-wrap:hover,
  #group-detail-view .fab-group:hover {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 24px 50px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.04) inset;
  }

  #home-view .list-item:hover,
  #group-detail-view .list-item:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 650px) {
  #home-view::before,
  #group-detail-view::before {
    opacity: 0.72;
  }

  #home-view header > span::after,
  #group-detail-view #header-group-title::after,
  #login-view .login-logo::after {
    width: min(56px, 44%);
    bottom: -7px;
  }

  .zs-mode-badge {
    top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
    right: max(12px, calc(env(safe-area-inset-right, 0px) + 10px));
    min-height: 34px;
    padding: 0 11px 0 10px;
    font-size: 10px;
    letter-spacing: 0.10em;
  }

  #group-activity-modal .activity-list::before {
    left: 17px;
  }

  #group-detail-view .expense-search-wrap::before {
    width: 48px;
    height: 48px;
    top: 9px;
    right: 10px;
    filter: blur(12px);
  }
}

@media (max-width: 390px) {
  .zs-mode-badge {
    min-height: 32px;
    padding: 0 10px;
    gap: 8px;
  }

  .zs-mode-dot {
    width: 7px;
    height: 7px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .zs-mode-dot {
    animation: zsModePulse 2.2s ease-in-out infinite;
  }

  #login-view .login-logo,
  #group-detail-view .fab-group {
    animation: zsAuroraFloat 6.8s ease-in-out infinite;
  }
}

@keyframes zsModePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.92; }
}

@keyframes zsAuroraFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v17"> #19 === */
/* ZeroSync Premium UI Polish v17 — surgical repair pass for top/header, group nav and amount field */

/* 1) Remove the extra dark band / black rectangle effect on Home + Group header */
#home-view::before,
#group-detail-view::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

#home-view header,
#group-detail-view header {
  background: linear-gradient(180deg, rgba(9,12,18,0.10) 0%, rgba(9,12,18,0.00) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

#home-view header::after,
#group-detail-view header::after,
#home-view header > span::after,
#group-detail-view #header-group-title::after {
  content: none !important;
  display: none !important;
}

#home-view header > span,
#group-detail-view #header-group-title {
  text-shadow: none !important;
  filter: none !important;
}

/* 2) Lift the group detail bottom nav back to the previous visual altitude */
#group-detail-view .bottom-nav-unified {
  bottom: calc(30px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 650px) {
  #group-detail-view .bottom-nav-unified {
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 901px) {
  #group-detail-view .bottom-nav-unified {
    bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }
}

/* 3) Kill the ugly inner green ring only on the amount field row */
#expense-form-view .input-group:has(#importo-spesa) {
  border-color: rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(20,26,36,0.94) 0%, rgba(11,15,21,0.96) 100%) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

#expense-form-view .input-group:has(#importo-spesa):focus-within,
#expense-form-view .input-group:has(#importo-spesa):focus-visible {
  border-color: rgba(255,255,255,0.10) !important;
  background: linear-gradient(180deg, rgba(20,26,36,0.97) 0%, rgba(11,15,21,0.98) 100%) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

#expense-form-view #importo-spesa,
#expense-form-view .input-group:has(#importo-spesa) .input-label {
  text-shadow: none !important;
}

#expense-form-view #importo-spesa:focus,
#expense-form-view #importo-spesa:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure no generic focus ring leaks back inside the amount row */
:where(#expense-form-view .input-group:has(#importo-spesa), #expense-form-view .input-group:has(#importo-spesa) *):focus-visible {
  box-shadow: none !important;
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v18"> #20 === */
/* ZeroSync Premium UI Polish v18 — restore group bottom nav on smartphone only */
@media (max-width: 650px) {
  #group-detail-view .bottom-nav-unified.bottom-nav-group {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(-50%, 0, 0) !important;
    z-index: 170 !important;
    width: min(92vw, 330px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  #group-detail-view.active .bottom-nav-unified.bottom-nav-group,
  #group-detail-view.active-back .bottom-nav-unified.bottom-nav-group {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* === Estratto da <style id="zerosync-ui-premium-polish-v19"> #21 === */
/* ZeroSync Premium UI Polish v19 — visual consolidation / regression shield */
:root {
  --zs-v19-group-nav-bottom-mobile: calc(18px + env(safe-area-inset-bottom));
  --zs-v19-group-nav-bottom-desktop: calc(22px + env(safe-area-inset-bottom));
  --zs-v19-header-surface: linear-gradient(180deg, rgba(9,12,18,0.12) 0%, rgba(9,12,18,0.00) 100%);
  --zs-v19-field-surface: linear-gradient(180deg, rgba(20,26,36,0.96) 0%, rgba(11,15,21,0.98) 100%);
}

/* 1) Canonical top area for Home + Group detail */
#home-view::before,
#group-detail-view::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

#home-view header,
#group-detail-view header {
  background: var(--zs-v19-header-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.035) !important;
}

#home-view header::after,
#group-detail-view header::after,
#home-view header > span::after,
#group-detail-view #header-group-title::after {
  content: none !important;
  display: none !important;
}

#home-view header > span,
#group-detail-view #header-group-title {
  text-shadow: none !important;
  filter: none !important;
}

/* 2) Canonical group detail bottom navigation */
#group-detail-view .fab-group,
#group-detail-view .fab-group::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content: none !important;
}

#group-detail-view .bottom-nav-unified.bottom-nav-group {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--zs-v19-group-nav-bottom-mobile) !important;
  transform: translate3d(-50%, 0, 0) !important;
  z-index: 170 !important;
  width: min(92vw, 330px) !important;
  max-width: calc(100vw - 28px) !important;
}

#group-detail-view.active .bottom-nav-unified.bottom-nav-group,
#group-detail-view.active-back .bottom-nav-unified.bottom-nav-group {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 390px) {
  #group-detail-view .bottom-nav-unified.bottom-nav-group {
    width: min(94vw, 310px) !important;
  }
}

@media (min-width: 650px) {
  #group-detail-view .bottom-nav-unified.bottom-nav-group {
    width: 340px !important;
    bottom: var(--zs-v19-group-nav-bottom-desktop) !important;
  }
}

/* 3) Group utility row consistency without touching its logic/visibility */
#group-detail-view .group-stats-launcher-row {
  align-items: stretch;
  gap: 8px !important;
  margin: 10px 15px 6px 15px !important;
}

@media (max-width: 650px) {
  #group-detail-view .group-stats-launcher,
  #group-detail-view .group-activity-launcher {
    min-width: 0 !important;
    width: 100%;
    max-width: none;
  }

  #group-detail-view .group-stats-launcher-label {
    min-width: 0;
  }

  #group-detail-view .group-stats-launcher-hint {
    margin-left: auto;
    text-align: right;
  }
}

/* 4) Premium form-field consolidation + stable amount row */
#expense-form-view .input-group {
  border-color: rgba(255,255,255,0.08);
}

#expense-form-view .input-group:focus-within {
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.20) !important;
}

#expense-form-view .input-group:has(#importo-spesa) {
  border-color: rgba(255,255,255,0.09) !important;
  background: var(--zs-v19-field-surface) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

#expense-form-view .input-group:has(#importo-spesa):focus-within,
#expense-form-view .input-group:has(#importo-spesa):focus-visible {
  border-color: rgba(255,255,255,0.11) !important;
  background: var(--zs-v19-field-surface) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#expense-form-view #importo-spesa {
  color: #11ff8a;
  text-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#expense-form-view .input-group:has(#importo-spesa) .input-label {
  text-shadow: none !important;
  filter: none !important;
}

:where(#expense-form-view .input-group:has(#importo-spesa), #expense-form-view .input-group:has(#importo-spesa) *):focus-visible {
  box-shadow: none !important;
}

/* 5) Keep system/admin badge below overlays and toasts */
.zs-mode-badge {
  z-index: 900 !important;
}

/* 6) Safer toast behavior on narrow screens */
.toast-notification {
  max-width: min(92vw, 420px);
  white-space: normal;
  text-align: center;
}

/* === Estratto da <style> #22 === */
    .member-tag.member-is-me {
        border-color: rgba(0, 255, 102, 0.7) !important;
        background: rgba(0, 255, 102, 0.15) !important;
        box-shadow: 0 0 15px rgba(0, 255, 102, 0.4), inset 0 0 10px rgba(0, 255, 102, 0.1) !important;
        color: #ffffff !important;
        text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
    }

    .participant-row.member-is-me-row,
    .payer-btn.member-is-me-payer {
        border-color: rgba(0, 255, 102, 0.5) !important;
        background: rgba(0, 255, 102, 0.08) !important;
        box-shadow: 0 0 15px rgba(0, 255, 102, 0.2), inset 0 0 5px rgba(0, 255, 102, 0.1) !important;
    }

    header {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        will-change: transform, backdrop-filter;
    }

/* === Estratto da <style> #23 === */
        #cookie-banner { position: fixed; bottom: calc(25px + env(safe-area-inset-bottom)); left: 20px; right: 20px; background: rgba(21, 26, 34, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.08); padding: 25px; border-radius: 24px; box-shadow: 0 15px 40px rgba(0,0,0,0.8); z-index: 9999; display: none; flex-direction: column; gap: 18px; color: #ffffff; max-width: 600px; margin: 0 auto; }
        #cookie-banner p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
        .cookie-buttons { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
        .cookie-btn { padding: 12px 24px; border: none; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; transition: 0.2s; }
        .cookie-btn:active { transform: scale(0.95); }
        .btn-accept { background: var(--color-primary); color: #000; }
        .btn-reject { background: rgba(255,255,255,0.05); color: var(--text-main); border: 1px solid rgba(255,255,255,0.1); }
    

 /* === ZeroSync UI Polish v2: Luxury Fintech × Wow Modals × Pro Tooling === */
 .list-item-wrapper,
 .swipe-actions,
 .list-item,
 .stats-modal-card,
 .activity-item,
 .group-insight-chip,
 .group-balance-row,
 .split-custom-row,
 .payer-btn,
 .participant-row,
 .btn-split-summary,
 .input-group,
 .split-mode-btn,
 .fab-group,
 .btn-large {
   position: relative;
   overflow: hidden;
 }

 .list-item-wrapper {
   border-radius: 22px;
   background: linear-gradient(90deg, rgba(255,51,102,0.17) 0%, rgba(255,51,102,0.08) 52%, rgba(255,255,255,0.02) 100%);
   box-shadow: 0 12px 28px rgba(0,0,0,0.14);
 }
 .swipe-actions {
   background: linear-gradient(90deg, rgba(255,51,102,0.00) 0%, rgba(255,51,102,0.12) 42%, rgba(255,51,102,0.20) 100%);
 }
 .list-item::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.012) 36%, rgba(0,255,102,0.028) 100%);
   pointer-events: none;
 }
 .list-item::after {
   content: '';
   position: absolute;
   left: 18px;
   right: 18px;
   top: 0;
   height: 1px;
   background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.22) 20%, rgba(0,255,102,0.18) 55%, rgba(255,255,255,0.00) 100%);
   pointer-events: none;
 }
 .list-item {
   min-height: 88px;
   padding: 19px 18px;
   border-radius: 22px;
   border-color: rgba(255,255,255,0.07);
   box-shadow: 0 16px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.035);
 }
 .list-item:hover {
   border-color: rgba(0,255,102,0.16);
   box-shadow: 0 18px 40px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,255,102,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
   transform: translateY(-1px);
 }
 .icon-box {
   width: 50px;
   height: 50px;
   border-radius: 16px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.12);
 }
 .date-text {
   font-size: 9px;
   letter-spacing: 0.9px;
   color: rgba(138,147,166,0.9);
 }
 .date-num {
   font-size: 20px;
   letter-spacing: -0.4px;
 }
 .item-details {
   padding-right: 4px;
 }
 .item-title {
   margin-bottom: 5px;
   letter-spacing: -0.45px;
 }
 .item-subtitle {
   font-size: 12.5px;
   font-weight: 600;
 }
 .item-amounts {
   min-width: 88px;
   font-size: 15px;
   letter-spacing: -0.22px;
 }
 .item-amounts .lent,
 .item-amounts .owe,
 .item-amounts .neutral {
   display: inline-block;
 }
 .expense-badges {
   gap: 7px;
   margin-top: 10px;
 }
 .expense-badge {
   min-height: 28px;
   padding: 0 11px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
 .expense-badge.soft {
   color: rgba(220,227,239,0.88);
   border-color: rgba(255,255,255,0.10);
 }
 .desktop-actions {
   gap: 8px;
 }
 .action-btn {
   width: 42px;
   height: 42px;
   border-radius: 13px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 18px rgba(0,0,0,0.12);
 }
 .action-btn.edit {
   background: rgba(255,255,255,0.06);
 }
 .action-btn.delete {
   background: rgba(255,51,102,0.14);
 }

 .group-balance-compact {
   gap: 14px;
 }
 .group-balance-total {
   align-items: center;
   padding-bottom: 4px;
   border-bottom: 1px solid rgba(255,255,255,0.06);
 }
 .group-balance-total-amount {
   text-shadow: 0 0 18px rgba(0,255,102,0.08);
 }
 .group-balance-row {
   background: linear-gradient(180deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.024) 100%);
   border-color: rgba(255,255,255,0.06);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 8px 18px rgba(0,0,0,0.08);
 }
 .group-balance-row-amount.collect {
   text-shadow: 0 0 16px rgba(0,255,102,0.10);
 }
 .group-balance-row-amount.pay {
   text-shadow: 0 0 16px rgba(255,51,102,0.10);
 }
 .group-balance-more {
   margin-top: 2px;
   padding: 8px 12px;
   border-radius: 12px;
   background: rgba(255,255,255,0.035);
   border: 1px solid rgba(255,255,255,0.06);
 }

 .group-stats-launcher-row {
   gap: 10px;
   margin-top: 12px;
   margin-bottom: 12px;
 }
 .group-stats-launcher {
   min-height: 40px;
   padding: 0 14px;
   border-radius: 14px;
   box-shadow: 0 12px 26px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03);
 }
 .group-stats-launcher.primary {
   box-shadow: 0 14px 30px rgba(0,255,102,0.10), inset 0 1px 0 rgba(255,255,255,0.03);
 }
 .group-activity-launcher.secondary {
   box-shadow: 0 14px 30px rgba(142,197,255,0.09), inset 0 1px 0 rgba(255,255,255,0.03);
 }

 .stats-modal-overlay {
   background: rgba(0,0,0,0.84);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 .stats-modal-card {
   width: min(92vw, 430px);
   max-height: min(80vh, 650px);
   border-radius: 30px;
   padding: 22px 19px 18px 19px;
 }
 .stats-modal-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     radial-gradient(circle at top right, rgba(0,255,102,0.12) 0%, rgba(0,255,102,0.00) 30%),
     radial-gradient(circle at top left, rgba(142,197,255,0.10) 0%, rgba(142,197,255,0.00) 28%);
   pointer-events: none;
 }
 .stats-modal-header {
   position: sticky;
   top: 0;
   z-index: 2;
   padding-bottom: 10px;
   margin-bottom: 2px;
   background: linear-gradient(180deg, rgba(18,23,31,0.96) 0%, rgba(18,23,31,0.82) 72%, rgba(18,23,31,0) 100%);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
 .stats-modal-title {
   font-size: 22px;
   font-weight: 900;
   letter-spacing: -0.55px;
 }
 .stats-modal-subtitle {
   font-size: 13px;
   color: rgba(185,194,210,0.82);
 }
 .stats-modal-close {
   background: rgba(255,255,255,0.04);
   border-color: rgba(255,255,255,0.08);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 18px rgba(0,0,0,0.10);
 }
 .stats-modal-content {
   gap: 12px;
   padding-right: 4px;
 }
 .group-insights-row {
   gap: 10px;
   padding-bottom: 4px;
 }
 .group-insight-chip {
   min-height: 58px;
   padding: 12px 13px;
   border-radius: 18px;
   border-color: rgba(255,255,255,0.06);
   box-shadow: 0 10px 24px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03);
 }
 .group-insight-chip::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.00) 36%, rgba(0,255,102,0.028) 100%);
   pointer-events: none;
 }
 .group-insight-emoji {
   font-size: 16px;
 }
 .group-insight-label {
   font-size: 10px;
   letter-spacing: 0.9px;
 }
 .group-insight-value {
   font-size: 13px;
   letter-spacing: -0.15px;
 }
 .group-timeline-item {
   min-height: 34px;
   padding: 0 12px;
   border-radius: 999px;
   background: rgba(255,255,255,0.04);
   border-color: rgba(255,255,255,0.06);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
 }
 .stats-modal-empty {
   padding: 34px 14px 14px;
 }

 .activity-list {
   gap: 12px;
 }
 .activity-group-heading {
   position: sticky;
   top: 0;
   z-index: 1;
   margin: 2px 0 0 0;
   padding: 7px 10px;
   border-radius: 999px;
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.06);
   color: rgba(220,227,239,0.82);
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
 }
 .activity-item {
   gap: 12px;
   padding: 14px;
   border-radius: 18px;
   border-color: rgba(255,255,255,0.06);
   box-shadow: 0 12px 26px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
 }
 .activity-item::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.00) 40%, rgba(142,197,255,0.03) 100%);
   pointer-events: none;
 }
 .activity-item-icon {
   width: 38px;
   height: 38px;
   border-radius: 13px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 18px rgba(0,0,0,0.12);
 }
 .activity-item-text {
   font-size: 14px;
   letter-spacing: -0.15px;
 }
 .activity-item-meta {
   font-size: 11.5px;
   color: rgba(185,194,210,0.74);
 }
 .activity-item-badge {
   min-height: 26px;
   padding: 0 10px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 18px rgba(0,0,0,0.08);
 }
 .activity-item-details {
   margin-top: 3px;
   gap: 6px;
   padding-top: 8px;
   border-top: 1px dashed rgba(255,255,255,0.08);
 }
 .activity-item-detail {
   color: rgba(185,194,210,0.82);
 }

 #expense-form-view .form-section,
 #split-menu-view .form-section {
   padding-top: 18px;
 }
 #expense-form-view .input-group:first-child {
   margin-top: 4px;
 }
 .input-group {
   min-height: 64px;
   padding: 10px 18px;
   border-radius: 18px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 22px rgba(0,0,0,0.10);
 }
 .input-label {
   width: 38px;
   font-weight: 800;
 }
 #expense-form-view input[type="text"],
 #expense-form-view input[type="date"],
 #split-menu-view input[type="text"] {
   letter-spacing: -0.1px;
 }
 #expense-form-view input[inputmode="decimal"] {
   font-size: 24px;
   letter-spacing: -0.75px;
 }
 .btn-split-summary {
   min-height: 58px;
   padding: 0 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: left;
   font-size: 15px;
   font-weight: 800;
   border-radius: 18px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 24px rgba(0,0,0,0.12);
 }
 .btn-split-summary::after {
   content: '›';
   font-size: 22px;
   font-weight: 700;
   color: rgba(255,255,255,0.38);
   margin-left: 14px;
   line-height: 1;
 }
 .btn-split-summary:active::after {
   color: rgba(255,255,255,0.58);
 }
 .payer-btn {
   min-height: 52px;
   padding: 0 16px;
   border-radius: 16px;
   font-weight: 800;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 20px rgba(0,0,0,0.08);
 }
 .participant-row {
   min-height: 62px;
   padding: 16px 18px;
   border-radius: 18px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 20px rgba(0,0,0,0.08);
 }
 .checkbox-custom {
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
 }
 .split-mode-row {
   gap: 10px;
   margin-bottom: 10px;
 }
 .split-mode-btn {
   min-height: 42px;
   padding: 0 18px;
   border-radius: 14px;
   font-size: 12px;
   letter-spacing: 0.45px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 16px rgba(0,0,0,0.08);
 }
 .split-custom-list {
   gap: 12px;
   margin-top: 16px;
 }
 .split-custom-row {
   min-height: 62px;
   padding: 16px;
   border-radius: 18px;
 }
 .split-custom-name {
   font-size: 14px;
   font-weight: 800;
   letter-spacing: -0.12px;
 }
 .split-custom-input-wrap {
   width: 136px;
 }
 .split-custom-input {
   height: 44px;
   border-radius: 13px;
   font-size: 17px;
   letter-spacing: -0.25px;
 }
 .split-custom-hint {
   margin-top: 12px;
   padding: 11px 12px;
   border-radius: 14px;
   background: rgba(255,255,255,0.032);
   border: 1px solid rgba(255,255,255,0.055);
 }
 .split-custom-hint.ok {
   background: rgba(0,255,102,0.07);
   border-color: rgba(0,255,102,0.16);
 }
 .btn-large {
   min-height: 58px;
   border-radius: 18px;
   font-weight: 900;
   letter-spacing: -0.15px;
   box-shadow: 0 14px 28px rgba(0,255,102,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
 }
 .btn-danger-outline {
   box-shadow: 0 12px 24px rgba(255,51,102,0.08), inset 0 1px 0 rgba(255,255,255,0.02);
 }
 .fab-group {
   min-height: 58px;
   padding: 0 24px;
   border-radius: 20px;
   border: 1px solid rgba(255,255,255,0.14);
   box-shadow: 0 16px 32px rgba(0,255,102,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
   background: linear-gradient(180deg, rgba(0,255,102,1) 0%, rgba(0,226,92,1) 100%);
 }

 @media (hover: hover) and (pointer: fine) {
   .expense-filter-chip:hover,
   .split-mode-btn:hover,
   .payer-btn:hover,
   .participant-row:hover,
   .btn-split-summary:hover,
   .group-insight-chip:hover,
   .group-timeline-item:hover,
   .group-stats-launcher:hover,
   .activity-item:hover {
     transform: translateY(-1px);
   }
   .group-insight-chip:hover,
   .group-timeline-item:hover,
   .activity-item:hover,
   .group-stats-launcher:hover {
     border-color: rgba(255,255,255,0.10);
   }
 }



 /* === ZeroSync bugfix: swipe delete area hidden until real swipe === */
 .list-item-wrapper {
   background: transparent !important;
 }
 .list-item-wrapper .swipe-actions {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.18s ease;
 }
 .list-item-wrapper.swipe-open {
   background: linear-gradient(90deg, rgba(255,51,102,0.17) 0%, rgba(255,51,102,0.08) 52%, rgba(255,255,255,0.02) 100%) !important;
 }
 .list-item-wrapper.swipe-open .swipe-actions {
   opacity: 1;
   pointer-events: auto;
 }



 /* === ZeroSync polish v3: desktop FAB alignment + tighter vertical rhythm === */
 #group-detail-view .card-list {
   margin-top: 6px !important;
 }
 #group-detail-view .group-stats-launcher-row {
   margin-top: 8px !important;
   margin-bottom: 8px !important;
 }
 #group-detail-view #group-user-balance {
   margin-top: 10px !important;
   padding: 16px !important;
 }
 #group-detail-view .expense-search-wrap {
   margin-top: 8px !important;
   margin-bottom: 2px !important;
   padding: 7px !important;
 }
 #group-detail-view .group-insights-strip {
   margin-top: 4px !important;
 }
 #group-detail-view .list-item-wrapper {
   margin-bottom: 8px !important;
 }
 #group-detail-view .list-item {
   min-height: 82px;
   padding-top: 16px !important;
   padding-bottom: 16px !important;
 }
 #group-detail-view .group-balance-compact {
   gap: 10px !important;
 }
 #group-detail-view .group-balance-list {
   gap: 6px !important;
 }
 #group-detail-view .group-balance-row {
   padding-top: 9px !important;
   padding-bottom: 9px !important;
 }
 @media (min-width: 650px) {
   #group-detail-view .fab-group {
     left: 50% !important;
     right: auto !important;
     transform: translateX(-50%) !important;
     bottom: calc(30px + env(safe-area-inset-bottom)) !important;
   }
   #group-detail-view .fab-group:active {
     transform: translateX(-50%) scale(0.95) !important;
   }
 }



 /* === ZeroSync polish v4: tighter cards + always-visible expense FAB === */
 #home-view .global-dashboard {
   margin: 12px 15px 10px 15px !important;
   padding: 26px 20px !important;
 }
 #home-view .card-list {
   margin-top: 6px !important;
 }
 #home-view .list-item-wrapper {
   margin-bottom: 6px !important;
 }
 #home-view .list-item {
   min-height: 74px !important;
   padding: 14px 16px !important;
 }
 #home-view .icon-box {
   width: 44px !important;
   height: 44px !important;
   margin-right: 13px !important;
 }
 #home-view .item-title {
   margin-bottom: 2px !important;
 }
 #home-view .item-subtitle {
   font-size: 12px !important;
 }

 #group-detail-view .group-stats-launcher-row {
   margin-top: 6px !important;
   margin-bottom: 6px !important;
 }
 #group-detail-view #group-user-balance {
   margin-top: 8px !important;
   padding: 14px !important;
 }
 #group-detail-view .expense-search-wrap {
   margin-top: 6px !important;
   margin-bottom: 0 !important;
   padding: 6px !important;
 }
 #group-detail-view .card-list {
   margin-top: 2px !important;
 }
 #group-detail-view .list-item-wrapper {
   margin-bottom: 6px !important;
 }
 #group-detail-view .list-item {
   min-height: 74px !important;
   padding: 13px 16px !important;
 }
 #group-detail-view .icon-box {
   width: 42px !important;
   height: 42px !important;
   margin-right: 13px !important;
 }
 #group-detail-view .item-title {
   margin-bottom: 2px !important;
 }
 #group-detail-view .item-subtitle {
   font-size: 12px !important;
 }
 #group-detail-view .item-amounts {
   font-size: 13px !important;
   line-height: 1.18 !important;
 }
 #group-detail-view .group-balance-compact {
   gap: 8px !important;
 }
 #group-detail-view .group-balance-list {
   gap: 5px !important;
 }
 #group-detail-view .group-balance-row {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
 }

 #group-detail-view .fab-group {
   position: fixed !important;
   left: 50% !important;
   right: auto !important;
   transform: translateX(-50%) !important;
   bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
   z-index: 1600 !important;
   max-width: calc(100vw - 28px);
   white-space: nowrap;
 }
 #group-detail-view .fab-group:active {
   transform: translateX(-50%) scale(0.95) !important;
 }
 @media (min-width: 650px) {
   #group-detail-view .fab-group {
     bottom: 18px !important;
   }
 }



 /* === ZeroSync polish v5: ultra-compact vertical spacing for groups and expenses === */
 #home-view .global-dashboard {
   margin: 10px 15px 8px 15px !important;
   padding: 22px 18px !important;
 }
 #home-view .card-list {
   margin-top: 4px !important;
 }
 #home-view .list-item-wrapper {
   margin-bottom: 4px !important;
 }
 #home-view .list-item {
   min-height: 66px !important;
   padding: 11px 14px !important;
 }
 #home-view .icon-box {
   width: 40px !important;
   height: 40px !important;
   margin-right: 12px !important;
 }
 #home-view .date-text {
   font-size: 9px !important;
 }
 #home-view .date-num {
   font-size: 17px !important;
 }
 #home-view .item-title {
   margin-bottom: 1px !important;
   font-size: 15px !important;
 }
 #home-view .item-subtitle {
   font-size: 11.5px !important;
 }
 #home-view .item-amounts {
   font-size: 12.5px !important;
   line-height: 1.12 !important;
   padding-left: 8px !important;
 }

 #group-detail-view .group-stats-launcher-row {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
 }
 #group-detail-view #group-user-balance {
   margin-top: 6px !important;
   padding: 12px !important;
 }
 #group-detail-view .expense-search-wrap {
   margin-top: 4px !important;
   margin-bottom: 0 !important;
   padding: 5px !important;
 }
 #group-detail-view .card-list {
   margin-top: 0 !important;
 }
 #group-detail-view .list-item-wrapper {
   margin-bottom: 4px !important;
 }
 #group-detail-view .list-item {
   min-height: 66px !important;
   padding: 11px 14px !important;
 }
 #group-detail-view .icon-box {
   width: 39px !important;
   height: 39px !important;
   margin-right: 12px !important;
 }
 #group-detail-view .date-text {
   font-size: 8.5px !important;
 }
 #group-detail-view .date-num {
   font-size: 16px !important;
 }
 #group-detail-view .item-title {
   margin-bottom: 1px !important;
   font-size: 15px !important;
 }
 #group-detail-view .item-subtitle {
   font-size: 11.5px !important;
 }
 #group-detail-view .item-amounts {
   font-size: 12.5px !important;
   line-height: 1.1 !important;
   padding-left: 8px !important;
 }
 #group-detail-view .expense-badges {
   margin-top: 5px !important;
   gap: 4px !important;
 }
 #group-detail-view .group-balance-compact {
   gap: 6px !important;
 }
 #group-detail-view .group-balance-list {
   gap: 4px !important;
 }
 #group-detail-view .group-balance-row {
   padding-top: 7px !important;
   padding-bottom: 7px !important;
 }



 /* === ZeroSync polish v6: swipe delete restored on right + FAB bottom-right === */
 .swipeable.list-item-wrapper,
 .list-item-wrapper.swipeable {
   position: relative !important;
   display: block !important;
   overflow: hidden !important;
 }
 .swipeable > .swipe-actions,
 .list-item-wrapper.swipeable > .swipe-actions {
   position: absolute !important;
   top: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   left: auto !important;
   width: 75px !important;
   height: auto !important;
   display: flex !important;
   align-items: stretch !important;
   justify-content: flex-end !important;
   z-index: 1 !important;
   overflow: hidden !important;
 }
 .swipeable > .list-item,
 .list-item-wrapper.swipeable > .list-item {
   position: relative !important;
   z-index: 2 !important;
   margin-bottom: 0 !important;
 }
 .swipeable > .swipe-actions > .action-btn.delete,
 .list-item-wrapper.swipeable > .swipe-actions > .action-btn.delete {
   width: 75px !important;
   min-width: 75px !important;
   height: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
   border-radius: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   align-self: stretch !important;
   background: transparent !important;
   box-shadow: none !important;
 }
 .swipeable > .swipe-actions > .action-btn.delete svg,
 .list-item-wrapper.swipeable > .swipe-actions > .action-btn.delete svg {
   width: 22px !important;
   height: 22px !important;
 }

 #group-detail-view .fab-group {
   position: fixed !important;
   left: auto !important;
   right: 16px !important;
   transform: none !important;
   bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
   z-index: 1600 !important;
   max-width: calc(100vw - 32px) !important;
 }
 #group-detail-view .fab-group:active {
   transform: scale(0.95) !important;
 }
 @media (min-width: 650px) {
   #group-detail-view .fab-group {
     left: auto !important;
     right: 24px !important;
     transform: none !important;
     bottom: 24px !important;
   }
   #group-detail-view .fab-group:active {
     transform: scale(0.95) !important;
   }
 }

/* =========================================================
   ZeroSync — Pacchetto Grafico V1
   Dashboard, card, bottom nav, bottoni, empty state, login
   Solo CSS override: nessuna logica JS modificata.
   ========================================================= */
:root {
  --zs-v1-bg: #080b10;
  --zs-v1-surface: linear-gradient(180deg, rgba(22,29,40,0.985) 0%, rgba(12,17,25,0.99) 100%);
  --zs-v1-surface-soft: linear-gradient(180deg, rgba(20,27,38,0.92) 0%, rgba(13,18,26,0.96) 100%);
  --zs-v1-border: rgba(255,255,255,0.075);
  --zs-v1-border-strong: rgba(255,255,255,0.12);
  --zs-v1-text: #f8fbff;
  --zs-v1-muted: #9aa8ba;
  --zs-v1-soft: #c3cedc;
  --zs-v1-green: #00f27a;
  --zs-v1-green-2: #7dffd2;
  --zs-v1-red: #ff5c84;
  --zs-v1-yellow: #ffd166;
  --zs-v1-blue: #8ec5ff;
  --zs-v1-shadow-card: 0 14px 34px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.032);
  --zs-v1-shadow-card-hover: 0 20px 46px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.045);
  --zs-v1-shadow-green: 0 16px 34px rgba(0,242,122,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  --zs-v1-radius-card: 24px;
  --zs-v1-radius-control: 17px;
}

/* Base: contrasto leggermente più pulito */
body {
  background:
    radial-gradient(720px 320px at 50% -8%, rgba(0,242,122,0.08) 0%, rgba(0,242,122,0) 62%),
    radial-gradient(560px 280px at 100% 4%, rgba(142,197,255,0.06) 0%, rgba(142,197,255,0) 58%),
    linear-gradient(180deg, #080b10 0%, #090d14 100%);
}

/* 1) Login leggermente più premium */
.login-container {
  padding-left: 22px;
  padding-right: 22px;
}
.login-logo {
  font-size: clamp(44px, 12vw, 56px);
  letter-spacing: -2.4px;
  margin-bottom: 4px;
  filter: drop-shadow(0 10px 28px rgba(0,242,122,0.08));
}
.login-subtitle {
  color: var(--zs-v1-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.auth-form {
  border: 1px solid var(--zs-v1-border);
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(18,24,34,0.90) 0%, rgba(10,14,21,0.94) 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: 30px;
}
#auth-title {
  letter-spacing: -0.055em;
}
.auth-form .input-group {
  min-height: 62px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.auth-form .input-group:focus-within {
  border-color: rgba(0,242,122,0.32);
  box-shadow: 0 0 0 4px rgba(0,242,122,0.055), inset 0 1px 0 rgba(255,255,255,0.035);
}
.divider {
  opacity: 0.82;
}
.btn-google {
  color: #06100b;
  border-color: rgba(255,255,255,0.18);
}

/* 2) Dashboard home: più compatta, più fintech */
.global-dashboard {
  margin: 16px 15px 16px;
  padding: 30px 22px 26px;
  border-radius: 30px;
  background:
    radial-gradient(320px 150px at 50% 0%, rgba(0,242,122,0.13) 0%, rgba(0,242,122,0.00) 70%),
    linear-gradient(135deg, rgba(0,242,122,0.08) 0%, rgba(142,197,255,0.055) 44%, rgba(255,255,255,0.026) 100%),
    var(--zs-v1-surface);
  border: 1px solid rgba(255,255,255,0.105);
  box-shadow: 0 26px 64px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
}
.global-dashboard.glow-lent {
  border-color: rgba(0,242,122,0.22);
  box-shadow: 0 26px 64px rgba(0,0,0,0.38), 0 0 34px rgba(0,242,122,0.13), inset 0 1px 0 rgba(255,255,255,0.05);
}
.global-dashboard.glow-owe {
  border-color: rgba(255,92,132,0.24);
  box-shadow: 0 26px 64px rgba(0,0,0,0.38), 0 0 34px rgba(255,92,132,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}
.global-title {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.56);
}
.global-subtitle {
  color: var(--zs-v1-soft);
  font-size: 14px;
  font-weight: 750;
}
.global-amount {
  font-size: clamp(40px, 10vw, 55px);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 920;
}

/* 3) Card gruppi/spese: più pulite */
.card-list {
  gap: 11px;
}
.list-item-wrapper {
  border-radius: 27px;
  background: linear-gradient(90deg, rgba(255,92,132,0.15) 0%, rgba(255,92,132,0.07) 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.list-item {
  min-height: 84px;
  padding: 17px 17px;
  border-radius: 27px;
  background: var(--zs-v1-surface);
  border: 1px solid var(--zs-v1-border);
  box-shadow: var(--zs-v1-shadow-card);
}
.list-item:hover {
  border-color: var(--zs-v1-border-strong);
  box-shadow: var(--zs-v1-shadow-card-hover);
}
.list-item:active {
  transform: scale(0.982);
}
.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(34,43,58,0.95) 0%, rgba(22,29,41,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 20px rgba(0,0,0,0.16);
}
.icon-box.group-icon {
  border-radius: 18px;
}
.item-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.13;
  letter-spacing: -0.035em;
}
.item-subtitle {
  color: var(--zs-v1-muted);
  font-size: 13px;
  font-weight: 700;
}
.item-amounts {
  min-width: 86px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.018em;
}
.owe { color: var(--zs-v1-red); }
.lent { color: var(--zs-v1-green); }
.neutral { color: var(--zs-v1-muted); }

/* Badges più asciutti e coerenti */
.expense-badge,
.group-list-chip,
.recurring-pill,
.activity-item-badge,
.empty-state-action-btn,
.expense-filter-chip {
  min-height: 29px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.055em;
  border: 1px solid rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.045);
}
.expense-badge.success,
.group-list-chip.primary,
.recurring-pill.primary,
.recurring-pill.success {
  color: var(--zs-v1-green);
  border-color: rgba(0,242,122,0.24);
  background: rgba(0,242,122,0.09);
}
.expense-badge.warning,
.group-list-chip.warning,
.recurring-pill.warning {
  color: var(--zs-v1-yellow);
  border-color: rgba(255,209,102,0.22);
  background: rgba(255,209,102,0.09);
}

/* 4) Bottom nav più moderna e app-like */
.bottom-nav {
  bottom: calc(16px + env(safe-area-inset-bottom));
  min-height: 68px;
  padding: 9px 20px;
  gap: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.095);
  background: linear-gradient(180deg, rgba(22,29,40,0.90) 0%, rgba(13,18,26,0.92) 100%);
  box-shadow: 0 24px 54px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav-item {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--zs-v1-text);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.nav-fab-center {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00ff85 0%, #00dd70 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 38px rgba(0,242,122,0.23), inset 0 1px 0 rgba(255,255,255,0.18);
}
.nav-fab-center:active {
  transform: scale(0.93);
}

/* 5) Pulsanti uniformati */
.btn-large,
.modal-btn,
.btn-google,
.btn-dev,
.btn-split-summary,
.choice-option-btn,
.payer-btn,
.split-mode-btn,
.invite-btn,
.empty-state-action-btn,
.group-stats-launcher,
.tab-btn {
  border-radius: var(--zs-v1-radius-control);
  font-weight: 880;
  letter-spacing: -0.018em;
}
.btn-large,
.modal-btn:not(.cancel) {
  background: linear-gradient(180deg, #00ff85 0%, #00df70 100%);
  color: #04140b;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--zs-v1-shadow-green);
}
.btn-large:hover,
.modal-btn:not(.cancel):hover {
  filter: saturate(1.04) brightness(1.015);
}
.btn-danger-outline {
  color: #ff7898;
  background: linear-gradient(180deg, rgba(255,92,132,0.10) 0%, rgba(255,92,132,0.035) 100%);
  border: 1px solid rgba(255,92,132,0.28);
  box-shadow: 0 14px 30px rgba(255,92,132,0.10), inset 0 1px 0 rgba(255,255,255,0.035);
}
.btn-split-summary,
.choice-option-btn,
.payer-btn,
.split-mode-btn {
  background: var(--zs-v1-surface-soft);
  border: 1px solid var(--zs-v1-border);
  box-shadow: var(--zs-v1-shadow-card);
}
.invite-btn {
  min-height: 42px;
  padding: 0 16px;
  color: var(--zs-v1-green);
  background: rgba(0,242,122,0.095);
  border-color: rgba(0,242,122,0.24);
  box-shadow: 0 12px 26px rgba(0,242,122,0.10);
}

/* 6) Empty state migliorati */
.empty-state,
.smart-empty-state {
  margin: 10px 15px;
  padding: 48px 22px;
  border-radius: 28px;
  background:
    radial-gradient(240px 120px at 50% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(18,24,34,0.72) 0%, rgba(10,14,21,0.78) 100%);
  border: 1px dashed rgba(255,255,255,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.028);
}
.empty-icon {
  width: 66px;
  height: 66px;
  color: rgba(255,255,255,0.13);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
}
.smart-empty-state-title {
  font-size: 18px;
  font-weight: 920;
  letter-spacing: -0.04em;
}
.smart-empty-state-subtitle,
.empty-state {
  color: var(--zs-v1-soft);
}
.empty-state-action-btn.primary {
  color: #04140b;
  background: linear-gradient(180deg, #00ff85 0%, #00df70 100%);
  border-color: rgba(0,242,122,0.30);
}

/* Ricerca e filtri: più leggeri */
.expense-search-wrap,
#group-user-balance,
.group-insight-chip,
.activity-item,
.faq-item,
.input-group,
.participant-row,
.split-custom-row {
  background: var(--zs-v1-surface-soft);
  border-color: var(--zs-v1-border);
  box-shadow: var(--zs-v1-shadow-card);
}
.expense-search-input-wrap {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.085);
}
.expense-filter-toggle.open,
.expense-filter-toggle.active-filter,
.expense-filter-chip.active,
.split-mode-btn.active {
  color: #04140b;
  background: linear-gradient(180deg, #00ff85 0%, #00df70 100%);
  border-color: rgba(0,242,122,0.32);
  box-shadow: 0 12px 24px rgba(0,242,122,0.16), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* Piccoli schermi */
@media (max-width: 390px) {
  .global-dashboard { padding: 27px 19px 23px; }
  .bottom-nav { gap: 20px; padding-left: 18px; padding-right: 18px; }
  .nav-fab-center { width: 56px; height: 56px; }
  .list-item { padding: 16px; }
  .item-amounts { min-width: 76px; }
}

/* Mobile performance: riduce effetti pesanti dove il touch è primario */
@media (hover: none) and (pointer: coarse) {
  .list-item:hover,
  .group-insight-chip:hover,
  .activity-item:hover,
  .faq-item:hover,
  .friend-chip:hover,
  .member-tag:hover,
  .settings-item:hover,
  .group-balance-row:hover,
  .choice-option-btn:hover,
  .input-group:hover,
  .expense-search-wrap:hover {
    transform: none;
  }
}

/* =========================================================
   ZeroSync — Home Dashboard Flicker Fix V1
   Fix chirurgico per leggero sfarfallio della dashboard home
   quando si torna alla schermata principale.
   Solo CSS: nessuna funzione JS modificata.
   ========================================================= */
#home-view,
#home-view.active,
#home-view.active-back,
#home-view .global-dashboard,
#home-view #global-dashboard,
#home-view .card-list,
#home-view .list-item,
#home-view .bottom-nav {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#home-view #global-dashboard,
#home-view .global-dashboard {
  isolation: isolate;
  contain: paint;
  will-change: opacity;
  transform-style: flat;
  -webkit-transform-style: flat;
  transition-property: border-color, opacity, color;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

#home-view .global-dashboard::before,
#home-view .global-dashboard::after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  pointer-events: none;
}

/* Evita micro-ricalcoli di layout/paint nel rientro alla home su mobile */
@media (hover: none) and (pointer: coarse) {
  #home-view.active,
  #home-view.active-back {
    animation: zsHomeStableIn 120ms ease-out both !important;
  }

  #home-view #global-dashboard,
  #home-view .global-dashboard {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #home-view .global-dashboard:hover,
  #home-view .global-dashboard:active,
  #home-view .list-item:hover,
  #home-view .list-item:active {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}

@keyframes zsHomeStableIn {
  from { opacity: 0.992; }
  to { opacity: 1; }
}

/* Riduce lampeggi visivi causati da cambi rapidi di glow della dashboard */
#home-view .global-dashboard.glow-lent,
#home-view .global-dashboard.glow-owe {
  transition-property: border-color, opacity;
}

/* =========================================================
   ZeroSync — Expense Scroll Stability Fix V2
   Fix conservativo per scroll spese: rimuove impuntamenti e
   sfarfallii senza forzare touch-action/contain aggressivi.
   ========================================================= */
#group-detail-view,
#group-detail-view.active,
#group-detail-view.active-back {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: touch;
}

#group-detail-view #expenses-container {
  isolation: isolate;
  scroll-behavior: auto !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#group-detail-view #expenses-container .list-item-wrapper,
#group-detail-view #expenses-container .list-item,
#group-detail-view #expenses-container .icon-box {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
  -webkit-transform-style: flat;
}

@media (hover: none) and (pointer: coarse) {
  #group-detail-view #expenses-container .list-item,
  #group-detail-view #expenses-container .icon-box,
  #group-detail-view #expenses-container .expense-badge,
  #group-detail-view #expenses-container .group-list-chip,
  #group-detail-view #expenses-container .recurring-pill {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #group-detail-view #expenses-container .list-item:hover,
  #group-detail-view #expenses-container .list-item-wrapper:hover,
  #group-detail-view #expenses-container .icon-box:hover {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
}

body.zs-expense-scroll-active #group-detail-view #expenses-container .list-item,
body.zs-expense-scroll-active #group-detail-view #expenses-container .list-item-wrapper,
body.zs-expense-scroll-active #group-detail-view #expenses-container .icon-box,
body.zs-expense-scroll-active #group-detail-view #expenses-container .expense-badge,
body.zs-expense-scroll-active #group-detail-view #expenses-container .group-list-chip,
body.zs-expense-scroll-active #group-detail-view #expenses-container .recurring-pill {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

body.zs-expense-scroll-active #group-detail-view #expenses-container .list-item {
  box-shadow: 0 9px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.024) !important;
}

@media (prefers-reduced-motion: reduce) {
  #group-detail-view #expenses-container,
  #group-detail-view #expenses-container * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--color-primary); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 26px; }
.slider.round:before { border-radius: 50%; }
/* ========================================================
   Temi Stagionali e Animazioni (Seasonal Themes)
   ======================================================== */
:root.theme-spring {
    --color-primary: #00E676;
    --color-lent: #00E676;
    --bg-main: #0a1112; 
    --bg-card: #121c1f;
}
:root.theme-summer {
    --color-primary: #FFD54F;
    --color-lent: #FFD54F;
    --bg-main: #14130A;
    --bg-card: #1f1d13;
}
:root.theme-autumn {
    --color-primary: #FF8A65;
    --color-lent: #FF8A65;
    --bg-main: #140d0a;
    --bg-card: #211612;
}
:root.theme-winter {
    --color-primary: #81D4FA;
    --color-lent: #81D4FA;
    --bg-main: #0A1017;
    --bg-card: #121924;
}

/* Seasonal Particle Animation Base */
.seasonal-particle {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    will-change: transform, opacity, top;
}

/* Autunno: Foglie che cadono */
.particle-autumn {
    width: 15px;
    height: 15px;
    background: var(--color-primary);
    border-radius: 2px 15px 2px 15px;
    animation: fall-autumn linear infinite, sway-autumn ease-in-out infinite alternate;
}
@keyframes fall-autumn {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 0.25; }
    80% { opacity: 0.25; }
    100% { top: 110%; opacity: 0; }
}
@keyframes sway-autumn {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(50px) rotate(90deg); }
}

/* Inverno: Fiocchi di neve */
.particle-winter {
    width: 6px;
    height: 6px;
    background: #FFF;
    border-radius: 50%;
    animation: fall-winter linear infinite, drift-winter ease-in-out infinite alternate;
}
@keyframes fall-winter {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 0.3; }
    80% { opacity: 0.3; }
    100% { top: 110%; opacity: 0; }
}
@keyframes drift-winter {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

/* Primavera: Petali */
.particle-spring {
    width: 10px;
    height: 10px;
    background: #F8BBD0;
    border-radius: 12px 0 12px 0;
    animation: fall-spring linear infinite, spin-spring linear infinite;
}
@keyframes fall-spring {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 0.4; }
    80% { opacity: 0.4; }
    100% { top: 110%; opacity: 0; }
}
@keyframes spin-spring {
    0% { transform: rotate(0deg) translateX(0); }
    100% { transform: rotate(360deg) translateX(30px); }
}

/* Estate: Scintille */
.particle-summer {
    width: 3px;
    height: 3px;
    background: #FFE082;
    border-radius: 50%;
    box-shadow: 0 0 12px 3px rgba(255, 224, 130, 0.6);
    animation: float-summer ease-in-out infinite;
}
@keyframes float-summer {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    50% { opacity: 0.5; transform: translateY(-70px) scale(1.5); }
    100% { transform: translateY(-140px) scale(0.5); opacity: 0; }
}