*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;height:100%}#root,.app{min-height:100vh;height:100%;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.text-center{text-align:center}.text-gradient{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:600;text-decoration:none;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animate-fade-in{animation:fadeIn .6s ease-out}.animate-slide-in{animation:slideIn .4s ease-out}.animate-pulse{animation:pulse 2s infinite}@media(max-width:768px){.container{padding:0 var(--spacing-sm)}html{font-size:14px}}:root{--primary-color: #ff6b35;--primary-dark: #e55a2b;--secondary-color: #f72585;--accent-color: #4cc9f0;--success-color: #7209b7;--warning-color: #ffbe0b;--danger-color: #fb8500;--chaos-green: #06ffa5;--toxic-purple: #b084cc;--nightmare-red: #d00000;--vomit-yellow: #ffff3f;--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-card: #1c2128;--bg-card-hover: #262c36;--text-primary: #f0f6fc;--text-secondary: #8b949e;--text-muted: #6e7681;--text-accent: #ff6b35;--text-chaos: #4cc9f0;--border-color: #30363d;--border-accent: #ff6b35;--border-chaos: #f72585;--border-radius: 12px;--border-radius-lg: 16px;--gradient-chaos: linear-gradient(135deg, #ff6b35, #f72585, #4cc9f0);--gradient-nightmare: linear-gradient(45deg, #d00000, #fb8500, #ffbe0b);--gradient-toxic: linear-gradient(90deg, #06ffa5, #7209b7, #b084cc);--gradient-vomit: linear-gradient(180deg, #ffff3f, #ffbe0b, #ff6b35);--shadow-sm: 0 1px 2px 0 rgba(255, 107, 53, .1);--shadow-md: 0 4px 6px -1px rgba(255, 107, 53, .2), 0 2px 4px -2px rgba(247, 37, 133, .1);--shadow-lg: 0 10px 15px -3px rgba(255, 107, 53, .3), 0 4px 6px -4px rgba(247, 37, 133, .2);--shadow-xl: 0 20px 25px -5px rgba(255, 107, 53, .4), 0 8px 10px -6px rgba(247, 37, 133, .3);--shadow-chaos: 0 0 20px rgba(76, 201, 240, .5);--shadow-nightmare: 0 0 30px rgba(208, 0, 0, .6);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out;--transition-chaos: .3s cubic-bezier(.68, -.55, .265, 1.55);--level-mild: #06ffa5;--level-moderate: #ffbe0b;--level-severe: #fb8500;--level-unhinged: #d00000}@media(prefers-color-scheme:dark){:root{--bg-primary: #000000;--bg-secondary: #0d1117;--bg-tertiary: #161b22}}@media(prefers-contrast:high){:root{--primary-color: #ff0080;--secondary-color: #00ff80;--accent-color: #8000ff;--bg-primary: #000000;--text-primary: #ffffff;--border-color: #ff6b35}}.header{background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-bottom:1px solid var(--border-color);padding:var(--spacing-2xl) 0;position:relative;overflow:hidden}.header:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(99,102,241,.1) 50%,transparent 70%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.header-content{text-align:center;position:relative;z-index:1}.header-title{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);animation:fadeIn .8s ease-out}.title-icon{font-size:var(--font-size-4xl);animation:pulse 2s infinite}.title-text{font-size:var(--font-size-3xl);font-weight:800;letter-spacing:-.025em}.header-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto;animation:fadeIn .8s ease-out .2s both}@media(max-width:768px){.header{padding:var(--spacing-xl) 0}.header-title{flex-direction:column;gap:var(--spacing-sm)}.title-text{font-size:var(--font-size-2xl)}.header-subtitle{font-size:var(--font-size-base)}}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-2xl) 0 var(--spacing-lg);margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.footer-section{animation:fadeIn .6s ease-out}.footer-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);position:relative}.footer-title:after{content:"";position:absolute;bottom:-4px;left:0;width:30px;height:2px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:1px}.footer-description,.footer-text{color:var(--text-secondary);line-height:1.6;font-size:var(--font-size-sm)}.tech-stack{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tech-item{background:var(--bg-tertiary);color:var(--text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-xs);font-weight:500;border:1px solid var(--border-color);transition:all var(--transition-normal)}.tech-item:hover{background:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.footer-bottom{padding-top:var(--spacing-lg);border-top:1px solid var(--border-color);text-align:center}.copyright{color:var(--text-muted);font-size:var(--font-size-xs);line-height:1.5}@media(max-width:768px){.footer{padding:var(--spacing-xl) 0 var(--spacing-md)}.footer-content{grid-template-columns:1fr;gap:var(--spacing-lg);text-align:center}.footer-title:after{left:50%;transform:translate(-50%)}.tech-stack{justify-content:center}}.category-selector{margin-bottom:var(--spacing-2xl)}.category-title{font-size:var(--font-size-xl);font-weight:600;text-align:center;margin-bottom:var(--spacing-lg);color:var(--text-primary)}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);max-width:800px;margin:0 auto}.category-button{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--border-radius-lg);color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.category-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left var(--transition-slow)}.category-button:hover:before{left:100%}.category-button:hover{transform:translateY(-4px);border-color:var(--primary-color);box-shadow:var(--shadow-lg)}.category-button.active{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.category-button.active:hover{transform:translateY(-6px)}.category-icon{font-size:var(--font-size-3xl);transition:transform var(--transition-normal)}.category-button:hover .category-icon{transform:scale(1.2) rotate(5deg)}.category-label{font-size:var(--font-size-lg);font-weight:600;text-align:center}@media(max-width:768px){.category-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.category-button{padding:var(--spacing-md)}.category-icon{font-size:var(--font-size-2xl)}.category-label{font-size:var(--font-size-base)}}.seriousness-slider{margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:var(--bg-card);border-radius:var(--border-radius-lg);border:1px solid var(--border-color)}.slider-title{font-size:var(--font-size-xl);font-weight:600;text-align:center;margin-bottom:var(--spacing-lg);color:var(--text-primary)}.slider-container{max-width:600px;margin:0 auto}.slider-wrapper{position:relative;margin-bottom:var(--spacing-lg)}.slider{width:100%;height:8px;border-radius:4px;background:var(--bg-tertiary);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative;z-index:2}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--slider-color, var(--primary-color));cursor:pointer;border:3px solid white;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-lg)}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--slider-color, var(--primary-color));cursor:pointer;border:3px solid white;box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-lg)}.slider-track{position:absolute;top:50%;left:0;right:0;height:8px;background:var(--bg-tertiary);border-radius:4px;transform:translateY(-50%);z-index:1}.slider-progress{height:100%;border-radius:4px;transition:all var(--transition-normal);position:relative;overflow:hidden}.slider-progress:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.slider-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);text-align:center}.slider-label{font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-normal);padding:var(--spacing-xs);border-radius:var(--border-radius)}.slider-label.active{font-weight:700;transform:scale(1.05)}.current-level{text-align:center;margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.level-indicator{font-size:var(--font-size-lg);color:var(--text-secondary)}@media(max-width:768px){.seriousness-slider{padding:var(--spacing-lg)}.slider-labels{grid-template-columns:repeat(2,1fr);gap:var(--spacing-xs)}.slider-label{font-size:var(--font-size-xs)}.level-indicator{font-size:var(--font-size-base)}}.advice-card{background:var(--bg-card);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);padding:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);box-shadow:var(--shadow-lg);transition:all var(--transition-normal);position:relative;overflow:hidden}.advice-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color),var(--accent-color))}.advice-content{min-height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-xl)}.loading-state{text-align:center;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-lg);font-weight:500}.advice-display{text-align:center;max-width:800px;margin:0 auto}.advice-icon{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-lg);animation:pulse 2s infinite}.advice-text{font-size:var(--font-size-xl);font-weight:500;line-height:1.6;color:var(--text-primary);margin:0 0 var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-tertiary);border-radius:var(--border-radius);border-left:4px solid var(--primary-color);position:relative}.advice-text:before{content:'"';position:absolute;top:-10px;left:10px;font-size:3rem;color:var(--primary-color);font-family:serif}.advice-disclaimer{color:var(--text-muted);font-style:italic}.empty-state{text-align:center;color:var(--text-secondary)}.empty-icon{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-md);opacity:.7}.empty-text{font-size:var(--font-size-lg);font-weight:500}.advice-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.generate-btn{font-size:var(--font-size-lg);padding:var(--spacing-md) var(--spacing-xl);min-width:250px;position:relative;overflow:hidden}.generate-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-slow)}.generate-btn:hover:before{left:100%}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.reset-btn{padding:var(--spacing-sm) var(--spacing-lg)}.btn-icon{margin-right:var(--spacing-sm)}.btn-spinner{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-right:var(--spacing-sm)}@media(max-width:768px){.advice-card{padding:var(--spacing-lg)}.advice-content{min-height:150px}.advice-text{font-size:var(--font-size-lg);padding:var(--spacing-md)}.generate-btn{min-width:200px;font-size:var(--font-size-base)}.advice-actions{flex-direction:column;align-items:center}}