.app-layout{min-height:100vh;background:var(--gray-50)}.app-content{padding:0;background:var(--gray-50);min-height:calc(100vh - 64px);transition:var(--transition-base)}.navbar{position:sticky;top:0;z-index:1000;background:var(--white);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-sm);transition:var(--transition-base)}.navbar:hover{box-shadow:var(--shadow-md)}.navbar-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);transition:var(--transition-base)}.navbar-logo{flex-shrink:0;transition:var(--transition-base)}.navbar-logo:hover{transform:scale(1.02)}.navbar-menu-desktop{display:flex!important}.navbar-menu-button{display:none!important;transition:var(--transition-base)}.navbar-menu-button:hover{transform:scale(1.1)}@media (max-width: 768px){.navbar-menu-desktop{display:none!important}.navbar-menu-button{display:inline-flex!important}.navbar-container{padding:0 var(--space-4)}}.ant-layout-header{height:auto;line-height:normal;padding:0;background:transparent}.ant-select{position:relative;z-index:10;pointer-events:auto!important}.ant-select-selector{border-radius:var(--radius-base)!important;transition:var(--transition-base)!important;cursor:pointer!important;pointer-events:auto!important}.ant-select-arrow{pointer-events:auto!important}.ant-select-dropdown{z-index:9999!important;box-shadow:var(--shadow-lg)!important;border-radius:var(--radius-base)!important;pointer-events:auto!important}.ant-select-item{transition:var(--transition-fast)!important;padding:var(--space-2) var(--space-3)!important;cursor:pointer!important;pointer-events:auto!important}.ant-select-item:hover{background-color:#1890ff0f!important}.ant-select-item-option-selected{background-color:#1890ff1a!important;color:var(--primary-color)!important;font-weight:500!important}.ant-select:hover .ant-select-selector,.ant-select-focused .ant-select-selector{border-color:var(--primary-color)!important;box-shadow:0 0 0 2px #1890ff1a!important}.ant-select,.ant-select *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.ant-card .ant-select{position:relative;z-index:20}.ant-select-selection-item,.ant-select-selection-placeholder{pointer-events:none}.ant-menu-horizontal{border-bottom:none;background:transparent}.ant-menu-horizontal>.ant-menu-item,.ant-menu-horizontal>.ant-menu-submenu{transition:var(--transition-base);border-radius:var(--radius-base);margin:0 var(--space-1)}.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu:hover,.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-submenu-selected{border-bottom:2px solid var(--primary-color);background:#1890ff0a;transform:translateY(-1px)}.ant-card{transition:transform var(--transition-base),box-shadow var(--transition-base);border-radius:var(--radius-lg);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm);will-change:transform}.ant-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.ant-btn{transition:transform var(--transition-base);border-radius:var(--radius-base);font-weight:500;display:inline-flex;align-items:center;gap:var(--space-2)}.ant-btn:hover{transform:translateY(-1px)}.ant-btn-primary{background:var(--gradient-primary);border:none;color:var(--white)}.ant-btn-primary:hover{background:var(--gradient-primary);filter:brightness(1.1)}.gradient-primary{background:var(--gradient-primary);color:var(--white)}.gradient-secondary{background:var(--gradient-secondary);color:var(--white)}.gradient-success{background:var(--gradient-success);color:var(--white)}.gradient-warm{background:var(--gradient-warm);color:var(--white)}.gradient-cool{background:var(--gradient-cool);color:var(--gray-800)}.chart-container{background:var(--white);padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-base);margin:var(--space-4) 0;border:1px solid var(--gray-200);transition:box-shadow var(--transition-base)}.chart-container:hover{box-shadow:var(--shadow-lg)}.interactive-demo{background:var(--gray-50);border:2px dashed var(--gray-300);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;transition:border-color var(--transition-base),background-color var(--transition-base)}.interactive-demo:hover{border-color:var(--primary-color);background:#e6f7ff}.learning-step{position:relative;padding:var(--space-5);margin:var(--space-4) 0;background:var(--white);border-radius:var(--radius-lg);border-left:4px solid var(--primary-color);box-shadow:var(--shadow-base);transition:var(--transition-base)}.learning-step:before{content:"";position:absolute;left:-10px;top:50%;width:16px;height:16px;background:var(--primary-color);border-radius:var(--radius-full);transform:translateY(-50%);border:3px solid var(--white);box-shadow:var(--shadow-base);transition:var(--transition-base)}.learning-step:hover{transform:translate(8px);box-shadow:var(--shadow-lg);border-left-color:var(--secondary-color)}.learning-step:hover:before{background:var(--secondary-color);transform:translateY(-50%) scale(1.2)}.code-block{background:var(--gray-900);color:var(--gray-100);border:1px solid var(--gray-700);border-radius:var(--radius-lg);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;overflow-x:auto;margin:var(--space-4) 0;position:relative;box-shadow:var(--shadow-base)}.code-block:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-primary)}@media (max-width: 768px){.app-content{padding:0 var(--space-2)}.chart-container,.learning-step{padding:var(--space-4);margin:var(--space-3) 0}}@media (max-width: 576px){.ant-col{margin-bottom:var(--space-4)}.ant-statistic{text-align:center}.navbar-container{padding:0 var(--space-3)}}.loading-skeleton{background:linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 50%,var(--gray-200) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.quiz-container{max-width:800px;margin:0 auto;padding:var(--space-5)}.quiz-question{background:var(--white);padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-4);box-shadow:var(--shadow-base);border:1px solid var(--gray-200);transition:var(--transition-base)}.quiz-question:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.quiz-option{padding:var(--space-3) var(--space-4);margin:var(--space-2) 0;border:2px solid var(--gray-200);border-radius:var(--radius-base);cursor:pointer;transition:var(--transition-base);position:relative;overflow:hidden}.quiz-option:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(24,144,255,.1),transparent);transition:var(--transition-base)}.quiz-option:hover{border-color:var(--primary-color);background:#1890ff0a;transform:translate(4px)}.quiz-option:hover:before{left:100%}.quiz-option.selected{border-color:var(--primary-color);background:#1890ff14;transform:scale(1.02)}.quiz-option.correct{border-color:var(--secondary-color);background:#52c41a14;color:var(--secondary-color)}.quiz-option.incorrect{border-color:var(--error-color);background:#ff4d4f14;color:var(--error-color)}.tool-showcase{background:var(--gradient-primary);padding:var(--space-10) var(--space-5);border-radius:var(--radius-xl);color:var(--white);text-align:center;margin:var(--space-6) 0;box-shadow:var(--shadow-lg)}.tool-logo{width:80px;height:80px;background:var(--white);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4);font-size:36px;box-shadow:var(--shadow-lg);transition:var(--transition-base);position:relative;z-index:1}.tool-logo:hover{transform:scale(1.1) rotate(5deg)}.data-table-container{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-base);border:1px solid var(--gray-200);transition:var(--transition-base)}.data-table-container:hover{box-shadow:var(--shadow-lg)}.ant-table-thead>tr>th{background:linear-gradient(135deg,var(--gray-50) 0%,var(--white) 100%);font-weight:600;color:var(--gray-700);border-bottom:2px solid var(--gray-200)}.ant-table-tbody>tr:hover>td{background:#1890ff05!important}.progress-indicator{position:fixed;top:64px;left:0;right:0;height:3px;background:var(--gray-200);z-index:999;overflow:hidden}.progress-bar{height:100%;background:var(--gradient-primary);transition:width var(--transition-base);position:relative}.progress-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progress-shine 2s infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.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}.ant-btn:focus,.ant-input:focus,.ant-select:focus{outline:2px solid var(--primary-color);outline-offset:2px;box-shadow:0 0 0 4px #1890ff1a}.ant-statistic-content-value{font-weight:700;color:var(--primary-color)}.page-enter{opacity:0;transform:translateY(20px);animation:page-enter var(--transition-slow) ease-out forwards}@keyframes page-enter{to{opacity:1;transform:translateY(0)}}@media print{.navbar,.ant-affix,.no-print,.progress-indicator{display:none!important}.app-content{padding:0;background:var(--white)}.ant-card,.chart-container{box-shadow:none;border:1px solid var(--gray-300)}}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--gray-300) var(--gray-100)}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-full)}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full);transition:var(--transition-base)}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.ant-drawer .ant-menu-item{margin:var(--space-1) 0;border-radius:var(--radius-base);padding:var(--space-2);height:auto;transition:var(--transition-base)}.ant-drawer .ant-menu-item:hover{background:#1890ff0f;transform:translate(4px)}.ant-drawer .ant-menu-item-selected{background:#1890ff1a;color:var(--primary-color)}@keyframes hero-glow{0%,to{opacity:.3}50%{opacity:.5}}@keyframes cta-glow{0%,to{opacity:.4}50%{opacity:.6}}:root{--primary-color: #1890ff;--primary-light: #40a9ff;--primary-dark: #096dd9;--secondary-color: #52c41a;--accent-color: #fa8c16;--warning-color: #faad14;--error-color: #ff4d4f;--white: #ffffff;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #f0f0f0;--gray-300: #d9d9d9;--gray-400: #bfbfbf;--gray-500: #8c8c8c;--gray-600: #595959;--gray-700: #434343;--gray-800: #262626;--gray-900: #1f1f1f;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--gradient-success: linear-gradient(135deg, #667eea 0%, #52c41a 100%);--gradient-warm: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);--gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--radius-sm: 4px;--radius-base: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 50%;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 48px;--transition-fast: .15s ease-out;--transition-base: .2s ease-out;--transition-slow: .3s ease-out;--transition-slower: .5s ease-out;font-family:var(--font-sans);line-height:1.6;font-weight:400;color:var(--gray-800);background-color:var(--gray-50);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--gray-50);font-family:var(--font-sans)}a{color:var(--primary-color);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--primary-dark);text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.3;letter-spacing:-.025em}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}h5{font-size:var(--text-xl)}h6{font-size:var(--text-lg)}p{margin:0 0 var(--space-4) 0;line-height:1.7}button{border-radius:var(--radius-base);border:1px solid transparent;padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:500;font-family:inherit;cursor:pointer;transition:var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}button:hover{transform:translateY(-1px)}button:focus,button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--gray-100)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full);transition:var(--transition-base)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}::selection{background:#1890ff33;color:var(--gray-900)}::placeholder{color:var(--gray-400);opacity:1}@media print{*{-webkit-print-color-adjust:exact!important;color-adjust:exact!important}body{background:#fff!important}}@media (prefers-color-scheme: dark){:root{--gray-50: #1f1f1f;--gray-100: #262626;--gray-200: #434343;--gray-800: #f5f5f5;--gray-900: #ffffff}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}