:root{--color-primary-dark: #4A148C;--color-primary: #6B1B9A;--color-primary-light: #8E24AA;--color-accent: #C51162;--color-accent-light: #E91E63;--color-magenta: #D81B60;--color-pink: #F06292;--gradient-primary: linear-gradient(135deg, #4A148C 0%, #6B1B9A 50%, #C51162 100%);--gradient-card: linear-gradient(135deg, rgba(74, 20, 140, .3) 0%, rgba(197, 17, 98, .3) 100%);--gradient-overlay: linear-gradient(180deg, rgba(74, 20, 140, .9) 0%, rgba(107, 27, 154, .95) 100%);--color-bg-primary: #FFFFFF;--color-bg-secondary: #F5F5F5;--color-bg-tertiary: #EEEEEE;--color-text-primary: #212121;--color-text-secondary: #757575;--color-text-tertiary: #9E9E9E;--color-border: rgba(197, 17, 98, .3);--color-border-light: rgba(197, 17, 98, .15);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-xl: 2rem;--radius-full: 9999px;--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-display: "Outfit", "Inter", sans-serif;--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: 2rem;--font-size-4xl: 2.5rem;--font-size-5xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--shadow-sm: 0 2px 8px rgba(74, 20, 140, .1);--shadow-md: 0 4px 16px rgba(74, 20, 140, .15);--shadow-lg: 0 8px 24px rgba(74, 20, 140, .2);--shadow-xl: 0 12px 32px rgba(74, 20, 140, .25);--shadow-glow: 0 0 20px rgba(197, 17, 98, .4);--shadow-glow-strong: 0 0 30px rgba(197, 17, 98, .6);--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-blur: blur(20px) saturate(180%);--bg-card: var(--color-bg-primary);--bg-input: var(--color-bg-primary);--text-color: var(--color-text-primary);--text-primary: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--border-color: var(--color-border);--page-bg: transparent;--header-bg: var(--glass-bg);--primary: var(--color-accent);--accent-color: var(--color-accent)}:root[data-theme=dark]{--color-bg-primary: #0A0014;--color-bg-secondary: #1A0033;--color-bg-tertiary: #2D1B4E;--color-text-primary: #FFFFFF;--color-text-secondary: #D1C4E9;--color-text-tertiary: #B39DDB;--color-border: rgba(197, 17, 98, .4);--color-border-light: rgba(197, 17, 98, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 32px rgba(0, 0, 0, .8);--shadow-glow: 0 0 20px rgba(197, 17, 98, .5);--shadow-glow-strong: 0 0 30px rgba(197, 17, 98, .7);--glass-bg: rgba(74, 20, 140, .15);--glass-border: rgba(197, 17, 98, .3)}.gradient-primary{background:var(--gradient-primary)}.gradient-card{background:var(--gradient-card)}.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.card{background:var(--color-bg-primary);border-radius:var(--radius-lg);border:2px solid var(--color-border);padding:var(--space-lg);transition:all var(--transition-base)}.card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.card-glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);transition:all var(--transition-base);cursor:pointer;border:none;outline:none}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.btn-outline{background:transparent;color:var(--color-accent);border:2px solid var(--color-accent)}.btn-outline:hover{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-glow)}.btn-ghost{background:transparent;color:var(--color-accent)}.btn-ghost:hover{background:var(--glass-bg)}.tag{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);border:2px solid var(--color-accent);color:var(--color-accent);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background:transparent;transition:all var(--transition-fast)}.tag:hover{background:var(--color-accent);color:#fff}.input{width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);border:2px solid var(--color-border);background:var(--color-bg-primary);color:var(--color-text-primary);font-size:var(--font-size-base);transition:all var(--transition-base);outline:none}.input:focus{border-color:var(--color-accent);box-shadow:var(--shadow-glow)}.input::placeholder{color:var(--color-text-tertiary)}.search-box{position:relative;width:100%}.search-box input{padding-left:var(--space-xl)}.search-icon{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes glow{0%,to{box-shadow:var(--shadow-glow)}50%{box-shadow:var(--shadow-glow-strong)}}.animate-fade-in{animation:fadeIn var(--transition-base)}.animate-slide-in{animation:slideIn var(--transition-base)}.animate-glow{animation:glow 2s ease-in-out infinite}.guide-container{max-width:1000px;margin:0 auto;padding:var(--space-2xl) var(--space-lg)}.guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:2px solid var(--color-border)}.guide-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin:0}:root:not([data-theme=dark]) .guide-title{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-primary{background:var(--gradient-primary);color:#fff;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);border:none;cursor:pointer;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);transition:all var(--transition-fast);box-shadow:var(--shadow-md);display:inline-flex;align-items:center;gap:var(--space-xs)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn-secondary{background:transparent;color:var(--color-text-primary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);transition:all var(--transition-fast)}.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--glass-bg)}.problem-list{display:flex;flex-direction:column;gap:var(--space-lg)}.problem-card{background:var(--color-bg-primary);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-lg);transition:all var(--transition-base);position:relative;overflow:hidden}.problem-link{text-decoration:none;color:inherit;display:block}.problem-detail-card{transform:none!important;cursor:default}.problem-detail-card:hover{transform:none!important}.problem-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base)}.problem-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-glow);transform:translate(4px)}.problem-card:hover:before{opacity:1}.inline-avatar-wrapper{position:relative;width:28px;height:28px;border-radius:var(--radius-full);padding:2px;background:var(--gradient-primary);flex-shrink:0;box-shadow:0 2px 6px #00000026;transition:transform var(--transition-fast)}.inline-avatar-wrapper:hover{transform:scale(1.1)}.inline-avatar{width:100%;height:100%;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-bg-primary);display:block}.problem-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md);gap:var(--space-md)}.problem-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-sm) 0;color:var(--color-text-primary);line-height:var(--line-height-tight);padding-right:110px}.problem-title:hover{color:var(--color-accent)}.problem-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary);display:flex;gap:var(--space-sm);align-items:center}.problem-tags{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-xs)}.problem-meta span:before{content:"•";margin-right:var(--space-xs);color:var(--color-accent)}.problem-meta span:first-child:before{content:"";margin:0}.problem-description{margin-bottom:var(--space-lg);line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}.problem-description p{margin:0 0 var(--space-sm) 0}.problem-description img{display:block}.problem-image-container{width:100%;height:400px;background:var(--color-bg-secondary);border-radius:var(--radius-md);margin-top:var(--space-md);border:2px solid var(--color-border);overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.problem-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-base)}.problem-image-container:hover .problem-image{transform:scale(1.02)}.problem-tags{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md)}.tag{background:transparent;border:2px solid var(--color-accent);color:var(--color-accent);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);transition:all var(--transition-fast)}.tag:hover{background:var(--color-accent);color:#fff;transform:translateY(-2px)}.vote-controls{display:flex;flex-direction:row;align-items:center;gap:4px;padding:4px 6px;border-radius:var(--radius-md);border:2px solid var(--color-border-light)}.problem-vote-controls{position:absolute;top:var(--space-md);right:var(--space-md);z-index:2}.vote-btn{background:none;border:none;cursor:pointer;color:var(--color-text-tertiary);padding:4px;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.vote-btn:hover{color:var(--color-accent);background:var(--glass-bg);transform:scale(1.1)}.vote-btn.active{color:var(--color-accent)}.vote-count{font-weight:var(--font-weight-bold);font-size:var(--font-size-base);color:var(--color-text-primary);min-width:1.5rem;text-align:center}.problem-actions{display:flex;gap:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border-light)}.solutions-section{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:2px solid var(--color-border)}.solutions-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-lg);color:var(--color-text-primary)}.solution-item{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-md);border:2px solid var(--color-border-light);transition:all var(--transition-base)}.solution-item:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}.solution-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.solution-author{display:flex;align-items:center;gap:var(--space-sm);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);color:var(--color-text-primary)}.solution-title{margin-bottom:var(--space-sm)}.solution-title h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.solution-content{color:var(--color-text-secondary);line-height:var(--line-height-normal)}.add-problem-form,.add-solution-form{background:var(--color-bg-primary);padding:var(--space-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-bottom:var(--space-xl);border:2px solid var(--color-border)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;margin-bottom:var(--space-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);font-size:var(--font-size-sm)}.form-input,.form-textarea{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-bg-primary);transition:all var(--transition-fast)}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--shadow-glow)}.form-textarea{min-height:120px;resize:vertical}.approved-badge{background:var(--gradient-primary);color:#fff;font-size:var(--font-size-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);display:inline-flex;align-items:center;gap:var(--space-xs)}@media(max-width:768px){.guide-container{padding:var(--space-xl) var(--space-md)}.guide-title{font-size:var(--font-size-3xl)}.guide-header{flex-direction:column;gap:var(--space-md);align-items:flex-start}.problem-card{padding:var(--space-md)}.problem-image-container{height:250px}.problem-header{flex-direction:column}.vote-controls{flex-direction:row;justify-content:center}.add-problem-form,.add-solution-form{padding:var(--space-lg)}}@media(max-width:480px){.guide-title{font-size:var(--font-size-2xl)}.problem-title{font-size:var(--font-size-lg);padding-right:90px}.problem-tags{gap:var(--space-xs)}.tag{font-size:.65rem;padding:.2rem var(--space-sm)}}