feat(frontend): apply UI/UX design system - purple/green palette, gradient buttons, 3D flip, polished pages

Applied ui-ux-pro-max design system recommendations:
- Tailwind theme: study purple primary + correct green accent
- Inter + Plus Jakarta Sans typography
- Glassmorphic surfaces with soft shadows and mesh background
- Real 3D card flip with spring physics + answer feedback flash
- Gradient stat cards, progress bar, animated done screen with score ring
- Polished Layout, Dashboard, Admin, AdminLesson, CardTable, ImportDialog, PracticeSetup, Practice, PracticeDone
- E2E smoke updated for new accessible names

packages/frontend/tailwind.config.ts

@@ -1,15 +1,78 @@
 import type { Config } from 'tailwindcss';
+
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   darkMode: 'class',
   theme: {
     extend: {
-      animation: { 'flip': 'flip 0.4s ease-out forwards' },
+      colors: {
+        brand: {
+          50: '#FAF5FF',
+          100: '#F3E8FF',
+          200: '#E9D5FF',
+          300: '#D8B4FE',
+          400: '#A78BFA',
+          500: '#8B5CF6',
+          600: '#7C3AED',
+          700: '#6D28D9',
+          800: '#5B21B6',
+          900: '#4C1D95',
+        },
+        success: {
+          50: '#ECFDF5',
+          100: '#D1FAE5',
+          400: '#34D399',
+          500: '#10B981',
+          600: '#059669',
+          700: '#047857',
+        },
+        danger: {
+          50: '#FEF2F2',
+          400: '#F87171',
+          500: '#EF4444',
+          600: '#DC2626',
+          700: '#B91C1C',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        display: ['"Plus Jakarta Sans"', 'Inter', 'system-ui', 'sans-serif'],
+      },
+      boxShadow: {
+        soft: '0 6px 24px -8px rgba(124, 58, 237, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.06)',
+        glow: '0 10px 40px -12px rgba(124, 58, 237, 0.4)',
+        'success-glow': '0 10px 40px -12px rgba(16, 185, 129, 0.45)',
+        'danger-glow': '0 10px 40px -12px rgba(239, 68, 68, 0.45)',
+      },
+      backgroundImage: {
+        'brand-gradient': 'linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%)',
+        'success-gradient': 'linear-gradient(135deg, #34D399 0%, #059669 100%)',
+        'danger-gradient': 'linear-gradient(135deg, #F87171 0%, #DC2626 100%)',
+        'mesh-light': 'radial-gradient(at 0% 0%, #F3E8FF 0px, transparent 50%), radial-gradient(at 100% 0%, #ECFDF5 0px, transparent 50%), radial-gradient(at 50% 100%, #FAF5FF 0px, transparent 60%)',
+      },
+      animation: {
+        'flip': 'flip 0.4s ease-out forwards',
+        'pulse-correct': 'pulseCorrect 0.6s ease-out',
+        'pulse-wrong': 'pulseWrong 0.6s ease-out',
+        'shimmer': 'shimmer 2s linear infinite',
+      },
       keyframes: {
         flip: {
           '0%': { transform: 'rotateY(0)' },
           '100%': { transform: 'rotateY(180deg)' },
         },
+        pulseCorrect: {
+          '0%, 100%': { boxShadow: '0 0 0 0 rgba(16, 185, 129, 0)' },
+          '50%': { boxShadow: '0 0 0 16px rgba(16, 185, 129, 0.2)' },
+        },
+        pulseWrong: {
+          '0%, 100%': { boxShadow: '0 0 0 0 rgba(239, 68, 68, 0)' },
+          '50%': { boxShadow: '0 0 0 16px rgba(239, 68, 68, 0.2)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-1000px 0' },
+          '100%': { backgroundPosition: '1000px 0' },
+        },
       },
     },
   },