:root {
            --brand-50: #ecfeff;
            --brand-100: #cffafe;
            --brand-500: #06b6d4;
            --brand-700: #0e7490;
            --accent-500: #f97316;
            --ink-900: #0f172a;
            --ink-600: #475569;
            --surface: #ffffff;
            --bg-soft: #f8fafc;
        }
        .fade-in { animation: fadeIn .28s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .slide-up { animation: slideUp .36s ease-out; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        .loading { animation: spin 1s linear infinite; display: inline-block; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .drop-zone { border: 2px dashed #cbd5e1; transition: all .25s ease; background: #fff; }
        .drop-zone.dragover { border-color: var(--brand-500); background: var(--brand-50); }
        .nav-active {
            background: linear-gradient(90deg, var(--brand-100), #f0fdfa);
            color: var(--brand-700);
            border-left: 3px solid var(--brand-500);
        }
        .tab-active { border-bottom: 3px solid var(--brand-500); color: var(--brand-700); font-weight: 600; }
        .app-bg {
            background:
                radial-gradient(circle at 10% 0%, #cffafe 0%, transparent 32%),
                radial-gradient(circle at 90% 10%, #ffedd5 0%, transparent 28%),
                var(--bg-soft);
        }
        .glass-panel {
            background: rgba(255,255,255,.86);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(148,163,184,.18);
            box-shadow: 0 10px 30px rgba(15,23,42,.06);
        }
        .assistant-note {
            border-left: 3px solid var(--accent-500);
            background: #fff7ed;
            color: #9a3412;
        }