*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Palette ArtiPro: carta calda + inchiostro blu (brand) + terracotta per le azioni */
      --bg: #F4EFE6; --bg2: #E9E1D0; --card: #FBF8F1; --border: #D8CDB6;
      --text: #1A1208; --text2: #5F5340; --accent: #C4501A; --accent2: #E8874A;
      --ink: #17324A; --ink2: #1E5C88; --paper-on-ink: #F4EFE6;
      --gold: #A87A0B; --green: #2E6B4F; --slate: #5C6B73; --muted: #8C8574;
      /* Terracotta scura per il testo piccolo: #C4501A su carta non arriva al contrasto minimo (4,5:1). */
      --accent-testo: #A8401A;
      --shadow: none; --shadow-lg: 0 10px 30px rgba(23,50,74,0.18);
      --r-card: 4px; --r-ctl: 6px; --r-pill: 3px;
      --radius: 4px; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif;
    }
    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); }
    #app { min-height: 100vh; max-width: 430px; margin: 0 auto; position: relative; }

    /* LOGIN */
    .login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: var(--bg); position: relative; overflow: hidden; }
    .login-page::before { content: ''; position: absolute; top: -100px; right: -100px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(196,80,26,0.12) 0%, transparent 70%); border-radius: 50%; }
    .login-page::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(184,134,11,0.10) 0%, transparent 70%); border-radius: 50%; }
    .login-logo { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--accent); letter-spacing: -1px; margin-bottom: 6px; position: relative; z-index: 1; }
    .login-tagline { font-size: 14px; color: var(--text2); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 52px; position: relative; z-index: 1; }
    .login-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; width: 100%; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
    .login-card h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 8px; }
    .login-card p { font-size: 14px; color: var(--text2); margin-bottom: 28px; line-height: 1.6; }
    .input-group { margin-bottom: 16px; }
    .input-group label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; }
    .input-group input { width: 100%; padding: 14px 16px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 16px; color: var(--text); outline: none; transition: border-color 0.2s; }
    .input-group input:focus { border-color: var(--accent); }
    .btn-primary { width: 100%; padding: 16px; background: var(--accent); color: white; border: none; border-radius: 10px; font-family: var(--font-body); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .btn-primary:hover { background: #A8401A; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196,80,26,0.3); }
    .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .login-success { text-align: center; padding: 20px 0; }
    .login-success .icon { font-size: 48px; margin-bottom: 16px; }
    .login-success h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; }
    .login-success p { font-size: 14px; color: var(--text2); line-height: 1.6; }
    .login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text2); font-size: 13px; }
    .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
    .tg-login-wrap { display: flex; justify-content: center; margin-top: 4px; }

    /* TOPBAR */
    .topbar { position: sticky; top: 0; z-index: 100; background: var(--card); border-bottom: 1px solid var(--border); padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px; display: flex; align-items: center; justify-content: space-between; }
    .topbar-logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--accent); }
    .topbar-user { font-size: 13px; color: var(--text2); font-weight: 500; text-align: right; }
    .topbar-user strong { display: block; color: var(--text); font-size: 14px; }

    /* MAIN */
    .main-content { padding: 20px 16px 100px; min-height: calc(100vh - 57px); }

    /* BOTTOM NAV */
    .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--card); border-top: 1px solid var(--border); z-index: 100; box-shadow: 0 -4px 20px rgba(26,18,8,0.08); padding: 0 0 env(safe-area-inset-bottom, 12px); overflow: hidden; }
    .bottom-nav-scroll { display: flex; width: 100%; }
    .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px; cursor: pointer; border: none; background: none; color: var(--text2); font-family: var(--font-body); min-width: 0; }
    .nav-item.active { color: var(--accent); }
    .nav-item .nav-icon { font-size: 26px; line-height: 1; position: relative; display: inline-block; }
    .nav-badge { position: absolute; top: -6px; right: -10px; background: var(--accent); color: white; font-size: 9px; font-weight: 700; line-height: 1; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 2px var(--card); }
    .nav-item .nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.2px; }
    .nav-item:not(.active) .nav-label { display: none; }
    .nav-item.active .nav-label { display: block; }
    .more-item.active { background: var(--bg2); }
    .more-item.active .list-title { color: var(--accent); }

    /* SECTION HEADER */
    .section-header { margin-bottom: 20px; }
    .section-header h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
    .section-header p { font-size: 14px; color: var(--text2); }

    /* DASHBOARD */
    .pulse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
    .pulse-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); text-align: center; }
    .pulse-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 4px; }
    .pulse-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
    .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
    .metric-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; box-shadow: var(--shadow); animation: fadeUp 0.4s ease both; }
    .metric-card.accent { background: var(--accent); border-color: var(--accent); color: white; }
    .metric-card.accent .metric-label { color: rgba(255,255,255,0.75); }
    .metric-card.accent .metric-icon { background: rgba(255,255,255,0.2); }
    .metric-icon { width: 40px; height: 40px; background: var(--bg2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
    .metric-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
    .metric-label { font-size: 12px; color: var(--text2); font-weight: 500; }
    .piano-badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold), #D4A017); color: white; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
    .credito-bar-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
    .credito-bar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; color: var(--text2); }
    .credito-bar-label strong { color: var(--text); font-size: 15px; }
    .credito-bar { height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
    .credito-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 4px; transition: width 1s ease; }

    /* LIST */
    .list-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px; animation: fadeUp 0.4s ease both; }
    .list-item { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; cursor: pointer; transition: background 0.15s; }
    .list-item:last-child { border-bottom: none; }
    .list-item:hover { background: var(--bg2); }
    .list-avatar { width: 44px; height: 44px; background: var(--bg2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    .list-content { flex: 1; min-width: 0; }
    .list-title { font-weight: 600; font-size: 15px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .list-subtitle { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
    .list-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
    .tag-guasto { background: rgba(196,80,26,0.12); color: var(--accent); }
    .tag-appuntamento { background: rgba(46,107,79,0.12); color: var(--green); }
    .tag-risolto { background: rgba(46,107,79,0.12); color: var(--green); }
    .tag-aperto { background: rgba(196,80,26,0.12); color: var(--accent); }
    .tag-link_inviato { background: rgba(184,134,11,0.12); color: var(--gold); }
    .tag-info { background: rgba(107,93,69,0.14); color: var(--text2); }
    .chevron { color: var(--border); font-size: 20px; flex-shrink: 0; }

    /* INTERVENTI — raggruppamento per giorno */
    .day-group { border-bottom: 1px solid var(--border); }
    .day-group:last-child { border-bottom: none; }
    .day-group-header { padding: 14px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; cursor: pointer; background: var(--card); transition: background 0.15s; }
    .day-group-header:hover { background: var(--bg2); }
    .day-group-chevron { color: var(--text2); font-size: 12px; width: 14px; flex-shrink: 0; }
    .day-group-title { font-weight: 700; font-size: 14px; text-transform: capitalize; }
    .day-group-count { background: var(--bg2); color: var(--text2); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
    .btn-ritardo-cascata { margin-left: auto; padding: 7px 12px; border-radius: 8px; border: 1.5px solid rgba(196,80,26,0.35); background: rgba(196,80,26,0.08); color: var(--accent); font-family: var(--font-body); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
    .btn-ritardo-cascata:hover { background: rgba(196,80,26,0.16); }

    /* INTERVENTI — bottoni azione nel dettaglio */
    .intervento-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
    .btn-action { padding: 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-action:hover { background: var(--bg2); }
    .btn-action-risolto { background: var(--green); color: white; border-color: var(--green); }
    .btn-action-risolto:hover { background: #24523d; }
    .btn-action-cancella { color: var(--accent); border-color: rgba(196,80,26,0.35); }
    .btn-action-cancella:hover { background: rgba(196,80,26,0.1); }

    /* Con una maschera aperta lo sfondo non scorre: scorre solo dentro la maschera */
    body.scroll-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
    .modal-overlay, #modal-servizio { overscroll-behavior: contain; }
    .modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    /* MODAL */
    .modal-overlay { position: fixed; inset: 0; background: rgba(26,18,8,0.5); z-index: 200; display: flex; align-items: flex-end; animation: fadeIn 0.2s ease; }
    .modal { background: var(--card); border-radius: 24px 24px 0 0; width: 100%; max-width: 430px; margin: 0 auto; padding: 0 0 calc(40px + env(safe-area-inset-bottom, 0px)); max-height: 85vh; overflow-y: auto; animation: slideUp 0.3s ease; position: relative; }
    .modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto 20px; }
    .modal-header { padding: 0 24px 20px; border-bottom: 1px solid var(--border); }
    .modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 4px; padding-right: 40px; }
    .modal-subtitle { font-size: 13px; color: var(--text2); }
    .modal-body { padding: 8px 24px; }
    .modal-close { position: absolute; top: 8px; right: 12px; width: 40px; height: 40px; background: var(--bg2); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text2); z-index: 10; }

    /* DETAIL ROWS */
    .detail-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .detail-row:last-child { border-bottom: none; }
    .detail-icon { width: 36px; height: 36px; background: var(--bg2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
    .detail-label { font-size: 11px; color: var(--text2); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 3px; }
    .detail-value { font-size: 15px; color: var(--text); font-weight: 500; line-height: 1.4; }

    /* CALENDARIO */
    .booking-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow); animation: fadeUp 0.4s ease both; border-left: 4px solid var(--accent); }
    .booking-date { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .booking-time { font-size: 14px; color: var(--text2); margin-bottom: 8px; }

    /* EMPTY / LOADING / ALERT */
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text2); }
    .empty-state .empty-icon { font-size: 52px; margin-bottom: 16px; opacity: 0.5; }
    .empty-state h3 { font-family: var(--font-display); font-size: 20px; color: var(--text); margin-bottom: 8px; }
    .empty-state p { font-size: 14px; line-height: 1.6; }
    .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 16px; color: var(--text2); }
    .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
    .alert { padding: 14px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; border: 1px solid; }
    .alert-error { background: rgba(196,80,26,0.08); border-color: rgba(196,80,26,0.2); color: var(--accent); }

    /* CLIENTI TOOLBAR */
    .clienti-toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
    .clienti-search { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 0 12px; gap: 8px; }
    .clienti-search input { flex: 1; min-width: 0; width: 100%; border: none; background: none; font-family: var(--font-body); font-size: 16px; color: var(--text); outline: none; padding: 12px 0; }
    .clienti-search input::placeholder { color: var(--text2); }
    .clienti-search .search-icon { font-size: 16px; color: var(--text2); flex-shrink: 0; }
    .btn-toolbar { padding: 10px 14px; border: none; border-radius: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .btn-add { background: var(--accent); color: white; }
    .btn-add:hover { background: #A8401A; transform: translateY(-1px); }
    .btn-delete { background: var(--bg2); color: var(--text2); }
    .btn-delete.active { background: rgba(196,80,26,0.12); color: var(--accent); border: 1.5px solid rgba(196,80,26,0.3); }
    .btn-delete:hover { background: rgba(196,80,26,0.12); color: var(--accent); }
    .list-item.selected { background: rgba(196,80,26,0.06); border-left: 3px solid var(--accent); }
    .delete-bar { background: var(--accent); color: white; padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; animation: fadeUp 0.2s ease; }
    .delete-bar span { font-size: 14px; font-weight: 600; }
    .btn-confirm-delete { background: white; color: var(--accent); border: none; border-radius: 8px; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; }
    .modal-form-group { margin-bottom: 16px; }
    .modal-form-group label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }
    .modal-form-group input, .modal-form-group select, .modal-form-group textarea { width: 100%; padding: 13px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 16px; color: var(--text); outline: none; transition: border-color 0.2s; }
    .modal-form-group input:focus, .modal-form-group select:focus, .modal-form-group textarea:focus { border-color: var(--accent); }
    .modal-form-group textarea { resize: vertical; min-height: 90px; }
    .btn-modal-primary { width: 100%; padding: 14px; background: var(--accent); color: white; border: none; border-radius: 10px; font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 8px; }
    .btn-modal-primary:hover { background: #A8401A; }
    .btn-modal-primary:disabled { opacity: 0.6; cursor: not-allowed; }

        @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse-warn { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
    .delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.10s; } .delay-3 { animation-delay: 0.15s; } .delay-4 { animation-delay: 0.20s; }

    /* PULSE CARD DELTA */
    .pulse-delta { font-size: 11px; font-weight: 700; margin-top: 3px; display: block; letter-spacing: 0.3px; }

    /* CRM FILTERS */
    .crm-filters { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .crm-filters::-webkit-scrollbar { display: none; }
    .crm-filter-chip { padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; font-family: var(--font-body); flex-shrink: 0; }
    .crm-filter-chip.active { background: var(--accent); border-color: var(--accent); color: white; }
    .crm-filter-chip:hover:not(.active) { background: var(--bg2); }

    /* LIST ACTION BUTTON */
    .list-action-btn { width: 40px; height: 40px; background: var(--bg2); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: background 0.15s; }
    .list-action-btn:hover { background: rgba(46,107,79,0.15); }

    /* CREDITO WARN */
    .credito-warn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: rgba(196,80,26,0.08); border-radius: 8px; animation: pulse-warn 2s ease infinite; }
    .credito-warn span { font-size: 12px; color: var(--accent); font-weight: 600; }

    /* CLIENTE SHEET SECTION */
    .sheet-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text2); margin: 20px 0 10px; }
    .sheet-call-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--green); color: white; border-radius: 12px; padding: 14px; margin-bottom: 20px; text-decoration: none; font-weight: 700; font-size: 16px; }

    /* ═══ TEMA ARTIPRO — quaderno di cantiere ═══
       Struttura da carta e inchiostro: righe sottili al posto di scatole arrotondate, un solo blocco pieno
       per schermata (inchiostro blu), terracotta riservata alle azioni. Solo aspetto: nessuna logica. */
    body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
    h1, h2, h3 { letter-spacing: -0.01em; }
    .pulse-value, .metric-value, .booking-date { font-variant-numeric: tabular-nums lining-nums; }

    /* Barra in alto: inchiostro pieno, il logo è l'unico elemento arancio */
    .topbar { background: var(--ink); border-bottom: 0; color: var(--paper-on-ink); }
    .topbar-logo { color: var(--accent2); letter-spacing: -0.5px; }
    .topbar-user { color: rgba(244,239,230,0.7); }
    .topbar-user strong { color: var(--paper-on-ink); font-weight: 600; }

    /* Navigazione: la voce attiva ha un filo arancio sopra, niente scatola */
    .bottom-nav { box-shadow: none; border-top: 1px solid var(--border); background: var(--card); }
    .nav-item { position: relative; }
    .nav-item.active { color: var(--ink2); }
    .nav-item.active::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--accent); }
    .nav-badge { border-radius: 2px; }
    .more-item.active { background: var(--bg2); }

    /* Titoli di sezione: titolo, sottotitolo e una riga d'inchiostro */
    .main-content { padding: 22px 18px 104px; }
    .section-header { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
    .section-header h1 { font-size: 27px; margin-bottom: 3px; color: var(--ink); }
    .section-header p { font-size: 13px; letter-spacing: 0.01em; }

    /* Riepilogo: un registro a quattro voci, non quattro schede */
    .pulse-grid { gap: 0; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
    .pulse-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left; padding: 14px 12px 14px 0; border-top: 1px solid var(--border); }
    .pulse-card:nth-child(odd) { border-right: 1px solid var(--border); }
    .pulse-card:nth-child(even) { padding-left: 16px; }
    .pulse-value { color: var(--ink); font-size: 34px; }
    .pulse-label { font-weight: 600; letter-spacing: 0.08em; font-size: 10.5px; }

    /* Metriche: tessere piatte con filo colorato sopra; una sola piena */
    .metric-grid { gap: 14px 16px; margin-bottom: 24px; }
    .metric-card { background: transparent; border: 0; border-top: 3px solid var(--ink2); border-radius: 0; box-shadow: none; padding: 12px 0 4px; }
    .metric-card.accent { background: var(--ink); border: 0; border-radius: var(--r-card); color: var(--paper-on-ink); padding: 18px 20px; }
    .metric-card.accent .metric-value { font-size: 34px; }
    .metric-card.accent .metric-label { color: rgba(244,239,230,0.75); }
    .metric-card.accent .metric-icon { background: transparent; }
    .metric-icon { width: auto; height: auto; background: none; border-radius: 0; justify-content: flex-start; font-size: 18px; margin-bottom: 8px; }
    .metric-card:nth-child(3n+3) { border-top-color: var(--accent); }
    .metric-card:nth-child(4n+4) { border-top-color: var(--green); }
    .metric-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 600; }
    .piano-badge { background: var(--ink2); border-radius: var(--r-pill); padding: 5px 12px; font-size: 11px; margin-bottom: 18px; }
    .credito-bar-wrap { background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 0; }
    .credito-bar { border-radius: 1px; height: 6px; }
    .credito-bar-fill { background: var(--accent); border-radius: 1px; }

    /* Elenchi: righe su carta divise da un filo, senza contenitore */
    .list-card { background: transparent; border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; margin-bottom: 18px; }
    .section-header + .list-card { border-top: 0; }
    .list-item { padding: 14px 4px; }
    .list-item:hover { background: rgba(23,50,74,0.05); }
    .list-item.selected { background: rgba(196,80,26,0.07); border-left: 3px solid var(--accent); padding-left: 10px; }
    .list-avatar { border-radius: var(--r-card); width: 40px; height: 40px; background: var(--bg2); font-size: 18px; }
    .chevron { color: var(--muted); }
    .day-group-header { background: transparent; padding: 12px 4px; }
    .day-group-count { border-radius: 2px; background: var(--ink); color: var(--paper-on-ink); }
    .day-group-title { color: var(--ink); }

    /* Etichette di stato: rettangoli netti in maiuscoletto */
    .tag { border-radius: var(--r-pill); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; padding: 3px 7px; }
    .tag-guasto, .tag-aperto { background: rgba(196,80,26,0.12); color: var(--accent); }
    .tag-appuntamento, .tag-risolto { background: rgba(46,107,79,0.13); color: var(--green); }
    .tag-link_inviato { background: rgba(168,122,11,0.14); color: var(--gold); }
    .tag-info { background: rgba(23,50,74,0.09); color: var(--ink2); }

    /* Appuntamenti: scheda con costa colorata, non bolla */
    .booking-card { border-radius: var(--r-card); box-shadow: none; border: 1px solid var(--border); border-left: 5px solid var(--ink2); background: var(--card); }
    .booking-date { color: var(--ink); }

    /* Pulsanti e campi: angoli corti, gerarchia chiara */
    .btn-primary, .btn-modal-primary, .btn-add { border-radius: var(--r-ctl); letter-spacing: 0.01em; }
    .btn-primary:hover, .btn-add:hover { transform: none; box-shadow: none; background: #A8401A; }
    .btn-toolbar, .btn-action, .btn-confirm-delete, .crm-filter-chip { border-radius: var(--r-ctl); }
    .btn-delete { background: transparent; border: 1.5px solid var(--border); }
    .crm-filter-chip { background: transparent; }
    .crm-filter-chip.active { background: var(--ink); border-color: var(--ink); }
    .input-group input, .modal-form-group input, .modal-form-group select, .modal-form-group textarea, .clienti-search { border-radius: var(--r-ctl); }
    .input-group input:focus, .modal-form-group input:focus, .modal-form-group select:focus, .modal-form-group textarea:focus { border-color: var(--ink2); box-shadow: 0 0 0 3px rgba(30,92,136,0.14); }
    .btn-action-risolto { background: var(--green); }
    .delete-bar { border-radius: var(--r-ctl); background: var(--ink); }
    .btn-ritardo-cascata { border-radius: var(--r-ctl); }
    .alert { border-radius: var(--r-ctl); }
    .list-action-btn { border-radius: var(--r-ctl); color: var(--ink2); }
    .list-action-btn:hover { color: var(--green); }
    .sheet-call-btn { border-radius: var(--r-ctl); }
    .sheet-section-label { color: var(--ink2); border-bottom: 1px solid var(--border); padding-bottom: 6px; }

    /* Maschere: foglio che sale dal basso con intestazione d'inchiostro */
    .modal-overlay { background: rgba(23,50,74,0.55); }
    .modal { border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lg); }
    .modal-handle { background: var(--muted); opacity: 0.5; }
    .modal-header { border-bottom: 2px solid var(--ink); }
    .modal-title { color: var(--ink); }
    .modal-close { border-radius: var(--r-ctl); }
    .detail-icon { border-radius: var(--r-ctl); background: transparent; border: 1px solid var(--border); }
    .detail-label { color: var(--ink2); }

    /* Accesso */
    .login-page::before { background: radial-gradient(circle, rgba(30,92,136,0.10) 0%, transparent 70%); }
    .login-page::after { background: radial-gradient(circle, rgba(196,80,26,0.08) 0%, transparent 70%); }
    .login-card { border-radius: var(--r-card); border-top: 4px solid var(--ink); box-shadow: var(--shadow-lg); }
    .login-tagline { color: var(--ink2); }
    .empty-state .empty-icon { opacity: 0.6; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* ═══ RITOCCO 2 — profondità, tasselli colorati, movimento ═══ */
    :root {
      --shadow-soft: 0 8px 24px -10px rgba(23,50,74,0.28), 0 1px 2px rgba(23,50,74,0.06);
      --shadow-pop: 0 14px 34px -12px rgba(23,50,74,0.40);
      --ease: cubic-bezier(.2,.8,.2,1);
      --ink-grad: linear-gradient(160deg, #1D4466 0%, #17324A 55%, #122A40 100%);
      --accent-grad: linear-gradient(180deg, #C4501A 0%, #A8401A 100%);
    }
    body { background: radial-gradient(1100px 420px at 50% -120px, rgba(30,92,136,0.10), transparent 70%), var(--bg); }

    /* Barra in alto: sfumatura d'inchiostro, ombra, avatar con le iniziali */
    .topbar { background: var(--ink-grad); box-shadow: 0 10px 26px -14px rgba(23,50,74,0.7); }
    .topbar-user { display: flex; align-items: center; gap: 10px; }
    .topbar-testo { text-align: right; }
    .topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; order: 2; box-shadow: 0 0 0 2px rgba(244,239,230,0.25); }

    /* Titoli: barretta terracotta al posto della riga piena */
    .section-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
    .section-header::after { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--accent); margin-top: 12px; }

    /* Pannello "Oggi" della dashboard */
    .hero { position: relative; overflow: hidden; background: var(--ink-grad); color: var(--paper-on-ink); border-radius: 18px; padding: 20px 20px 18px; margin-bottom: 18px; box-shadow: var(--shadow-pop); }
    .hero::before { content: ''; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(232,135,74,0.38), transparent 68%); }
    .hero::after { content: ''; position: absolute; right: 26px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; border: 18px solid rgba(244,239,230,0.06); }
    .hero > * { position: relative; z-index: 1; }
    .hero .piano-badge { position: absolute; top: 16px; right: 16px; margin: 0; background: rgba(244,239,230,0.14); color: var(--paper-on-ink); backdrop-filter: blur(4px); }
    .hero-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,230,0.6); font-weight: 600; margin-bottom: 8px; }
    .hero-title { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1.2; max-width: 80%; }
    .hero-sub { font-size: 13.5px; color: rgba(244,239,230,0.78); margin: 6px 0 16px; }
    .hero-cta { background: var(--accent-grad); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(196,80,26,0.8); transition: transform .15s var(--ease), box-shadow .15s; }
    .hero-cta:active { transform: scale(.96); }

    /* Pannelli sollevati */
    .pulse-grid { background: var(--card); border: 1px solid rgba(216,205,182,0.7); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; margin-bottom: 18px; }
    .pulse-card { padding: 14px 16px; border-top: 0; border-bottom: 1px solid var(--border); }
    .pulse-card:nth-child(n+3) { border-bottom: 0; }
    .pulse-card:nth-child(odd) { border-right: 1px solid var(--border); padding-left: 16px; }
    .pulse-card:nth-child(even) { padding-left: 16px; }
    .list-card { background: var(--card); border: 1px solid rgba(216,205,182,0.7); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; }
    .section-header + .list-card { border-top: 1px solid rgba(216,205,182,0.7); }
    .list-item { padding: 14px 16px; transition: background .15s, transform .12s var(--ease); }
    .list-item:active { background: rgba(23,50,74,0.07); transform: scale(0.985); }
    .booking-card { box-shadow: var(--shadow-soft); border-radius: 14px; border-left-width: 5px; }

    /* Metriche: tessere con tassello icona colorato */
    .metric-card { --tinta: var(--ink2); background: var(--card); border: 1px solid rgba(216,205,182,0.7); border-top: 1px solid rgba(216,205,182,0.7); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 16px; }
    .metric-card:nth-child(3n+3) { --tinta: var(--accent); border-top-color: rgba(216,205,182,0.7); }
    .metric-card:nth-child(4n+4) { --tinta: var(--green); border-top-color: rgba(216,205,182,0.7); }
    .metric-card.accent { background: var(--ink-grad); border: 0; box-shadow: var(--shadow-pop); }
    .metric-icon { width: 38px; height: 38px; border-radius: 11px; justify-content: center; background: color-mix(in srgb, var(--tinta) 14%, transparent); color: var(--tinta); font-size: 19px; margin-bottom: 12px; }
    .metric-card.accent .metric-icon { background: rgba(244,239,230,0.14); color: var(--paper-on-ink); }

    /* Tasselli colorati per le icone delle liste e dei dettagli */
    .list-avatar { --tinta: var(--accent); background: color-mix(in srgb, var(--tinta) 13%, transparent); color: var(--tinta); border-radius: 12px; width: 42px; height: 42px; }
    .avatar-iniziali { border-radius: 50%; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
    .detail-icon { background: color-mix(in srgb, var(--ink2) 10%, transparent); border: 0; color: var(--ink2); border-radius: 10px; }

    /* Pulsanti: terracotta con sfumatura e ombra colorata, risposta al tocco */
    .btn-primary, .btn-modal-primary, .btn-add { background: var(--accent-grad); box-shadow: 0 8px 18px -10px rgba(196,80,26,0.9); transition: transform .15s var(--ease), box-shadow .15s, filter .15s; }
    .btn-primary:hover, .btn-add:hover, .btn-modal-primary:hover { background: var(--accent-grad); filter: brightness(1.05); }
    .btn-primary:active, .btn-modal-primary:active, .btn-add:active, .btn-toolbar:active, .btn-action:active, .crm-filter-chip:active, .btn-delete:active { transform: scale(0.96); }
    .btn-toolbar, .btn-action, .crm-filter-chip { transition: transform .15s var(--ease), background .15s, color .15s; }
    .crm-filter-chip.active { background: var(--ink-grad); }

    /* Barra in basso: voce attiva con "pillola" dietro l'icona */
    .bottom-nav { box-shadow: 0 -12px 28px -16px rgba(23,50,74,0.35); border-top: 0; }
    .nav-item { padding-top: 6px; transition: color .2s; }
    .nav-item.active::before { display: none; }
    .nav-item .nav-icon { padding: 4px 16px; border-radius: 999px; transition: background .25s var(--ease), transform .2s var(--ease); }
    .nav-item.active, .nav-item.active .nav-label { color: var(--accent); }
    .nav-item.active .nav-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
    .nav-item.active .nav-icon .ico { stroke-width: 2.3; fill: color-mix(in srgb, var(--accent) 22%, transparent); }
    .nav-item:active .nav-icon { transform: scale(0.9); }
    .nav-badge { right: 2px; top: -2px; border-radius: 9px; box-shadow: 0 0 0 2px var(--card); }

    /* Stati vuoti: illustrazione semplice con alone */
    .empty-state { padding: 56px 24px; }
    .empty-state .empty-icon { width: 78px; height: 78px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; opacity: 1; color: var(--ink2); background: color-mix(in srgb, var(--ink2) 10%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ink2) 5%, transparent); }
    .empty-state h3 { color: var(--ink); }

    /* Caricamento: scheletro che pulsa al posto della rotella */
    .skel { padding: 4px 0; }
    .skel-line, .skel-block { border-radius: 8px; background: linear-gradient(100deg, var(--bg2) 30%, rgba(251,248,241,0.95) 50%, var(--bg2) 70%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
    .skel-line { height: 14px; margin-bottom: 10px; }
    .skel-block { height: 74px; margin-bottom: 12px; border-radius: 14px; }

    /* Maschere: foglio che sale con curva morbida, sfondo sfocato */
    .modal-overlay { background: rgba(18,42,64,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: none; }
    .modal { border-radius: 22px 22px 0 0; animation: none; }
    .modal-enter .modal-overlay { animation: fadeIn .22s ease both; }
    .modal-enter .modal { animation: sheetIn .38s var(--ease) both; }
    .modal-close { transition: transform .15s var(--ease), background .15s; }
    .modal-close:active { transform: scale(0.88); }

    /* Movimento: ingresso a cascata solo quando si cambia schermata */
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
    @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
    .list-card, .metric-card, .booking-card, .pulse-card, .metric-card.accent { animation: none; }
    .anim .section-header, .anim .hero, .anim .piano-badge:not(.hero .piano-badge), .anim .pulse-grid, .anim .empty-state { animation: rise .5s var(--ease) both; }
    .anim .hero { animation-delay: .04s; } .anim .pulse-grid { animation-delay: .1s; }
    .anim .list-item, .anim .metric-card, .anim .booking-card { animation: rise .5s var(--ease) both; }
    .anim .skel-block { animation: shimmer 1.3s linear infinite; }
    .anim .list-item:nth-child(1), .anim .metric-card:nth-child(1), .anim .pulse-card:nth-child(1), .anim .booking-card:nth-child(1), .anim .skel-block:nth-child(1) { animation-delay: 0.00s; }
    .anim .list-item:nth-child(2), .anim .metric-card:nth-child(2), .anim .pulse-card:nth-child(2), .anim .booking-card:nth-child(2), .anim .skel-block:nth-child(2) { animation-delay: 0.04s; }
    .anim .list-item:nth-child(3), .anim .metric-card:nth-child(3), .anim .pulse-card:nth-child(3), .anim .booking-card:nth-child(3), .anim .skel-block:nth-child(3) { animation-delay: 0.08s; }
    .anim .list-item:nth-child(4), .anim .metric-card:nth-child(4), .anim .pulse-card:nth-child(4), .anim .booking-card:nth-child(4), .anim .skel-block:nth-child(4) { animation-delay: 0.12s; }
    .anim .list-item:nth-child(5), .anim .metric-card:nth-child(5), .anim .pulse-card:nth-child(5), .anim .booking-card:nth-child(5), .anim .skel-block:nth-child(5) { animation-delay: 0.16s; }
    .anim .list-item:nth-child(6), .anim .metric-card:nth-child(6), .anim .pulse-card:nth-child(6), .anim .booking-card:nth-child(6), .anim .skel-block:nth-child(6) { animation-delay: 0.20s; }
    .anim .list-item:nth-child(7), .anim .metric-card:nth-child(7), .anim .pulse-card:nth-child(7), .anim .booking-card:nth-child(7), .anim .skel-block:nth-child(7) { animation-delay: 0.24s; }
    .anim .list-item:nth-child(8), .anim .metric-card:nth-child(8), .anim .pulse-card:nth-child(8), .anim .booking-card:nth-child(8), .anim .skel-block:nth-child(8) { animation-delay: 0.28s; }
    .anim .list-item:nth-child(9), .anim .metric-card:nth-child(9), .anim .pulse-card:nth-child(9), .anim .booking-card:nth-child(9), .anim .skel-block:nth-child(9) { animation-delay: 0.32s; }
    .anim .list-item:nth-child(10), .anim .metric-card:nth-child(10), .anim .pulse-card:nth-child(10), .anim .booking-card:nth-child(10), .anim .skel-block:nth-child(10) { animation-delay: 0.36s; }
    .anim .nav-badge { animation: popIn .45s var(--ease) .3s both; }
    .anim .empty-state .empty-icon { animation: popIn .6s var(--ease) .1s both; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

    /* ═══ INTRO — all'apertura dell'app (una volta per sessione; niente con "riduci movimento") ═══ */
    #splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(900px 500px at 50% 35%, #1F5078 0%, #17324A 55%, #0F2538 100%); color: var(--paper-on-ink); animation: splashOut .55s cubic-bezier(.7,0,.3,1) 2.15s forwards; }
    #splash .sp-mark { width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(135deg, #FF7A2F 0%, #E85E0A 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px -12px rgba(196,80,26,0.75); animation: spMark .8s cubic-bezier(.2,.9,.25,1.15) .1s both; }
    #splash .sp-mark svg { width: 84px; height: 84px; fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
    #splash .sp-mark svg path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: spDraw .9s ease .45s forwards; }
    #splash .sp-mark svg circle { fill: #1E5C88; stroke: none; opacity: 0; animation: spDot .3s ease 1.15s forwards; }
    #splash .sp-name { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -1px; margin-top: 22px; animation: spUp .7s cubic-bezier(.2,.8,.2,1) .7s both; }
    #splash .sp-name span { color: var(--accent2); }
    #splash .sp-line { width: 0; height: 3px; border-radius: 2px; background: var(--accent2); margin-top: 12px; animation: spLine .7s cubic-bezier(.2,.8,.2,1) 1s forwards; }
    #splash .sp-tag { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(244,239,230,0.7); margin-top: 16px; animation: spUp .7s ease 1.2s both; }
    @keyframes spMark { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
    @keyframes spDraw { to { stroke-dashoffset: 0; } }
    @keyframes spDot { to { opacity: 1; } }
    @keyframes spUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes spLine { to { width: 56px; } }
    @keyframes splashOut { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
    /* ═══ ACCESSO — schermata di login e PIN ═══ */
    .login-page { background: radial-gradient(900px 520px at 50% 0%, #1F5078 0%, #17324A 55%, #0F2538 100%); color: var(--paper-on-ink); }
    .login-page::before { background: radial-gradient(circle, rgba(232,135,74,0.22) 0%, transparent 70%); }
    .login-page::after { background: radial-gradient(circle, rgba(244,239,230,0.07) 0%, transparent 70%); }
    .login-mark { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 21px; background: linear-gradient(135deg, #FF7A2F 0%, #E85E0A 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 16px 34px -12px rgba(196,80,26,0.75); }
    .login-anim .login-mark { animation: popIn .6s var(--ease) both; }
    .login-mark svg { width: 72px; height: 72px; fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
    .login-mark svg circle { fill: #1E5C88; stroke: none; }
    .login-logo { color: var(--paper-on-ink); font-size: 40px; margin-bottom: 4px; }
    .login-logo span { color: var(--accent2); }
    .login-tagline { color: rgba(244,239,230,0.65); margin-bottom: 36px; font-size: 11px; letter-spacing: 0.28em; }
    .login-card { background: var(--card); color: var(--text); border: 0; border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6); }
    .login-anim .login-card { animation: rise .5s var(--ease) .1s both; }
    .login-card h2 { color: var(--ink); }
    .login-link { text-align: center; margin-top: 18px; font-size: 13px; }
    .login-link a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    .pin-input { width: 100%; text-align: center; font-family: var(--font-body); font-size: 28px; letter-spacing: 0.5em; padding: 14px 8px 14px 18px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-ctl); color: var(--ink); outline: none; margin-bottom: 16px; }
    .pin-input:focus { border-color: var(--ink2); box-shadow: 0 0 0 3px rgba(30,92,136,0.14); }
    .input-group .pin-input { margin-bottom: 0; }
    .pin-input::placeholder { color: var(--muted); opacity: 0.8; }
    .pin-nudge { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid rgba(216,205,182,0.7); border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-soft); padding: 14px 16px; margin-bottom: 18px; cursor: pointer; }
    .numero-card { background: var(--card); border: 1px solid rgba(216,205,182,0.7); border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-soft); padding: 16px 16px 6px; margin-bottom: 18px; }
    .numero-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .numero-head .numero-ico { font-size: 22px; color: var(--accent); }
    .numero-head strong { display: block; font-size: 14px; color: var(--ink); }
    .numero-head span.numero-sub { font-size: 12.5px; color: var(--text2); }
    .numero-passi { list-style: none; margin: 0; padding: 0; }
    .numero-passo { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(216,205,182,0.5); }
    .numero-passo:first-child { border-top: 0; }
    .numero-pallino { flex: 0 0 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--border); color: var(--text2); background: var(--bg); }
    .numero-passo.fatto .numero-pallino { background: var(--green); border-color: var(--green); color: #fff; }
    .numero-passo.corrente .numero-pallino { border-color: var(--accent); color: var(--accent); }
    .numero-passo strong { display: block; font-size: 13.5px; color: var(--ink); }
    .numero-passo.da_fare strong { color: var(--text2); font-weight: 600; }
    .numero-passo span { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
    .numero-azione { margin-top: 10px; }
    .numero-azione label { display: block; font-size: 12.5px; color: var(--text2); margin-bottom: 6px; }
    .numero-azione input { width: 100%; box-sizing: border-box; padding: 12px; font-size: 18px; letter-spacing: 4px; text-align: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); margin-bottom: 10px; font-family: var(--font-body); }
    .numero-azione .btn-primary { padding: 12px; font-size: 14.5px; }
    .numero-link { background: none; border: 0; padding: 10px 0 0; font-size: 12.5px; color: var(--accent); text-decoration: underline; cursor: pointer; font-family: var(--font-body); }
    .numero-msg { font-size: 12.5px; color: var(--text2); margin-top: 8px; line-height: 1.4; }
    .numero-msg.err { color: var(--accent); font-weight: 600; }
    .doc-slot { margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
    .doc-slot.pieno { border-style: solid; border-color: var(--green); }
    .doc-slot label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
    .doc-slot input[type=file] { width: 100%; font-size: 13px; font-family: var(--font-body); }
    .doc-slot .doc-ok { font-size: 12px; color: var(--green); margin-top: 4px; }
    .numero-problema { font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; }
    .pin-nudge strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
    .pin-nudge span { font-size: 12.5px; color: var(--text2); }
    /* Notifiche: scorrimento a sinistra (letta / da leggere) e a destra (archivia) */
    .link-archiviate { background: none; border: 0; padding: 4px 2px; margin-left: 6px; font: inherit; font-weight: 700; color: var(--accent-testo); cursor: pointer; }
    .link-archiviate[hidden] { display: none; }
    .swipe-riga.in-archivio .swipe-dx { display: none; }
    .swipe-hint { font-size: 12px; color: var(--text2); text-align: center; margin: -6px 0 10px; letter-spacing: .02em; }
    .swipe-riga { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); max-height: 600px; transition: max-height .3s var(--ease), opacity .3s, border-color .3s; }
    .swipe-riga:last-child { border-bottom: 0; }
    .swipe-riga.esce { max-height: 0; opacity: 0; border-color: transparent; }
    .swipe-fronte { position: relative; z-index: 1; background: var(--card); border-bottom: 0 !important; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; }
    .swipe-fronte.rilascio { transition: transform .34s cubic-bezier(.2,.9,.25,1.1), background .15s, opacity .26s; }
    .swipe-fronte.fuori { transform: translateX(115%); opacity: 0; transition: transform .26s cubic-bezier(.5,0,.9,.4), opacity .26s; }
    .swipe-fronte:active { transform: none; }
    .swipe-sfondo { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .12s, filter .15s; }
    .swipe-sx { justify-content: flex-start; background: #7A6A55; }
    .swipe-dx { justify-content: flex-end; background: var(--ink2); }
    .swipe-riga.verso-dx .swipe-sx, .swipe-riga.verso-sx .swipe-dx { opacity: .75; }
    .swipe-riga.verso-dx .swipe-dx, .swipe-riga.verso-sx .swipe-sx { visibility: hidden; }
    .swipe-riga.supera.verso-dx .swipe-sx, .swipe-riga.supera.verso-sx .swipe-dx { opacity: 1; filter: saturate(1.25); }
    .swipe-riga .swipe-fronte:hover, .swipe-riga .swipe-fronte:active { background: var(--card); }
    .swipe-sfondo .swipe-ico { width: 22px; height: 22px; transition: transform .2s var(--ease); }
    .swipe-riga.supera .swipe-dx .swipe-ico { transform: scale(1.35) rotate(-6deg); }
    .swipe-riga.supera .swipe-sx .swipe-ico { transform: scale(1.35) rotate(6deg); }
    @keyframes scuoti { 0% { transform: translateX(var(--x, 0px)); } 22% { transform: translateX(-11px); } 46% { transform: translateX(8px); } 70% { transform: translateX(-4px); } 100% { transform: translateX(0); } }
    @keyframes pulsa { 0% { transform: translateX(var(--x, 0px)); background: color-mix(in srgb, var(--accent) 16%, var(--card)); } 45% { transform: translateX(0) scale(1.02); background: color-mix(in srgb, var(--accent) 12%, var(--card)); } 100% { transform: none; background: var(--card); } }
    .swipe-riga .swipe-fronte.scuoti, .anim .swipe-riga .swipe-fronte.scuoti { animation: scuoti .42s cubic-bezier(.3,.7,.4,1); }
    .swipe-riga .swipe-fronte.pulsa, .anim .swipe-riga .swipe-fronte.pulsa { animation: pulsa .5s cubic-bezier(.2,.9,.25,1.2); }
    .anim .swipe-riga { animation: rise .5s var(--ease) both; }
    .anim .swipe-riga .swipe-fronte { animation: none; }
    .toast-notifica { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 300; background: var(--ink); color: var(--paper-on-ink); padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); animation: toastIn .3s var(--ease) both; max-width: 86vw; text-align: center; }
    .toast-notifica.esce { animation: toastOut .35s ease-in both; }
    @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
    @keyframes toastOut { to { opacity: 0; transform: translate(-50%, 10px); } }
    /* Portale: il documento non scorre, scorre solo il contenuto sotto la barra in alto. Così né la tastiera né Safari
       possono spostare la pagina e coprire il saluto con la barra (su iPhone restava scrollata di 40 px). */
    /* Anche il body è fisso (iOS ignora overflow:hidden e con la tastiera o la barra di Safari sposta la pagina), l'altezza
       segue l'area realmente visibile (--vvh, aggiornata da adattaViewport) e la barra dei tab è l'ultimo pezzo del layout,
       non più un elemento fixed che può staccarsi dal fondo. Con la tastiera aperta la barra si nasconde. */
    body.vista-portale { position: fixed; inset: 0; width: 100%; overflow: hidden; }
    /* #app è fisso a tutto schermo come lo era la barra: nell'app installata su iPhone vh/dvh e visualViewport.height
       non coprono l'intero schermo e restava una fascia vuota sotto i tab. Solo con la tastiera aperta (--vvh) si accorcia. */
    body.vista-portale #app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 430px; margin: 0 auto; height: auto; min-height: 0; }
    body.vista-portale.tastiera #app { bottom: auto; height: var(--vvh, 100%); }
    body.vista-portale #portal-wrap { display: flex; flex-direction: column; height: 100%; }
    body.vista-portale .topbar { position: relative; flex: none; }
    body.vista-portale .main-content { flex: 1 1 auto; min-height: 0; padding-bottom: 24px; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
    body.vista-portale .bottom-nav { position: relative; flex: none; left: auto; bottom: auto; transform: none; max-width: none; }
    body.vista-portale.tastiera .bottom-nav { display: none; }
    body.scroll-lock .main-content { overflow: hidden; }
    /* Login ancorato in alto: il campo PIN resta sopra la tastiera e iOS non sposta la pagina */
    .login-page { justify-content: flex-start; padding-top: max(40px, calc(env(safe-area-inset-top, 0px) + 28px)); }
    .login-tagline { margin-bottom: 28px; }

    /* Schermi larghi (PC): il Portal resta la colonna da telefono di 430 px, ma centrata su uno sfondo blu inchiostro
       invece che su una pagina vuota. Solo sfondo e ombra: nessun cambio di geometria, di scorrimento o di tab. Sul
       telefono (sotto 760 px) non si applica niente. */
    @media (min-width: 760px) {
      html { background-attachment: fixed; background:
        radial-gradient(1100px 600px at 88% -8%, rgba(196,80,26,.26), transparent 62%),
        radial-gradient(900px 700px at 4% 112%, rgba(30,92,136,.40), transparent 60%),
        #0F2233; }
      html body { background: transparent; }
      #app { background: var(--bg); box-shadow: 0 0 0 1px rgba(244,239,230,.10), 0 40px 100px -24px rgba(0,0,0,.65); }
    }

    /* ═══ Impostazioni a sezioni ═══ */
    .imp-menu { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; }
    .imp-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; background: transparent; border: 0; border-bottom: 1px solid var(--border); font: inherit; color: inherit; text-align: left; cursor: pointer; }
    .imp-row:last-child { border-bottom: 0; }
    .imp-row:active { background: var(--bg2); }
    .imp-ico { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg2); border-radius: var(--r-card); font-size: 20px; }
    .imp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .imp-nome { font-size: 15px; font-weight: 600; color: var(--text); }
    .imp-stato { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .imp-freccia { font-size: 22px; color: var(--text2); flex-shrink: 0; }
    .imp-back { background: none; border: 0; padding: 4px 0 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }

/* Conferma dell'indirizzo sulla mappa (modali cliente e intervento) */
.geo-box { font-size: 13px; margin-top: 8px; }
.geo-q { color: var(--text2); margin-bottom: 8px; line-height: 1.45; }
.geo-q.ok { color: var(--green, #2E6B4F); font-weight: 600; }
.geo-opt { display: block; width: 100%; text-align: left; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 12px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; margin-bottom: 8px; }
.geo-opt:active { border-color: var(--accent); }
.geo-skip { background: none; border: 0; color: var(--text2); font-family: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 0; }

/* Maschere con la tastiera aperta (iPhone: la pagina non si ridimensiona, si accorcia solo l'area visibile).
   Il foglio segue --vvh (aggiornata da adattaViewport) invece di restare dietro la tastiera: resta sopra di essa,
   scorre e il campo in uso viene portato in vista da adattaViewport. */
body.tastiera .modal-overlay { bottom: auto; height: var(--vvh, 100%); }
body.tastiera .modal { max-height: calc(var(--vvh, 100%) - 8px); padding-bottom: 16px; }

/* Mappa degli impianti */
.seg-vista { display: flex; gap: 6px; margin: 0 0 12px; }
.seg-vista button { flex: 1; padding: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text2); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg-vista button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mappa-impianti { height: 420px; border-radius: var(--r-card); border: 1px solid var(--border); overflow: hidden; isolation: isolate; background: var(--bg); }
.mappa-attesa { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text2); font-size: 14px; }
.mappa-nota { font-size: 13px; color: var(--text2); line-height: 1.45; margin: 10px 2px 0; }
.imp-pin-wrap { background: none; border: 0; }
.imp-pin { display: block; width: 28px; height: 28px; background: var(--accent); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.imp-pop { font-family: inherit; font-size: 13px; line-height: 1.45; color: #1A1208; }
.imp-pop strong { font-size: 14px; display: block; }
.imp-pop-ind { color: #6B5D45; margin: 2px 0 6px; }
.imp-pop a { display: block; color: #C4501A; font-weight: 600; text-decoration: none; padding: 3px 0; }

.mappa-impianti { position: relative; }
.mappa-avviso { position: absolute; left: 10px; right: 10px; bottom: 28px; z-index: 1000; background: rgba(255,255,255,0.96); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.mappa-avviso button { margin-top: 6px; display: block; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-family: inherit; font-weight: 600; cursor: pointer; }

/* La mia giornata */
.giorno-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.giorno-nav button { border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 10px 14px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.giorno-nav .giorno-oggi { flex: 1; text-transform: capitalize; }
.mappa-giornata { height: 280px; }
.btn-giro { display: block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; padding: 13px; border-radius: 12px; margin: 12px 0; }
.tappe { margin-top: 6px; }
.tappa { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; }
.tappa-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tappa-body { flex: 1; min-width: 0; }
.tappa-ora { font-size: 13px; color: var(--text2); font-weight: 600; }
.tappa-cliente { font-size: 16px; font-weight: 700; margin-top: 2px; }
.tappa-dett { font-size: 13px; color: var(--text2); margin-top: 3px; line-height: 1.4; }
.tappa-avviso { font-size: 12px; color: #B45309; margin-top: 4px; }
.tappa-azioni { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tappa-az { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--accent-testo); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.tappa-tra { text-align: center; font-size: 12px; color: var(--text2); padding: 8px 0; }
.tappa-tra span { opacity: 0.7; }
.gio-pin { display: flex; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); font-weight: 700; font-size: 13px; align-items: center; justify-content: center; box-sizing: border-box; }

/* Non disponibile: giorni o ore tolti dalla prenotazione online */
.btn-blocca { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 16px; padding: 12px 14px; border: 1.5px dashed var(--border); background: transparent; color: var(--text); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-blocca span { font-size: 12px; font-weight: 500; color: var(--text2); }
.blocco-card { border-left-color: var(--text2) !important; background: repeating-linear-gradient(135deg, var(--card), var(--card) 10px, rgba(26,18,8,0.03) 10px, rgba(26,18,8,0.03) 20px) !important; cursor: pointer; }
.blocco-avviso { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent); }
.blocco-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.btn-blocco-x { flex: none; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--text2); }
.blocca-tutto { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.blocca-tutto input { width: 20px; height: 20px; }
.blocca-ore[hidden] { display: none; }
.alert-ok { background: rgba(60,120,70,0.10); border-color: rgba(60,120,70,0.25); color: #2f6b3a; }

/* Agenda: appuntamento toccabile e azioni */
.booking-card-app { cursor: pointer; }
.app-azioni { display: grid; gap: 10px; margin-top: 16px; }
.app-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.app-slot { padding: 10px 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.app-slot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.app-conflitto { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.busy-card { border-left-color: #4285f4 !important; padding: 14px 20px; }
.blocca-google { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(66,133,244,0.08); font-size: 12px; line-height: 1.45; color: var(--text); }

/* Manutenzioni per zona */
.zona-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card, 14px); padding: 14px 16px; margin-bottom: 12px; }
.zona-senza { border-style: dashed; }
.zona-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zona-nome { font-family: var(--font-display, Georgia, serif); font-size: 17px; font-weight: 700; color: var(--text); }
.zona-n { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.zona-sub { font-size: 12px; color: var(--text2); margin: 4px 0 10px; }
.zona-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.zona-data { flex: none; font-size: 13px; font-weight: 700; color: var(--accent); }
.zona-giro { display: block; text-align: center; text-decoration: none; margin-top: 10px; }