.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none}.btn:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.btn-xs{padding:4px 8px;font-size:12px}.btn-sm{padding:6px 12px;font-size:14px}.btn-md{padding:8px 16px;font-size:14px}.btn-lg{padding:12px 24px;font-size:16px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 1px 3px #0000001a}.btn-primary:hover:not(.btn-disabled){box-shadow:0 4px 14px #4f46e566;transform:translateY(-1px)}.btn-primary:active:not(.btn-disabled){transform:translateY(0)}.btn-secondary{background-color:#fff;color:#374151;border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d}.btn-secondary:hover:not(.btn-disabled){background-color:#f9fafb;border-color:#9ca3af}.btn-ghost{background-color:transparent;color:#4f46e5}.btn-ghost:hover:not(.btn-disabled){background-color:#eef2ff}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.btn-danger:hover:not(.btn-disabled){box-shadow:0 4px 14px #dc262666;transform:translateY(-1px)}.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.btn-success:hover:not(.btn-disabled){box-shadow:0 4px 14px #16a34a66;transform:translateY(-1px)}.btn-full{width:100%}.btn-disabled{opacity:.5;cursor:not-allowed}.btn-spinner{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btn-spin .8s linear infinite}.btn-icon{display:flex;align-items:center}@keyframes btn-spin{to{transform:rotate(360deg)}}.card{background-color:#fff;border-radius:12px;border:1px solid #e5e7eb;transition:all .15s ease}.card-padding-none .card-content,.card-padding-none .card-header{padding:0}.card-padding-sm .card-content{padding:12px}.card-padding-sm .card-header{padding:12px 12px 0}.card-padding-md .card-content{padding:20px}.card-padding-md .card-header{padding:20px 20px 0}.card-padding-lg .card-content{padding:24px}.card-padding-lg .card-header{padding:24px 24px 0}.card-shadow-none{box-shadow:none}.card-shadow-sm{box-shadow:0 1px 3px #0000001a}.card-shadow-md{box-shadow:0 4px 6px #0000001a}.card-shadow-lg{box-shadow:0 10px 15px #0000001a}.card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 15px #0000001a;border-color:#d1d5db}.card-clickable{cursor:pointer}.card-header{margin-bottom:16px}.card-title{font-size:18px;font-weight:600;color:#1a1a1a;margin:0}.card-description{font-size:14px;color:#333;margin:4px 0 0}@media (max-width: 639px){.card-padding-md .card-content{padding:16px}.card-padding-md .card-header{padding:16px 16px 0}}.tag{display:inline-flex;align-items:center;gap:4px;font-weight:500;border-radius:9999px;white-space:nowrap;transition:all .15s ease}.tag-xs{padding:1px 8px;font-size:10px}.tag-sm{padding:2px 8px;font-size:12px}.tag-md{padding:4px 12px;font-size:14px}.tag-default{background-color:#f3f4f6;color:#374151;border:1px solid #e5e7eb}.tag-success{background-color:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.tag-warning{background-color:#fffbeb;color:#b45309;border:1px solid #fde68a}.tag-danger{background-color:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.tag-info{background-color:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.tag-primary{background-color:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}.tag-icon{display:flex;align-items:center}.tag-icon svg{width:.875em;height:.875em}.status-dot{width:6px;height:6px;border-radius:50%;background-color:currentColor;opacity:.8}.tag-warning .status-dot{animation:tag-pulse 2s ease-in-out infinite}@keyframes tag-pulse{0%,to{opacity:.8}50%{opacity:.4}}.section{margin-bottom:24px}.section-header{margin-bottom:16px}.section-title{font-size:20px;font-weight:600;color:#1a1a1a;margin:0;line-height:1.25}.section-description{font-size:14px;color:#333;margin-top:4px;line-height:1.5}.page-header-container{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.page-header-left{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}.back-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #e5e7eb;background-color:#fff;color:#4b5563;cursor:pointer;transition:all .15s ease;flex-shrink:0;box-shadow:0 1px 2px #0000000d}.back-button:hover{background-color:#f9fafb;border-color:#d1d5db;color:#1f2937}.back-button:active{background-color:#f3f4f6}.page-header-text{min-width:0;flex:1}.page-header-title{font-size:24px;font-weight:700;color:#1a1a1a;margin:0;line-height:1.25;letter-spacing:-.025em}.page-header-subtitle{font-size:14px;color:#333;margin-top:4px;line-height:1.5}.page-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}.page-header-actions>*{flex:1}@media (min-width: 640px){.page-header-container{flex-direction:row;align-items:flex-start;justify-content:space-between}.page-header-title{font-size:30px}.page-header-actions{width:auto}.page-header-actions>*{flex:none}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:modal-fadeIn .15s ease-out}.modal-container{background-color:#fff;border-radius:16px;box-shadow:0 25px 50px -12px #00000040;width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;animation:modal-scaleIn .2s ease-out;overflow:hidden}.modal-sm{max-width:400px}.modal-md{max-width:500px}.modal-lg{max-width:640px}.modal-xl{max-width:800px}.modal-full{max-width:calc(100% - 32px);height:calc(100vh - 32px);height:calc(100dvh - 32px)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.modal-title{font-size:20px;font-weight:600;color:#111827;margin:0;line-height:1.25}.modal-close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background-color:transparent;color:#6b7280;cursor:pointer;transition:all .15s ease;margin-left:8px}.modal-close-btn:hover{background-color:#f3f4f6;color:#374151}.modal-close-btn:active{background-color:#e5e7eb}.modal-body{padding:20px;overflow-y:auto;flex:1}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:20px;margin-top:20px;border-top:1px solid #e5e7eb}@keyframes modal-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modal-scaleIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 639px){.modal-overlay{padding:8px;align-items:flex-end}.modal-container{max-width:100%;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:16px 16px 0 0;animation:modal-slideInUp .2s ease-out}.modal-sm,.modal-md,.modal-lg,.modal-xl{max-width:100%}.modal-header,.modal-body{padding:16px}.modal-footer{flex-direction:column-reverse;gap:8px}.modal-footer>*{width:100%}}@keyframes modal-slideInUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.app-layout{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px #0000001a}.header-container{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:64px}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#4f46e5;font-weight:700;font-size:18px;transition:color .15s ease}.logo:hover{color:#4338ca;text-decoration:none}.logo-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff}.logo-icon svg{width:20px;height:20px}.logo-text{letter-spacing:-.025em}.nav-desktop{display:flex;align-items:center;gap:8px}.nav-link{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:#1a1a1a;text-decoration:none;transition:all .15s ease}.nav-link:hover{color:#4f46e5;background-color:#eef2ff;text-decoration:none}.nav-link.active{color:#4f46e5;background-color:#eef2ff;font-weight:600}.nav-link svg{opacity:.7}.nav-link.active svg,.nav-link:hover svg{opacity:1}.nav-divider{width:1px;height:24px;background-color:#e5e7eb;margin:0 12px}.user-section{display:flex;align-items:center;gap:12px}.user-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#4f46e5;border-radius:9999px;font-size:14px;font-weight:600}.user-avatar.large{width:40px;height:40px;font-size:16px}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-size:14px;font-weight:500;color:#1a1a1a}.user-school{font-size:12px;color:#333}.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;background:transparent;border-radius:8px;color:#374151;cursor:pointer;transition:all .15s ease}.mobile-menu-btn:hover{background-color:#f3f4f6}.mobile-menu-btn:active{background-color:#e5e7eb}.nav-mobile{display:none;flex-direction:column;padding:16px;background-color:#fff;border-top:1px solid #f3f4f6;animation:layout-slideInDown .2s ease-out}.nav-mobile.open{display:flex}.nav-link-mobile{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;font-size:16px;font-weight:500;color:#1a1a1a;text-decoration:none;transition:all .15s ease}.nav-link-mobile:hover{background-color:#f9fafb;text-decoration:none}.nav-link-mobile.active{color:#4f46e5;background-color:#eef2ff}.nav-link-mobile svg{opacity:.7}.nav-link-mobile.active svg{opacity:1}.mobile-divider{height:1px;background-color:#e5e7eb;margin:12px 0}.mobile-user-section{padding:12px;background-color:#f9fafb;border-radius:12px}.mobile-user-info{display:flex;align-items:center;gap:12px}.app-main{flex:1;background:linear-gradient(180deg,#f8fafc,#f1f5f9)}.main-container{max-width:1280px;margin:0 auto;padding:16px}.hide-mobile{display:inline}.show-mobile{display:none}@media (min-width: 640px){.header-container{padding:0 24px}.main-container{padding:24px}}@media (min-width: 1024px){.main-container{padding:32px}}@media (max-width: 767px){.mobile-menu-btn{display:flex}.nav-desktop,.hide-mobile{display:none}.show-mobile{display:inline}}@keyframes layout-slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:root{--color-primary-50: #eef2ff;--color-primary-100: #e0e7ff;--color-primary-200: #c7d2fe;--color-primary-300: #a5b4fc;--color-primary-400: #818cf8;--color-primary-500: #6366f1;--color-primary-600: #4f46e5;--color-primary-700: #4338ca;--color-primary-800: #3730a3;--color-primary-900: #312e81;--color-success-50: #f0fdf4;--color-success-100: #dcfce7;--color-success-200: #bbf7d0;--color-success-500: #22c55e;--color-success-600: #16a34a;--color-success-700: #15803d;--color-warning-50: #fffbeb;--color-warning-100: #fef3c7;--color-warning-500: #f59e0b;--color-warning-600: #d97706;--color-warning-700: #b45309;--color-danger-50: #fef2f2;--color-danger-100: #fee2e2;--color-danger-500: #ef4444;--color-danger-600: #dc2626;--color-danger-700: #b91c1c;--color-info-50: #eff6ff;--color-info-100: #dbeafe;--color-info-500: #3b82f6;--color-info-600: #2563eb;--color-info-700: #1d4ed8;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--font-size-xs: clamp(.6875rem, .625rem + .2vw, .75rem);--font-size-sm: clamp(.8125rem, .75rem + .25vw, .875rem);--font-size-base: clamp(.875rem, .8rem + .3vw, 1rem);--font-size-lg: clamp(1rem, .9rem + .4vw, 1.125rem);--font-size-xl: clamp(1.125rem, 1rem + .5vw, 1.25rem);--font-size-2xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);--font-size-3xl: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);--font-size-4xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem);--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--letter-spacing-tight: -.025em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--radius-none: 0;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .06);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .06);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .2);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);--shadow-primary: 0 4px 14px -2px rgba(79, 70, 229, .3);--shadow-success: 0 4px 14px -2px rgba(22, 163, 74, .3);--shadow-danger: 0 4px 14px -2px rgba(220, 38, 38, .3);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--transition-slower: .5s cubic-bezier(.4, 0, .2, 1);--max-width-xs: 20rem;--max-width-sm: 24rem;--max-width-md: 28rem;--max-width-lg: 32rem;--max-width-xl: 36rem;--max-width-2xl: 42rem;--max-width-3xl: 48rem;--max-width-4xl: 56rem;--max-width-5xl: 64rem;--max-width-6xl: 72rem;--max-width-7xl: 80rem;--max-width-content: 75rem;--max-width-full: 100%;--header-height: 3.75rem;--header-height-mobile: 3.5rem;--sidebar-width: 15rem;--sidebar-width-collapsed: 4rem;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-primary-soft: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);--gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);--gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--gradient-page-bg: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)}.dark{--color-gray-50: #111827;--color-gray-100: #1f2937;--color-gray-200: #374151;--color-gray-300: #4b5563;--color-gray-400: #6b7280;--color-gray-500: #9ca3af;--color-gray-600: #d1d5db;--color-gray-700: #e5e7eb;--color-gray-800: #f3f4f6;--color-gray-900: #f9fafb}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:#1a1a1a;background:var(--gradient-page-bg);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-muted{color:var(--color-gray-600)}.text-primary{color:var(--color-primary-600)}.text-success{color:var(--color-success-600)}.text-warning{color:var(--color-warning-600)}.text-danger{color:var(--color-danger-600)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}:focus:not(:focus-visible){outline:none}a{color:var(--color-primary-600);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-700)}a:active{color:var(--color-primary-800)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-gray-100);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full);border:2px solid var(--color-gray-100)}::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}*{scrollbar-width:thin;scrollbar-color:var(--color-gray-300) var(--color-gray-100)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fadeIn var(--transition-normal) ease-out}.animate-fade-in-up{animation:fadeInUp var(--transition-normal) ease-out}.animate-slide-in-up{animation:slideInUp var(--transition-slow) ease-out}.animate-scale-in{animation:scaleIn var(--transition-normal) ease-out}.skeleton{background:linear-gradient(90deg,var(--color-gray-200) 25%,var(--color-gray-100) 50%,var(--color-gray-200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}th,td{text-align:left;padding:var(--space-3) var(--space-4)}th{font-weight:var(--font-weight-semibold);color:#1a1a1a;background-color:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}td{border-bottom:1px solid var(--color-gray-100);color:#1a1a1a}tbody tr:hover{background-color:var(--color-gray-50)}input,textarea,select{font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:#1a1a1a}input::placeholder,textarea::placeholder{color:var(--color-gray-500)}.input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],textarea,select{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-gray-300);border-radius:var(--radius-lg);background-color:#fff;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:hover,input:hover,textarea:hover,select:hover{border-color:var(--color-gray-400)}.input:focus,input:focus,textarea:focus,select:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px var(--color-primary-100);outline:none}.container{width:100%;max-width:var(--max-width-content);margin:0 auto;padding-left:var(--space-4);padding-right:var(--space-4)}@media (min-width: 640px){.container{padding-left:var(--space-6);padding-right:var(--space-6)}}@media (min-width: 1024px){.container{padding-left:var(--space-8);padding-right:var(--space-8)}}.grid-auto{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.stats-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr)}@media (min-width: 640px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}.cards-grid{display:grid;gap:var(--space-4);grid-template-columns:1fr}@media (min-width: 640px){.cards-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.cards-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1280px){.cards-grid{grid-template-columns:repeat(4,1fr)}}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg)}.btn-group{display:flex;flex-wrap:wrap;gap:var(--space-2)}.hide-mobile{display:none!important}.show-mobile{display:block!important}@media (min-width: 768px){.hide-mobile{display:block!important}.show-mobile{display:none!important}}.hide-mobile-inline{display:none!important}.show-mobile-inline{display:inline!important}@media (min-width: 768px){.hide-mobile-inline{display:inline!important}.show-mobile-inline{display:none!important}}.hide-mobile-flex{display:none!important}.show-mobile-flex{display:flex!important}@media (min-width: 768px){.hide-mobile-flex{display:flex!important}.show-mobile-flex{display:none!important}}.hide-tablet{display:none!important}@media (min-width: 1024px){.hide-tablet{display:block!important}}.flex-col-mobile{display:flex;flex-direction:column;gap:var(--space-3)}@media (min-width: 640px){.flex-col-mobile{flex-direction:row;align-items:center}}.full-width-mobile{width:100%}@media (min-width: 640px){.full-width-mobile{width:auto}}.actions-stack{display:flex;flex-direction:column;gap:var(--space-2);width:100%}@media (min-width: 480px){.actions-stack{flex-direction:row;flex-wrap:wrap;width:auto}}.page-header{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}@media (min-width: 640px){.page-header{flex-direction:row;justify-content:space-between;align-items:flex-start}}.nav-links{display:flex;gap:var(--space-2);flex-wrap:wrap}@media (min-width: 768px){.nav-links{gap:var(--space-4)}}.form-row{display:flex;flex-direction:column;gap:var(--space-4)}@media (min-width: 640px){.form-row{flex-direction:row}.form-row>*{flex:1}}.two-col{display:grid;gap:var(--space-6);grid-template-columns:1fr}@media (min-width: 768px){.two-col{grid-template-columns:1fr 1fr}}.sidebar-layout{display:grid;gap:var(--space-6);grid-template-columns:1fr}@media (min-width: 1024px){.sidebar-layout{grid-template-columns:280px 1fr}}@media (max-width: 639px){.modal-content{width:calc(100% - var(--space-4));max-height:calc(100vh - var(--space-8));max-height:calc(100dvh - var(--space-8));margin:var(--space-2);border-radius:var(--radius-xl)}}@media (max-width: 639px){.p-responsive{padding:var(--space-3)}.px-responsive{padding-left:var(--space-3);padding-right:var(--space-3)}.py-responsive{padding-top:var(--space-3);padding-bottom:var(--space-3)}.gap-responsive{gap:var(--space-3)}}.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.border{border:1px solid var(--color-gray-200)}.border-t{border-top:1px solid var(--color-gray-200)}.border-b{border-bottom:1px solid var(--color-gray-200)}.border-l{border-left:1px solid var(--color-gray-200)}.border-r{border-right:1px solid var(--color-gray-200)}.shadow-none{box-shadow:none}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.bg-white{background-color:#fff}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-primary-50{background-color:var(--color-primary-50)}.bg-success-50{background-color:var(--color-success-50)}.bg-warning-50{background-color:var(--color-warning-50)}.bg-danger-50{background-color:var(--color-danger-50)}.hover-lift{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.hover-scale{transition:transform var(--transition-fast)}.hover-scale:hover{transform:scale(1.02)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.divider{height:1px;background-color:var(--color-gray-200);margin:var(--space-4) 0}.divider-vertical{width:1px;height:24px;background-color:var(--color-gray-200);margin:0 var(--space-3)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);background-color:var(--color-gray-100);color:var(--color-gray-700)}.badge-primary{background-color:var(--color-primary-100);color:var(--color-primary-700)}.badge-success{background-color:var(--color-success-100);color:var(--color-success-700)}.badge-warning{background-color:var(--color-warning-100);color:var(--color-warning-700)}.badge-danger{background-color:var(--color-danger-100);color:var(--color-danger-700)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center}.empty-state-icon{width:64px;height:64px;margin-bottom:var(--space-4);color:var(--color-gray-300)}.empty-state-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-700);margin-bottom:var(--space-2)}.empty-state-description{font-size:var(--font-size-sm);color:var(--color-gray-500);max-width:320px}.app{max-width:800px;margin:0 auto;padding:var(--space-5)}.header{text-align:center;margin-bottom:var(--space-8);padding:var(--space-6);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.header h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-2)}.header p{opacity:.9;font-size:var(--font-size-sm)}.loading{display:flex;align-items:center;gap:var(--space-2);color:var(--color-primary-600)}.loading:after{content:"";width:20px;height:20px;border:2px solid var(--color-primary-600);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}.app{max-width:800px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px}.header h1{font-size:2rem;margin-bottom:8px}.header p{opacity:.9}.correction-demo{background:#fff;padding:24px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.correction-demo h2{margin-bottom:20px;color:#444;border-bottom:2px solid #667eea;padding-bottom:10px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:500;color:#555}.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{min-height:80px;resize:vertical}.form-group input[type=number]{max-width:150px}.submit-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 30px;font-size:16px;font-weight:500;border-radius:6px;cursor:pointer;transition:transform .2s,box-shadow .2s}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.error-message{background:#fee;border:1px solid #fcc;color:#c00;padding:12px;border-radius:6px;margin-top:16px}.result-section{margin-top:24px;padding-top:24px;border-top:1px solid #eee}.result-section h3{color:#444;margin-bottom:16px}.result-card{background:#f9f9f9;border-radius:8px;padding:16px;margin-bottom:12px}.result-card .label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.result-card .value{font-size:16px;color:#333}.score-display{display:flex;align-items:baseline;gap:8px}.score-display .score{font-size:36px;font-weight:700;color:#667eea}.score-display .max-score{font-size:18px;color:#888}.correct-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:500;margin-left:12px}.correct-badge.correct{background:#d4edda;color:#155724}.correct-badge.incorrect{background:#f8d7da;color:#721c24}.knowledge-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.knowledge-points .tag{background:#e8f4fd;color:#06c;padding:4px 10px;border-radius:4px;font-size:13px}.suggestions-list{list-style:none;margin-top:8px}.suggestions-list li{border-bottom:1px solid #eee;padding:8px 0 8px 20px;position:relative}.suggestions-list li:before{content:"→";position:absolute;left:0;color:#667eea}.suggestions-list li:last-child{border-bottom:none}.loading{display:flex;align-items:center;gap:10px;color:#667eea}.loading:after{content:"";width:20px;height:20px;border:2px solid #667eea;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}