:root{--color-primary-50:#e6f7f7;--color-primary-100:#c2efef;--color-primary-200:#9de7e7;--color-primary-300:#78dfdf;--color-primary-400:#53d7d7;--color-primary-500:#2ecfcf;--color-primary-600:#25a6a6;--color-primary-700:#1c7d7d;--color-primary-800:#135454;--color-primary-900:#0a2b2b;--color-accent-50:#fff7ed;--color-accent-100:#ffedd5;--color-accent-200:#fed7aa;--color-accent-300:#fdba74;--color-accent-400:#fb923c;--color-accent-500:#f97316;--color-accent-600:#ea580c;--color-accent-700:#c2410c;--color-accent-800:#9a3412;--color-accent-900:#7c2d12;--color-neutral-0:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-success:#10b981;--color-success-light:#d1fae5;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-error:#ef4444;--color-error-light:#fee2e2;--color-info:#3b82f6;--color-info-light:#dbeafe;--color-bg-primary:#fff;--color-bg-secondary:#f8fafa;--color-bg-tertiary:#f0f5f5;--color-bg-elevated:#fff;--color-text-primary:#171717;--color-text-secondary:#525252;--color-text-tertiary:#737373;--color-text-muted:#a3a3a3;--color-text-inverse:#fff;--color-border-light:#e5e5e5;--color-border-default:#d4d4d4;--color-border-strong:#a3a3a3;--font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:"SF Mono","Fira Code","Consolas","Liberation Mono",Menlo,monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.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;--radius-none:0;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);--shadow-lg:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);--shadow-xl:0 20px 25px rgba(0,0,0,.1),0 10px 10px rgba(0,0,0,.04);--shadow-2xl:0 25px 50px rgba(0,0,0,.25);--shadow-primary:0 4px 14px rgba(46,207,207,.25);--shadow-accent:0 4px 14px rgba(249,115,22,.25);--duration-instant:0ms;--duration-fast:150ms;--duration-normal:250ms;--duration-slow:350ms;--duration-slower:500ms;--ease-linear:linear;--ease-in:cubic-bezier(0.4,0,1,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--ease-bounce:cubic-bezier(0.68,-0.55,0.265,1.55);--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px}@media (prefers-color-scheme:dark){:root{--color-bg-primary:#171717;--color-bg-secondary:#262626;--color-bg-tertiary:#404040;--color-bg-elevated:#262626;--color-text-primary:#fafafa;--color-text-secondary:#d4d4d4;--color-text-tertiary:#a3a3a3;--color-text-muted:#737373;--color-border-light:#404040;--color-border-default:#525252;--color-border-strong:#737373}}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}a{color:var(--color-primary-600);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--color-primary-700)}a:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}img{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-neutral-100);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:var(--radius-full);-webkit-transition:background var(--duration-fast) var(--ease-out);transition:background var(--duration-fast) var(--ease-out)}::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)}::-moz-selection{background-color:var(--color-primary-200);color:var(--color-primary-900)}::selection{background-color:var(--color-primary-200);color:var(--color-primary-900)}:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn var(--duration-normal) var(--ease-out)}.animate-fadeInUp{animation:fadeInUp var(--duration-normal) var(--ease-out)}.animate-fadeInDown{animation:fadeInDown var(--duration-normal) var(--ease-out)}.animate-slideInLeft{animation:slideInLeft var(--duration-normal) var(--ease-out)}.animate-slideInRight{animation:slideInRight var(--duration-normal) var(--ease-out)}.animate-scaleIn{animation:scaleIn var(--duration-normal) var(--ease-out)}.animate-pulse{animation:pulse 2s var(--ease-in-out) infinite}.animate-spin{animation:spin 1s linear infinite}.transition-all{transition:all var(--duration-normal) var(--ease-out)}.transition-colors{transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.transition-opacity{transition:opacity var(--duration-fast) var(--ease-out)}.transition-transform{transition:transform var(--duration-fast) var(--ease-out)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.container{width:100%;max-width:var(--container-xl);margin-left:auto;margin-right:auto;padding-left:var(--space-4);padding-right:var(--space-4)}@media (min-width:768px){.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)}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.glass{background:hsla(0,0%,100%,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}@media (prefers-color-scheme:dark){.glass{background:hsla(0,0%,9%,.8)}}.card{background:var(--color-bg-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);transition:all var(--duration-normal) var(--ease-out)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-flat,.card-interactive{background:var(--color-bg-elevated);border-radius:var(--radius-xl);border:1px solid var(--color-border-light)}.card-interactive{cursor:pointer;transition:all var(--duration-normal) var(--ease-out)}.card-interactive:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary-300);transform:translateY(-4px)}.card-interactive:active{transform:translateY(-2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn-primary{background:var(--color-primary-500);color:var(--color-text-inverse);box-shadow:var(--shadow-primary)}.btn-primary:hover{background:var(--color-primary-600);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-primary:active{background:var(--color-primary-700);transform:translateY(0)}.btn-accent{background:var(--color-accent-500);color:var(--color-text-inverse);box-shadow:var(--shadow-accent)}.btn-accent:hover{background:var(--color-accent-600);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default)}.btn-secondary:hover{background:var(--color-neutral-50);border-color:var(--color-border-strong)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-neutral-100);color:var(--color-text-primary)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);border-radius:var(--radius-xl)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);border-radius:var(--radius-md)}.input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-out)}.input::-moz-placeholder{color:var(--color-text-muted)}.input::placeholder{color:var(--color-text-muted)}.input:hover{border-color:var(--color-border-strong)}.input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px rgba(46,207,207,.15)}.tag{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-weight-medium);line-height:1;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-text-secondary)}.tag-primary{background:var(--color-primary-100);color:var(--color-primary-700)}.tag-accent{background:var(--color-accent-100);color:var(--color-accent-700)}.tag-success{background:var(--color-success-light);color:var(--color-success)}.tag-warning{background:var(--color-warning-light);color:var(--color-warning)}.tag-error{background:var(--color-error-light);color:var(--color-error)}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-neutral-200);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.avatar-sm{width:32px;height:32px;font-size:var(--text-xs)}.avatar-md{width:40px;height:40px;font-size:var(--text-sm)}.avatar-lg{width:56px;height:56px;font-size:var(--text-lg)}.avatar-xl{width:80px;height:80px;font-size:var(--text-xl)}.divider{height:1px;margin:var(--space-4) 0}.divider,.divider-vertical{background:var(--color-border-light)}.divider-vertical{width:1px;height:auto;margin:0 var(--space-4)}.skeleton{background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1em;margin-bottom:var(--space-2)}.skeleton-title{height:1.5em;width:60%;margin-bottom:var(--space-3)}.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-full)}.skeleton-image{width:100%;padding-top:66.67%}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-2);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);line-height:1;border-radius:var(--radius-full);background:var(--color-error);color:var(--color-text-inverse)}.badge-dot{width:8px;height:8px;min-width:8px;padding:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-4);text-align:center}.empty-state-icon{width:80px;height:80px;margin-bottom:var(--space-4);color:var(--color-text-muted)}.empty-state-title{font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.empty-state-description{font-size:var(--text-sm);color:var(--color-text-muted);max-width:300px}.loading-spinner{width:24px;height:24px;border:2px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);border-radius:var(--radius-full);animation:spin .8s linear infinite}.loading-spinner-lg{width:40px;height:40px;border-width:3px}@keyframes spin{to{transform:rotate(1turn)}}#app{min-height:100vh;background-color:var(--color-bg-secondary)}