/* ============================================
           G-CONNECT — PREMIUM DESIGN SYSTEM
           Apple-Inspired — Light Mode
           ============================================ */

        :root {
          /* Background Layers */
          --bg-body: #F6F5F3;
          /* Off-white in stile macOS */
          --bg-card: rgba(255, 255, 255, 0.98);
          --bg-card-hover: #ffffff;
          --bg-input: rgba(0, 0, 0, 0.04);
          --bg-input-focus: rgba(0, 0, 0, 0.07);

          /* Typography */
          --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

          --text-primary: #1d1d1f;
          /* Ricco quasi-nero Apple */
          --text-secondary: #515154;
          --text-dim: #86868b;
          /* Darker dim */

          /* Accent Colors */
          --accent: #6366f1;
          --accent-glow: rgba(99, 102, 241, 0.25);
          --accent-warm: #f59e0b;

          --blue: #0071e3;
          --green: #28cd41;
          --orange: #ff9f0a;
          --red: #ff3b30;
          --purple: #af52de;

          /* Subject Colors from Mockup */
          --mat: #0071e3;
          /* Blue */
          --fis: #d97706;
          /* Orange/Brownish */
          --ing: #28cd41;
          /* Green */
          --ita: #af52de;
          /* Purple */
          --sto: #b45309;
          /* Dark Orange/Brown */
          --lat: #ff3b30;
          /* Red */
          --sci: #06b6d4;
          /* Cyan */
          --art: #ec4899;
          /* Pink */
          --mot: #14b8a6;
          /* Teal */
          --inf: #6366f1;
          /* Indigo */
          --ita-lett: #af52de;
          --rel: #64748b;
          /* Slate */
          --def: #94a3b8;
          /* Default Slate */

          /* Glass System */
          --card-border: 1px solid rgba(0, 0, 0, 0.06);
          --border-light: #E0DDD8;
          --card-shadow: 0 6px 20px rgba(139, 92, 246, 0.12);
          /* Rich purple tinted shadow for contrast */
          --glass-bg: rgba(255, 255, 255, 0.75);
          --glass-blur: blur(20px);
          --glass-border: 1px solid rgba(0, 0, 0, 0.06);

          /* Radii */
          --radius-xl: 24px;
          --radius-l: 18px;
          --radius-m: 14px;
          --radius-s: 10px;

          /* Layout */
          --top-nav-height: 56px;
          --safe-top: env(safe-area-inset-top, 0px);
          --safe-bottom: env(safe-area-inset-bottom, 0px);
          --mobile-view-inline-padding: 6px;
          --mobile-chat-total-inline-padding: calc(var(--mobile-view-inline-padding) * 2);
          --mobile-dock-offset: 14px;

          /* Contrast System */
          --text-on-light: #141414;
          --text-on-dark: #FFFFFF;
          --text-dim-on-light: #86868B;
          --text-dim-on-dark: rgba(255, 255, 255, 0.45);

          /* Semantic Palette */
          --color-info: #1A6B8A;
          --color-success: #2DB86A;
          --color-warning: #FF9F0A;
          --color-danger: #FF3B30;
          --color-surface-subtle: #F8F7F5;
          --color-surface-strong: #141414;
          --color-border-soft: #ECEAE6;
          --meeting-gradient: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%);
        }

        /* === RESET === */
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }

        * {
          -webkit-tap-highlight-color: transparent;
          margin: 0;
          padding: 0;
        }

        /* DEFAULT */
        html {
          color-scheme: light;
          background: #F6F5F3;
          height: auto;
          min-height: 100%;
        }

        body {
          font-family: var(--font-main);
          background: #F6F5F3;
          color: var(--text-primary);
          height: 100%;
          min-height: 100%;
          overflow-y: visible;
          overflow-x: hidden;
          display: flex;
          flex-direction: column;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        /* Subtle ambient gradient */
        body::before {
          content: '';
          position: fixed;
          inset: 0;
          background:
            radial-gradient(ellipse 80% 50% at 15% 5%, rgba(99, 102, 241, 0.07) 0%, transparent 55%),
            radial-gradient(ellipse 60% 60% at 85% 15%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
            radial-gradient(ellipse 70% 50% at 50% 90%, rgba(59, 130, 246, 0.04) 0%, transparent 45%);
          pointer-events: none;
          z-index: -1;
        }

        /* === FLOATING LIQUID GLASS SCROLLBAR === */
        * {
          scrollbar-width: none !important;
          /* Hide native on Firefox */
        }

        ::-webkit-scrollbar {
          display: none !important;
          /* Hide native on Chrome/Safari */
        }

        #custom-scrollbar {
          position: fixed;
          right: 6px;
          top: 6px;
          bottom: 6px;
          width: 5px;
          z-index: 10000;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.5s ease, transform 0.5s ease;
        }

        #scroll-thumb {
          width: 100%;
          background: rgba(0, 0, 0, 0.12);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border-radius: 10px;
          position: absolute;
          top: 0;
          min-height: 50px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);
        }

        .show-scrollbar {
          opacity: 1 !important;
        }

        /* === APP LAYOUT === */
        #app {
          width: 100%;
          display: flex;
          flex-direction: column;
          min-height: calc(100vh - 64px);
        }

        body.is-ai-mode {
          overflow: hidden !important;
          height: 100svh !important;
        }

        body.is-ai-mode .main-container {
          height: calc(100svh - 64px) !important;
          overflow: hidden !important;
        }

        body.is-ai-mode #app {
          height: 100% !important;
          min-height: unset !important;
          padding: 0 !important;
        }

        /* Nelle view normali, scroll libero sul body */
        body:not(.is-ai-mode) {
          overflow-y: auto !important;
          overflow-x: hidden !important;
        }

        body:not(.is-ai-mode) .main-container {
          overflow: visible !important;
          padding-top: 20px;
        }

        body.logged-out .main-container {
          padding-top: 0 !important;
        }

        body:not(.is-ai-mode) #app {
          overflow: visible !important;
        }

        .view:not(.ai-view) {
          overflow: visible;
          min-height: calc(100vh - 64px);
        }

        /* Bloquea padding globale SOLO per vista AI */
        .view.ai-view {
          padding: 0 !important;
          height: 100% !important;
          max-height: 100% !important;
          margin-top: 0 !important;
          overflow: hidden !important;
          border-radius: 0 !important;
          display: flex;
          flex-direction: column;
          animation: none !important;
          transform: none !important;
          background: var(--bg-body);
        }

        /* Scroll SOLO nei messaggi */
        .ai-chat-scroll-container {
          flex: 1;
          overflow-y: auto;
          padding: 16px 12px 24px 12px;
          /* Padding standard ridotto */
          display: flex;
          flex-direction: column;
          gap: 16px;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
        }

        /* === CARDS & PANELS — Glassmorphic === */
        .card,
        .glass-panel {
          position: relative;
          z-index: 1;
          isolation: isolate;
          background: var(--bg-card);
          backdrop-filter: blur(20px) saturate(140%);
          -webkit-backdrop-filter: blur(20px) saturate(140%);
          border: var(--card-border);
          border-radius: var(--radius-l);
          box-shadow: var(--card-shadow);
          padding: 24px;
          transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
        }

        .card:hover {
          z-index: 1001 !important;
          background: var(--bg-card-hover);
          transform: translateY(-4px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        }

        .glass-panel {
          background: var(--glass-bg);
          backdrop-filter: blur(20px) saturate(140%);
          -webkit-backdrop-filter: blur(20px) saturate(140%);
        }

        /* === TOP NAVIGATION === */
        #top-nav {
          position: fixed;
          top: 14px;
          bottom: auto;
          left: 0;
          width: 100%;
          height: var(--top-nav-height);
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          padding-top: 0;
        }

        .nav-content {
          width: 100%;
          max-width: 100%;
          padding: 0 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .nav-links {
          display: flex;
          gap: 6px;
          background: rgba(255, 255, 255, 0.75);
          padding: 4px;
          border-radius: 40px;
          border: 1px solid rgba(0, 0, 0, 0.06);
          backdrop-filter: blur(24px) saturate(180%);
          -webkit-backdrop-filter: blur(24px) saturate(180%);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }

        .nav-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 18px;
          border-radius: 30px;
          color: var(--text-secondary);
          font-weight: 600;
          font-size: 13px;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          background: transparent;
          border: none;
          letter-spacing: 0.3px;
        }

        .nav-item:hover {
          color: var(--text-primary);
          background: rgba(0, 0, 0, 0.04);
        }

        .nav-item.active {
          color: white;
          background: var(--accent);
          box-shadow: 0 2px 12px var(--accent-glow);
          border: none;
        }

        .nav-item.active {
          color: white;
          background: var(--accent);
          box-shadow: 0 2px 12px var(--accent-glow);
          border: none;
        }

        .nav-item i {
          font-size: 18px;
        }

        .profile-trigger {
          display: flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          padding: 4px 8px;
          border-radius: 30px;
          transition: background 0.2s;
        }

        .profile-trigger:hover {
          background: rgba(0, 0, 0, 0.04);
        }

        .profile-label {
          font-weight: 600;
          font-size: 14px;
          color: var(--text-primary);
          display: none;
        }

        @media (min-width: 600px) {
          .profile-label {
            display: block;
          }
        }

        /* === BUTTONS === */
        .btn-primary {
          background: var(--accent);
          color: white;
          font-weight: 600;
          height: 46px;
          border-radius: var(--radius-m);
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          cursor: pointer;
          padding: 0 20px;
          font-size: 14px;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          box-shadow: 0 4px 12px var(--accent-glow);
        }

        .btn-primary:hover {
          transform: scale(1.03);
          box-shadow: 0 6px 20px var(--accent-glow);
        }

        .btn-secondary {
          background: #334155;
          color: white;
          font-weight: 600;
          height: 46px;
          border-radius: var(--radius-m);
          border: none;
          cursor: pointer;
          padding: 0 20px;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        .btn-secondary:hover {
          background: #475569;
          transform: scale(1.02);
        }

        .btn-danger {
          background: var(--red);
          color: white;
          border: none;
          height: 46px;
          border-radius: var(--radius-m);
          font-weight: 600;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        .btn-danger:hover {
          filter: brightness(1.1);
          transform: scale(1.02);
        }

        /* === HEADER TOOLS (v1.1.32.14 Resized) === */
        .btn-icon-glass {
          width: 44px;
          height: 44px;
          border-radius: 22px;
          background: rgba(0, 0, 0, 0.06);
          border: 1px solid rgba(0, 0, 0, 0.08);
          color: white;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          padding: 0;
          flex-shrink: 0;
        }

        .btn-icon-glass i {
          font-size: 20px;
          /* Scaled icon */
        }

        .btn-icon-glass:hover {
          background: rgba(0, 0, 0, 0.1);
          transform: scale(1.05);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-icon-glass:active {
          transform: scale(0.92);
          transition: transform 0.05s;
        }

        /* Responsive Grid */
        /* === PLANNER DROPDOWN (v1.1.32.12) === */
        .planner-dropdown {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          flex-shrink: 0;
        }

        .planner-dropdown-content {
          display: none;
          position: fixed;
          /* default fixed, overridden by JS anyway */
          background: rgba(255, 255, 255, 0.96);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          border-radius: 20px;
          border: 1px solid rgba(0, 0, 0, 0.08);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
          overflow: hidden;
          animation: fadeInDown 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
          /* NO min-width/max-width here — set by JS based on device */
        }

        .planner-dropdown-content.active {
          display: flex !important;
          flex-direction: column;
        }

        .planner-mobile-actions {
          position: relative;
          width: auto;
          height: auto;
        }

        .planner-mobile-menu-toggle {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          border: 1px solid #D3CEC7;
          background: #FFFFFF;
          color: #141414;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 180ms ease, box-shadow 180ms ease;
          padding: 0;
        }

        .planner-mobile-menu-toggle i {
          font-size: 14px;
          transition: transform 220ms ease;
        }

        .planner-mobile-menu-toggle.active i {
          transform: rotate(180deg);
        }

        .planner-mobile-menu-toggle:active {
          transform: scale(0.96);
        }

        .planner-mobile-dropdown {
          position: absolute;
          top: calc(100% + 4px);
          right: 0;
          left: auto;
          min-width: 204px;
          max-width: min(276px, calc(100vw - var(--planner-mobile-dropdown-viewport-gutter, 24px)));
          border-radius: 16px;
          border: 1px solid rgba(20, 20, 20, 0.12);
          box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
          background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF8 100%);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          overflow: hidden;
          z-index: var(--planner-mobile-dropdown-z-index); /* Keep above planner header controls but below global modals/toasts */
          transform-origin: top right;
          opacity: 0;
          transform: translateY(-6px) scale(0.98);
          pointer-events: none;
          transition: opacity 180ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .planner-mobile-dropdown.active {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
        }

        .planner-mobile-dropdown .pd-item {
          min-height: 42px;
          padding: 11px 14px;
          font-size: 11px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          gap: 9px;
        }

        .planner-mobile-dropdown .pd-item i {
          font-size: 15px;
        }

        .planner-mobile-dropdown .pd-item.danger {
          color: #C62828;
          background: #FFF4F2;
        }

        .planner-mobile-dropdown .pd-item.danger:hover {
          background: #FFE9E6;
        }

        .pd-item {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 16px 22px;
          color: var(--text-primary);
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.15s ease;
          border: none;
          background: transparent;
          width: 100%;
          text-align: left;
          -webkit-tap-highlight-color: transparent;
          white-space: nowrap;
        }

        .pd-item:hover {
          background: rgba(0, 0, 0, 0.06);
        }

        .pd-item:active {
          background: rgba(0, 0, 0, 0.1);
          transform: scale(0.97);
          transition: transform 0.05s;
        }

        .pd-item i {
          font-size: 19px;
          opacity: 0.85;
          flex-shrink: 0;
        }


        @media (max-width: 768px) {
          :root {
            --glass-blur: blur(10px);
            --card-shadow: 0 4px 15px rgba(139, 92, 246, 0.08);
            --planner-mobile-dropdown-z-index: 80;
            --planner-mobile-title-max-width: 42vw;
            --planner-mobile-dropdown-viewport-gutter: 24px;
          }

          html,
          body {
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
          }

          /* Smooth native scrolling */
          #app {
            -webkit-overflow-scrolling: touch;
          }

          .dashboard-grid {
            grid-template-columns: 1fr;
            gap: 16px;
          }

          /* KEEP liquid glass on mobile — just lighter */
          .glass-panel {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
          }

          .view {
            padding: 85px 16px 100px 16px;
          }

          h1 {
            font-size: 26px !important;
          }

          /* HERO RESPONSIVE OVERRIDES */
          .hero-container {
            padding: 32px 20px 28px !important;
            border-radius: 20px !important;
          }

          .hero-title {
            font-size: 26px !important;
          }

          .hero-subtitle {
            font-size: 11px !important;
            margin-bottom: 6px !important;
          }

          .hero-status {
            font-size: 14px !important;
          }

          /* Nav items — proper touch targets without breaking layout */
          .nav-item {
            padding: 10px 12px;
            font-size: 12px;
            gap: 4px;
          }

          .nav-item i {
            font-size: 16px;
          }

          .nav-links {
            gap: 4px;
          }

          /* Primary/secondary action buttons ONLY */
          .btn-primary,
          .btn-secondary {
            min-height: 46px;
          }

          /* Prevent auto-zoom on inputs */
          input,
          select,
          textarea {
            font-size: 16px !important;
          }

          /* Active feedback — "Cliccaccio" robusto */
          .btn-primary:active,
          .btn-secondary:active,
          .nav-item:active,
          .card:active,
          .section-action:active,
          button:active {
            transform: scale(0.92);
            transition: transform 0.05s cubic-bezier(0.2, 0, 0, 1);
          }

          /* Stress wave canvas */
          .metric-card {
            position: relative;
            overflow: hidden;
          }

          #stressWaveCanvas {
            height: 50px !important;
            pointer-events: none;
          }

          /* Rounded glassy navbar on mobile - transparent container, pill has its own blur */
          /* Overriding #top-nav removed to allow bottom dock at L215 */

          /* Fix planner toggle and calendar buttons — NO forced sizes */
          .calendar-nav button {
            width: 36px;
            height: 36px;
            min-height: unset;
            padding: 0;
          }

          /* Section action links */
          .section-action {
            padding: 8px 14px;
            font-size: 12px;
          }



          /* Home hero card animations */
          .home-glass-card {
            backdrop-filter: blur(12px) saturate(150%);
            -webkit-backdrop-filter: blur(12px) saturate(150%);
            background: rgba(26, 26, 30, 0.65);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
          }

          .home-glass-card:active {
            transform: scale(0.98);
          }
        }

        @media (max-width: 480px) {
          .metrics-grid {
            grid-template-columns: 1fr !important;
          }

          .metric-card {
            min-height: 100px;
          }
        }

        /* === HOME COMPONENTS === */
        .metric-card {
          background: var(--bg-card);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          border: var(--card-border);
          border-radius: var(--radius-l);
          padding: 20px;
          position: relative;
          overflow: hidden;
          min-height: 120px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
        }

        .metric-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
        }

        .metric-card .title {
          font-size: 11px;
          font-weight: 600;
          color: var(--text-dim);
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .focus-item {
          background: rgba(0, 0, 0, 0.02);
          border-radius: var(--radius-m);
          padding: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          border: 1px solid rgba(0, 0, 0, 0.04);
          transition: background 0.2s;
        }

        .focus-item:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .circolare-card {
          background: var(--bg-card);
          border: var(--card-border);
          border-radius: var(--radius-m);
          padding: 16px;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .circolare-card:hover {
          border-color: var(--accent);
          transform: scale(1.02);
        }

        .circolari-row {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 16px;
          margin-top: 16px;
        }

        /* Hide scrollbar for horizontal circolari scroll */
        .circolari-scroll::-webkit-scrollbar {
          display: none;
        }

        /* Smooth section transition for planner tabs */
        /* PREMIUM LIQUID TRANSITION (v1.1.33) */

        /* Sintesi AI Formatting */
        .sintesi-content {
          font-size: 15px;
          color: white;
          line-height: 1.6;
          opacity: 1;
          text-align: left;
        }

        .sintesi-content ul,
        .sintesi-content ol {
          padding-left: 20px;
          margin: 10px 0;
          list-style-type: disc;
        }

        .sintesi-content li {
          margin-bottom: 8px;
          padding-left: 5px;
        }

        .sintesi-content li::marker {
          color: var(--accent-warm);
          font-weight: bold;
        }

        .sintesi-content strong {
          color: var(--accent-warm);
          font-weight: 600;
        }

        .sintesi-content p {
          margin-bottom: 6px;
        }

        @media (max-width: 768px) {
          .sintesi-content {
            font-size: 14px;
            line-height: 1.5;
          }

          .sintesi-content ul,
          .sintesi-content ol {
            margin: 6px 0;
            padding-left: 16px;
          }

          .sintesi-content li {
            margin-bottom: 4px;
          }
        }

        /* ===================================================
           AI CHAT — Prose formatting pulita e professionale
           =================================================== */
        /* ============================================
           AI PROSE — ChatGPT-quality formatting
           ============================================ */
        .ai-prose {
          font-size: 15px;
          color: inherit;
          line-height: 1.6;
          text-align: left;
          word-break: break-word;
          overflow-wrap: break-word;
        }

        .ai-prose>*:first-child {
          margin-top: 0;
        }

        .ai-prose>*:last-child {
          margin-bottom: 0;
        }

        .ai-prose p {
          margin: 0 0 16px 0;
        }

        .ai-prose ul,
        .ai-prose ol {
          margin: 8px 0 16px 0;
          padding-left: 18px !important;
          list-style: initial !important;
        }
    
        .ai-prose li {
          margin-bottom: 8px;
          line-height: 1.6;
          color: inherit;
          opacity: 0.95;
          list-style: inherit !important;
        }
    
        .ai-prose li::marker {
          color: #6b7280 !important;
          font-size: 0.95em !important;
        }
    
        .ai-prose ul > li,
        .ai-prose ol > li {
          list-style: inherit !important;
          list-style-type: revert !important;
        }

        .ai-prose strong,
        .ai-prose b {
          font-weight: 700;
          color: inherit;
        }

        .ai-prose em {
          color: inherit;
          opacity: 0.8;
          font-style: italic;
        }

        .ai-prose h1,
        .ai-prose h2,
        .ai-prose h3,
        .ai-prose h4 {
          font-family: 'JetBrains Mono', monospace;
          font-weight: 800;
          color: inherit;
          margin: 24px 0 12px 0;
          line-height: 1.3;
          text-transform: uppercase;
          letter-spacing: -0.02em;
        }

        .ai-prose h1 {
          font-size: 18px;
        }

        .ai-prose h2 {
          font-size: 16px;
        }

        .ai-prose h3 {
          font-size: 14px;
        }

        .ai-prose h2 {
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 0.7px;
          color: var(--accent);
          border-bottom: 1px solid rgba(99, 102, 241, 0.18);
          padding-bottom: 5px;
          margin-top: 22px;
        }

        .ai-prose h3 {
          font-size: 14.5px;
          color: #374151;
          font-weight: 600;
        }

        .ai-prose h4 {
          font-size: 13px;
          color: #6b7280;
          font-weight: 600;
        }

        .ai-prose code {
          background: rgba(17, 24, 39, 0.06);
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 5px;
          padding: 1px 7px;
          font-size: 13px;
          color: #1d4ed8;
          font-family: 'SF Mono', 'Fira Code', monospace;
        }

        .ai-prose pre {
          background: rgba(17, 24, 39, 0.06);
          border-radius: 10px;
          padding: 12px 14px;
          overflow-x: auto;
          margin: 10px 0;
          border: 1px solid rgba(0, 0, 0, 0.08);
        }

        .ai-prose pre code {
          background: none;
          border: none;
          padding: 0;
        }

        .ai-prose blockquote {
          border-left: 3px solid var(--accent);
          padding: 6px 14px;
          margin: 10px 0;
          color: #4b5563;
          font-style: italic;
          background: rgba(99, 102, 241, 0.06);
          border-radius: 0 8px 8px 0;
        }

        .ai-prose hr {
          border: none;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          margin: 16px 0;
        }

        .ai-prose table {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
          margin: 16px 0;
          font-size: 13px;
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: 12px;
          overflow: hidden;
          background: #ffffff;
        }

        .ai-prose th {
          background: rgba(99, 102, 241, 0.08);
          color: #3730a3;
          font-weight: 600;
          padding: 12px 14px;
          text-align: left;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);
          text-transform: uppercase;
          letter-spacing: 0.5px;
          font-size: 11px;
        }

        .ai-prose td {
          padding: 12px 14px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.04);
          color: #111827;
          vertical-align: middle;
          line-height: 1.5;
        }

        /* Voice Input Animations */

        .mic-active {
          animation: micPulse 1.5s infinite;
          background: #ef4444 !important;
          color: white !important;
        }

        .ai-prose tr:last-child td {
          border-bottom: none;
        }

        .ai-prose td:first-child {
          font-weight: 600;
          color: #111827;
          white-space: nowrap;
          width: 100px;
        }

        .ai-prose tr:hover td {
          background: rgba(0, 0, 0, 0.015);
        }

        /* Mobile Responsive Table */
        @media (max-width: 600px) {
          :root {
            --mobile-view-inline-padding: 6px;
            --mobile-chat-total-inline-padding: calc(var(--mobile-view-inline-padding) * 2);
            --mobile-dock-offset: 14px;
          }
          .ai-prose {
            overflow-x: auto;
          }

          .ai-prose table {
            min-width: 450px;
          }
        }

        /* Task card mobile — prevenzione overflow testo */
        .registro-card,
        .studio-entry,
        [data-task-text] {
          word-break: break-word;
          overflow-wrap: break-word;
        }

        [data-task-text] {
          white-space: normal !important;
          overflow: visible !important;
          text-overflow: unset !important;
        }

        @media (max-width: 768px) {
          .ai-prose {
            font-size: 14px;
            line-height: 1.68;
          }

          .ai-prose h2 {
            font-size: 12px;
          }
        }

        .hero-container {
          position: relative;
          padding: 48px 32px 42px;
          border-radius: var(--radius-xl);
          margin-bottom: 24px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
          backdrop-filter: blur(20px) saturate(150%);
          -webkit-backdrop-filter: blur(20px) saturate(150%);
          border: 1px solid rgba(0, 0, 0, 0.08);
          box-shadow: 0 12px 48px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(0, 0, 0, 0.05);
          overflow: hidden;
          text-align: left;
        }

        .hero-title {
          font-size: 32px;
          font-weight: 900;
          letter-spacing: -0.8px;
          margin-bottom: 10px;
          line-height: 1.1;
          color: white;
          position: relative;
          z-index: 1;
        }

        .hero-subtitle {
          font-size: 13px;
          color: var(--accent);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 10px;
        }

        .hero-status {
          color: rgba(255, 255, 255, 0.7);
          font-size: 16px;
          font-weight: 600;
        }

        /* === INPUTS === */
        input,
        select,
        textarea {
          width: 100%;
          height: 48px;
          background: var(--bg-input);
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: var(--radius-m);
          color: var(--text-primary);
          padding: 0 16px;
          font-size: 15px;
          font-family: inherit;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        input:focus {
          border-color: var(--accent);
          background: rgba(99, 102, 241, 0.04);
          outline: none;
        }

        /* === PLANNER COMPONENTS === */
        .subject-badge {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          display: inline-block;
          margin-right: 8px;
        }

        .registro-card {
          background: var(--bg-card);
          border-radius: var(--radius-m);
          border: var(--card-border);
          overflow: hidden;
          margin-bottom: 12px;
          transition: transform 0.2s;
        }

        .registro-card:hover {
          background: var(--bg-card-hover);
        }

        .registro-date-box {
          min-width: 50px;
          text-align: center;
          background: rgba(0, 0, 0, 0.02);
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-right: 1px solid rgba(0, 0, 0, 0.04);
        }

        .studio-entry {
          border-left: 3px solid var(--accent);
          background: rgba(99, 102, 241, 0.05);
          margin-bottom: 12px;
          padding: 16px;
          border-radius: 0 var(--radius-m) var(--radius-m) 0;
          position: relative;
        }

        /* === GRADES COMPONENTS === */
        .subject-summary-card {
          background: var(--bg-card);
          border: var(--card-border);
          border-radius: var(--radius-l);
          padding: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          cursor: pointer;
          border-left: 4px solid var(--accent);
        }

        .grade-subject-widget {
          min-height: 120px;
          height: auto;
          background: var(--bg-card);
          border: 1px solid rgba(0, 0, 0, 0.06);
          box-sizing: border-box;
        }

        .subject-summary-card:hover {
          transform: translateY(-2px);
          background: var(--bg-card-hover);
        }

        .grade-subject-widget:hover {
          border-color: rgba(0, 0, 0, 0.12);
          background: var(--bg-card-hover);
        }

        .grade-badge {
          font-size: 20px;
          font-weight: 600;
          color: var(--text-primary);
        }

        .mini-trend {
          display: flex;
          gap: 4px;
          margin-top: 4px;
        }

        .trend-dot {
          width: 4px;
          height: 4px;
          border-radius: 50%;
        }

        /* === MODALS === */
        .modal-overlay {
          position: fixed;
          inset: 0;
          z-index: 10000;
          background: rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.25s ease;
        }

        .modal-overlay.active {
          opacity: 1;
          pointer-events: auto;
        }

        .modal-content {
          width: calc(100% - 32px);
          max-width: 440px;
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(32px) saturate(180%);
          -webkit-backdrop-filter: blur(32px) saturate(180%);
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: var(--radius-xl);
          padding: 24px;
          max-height: 85vh;
          overflow-y: auto;
          box-shadow: 0 24px 64px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(0, 0, 0, 0.05);
          transform: scale(0.96);
          transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .modal-overlay.active .modal-content {
          transform: scale(1);
        }

        .modal-content.assenze-modal-fixed {
          padding: 0;
          overflow: hidden;
        }

        .modal-content.verifiche-modal-fixed {
          padding: 0;
          overflow: hidden;
        }


        /* === CALENDAR === */
        .custom-calendar {
          background: #FFFFFF;
          border-radius: 18px;
          padding: 18px;
          border: 1px solid rgba(0, 0, 0, 0.04);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        }

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 4px;
          margin-bottom: 20px;
        }

        .calendar-title {
          font-family: 'Inter', system-ui, sans-serif;
          font-size: 14px;
          font-weight: 800;
          color: #141414;
          text-transform: capitalize;
          letter-spacing: -0.02em;
        }

        .calendar-nav {
          display: flex;
          gap: 10px;
        }

        .calendar-nav button {
          width: 32px;
          height: 32px;
          border-radius: 10px;
          border: 1px solid rgba(0, 0, 0, 0.06);
          background: #F6F5F3;
          color: #908C86;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .calendar-nav button:hover {
          background: #141414;
          color: #FFFFFF;
          border-color: #141414;
          transform: scale(1.05);
        }

        .weekday-headers {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 6px;
          margin-bottom: 12px;
        }

        .weekday-header {
          text-align: center;
          padding: 4px 0;
          font-family: 'Inter', system-ui, sans-serif;
          font-size: 11px;
          font-weight: 700;
          text-transform: capitalize;
          letter-spacing: -0.01em;
          color: #C8C5C0;
        }

        .calendar-days {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 6px;
        }

        .calendar-day {
          min-height: 80px;
          padding: 10px;
          background: #FAFAF9;
          border: 1px solid rgba(0, 0, 0, 0.04);
          border-radius: 16px;
          cursor: pointer;
          transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
        }

        .calendar-day:hover {
          background: #FFFFFF;
          border-color: rgba(0, 0, 0, 0.12);
          transform: translateY(-3px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
          z-index: 10;
        }

        .calendar-day.today {
          background: #F0F7FF;
          border: 1px solid rgba(0, 122, 255, 0.3);
        }

        .calendar-day.other-month {
          opacity: 0.2;
        }

        .calendar-day.past {
          opacity: 0.4;
          cursor: default;
        }

        .day-number {
          font-family: 'Inter', system-ui, sans-serif;
          font-size: 13px;
          font-weight: 800;
          color: #141414;
          margin-bottom: 8px;
          letter-spacing: -0.03em;
        }

        .calendar-day.today .day-number {
          color: #007AFF;
        }

        .day-events {
          display: flex;
          flex-direction: column;
          gap: 2px;
          flex: 1;
          overflow: hidden;
        }

        .event-badge {
          font-family: 'JetBrains Mono', monospace;
          font-size: 8px;
          font-weight: 800;
          padding: 3px 6px;
          border-radius: 6px;
          color: white;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1;
        }

        .event-badge.done {
          opacity: 0.35;
          text-decoration: line-through;
          filter: grayscale(0.5);
        }

        .more-events {
          font-size: 9px;
          color: var(--text-dim);
          font-weight: 500;
        }

        /* Calendar FC overrides */
        #calendar {
          min-height: 300px;
          contain: layout style paint;
        }

        .fc-theme-standard td,
        .fc-theme-standard th {
          border: none !important;
        }

        .fc-scrollgrid {
          border: none !important;
        }

        .fc .fc-col-header-cell-cushion {
          padding: 6px 0;
          font-size: 11px;
          text-transform: uppercase;
          color: var(--text-dim);
          font-weight: 600;
        }

        .fc-daygrid-day-frame {
          border-radius: 8px;
          overflow: hidden;
          margin: 1px;
          min-height: 40px !important;
        }

        .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
          background: rgba(10, 132, 255, 0.15);
          border: 1px solid rgba(10, 132, 255, 0.3);
        }

        .fc-toolbar-title {
          font-size: 1.1em !important;
        }

        /* === METRICS GRID === */
        .metrics-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin-bottom: 16px;
          width: 100%;
        }

        .metrics-grid>* {
          min-width: 0;
        }

        .metric-card {
          position: relative;
          border-radius: var(--radius-l);
          padding: 16px;
          overflow: hidden;
          width: 100%;
          min-height: 140px;
          background: var(--bg-glass);
          backdrop-filter: var(--glass-blur);
          -webkit-backdrop-filter: var(--glass-blur);
          border: var(--glass-border);
        }

        .metric-card::before {
          display: none;
        }

        /* Stress card */
        .metric-card.stress {
          background: rgba(255, 255, 255, 0.7);
          border: var(--glass-border);
          padding: 0;
          position: relative;
          overflow: hidden;
          min-height: 140px;
        }

        .metric-card.stress .title {
          position: absolute;
          top: 14px;
          left: 14px;
          color: var(--text-secondary);
          font-weight: 600;
          font-size: 13px;
          z-index: 2;
          pointer-events: none;
        }

        #stressWaveCanvas {
          display: block;
          width: 100%;
          height: 130px;
        }

        .stress-wave {
          width: 100%;
          height: 90px;
          display: block;
          border-radius: var(--radius-s);
          position: relative;
          z-index: 1;
        }

        .stress-level-badge {
          position: absolute;
          right: 12px;
          bottom: 10px;
          font-size: 11px;
          color: var(--text-secondary);
          background: rgba(0, 0, 0, 0.06);
          padding: 3px 8px;
          border-radius: 999px;
          border: 1px solid rgba(0, 0, 0, 0.06);
        }

        /* Media card */
        .metric-card.media {
          background: rgba(255, 255, 255, 0.7);
          border: var(--glass-border);
        }

        .metric-card.media .title {
          color: var(--text-secondary);
          font-weight: 600;
          font-size: 13px;
          margin-bottom: 4px;
          position: relative;
          z-index: 1;
        }

        .media-gauge {
          width: 100%;
          height: 110px;
          display: block;
        }

        .media-value {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: 600;
          color: var(--text-primary);
          transform: translateY(6px);
          pointer-events: none;
        }

        /* Stress selector */
        .stress-level-grid {
          display: flex;
          justify-content: space-between;
          gap: 8px;
        }

        .stress-pill {
          flex: 1;
          aspect-ratio: 1;
          border-radius: var(--radius-m);
          border: 1px solid rgba(0, 0, 0, 0.06);
          background: rgba(0, 0, 0, 0.03);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          color: var(--text-dim);
          font-weight: 600;
          font-size: 16px;
          cursor: pointer;
        }

        .stress-pill.active {
          color: white;
          background: rgba(10, 132, 255, 0.25);
          border-color: rgba(10, 132, 255, 0.4);
        }




        /* === PROFILE === */
        .profile-row {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 8px 0;
          margin-bottom: 8px;
        }

        .profile-avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.06);
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          color: white;
          font-size: 18px;
          border: 1px solid rgba(0, 0, 0, 0.08);
          flex-shrink: 0;
        }

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
          border: 1px solid rgba(0, 0, 0, 0.08);
          background: rgba(0, 0, 0, 0.05);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .avatar-fallback {
          font-weight: 600;
          color: var(--text-primary);
          font-size: 14px;
        }

        /* === SEARCH === */
        .home-hero {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin-bottom: 12px;
        }

        .home-search-center {
          flex: 1;
          display: flex;
          justify-content: center;
        }

        .search-big {
          min-width: 180px;
          padding: 10px 16px;
          border-radius: 999px;
          border: 1px solid rgba(0, 0, 0, 0.06);
          background: rgba(0, 0, 0, 0.03);
          color: var(--text-secondary);
          font-weight: 500;
          font-size: 14px;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        .search-big:active {
          transform: scale(0.97);
        }

        .search-big:focus-within {
          border-color: rgba(0, 0, 0, 0.1);
          background: var(--bg-input-focus);
        }

        .search-filter-pill {
          padding: 6px 14px;
          background: rgba(0, 0, 0, 0.04);
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
          white-space: nowrap;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          color: var(--text-secondary);
        }

        .search-filter-pill.active {
          background: rgba(10, 132, 255, 0.15);
          border-color: rgba(10, 132, 255, 0.25);
          color: var(--blue);
        }

        .tag-cinqueanna {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 4px 10px;
          border-radius: 999px;
          background: rgba(0, 0, 0, 0.04);
          color: var(--text-secondary);
          font-weight: 600;
          font-size: 11px;
          border: 1px solid rgba(0, 0, 0, 0.06);
        }

        /* === CIRCOLARI === */
        .circolari-row {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          padding: 4px 0 12px 0;
          scrollbar-width: none;
        }

        .circolari-row::-webkit-scrollbar {
          display: none;
        }

        .circolare-card {
          min-width: 240px;
          height: 130px;
          background: var(--bg-glass);
          backdrop-filter: var(--glass-blur);
          border: var(--glass-border);
          border-radius: var(--radius-l);
          padding: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        /* === LIST ITEMS === */
        .glass-list-item {
          background: rgba(0, 0, 0, 0.03);
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: var(--radius-m);
          padding: 14px;
          margin-bottom: 8px;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          position: relative;
          overflow: hidden;
        }

        .glass-list-item:active {
          transform: scale(0.985);
        }

        /* === HARDWARE ACCELERATION === */
        .modal-content,
        button {
          will-change: transform;
          transform: translateZ(0);
          backface-visibility: hidden;
        }

        /* === OFFLINE BADGE === */
        .offline-badge {
          position: fixed;
          top: calc(10px + var(--safe-top));
          right: 10px;
          background: rgba(255, 159, 10, 0.1);
          border: 1px solid rgba(255, 159, 10, 0.2);
          color: var(--orange);
          padding: 5px 10px;
          border-radius: 20px;
          font-size: 11px;
          font-weight: 600;
          display: none;
          backdrop-filter: blur(10px);
          z-index: 1000;
        }

        .offline-badge.show {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        /* === FAB === */
        .fab {
          position: fixed;
          bottom: calc(var(--nav-height) + 20px);
          right: 20px;
          width: 48px;
          height: 48px;
          background: rgba(10, 132, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--blue);
          font-size: 22px;
          border: 1px solid rgba(10, 132, 255, 0.2);
          z-index: 100;
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        .fab:hover {
          background: rgba(10, 132, 255, 0.3);
        }

        /* === GRID LAYOUTS === */
        .dashboard-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
        }

        @media (min-width: 600px) {
          .dashboard-grid {
            grid-template-columns: 1fr 1fr;
          }
        }

        /* === CHAT === */
        .chat {
          margin: 0 auto;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
        }

        .chat-input-area {
          padding: 14px;
          background: rgba(0, 0, 0, 0.06);
          border-top: 1px solid rgba(0, 0, 0, 0.05);
          position: sticky;
          bottom: 0;
        }

        .msg {
          display: flex;
          margin: 6px 0;
          width: 100%;
        }

        .msg.left {
          justify-content: flex-start;
        }

        .msg.right {
          justify-content: flex-end;
        }

        .bubble {
          padding: 10px 14px;
          border-radius: 16px;
          background: rgba(0, 0, 0, 0.05);
          max-width: 75%;
          color: var(--text-primary);
          font-size: 15px;
          line-height: 1.4;
          word-wrap: break-word;
        }

        .right .bubble {
          background: rgba(10, 132, 255, 0.2);
          color: white;
        }

        .left .bubble {
          background: rgba(0, 0, 0, 0.05);
          border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .chat-view {
          display: flex;
          flex-direction: column;
          height: 100dvh;
          padding: 0;
        }

        .chat-header {
          padding: 14px 16px;
          padding-top: calc(var(--safe-top) + 10px);
          background: rgba(255, 255, 255, 0.85);
          backdrop-filter: blur(20px);
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          display: flex;
          align-items: center;
          gap: 12px;
          z-index: 100;
        }

        .chat-history {
          flex: 1;
          overflow-y: auto;
          padding: 14px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          scroll-behavior: smooth;
        }

        .message-bubble {
          max-width: 80%;
          padding: 10px 16px;
          border-radius: 18px;
          font-size: 15px;
          line-height: 1.4;
          word-break: break-word;
        }

        .msg-me {
          align-self: flex-end;
          background: rgba(10, 132, 255, 0.2);
          color: white;
          border-bottom-right-radius: 4px;
        }

        .msg-other {
          align-self: flex-start;
          background: rgba(0, 0, 0, 0.05);
          color: var(--text-primary);
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-bottom-left-radius: 4px;
        }

        .msg-status {
          font-size: 10px;
          opacity: 0.5;
          margin-top: 3px;
          text-align: right;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 4px;
        }

        .msg-pending {
          opacity: 0.6;
        }

        .msg-failed {
          background: rgba(255, 69, 58, 0.15) !important;
          border: 1px solid rgba(255, 69, 58, 0.25) !important;
        }


        .msg-appear {
          animation: msg-appear 0.25s ease forwards;
        }

        .chat-input-bar {
          all: unset;
        }

        .chat-input {
          flex: 1;
          min-height: 48px;
          max-height: 120px;
          border-radius: 24px;
          background: rgba(0, 0, 0, 0.06);
          border: 1px solid rgba(0, 0, 0, 0.06);
          padding: 12px 20px;
          color: white;
          font-size: 16px;
          font-family: inherit;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          resize: none;
          line-height: 1.4;
        }

        .chat-input:focus {
          background: rgba(0, 0, 0, 0.08);
          border-color: rgba(0, 0, 0, 0.08);
        }

        .chat-send-btn {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: none;
          background: rgba(10, 132, 255, 0.2);
          color: var(--blue);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.2s ease;
          cursor: pointer;
        }

        .chat-send-btn:active {
          transform: scale(0.9);
        }

        /* Disabilitato regola che nasconde nav per compatibilità AI View */
        /* body.chat-mode #bottom-nav {
            display: none;
        } */

        body.chat-mode #app {
          padding-bottom: 0;
        }

        .boot-card.feed-post,
        .chat-preview,
        .card.feed-post {
          background: transparent !important;
          box-shadow: none !important;
          backdrop-filter: none !important;
          border: none !important;
          border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
          border-radius: 0 !important;
        }

        .chat-preview-container {
          background: transparent !important;
        }

        /* === BADGES === */
        .badge {
          padding: 4px 10px;
          border-radius: 100px;
          font-size: 11px;
          font-weight: 600;
        }

        .badge-primary {
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%);
          color: #fff;
          border: 1px solid rgba(13, 31, 45, 0.16);
        }

        .badge-success {
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%);
          color: #fff;
          border: 1px solid rgba(13, 31, 45, 0.16);
        }

        /* === PROGRESS === */
        .progress-loader {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: rgba(0, 0, 0, 0.04);
          z-index: 1000;
          overflow: hidden;
          display: none;
        }

        .progress-loader.active {
          display: block;
        }

        .progress-bar {
          height: 100%;
          width: 100%;
          background: linear-gradient(90deg, transparent, var(--blue), transparent);
          position: absolute;
          left: -100%;
          animation: progress-anim 0.8s linear infinite;
        }


        .chat-loading-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--bg-body);
          z-index: 200;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 16px;
          transition: opacity 0.3s ease, visibility 0.3s;
        }

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

        .loading-bar-container {
          width: 120px;
          height: 3px;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 2px;
          overflow: hidden;
          position: relative;
        }

        /* === UTILITY OVERRIDES === */
        .text-gradient {
          background: var(--blue);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        /* ============================================================
   G-CONNECT — PATCH v3.0 "Apple Refinement"
   Risolve: colori widget grigi, testo hero invisibile,
   saluto/nome/frase motivazionale, fluidità animazioni, 
   e micro-scatti al caricamento.
   ============================================================ */

        /* ── 1. PERFORMANCE: GPU compositing SOLO su contenitori essenziali (Evita memory crash) ── */
        .hero-container,
        .metric-card,
        .modal-content,
        .modal-overlay,
        .section-animate,
        [class*="slide"] {
          will-change: transform, opacity;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          transform: translateZ(0);
        }

        /* Rimuovi will-change dopo l'animazione (riduce uso memoria) */
        .hero-container.anim-done,
        .metric-card.anim-done {
          will-change: auto;
        }

        /* ── 2. FIX HERO: Smooth Vibrant Purple Gradient ── */
        .hero-container {
          background: linear-gradient(135deg, #af52de 0%, #8b5cf6 50%, #6366f1 100%);
          border: none;
          box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25);
          transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
        }

        .hero-title {
          color: #ffffff !important;
          font-size: 30px;
          font-weight: 900;
          letter-spacing: -0.8px;
          line-height: 1.1;
          margin-bottom: 8px;
          animation: heroTitleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .hero-subtitle {
          color: rgba(255, 255, 255, 0.8) !important;
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1.8px;
          margin-bottom: 8px;
          animation: heroSubIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
        }

        .hero-status {
          color: rgba(255, 255, 255, 0.9) !important;
          font-size: 14px;
          font-weight: 500;
          line-height: 1.5;
          animation: heroStatusIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
        }

        .hero-status button {
          color: #ffffff !important;
          opacity: 1 !important;
          transition: color 0.2s, transform 0.2s;
        }

        .hero-status button:hover {
          color: rgba(255, 255, 255, 0.7) !important;
          transform: rotate(30deg) scale(1.1);
        }


        /* ── 3. FIX WIDGETS: colori vivaci, non grigi ── */



        /* Widget MEDIA VOTI */
        .metric-card[onclick*="voti"],
        .metric-card:last-child {
          background: linear-gradient(145deg,
              rgba(255, 255, 255, 0.95),
              rgba(240, 255, 245, 0.85)) !important;
          border: 1px solid rgba(40, 205, 65, 0.15) !important;
          box-shadow: 0 4px 20px rgba(40, 205, 65, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
        }

        .metric-card .title {
          color: var(--text-dim) !important;
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 1.2px;
        }

        .metric-card [style*="font-size:34px"],
        .metric-card [style*="font-size: 34px"] {
          font-size: 36px !important;
          font-weight: 900 !important;
          letter-spacing: -1px;
          line-height: 1;
        }

        .metric-card {
          transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
          cursor: pointer;
        }

        .metric-card:hover {
          transform: translateY(-4px) scale(1.01) translateZ(0) !important;
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
        }

        .metric-card:active {
          transform: scale(0.97) translateZ(0) !important;
          transition: transform 0.08s !important;
        }

        /* ── 4. PULSANTE PROFILO: mostra saluto + nome ── */
        .profile-trigger {
          display: flex !important;
          align-items: center;
          gap: 8px;
          padding: 6px 14px 6px 8px;
          border-radius: 30px;
          background: rgba(255, 255, 255, 0.7);
          border: 1px solid rgba(0, 0, 0, 0.06);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          cursor: pointer;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
        }

        .profile-trigger:hover {
          background: rgba(255, 255, 255, 0.9);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
          transform: translateY(-1px) translateZ(0);
        }

        .profile-label {
          display: flex !important;
          flex-direction: column;
          gap: 0;
          line-height: 1.2;
        }

        .profile-greeting {
          font-size: 10px;
          font-weight: 600;
          color: var(--text-dim);
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .profile-name {
          font-size: 13px;
          font-weight: 600;
          color: var(--text-primary);
        }

        /* ── 5. SEZIONE-ANIMATE ── */
        .section-animate {
          animation: sectionIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
          transform: translateZ(0);
        }


        /* ── 6. RENDER() FLUIDO ── */
        #app {
          isolation: isolate;
        }

        .view {
          transform: translateZ(0);
          backface-visibility: hidden;
        }


        /* ── 7. CARD hover Apple-style ── */
        .card {
          transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.2s ease !important;
        }

        .card:hover {
          transform: translateY(-3px) translateZ(0) !important;
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09) !important;
        }

        .card:active {
          transform: scale(0.985) translateZ(0) !important;
          transition: transform 0.06s !important;
        }

        /* ── 8. NAV: transizione active ── */
        .nav-item {
          transition: background 0.2s cubic-bezier(0.2, 0, 0, 1),
            color 0.2s cubic-bezier(0.2, 0, 0, 1),
            transform 0.15s cubic-bezier(0.2, 0, 0, 1),
            box-shadow 0.2s ease !important;
          transform: translateZ(0);
        }

        .nav-item:active {
          transform: scale(0.93) translateZ(0) !important;
          transition: transform 0.06s !important;
        }

        /* ── 9. BOTTONE AGGIUNGI COMPITO ── */
        button[onclick*="showQuickAddTaskModal"] {
          background: rgba(255, 255, 255, 0.85) !important;
          border: 1px solid rgba(99, 102, 241, 0.18) !important;
          color: var(--accent) !important;
          border-radius: 20px !important;
          box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08) !important;
          transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
          transform: translateZ(0);
        }

        button[onclick*="showQuickAddTaskModal"]:hover {
          background: white !important;
          box-shadow: 0 6px 24px rgba(99, 102, 241, 0.14) !important;
          transform: translateY(-2px) translateZ(0) !important;
        }

        /* ── 10. MODAL ── */
        .modal-content {
          transform: scale(0.97) translateZ(0);
          transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.22s ease !important;
          border: 1px solid rgba(0, 0, 0, 0.06) !important;
          box-shadow: 0 24px 64px rgba(0, 0, 0, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }

        .modal-overlay.active .modal-content {
          transform: scale(1) translateZ(0);
        }

        /* ── 11. TOAST ── */

        /* ── 12. SCROLL PERFORMANCE ── */
        .circolari-scroll,
        #weekly-agenda-list,
        .ai-chat-scroll-container {
          -webkit-overflow-scrolling: touch;
          scroll-behavior: smooth;
          overscroll-behavior: contain;
          contain: content;
        }

        /* ── 13. FIX GAUGE COLORI ── */
        .metric-card [style*="linear-gradient(90deg, var(--blue)"] {
          box-shadow: 0 0 10px rgba(99, 102, 241, 0.35) !important;
        }


        body {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
          font-feature-settings: "kern" 1;
        }

        .hero-title,
        .hero-subtitle,
        .hero-status,
        .metric-card [style*="font-size:34px"] {
          -webkit-font-smoothing: subpixel-antialiased;
          transform: translateZ(0);
        }

        .circolari-scroll,
        #weekly-agenda-list,
        .ai-chat-scroll-container,
        .chat-history {
          contain: content;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
        }

        #app {
          isolation: isolate;
          transform: translateZ(0);
        }

        .circolari-scroll {
          scroll-snap-type: x mandatory;
        }


        /* ── PHASE 27: EXTREME FLUIDITY ACCELERATION ── */
        .view,
        .card,
        .metric-card,
        .hero-container,
        .nav-item {
          transform: translateZ(0);
          backface-visibility: hidden;
          perspective: 1000px;
        }

        .modal-content {
          transform: translate3d(0, 0, 0);
          will-change: transform, opacity;
        }


        /* ================================================================
   DASHBOARD V6 - Consolidated from dashboard-v6.css
   ================================================================ */


        /* ── TOPBAR V6 ─────────────────────────────────────── */
        .topbar {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          height: 54px;
          background: transparent;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-bottom: none;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 28px;
        }

        .logo {
          font-size: 15px;
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.03em;
          flex: 1;
        }

        .nav-pills {
          display: flex;
          align-items: center;
          background: #EDECEA;
          border-radius: 13px;
          padding: 4px;
          gap: 2px;
        }

        .nav-pill {
          padding: 5px 15px;
          border-radius: 9px;
          font-size: 12px;
          font-weight: 500;
          color: var(--text-dim);
          background: transparent;
          border: none;
          cursor: pointer;
          transition: all 0.15s;
          font-family: var(--font-main);
          white-space: nowrap;
        }

        .nav-pill:hover {
          color: var(--text-secondary);
        }

        .nav-pill.active {
          background: var(--card);
          color: var(--text-primary);
          font-weight: 600;
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
        }

        .topbar-right {
          display: flex;
          align-items: center;
          gap: 9px;
          flex: 1;
          justify-content: flex-end;
        }

        .time-chip {
          background: #EDECEA;
          border-radius: 100px;
          padding: 4px 11px;
          font-size: 10px;
          color: var(--text-dim);
          font-family: 'JetBrains Mono', monospace;
        }

        .user-chip {
          padding: 5px 13px;
          background: var(--card);
          border-radius: 100px;
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
          cursor: pointer;
          font-size: 12px;
          font-weight: 600;
          color: var(--text-primary);
        }

        /* ── DASHBOARD V6 ───────────────────────────────────── */


        /* ── GRIDS ───────────────────────────────────────── */
        .row-3 {
          display: grid;
          grid-template-columns: 1fr 120px 180px;
          gap: 14px;
          margin-bottom: 14px;
        }

        .row-2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }

        /* ── LABELS ──────────────────────────────────────── */
        .slabel {
          font-size: 9px;
          color: var(--text-4);
          letter-spacing: 0.15em;
          text-transform: uppercase;
          font-family: 'JetBrains Mono', monospace;
          margin-bottom: 8px;
          display: block;
        }

        .section-label {
          font-size: 9px;
          color: var(--text-4);
          letter-spacing: 0.15em;
          text-transform: uppercase;
          font-family: 'JetBrains Mono', monospace;
          margin-bottom: 8px;
        }

        /* ── GREETING ────────────────────────────────────── */
        .greeting-card {
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%) !important;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
          border: none !important;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .greeting-period {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.7);
          letter-spacing: 0.08em;
          margin-bottom: 6px;
        }

        .greeting-text {
          font-size: 19px;
          font-weight: 700;
          color: #ffffff;
          letter-spacing: -0.03em;
          line-height: 1.2;
          margin-bottom: 8px;
        }

        .greeting-quote {
          font-size: 11px;
          color: rgba(255, 255, 255, 0.7);
          line-height: 1.5;
          font-style: italic;
        }

        /* ── STREAK ──────────────────────────────────────── */
        .streak-card {
          display: flex;
          flex-direction: column;
        }

        .streak-num {
          font-size: 38px;
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.05em;
          line-height: 1;
        }

        .streak-unit {
          font-size: 10.5px;
          color: var(--text-dim);
          margin-top: 3px;
        }

        .sdots {
          display: flex;
          gap: 4px;
          margin-top: 10px;
        }

        .sdot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #F0EDE8;
        }

        .sdot.on {
          background: #141414;
        }

        .sdot.today {
          background: #2DB86A;
        }

        /* ── VERIFICA ────────────────────────────────────── */
        .verifica-card {
          display: flex;
          flex-direction: column;
        }

        .subj-badge {
          display: inline-flex;
          border-radius: 7px;
          padding: 3px 9px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px;
          font-weight: 500;
          margin-bottom: 7px;
          align-self: flex-start;
        }

        .verifica-title {
          font-size: 12px;
          font-weight: 600;
          color: var(--text-primary);
          line-height: 1.3;
          flex: 1;
        }

        .countdown-row {
          display: flex;
          align-items: baseline;
          gap: 4px;
          margin-top: 8px;
        }

        .countdown-num {
          font-size: 30px;
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.04em;
          line-height: 1;
        }

        .countdown-unit {
          font-size: 11px;
          color: var(--text-dim);
        }

        .mini-bar-wrap {
          height: 3px;
          background: #F0EDE8;
          border-radius: 100px;
          margin-top: 8px;
          overflow: hidden;
        }

        .mini-bar {
          height: 100%;
          border-radius: 100px;
        }

        /* ── BIG STATS ───────────────────────────────────── */
        .bigstat {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .bignum {
          font-size: 42px;
          font-weight: 700;
          letter-spacing: -0.05em;
          line-height: 1;
        }

        .bigstat-sub {
          font-size: 11px;
          margin-top: 5px;
        }

        .bigstat-bar {
          height: 3px;
          border-radius: 100px;
          margin-top: 14px;
          background: #F0EDE8;
          overflow: hidden;
        }

        .bigstat-fill {
          height: 100%;
          border-radius: 100px;
          transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .bs-media .bignum {
          color: #1A5F8A;
        }

        .bs-media .bigstat-sub {
          color: #5A9EC0;
        }

        .bs-media .bigstat-fill {
          background: #3B9DD4;
        }

        .bs-pres .bignum {
          color: #1A6B3A;
        }

        .bs-pres .bigstat-sub {
          color: #4A9C6A;
        }

        .bs-pres .bigstat-fill {
          background: #2DB86A;
        }

        /* ── CIRCOLARE WIDGET ────────────────────────────── */
        .circ-widget {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .circ-date {
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px;
          color: var(--text-4);
          margin-bottom: 6px;
        }

        .circ-title {
          font-size: 14px;
          font-weight: 600;
          color: var(--text-primary);
          line-height: 1.35;
          letter-spacing: -0.01em;
          flex: 1;
        }

        .circ-new {
          display: inline-flex;
          margin-top: 12px;
          background: linear-gradient(135deg, #C4B5FD 0%, #A5B4FC 100%);
          color: #fff;
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          border-radius: 100px;
          padding: 3px 9px;
          letter-spacing: 0.05em;
          align-self: flex-start;
        }

        /* ── GRADE LIST ──────────────────────────────────── */
        .grade-row {
          display: flex;
          align-items: center;
          gap: 9px;
          padding: 6px 0;
          border-bottom: 1px solid #F4F2EE;
        }

        .grade-row:last-child {
          border-bottom: none;
        }

        .g-badge {
          font-family: var(--font-main);
          font-size: 9.5px;
          font-weight: 500;
          border-radius: 6px;
          padding: 3px 6px;
          flex-shrink: 0;
          width: 34px;
          text-align: center;
        }

        .g-bar-wrap {
          flex: 1;
          height: 3px;
          background: #F0EDE8;
          border-radius: 100px;
          overflow: hidden;
        }

        .g-bar {
          height: 100%;
          border-radius: 100px;
        }

        .g-val {
          font-family: var(--font-main);
          font-size: 12.5px;
          font-weight: 500;
          width: 26px;
          text-align: right;
        }

        .gpa-row {
          display: flex;
          align-items: baseline;
          gap: 8px;
          padding-top: 10px;
          margin-top: 2px;
          border-top: 1px solid #F0EDE8;
        }

        .gpa-lbl {
          font-size: 10px;
          color: var(--text-4);
          font-family: var(--font-main);
        }

        .gpa-val {
          font-size: 24px;
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.04em;
        }

        .gpa-delta {
          font-size: 11px;
          color: #2DB86A;
          margin-left: auto;
          font-family: var(--font-main);
          font-weight: 500;
        }

        /* ── TASKS ───────────────────────────────────────── */
        .tasks-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
        }

        .add-btn {
          background: #F0F0F3;
          border: 1.5px solid #E0DDD8;
          border-radius: 8px;
          padding: 0 10px;
          height: 22px;
          font-size: 9.5px;
          font-family: 'JetBrains Mono', monospace;
          font-weight: 800;
          color: #141414;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }

        .add-btn:hover {
          background: #E5E3DF;
          border-color: #CCC9C4;
        }

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

        .task-row {
          display: flex;
          align-items: center;
          gap: 9px;
          padding: 6px 0;
          border-bottom: 1px solid #F4F2EE;
          cursor: pointer;
          user-select: none;
        }

        .task-row:last-child {
          border-bottom: none;
        }

        .chk {
          width: 17px;
          height: 17px;
          border: 1.5px solid #DEDAD4;
          border-radius: 5px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.15s;
          background: var(--card);
          position: relative;
        }

        .chk.done {
          background: #141414;
          border-color: #141414;
        }

        .chk.done::after {
          content: '';
          width: 7px;
          height: 4px;
          border-left: 1.5px solid #fff;
          border-bottom: 1.5px solid #fff;
          transform: rotate(-45deg) translate(0, -1px);
          display: block;
        }

        .task-text {
          font-size: 12.5px;
          color: var(--text-secondary);
          flex: 1;
          line-height: 1.3;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          transition: color 0.15s;
        }

        .task-text.done {
          color: var(--text-dim);
          text-decoration: line-through;
        }

        .task-time {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          color: var(--text-4);
          flex-shrink: 0;
        }

        /* ── EMPTY ───────────────────────────────────────── */
        .empty {
          font-size: 12.5px;
          color: var(--text-dim);
          padding: 16px 0;
          text-align: center;
        }

        /* RESPONSIONE V6 */
        @media (max-width: 960px) {
          .row-3 {
            grid-template-columns: 1fr 1fr;
          }

          .row-3>*:last-child {
            grid-column: 1 / -1;
          }
        }

        @media (max-width: 600px) {

          .row-3,
          .row-2 {
            grid-template-columns: 1fr;
          }

          .dashboard {
            padding: 14px 14px 40px;
          }

          .topbar {
            padding: 0 16px;
            width: 100%;
            border-radius: 0;
            left: 0;
            right: 0;
          }

          .time-chip {
            display: none;
          }
        }


        /* ================================================================
   PATCH FINALE v4.0 - Consolidated from patch-finale.css
   ================================================================ */

        /* ================================================================
   G-CONNECT — PATCH FINALE v4.0
   Sostituisce completamente perf-patch.css.
   Incolla alla FINE di style.css (rimuovi perf-patch.css precedente).
   ================================================================ */

        /* ── 1. TRANSIZIONI SPECIFICHE (no "transition: all") ──────────
   Elimina reflow/repaint inutili — solo compositor properties.
   ─────────────────────────────────────────────────────────────── */
        .nav-item {
          transition:
            background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
            color 180ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 180ms ease !important;
        }

        .btn-primary {
          transition:
            transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease !important;
        }

        .btn-secondary,
        .btn-danger {
          transition:
            background-color 160ms ease,
            transform 160ms ease !important;
        }

        .btn-icon-glass {
          transition:
            background-color 160ms ease,
            transform 140ms ease,
            box-shadow 180ms ease !important;
        }

        .card {
          transition:
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 240ms ease !important;
        }

        .metric-card {
          transition:
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 240ms ease !important;
        }

        .circolare-card,
        .registro-card,
        .subject-summary-card,
        .glass-list-item,
        .focus-item,
        .calendar-day,
        .stress-pill,
        .pd-item {
          transition:
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 180ms ease,
            border-color 180ms ease,
            box-shadow 200ms ease !important;
        }

        /* ── 2. GPU COMPOSITING SELETTIVO ──────────────────────────────
   will-change solo dove serve, NON su *.
   ─────────────────────────────────────────────────────────────── */
        .nav-item,
        .btn-primary,
        .btn-secondary,
        .btn-icon-glass,
        .card,
        .metric-card,
        .modal-content,
        .modal-overlay {
          will-change: transform, opacity;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }

        .anim-done {
          will-change: auto !important;
        }

        /* ── 3. BLUR OTTIMIZZATI ───────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        :root {
          --glass-blur: blur(16px);
        }

        .nav-links {
          background: rgba(255, 255, 255, 0.4) !important;
          backdrop-filter: blur(24px) saturate(180%) !important;
          -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
          border: 1px solid rgba(255, 255, 255, 0.3) !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
        }

        .card,
        .glass-panel {
          backdrop-filter: blur(16px) saturate(140%) !important;
          -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        }

        .metric-card {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

        .modal-overlay {
          backdrop-filter: blur(16px) !important;
          -webkit-backdrop-filter: blur(16px) !important;
        }

        .modal-content {
          backdrop-filter: blur(32px) saturate(180%) !important;
          -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
        }


        /* ── 3B. OMBRE PREMIUM MULTILAYER E BORDI (Apple HIG) ───────────── */
        .card,
        .glass-panel,
        .circolare-card,
        .registro-card,
        .pd-item {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02),
            0 6px 12px rgba(0, 0, 0, 0.03),
            0 14px 24px rgba(0, 0, 0, 0.04) !important;
          border: 1px solid rgba(0, 0, 0, 0.04) !important;
        }

        .modal-content {
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
            0 30px 60px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
          border: 1px solid rgba(0, 0, 0, 0.05) !important;
        }

        /* ── 4. WIDGET METRICHE — COLORI VIVACI ────────────────────────
   ─────────────────────────────────────────────────────────────── */
        .metric-card {
          background: linear-gradient(160deg, #fafafa 0%, #f5f5fa 100%) !important;
          border: 1px solid rgba(99, 102, 241, 0.08) !important;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 6px 20px rgba(99, 102, 241, .06) !important;
        }

        .metric-card.stress,
        .metric-card:has(#stressWaveCanvas) {
          background: linear-gradient(160deg, rgba(250, 250, 255, 1) 0%, rgba(238, 240, 255, .9) 100%) !important;
          border: 1px solid rgba(99, 102, 241, .14) !important;
          box-shadow: 0 2px 8px rgba(99, 102, 241, .07), 0 8px 24px rgba(99, 102, 241, .10) !important;
        }

        .metric-card.media,
        .metric-card:has(#mediaGaugeCanvas) {
          background: linear-gradient(160deg, rgba(250, 255, 251, 1) 0%, rgba(232, 250, 238, .9) 100%) !important;
          border: 1px solid rgba(40, 205, 65, .16) !important;
          box-shadow: 0 2px 8px rgba(40, 205, 65, .07), 0 8px 24px rgba(40, 205, 65, .10) !important;
        }

        .metric-card .title {
          color: var(--text-dim) !important;
          font-size: 10px !important;
          font-weight: 800 !important;
          letter-spacing: 1.4px !important;
        }

        .metric-card:hover {
          transform: translateY(-3px) translateZ(0) !important;
          box-shadow: 0 6px 20px rgba(0, 0, 0, .09), 0 16px 40px rgba(0, 0, 0, .07) !important;
        }

        .metric-card:active {
          transform: scale(0.97) translateZ(0) !important;
          transition: transform 80ms !important;
        }


        /* ── 5. HERO — PREMIUM UNIFIED DESIGN (Cohesive & Airy) ───────────
   Gradiente tenue e trasparenze comuni a Home, Planner e Voti.
   ─────────────────────────────────────────────────────────────── */



        /* Home Hero inherits unified class */
        .hero-container {
          /* Should use class="premium-hero hero-container" in HTML */
          padding: 28px 24px 24px !important;
          border-radius: 24px !important;
          margin-bottom: 24px !important;
        }

        /* For browsers not supporting composes, let's just make it a class in HTML later */

        /* Body: warm lavender tint instead of ice white */
        html,
        body {
          background: #F6F5F3 !important;
        }

        body::before {
          background:
            radial-gradient(ellipse 80% 50% at 15% 5%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
            radial-gradient(ellipse 60% 60% at 85% 15%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse 70% 50% at 50% 90%, rgba(168, 85, 247, 0.05) 0%, transparent 45%) !important;
        }

        /* Testo: scuro su sfondo tenue per leggibilità */
        .hero-title {
          color: var(--text-primary) !important;
          text-shadow: none !important;
          font-weight: 800 !important;
          letter-spacing: -0.5px !important;
          margin-bottom: 4px !important;
        }

        .hero-subtitle {
          color: var(--text-secondary) !important;
          font-weight: 700 !important;
          font-size: 13px !important;
          letter-spacing: normal !important;
          text-transform: none !important;
          opacity: 1 !important;
        }

        .hero-status {
          color: var(--text-secondary) !important;
          font-weight: 500 !important;
        }

        .hero-status button {
          color: var(--accent) !important;
          font-weight: 600 !important;
          border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
          background: none !important;
        }

        .hero-status button:hover {
          color: var(--text-primary) !important;
          border-bottom: 1px solid var(--accent) !important;
        }


        /* ── 6. ANIMAZIONI — Solo GSAP, nessun CSS keyframe di entrance ───
   GSAP in patch-finale.js e coherence-patch.js gestisce tutte le 
   animazioni di entrata. I CSS keyframe precedenti competevano con 
   GSAP causando micro-scatti visibili.
   Manteniamo solo hover/active e il compositing layer.
   ─────────────────────────────────────────────────────────────── */

        /* Compositing layer per il view container (evita reflow GSAP) */
        .view {
          transform: translateZ(0);
        }

        /* Hover su circolari */
        .circolari-scroll>div[onclick] {
          transition:
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease !important;
        }

        .circolari-scroll>div[onclick]:hover {
          transform: translateY(-4px) translateZ(0) !important;
          box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        }

        .circolari-scroll>div[onclick]:active {
          transform: scale(0.97) translateZ(0) !important;
          transition: transform 70ms !important;
        }

        /* Bottone Aggiungi Compito: micro-interazione premium */
        button[onclick*="showQuickAddTaskModal"] {
          transition:
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 200ms ease,
            background-color 200ms ease !important;
        }

        button[onclick*="showQuickAddTaskModal"]:hover {
          transform: translateY(-2px) translateZ(0) !important;
          box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12) !important;
          background: rgba(99, 102, 241, 0.04) !important;
        }

        button[onclick*="showQuickAddTaskModal"]:active {
          transform: scale(0.97) translateZ(0) !important;
          transition: transform 70ms !important;
        }

        /* ── 7. CONTENIMENTO SCROLL ────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        .circolari-scroll,
        #weekly-agenda-list,
        .ai-chat-scroll-container,
        .chat-history {
          contain: content;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
        }

        /* ── 8. PROFILO BUTTON ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        .profile-trigger {
          background: rgba(255, 255, 255, 0.75) !important;
          border: 1px solid rgba(0, 0, 0, 0.07) !important;
          backdrop-filter: blur(14px) !important;
          -webkit-backdrop-filter: blur(14px) !important;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07) !important;
          transition:
            transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 180ms ease !important;
        }

        .profile-trigger:hover {
          transform: translateY(-1px) translateZ(0) !important;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
        }

        .profile-label {
          display: flex !important;
          flex-direction: column;
          line-height: 1.25;
        }

        .profile-greeting {
          font-size: 9px;
          font-weight: 700;
          color: var(--text-dim);
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .profile-name {
          font-size: 13px;
          font-weight: 700;
          color: var(--text-primary);
        }

        /* ── 9. CONTRASTO CARD ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        .pd-item,
        .registro-card {
          background: rgba(255, 255, 255, 0.95) !important;
          border: 1px solid rgba(0, 0, 0, 0.1) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        }

        /* ── 10. REDUCED MOTION ────────────────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        @media (prefers-reduced-motion: reduce) {

          *,
          *::before,
          *::after {
            animation-duration: 1ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 1ms !important;
          }
        }


        /* ================================================================
   NAV TRANSITION - Consolidated from nav-transition.css
   ================================================================ */

        /* ================================================================
   G-CONNECT — NAV TRANSITION CSS
   Aggiungi in fondo a style.css (o come <link> separato dopo patch-finale.css)
   ================================================================ */

        /* ── 1. NAV PILL: transizione active fluida ────────────────────
   L'active pill ora si anima invece di "saltare" istantaneamente.
   ─────────────────────────────────────────────────────────────── */
        .nav-item {
          position: relative;
          transition:
            color 200ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 200ms ease,
            transform 150ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        /* Active state con transizione */
        .nav-item.active {
          transition:
            color 200ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 250ms ease,
            transform 150ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        /* Click feedback */
        .nav-item:active {
          transform: scale(0.91) translateZ(0) !important;
          transition: transform 80ms ease !important;
        }


        /* ── 2. VIEW CONTAINER: compositing layer permanente ───────────
   Forza un compositing layer sul contenitore principale così
   GSAP non triggera reflow quando anima .view.
   ─────────────────────────────────────────────────────────────── */
        #app {
          isolation: isolate;
          transform: translateZ(0);
        }

        .view {
          transform: translateZ(0);
          /* NO animation CSS qui — GSAP la gestisce completamente */
        }


        /* ── 3. PLANNER: hero e sezioni staggered ──────────────────────
   Stato iniziale invisibile: GSAP parte da questi valori.
   Usiamo opacity:0 solo se GSAP è attivo (classe .gsap-ready).
   ─────────────────────────────────────────────────────────────── */

        /* Hero planner e voti: non mettiamo animazione CSS
   perché GSAP la controlla — evita conflitti */

        /* Section header fluido */
        .section-header {
          transition:
            opacity 200ms ease,
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Subject cards: hover premium */
        .subject-summary-card {
          transition:
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease,
            background-color 180ms ease,
            border-left-color 180ms ease !important;
          transform: translateZ(0);
        }

        .subject-summary-card:hover {
          transform: translateX(4px) translateZ(0) !important;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
          background: var(--bg-card-hover) !important;
        }

        .subject-summary-card:active {
          transform: scale(0.98) translateZ(0) !important;
          transition: transform 70ms !important;
        }


        /* ── 4. VOTI: media card e grade badge animati ─────────────────
   ─────────────────────────────────────────────────────────────── */

        /* Media grande card */
        .view .card[style*="linear-gradient(135deg, var(--accent)"] {
          transform: translateZ(0);
          transition: box-shadow 280ms ease !important;
        }

        /* Grade badge: numero voto */
        .grade-badge {
          transition:
            color 200ms ease,
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
          transform: translateZ(0);
          display: inline-block;
        }

        .subject-summary-card:hover .grade-badge {
          transform: scale(1.12) translateZ(0) !important;
        }


        /* ── 5. PLANNER: task items hover ──────────────────────────────
   ─────────────────────────────────────────────────────────────── */
        .registro-card {
          transition:
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 200ms ease,
            background-color 180ms ease !important;
          transform: translateZ(0);
        }

        .registro-card:hover {
          transform: translateX(3px) translateZ(0) !important;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
        }

        .registro-card:active {
          transform: scale(0.98) translateZ(0) !important;
          transition: transform 70ms !important;
        }

        .studio-entry {
          transition:
            transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 200ms ease !important;
          transform: translateZ(0);
        }

        .studio-entry:hover {
          transform: translateX(3px) translateZ(0) !important;
        }


        /* ── 6. CALENDAR: giorni interattivi fluidi ─────────────────────
   ─────────────────────────────────────────────────────────────── */
        .calendar-day {
          transition:
            background-color 150ms ease,
            transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 150ms ease !important;
          transform: translateZ(0);
        }

        .calendar-day:hover:not(.past) {
          transform: scale(1.04) translateZ(0) !important;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
          z-index: 1;
        }

        .calendar-day:active:not(.past) {
          transform: scale(0.96) translateZ(0) !important;
          transition: transform 60ms !important;
        }


        /* ── 7. TAB SWITCHER PLANNER: Registro/Studio pill ─────────────
   ─────────────────────────────────────────────────────────────── */
        /* I bottoni inline nel planner hanno transition:all — override */
        .view button[onclick*="plannerMode"],
        .view button[onclick*="plannerView"] {
          transition:
            background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
            color 200ms ease,
            box-shadow 200ms ease,
            transform 150ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        .view button[onclick*="plannerMode"]:active,
        .view button[onclick*="plannerView"]:active {
          transform: scale(0.95) translateZ(0) !important;
          transition: transform 70ms !important;
        }


        /* ── 8. SCROLL: nessun flash durante navigazione ───────────────
   ─────────────────────────────────────────────────────────────── */
        html {
          /* Disabilita smooth scroll globale — lo gestiamo noi per vista */
          scroll-behavior: auto;
        }

        /* Solo dentro le aree scrollabili specifiche */
        .ai-chat-scroll-container,
        .circolari-scroll,
        #weekly-agenda-list {
          scroll-behavior: smooth;
        }

        /* ================================================================
   G-CONNECT — DASHBOARD PATCH v6
   Aggiungere IN FONDO a style.css
   ================================================================ */

        /* ── 1. TOKEN COLORE MATERIA (sistema a triplet) ─────────────── */
        :root {
          /* Ogni materia: sfondo tenue · testo scuro · barra vivace */
          --mat: #E8F4FD;
          --mat-t: #1A5F8A;
          --mat-dot: #3B9DD4;
          --fis: #FDF0E8;
          --fis-t: #8A4A1A;
          --fis-dot: #D4843B;
          --ing: #E8FDF2;
          --ing-t: #1A6B3A;
          --ing-dot: #2DB86A;
          --ita: #F5E8FD;
          --ita-t: #5A1A8A;
          --ita-dot: #9B4DD4;
          --sto: #FDF5E8;
          --sto-t: #7A5010;
          --sto-dot: #C8921E;
          --lat: #FDE8E8;
          --lat-t: #8A1A1A;
          --lat-dot: #D44B4B;
          --sci: #EAFDF5;
          --sci-t: #0F5E40;
          --sci-dot: #1DB87A;
          --fil: #F0EEF8;
          --fil-t: #3A3070;
          --fil-dot: #7060C8;
          --dev: #E8EEF7;
          --dev-t: #2A3F6A;
          --dev-dot: #5070B8;
          --geo: #FDF5E8;
          --geo-t: #7A5010;
          --geo-dot: #C8921E;
          --rel: #FDE8F5;
          --rel-t: #7A1050;
          --rel-dot: #C82090;
          --art: #FFF0E8;
          --art-t: #8A3010;
          --art-dot: #E06020;
          --edf: #F0FDE8;
          --edf-t: #2A6010;
          --edf-dot: #50B020;
          --inf: #E8EFF8;
          --inf-t: #1A3A7A;
          --inf-dot: #3060D0;
          --chi: #F8F0FD;
          --chi-t: #5A1A7A;
          --chi-dot: #9040C8;
          --grc: #FDF0F8;
          --grc-t: #7A1060;
          --grc-dot: #C82090;
          --scm: #F0FDE8;
          --scm-t: #1A6010;
          --scm-dot: #38A020;
          --bio: #E8FDF4;
          --bio-t: #0F5E3A;
          --bio-dot: #1DB870;
          --dis: #FFF0F8;
          --dis-t: #7A0060;
          --dis-dot: #D020A0;
          --dir: #F0F4FD;
          --dir-t: #1A3A7A;
          --dir-dot: #2A5CC8;
          --eco: #FDF8E8;
          --eco-t: #7A5010;
          --eco-dot: #C89020;
          --fra: #E8F0FD;
          --fra-t: #1A3570;
          --fra-dot: #3055C0;
          --ted: #FDE8F0;
          --ted-t: #7A1040;
          --ted-dot: #C82060;
          --spa: #FDE8E8;
          --spa-t: #7A1010;
          --spa-dot: #C83030;
          --civ: #F0FDFD;
          --civ-t: #0F5A5A;
          --civ-dot: #1AABAB;
          --lat: #FDE8E8;
          --lat-t: #8A1A1A;
          --lat-dot: #D44B4B;

          /* Background corpo dashboard */
          --bg-dashboard: #F6F5F3;
          --border-light: #ECEAE6;
        }

        /* ── 2. LAYOUT DASHBOARD ─────────────────────────────────────── */
        .dashboard.view {
          background: var(--bg-dashboard) !important;
          width: 100% !important;
          min-height: 100vh !important;
        }

        /* ── 3. TOPBAR ───────────────────────────────────────────────── */
        .topbar {
          background: var(--bg-body) !important;
          border-bottom: 1px solid var(--border-light) !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          height: 56px !important;
          padding: 0 32px !important;
        }

        .nav-pills {
          background: #EDECEA !important;
          border-radius: 13px !important;
          padding: 4px !important;
          gap: 2px !important;
          border: none !important;
          box-shadow: none !important;
        }

        .nav-pill {
          border-radius: 9px !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          padding: 5px 15px !important;
          border: none !important;
          box-shadow: none !important;
        }

        .nav-pill.active {
          background: #ffffff !important;
          color: #141414 !important;
          font-weight: 600 !important;
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08) !important;
        }

        /* ── 4. CARD BASE ────────────────────────────────────────────── */
        .card {
          background: #ffffff !important;
          border-radius: 18px !important;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
          border: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

        /* ── 5. GREETING CARD ────────────────────────────────────────── */
        .greeting-card {
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%) !important;
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
          border: none !important;
        }

        .greeting-period {
          color: rgba(255, 255, 255, 0.7) !important;
          font-size: 10px !important;
          font-weight: 700 !important;
          letter-spacing: 0.05em !important;
          text-transform: uppercase !important;
          font-family: 'JetBrains Mono', monospace !important;
        }

        .greeting-text {
          font-size: 19px !important;
          font-weight: 700 !important;
          color: #ffffff !important;
          letter-spacing: -0.03em !important;
        }

        .greeting-quote {
          font-size: 13px !important;
          color: rgba(255, 255, 255, 0.7) !important;
          font-style: italic !important;
        }

        /* ── 6. SECTION LABELS ───────────────────────────────────────── */
        .slabel,
        .section-label {
          font-size: 9.5px !important;
          color: #BCB8B2 !important;
          letter-spacing: 0.15em !important;
          text-transform: uppercase !important;
          font-family: 'JetBrains Mono', monospace !important;
          font-weight: 500 !important;
        }

        /* ── 7. BIG STAT NUMBERS ─────────────────────────────────────── */
        .bignum {
          font-family: 'Inter', -apple-system, sans-serif !important;
          letter-spacing: -0.05em !important;
        }

        /* ── 8. GRADE BADGE (colori materia) ─────────────────────────── */
        .g-badge {
          font-family: var(--font-main) !important;
          font-size: 9.5px !important;
          font-weight: 500 !important;
          border-radius: 6px !important;
          padding: 3px 6px !important;
          width: 34px !important;
          text-align: center !important;
          flex-shrink: 0 !important;
        }

        .g-bar-wrap {
          flex: 1 !important;
          height: 3px !important;
          background: #F0EDE8 !important;
          border-radius: 100px !important;
          overflow: hidden !important;
        }

        .g-bar {
          height: 100% !important;
          border-radius: 100px !important;
        }

        .g-val {
          font-family: var(--font-main) !important;
          font-size: 12.5px !important;
          font-weight: 500 !important;
          width: 26px !important;
          text-align: right !important;
        }

        /* ── 9. TASK BADGE ───────────────────────────────────────────── */
        .task-badge,
        [class*="task-badge"] {
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 9px !important;
          font-weight: 500 !important;
          border-radius: 5px !important;
          padding: 2px 6px !important;
          flex-shrink: 0 !important;
        }

        /* ── 10. GPA ROW ─────────────────────────────────────────────── */
        .gpa-row {
          border-top: 1px solid #F0EDE8 !important;
          padding-top: 10px !important;
          margin-top: 4px !important;
        }

        .gpa-lbl {
          font-family: var(--font-main) !important;
          font-size: 10px !important;
          color: #BCB8B2 !important;
        }

        .gpa-val {
          font-size: 24px !important;
          font-weight: 700 !important;
          letter-spacing: -0.04em !important;
          color: #141414 !important;
        }

        .gpa-delta {
          font-family: var(--font-main) !important;
          font-size: 11px !important;
          font-weight: 500 !important;
          color: #2DB86A !important;
        }

        /* ── 11. ADD BUTTON ──────────────────────────────────────────── */
        .add-btn {
          background: #F0F0F3 !important;
          border: 1.5px solid #E0DDD8 !important;
          border-radius: 8px !important;
          padding: 0 10px !important;
          height: 22px !important;
          font-size: 9.5px !important;
          font-family: 'JetBrains Mono', monospace !important;
          font-weight: 800 !important;
          color: #141414 !important;
          cursor: pointer !important;
          display: inline-flex !important;
          align-items: center !important;
          letter-spacing: 0.05em !important;
          text-transform: uppercase !important;
          transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
        }

        .add-btn:hover {
          background: #E5E3DF !important;
          border-color: #CCC9C4 !important;
          opacity: 1 !important;
        }

        .add-btn:active {
          transform: scale(0.95) !important;
        }

        /* ── 12. STREAK DOTS ─────────────────────────────────────────── */
        .sdot {
          width: 8px !important;
          height: 8px !important;
          border-radius: 50% !important;
          background: #F0EDE8 !important;
        }

        .sdot.on {
          background: #141414 !important;
        }

        .sdot.today {
          background: #2DB86A !important;
        }

        /* ── 13. CIRCOLARE WIDGET ────────────────────────────────────── */
        .circ-widget {
          display: flex !important;
          flex-direction: column !important;
          justify-content: space-between !important;
        }

        .circ-date {
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 11px !important;
          color: #BCB8B2 !important;
        }

        .circ-title {
          font-size: 14px !important;
          font-weight: 600 !important;
          color: #141414 !important;
          line-height: 1.35 !important;
        }

        .circ-new {
          background: linear-gradient(135deg, #C4B5FD 0%, #A5B4FC 100%) !important;
          color: #ffffff !important;
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 9px !important;
          border-radius: 100px !important;
          padding: 3px 9px !important;
          letter-spacing: 0.05em !important;
        }

        /* ================================================================
   FULLSCREEN FIX — aggiunto in fondo, sovrascrive tutto
   ================================================================ */

        /* ── GAP DEFINITIVO SOTTO TOPBAR ─────────────────────────── */
        #app .view {
          padding-left: 28px !important;
          padding-right: 28px !important;
          padding-bottom: 32px !important;
          min-height: unset !important;
          max-width: 100% !important;
          background: #F6F5F3 !important;
        }

        @media (max-width: 768px) {
          #app .view {
            padding-left: 10px !important;
            padding-right: 10px !important;
            padding-bottom: 20px !important;
          }
        }

        /* ── LOGIN VIEW: restore full-height centering ── */
        #app .login-view {
          min-height: 100svh !important;
          padding-left: 24px !important;
          padding-right: 24px !important;
          padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
        }

        body::before {
          display: none !important;
        }

        /* ── OBIETTIVO CARD: testo scuro su sfondo bianco ── */
        .card[onclick*="promptSetGoal"] {
          background: white !important;
          color: #141414 !important;
        }

        .card[onclick*="promptSetGoal"] * {
          color: #141414 !important;
        }

        .card[onclick*="promptSetGoal"] [style*="rgba(255,255,255,0.35)"],
        .card[onclick*="promptSetGoal"] [style*="rgba(255,255,255,0.45)"],
        .card[onclick*="promptSetGoal"] [style*="rgba(255,255,255,0.5)"],
        .card[onclick*="promptSetGoal"] [style*="rgba(255,255,255,0.4)"] {
          color: #908C86 !important;
        }

        .card[onclick*="promptSetGoal"] [style*="background:rgba(255,255,255,0.06)"],
        .card[onclick*="promptSetGoal"] [style*="background: rgba(255,255,255,0.06)"] {
          background: rgba(0, 0, 0, 0.04) !important;
        }

        .card[onclick*="promptSetGoal"] [style*="background:rgba(255,255,255,0.07)"],
        .card[onclick*="promptSetGoal"] [style*="background: rgba(255,255,255,0.07)"] {
          background: rgba(0, 0, 0, 0.05) !important;
        }

        .ai-input-shell {
          width: 100%;
          display: grid;
          place-items: center;
        }

        .ai-input-dock {
          width: min(760px, calc(100vw - 48px));
          margin: 0 auto;
          display: flex;
          gap: 8px;
          background: #F6F5F3;
          border: 1px solid #E0DDD8;
          border-radius: 999px;
          padding: 6px 8px;
          box-sizing: border-box;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        }

        .ai-chat-input-wrap {
          padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) 16px !important;
          margin-bottom: 0px !important;
          background: transparent !important;
          border-top: none !important;
          backdrop-filter: blur(2px);
        }

        .ai-input-dock {
          width: min(760px, calc(100vw - 32px));
          margin: 0 auto;
          display: flex;
          gap: 8px;
          background: #F6F5F3;
          border: 1px solid #E5E2DD;
          border-radius: 999px;
          padding: 6px 8px 6px 16px;
          box-sizing: border-box;
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        }

        .ai-chat-input-field {
          min-height: 38px;
          line-height: 1.4;
          padding: 0 4px !important;
          color: #141414 !important;
          -webkit-text-fill-color: #141414 !important;
          opacity: 1 !important;
          font-size: 15px !important;
        }

        .ai-chat-send-btn {
          width: 34px !important;
          height: 34px !important;
          border-radius: 50%;
        }

        #weekly-agenda-list .agenda-task-card {
          overflow: visible !important;
        }

        #weekly-agenda-list .agenda-task-main {
          min-width: 0;
        }

        #weekly-agenda-list [data-task-text] {
          white-space: normal !important;
          overflow: visible !important;
          text-overflow: clip !important;
          word-break: break-word !important;
          overflow-wrap: anywhere !important;
          display: block !important;
          max-width: 100%;
        }

        /* Modal circolare desktop-oriented */
        /* Modal circolare — Layout Ingegneristico v2 */
        .modal-content.circolare-modal {
          max-width: min(1000px, calc(100vw - 32px)) !important;
          width: min(1000px, calc(100vw - 32px)) !important;
          padding: 0 !important;
          border-radius: 20px !important;
          background: #FFFFFF !important;
          border: 1px solid #141414 !important;
          overflow: hidden !important;
          box-shadow: 0 30px 90px rgba(0,0,0,0.2) !important;
        }

        /* CIRCOLARE MODAL STANDARDIZED */
        .modal-content.circolare-modal {
          width: 900px !important;
          max-width: 95vw !important;
          height: 600px !important;
          max-height: 90vh !important;
          padding: 0 !important;
          overflow: hidden !important;
          display: flex;
          flex-direction: column;
        }

        .circolare-layout {
          display: grid;
          grid-template-columns: 320px 1fr;
          height: 100%;
          width: 100%;
        }

        .circolare-side {
          background: #F6F5F3;
          border-right: 1px solid #E0DDD8;
          padding: 32px 28px;
          display: flex;
          flex-direction: column;
          gap: 24px;
          overflow-y: auto;
        }

        .circolare-main {
          background: #FFFFFF;
          padding: 32px 36px;
          overflow-y: auto;
          height: 100%;
          position: relative;
        }

        /* Progress Bar Sintesi Professional */
        .sintesi-progress-container {
          margin-top: 24px;
          padding: 20px;
          background: #F6F5F3;
          border: 1px dashed #DEDAD4;
          border-radius: 14px;
        }

        .sintesi-progress-label {
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 10px !important;
          font-weight: 800 !important;
          color: #908C86 !important;
          text-transform: uppercase !important;
          letter-spacing: 0.1em !important;
          margin-bottom: 12px;
          display: block;
          text-align: center;
        }

        .sintesi-progress-bg {
          width: 100%;
          height: 4px;
          background: #E0DDD8;
          border-radius: 100px;
          overflow: hidden;
        }

        .sintesi-progress-fill {
          height: 100%;
          background: #141414;
          border-radius: 100px;
          transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Sintesi AI Typography Refinement */
        .circolare-main .ai-prose h1, .circolare-main .ai-prose h2, .circolare-main .ai-prose h3 {
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 11px !important;
          font-weight: 800 !important;
          text-transform: uppercase !important;
          letter-spacing: 0.12em !important;
          color: #141414 !important;
          margin-top: 32px !important;
          margin-bottom: 16px !important;
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .circolare-main .ai-prose h1::after, .circolare-main .ai-prose h2::after, .circolare-main .ai-prose h3::after {
          content: "";
          flex: 1;
          height: 1px;
          background: #F0EDE8;
        }

        .circolare-main .ai-prose p {
          font-size: 15px !important;
          line-height: 1.7 !important;
          color: #141414 !important;
          margin-bottom: 20px !important;
        }

        .circolare-main .ai-prose ul {
          list-style: none !important;
          list-style-type: none !important;
          padding: 0 !important;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 24px !important;
        }

        .circolare-main .ai-prose li {
          list-style: none !important;
          list-style-type: none !important;
          background: #F6F5F3;
          border: 1px solid #ECEAE6;
          padding: 14px 18px;
          border-radius: 12px;
          font-size: 14px;
          color: #141414;
          position: relative;
        }
        
        .circolare-main .ai-prose li::marker {
          display: none !important;
          content: "" !important;
          font-size: 0 !important;
          color: transparent !important;
        }

        /* Utility Buttons Engineering */
        .btn-engineering {
          background: #141414 !important;
          color: #FFFFFF !important;
          border: none !important;
          font-family: 'JetBrains Mono', monospace !important;
          font-size: 11px !important;
          font-weight: 800 !important;
          text-transform: uppercase !important;
          letter-spacing: 0.05em !important;
          border-radius: 12px !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        }

        .btn-engineering:hover {
          background: #333333 !important;
          transform: translateY(-1px) !important;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        }

        .btn-engineering:active {
          transform: scale(0.97) !important;
        }

        @media (max-width: 850px) {
          .modal-content.circolare-modal {
            width: calc(100vw - 24px) !important;
            max-width: calc(100vw - 24px) !important;
            height: calc(100vh - 40px) !important; 
            max-height: calc(100vh - 40px) !important;
          }

          .circolare-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            overflow: hidden;
          }
          
          .circolare-side {
            padding: 24px;
            border-right: none;
            border-bottom: 1px solid #E0DDD8;
            flex-shrink: 0;
            overflow-y: visible;
          }
          
          .circolare-main {
            padding: 24px 20px;
          }
        }

        /* === AGENDA SEARCH & FILTERS === */
        .agenda-search-container {
          margin-bottom: 24px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          animation: fadeIn 0.4s ease-out;
        }

        .search-input-wrapper {
          position: relative;
          display: flex;
          align-items: center;
        }

        .search-input-wrapper i {
          position: absolute;
          left: 16px;
          color: #908C86;
          font-size: 18px;
          pointer-events: none;
          z-index: 2;
        }

        .agenda-search-input {
          width: 100%;
          height: 52px;
          background: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 14px;
          padding: 0 16px 0 48px;
          font-family: 'Inter', sans-serif;
          font-size: 15px;
          font-weight: 500;
          color: #141414 !important;
          outline: none;
          transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
        }

        .agenda-search-input:focus {
          background: #FFFFFF !important;
          border-color: rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
          transform: translateY(-1px);
        }

        .agenda-search-input::placeholder {
          color: #C8C5C0;
        }

        .agenda-filters-scroll {
          display: flex;
          gap: 8px;
          overflow-x: auto;
          padding: 4px 2px 12px 2px;
          margin: -4px -2px 0 -2px;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .agenda-filters-scroll::-webkit-scrollbar {
          display: none;
        }

        .filter-chip {
          white-space: nowrap;
          padding: 8px 16px;
          background: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.04);
          border-radius: 10px;
          font-family: 'Inter', sans-serif;
          font-size: 13px;
          font-weight: 700;
          color: #908C86;
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .filter-chip i {
          font-size: 14px;
          opacity: 0.8;
        }

        .filter-chip:hover {
          background: #F6F5F3;
          border-color: rgba(0, 0, 0, 0.1);
          transform: translateY(-1px);
        }

        .filter-chip.active {
          background: #141414;
          color: #FFFFFF;
          border-color: #141414;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .filter-chip.active i {
          color: #6366f1;
        }
        /* ================================================================
           MOBILE INTERFACE — Second UI for phone screens only (≤ 600 px)
           Desktop and tablet layout (> 600 px) is completely untouched.
           ================================================================ */

        /* ── Mobile Top Dock ────────────────────────────────────────────
           Always hidden on desktop. Shown only in the phone @media block.
           Sits inside the topbar, styled like the desktop nav-pills.
           ────────────────────────────────────────────────────────────── */
        .mobile-dock {
          display: none;
          background: rgba(0, 0, 0, 0.05);
          padding: 4px;
          border-radius: 16px;
          align-items: center;
          gap: 4px;
        }

        .dock-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 0;
          padding: 8px 14px;
          background: transparent;
          border: none;
          border-radius: 12px;
          cursor: pointer;
          color: var(--text-dim, #86868b);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0;
          white-space: nowrap;
          -webkit-tap-highlight-color: transparent;
          transition: all 0.2s;
          -webkit-user-select: none;
          user-select: none;
        }

        .dock-item i {
          display: none;
          font-size: 15px;
          transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
        }

        .dock-item span {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0;
        }

        .dock-item:active {
          transform: scale(0.92);
          transition: transform 0.05s;
        }

        .dock-item.dock-active {
          background: white;
          color: #141414;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .dock-item.dock-active i {
          transform: scale(1.05);
        }

         /* ── Phone overrides (@media ≤ 600 px) ─────────────────────────
           Only rules that differ from the desktop layout.
           ────────────────────────────────────────────────────────────── */
        @media (max-width: 600px) {
          body.is-ai-mode .mobile-dock {
            display: none !important;
          }

          /* Hide the topbar too so the AI chat truly fills the screen */
          body.is-ai-mode .topbar {
            display: none !important;
          }

          /* Main container fills the entire viewport in AI mode */
          body.is-ai-mode .main-container {
            height: 100svh !important;
            padding-top: 0 !important;
          }

          body.is-ai-mode #app {
            height: 100svh !important;
          }

          /* 1 ▸ Keep only the mobile dock fixed while scrolling */
          .mobile-dock {
            display: flex !important;
            position: fixed !important;
            top: calc(var(--safe-top) + var(--mobile-dock-offset)) !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 1200 !important;
            background: rgba(246, 245, 243, 0.9) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid rgba(20, 20, 20, 0.08) !important;
            box-shadow: 0 10px 24px rgba(13, 31, 45, 0.12) !important;
            padding: 6px !important;
            border-radius: 18px !important;
          }

          /* 2 ▸ Hide desktop topbar chrome on mobile */
          .topbar {
            height: 0 !important;
            min-height: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            overflow: visible !important;
          }

          .topbar > .logo,
          .topbar > .topbar-right {
            display: none !important;
          }

          /* 3 ▸ Hide topbar navigation pills — dock takes over */
          .nav-pills {
            display: none !important;
          }

          #topbar-clock {
            font-size: 11px !important;
          }

          .main-container {
            padding-top: calc(var(--safe-top) + 68px) !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-bottom: 0 !important;
          }

          #app .view {
            padding-left: var(--mobile-view-inline-padding) !important;
            padding-right: var(--mobile-view-inline-padding) !important;
            padding-bottom: 16px !important;
            font-size: 15px !important;
          }

          /* ── LOGIN VIEW: override mobile #app .view (same specificity, must come after) ── */
          #app .login-view {
            min-height: 100svh !important;
            min-height: 100dvh !important;
            padding-left: 24px !important;
            padding-right: 24px !important;
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
          }

          body.logged-out .main-container {
            padding-top: 0 !important;
            min-height: 0 !important;
          }

          .dashboard.view,
          .dashboard.view .planner-content,
          .view[style*="max-width: 1180px"] {
            width: 100% !important;
            max-width: 100% !important;
          }

          .dashboard.view .planner-content {
            padding-left: var(--mobile-view-inline-padding) !important;
            padding-right: var(--mobile-view-inline-padding) !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
          }

          /* 5 ▸ Home dashboard — collapse all grid rows to single column by default */
          .home-grid-row {
            grid-template-columns: 1fr !important;
            gap: 8px !important;
          }

          /* ROW 2 (stat cards: media, assenze, circolare) — keep 2-col so numbers are visible */
          .home-grid-row:nth-child(2) {
            grid-template-columns: 1fr 1fr !important;
          }

          /* Force the Ultima Circolare card to span the full width in ROW 2 */
          .home-grid-row:nth-child(2) > .circ-widget {
            grid-column: 1 / -1;
          }

          /* 6 ▸ Planner / Grades / Circolari — slim content padding */
          .planner-content {
            padding: 10px 4px !important;
          }

          /* 7 ▸ Planner header — wrap title + action buttons vertically */
          .planner-view-header {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            margin-bottom: 14px !important;
            padding-bottom: 12px !important;
          }

          .planner-view-header h1 {
            font-size: 14px !important;
            line-height: 1.1 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: var(--planner-mobile-title-max-width); /* Prevent title overlap with compact controls on very small phones */
            margin-right: 6px;
          }

          .planner-header-controls {
            flex-wrap: wrap !important;
            gap: 6px !important;
            width: 100% !important;
            min-width: 0;
            flex: 0 1 auto;
            justify-content: center;
            overflow: visible;
            scrollbar-width: none;
          }

          .planner-header-controls::-webkit-scrollbar {
            display: none;
          }

          .planner-header-primary-actions {
            gap: 6px !important;
            flex-shrink: 0;
            justify-content: center;
          }

          /* Planner action buttons — smaller on mobile */
          .planner-view-header button {
            height: 32px !important;
            font-size: 10px !important;
            padding: 0 8px !important;
            flex-shrink: 0;
          }

          /* View switch buttons — compact */
          .planner-view-header .view-switch {
            padding: 3px !important;
            flex-shrink: 0;
          }

          .planner-view-header .switch-btn {
            padding: 5px 8px !important;
            font-size: 10px !important;
          }

          .planner-header-add-btn {
            padding: 0 8px !important;
            min-width: auto !important;
          }

          /* 8 ▸ Subject detail grid (Voti view) — force 1 column */
          .planner-content > div[style*="auto-fill"],
          .planner-content > div[style*="auto-fit"] {
            grid-template-columns: 1fr !important;
          }

          /* 9 ▸ Profile card grid — single column */
          .view > div[style*="auto-fit"] {
            grid-template-columns: 1fr !important;
          }

          /* 10 ▸ Prevent any card from overflowing horizontally */
          .card:not(.agenda-task-card) {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
          }

          /* 11 ▸ Keep verifica card at a natural height on mobile */
          #widget-verifiche {
            height: auto !important;
          }

          /* 12 ▸ Modal full-screen on phones */
          .modal-content {
            width: calc(100vw - 16px) !important;
            max-width: calc(100vw - 16px) !important;
            margin: 8px !important;
            border-radius: 20px !important;
          }

          .modal-overlay {
            align-items: center !important;
            justify-content: center !important;
          }

          .modal-content.assenze-modal-fixed {
            max-height: 82svh !important;
          }

          .modal-content.verifiche-modal-fixed {
            max-height: 82svh !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-shell {
            max-height: 82svh !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-header {
            padding: 14px 16px 10px !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-summary {
            padding: 10px 16px 0 !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-list-wrap {
            padding: 0 16px !important;
            flex: 0 0 auto !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-list {
            max-height: 260px !important;
            overflow-y: auto !important;
          }

          .modal-content.assenze-modal-fixed .assenze-modal-actions {
            padding: 10px 16px 14px !important;
          }

          /* 13 ▸ Calendar — compact cells for small screens */
          .custom-calendar {
            padding: 12px !important;
            border-radius: 14px !important;
          }

          .calendar-header {
            margin-bottom: 10px !important;
            padding: 4px 2px !important;
          }

          .calendar-title {
            font-size: 12px !important;
          }

          .calendar-nav button {
            width: 28px !important;
            height: 28px !important;
          }

          .weekday-headers {
            gap: 3px !important;
            margin-bottom: 6px !important;
          }

          .weekday-header {
            font-size: 9px !important;
            padding: 2px 0 !important;
          }

          .calendar-days {
            gap: 3px !important;
          }

          .calendar-day {
            min-height: 54px !important;
            padding: 6px 4px !important;
            border-radius: 10px !important;
          }

          .day-number {
            font-size: 11px !important;
            margin-bottom: 4px !important;
          }

          .event-badge {
            font-size: 7px !important;
            padding: 2px 3px !important;
            border-radius: 4px !important;
          }

          .more-events {
            font-size: 8px !important;
          }

          /* 14 ▸ Agenda settimanale: testi leggibili, layout pulito su mobile */
          #weekly-agenda-list.weekly-agenda-root>.agenda-day-section {
            gap: 14px !important;
          }

          /* Date header — slightly more compact */
          #weekly-agenda-list .agenda-day-section > div:first-child {
            gap: 8px !important;
            margin-bottom: 8px !important;
          }

          #weekly-agenda-list [data-task-text],
          #weekly-agenda-list .card [data-task-text],
          .planner-content .card [data-task-text] {
            font-size: 15px !important;
            line-height: 1.55 !important;
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            display: block !important;
            -webkit-line-clamp: unset !important;
            line-clamp: unset !important;
            -webkit-box-orient: initial !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
            hyphens: auto !important;
          }

          #weekly-agenda-list .agenda-task-card {
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: visible !important;
            border-radius: 12px !important;
          }

          #weekly-agenda-list .agenda-task-main {
            padding: 12px 14px 10px !important;
            min-width: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
          }

          /* Subject badge — make it readable */
          #weekly-agenda-list .agenda-task-main span[style*="font-size:9px"] {
            font-size: 11px !important;
            font-weight: 600 !important;
          }

          #weekly-agenda-list .agenda-task-actions {
            padding: 6px 14px 10px !important;
            gap: 8px !important;
            border-left: none !important;
            border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
            justify-content: flex-end !important;
            flex-direction: row !important;
            display: flex !important;
          }

          #weekly-agenda-list .agenda-task-action-btn {
            width: 32px !important;
            height: 32px !important;
          }

          /* Side color stripe — horizontal when card is column */
          #weekly-agenda-list .agenda-task-card > div[style*="width:4px"] {
            width: 100% !important;
            height: 4px !important;
          }

          /* 15 ▸ Voti: card obiettivo media più leggibile su schermo piccolo */
          .dashboard.view .goal-overall-card {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 12px !important;
            padding: 14px !important;
          }

          .dashboard.view .goal-overall-card>div {
            width: 100% !important;
            min-width: 0 !important;
          }

          .dashboard.view .goal-overall-card .goal-overall-value {
            font-size: 20px !important;
            line-height: 1.1 !important;
          }

          .dashboard.view .goal-overall-card .goal-overall-scenario-grade {
            font-size: 11px !important;
          }

          /* ── AI Chat: interfaccia mobile stile Gemini/ChatGPT ─────── */

          /* Full-screen chat container */
          .view.ai-view {
            position: fixed !important;
            inset: 0 !important;
            z-index: 1300 !important;
            padding: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-height: 100vh !important;
            max-height: 100dvh !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            margin: 0 !important;
          }

          .ai-chat-header {
            padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 8px 12px !important;
            gap: 8px !important;
          }

          /* Header back button — smaller */
          .ai-chat-header button[onclick*="navigate"] {
            width: 32px !important;
            height: 32px !important;
            border-radius: 10px !important;
          }

          .ai-chat-header button[onclick*="navigate"] i {
            font-size: 14px !important;
          }

          /* Header title — compact */
          .ai-chat-header span[style*="font-size: 13px"] {
            font-size: 12px !important;
          }

          .ai-chat-header span[style*="font-size: 9px"] {
            font-size: 8px !important;
          }

          /* Chat messages area — fills available space */
          #aiChatMessages.ai-chat-messages {
            padding: 12px 10px !important;
            gap: 10px !important;
            flex: 1 !important;
            min-height: 0 !important;
            overscroll-behavior: contain !important;
            -webkit-overflow-scrolling: touch !important;
          }

          /* Welcome card — fit on small screen */
          #aiChatMessages > div[style*="max-width: 500px"] {
            margin: 20px auto !important;
            padding: 20px !important;
            max-width: 100% !important;
          }

          #aiChatMessages > div[style*="max-width: 500px"] > div[style*="font-size: 18px"] {
            font-size: 15px !important;
            margin-bottom: 16px !important;
          }

          #aiChatMessages > div[style*="max-width: 500px"] button {
            padding: 11px !important;
            font-size: 10px !important;
          }

          /* Message bubbles — tighter on mobile */
          .ai-chat-message-bubble {
            max-width: 88% !important;
            padding: 10px 14px !important;
            border-radius: 18px !important;
            font-size: 14px !important;
            line-height: 1.5 !important;
          }

          /* Timestamp label inside bubble */
          .ai-chat-message-bubble > div[style*="font-size: 9px"] {
            margin-bottom: 6px !important;
          }

          /* ── Input bar: Premium Floating Pill ───── */
          .ai-chat-input-wrap {
            padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px !important;
            margin: 0 !important;
            background: transparent !important;
            border-top: none !important;
          }

          .ai-input-dock {
            width: 100% !important;
            border-radius: 999px !important;
            padding: 4px 6px 4px 14px !important;
            background: #F6F5F3 !important;
            border: 1px solid #E5E2DD !important;
            gap: 6px !important;
            box-sizing: border-box !important;
            align-items: center !important;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
          }

          .ai-chat-input-field {
            font-size: 15px !important;
            padding: 0 4px !important;
            min-height: 28px !important;
            max-height: 120px !important;
          }

          .ai-chat-send-btn {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            border-radius: 50% !important;
            flex-shrink: 0 !important;
          }

          .ai-chat-send-btn i {
            font-size: 14px !important;
          }
        }

        /* ================================================================
           AGENDA SETTIMANALE WIDGET (ASW) — Calendar week list redesign
           Consistent with the Teenage Engineering aesthetic of the PWA.
           ================================================================ */

        .asw-root {
          margin-top: 20px;
          background: #FFFFFF;
          border-radius: 18px;
          border: 1px solid #ECEAE6;
          overflow: hidden;
        }

        .asw-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 20px 12px;
          border-bottom: 1px solid #F0EDE8;
        }

        .asw-header-title {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 800;
          color: #908C86;
          text-transform: uppercase;
          letter-spacing: 0.14em;
        }

        .asw-header-count {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 700;
          color: #C0BBB4;
          letter-spacing: 0.06em;
        }

        .asw-body {
          padding: 0 20px 10px;
        }

        /* ── Day section ───────────────────────────────────────────────── */

        .asw-day-section {
          padding: 16px 0;
          border-top: 1px solid #ECEAE6;
        }

        .asw-day-section:first-child {
          border-top: none;
        }

        .asw-day-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 12px;
        }

        .asw-date-block {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 44px;
          flex-shrink: 0;
        }

        .asw-day-name {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.12em;
        }

        .asw-day-num {
          font-family: var(--font-main);
          font-size: 26px;
          font-weight: 800;
          line-height: 1;
          letter-spacing: -0.03em;
        }

        .asw-month {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          margin-top: 1px;
        }

        .asw-separator {
          flex: 1;
          height: 1px;
          background: #ECEAE6;
        }

        .asw-label-tag {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          border: 1px solid;
          padding: 2px 8px;
          border-radius: 4px;
          flex-shrink: 0;
        }

        /* ── Task cards ────────────────────────────────────────────────── */

        .asw-tasks-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .asw-task-card {
          display: flex;
          align-items: stretch;
          background: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: 12px;
          overflow: hidden;
          cursor: pointer;
          transition: background 0.15s, box-shadow 0.15s;
        }

        .asw-task-card:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .asw-verifica-card {
          background: rgba(255, 159, 10, 0.04);
          border-color: rgba(255, 159, 10, 0.2);
          cursor: default;
        }

        .asw-task-done {
          background: #FAFAF9;
          border-color: #EDEBE7;
        }

        .asw-task-past {
          opacity: 0.65;
        }

        .asw-task-stripe {
          width: 3px;
          flex-shrink: 0;
        }

        .asw-task-body {
          flex: 1;
          min-width: 0;
          padding: 10px 14px;
        }

        .asw-task-meta {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-wrap: wrap;
          margin-bottom: 5px;
        }

        .asw-subject-badge {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          padding: 2px 7px;
          border-radius: 4px;
          flex-shrink: 0;
        }

        .asw-verifica-tag {
          font-family: var(--font-main);
          font-size: 9px;
          font-weight: 700;
          color: #D97706;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          flex-shrink: 0;
        }

        .asw-task-text {
          font-family: var(--font-main);
          font-size: 12px;
          font-weight: 600;
          color: #141414;
          line-height: 1.45;
          letter-spacing: 0.01em;
          /* No truncation — full text always visible */
          white-space: normal;
          word-break: break-word;
          overflow-wrap: anywhere;
        }

        .asw-task-done .asw-task-text {
          color: #908C86;
          text-decoration: line-through;
          opacity: 0.7;
        }

        .asw-task-actions {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 0 12px;
          flex-shrink: 0;
          border-left: 1px dashed rgba(0, 0, 0, 0.06);
        }

        .asw-toggle-btn {
          width: 26px;
          height: 26px;
          border-radius: 7px;
          border: 1.5px solid;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s;
          flex-shrink: 0;
        }

        .asw-delete-btn {
          width: 26px;
          height: 26px;
          border-radius: 7px;
          border: 1px solid rgba(255, 59, 48, 0.18);
          background: #FFF0EE;
          color: #FF3B30;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          flex-shrink: 0;
          transition: all 0.15s;
        }

        /* ── AI CHAT REDESIGN ───────────────────────────────────────────── */
        #app .view.ai-chat-view {
          padding: 0 !important;
          margin: 0 !important;
        }

        .ai-chat-view {
          position: fixed !important;
          inset: 0 !important;
          z-index: 1300 !important;
          display: flex !important;
          flex-direction: column !important;
          height: 100dvh !important;
          max-height: 100dvh !important;
          padding-bottom: 0px !important;
          margin-bottom: 0px !important;
          background:
            radial-gradient(1000px 500px at 120% -20%, rgba(26, 107, 138, 0.16), transparent 70%),
            radial-gradient(700px 400px at -20% -20%, rgba(198, 242, 223, 0.18), transparent 70%),
            var(--bg-body);
        }

        .ai-chat-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px 16px;
          border-bottom: 1px solid rgba(13, 31, 45, 0.08);
          background: rgba(255, 255, 255, 0.78);
          backdrop-filter: blur(12px);
        }

        .ai-chat-header-main {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
        }

        .ai-chat-back-btn {
          width: 36px;
          height: 36px;
          border-radius: 12px;
          border: 1px solid rgba(13, 31, 45, 0.12);
          background: #fff;
          color: #141414;
          display: grid;
          place-items: center;
          cursor: pointer;
          transition: transform 0.16s ease, box-shadow 0.16s ease;
        }

        .ai-chat-back-btn:active {
          transform: scale(0.96);
        }

        .ai-chat-title-wrap {
          display: flex;
          flex-direction: column;
          min-width: 0;
        }

        .ai-chat-title {
          font-size: 14px;
          font-weight: 700;
          color: #141414;
          letter-spacing: -0.01em;
        }

        .ai-chat-subtitle {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          color: #4f6d7a;
          text-transform: uppercase;
          letter-spacing: 0.08em;
        }

        .ai-chat-reset-btn {
          border: 1px solid rgba(13, 31, 45, 0.12);
          background: #fff;
          color: #141414;
          border-radius: 999px;
          padding: 7px 12px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          font-weight: 700;
          text-transform: uppercase;
          cursor: pointer;
          white-space: nowrap;
        }

        .ai-chat-messages {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 16px 16px 16px 16px;
          overscroll-behavior: contain;
          scroll-behavior: smooth;
        }

        .ai-chat-welcome {
          max-width: min(760px, 100%);
          width: 100%;
          margin: auto;
          background: rgba(255, 255, 255, 0.9);
          border: 1px solid rgba(13, 31, 45, 0.12);
          border-radius: 24px;
          padding: 20px;
          box-shadow: 0 16px 36px rgba(13, 31, 45, 0.08);
        }

        .ai-chat-welcome-eyebrow {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #4f6d7a;
          margin-bottom: 10px;
        }

        .ai-chat-welcome-title {
          font-size: 24px;
          line-height: 1.2;
          letter-spacing: -0.03em;
          color: #141414;
          font-weight: 700;
          margin-bottom: 14px;
        }

        .ai-chat-suggest-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 10px;
        }

        .ai-chat-suggest-btn {
          border: 1px solid rgba(13, 31, 45, 0.12);
          border-radius: 14px;
          background: linear-gradient(135deg, rgba(13, 31, 45, 0.04) 0%, rgba(26, 107, 138, 0.09) 60%, rgba(198, 242, 223, 0.2) 100%);
          color: #0b1720;
          padding: 12px 13px;
          text-align: left;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: transform 0.16s ease, box-shadow 0.16s ease;
        }

        .ai-chat-suggest-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 8px 16px rgba(13, 31, 45, 0.12);
        }

        .ai-chat-row {
          display: flex;
          align-items: flex-end;
          gap: 8px;
          max-width: min(920px, 100%);
          width: 100%;
          margin: 0 auto;
        }

        .ai-chat-row.is-user {
          justify-content: flex-end;
        }

        .ai-chat-row.is-user .ai-chat-avatar {
          order: 2;
        }

        .ai-chat-row.is-user .ai-chat-message-bubble {
          order: 1;
        }

        .ai-chat-avatar {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.08em;
          flex-shrink: 0;
        }

        .ai-chat-avatar.ai {
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%);
          color: #fff;
        }

        .ai-chat-avatar.user {
          background: #141414;
          color: #fff;
        }

        .ai-chat-message-bubble {
          max-width: min(86%, 720px);
          border-radius: 18px;
          padding: 12px 14px;
          font-size: 14px;
          line-height: 1.6;
          animation: msg-appear 0.22s ease;
        }

        .ai-chat-message-bubble.msg-ai {
          background: rgba(255, 255, 255, 0.96);
          border: 1px solid rgba(13, 31, 45, 0.12);
          color: #111;
          box-shadow: 0 10px 20px rgba(13, 31, 45, 0.06);
        }

        .ai-chat-message-bubble.msg-user {
          background: #141414;
          border: 1px solid #141414;
          color: #fff;
          box-shadow: 0 10px 20px rgba(20, 20, 20, 0.2);
        }

        .ai-chat-meta {
          font-family: 'JetBrains Mono', monospace;
          font-size: 9px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          opacity: 0.65;
          margin-bottom: 7px;
          font-weight: 700;
        }

        .ai-chat-message-content {
          color: inherit !important;
        }

        .ai-chat-message-content p,
        .ai-chat-message-content li,
        .ai-chat-message-content strong,
        .ai-chat-message-content code {
          color: inherit !important;
        }

        .ai-chat-apply-btn {
          margin-top: 12px;
          border: none;
          border-radius: 10px;
          padding: 8px 12px;
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #C6F2DF 100%);
          color: #fff;
          font-size: 10px;
          font-family: 'JetBrains Mono', monospace;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          cursor: pointer;
        }

        .ai-chat-typing-bubble {
          display: inline-flex;
          align-items: center;
          gap: 5px;
        }

        .typing-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #1A6B8A;
          animation: ai-dot 1s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: .13s; }
        .typing-dot:nth-child(3) { animation-delay: .26s; }

        @keyframes ai-dot {
          0%, 80%, 100% { transform: translateY(0); opacity: .42; }
          40% { transform: translateY(-4px); opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
          .typing-dot {
            animation: none !important;
            opacity: 0.7;
          }
        }

        .ai-chat-input-wrap {
          padding: 0 !important;
          margin: 0 !important;
          background: rgba(255, 255, 255, 0.88);
          backdrop-filter: blur(12px);
          border-top: 1px solid rgba(13, 31, 45, 0.08);
          flex-shrink: 0;
        }

        .ai-input-shell {
          display: grid;
          place-items: center;
          width: 100%;
        }

        .ai-input-dock {
          width: min(760px, 100%);
          margin: 0 auto;
          display: flex;
          gap: 8px;
          background: #F6F5F3;
          border: 1px solid #E0DDD8;
          border-radius: 999px;
          padding: 6px 8px;
          box-sizing: border-box;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        }

        .ai-chat-input-wrap {
          padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) 16px !important;
          margin-bottom: 0px !important;
          background: transparent !important;
          border-top: none !important;
        }

        .ai-chat-input-wrap {
          padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px !important;
          margin-bottom: 0px !important;
          background: transparent !important;
          border-top: none !important;
          max-width: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
        }

        .ai-input-dock {
          width: min(760px, 100%);
          margin: 0 auto;
          display: flex;
          gap: 8px;
          background: #F6F5F3;
          border: 1px solid #E5E2DD;
          border-radius: 99px;
          padding: 6px 8px 6px 18px;
          box-sizing: border-box;
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
          align-items: center;
        }

        .ai-chat-input-field {
          flex: 1;
          min-height: 40px;
          border: none;
          outline: none;
          background: transparent;
          color: #141414;
          font-size: 15px;
          font-family: var(--font-main);
          padding: 4px 0;
        }

        .ai-chat-input-field::placeholder {
          color: #A09D98;
        }

        .ai-chat-input-field,
        .ai-chat-input-field:focus,
        .ai-chat-input-field:focus-visible {
          background: transparent !important;
          border: none !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          outline: none !important;
        }

        .ai-chat-send-btn {
          width: 38px !important;
          height: 38px !important;
          min-width: 38px !important;
          border-radius: 50% !important;
          border: none;
          color: #fff;
          background: #141414;
          display: grid;
          place-items: center;
          cursor: pointer;
          transition: transform 0.16s ease, background 0.16s ease;
        }

        .ai-chat-send-btn:active {
          transform: scale(0.92);
        }

        .ai-chat-send-btn:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }

        /* ── Mobile overrides (@media ≤ 600px) ─────────────────────────── */

        @media (max-width: 600px) {
          .asw-root {
            border-radius: 14px;
          }

          .asw-body {
            padding: 0 14px 8px;
          }

          .asw-header {
            padding: 12px 16px 10px;
          }

          .asw-day-num {
            font-size: 22px;
          }

          .asw-task-body {
            padding: 10px 12px;
          }

          .asw-task-text {
            font-size: 13px;
            line-height: 1.45;
          }

          .asw-subject-badge {
            font-size: 10px;
          }

          .asw-task-actions {
            padding: 0 10px;
          }

          .ai-chat-header {
            padding-left: 12px;
            padding-right: 12px;
          }

          .ai-chat-title {
            font-size: 13px;
          }

          .ai-chat-reset-btn {
            padding: 6px 10px;
            font-size: 9px;
          }

          .ai-chat-messages {
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            gap: 11px;
          }

          .ai-chat-welcome {
            border-radius: 18px;
            padding: 14px;
          }

          .ai-chat-welcome-title {
            font-size: 19px;
          }

          .ai-chat-suggest-grid {
            grid-template-columns: 1fr;
          }

          .ai-chat-message-bubble {
            max-width: 90%;
            padding: 10px 12px;
            border-radius: 15px;
          }

          .ai-chat-input-wrap {
            padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) 16px !important;
            margin: 0 !important;
            background: transparent !important;
            border-top: none !important;
          }

          .ai-input-dock {
            width: 100%;
            border-radius: 999px !important;
            border: 1px solid #E0DDD8 !important;
            background: #F6F5F3 !important;
            padding: 6px 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
          }
        }

        /* ── AUTO-ENTRANCE: ogni nuovo .view animato dopo render ── */
        #app > .view:not(.ai-view):not(.login-view) {
          animation: viewFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes profile-loader-spin {
          to { transform: rotate(360deg); }
        }

        @media (max-width: 600px) {
          .ai-chat-message-content.ai-prose table {
            min-width: 0;
            width: 100%;
            table-layout: fixed;
          }
          .ai-chat-message-content.ai-prose th,
          .ai-chat-message-content.ai-prose td {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: break-word;
            padding: 8px 9px;
            font-size: 12px;
            line-height: 1.35;
          }
          .ai-chat-message-content.ai-prose td:first-child {
            width: auto;
            white-space: normal;
          }
        }

        #clearSyncDiagnosticsBtn:focus-visible {
          outline: 2px solid #1A6B8A;
          outline-offset: 2px;
        }

        .activities-export-shell {
          width: 100%;
          max-width: 760px;
          max-height: min(92dvh, 860px);
          padding: 0;
          overflow: hidden;
          border-radius: 18px;
          border: 1px solid rgba(0, 0, 0, 0.08);
          animation: modalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes modalSlideUp {
          from {
            opacity: 0;
            transform: translateY(10px) scale(0.99);
          }
          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        .activities-export-modal {
          display: flex;
          flex-direction: column;
          gap: 14px;
          padding: 18px;
          max-height: min(92dvh, 860px);
          overflow-y: auto;
        }

        .activities-export-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
        }

        .activities-export-title-wrap h2 {
          margin: 0;
          font-size: 22px;
          font-weight: 800;
          letter-spacing: -0.02em;
          color: #141414;
        }

        .activities-export-title-wrap p {
          margin: 4px 0 0;
          color: #6B6761;
          font-size: 13px;
          font-weight: 600;
        }

        .activities-export-close {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          border: 1px solid #D8D3CB;
          background: #FFFFFF;
          color: #4F4A43;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .activities-export-info-card {
          border: 1px solid #EAE6DF;
          border-radius: 14px;
          padding: 14px;
          background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,245,243,0.96) 100%);
        }

        .activities-export-info-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          border: 1px solid rgba(26, 107, 138, 0.25);
          background: rgba(26, 107, 138, 0.08);
          color: #1A6B8A;
          font-size: 10px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          padding: 3px 10px;
          margin-bottom: 8px;
        }

        .activities-export-info-card p {
          margin: 0;
          color: #3D3A35;
          font-size: 13px;
          line-height: 1.5;
          font-weight: 600;
        }

        .activities-export-filters {
          border: 1px solid #ECE8E2;
          border-radius: 14px;
          padding: 14px;
          background: #FFFFFF;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .activities-export-filter-tabs {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
        }

        .activities-export-filter-tabs button {
          height: 34px;
          border-radius: 10px;
          border: 1px solid #D7D2CB;
          background: #FFFFFF;
          color: #4F4A43;
          font-size: 11px;
          font-weight: 800;
          text-transform: uppercase;
          padding: 0 12px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .activities-export-filter-tabs button.active {
          background: #141414;
          color: #FFFFFF;
          border-color: #141414;
        }

        .activities-export-filter-input {
          display: flex;
        }

        .activities-export-input {
          width: 100%;
          height: 40px;
          border-radius: 12px;
          border: 1px solid #D8D3CB;
          background: #FAF9F7;
          color: #141414;
          padding: 0 12px;
          font-size: 13px;
          font-weight: 600;
          outline: none;
        }

        .activities-export-input:focus {
          border-color: #1A6B8A;
          box-shadow: 0 0 0 3px rgba(26, 107, 138, 0.12);
          background: #FFFFFF;
        }

        .activities-week-picker-wrap {
          display: flex;
          flex-direction: column;
          gap: 6px;
          width: 100%;
        }

        .activities-week-picker {
          display: grid;
          grid-template-columns: 36px minmax(0, 1fr) 36px;
          align-items: center;
          gap: 8px;
          width: 100%;
        }

        .activities-week-nav-btn {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          border: 1px solid #D8D3CB;
          background: #FFFFFF;
          color: #4F4A43;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .activities-week-nav-btn:hover {
          border-color: #141414;
          color: #141414;
        }

        .activities-week-nav-btn:active {
          transform: scale(0.96);
        }

        .activities-week-select {
          min-width: 0;
        }

        .activities-export-stats {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          align-items: center;
          flex-wrap: wrap;
          font-size: 12px;
          color: #6B6761;
        }

        .activities-export-stats strong {
          color: #141414;
          font-size: 13px;
        }

        .activities-export-actions {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .activities-export-download-btn {
          height: 44px;
          border-radius: 12px;
          border: none;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-size: 12px;
          font-weight: 800;
          text-transform: uppercase;
          color: #FFFFFF;
          background: linear-gradient(135deg, #0D1F2D 0%, #1A6B8A 45%, #2DB86A 100%);
          box-shadow: 0 10px 24px rgba(26, 107, 138, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .activities-export-download-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 14px 26px rgba(26, 107, 138, 0.28);
        }

        .activities-export-actions small {
          font-size: 11px;
          color: #76706A;
          font-weight: 600;
        }

        @media (max-width: 700px) {
          .activities-export-shell {
            max-width: 100%;
            max-height: calc(100dvh - 24px);
          }

          .activities-export-modal {
            padding: 14px;
          }

          .activities-export-title-wrap h2 {
            font-size: 19px;
          }

          .activities-week-picker {
            grid-template-columns: 34px minmax(0, 1fr) 34px;
          }

          .activities-week-nav-btn {
            width: 34px;
            height: 34px;
            border-radius: 9px;
          }
        }