@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        
        :root {
            --color-primary-50: 238 242 255;
            --color-primary-100: 224 231 255;
            --color-primary-200: 199 210 254;
            --color-primary-300: 165 180 252;
            --color-primary-400: 129 140 248;
            --color-primary-500: 99 102 241;
            --color-primary-600: 79 70 229;
            --color-primary-700: 67 56 202;
        }

        body.theme-impresa {
            --color-primary-50: 255 251 235;
            --color-primary-100: 254 243 199;
            --color-primary-200: 253 230 138;
            --color-primary-300: 252 211 77;
            --color-primary-400: 251 191 36;
            --color-primary-500: 245 158 11;
            --color-primary-600: 217 119 6;
            --color-primary-700: 180 83 9;
        }

        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; -webkit-tap-highlight-color: transparent; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .force-hide { display: none !important; }
        .modal { background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); }
        
        body:not(.is-admin) .admin-only { display: none !important; }
        
        .app-panel { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
        .nav-btn.text-primary-600 { background: rgb(var(--color-primary-50)); border: 1px solid rgb(var(--color-primary-100)); }
        .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; background: #fff; color: #475569; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.625rem; line-height: 1; font-weight: 800; letter-spacing: 0.04em; transition: all 0.16s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
        .secondary-action:hover { color: rgb(var(--color-primary-600)); border-color: rgb(var(--color-primary-200)); background: rgb(var(--color-primary-50)); }
        .secondary-action.compact { padding: 0.375rem 0.625rem; border-radius: 0.625rem; }
        .secondary-action.dark { background: #0f172a; color: #fff; border-color: #0f172a; }
        .secondary-action.dark:hover { background: #1e293b; color: #fff; border-color: #1e293b; }
        .secondary-action.icon-only { width: 2.75rem; padding-left: 0; padding-right: 0; }
        .primary-action-compact { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; background: #0f172a; color: #fff; border: 1px solid #0f172a; border-radius: 0.625rem; padding: 0.375rem 0.625rem; font-size: 0.625rem; line-height: 1; font-weight: 800; letter-spacing: 0.04em; transition: all 0.16s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
        .primary-action-compact:hover { background: #1e293b; border-color: #1e293b; }
        .modal:not(.force-hide) > div { animation: modalIn 0.18s ease-out both; }
        [data-ui-action="show-project-detail"] { animation: softIn 0.2s ease-out both; }
        @keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes softIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        
        .is-archived { opacity: 0.6; filter: grayscale(0.8); }
        .pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
        @media (max-width: 1023px) { .mobile-tab { display: none; } .mobile-tab.active { display: block; } }
        .tag-enter { animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes popIn { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
        .locked-feature { opacity: 0.5; cursor: pointer; position: relative; }

        @media (max-width: 640px) {
            .auth-panel { align-items: flex-start; }
            .auth-card { margin-top: 1rem; margin-bottom: 1rem; }
            #auth-container input,
            #auth-container button,
            #auth-container select {
                min-height: 44px;
            }
        }

        select.appearance-none {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-position: right 1rem center;
            background-repeat: no-repeat;
            background-size: 1.2em 1.2em;
            padding-right: 2.5rem !important;
        }