:root{--hue-primary: 220;--color-primary: hsl(var(--hue-primary), 80%, 50%);--color-primary-light: hsl(var(--hue-primary), 90%, 65%);--color-primary-dark: hsl(var(--hue-primary), 75%, 40%);--color-primary-alpha: hsla(var(--hue-primary), 80%, 50%, .1);--color-accent: hsl(280, 75%, 60%);--color-bg-body: hsl(220, 20%, 97%);--color-bg-surface: hsl(0, 0%, 100%);--color-text-main: hsl(220, 30%, 15%);--color-text-muted: hsl(220, 15%, 45%);--color-border: hsl(220, 20%, 90%);--color-sidebar: hsl(220, 30%, 15%);--color-sidebar-text: hsl(0, 0%, 95%);--color-sidebar-hover: hsl(220, 30%, 25%);--color-success: hsl(150, 70%, 40%);--color-success-bg: hsla(150, 70%, 40%, .1);--color-warning: hsl(40, 90%, 50%);--color-error: hsl(0, 80%, 55%);--color-error-bg: hsla(0, 80%, 55%, .1);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--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-premium: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);--glass-bg: rgba(255, 255, 255, .7);--glass-border: 1px solid rgba(255, 255, 255, .4);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 24px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.175, .885, .32, 1.275)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--color-bg-body);color:var(--color-text-main);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}#app{display:flex;min-height:100vh;width:100%}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;color:var(--color-text-main)}p{color:var(--color-text-muted)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-bounce);position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;box-shadow:0 4px 14px hsla(var(--hue-primary),80%,50%,.39)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0076ff3b;background:linear-gradient(135deg,var(--color-primary-light),var(--color-accent))}.btn-secondary{background-color:var(--color-bg-surface);color:var(--color-text-main);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}.input-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.4rem}.input-label{font-size:.875rem;font-weight:500;color:var(--color-text-main)}.input-field{padding:.75rem 1rem;font-size:1rem;background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);color:var(--color-text-main);font-family:inherit;width:100%}.input-field:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha)}.card{background:var(--color-bg-surface);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-premium)}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem;width:100%}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.w-full{width:100%}.h-full{height:100%}.fade-in{animation:fadeIn var(--transition-normal) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spinner{width:24px;height:24px;border:3px solid var(--color-primary-alpha);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}