*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;color:#fff;min-height:100vh}button{font-family:inherit;cursor:pointer}input,textarea{font-family:inherit}::selection{background:#1db9544d;color:#fff}:root{--color-primary: #FF4500;--color-primary-dark: #CC3700;--color-accent: #FF5722;--color-upvote: #FF4500;--color-downvote: #7193FF;--color-bg: #FFFFFF;--color-bg-elevated: #FFFFFF;--color-bg-highlight: #F6F7F8;--color-bg-card: #FFFFFF;--color-border: #E5E7EB;--color-text-primary: #1C1C1C;--color-text-secondary: #7C7C7C;--color-text-tertiary: #A5A5A5;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 22px;--font-size-2xl: 28px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text-primary);min-height:100vh;margin:0;padding:0;-webkit-font-smoothing:antialiased}#root{width:100%;min-height:100vh}.app-container{width:100%;min-height:100vh;background:var(--color-bg);display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh}.app-body{display:flex;flex:1;max-width:1200px;margin:0 auto;width:100%;padding-top:48px}.sidebar{width:270px;flex-shrink:0;padding:var(--space-4);position:sticky;top:48px;height:calc(100vh - 48px);overflow-y:auto}.sidebar-section{margin-bottom:var(--space-6)}.sidebar-section-title{font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-1)}.sidebar-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:transparent;border:none;color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:background var(--transition-fast);width:100%;text-align:left}.sidebar-item:hover{background:var(--color-bg-highlight)}.sidebar-item.active{background:var(--color-bg-highlight);font-weight:600}.sidebar-item svg{width:20px;height:20px;flex-shrink:0}.sidebar-item-icon{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-bg-highlight);display:flex;align-items:center;justify-content:center;font-size:16px}.header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);position:fixed;top:0;left:0;right:0;z-index:100;height:48px}.header-logo{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary);text-decoration:none;flex-shrink:0}.header-logo svg{width:32px;height:32px}.header-search{flex:1;max-width:600px;position:relative}.header-search input{width:100%;padding:var(--space-2) var(--space-4);padding-left:40px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-bg-highlight);font-size:var(--font-size-sm);color:var(--color-text-primary);transition:all var(--transition-fast)}.header-search input:focus{outline:none;border-color:var(--color-primary);background:var(--color-bg-elevated)}.header-search input::placeholder{color:var(--color-text-tertiary)}.header-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--color-text-tertiary)}.header-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.header-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-fast)}.header-btn:hover{background:var(--color-bg-highlight);color:var(--color-text-primary)}.header-btn svg{width:20px;height:20px}.profile-avatar{width:32px;height:32px;border-radius:var(--radius-md);background:var(--color-bg-highlight);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-sm);color:var(--color-text-primary);overflow:hidden;cursor:pointer;border:none}.profile-avatar:hover{outline:2px solid var(--color-border)}.profile-avatar img{width:100%;height:100%;object-fit:cover}.filter-chips{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.filter-chips::-webkit-scrollbar{display:none}.filter-chip{flex-shrink:0;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-bg-highlight);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.filter-chip:hover{background:var(--color-bg-elevated)}.filter-chip.active{background:var(--color-text-primary);color:#fff}.lang-btn-small{flex-shrink:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:color var(--transition-fast)}.lang-btn-small:hover{color:var(--color-text-primary)}.main-content{flex:1;min-width:0;padding:var(--space-4);max-width:700px}.main-content::-webkit-scrollbar{width:8px}.main-content::-webkit-scrollbar-track{background:transparent}.main-content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.main-content::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.quick-access{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);padding:var(--space-2) var(--space-4)}.quick-card{display:flex;align-items:center;gap:var(--space-3);background:var(--color-bg-highlight);border:none;border-radius:var(--radius-sm);padding:0;overflow:hidden;cursor:pointer;transition:background var(--transition-fast);height:56px}.quick-card:hover{background:var(--color-bg-card)}.quick-card:disabled{opacity:.5;cursor:not-allowed}.quick-card-image{width:56px;height:56px;background-size:cover;background-position:center;flex-shrink:0}.quick-card-emoji{width:56px;height:56px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.quick-card-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);text-align:left;padding-right:var(--space-3);line-height:1.3}.section{margin-bottom:var(--space-4)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.section-header h2{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary)}.see-all-btn{background:none;border:none;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer}.see-all-btn:hover{color:var(--color-text-primary)}.empty-section{padding:var(--space-6) var(--space-4);text-align:center;color:var(--color-text-tertiary)}.popular-posts-list{display:flex;flex-direction:column;gap:var(--space-2)}.popular-post-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-card);border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;transition:border-color var(--transition-fast)}.popular-post-item:hover{border-color:var(--color-text-tertiary)}.popular-post-rank-number{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700;color:var(--color-primary)}.popular-post-item:nth-child(1) .popular-post-rank-number{color:gold}.popular-post-item:nth-child(2) .popular-post-rank-number{color:silver}.popular-post-item:nth-child(3) .popular-post-rank-number{color:#cd7f32}.post-category-badge{font-size:var(--font-size-xs);color:var(--color-text-secondary);background:var(--color-bg-highlight);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);flex-shrink:0}.popular-post-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.popular-post-title-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}.popular-post-title{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popular-post-meta{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.horizontal-scroll{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--space-2)}.horizontal-scroll::-webkit-scrollbar{display:none}.test-card{flex-shrink:0;width:160px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0;cursor:pointer;text-align:left;scroll-snap-align:start;transition:all var(--transition-fast);overflow:hidden}.test-card-image{width:100%;height:120px;background-size:cover;background-position:center}.test-card-placeholder{width:100%;height:120px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:flex;align-items:center;justify-content:center}.test-card-placeholder span{font-size:36px}.test-card-info{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3)}.test-card-category{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}.test-card-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);line-height:1.3}.test-card-desc,.test-card-views{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.explore-header{padding:var(--space-6) var(--space-4) var(--space-4)}.explore-header h1{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--space-4)}.search-bar{display:flex;align-items:center;gap:var(--space-3);background:var(--color-bg-highlight);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.search-bar svg{color:var(--color-text-tertiary);flex-shrink:0}.search-bar input{flex:1;border:none;background:transparent;font-size:var(--font-size-base);color:var(--color-text-primary);outline:none}.search-bar input::placeholder{color:var(--color-text-tertiary)}.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);padding:var(--space-4)}.category-card{aspect-ratio:1;border-radius:var(--radius-md);border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);cursor:pointer;transition:transform var(--transition-fast)}.category-card:nth-child(1){background:linear-gradient(135deg,#9b59b6,#af52de)}.category-card:nth-child(2){background:linear-gradient(135deg,#e74c3c,#c0392b)}.category-card:nth-child(3){background:linear-gradient(135deg,#3498db,#2980b9)}.category-card:hover{transform:scale(1.02)}.category-card-emoji{font-size:48px}.category-card-name{font-size:var(--font-size-md);font-weight:700;color:var(--color-text-primary)}.community-header{padding:var(--space-6) var(--space-4) var(--space-4)}.community-list{display:flex;flex-direction:column;gap:var(--space-2)}.community-post{background:var(--color-bg-card);border-radius:var(--radius-sm);padding:var(--space-3);border:1px solid var(--color-border);cursor:pointer;transition:border-color var(--transition-fast)}.community-post:hover{border-color:var(--color-text-tertiary)}.post-category{display:inline-block;font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:500;margin-bottom:var(--space-2);background:var(--color-bg-highlight);padding:2px 8px;border-radius:var(--radius-full)}.post-title{font-size:var(--font-size-md);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-2);line-height:1.4}.post-preview{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.post-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.post-meta-item{display:flex;align-items:center;gap:var(--space-1)}.post-meta-item svg{width:16px;height:16px}.profile-header{text-align:center;padding:var(--space-8) var(--space-4)}.profile-avatar-large{width:120px;height:120px;border-radius:24px;background:var(--color-bg-highlight);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;color:var(--color-text-primary);margin:0 auto var(--space-4);box-shadow:0 8px 24px #9b59b626;overflow:hidden}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.profile-header h1{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-2)}.profile-header p{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.profile-stats{display:flex;justify-content:center;gap:var(--space-8);padding:var(--space-6) var(--space-4)}.stat{text-align:center}.stat-number{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary)}.stat-label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.btn-login{display:block;width:calc(100% - 32px);margin:0 auto;padding:var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.btn-login:hover{transform:scale(1.02);background:var(--color-primary-dark)}.bottom-nav{display:none}.create-post-fab{position:fixed;bottom:var(--space-6);right:var(--space-6);width:56px;height:56px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #ff45004d;transition:all var(--transition-fast);z-index:50}.create-post-fab:hover{transform:scale(1.05);box-shadow:0 6px 16px #ff450066}.create-post-fab svg{width:24px;height:24px}.start-section{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-8) var(--space-4);min-height:100%;position:relative}.btn-back-home{position:absolute;top:var(--space-4);left:var(--space-4);width:40px;height:40px;border-radius:50%;border:none;background:var(--color-bg-highlight);color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition-fast)}.btn-back-home:hover{background:var(--color-bg-card)}.start-section h1{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-3)}.start-section .subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.btn-start{padding:var(--space-4) var(--space-8);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.btn-start:hover{transform:scale(1.04);background:var(--color-primary-dark)}.test-section{display:flex;flex-direction:column;padding:var(--space-4);min-height:100%}.test-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}.btn-back{width:40px;height:40px;border-radius:50%;border:none;background:var(--color-bg-highlight);color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--transition-fast)}.btn-back:hover{background:var(--color-bg-card)}.progress-wrapper{flex:1}.progress-bar{height:4px;background:var(--color-bg-highlight);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2)}.progress-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .3s ease}.progress-text{font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:center}.question-card{flex:1;display:flex;flex-direction:column;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.question-header{text-align:center;margin-bottom:var(--space-6)}.question-number{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-primary);color:#fff;font-size:var(--font-size-sm);font-weight:600;border-radius:var(--radius-full);margin-bottom:var(--space-4)}.question-title{display:block;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary);line-height:1.5}.question-subtitle{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-6)}.options-list{display:flex;flex-direction:column;gap:var(--space-3)}.option-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-bg-highlight);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left}.option-btn:hover{background:var(--color-bg-card)}.option-btn.selected{background:#9b59b614;border-color:var(--color-primary)}.option-label{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-bg-card);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);flex-shrink:0;transition:all var(--transition-fast)}.option-btn.selected .option-label{background:var(--color-primary);color:#fff}.option-text{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.4}.option-btn.selected .option-text{color:var(--color-text-primary)}.btn-submit{padding:var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast);margin-top:var(--space-4)}.btn-submit:hover{transform:scale(1.02);background:var(--color-primary-dark)}.btn-submit.full-width{width:100%}.analyzing-section{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-8);min-height:100%}.analyzing-icon{font-size:72px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.analyzing-section h2{font-size:var(--font-size-xl);font-weight:600;color:var(--color-primary);margin:var(--space-6) 0 var(--space-4)}.analyzing-dots{display:flex;gap:var(--space-2);margin-bottom:var(--space-6)}.analyzing-dots span{width:8px;height:8px;border-radius:50%;background:var(--color-primary);animation:bounce 1.4s ease-in-out infinite}.analyzing-dots span:nth-child(1){animation-delay:0s}.analyzing-dots span:nth-child(2){animation-delay:.15s}.analyzing-dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.analyzing-message{font-size:var(--font-size-base);color:var(--color-text-secondary);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-section{padding:var(--space-4);overflow-y:auto}.result-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-5)}.result-grade{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);font-weight:700;color:#fff}.result-title-text{font-size:var(--font-size-xl);font-weight:700;color:var(--color-primary)}.result-card{background:var(--color-bg-highlight);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;margin-bottom:var(--space-4)}.result-emoji{font-size:56px;margin-bottom:var(--space-3)}.result-score{display:flex;align-items:baseline;justify-content:center;margin-bottom:var(--space-3)}.score-number{font-size:56px;font-weight:700;color:var(--color-primary);line-height:1}.score-percent{font-size:var(--font-size-xl);font-weight:600;color:var(--color-primary);margin-left:var(--space-1)}.result-message{font-size:var(--font-size-base);color:var(--color-text-secondary)}.share-card-wrapper{position:absolute;left:-9999px}.share-card{width:360px;aspect-ratio:9 / 16;background:linear-gradient(165deg,#9b59b6,#8e44ad,#af52de,#c39bd3,#d7bde2);border-radius:24px;padding:40px 32px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center}.share-card-header{display:flex;align-items:center;gap:10px}.share-card-logo{width:40px;height:40px;background:#fff;border-radius:12px;object-fit:cover}.share-card-brand{font-size:20px;font-weight:700;color:#fff}.share-card-title{font-size:15px;font-weight:500;color:#ffffffe6;background:#00000026;padding:8px 20px;border-radius:20px}.share-card-emoji{font-size:80px}.share-card-score{font-size:72px;font-weight:800;color:#fff}.share-card-grade{font-size:16px;font-weight:700;color:#fff;background:#ffffff40;padding:10px 24px;border-radius:30px}.share-card-message{font-size:22px;font-weight:700;color:#fff}.share-card-footer{font-size:14px;font-weight:600;color:#fffffff2;background:#0003;padding:12px 28px;border-radius:25px}.category-section{background:var(--color-bg-highlight);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.category-section h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-primary);margin-bottom:var(--space-4)}.category-item{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.category-item:last-child{margin-bottom:0}.category-label{width:90px;font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-shrink:0}.category-bar-container{flex:1;height:6px;background:var(--color-bg-card);border-radius:var(--radius-full);overflow:hidden}.category-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .5s ease}.category-score{width:40px;font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary);text-align:right}.detail-card{background:var(--color-bg-highlight);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.detail-card p{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.6}.tip-card{background:#9b59b614;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.tip-card h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-primary);margin-bottom:var(--space-3)}.tip-card p{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.6}.encouragement-card{text-align:center;padding:var(--space-4)}.encouragement-card p{font-size:var(--font-size-sm);color:var(--color-text-tertiary);line-height:1.6}.comparison-card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.comparison-card h3{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-4)}.comparison-stats{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.stat-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-highlight);border-radius:var(--radius-md)}.stat-item.highlight{background:#9b59b61f;border:1px solid var(--color-primary)}.stat-icon{font-size:var(--font-size-xl)}.stat-info{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.stat-value{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary)}.stat-item.highlight .stat-value{color:var(--color-primary)}.grade-distribution{padding-top:var(--space-3);border-top:1px solid var(--color-bg-highlight)}.grade-distribution h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-3)}.grade-bars{display:flex;flex-direction:column;gap:var(--space-2)}.grade-bar-item{display:flex;align-items:center;gap:var(--space-2)}.grade-bar-item.my-grade .grade-label{color:var(--color-primary);font-weight:700}.grade-bar-item.my-grade .grade-bar-fill{background:var(--color-primary)}.grade-label{width:20px;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary)}.grade-bar-bg{flex:1;height:8px;background:var(--color-bg-highlight);border-radius:var(--radius-full);overflow:hidden}.grade-bar-fill{height:100%;background:var(--color-text-tertiary);border-radius:var(--radius-full);transition:width .5s ease}.grade-percent{width:36px;font-size:var(--font-size-xs);color:var(--color-text-tertiary);text-align:right}.result-buttons{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-4)}.btn-save-image{width:100%;padding:var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.btn-save-image:hover{transform:scale(1.02);background:var(--color-primary-dark)}.btn-share{width:100%;padding:var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-text-tertiary);background:transparent;color:var(--color-text-primary);font-size:var(--font-size-md);font-weight:700;cursor:pointer;transition:all var(--transition-fast)}.btn-share:hover{background:var(--color-bg-highlight);border-color:var(--color-text-secondary)}.btn-restart{width:100%;padding:var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-bg-highlight);color:var(--color-text-secondary);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-restart:hover{background:var(--color-bg-card);color:var(--color-text-primary)}.profile-loading{display:flex;align-items:center;justify-content:center;min-height:400px}.loading-spinner{width:40px;height:40px;border:3px solid #E5E7EB;border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.profile-avatar-large img{width:100%;height:100%;border-radius:50%;object-fit:cover}.profile-email{font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-top:var(--space-1)}.auth-tabs{display:flex;gap:var(--space-2);padding:0 var(--space-4);margin-bottom:var(--space-4)}.auth-tab{flex:1;padding:var(--space-3);border-radius:var(--radius-md);border:none;background:var(--color-bg-highlight);color:var(--color-text-secondary);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.auth-tab:hover{background:var(--color-bg-card)}.auth-tab.active{background:var(--color-primary);color:#fff}.auth-form{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-4)}.auth-input{width:100%;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-bg-highlight);background:var(--color-bg-highlight);color:var(--color-text-primary);font-size:var(--font-size-base);outline:none;transition:all var(--transition-fast)}.auth-input:focus{border-color:var(--color-primary);background:var(--color-bg-card)}.auth-input::placeholder{color:var(--color-text-tertiary)}.auth-error{padding:var(--space-3);border-radius:var(--radius-md);background:#f443361a;color:#f44336;font-size:var(--font-size-sm);text-align:center}.auth-divider{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-4)}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--color-bg-highlight)}.auth-divider span{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.btn-google{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:calc(100% - 32px);margin:0 auto;padding:var(--space-4);border-radius:var(--radius-full);border:1px solid #E5E7EB;background:#fff;color:#000;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-google:hover{background:#f9fafb}.btn-google:disabled{opacity:.6;cursor:not-allowed}.btn-google svg{flex-shrink:0}.btn-login:disabled{opacity:.6;cursor:not-allowed}.btn-logout{display:block;width:calc(100% - 32px);margin:0 auto;padding:var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-text-tertiary);background:transparent;color:var(--color-text-primary);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-logout:hover{background:var(--color-bg-highlight);border-color:var(--color-text-secondary)}.community-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) var(--space-4) var(--space-4)}.community-header h1{font-size:var(--font-size-2xl);font-weight:700}.btn-write{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-write:hover{background:var(--color-primary-dark)}.community-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center}.community-empty p{color:var(--color-text-secondary);margin-bottom:var(--space-4)}.btn-write-first{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-base);font-weight:600;cursor:pointer}.community-list{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-4)}.community-post{background:var(--color-bg-card);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid #E5E7EB;cursor:pointer;transition:background var(--transition-fast)}.community-post:hover{background:var(--color-bg-highlight)}.post-category{font-size:var(--font-size-xs);color:var(--color-primary);font-weight:600;margin-bottom:var(--space-2)}.post-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2);line-height:1.4}.post-preview{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);line-height:1.5}.post-meta{display:flex;gap:var(--space-4);font-size:var(--font-size-xs);color:var(--color-text-secondary)}.like-btn.liked{color:#f44336}.post-detail-page{padding-bottom:100px}.post-detail-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--color-bg-highlight)}.post-detail-header h2{font-size:var(--font-size-lg);font-weight:600}.post-detail-content{padding:var(--space-4)}.post-detail-author{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.author-avatar{width:40px;height:40px;border-radius:50%;background:var(--color-bg-highlight);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--color-text-secondary);overflow:hidden}.author-avatar img{width:100%;height:100%;object-fit:cover}.author-info{display:flex;flex-direction:column;gap:var(--space-1)}.author-name{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary)}.post-time{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.post-detail-category{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:#9b59b614;color:var(--color-primary);font-size:var(--font-size-xs);font-weight:600;margin-bottom:var(--space-3)}.post-detail-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-4);line-height:1.4}.post-detail-body{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.8;white-space:pre-wrap;margin-bottom:var(--space-4)}.post-actions{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--color-bg-highlight);border-bottom:1px solid var(--color-bg-highlight)}.action-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:none;background:var(--color-bg-highlight);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--color-bg-card)}.action-btn.like.liked{background:#f443361a;color:#f44336}.action-btn.delete{margin-left:auto;color:var(--color-text-secondary)}.action-btn.delete:hover{background:#f443361a;color:#f44336}.action-btn:disabled{opacity:.5;cursor:not-allowed}.comments-section{padding:var(--space-4)}.comments-section h3{font-size:var(--font-size-md);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-4)}.comment-input-container{margin-bottom:var(--space-4)}.comment-input-wrapper{display:flex;align-items:center;gap:var(--space-2)}.anonymous-checkbox{display:flex;align-items:center;gap:var(--space-1);cursor:pointer;font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;padding:0 var(--space-2)}.anonymous-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}.anonymous-checkbox span{-webkit-user-select:none;user-select:none}.comment-input{flex:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-bg-highlight);background:var(--color-bg-highlight);color:var(--color-text-primary);font-size:var(--font-size-sm);outline:none}.comment-input:focus{border-color:var(--color-primary)}.comment-input::placeholder{color:var(--color-text-tertiary)}.btn-send-comment{padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-send-comment:hover{background:var(--color-primary-dark)}.btn-send-comment:disabled{opacity:.5;cursor:not-allowed}.login-prompt{text-align:center;padding:var(--space-4);color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.comments-list{display:flex;flex-direction:column;gap:var(--space-4)}.comment-item{display:flex;gap:var(--space-3)}.comment-avatar{width:32px;height:32px;border-radius:50%;background:var(--color-bg-highlight);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-secondary);flex-shrink:0;overflow:hidden}.comment-avatar img{width:100%;height:100%;object-fit:cover}.comment-body{flex:1}.comment-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}.comment-author{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary)}.comment-time{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.comment-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.comment-actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}.comment-action-btn{padding:var(--space-1) var(--space-2);border:none;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-xs);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.comment-action-btn:hover{background:var(--color-bg-highlight)}.comment-action-btn.like.liked,.comment-action-btn.delete:hover{color:#f44336}.comment-action-btn:disabled{cursor:default;opacity:.5}.no-comments{text-align:center;padding:var(--space-6);color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:var(--space-4)}.modal-content{width:100%;max-width:430px;max-height:90vh;background:var(--color-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--color-bg-highlight)}.modal-header h2{font-size:var(--font-size-lg);font-weight:600}.btn-close{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.btn-close:hover{background:var(--color-bg-highlight);color:var(--color-text-primary)}.modal-body{flex:1;overflow-y:auto;padding:var(--space-4)}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-2)}.category-select{display:flex;flex-wrap:wrap;gap:var(--space-2)}.category-option{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-bg-highlight);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.category-option:hover{border-color:var(--color-primary);color:var(--color-primary)}.category-option.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.author-select{display:flex;gap:var(--space-2)}.author-option{flex:1;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-bg-highlight);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.author-option:hover{border-color:var(--color-primary);color:var(--color-primary)}.author-option.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.form-input{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-bg-highlight);background:var(--color-bg-highlight);color:var(--color-text-primary);font-size:var(--font-size-base);outline:none;transition:all var(--transition-fast)}.form-input:focus{border-color:var(--color-primary)}.form-input::placeholder{color:var(--color-text-tertiary)}.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-bg-highlight);background:var(--color-bg-highlight);color:var(--color-text-primary);font-size:var(--font-size-base);outline:none;resize:none;font-family:inherit;line-height:1.6;transition:all var(--transition-fast)}.form-textarea:focus{border-color:var(--color-primary)}.form-textarea::placeholder{color:var(--color-text-tertiary)}.modal-footer{display:flex;gap:var(--space-3);padding:var(--space-4);border-top:1px solid var(--color-bg-highlight)}.btn-cancel{flex:1;padding:var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-text-tertiary);background:transparent;color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-cancel:hover{background:var(--color-bg-highlight)}.btn-submit-post{flex:1;padding:var(--space-4);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-submit-post:hover{background:var(--color-primary-dark)}.btn-submit-post:disabled{opacity:.5;cursor:not-allowed}.board-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) 0;margin-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.board-header h1{flex:1;font-size:var(--font-size-lg);font-weight:600}.board-category-list{display:flex;flex-direction:column;gap:var(--space-2)}.board-category-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast)}.board-category-item:hover{border-color:var(--color-text-tertiary)}.board-category-icon{font-size:20px}.board-category-name{flex:1;text-align:left;font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-primary)}.board-category-count{font-size:var(--font-size-xs);color:var(--color-text-tertiary);background:var(--color-bg-highlight);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}.board-category-item svg{color:var(--color-text-tertiary)}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4)}.chat-header h1{font-size:var(--font-size-xl);font-weight:700}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);color:var(--color-text-tertiary);text-align:center}.chat-empty svg{margin-bottom:var(--space-4);opacity:.5}.chat-empty p{font-size:var(--font-size-md);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.chat-empty-sub{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}@media(max-width:1024px){.sidebar{width:220px}.main-content{max-width:none}}@media(max-width:768px){.sidebar{display:none}.app-body{padding-top:48px}.main-content{padding:var(--space-3)}.header-search{display:none}.filter-chips{flex:1;justify-content:center}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);padding:var(--space-2) var(--space-4);z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;background:transparent;border:none;color:var(--color-text-tertiary);font-size:var(--font-size-xs);cursor:pointer;padding:var(--space-2)}.nav-item svg{width:24px;height:24px}.nav-item.active{color:var(--color-primary)}.create-post-fab{bottom:80px;right:var(--space-4)}}.sort-options{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.sort-btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.sort-btn:hover{background:var(--color-bg-highlight)}.sort-btn.active{background:var(--color-text-primary);color:#fff}.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4) 0}.page-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-primary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.page-btn:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.post-thumbnail{width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0}.post-thumbnail img{width:100%;height:100%;object-fit:cover}.community-post{display:flex;gap:var(--space-3)}.post-content-wrap{flex:1;min-width:0}.post-detail-image{margin:var(--space-4) 0;border-radius:var(--radius-md);overflow:hidden}.post-detail-image img{width:100%;max-height:500px;object-fit:contain;background:var(--color-bg-highlight)}.vote-buttons{display:flex;align-items:center;gap:var(--space-1);background:var(--color-bg-highlight);border-radius:var(--radius-full);padding:var(--space-1)}.vote-btn{width:32px;height:32px;border-radius:var(--radius-full);border:none;background:transparent;cursor:pointer;font-size:16px;transition:all var(--transition-fast)}.vote-btn:hover:not(:disabled){background:var(--color-bg-card)}.vote-btn.upvote.active{background:var(--color-primary)}.vote-btn.downvote.active{background:var(--color-downvote)}.vote-btn:disabled{opacity:.5;cursor:not-allowed}.vote-count{min-width:32px;text-align:center;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary)}.action-btn.bookmark.active{color:var(--color-primary)}.action-btn.report{color:var(--color-text-tertiary)}.action-btn.edit{color:var(--color-primary)}.reply-input-container{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-2);background:var(--color-bg-highlight);border-radius:var(--radius-md)}.reply-input{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-bg-card);font-size:var(--font-size-sm);outline:none}.reply-input:focus{border-color:var(--color-primary)}.btn-send-reply{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:none;background:var(--color-primary);color:#fff;font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.btn-send-reply:disabled{opacity:.5;cursor:not-allowed}.replies-list{margin-top:var(--space-3);padding-left:var(--space-4);border-left:2px solid var(--color-border)}.reply-item{display:flex;gap:var(--space-2);padding:var(--space-2) 0}.comment-avatar.small{width:24px;height:24px;font-size:var(--font-size-xs)}.comment-action-btn.reply{color:var(--color-text-secondary)}.comment-action-btn.report{color:var(--color-text-tertiary)}.image-upload-area{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center}.image-upload-btn{display:inline-block;padding:var(--space-3) var(--space-6);background:var(--color-bg-highlight);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.image-upload-btn:hover{background:var(--color-bg-card);color:var(--color-primary)}.image-preview{position:relative;display:inline-block}.image-preview img{max-width:100%;max-height:200px;border-radius:var(--radius-md)}.btn-remove-image{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:var(--radius-full);border:none;background:var(--color-text-primary);color:#fff;font-size:12px;cursor:pointer}.modal-small{max-width:400px}.report-reasons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.report-reason-btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.report-reason-btn:hover{border-color:var(--color-primary)}.report-reason-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-report-submit{padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:none;background:#dc2626;color:#fff;font-size:var(--font-size-sm);font-weight:600;cursor:pointer}.btn-report-submit:disabled{opacity:.5;cursor:not-allowed}