@tailwind base;@tailwind components;@tailwind utilities;:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{width:100%;height:100%;margin:0;padding:0}body{margin:0;padding:0;width:100%;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}#root{width:100%;min-height:100vh;margin:0;padding:0;display:flex;flex-direction:column}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}.modern-header{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);box-shadow:0 1px 4px #0000000d;position:fixed;top:0;left:0;right:0;z-index:1000;padding:0;width:100%;height:80px}.header-container{width:100%;max-width:1600px;margin:0 auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;height:100%}.logo-section{display:flex;align-items:center}.logo-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--color-text-primary);transition:opacity .2s ease}.logo-link:hover{opacity:.8}.logo-icon{width:32px;height:32px;object-fit:contain}.logo-text{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--color-text-primary)}.auth-section{display:flex;align-items:center}.loading-dot{width:8px;height:8px;background:var(--color-accent-primary);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.sign-in-btn{display:inline-flex;align-items:center;padding:.5rem 1.25rem;background:var(--color-accent-primary);color:#fff;text-decoration:none;border-radius:.5rem;font-weight:500;font-size:.875rem;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;border:none;cursor:pointer;box-shadow:0 2px 6px #00000026}.sign-in-btn:hover{background:#026aa7;transform:translateY(-2px);box-shadow:0 6px 16px #0003}.user-profile{display:flex;align-items:center;gap:.75rem;background:var(--color-bg-tertiary);padding:.5rem .75rem;border-radius:2rem;border:1px solid var(--color-border)}.user-info{display:flex;align-items:center;gap:.75rem}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.user-avatar-fallback{width:32px;height:32px;border-radius:50%;background:var(--color-accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem}.user-name{font-weight:500;color:var(--color-text-primary);font-size:.875rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sign-out-btn{padding:.4rem .9rem;background:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:1.25rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.sign-out-btn:hover{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}@media (max-width: 768px){.modern-header{height:70px}.header-container{padding:1rem}.logo-text{font-size:1rem}.user-name{display:none}.user-info{gap:.5rem}.sign-in-btn{padding:.5rem 1rem;font-size:.75rem}.user-profile{background:transparent;border:none;padding:0}.user-avatar,.user-avatar-fallback{width:38px;height:38px}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;padding-top:calc(2rem + var(--header-height));box-sizing:border-box;width:100%}.auth-card{background:var(--color-bg-secondary);border-radius:1.5rem;box-shadow:0 25px 60px #0003;padding:3rem;width:100%;max-width:480px;text-align:center;position:relative;border:1px solid var(--color-border)}.auth-header h1{font-size:2rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .75rem;letter-spacing:-.02em}.auth-header p{color:var(--color-text-secondary);font-size:1rem;margin:0 0 2.5rem;line-height:1.6;font-weight:400}.auth-content{margin:2rem 0}.google-auth-wrapper{display:flex;justify-content:center;align-items:center}.google-auth-wrapper>div{border-radius:.75rem!important;overflow:hidden;box-shadow:0 8px 25px #0003!important;border:1px solid var(--color-border)!important;transition:all .3s ease!important;background-color:var(--color-bg-tertiary)!important}.google-auth-wrapper>div>div>span{color:var(--color-text-primary)!important;text-shadow:none!important}.google-auth-wrapper>div:hover{transform:translateY(-2px)!important;box-shadow:0 12px 35px #0000004d!important;border-color:var(--color-accent-primary)!important}.auth-loading{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2.5rem}.spinner{width:40px;height:40px;border:4px solid var(--color-bg-tertiary);border-top:4px solid var(--color-accent-primary);border-radius:50%;animation:spin 1s linear infinite}.auth-loading p{color:var(--color-text-secondary);font-size:1rem;font-weight:500;margin:0}.auth-footer{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--color-border)}.auth-footer p{color:var(--color-text-secondary);font-size:.75rem;margin:0;line-height:1.6;font-weight:400}.auth-footer .link{color:var(--color-accent-primary);text-decoration:none;font-weight:500;transition:color .2s ease}.auth-footer .link:hover{color:var(--color-text-primary);text-decoration:underline}@media (max-width: 640px){.auth-container{padding:1rem;padding-top:calc(1rem + var(--header-height-mobile))}.auth-card{padding:2rem;border-radius:1rem}.auth-header h1{font-size:1.75rem}.auth-header p{font-size:.875rem}}.trivia-list-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;height:100%;display:flex;flex-direction:column}.trivia-list-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.header-title-section{display:flex;align-items:center;gap:12px}.trivia-list-header h2{margin:0;color:#1f2937;font-size:1.25rem;font-weight:600}.trivia-count{background:#e5e7eb;color:#374151;padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600;min-width:20px;text-align:center}.create-new-btn{display:flex;align-items:center;gap:8px;background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background-color .2s}.create-new-btn:hover{background:#2563eb}.trivias-list{flex:1;overflow-y:auto;padding:0}.trivia-item{display:flex;align-items:flex-start;gap:16px;padding:16px 20px 32px;cursor:pointer;transition:all .2s;border-bottom:1px solid #f3f4f6;position:relative}.trivia-item:hover{background:#f9fafb}.trivia-item.active{background:#eff6ff;border-left:4px solid #3b82f6}.trivia-thumbnail{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.trivia-thumbnail img{width:100%;height:100%;object-fit:cover}.thumbnail-placeholder{color:#9ca3af}.trivia-info{flex:1;min-width:0}.trivia-title{margin:0 0 4px;font-size:1rem;font-weight:500;color:#1f2937;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.unsaved-indicator{color:#f59e0b;font-size:.8rem;margin-left:.5rem;font-weight:600}.trivia-actions{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .2s}.trivia-item:hover .trivia-actions{opacity:1}.trivia-delete-button{display:inline-block;width:28px;height:28px;background:#ef44441a;border:none;border-radius:6px;color:#dc2626;cursor:pointer;transition:all .2s;position:relative}.trivia-delete-button svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.trivia-delete-button:hover{background:#ef444433;transform:scale(1.05)}.trivia-delete-button:active{transform:scale(.95)}.trivia-meta{position:absolute;bottom:8px;left:84px;background:#e5e7eb;color:#374151;padding:2px 6px;border-radius:10px;font-size:.75rem;font-weight:500;line-height:1.2}.trivia-item.active .trivia-meta{background:#3b82f633;color:#1e40af}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280}.empty-state h3{margin:0 0 8px;font-size:1.125rem;font-weight:500}.empty-state p{margin:0;font-size:.875rem}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:20px;color:#dc2626}.error-message h3{margin:0 0 8px;font-size:1.125rem}.error-message p{margin:0 0 16px;font-size:.875rem}.retry-btn{background:#dc2626;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500}.retry-btn:hover{background:#b91c1c}@media (max-width: 768px){.trivia-list-header{padding:16px;gap:12px}.header-title-section{gap:8px;flex:1}.trivia-list-header h2{font-size:1.125rem}.trivia-count{font-size:.7rem;padding:3px 6px}.create-new-btn{padding:12px 16px;font-size:.9rem}.trivia-item{padding:16px;gap:12px}.trivia-thumbnail{width:56px;height:56px}.trivia-title{font-size:1.1rem;line-height:1.3;margin-bottom:8px}.trivia-actions{opacity:1}.trivia-delete-button{width:32px;height:32px}.trivia-meta{left:80px;bottom:10px;font-size:.7rem;padding:3px 8px}.empty-state{padding:40px 16px}.empty-state h3{font-size:1rem}.loading-container,.error-container{padding:40px 16px}}@media (max-width: 480px){.trivia-list-header{padding:12px}.trivia-list-header h2{font-size:1rem}.create-new-btn{font-size:.85rem;padding:10px 14px}.trivia-item{padding:12px;gap:10px}.trivia-thumbnail{width:48px;height:48px}.trivia-title{font-size:1rem}.trivia-meta{left:70px;bottom:8px}}.image-uploader{display:inline-block}.file-input{display:none}.upload-area{width:120px;height:120px;border:2px dashed #d1d5db;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;background:#f9fafb;position:relative}.upload-area:hover{border-color:#3b82f6;background:#f0f9ff}.upload-area.dragging{border-color:#10b981;background:#f0fdf4;transform:scale(1.02)}.upload-area.uploading{border-color:#3b82f6;background:#f0f9ff}.upload-content{text-align:center;padding:16px}.upload-icon{color:#9ca3af;margin-bottom:8px}.upload-text{font-size:.75rem;font-weight:500;color:#374151;margin-bottom:4px}.upload-hint{font-size:.625rem;color:#6b7280;margin:0}.upload-loading{display:flex;flex-direction:column;align-items:center;gap:8px}.upload-loading p{font-size:.75rem;color:#3b82f6;margin:0;font-weight:500}.upload-spinner{width:20px;height:20px;border:2px solid #e5e7eb;border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.image-uploader.has-image{position:relative}.dev-notice{position:absolute;top:-28px;left:0;right:0;background:#fbbf24;color:#92400e;font-size:.75rem;padding:4px 8px;border-radius:4px;display:flex;align-items:center;gap:4px;justify-content:center;z-index:10;box-shadow:0 1px 3px #0000001a;white-space:nowrap}.image-preview{width:120px;height:120px;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;border:2px solid transparent;transition:border-color .2s}.image-preview:hover{border-color:#3b82f6}.preview-image{width:100%;height:100%;object-fit:cover;display:block}.remove-image-btn{position:absolute;top:4px;right:4px;background:#ffffffe6;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#dc2626;transition:all .2s ease-in-out;box-shadow:0 1px 3px #0003;z-index:10;opacity:0}.image-preview:hover .remove-image-btn{opacity:1}.remove-image-btn:hover{background:#fff;transform:scale(1.1);box-shadow:0 2px 6px #0000004d}.remove-image-btn:active{transform:scale(.95)}.image-uploader.small .upload-area,.image-uploader.small .image-preview{width:60px;height:60px}.image-uploader.small .upload-text{font-size:.625rem}.image-uploader.small .upload-hint{display:none}.image-uploader.small .upload-icon{margin-bottom:4px}.image-uploader.small .remove-image-btn{width:20px;height:20px;top:2px;right:2px}.image-uploader.small .dev-notice{font-size:.625rem;top:-22px;padding:2px 6px}.rich-text-importer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.rich-text-importer{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.importer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.importer-title{display:flex;align-items:center;gap:12px;color:#1f2937}.importer-title h3{margin:0;font-size:1.125rem;font-weight:600}.close-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:4px;border-radius:6px;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-btn:hover:not(:disabled){background:#e5e7eb;color:#374151}.close-btn:disabled{opacity:.5;cursor:not-allowed}.importer-content{padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1}.instructions{color:#6b7280;font-size:.875rem;line-height:1.5}.instructions p{margin:0 0 8px}.instructions .hint{font-size:.8125rem;color:#9ca3af;font-style:italic}.text-input{width:100%;min-height:200px;padding:12px;border:2px solid #d1d5db;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem;line-height:1.5;resize:vertical;transition:border-color .2s;background:#fff}.text-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.text-input:disabled{background:#f9fafb;color:#6b7280;cursor:not-allowed}.text-input::placeholder{color:#9ca3af;line-height:1.4}.error-message{display:flex;align-items:center;gap:8px;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px;font-size:.875rem}.error-icon{flex-shrink:0}.importer-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid #e5e7eb}.cancel-btn,.import-btn{padding:10px 20px;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;border:none}.cancel-btn{background:#fff;color:#6b7280;border:1px solid #d1d5db}.cancel-btn:hover:not(:disabled){background:#f9fafb;color:#374151;border-color:#9ca3af}.import-btn{background:#3b82f6;color:#fff;border:1px solid #3b82f6}.import-btn:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.import-btn:disabled{background:#9ca3af;border-color:#9ca3af;cursor:not-allowed;opacity:.7}@media (max-width: 640px){.rich-text-importer-overlay{padding:10px}.rich-text-importer{max-height:95vh}.importer-header{padding:16px 20px}.importer-content{padding:20px}.importer-title h3{font-size:1rem}.text-input{min-height:150px;font-size:16px}.importer-actions{flex-direction:column-reverse}.cancel-btn,.import-btn{width:100%;justify-content:center}}.ai-generator-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ai-generator-modal{background:var(--color-bg-secondary);border-radius:1rem;box-shadow:0 25px 60px #0000004d;width:100%;max-width:500px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--color-border)}.ai-generator-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--color-border);background:var(--color-bg-tertiary)}.ai-generator-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;border-radius:.5rem;color:var(--color-text-secondary);cursor:pointer;transition:all .2s}.ai-generator-close:hover:not(:disabled){background:var(--color-bg-secondary);color:var(--color-text-primary)}.ai-generator-close:disabled{opacity:.5;cursor:not-allowed}.ai-generator-content{flex:1;overflow-y:auto;padding:2rem}.prompt-input{padding:.75rem;border:2px solid var(--color-border);border-radius:.5rem;font-size:1rem;transition:border-color .2s ease;background:var(--color-bg-secondary);color:var(--color-text-primary)}.prompt-input:focus{outline:none;border-color:var(--color-accent-primary)}.prompt-input:disabled{background:var(--color-bg-tertiary);color:var(--color-text-secondary);cursor:not-allowed}.prompt-suggestions{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.prompt-suggestions p{margin:0;font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.suggestion-chip{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:1rem;background:var(--color-bg-tertiary);color:var(--color-text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.suggestion-chip:hover:not(:disabled){border-color:var(--color-accent-primary);background:var(--color-accent-primary);color:#fff}.count-select{padding:.75rem;border:2px solid var(--color-border);border-radius:.5rem;font-size:1rem;background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:border-color .2s ease}.count-select:focus{outline:none;border-color:var(--color-accent-primary)}.count-select:disabled{background:var(--color-bg-tertiary);color:var(--color-text-secondary);cursor:not-allowed}.ai-generator-progress{background:var(--color-bg-tertiary);border-radius:.5rem;padding:1rem;border:1px solid var(--color-border);display:flex;flex-direction:column;gap:.75rem}.progress-info{display:flex;flex-direction:column;gap:.5rem}.progress-info span{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.progress-bar{width:100%;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--color-accent-primary);border-radius:4px;transition:width .3s ease}.generated-preview{border-top:1px solid var(--color-border);padding-top:1rem;margin-top:1rem}.generated-preview p{margin:0 0 .5rem;font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}.generated-preview ul{margin:0;padding-left:1.5rem;list-style-type:disc;color:var(--color-text-primary)}.ai-generator-error{background:#eb5a461a;border:1px solid rgba(235,90,70,.3);color:var(--color-danger);padding:.75rem;border-radius:.5rem;font-size:.875rem;font-weight:500}.cancel-btn{flex:1;padding:.75rem 1.5rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-bg-secondary);color:var(--color-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.cancel-btn:hover:not(:disabled){background:var(--color-bg-tertiary);color:var(--color-text-primary)}.cancel-btn:disabled{opacity:.5;cursor:not-allowed}.generate-btn{flex:2;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid var(--color-accent-primary);border-radius:.5rem;background:var(--color-accent-primary);color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.ai-generator-modal .generate-btn:hover:not(:disabled){background:#026aa7!important;border-color:#026aa7!important;color:#fff!important;transform:translateY(-1px);box-shadow:0 4px 12px #0079bf4d}@media (max-width: 768px){.ai-generator-overlay{padding:.5rem}.ai-generator-modal{max-height:95vh}.ai-generator-header{padding:1rem}.ai-generator-title{font-size:1rem}.ai-generator-content{padding:1rem}.ai-generator-form{gap:1rem}.suggestions-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.375rem}.suggestion-chip{padding:.375rem .5rem;font-size:.7rem}.ai-generator-actions{padding:1rem;flex-direction:column}.cancel-btn,.generate-btn{flex:none}.generate-btn{order:-1}}.trivia-detail-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;height:100%;display:flex;flex-direction:column}.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280;height:100%}.no-selection h3{margin:0 0 8px;font-size:1.125rem;font-weight:500;color:#374151}.no-selection p{margin:0;font-size:.875rem}.trivia-details-header{display:flex;align-items:flex-start;gap:20px;padding:20px;border-bottom:1px solid #e5e7eb;background:#f9fafb;flex-wrap:wrap}.thumbnail-upload-box{flex-shrink:0}.trivia-title-and-controls{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}.trivia-title-section{width:100%}.title-input-container{display:flex;align-items:center;gap:.75rem;width:100%}.trivia-title-input{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:1.125rem;font-weight:500;background:#fff;transition:border-color .2s}.unsaved-badge{background:#f59e0b;color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;white-space:nowrap;flex-shrink:0}.trivia-title-input:focus{outline:none;border-color:#3b82f6}.trivia-title-input::placeholder{color:#9ca3af;font-weight:400}.toggle-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.privacy-toggle{align-self:flex-start}.privacy-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border:2px solid;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s;background:#fff}.privacy-btn.private{color:#dc2626;border-color:#dc2626}.privacy-btn.private:hover{background:#fef2f2}.privacy-btn.public{color:#059669;border-color:#059669}.privacy-btn.public:hover{background:#f0fdf4}.official-toggle{align-self:flex-start}.official-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border:2px solid;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s;background:#fff}.official-btn.community{color:#7c3aed;border-color:#7c3aed}.official-btn.community:hover{background:#f5f3ff}.official-btn.official{color:#f59e0b;border-color:#f59e0b}.official-btn.official:hover{background:#fffbeb}.trivia-detail-actions{display:flex;align-items:flex-start;gap:12px;flex-shrink:0;margin-top:4px}.import-btn{display:flex;align-items:center;gap:.5rem;background:var(--color-text-secondary);color:#fff;border:1px solid var(--color-text-secondary);padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.import-btn:hover{background:var(--color-text-primary);border-color:var(--color-text-primary);transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.generate-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid var(--color-accent-primary);border-radius:.5rem;background:var(--color-bg-secondary);color:var(--color-accent-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.generate-btn:hover{background:var(--color-accent-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0079bf40}.save-btn{display:flex;align-items:center;gap:.5rem;background:var(--color-accent-primary);color:#fff;border:1px solid var(--color-accent-primary);padding:.625rem 1.25rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease;flex-shrink:0}.save-btn:hover{background:#026aa7;border-color:#026aa7;transform:translateY(-1px);box-shadow:0 4px 12px #0079bf4d}.save-btn:active{transform:translateY(1px)}.save-btn.disabled,.save-btn:disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}.save-btn.disabled:hover,.save-btn:disabled:hover{background:#9ca3af;transform:none}@media (max-width: 768px){.trivia-details-header{padding:16px;flex-direction:column;align-items:stretch;gap:16px;border-bottom:none;background:none}.thumbnail-upload-box{align-self:center}.trivia-title-and-controls{min-width:unset;gap:16px}.trivia-title-input{font-size:1rem;padding:14px 16px}.privacy-btn{align-self:center;padding:10px 20px;font-size:.9rem}.trivia-detail-actions{justify-content:center;flex-wrap:wrap;align-items:center;gap:8px}.import-btn{flex:1;min-width:120px;justify-content:center;padding:10px 16px}.save-btn{flex:1;min-width:120px;justify-content:center;padding:12px 20px}.no-selection{padding:40px 16px}.no-selection h3{font-size:1rem}}@media (max-width: 480px){.trivia-details-header{padding:12px;gap:12px}.trivia-title-input{font-size:.95rem;padding:12px 14px}.privacy-btn{padding:8px 16px;font-size:.85rem}.trivia-detail-actions{flex-direction:column;width:100%}.import-btn,.generate-btn,.save-btn{width:100%;min-width:unset}}.questions-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;height:100%;display:flex;flex-direction:column}.questions-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.questions-header h3{margin:0;color:#1f2937;font-size:1.125rem;font-weight:600}.question-count{font-weight:400;color:#6b7280;font-size:1rem}.add-question-btn{display:flex;align-items:center;gap:6px;background:#10b981;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background-color .2s}.add-question-btn:hover{background:#059669}.questions-list{flex:1;overflow-y:auto;padding:0}.question-item{padding:16px 20px;cursor:pointer;transition:all .2s;border-bottom:1px solid #f3f4f6}.question-item:hover{background:#f9fafb}.question-item.active{background:#f0fdf4;border-left:4px solid #10b981}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.question-number{display:flex;align-items:center;gap:8px}.question-index{background:#e5e7eb;color:#374151;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600}.question-item.active .question-index{background:#10b981;color:#fff}.question-image-indicator{color:#6b7280;display:flex;align-items:center}.question-delete-button{background:none;border:none;color:#dc2626;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s;opacity:0;visibility:hidden}.question-item:hover .question-delete-button{opacity:1;visibility:visible}.question-delete-button:hover{background:#fef2f2}.question-content{margin-left:0}.question-main{display:flex;gap:12px;align-items:flex-start}.question-image-preview{flex-shrink:0}.question-thumbnail{width:40px;height:40px;object-fit:cover;border-radius:6px}.question-text-content{flex:1;min-width:0}.question-text{font-size:.875rem;color:#374151;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.question-meta{font-size:.75rem;color:#6b7280}.empty-questions{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280}.empty-icon{margin-bottom:16px;color:#d1d5db}.empty-questions p{margin:0 0 16px;font-size:.875rem}.add-first-btn{display:flex;align-items:center;gap:8px;background:#10b981;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background-color .2s}.add-first-btn:hover{background:#059669}.loading-questions,.error-questions{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280}.loading-spinner{width:24px;height:24px;border:2px solid #e5e7eb;border-top:2px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}.error-icon{font-size:2rem;margin-bottom:12px}.error-questions p{margin:0 0 16px;font-size:.875rem}.retry-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background-color .2s}.retry-btn:hover{background:#2563eb}@media (max-width: 768px){.questions-header{padding:16px;flex-wrap:wrap;gap:12px}.questions-header h3{font-size:1.125rem;order:1;width:100%}.add-question-btn{order:2;width:100%;justify-content:center;padding:12px 16px;font-size:.9rem}.question-item{padding:16px}.question-delete-button{opacity:1;visibility:visible;position:static}.question-text{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.question-thumbnail{width:48px;height:48px}.empty-questions,.loading-questions,.error-questions{padding:40px 16px}}@media (max-width: 480px){.questions-header{padding:12px}.questions-header h3{font-size:1rem}.add-question-btn{font-size:.85rem;padding:10px 14px}.question-item{padding:12px}.question-main{gap:8px}.question-thumbnail{width:40px;height:40px}.question-text{font-size:.8rem}.question-meta{font-size:.7rem}}.question-editor{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;height:100%;display:flex;flex-direction:column}.no-question-selected{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280;height:100%}.no-question-selected h3{margin:0 0 8px;font-size:1.125rem;font-weight:500;color:#374151}.no-question-selected p{margin:0;font-size:.875rem}.question-form{padding:24px;overflow-y:auto;flex:1}.form-group{margin-bottom:24px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-weight:500;color:#374151;font-size:.875rem}.question-input{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;line-height:1.5;resize:vertical;min-height:80px;transition:border-color .2s;font-family:inherit}.question-input:focus{outline:none;border-color:#3b82f6}.question-input::placeholder{color:#9ca3af}.answers-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.add-answer-btn{display:flex;align-items:center;gap:6px;background:#10b981;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:background-color .2s}.add-answer-btn:hover{background:#059669}.answers-list{display:flex;flex-direction:column;gap:12px}.answer-item{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#f9fafb}.answer-header{display:none}.answer-content{display:flex;flex-direction:column;gap:0}.answer-input-row{display:flex;align-items:center;gap:8px}.answer-input{flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;background:#fff;transition:border-color .2s}.answer-input:focus{outline:none;border-color:#3b82f6}.answer-input::placeholder{color:#9ca3af}.points-input{display:flex;align-items:center;gap:6px;font-size:.875rem;color:#374151;flex-shrink:0}.points-field{width:70px;padding:8px 6px;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;text-align:center;background:#fff}.points-field:focus{outline:none;border-color:#3b82f6}.points-field::-webkit-outer-spin-button,.points-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.points-field[type=number]{-moz-appearance:textfield}.remove-answer-btn{background:none;border:none;color:#dc2626;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s;flex-shrink:0}.remove-answer-btn:hover{background:#fef2f2}.no-answers{text-align:center;padding:40px 20px;color:#6b7280;background:#f9fafb;border:2px dashed #d1d5db;border-radius:8px}.no-answers p{margin:0;font-size:.875rem}@media (max-width: 768px){.question-form{padding:16px}.form-group label{font-size:.9rem}.question-input{padding:14px 16px;font-size:1rem;min-height:100px}.answers-header{flex-wrap:wrap;gap:12px}.answers-header label{order:1;width:100%;margin-bottom:0}.add-answer-btn{order:2;width:100%;justify-content:center;padding:10px 16px;font-size:.85rem}.answer-input-row{flex-wrap:wrap;gap:12px}.answer-input{flex:1;min-width:200px;padding:12px 14px;font-size:.9rem}.points-input{order:3;align-self:stretch;min-width:120px;justify-content:space-between}.points-field{width:80px;padding:12px 8px}.remove-answer-btn{order:4;align-self:center;padding:8px}.no-answers{padding:30px 16px}.empty-editor-state{min-height:300px;padding:30px 16px}.empty-editor-content h3{font-size:1.125rem}.empty-editor-content p{font-size:.8rem}}@media (max-width: 480px){.question-form{padding:12px}.question-input{padding:12px 14px;font-size:.95rem;min-height:80px}.add-answer-btn{padding:8px 14px;font-size:.8rem}.answer-input{padding:10px 12px;font-size:.85rem;min-width:150px}.points-input{font-size:.8rem;min-width:100px}.points-field{width:70px;padding:10px 6px}}.empty-editor-state{display:flex;align-items:center;justify-content:center;min-height:400px;padding:40px 20px}.empty-editor-content{text-align:center;color:#6b7280}.empty-editor-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto 20px;background:#f3f4f6;border:2px dashed #d1d5db;border-radius:50%;color:#9ca3af}.empty-editor-content h3{margin:0 0 12px;font-size:1.25rem;font-weight:600;color:#374151}.empty-editor-content p{margin:0;font-size:.875rem;line-height:1.5;max-width:300px}.trivia-creation-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.trivia-creation-modal{background:var(--color-bg-secondary);border-radius:1rem;box-shadow:0 25px 60px #0000004d;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative;border:1px solid var(--color-border)}.trivia-creation-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:.5rem;border-radius:.5rem;transition:all .2s ease;z-index:10}.trivia-creation-close:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.creation-choice{padding:2rem;text-align:center}.choice-header h2{font-size:1.75rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .5rem}.choice-header p{color:var(--color-text-secondary);font-size:1rem;margin:0 0 2rem}.choice-options{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.choice-option{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:.75rem;cursor:pointer;transition:all .3s ease;text-align:left;width:100%;position:relative}.choice-option:hover:not(:disabled){border-color:var(--color-accent-primary);background:var(--color-bg-secondary);transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.choice-option:disabled{opacity:.7;cursor:not-allowed;transform:none}.choice-option.ai-option:hover:not(:disabled){border-color:var(--color-accent-primary);background:linear-gradient(135deg,#0079bf0d,#0079bf05)}.option-icon{flex-shrink:0;width:60px;height:60px;background:var(--color-accent-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.choice-option.manual-option .option-icon{background:var(--color-text-secondary)}.option-content{flex:1}.option-content h3{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .5rem}.option-content p{color:var(--color-text-secondary);font-size:.875rem;margin:0;line-height:1.4}.option-badge{position:absolute;top:.75rem;right:.75rem;background:var(--color-accent-primary);color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:500}.ai-generation{padding:0}.ai-generator-header{display:flex;justify-content:center;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--color-border);background:var(--color-bg-tertiary)}.ai-generator-title{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.ai-generator-title svg{color:var(--color-accent-primary)}.back-btn-icon{background:none;border:none;color:var(--color-text-secondary);padding:.5rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;margin-right:.75rem}.back-btn-icon:hover{background:var(--color-bg-secondary);color:var(--color-accent-primary);transform:translate(-2px)}.back-btn-icon:disabled{opacity:.5;cursor:not-allowed;transform:none}.ai-generator-content{padding:2rem}.ai-generator-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;color:var(--color-text-primary);font-size:.875rem}.prompt-input,.count-select{padding:.75rem;border:2px solid var(--color-border);border-radius:.5rem;font-size:1rem;background:var(--color-bg-secondary);color:var(--color-text-primary);transition:border-color .2s ease}.prompt-input:focus,.count-select:focus{outline:none;border-color:var(--color-accent-primary)}.prompt-suggestions{margin-top:.5rem}.prompt-suggestions p{font-size:.875rem;color:var(--color-text-secondary);margin:0 0 .75rem}.suggestions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.suggestion-chip{padding:.5rem .75rem;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:1rem;font-size:.75rem;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;text-align:center}.suggestion-chip:hover{background:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.suggestion-chip:disabled{opacity:.5;cursor:not-allowed}.ai-generator-progress{background:var(--color-bg-tertiary);border-radius:.5rem;padding:1rem;border:1px solid var(--color-border)}.progress-info{margin-bottom:1rem}.progress-info span{font-size:.875rem;color:var(--color-text-primary);font-weight:500}.progress-bar{width:100%;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin-top:.5rem}.progress-fill{height:100%;background:var(--color-accent-primary);transition:width .3s ease}.generated-preview{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--color-border)}.generated-preview p{font-size:.875rem;color:var(--color-text-secondary);margin:0 0 .5rem}.generated-preview ul{margin:0;padding-left:1.5rem;color:var(--color-text-primary)}.generated-preview li{font-size:.875rem;margin-bottom:.25rem}.ai-generator-error{background:#eb5a461a;border:1px solid rgba(235,90,70,.3);color:var(--color-danger);padding:.75rem;border-radius:.5rem;font-size:.875rem}.ai-generator-actions{display:flex;gap:1rem;padding:1.5rem 2rem;border-top:1px solid var(--color-border);background:var(--color-bg-tertiary)}.cancel-btn,.generate-btn{flex:1;padding:.75rem 1.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.cancel-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-secondary)}.cancel-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.generate-btn{background:var(--color-accent-primary);border:1px solid var(--color-accent-primary);color:#fff}.generate-btn:hover:not(:disabled){background:#026aa7;transform:translateY(-1px);box-shadow:0 4px 12px #0079bf4d}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.spinning{animation:spin 1s linear infinite}@media (max-width: 768px){.trivia-creation-overlay{padding:.5rem}.trivia-creation-modal{max-height:95vh}.creation-choice{padding:1.5rem}.choice-header h2{font-size:1.5rem}.choice-option{padding:1rem;gap:1rem}.option-icon{width:50px;height:50px}.option-content h3{font-size:1.125rem}.ai-generator-header,.ai-generator-content,.ai-generator-actions{padding:1rem}.suggestions-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.375rem}.suggestion-chip{padding:.375rem .5rem;font-size:.7rem}.ai-generator-actions{flex-direction:column}}@media (max-width: 480px){.choice-options{gap:.75rem}.choice-option{flex-direction:column;text-align:center;padding:1rem}.option-content h3{font-size:1rem}.option-content p{font-size:.8rem}.suggestions-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}.home-page{height:100vh;background:#f5f7fa;padding:20px;padding-top:calc(20px + var(--header-height));overflow:hidden}.layout-grid{display:grid;gap:20px;height:100%}.layout-grid.no-trivia{grid-template-columns:350px 1fr;grid-template-areas:"trivia-list trivia-detail"}.layout-grid.with-trivia{grid-template-columns:350px 1fr 300px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"trivia-list trivia-detail trivia-detail trivia-detail" "trivia-list questions-list question-editor question-editor"}.panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.trivia-list-panel{grid-area:trivia-list}.trivia-detail-panel{grid-area:trivia-detail}.questions-list-panel{grid-area:questions-list}.question-editor-panel{grid-area:question-editor}.mobile-nav{display:none}@media (max-width: 768px){.mobile-nav{display:block}.mobile-nav.trivias-view{display:none}.mobile-panel{display:flex;flex-direction:column;height:100%}.mobile-panel.editor-view{padding-bottom:0}.home-page.mobile-editor-mode{height:96vh}.mobile-panel.editor-view .question-editor{height:100%;flex:1}.mobile-panel.editor-view .question-form{flex:1;padding-bottom:20px}}.mobile-nav-header{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:12px 16px;margin-bottom:12px}.mobile-back-btn{background:none;border:none;color:#3b82f6;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center}.mobile-back-btn:hover{background:#eff6ff;color:#2563eb}.mobile-nav-title{flex:1;font-size:1.1rem;font-weight:600;color:#1f2937;margin:0}.mobile-nav-actions{display:flex;align-items:center;gap:8px}.mobile-details-nav,.mobile-bottom-actions{display:none}@media (max-width: 768px){.mobile-details-content{flex:1;overflow-y:auto;min-height:0}.mobile-bottom-actions{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;padding:16px 20px;gap:12px;box-shadow:0 -2px 8px #0000001a;z-index:100}.mobile-import-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--color-text-secondary);color:#fff;border:1px solid var(--color-text-secondary);padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.mobile-import-btn:hover{background:var(--color-text-primary);border-color:var(--color-text-primary);transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.mobile-generate-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--color-bg-secondary);color:var(--color-accent-primary);border:1px solid var(--color-accent-primary);padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.mobile-generate-btn:hover{background:var(--color-accent-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0079bf40}.mobile-save-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--color-accent-primary);color:#fff;border:1px solid var(--color-accent-primary);padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.mobile-save-btn:hover:not(.disabled){background:#026aa7;border-color:#026aa7;transform:translateY(-1px);box-shadow:0 4px 12px #0079bf4d}.mobile-save-btn.disabled{background:var(--color-text-secondary);border-color:var(--color-text-secondary);opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}}.mobile-details-tabs{display:flex;background:#f3f4f6;border-radius:8px;padding:4px;margin:12px 16px}.mobile-details-tab{flex:1;padding:8px 16px;background:none;border:none;font-size:.875rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s;border-radius:6px}.mobile-details-tab.active{color:#1f2937;background:#fff;box-shadow:0 1px 3px #0000001a}.mobile-content{display:none}.mobile-panel{display:none;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;height:100%}.mobile-panel.active{display:flex;flex-direction:column}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#6b7280}.spinner{width:32px;height:32px;border:3px solid #f3f4f6;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.save-status{position:fixed;top:calc(var(--header-height) + 10px);right:20px;padding:8px 16px;border-radius:8px;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:8px;z-index:999;transition:all .3s ease;box-shadow:0 4px 12px #00000026}.save-status.saving{background:#3b82f6;color:#fff}.save-status.saved{background:#10b981;color:#fff}.save-status.error{background:#ef4444;color:#fff}.save-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@media (max-width: 1400px){.layout-grid.with-trivia{grid-template-columns:320px 1fr 280px 1fr}}@media (max-width: 1200px){.layout-grid.with-trivia{grid-template-columns:280px 1fr 250px 1fr;gap:16px}.layout-grid.no-trivia{grid-template-columns:280px 1fr;gap:16px}.home-page{padding:16px;padding-top:calc(16px + var(--header-height))}.save-status{top:calc(var(--header-height) + 8px);right:16px}}@media (max-width: 768px){.home-page{padding:12px;padding-top:calc(12px + var(--header-height-mobile));height:85vh;overflow:hidden;display:flex;flex-direction:column}.layout-grid{display:none}.mobile-nav{display:block;flex-shrink:0}.mobile-content{display:block;flex:1;overflow:hidden}.mobile-details-nav{display:block}.save-status{top:calc(var(--header-height-mobile) + 8px);right:12px;font-size:.75rem;padding:6px 12px}}@media (max-width: 480px){.home-page{padding:8px;padding-top:calc(8px + var(--header-height-mobile))}.mobile-nav-header{padding:10px 12px;margin-bottom:8px}.mobile-nav-title{font-size:1rem}.mobile-details-tabs{margin:8px 12px}.mobile-details-tab{padding:6px 12px;font-size:.8rem}.mobile-panel{height:100%}.save-status{right:8px;font-size:.7rem;padding:4px 8px}}:root{--font-family-sans: "Poppins", sans-serif;--background-gradient: transparent;--color-bg: #F4F6F8;--color-bg-secondary: #FFFFFF;--color-bg-tertiary: #F0F3F6;--color-border: #E0E3E7;--color-border-accent: #0079BF;--color-text-primary: #172B4D;--color-text-secondary: #5E6C84;--color-accent-primary: #0079BF;--color-accent-secondary: #61BD4F;--color-success: #61BD4F;--color-danger: #EB5A46;--header-height: 80px;--header-height-mobile: 70px;color-scheme:light;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}html,body,#root,.app{font-family:var(--font-family-sans);background-color:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}a{font-weight:500;color:var(--color-accent-primary);text-decoration:inherit}a:hover{color:#026aa7}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--color-accent-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.app{width:100%;min-height:100vh;background:var(--color-bg);display:flex;flex-direction:column;margin:0;padding:0;position:relative;overflow:hidden}.app:before{display:none}.main-content{flex:1;width:100%;min-height:100vh;margin:0;padding:0;position:relative;z-index:1}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:1rem}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top:4px solid var(--color-accent-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-container p{color:var(--color-text-secondary);font-size:1.1rem;font-weight:500;margin:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.blank-page{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:2rem;padding-top:calc(2rem + var(--header-height));box-sizing:border-box;margin:0}.content-container{text-align:center;max-width:800px;width:100%;background:var(--color-bg-secondary);border-radius:2rem;padding:4rem 2rem;box-shadow:0 20px 60px #0003;border:1px solid var(--color-border)}.content-container h1{font-size:3rem;font-weight:700;color:var(--color-text-primary);margin:0 0 1rem;letter-spacing:-.025em}.content-container p{font-size:1.25rem;color:var(--color-text-secondary);margin:0;line-height:1.6;font-weight:400}@media (max-width: 768px){.blank-page{padding:1rem;padding-top:calc(1rem + var(--header-height-mobile))}.content-container{padding:3rem 1.5rem;border-radius:1.5rem}.content-container h1{font-size:2.25rem}.content-container p{font-size:1.125rem}}.welcome-section{text-align:center;padding:2rem 0}.welcome-section h2{font-size:2.5rem;color:#333;margin-bottom:1rem;font-weight:700}.welcome-section p{font-size:1.2rem;color:#666;margin-bottom:2rem}.demo-section{display:flex;justify-content:center;margin-top:2rem}.card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #0000001a;max-width:400px;width:100%}.card h3{color:#333;font-size:1.5rem;margin-bottom:1rem;font-weight:600}.card button{background:var(--color-accent-primary);border:1px solid var(--color-border-accent);box-shadow:0 2px 6px #00000014;color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500;width:100%;margin-bottom:1rem}.card button:hover{background:#026aa7;transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.card p{color:#666;font-size:.9rem;line-height:1.5;margin:0}@media (max-width: 768px){.main-content{padding:1rem}.welcome-section h2{font-size:2rem}.welcome-section p{font-size:1rem}.card{padding:1.5rem}}