/** * Luqta SDK UI Styles * Pre-configured UI styling system with customizable branding */ import { BrandingConfig } from '../types'; /** * Default branding configuration */ export declare const DEFAULT_BRANDING: Required; /** * Generates CSS variables from branding config */ export declare function generateCSSVariables(branding: BrandingConfig): string; /** * Main SDK styles */ export declare const SDK_STYLES = "\n .luqta-sdk {\n font-family: var(--luqta-font);\n background: var(--luqta-bg);\n color: var(--luqta-text);\n min-height: 100%;\n position: relative;\n }\n\n .luqta-sdk * {\n box-sizing: border-box;\n }\n\n /* Loading Spinner */\n .luqta-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n gap: 16px;\n }\n\n .luqta-spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--luqta-border);\n border-top-color: var(--luqta-primary);\n border-radius: 50%;\n animation: luqta-spin 0.8s linear infinite;\n }\n\n @keyframes luqta-spin {\n to { transform: rotate(360deg); }\n }\n\n /* Header */\n .luqta-header {\n padding: 20px;\n border-bottom: 1px solid var(--luqta-border);\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .luqta-header-logo {\n width: 40px;\n height: 40px;\n border-radius: var(--luqta-radius-sm);\n object-fit: contain;\n }\n\n .luqta-header-title {\n font-size: 20px;\n font-weight: 600;\n margin: 0;\n }\n\n /* Navigation */\n .luqta-nav {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--luqta-border);\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .luqta-nav::-webkit-scrollbar {\n display: none;\n }\n\n .luqta-nav-btn {\n padding: 10px 20px;\n border: none;\n background: transparent;\n color: var(--luqta-text-muted);\n cursor: pointer;\n border-radius: var(--luqta-radius);\n font-size: 14px;\n font-weight: 500;\n white-space: nowrap;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .luqta-nav-btn:hover {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n }\n\n .luqta-nav-btn.active {\n background: var(--luqta-primary);\n color: white;\n }\n\n /* Content Area */\n .luqta-content {\n padding: 20px;\n }\n\n .luqta-section-title {\n font-size: 18px;\n font-weight: 600;\n margin: 0 0 16px;\n }\n\n /* Contest Grid */\n .luqta-contests-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n }\n\n /* Contest Card - Figma Design */\n .luqta-contest-card {\n background: var(--luqta-bg);\n border-radius: 16px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n position: relative;\n border: 1px solid var(--luqta-border);\n }\n\n .luqta-contest-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transform: translateY(-2px);\n }\n\n .luqta-contest-card.completed {\n opacity: 0.9;\n }\n\n /* Banner with carousel support */\n .luqta-contest-banner {\n position: relative;\n height: 180px;\n background: linear-gradient(135deg, var(--luqta-bg-medium) 0%, var(--luqta-border) 100%);\n overflow: hidden;\n }\n\n .luqta-contest-banner-carousel {\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .luqta-contest-banner-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .luqta-contest-banner-slide.active {\n opacity: 1;\n }\n\n .luqta-contest-banner-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-contest-banner > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Multiple company logos container - Avatar Stack */\n .luqta-contest-logos {\n position: absolute;\n top: 10px;\n left: 10px;\n display: flex;\n align-items: center;\n z-index: 4;\n }\n\n /* Logo - Circle Avatar Style */\n .luqta-contest-logo {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--luqta-bg);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n border: 2px solid var(--luqta-bg);\n flex-shrink: 0;\n }\n\n .luqta-contest-logo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n }\n\n /* Badges container at bottom of banner */\n .luqta-contest-badges {\n position: absolute;\n bottom: 10px;\n left: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n z-index: 3;\n }\n\n .luqta-contest-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n border-radius: 16px;\n font-size: 11px;\n font-weight: 500;\n background: var(--luqta-image-badge-bg);\n color: var(--luqta-image-badge-text);\n backdrop-filter: blur(8px);\n }\n\n .luqta-contest-badge svg {\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n color: var(--luqta-image-badge-text);\n }\n\n .luqta-contest-badge.timer {\n color: var(--luqta-image-badge-text);\n }\n\n .luqta-contest-badge.timer svg {\n color: var(--luqta-warning);\n }\n\n .luqta-contest-badge.levels {\n color: var(--luqta-image-badge-text);\n }\n\n .luqta-contest-badge.levels svg {\n color: var(--luqta-image-badge-text);\n opacity: 0.7;\n }\n\n .luqta-contest-badge.completed-badge {\n background: var(--luqta-success);\n color: white;\n }\n\n /* Carousel dots - top right of banner */\n .luqta-carousel-dots {\n position: absolute;\n top: 10px;\n right: 10px;\n display: flex;\n gap: 4px;\n z-index: 4;\n }\n\n .luqta-carousel-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--luqta-image-badge-text);\n opacity: 0.5;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .luqta-carousel-dot.active {\n background: var(--luqta-image-badge-text);\n opacity: 0.95;\n width: 14px;\n border-radius: 3px;\n }\n\n /* Card body */\n .luqta-contest-body {\n padding: 12px;\n background: var(--luqta-bg);\n }\n\n .luqta-contest-title {\n font-size: 14px;\n font-weight: 700;\n margin: 0 0 4px;\n line-height: 1.3;\n color: var(--luqta-text);\n }\n\n .luqta-contest-desc {\n font-size: 11px;\n color: var(--luqta-text-muted);\n margin: 0;\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .luqta-contest-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n margin-top: 8px;\n position: relative;\n z-index: 10;\n }\n\n .luqta-contest-prize {\n display: none;\n }\n\n .luqta-contest-join-btn {\n padding: 8px 20px;\n border: none;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n background: var(--luqta-primary);\n color: white;\n }\n\n .luqta-contest-join-btn:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 12px var(--luqta-primary-shadow);\n }\n\n .luqta-contest-join-btn.participating {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n }\n\n .luqta-contest-join-btn.completed {\n background: var(--luqta-success);\n color: white;\n }\n\n /* Old meta styles kept for compatibility */\n .luqta-contest-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--luqta-text-muted);\n }\n\n .luqta-contest-meta-item {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .luqta-contest-progress {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--luqta-border);\n }\n\n .luqta-progress-bar {\n height: 6px;\n background: var(--luqta-border);\n border-radius: 3px;\n overflow: hidden;\n margin-bottom: 8px;\n }\n\n .luqta-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--luqta-primary), var(--luqta-secondary));\n border-radius: 3px;\n transition: width 0.3s ease;\n }\n\n .luqta-progress-text {\n font-size: 12px;\n color: var(--luqta-text-muted);\n display: flex;\n justify-content: space-between;\n }\n\n /* Type badges - keep for backwards compatibility */\n .luqta-contest-type-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n background: var(--luqta-badge-bg);\n color: var(--luqta-text);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .luqta-contest-type-badge.public {\n background: var(--luqta-success);\n color: white;\n }\n\n .luqta-contest-type-badge.private {\n background: var(--luqta-warning);\n color: white;\n }\n\n .luqta-contest-type-badge.vip {\n background: linear-gradient(135deg, var(--luqta-warning), var(--luqta-warning-dark));\n color: white;\n }\n\n /* Buttons */\n .luqta-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n border: none;\n border-radius: var(--luqta-radius);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .luqta-btn-primary {\n background: linear-gradient(135deg, var(--luqta-primary), var(--luqta-secondary));\n color: white;\n }\n\n .luqta-btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: var(--luqta-shadow);\n }\n\n .luqta-btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .luqta-btn-secondary {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n }\n\n .luqta-btn-secondary:hover {\n background: var(--luqta-primary-medium);\n }\n\n .luqta-btn-outline {\n background: transparent;\n border: 2px solid var(--luqta-border);\n color: var(--luqta-text);\n }\n\n .luqta-btn-outline:hover {\n border-color: var(--luqta-primary);\n color: var(--luqta-primary);\n }\n\n .luqta-btn-block {\n width: 100%;\n }\n\n .luqta-btn-sm {\n padding: 8px 16px;\n font-size: 13px;\n }\n\n /* Modal / Popup */\n .luqta-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--luqta-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n animation: luqta-fade-in 0.2s ease;\n }\n\n @keyframes luqta-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .luqta-modal {\n background: var(--luqta-bg);\n border-radius: var(--luqta-radius-lg);\n max-width: 480px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n animation: luqta-slide-up 0.3s ease;\n }\n\n @keyframes luqta-slide-up {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .luqta-modal-header {\n padding: 20px;\n border-bottom: 1px solid var(--luqta-border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .luqta-modal-title {\n font-size: 18px;\n font-weight: 600;\n margin: 0;\n }\n\n .luqta-modal-close {\n width: 32px;\n height: 32px;\n border: none;\n background: var(--luqta-border);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: var(--luqta-text-muted);\n transition: all 0.2s ease;\n }\n\n .luqta-modal-close:hover {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n }\n\n .luqta-modal-body {\n padding: 20px;\n }\n\n .luqta-modal-footer {\n padding: 20px;\n border-top: 1px solid var(--luqta-border);\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n }\n\n /* Contest Detail View */\n .luqta-contest-detail {\n padding: 0;\n }\n\n .luqta-contest-detail-banner {\n height: 200px;\n background: linear-gradient(135deg, var(--luqta-primary), var(--luqta-secondary));\n position: relative;\n }\n\n .luqta-contest-detail-banner img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-back-btn {\n position: absolute;\n top: 16px;\n left: 16px;\n width: 40px;\n height: 40px;\n border: none;\n background: var(--luqta-image-badge-bg);\n backdrop-filter: blur(8px);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n transition: all 0.2s ease;\n }\n\n .luqta-back-btn:hover {\n background: var(--luqta-overlay);\n transform: scale(1.05);\n }\n\n .luqta-back-btn svg {\n width: 20px;\n height: 20px;\n color: var(--luqta-image-badge-text);\n }\n\n .luqta-contest-detail-content {\n padding: 20px;\n }\n\n .luqta-contest-detail-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 12px;\n }\n\n .luqta-contest-detail-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n line-height: 1.6;\n margin: 0 0 20px;\n }\n\n .luqta-contest-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n }\n\n .luqta-stat-card {\n background: var(--luqta-primary-light);\n padding: 16px;\n border-radius: var(--luqta-radius);\n text-align: center;\n }\n\n .luqta-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--luqta-primary);\n margin-bottom: 4px;\n }\n\n .luqta-stat-label {\n font-size: 12px;\n color: var(--luqta-text-muted);\n }\n\n /* Levels List */\n .luqta-levels-section {\n margin-top: 24px;\n }\n\n .luqta-levels-title {\n font-size: 16px;\n font-weight: 600;\n margin: 0 0 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .luqta-levels-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .luqta-level-card {\n background: var(--luqta-bg);\n border: 1px solid var(--luqta-border);\n border-radius: var(--luqta-radius);\n padding: 16px;\n display: flex;\n align-items: center;\n gap: 16px;\n transition: all 0.2s ease;\n cursor: pointer;\n }\n\n .luqta-level-card:hover:not(.completed):not(.locked) {\n border-color: var(--luqta-primary);\n box-shadow: var(--luqta-shadow);\n }\n\n .luqta-level-card.completed {\n background: var(--luqta-primary-light);\n border-color: var(--luqta-primary);\n cursor: default;\n }\n\n .luqta-level-card.locked {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .luqta-level-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--luqta-radius-sm);\n background: var(--luqta-border);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n flex-shrink: 0;\n }\n\n .luqta-level-card.completed .luqta-level-icon {\n background: var(--luqta-success);\n color: white;\n }\n\n .luqta-level-info {\n flex: 1;\n min-width: 0;\n }\n\n .luqta-level-name {\n font-size: 15px;\n font-weight: 600;\n margin: 0 0 4px;\n }\n\n .luqta-level-desc {\n font-size: 13px;\n color: var(--luqta-text-muted);\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .luqta-level-points {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n flex-shrink: 0;\n }\n\n .luqta-level-card.completed .luqta-level-points {\n background: var(--luqta-success);\n color: white;\n }\n\n /* Level Type Icons */\n .luqta-level-type {\n font-size: 12px;\n color: var(--luqta-text-muted);\n display: flex;\n align-items: center;\n gap: 4px;\n margin-top: 4px;\n }\n\n /* Input Fields */\n .luqta-input-group {\n margin-bottom: 16px;\n }\n\n .luqta-input-label {\n display: block;\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 8px;\n }\n\n .luqta-input {\n width: 100%;\n padding: 12px 16px;\n border: 1px solid var(--luqta-border);\n border-radius: var(--luqta-radius);\n font-size: 14px;\n font-family: inherit;\n background: var(--luqta-bg);\n color: var(--luqta-text);\n transition: all 0.2s ease;\n }\n\n .luqta-input:focus {\n outline: none;\n border-color: var(--luqta-primary);\n box-shadow: 0 0 0 3px var(--luqta-primary-light);\n background: var(--luqta-bg);\n }\n\n .luqta-input::placeholder {\n color: var(--luqta-text-muted);\n }\n\n /* Congratulation Popup */\n .luqta-congrats {\n text-align: center;\n padding: 40px 20px;\n }\n\n .luqta-congrats-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, var(--luqta-success), var(--luqta-success-dark));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n font-size: 40px;\n color: white;\n animation: luqta-bounce 0.5s ease;\n }\n\n @keyframes luqta-bounce {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .luqta-congrats-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-success);\n }\n\n .luqta-congrats-message {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 24px;\n }\n\n .luqta-congrats-points {\n background: var(--luqta-primary-light);\n padding: 16px 24px;\n border-radius: var(--luqta-radius);\n display: inline-block;\n }\n\n .luqta-congrats-points-value {\n font-size: 32px;\n font-weight: 700;\n color: var(--luqta-primary);\n }\n\n .luqta-congrats-points-label {\n font-size: 14px;\n color: var(--luqta-text-muted);\n }\n\n /* Participate Popup */\n .luqta-participate {\n text-align: center;\n }\n\n .luqta-participate-icon {\n width: 64px;\n height: 64px;\n background: var(--luqta-primary-light);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n font-size: 28px;\n color: var(--luqta-primary);\n }\n\n .luqta-participate-title {\n font-size: 20px;\n font-weight: 600;\n margin: 0 0 8px;\n }\n\n .luqta-participate-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 24px;\n }\n\n /* Empty State */\n .luqta-empty {\n text-align: center;\n padding: 60px 20px;\n }\n\n .luqta-empty-icon {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.5;\n }\n\n .luqta-empty-title {\n font-size: 18px;\n font-weight: 600;\n margin: 0 0 8px;\n }\n\n .luqta-empty-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0;\n }\n\n /* Toast Notifications */\n .luqta-toast-container {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 1100;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .luqta-toast {\n background: var(--luqta-bg);\n padding: 16px 20px;\n border-radius: var(--luqta-radius);\n box-shadow: var(--luqta-shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n animation: luqta-slide-in 0.3s ease;\n max-width: 360px;\n }\n\n @keyframes luqta-slide-in {\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n .luqta-toast.success {\n border-left: 4px solid var(--luqta-success);\n }\n\n .luqta-toast.error {\n border-left: 4px solid var(--luqta-error);\n }\n\n .luqta-toast-icon {\n font-size: 20px;\n }\n\n .luqta-toast.success .luqta-toast-icon {\n color: var(--luqta-success);\n }\n\n .luqta-toast.error .luqta-toast-icon {\n color: var(--luqta-error);\n }\n\n .luqta-toast-message {\n font-size: 14px;\n flex: 1;\n }\n\n /* Level Status Badge */\n .luqta-level-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 4px;\n }\n\n .luqta-level-status {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 10px;\n }\n\n .luqta-level-status.completed {\n background: var(--luqta-success);\n color: white;\n }\n\n .luqta-level-status.in-progress {\n background: var(--luqta-warning);\n color: white;\n }\n\n .luqta-level-card.in-progress {\n border-color: var(--luqta-warning);\n background: var(--luqta-warning-lighter);\n }\n\n /* Quiz Modal */\n .luqta-quiz-modal {\n max-width: 480px;\n background: #fff;\n border-radius: 20px;\n padding: 0;\n overflow: hidden;\n }\n\n .luqta-quiz-body {\n padding: 28px 24px;\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n .luqta-quiz-timer {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--luqta-warning);\n font-weight: 600;\n margin-bottom: 12px;\n }\n\n .luqta-quiz-instruction {\n font-size: 13px;\n color: #E85D3A;\n margin-bottom: 16px;\n line-height: 1.4;\n }\n\n .luqta-quiz-question {\n padding: 0;\n }\n\n .luqta-question-text {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 24px 0;\n line-height: 1.4;\n color: #1a1a2e;\n }\n\n .luqta-quiz-options {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .luqta-quiz-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 14px 16px;\n background: #fff;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n font-family: inherit;\n font-size: 15px;\n color: #1a1a2e;\n }\n\n .luqta-quiz-option:hover:not(.selected):not(:disabled) {\n border-color: #bbb;\n }\n\n .luqta-quiz-option.selected {\n border-color: var(--luqta-primary);\n background: #faf8ff;\n }\n\n .luqta-quiz-option:disabled {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .luqta-option-text {\n flex: 1;\n }\n\n .luqta-option-radio {\n width: 24px;\n height: 24px;\n min-width: 24px;\n border: 2px solid #ccc;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n background: #fff;\n }\n\n .luqta-option-radio.checked {\n border-color: var(--luqta-primary);\n background: var(--luqta-primary);\n }\n\n .luqta-option-radio.checked svg {\n display: block;\n }\n\n .luqta-quiz-submit-btn {\n margin-top: 24px;\n width: 100%;\n padding: 14px;\n border: none;\n border-radius: 999px;\n font-size: 16px;\n font-weight: 600;\n font-family: inherit;\n cursor: not-allowed;\n background: #d5d5d5;\n color: #fff;\n transition: all 0.2s ease;\n }\n\n .luqta-quiz-submit-btn.enabled {\n cursor: pointer;\n background: linear-gradient(135deg, var(--luqta-primary), #8b5cf6);\n color: #fff;\n }\n\n .luqta-quiz-submit-btn.enabled:hover {\n opacity: 0.9;\n }\n\n .luqta-quiz-feedback {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n border-radius: 12px;\n margin-top: 16px;\n font-weight: 600;\n font-size: 14px;\n }\n\n .luqta-quiz-feedback.correct {\n background: var(--luqta-success-light);\n color: var(--luqta-success);\n }\n\n .luqta-quiz-feedback.incorrect {\n background: var(--luqta-error-light);\n color: var(--luqta-error);\n }\n\n /* QR Scanner Styles */\n .luqta-qr-scanner-container {\n text-align: center;\n }\n\n .luqta-qr-scanner-preview {\n position: relative;\n width: 100%;\n max-width: 300px;\n height: 250px;\n margin: 0 auto 16px;\n background: var(--luqta-overlay);\n border-radius: var(--luqta-radius);\n overflow: hidden;\n display: none;\n }\n\n .luqta-qr-scanner-preview.active {\n display: block;\n }\n\n .luqta-qr-scanner-preview video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-qr-scanner-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n }\n\n .luqta-qr-scanner-frame {\n width: 180px;\n height: 180px;\n border: 3px solid var(--luqta-inverted-border-strong);\n border-radius: 12px;\n position: relative;\n box-shadow: 0 0 0 9999px var(--luqta-overlay);\n }\n\n .luqta-qr-scanner-frame::before,\n .luqta-qr-scanner-frame::after {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n border-color: var(--luqta-primary);\n border-style: solid;\n }\n\n .luqta-qr-scanner-frame::before {\n top: -3px;\n left: -3px;\n border-width: 4px 0 0 4px;\n border-radius: 12px 0 0 0;\n }\n\n .luqta-qr-scanner-frame::after {\n bottom: -3px;\n right: -3px;\n border-width: 0 4px 4px 0;\n border-radius: 0 0 12px 0;\n }\n\n .luqta-qr-instruction {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 16px;\n }\n\n .luqta-qr-status {\n margin-top: 12px;\n padding: 12px;\n border-radius: var(--luqta-radius);\n font-size: 13px;\n }\n\n .luqta-qr-status.scanning {\n background: var(--luqta-primary-light);\n color: var(--luqta-primary);\n }\n\n .luqta-qr-status.success {\n background: var(--luqta-success-light);\n color: var(--luqta-success);\n }\n\n .luqta-qr-status.error {\n background: var(--luqta-error-light);\n color: var(--luqta-error);\n }\n\n /* Quiz Result Modal */\n .luqta-quiz-result {\n text-align: center;\n padding: 20px;\n }\n\n .luqta-result-icon {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n font-size: 40px;\n animation: luqta-bounce 0.5s ease;\n }\n\n .luqta-result-icon.passed {\n background: linear-gradient(135deg, var(--luqta-success), var(--luqta-success-dark));\n color: white;\n }\n\n .luqta-result-icon.failed {\n background: linear-gradient(135deg, var(--luqta-error), var(--luqta-error-dark));\n color: white;\n }\n\n .luqta-result-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 12px;\n }\n\n .luqta-result-grade {\n font-size: 48px;\n font-weight: 800;\n margin-bottom: 8px;\n }\n\n .luqta-result-grade.passed {\n color: var(--luqta-success);\n }\n\n .luqta-result-grade.failed {\n color: var(--luqta-error);\n }\n\n .luqta-result-remarks {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 24px;\n }\n\n .luqta-result-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 24px;\n }\n\n .luqta-result-stat {\n background: var(--luqta-primary-light);\n padding: 16px 12px;\n border-radius: var(--luqta-radius);\n }\n\n .luqta-result-stat-value {\n font-size: 20px;\n font-weight: 700;\n color: var(--luqta-primary);\n margin-bottom: 4px;\n }\n\n .luqta-result-stat-label {\n font-size: 11px;\n color: var(--luqta-text-muted);\n }\n\n .luqta-result-status {\n display: inline-block;\n padding: 8px 24px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 600;\n }\n\n .luqta-result-status.passed {\n background: var(--luqta-success-light);\n color: var(--luqta-success);\n }\n\n .luqta-result-status.failed {\n background: var(--luqta-error-light);\n color: var(--luqta-error);\n }\n\n /* Participation Modal Styles */\n .luqta-participation-content {\n text-align: center;\n padding: 20px 0;\n }\n\n .luqta-participation-icon {\n width: 64px;\n height: 64px;\n margin: 0 auto 16px;\n background: var(--luqta-primary-light);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-participation-icon svg {\n width: 32px;\n height: 32px;\n color: var(--luqta-primary);\n }\n\n .luqta-participation-content h3 {\n font-size: 18px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-text);\n }\n\n .luqta-participation-content p {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 16px;\n }\n\n .luqta-access-code-section {\n margin-top: 16px;\n text-align: left;\n }\n\n .luqta-private-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--luqta-warning-light);\n color: var(--luqta-warning);\n border-radius: 16px;\n font-size: 12px;\n font-weight: 500;\n margin-bottom: 12px;\n }\n\n .luqta-private-badge svg {\n width: 14px;\n height: 14px;\n }\n\n .luqta-input {\n width: 100%;\n padding: 12px 16px;\n border: 1px solid var(--luqta-border);\n border-radius: var(--luqta-radius);\n font-size: 14px;\n font-family: inherit;\n background: var(--luqta-bg);\n color: var(--luqta-text);\n transition: border-color 0.2s ease;\n }\n\n .luqta-input:focus {\n outline: none;\n border-color: var(--luqta-primary);\n background: var(--luqta-bg);\n }\n\n .luqta-input::placeholder {\n color: var(--luqta-text-light);\n }\n\n /* Loading Spinner */\n .luqta-loading-spinner {\n text-align: center;\n color: var(--luqta-text);\n }\n\n .luqta-spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--luqta-inverted-border);\n border-top-color: var(--luqta-primary);\n border-radius: 50%;\n animation: luqta-spin 1s linear infinite;\n margin: 0 auto 12px;\n }\n\n @keyframes luqta-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .luqta-loading-spinner p {\n margin: 0;\n font-size: 14px;\n }\n\n /* ============================================================================\n CONTEST DETAIL V2 (Figma Design)\n ============================================================================ */\n\n .luqta-contest-detail-v2 {\n background: var(--luqta-bg-light);\n min-height: 100%;\n }\n\n /* Detail Banner */\n .luqta-detail-banner {\n position: relative;\n height: 280px;\n background: linear-gradient(135deg, var(--luqta-primary), var(--luqta-secondary));\n overflow: hidden;\n }\n\n .luqta-detail-banner-carousel {\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .luqta-detail-banner-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .luqta-detail-banner-slide.active {\n opacity: 1;\n }\n\n .luqta-detail-banner-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-detail-carousel-dots {\n position: absolute;\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n z-index: 5;\n }\n\n .luqta-detail-carousel-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--luqta-image-badge-text);\n opacity: 0.5;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .luqta-detail-carousel-dot.active {\n background: var(--luqta-image-badge-text);\n opacity: 0.95;\n width: 20px;\n border-radius: 4px;\n }\n\n .luqta-share-btn {\n position: absolute;\n top: 16px;\n right: 16px;\n width: 40px;\n height: 40px;\n border: none;\n background: var(--luqta-image-badge-bg);\n backdrop-filter: blur(8px);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n z-index: 5;\n }\n\n .luqta-share-btn:hover {\n background: var(--luqta-overlay);\n transform: scale(1.05);\n }\n\n .luqta-share-btn svg {\n width: 20px;\n height: 20px;\n color: var(--luqta-image-badge-text);\n }\n\n /* Detail Content */\n .luqta-detail-content {\n padding: 20px;\n background: var(--luqta-bg-light);\n }\n\n .luqta-detail-header {\n background: var(--luqta-bg);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 16px;\n }\n\n .luqta-detail-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-text);\n }\n\n .luqta-detail-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n line-height: 1.6;\n margin: 0;\n }\n\n .luqta-see-more {\n color: var(--luqta-primary);\n font-weight: 600;\n text-decoration: none;\n }\n\n /* Detail Section Title */\n .luqta-detail-section-title {\n font-size: 16px;\n font-weight: 700;\n margin: 0 0 16px;\n color: var(--luqta-text);\n }\n\n /* Progress Section */\n .luqta-detail-progress-section {\n background: var(--luqta-bg);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 16px;\n }\n\n .luqta-detail-progress-badges {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n }\n\n .luqta-detail-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n background: var(--luqta-bg-medium);\n color: var(--luqta-text);\n }\n\n .luqta-detail-badge svg {\n width: 16px;\n height: 16px;\n }\n\n .luqta-detail-badge.timer svg {\n color: var(--luqta-warning);\n }\n\n .luqta-detail-badge.levels svg {\n color: var(--luqta-text-muted);\n }\n\n .luqta-detail-progress-hint {\n font-size: 13px;\n color: var(--luqta-text-muted);\n margin: 0 0 16px;\n }\n\n .luqta-detail-progress-bar {\n height: 12px;\n background: var(--luqta-border);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n }\n\n .luqta-detail-progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--luqta-primary), var(--luqta-secondary));\n border-radius: 6px;\n transition: width 0.5s ease;\n }\n\n .luqta-progress-check {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n color: white;\n }\n\n .luqta-progress-check svg {\n width: 16px;\n height: 16px;\n }\n\n /* Levels Section */\n .luqta-detail-levels-section {\n background: var(--luqta-bg);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 16px;\n }\n\n .luqta-detail-levels-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .luqta-detail-level-card {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--luqta-bg-light);\n border-radius: 12px;\n border: 1px solid var(--luqta-border);\n transition: all 0.2s ease;\n }\n\n .luqta-detail-level-card.completed {\n background: var(--luqta-success-lighter);\n border-color: var(--luqta-success-light);\n }\n\n .luqta-detail-level-card.locked {\n opacity: 0.6;\n }\n\n .luqta-detail-level-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--luqta-primary-light);\n }\n\n .luqta-detail-level-icon svg {\n width: 24px;\n height: 24px;\n color: var(--luqta-primary);\n }\n\n .luqta-detail-level-icon.text {\n background: var(--luqta-primary-light);\n }\n .luqta-detail-level-icon.text svg {\n color: var(--luqta-secondary);\n }\n\n .luqta-detail-level-icon.qr {\n background: var(--luqta-success-light);\n }\n .luqta-detail-level-icon.qr svg {\n color: var(--luqta-success);\n }\n\n .luqta-detail-level-icon.link {\n background: var(--luqta-primary-light);\n }\n .luqta-detail-level-icon.link svg {\n color: var(--luqta-info);\n }\n\n .luqta-detail-level-icon.image {\n background: var(--luqta-warning-light);\n }\n .luqta-detail-level-icon.image svg {\n color: var(--luqta-warning);\n }\n\n .luqta-detail-level-icon.quiz {\n background: var(--luqta-primary-light);\n }\n .luqta-detail-level-icon.quiz svg {\n color: var(--luqta-primary);\n }\n\n .luqta-detail-level-card.completed .luqta-detail-level-icon {\n background: var(--luqta-success-light);\n }\n .luqta-detail-level-card.completed .luqta-detail-level-icon svg {\n color: var(--luqta-success);\n }\n\n .luqta-detail-level-info {\n flex: 1;\n min-width: 0;\n }\n\n .luqta-detail-level-name {\n font-size: 15px;\n font-weight: 600;\n margin: 0 0 4px;\n color: var(--luqta-text);\n }\n\n .luqta-detail-level-status {\n font-size: 12px;\n color: var(--luqta-text-muted);\n }\n\n .luqta-detail-level-status.completed {\n color: var(--luqta-success);\n font-weight: 500;\n }\n\n .luqta-detail-level-action {\n flex-shrink: 0;\n }\n\n .luqta-detail-level-play {\n padding: 10px 24px;\n border: none;\n border-radius: 20px;\n background: var(--luqta-primary);\n color: white;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .luqta-detail-level-play:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 12px var(--luqta-primary-shadow);\n }\n\n .luqta-detail-level-check {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--luqta-success);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-detail-level-check svg {\n width: 18px;\n height: 18px;\n color: white;\n }\n\n .luqta-detail-level-locked {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--luqta-border);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-detail-level-locked svg {\n width: 16px;\n height: 16px;\n color: var(--luqta-text-light);\n }\n\n /* Companies Section */\n .luqta-detail-companies-section {\n margin-bottom: 16px;\n }\n\n .luqta-detail-companies-section .luqta-detail-section-title {\n padding: 0 4px;\n }\n\n .luqta-detail-companies-scroll {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .luqta-detail-companies-scroll::-webkit-scrollbar {\n display: none;\n }\n\n .luqta-detail-company-card {\n flex-shrink: 0;\n width: 160px;\n background: var(--luqta-bg);\n border-radius: 12px;\n padding: 16px;\n text-align: center;\n }\n\n .luqta-detail-company-logo {\n width: 64px;\n height: 64px;\n border-radius: 12px;\n margin: 0 auto 12px;\n overflow: hidden;\n background: var(--luqta-bg-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-detail-company-logo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-detail-company-logo.placeholder svg {\n width: 32px;\n height: 32px;\n color: var(--luqta-text-light);\n }\n\n .luqta-detail-company-name {\n font-size: 13px;\n font-weight: 600;\n margin: 0 0 4px;\n color: var(--luqta-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .luqta-detail-company-desc {\n font-size: 11px;\n color: var(--luqta-text-muted);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n /* Prizes Section */\n .luqta-detail-prizes-section {\n margin-bottom: 16px;\n }\n\n .luqta-detail-prizes-section .luqta-detail-section-title {\n padding: 0 4px;\n }\n\n .luqta-detail-prizes-list {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .luqta-detail-prizes-list::-webkit-scrollbar {\n display: none;\n }\n\n .luqta-detail-prize-card {\n flex-shrink: 0;\n width: 140px;\n background: var(--luqta-bg);\n border-radius: 12px;\n overflow: hidden;\n }\n\n .luqta-detail-prize-image {\n width: 100%;\n height: 100px;\n background: linear-gradient(135deg, var(--luqta-warning-light), var(--luqta-warning-light));\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-detail-prize-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .luqta-detail-prize-image.placeholder svg {\n width: 40px;\n height: 40px;\n color: var(--luqta-warning);\n }\n\n .luqta-detail-prize-info {\n padding: 12px;\n }\n\n .luqta-detail-prize-name {\n font-size: 13px;\n font-weight: 600;\n margin: 0 0 4px;\n color: var(--luqta-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .luqta-detail-prize-desc {\n font-size: 11px;\n color: var(--luqta-text-muted);\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n /* ============================================================================\n CONGRATULATION MODAL V2 (Figma Design - Exact Match)\n ============================================================================ */\n\n .luqta-congrats-modal-v2 {\n max-width: 380px;\n border-radius: 24px;\n overflow: visible;\n background: var(--luqta-bg);\n }\n\n .luqta-congrats-modal-v2 .luqta-modal-body {\n padding: 0;\n }\n\n .luqta-congrats-content {\n text-align: center;\n padding: 50px 32px 32px;\n position: relative;\n overflow: visible;\n }\n\n /* Confetti Decorations */\n .luqta-confetti-wrap {\n position: absolute;\n top: 80px;\n left: 50%;\n transform: translateX(-50%);\n width: 200px;\n height: 150px;\n pointer-events: none;\n }\n\n .luqta-confetti-piece {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 16px;\n background: var(--c);\n border-radius: 2px;\n transform: translate(var(--x), var(--y)) rotate(var(--r));\n animation: luqta-confetti-float 3s ease-in-out infinite;\n }\n\n .luqta-confetti-spiral {\n width: 12px;\n height: 12px;\n border: 3px solid var(--c);\n border-radius: 50%;\n background: transparent;\n border-top-color: transparent;\n border-left-color: transparent;\n }\n\n .luqta-confetti-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 8px;\n background: var(--c);\n border-radius: 50%;\n transform: translate(var(--x), var(--y));\n animation: luqta-confetti-pulse 2s ease-in-out infinite;\n }\n\n @keyframes luqta-confetti-float {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; transform: translate(var(--x), calc(var(--y) - 5px)) rotate(var(--r)); }\n }\n\n @keyframes luqta-confetti-pulse {\n 0%, 100% { transform: translate(var(--x), var(--y)) scale(1); }\n 50% { transform: translate(var(--x), var(--y)) scale(1.2); }\n }\n\n /* Medal Badge - Purple with Star (Figma Exact) */\n .luqta-medal-container {\n position: relative;\n margin: 0 auto 24px;\n width: 120px;\n height: 140px;\n }\n\n .luqta-medal-badge-v2 {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .luqta-medal-outer {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 100px;\n background: linear-gradient(135deg, var(--luqta-primary) 0%, var(--luqta-secondary) 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 8px 24px var(--luqta-primary-medium);\n animation: luqta-medal-pop 0.6s ease;\n }\n\n @keyframes luqta-medal-pop {\n 0% { transform: translateX(-50%) scale(0); }\n 50% { transform: translateX(-50%) scale(1.1); }\n 100% { transform: translateX(-50%) scale(1); }\n }\n\n .luqta-medal-inner {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, var(--luqta-secondary) 0%, var(--luqta-primary) 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px solid var(--luqta-inverted-border);\n }\n\n .luqta-medal-star {\n width: 36px;\n height: 36px;\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n }\n\n .luqta-medal-ribbon-left,\n .luqta-medal-ribbon-right {\n position: absolute;\n bottom: 0;\n width: 24px;\n height: 50px;\n background: linear-gradient(180deg, var(--luqta-secondary) 0%, var(--luqta-primary) 100%);\n }\n\n .luqta-medal-ribbon-left {\n left: 28px;\n transform: skewX(15deg);\n border-radius: 0 0 4px 4px;\n }\n\n .luqta-medal-ribbon-right {\n right: 28px;\n transform: skewX(-15deg);\n border-radius: 0 0 4px 4px;\n }\n\n /* Badge Container (SVG Badge Icon) */\n .luqta-badge-container {\n margin: 0 auto 16px;\n width: 120px;\n height: 140px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: luqta-badge-bounce 0.6s ease;\n }\n\n .luqta-badge-container svg {\n width: 100%;\n height: 100%;\n filter: drop-shadow(0 8px 24px var(--luqta-primary-shadow));\n }\n\n @keyframes luqta-badge-bounce {\n 0% { transform: scale(0); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n /* Title */\n .luqta-congrats-title-v2 {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-text);\n }\n\n /* Level Name */\n .luqta-congrats-level-name {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 8px;\n font-weight: 500;\n }\n\n /* Points Text */\n .luqta-congrats-points-text-v2 {\n font-size: 16px;\n color: var(--luqta-text-muted);\n margin: 0 0 20px;\n }\n\n .luqta-points-value {\n color: var(--luqta-warning);\n font-weight: 700;\n }\n\n /* Brand Logo */\n .luqta-congrats-brand {\n margin: 16px auto;\n width: 60px;\n height: 24px;\n }\n\n .luqta-congrats-brand img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .luqta-brand-text {\n font-size: 12px;\n color: var(--luqta-text-light);\n font-weight: 500;\n }\n\n /* Time Box */\n .luqta-time-box {\n background: var(--luqta-bg-light);\n border-radius: 16px;\n padding: 16px 24px;\n margin: 16px auto 24px;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 180px;\n }\n\n .luqta-time-icon-wrap {\n color: var(--luqta-text-light);\n margin-bottom: 4px;\n }\n\n .luqta-time-label-text {\n font-size: 12px;\n color: var(--luqta-text-light);\n }\n\n .luqta-time-value-display {\n font-size: 32px;\n font-weight: 700;\n color: var(--luqta-text);\n font-variant-numeric: tabular-nums;\n letter-spacing: 2px;\n }\n\n /* Action Buttons */\n .luqta-congrats-btns {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 8px;\n }\n\n .luqta-share-btn-v2 {\n width: 100%;\n padding: 14px 24px;\n border: 1px solid var(--luqta-border);\n border-radius: 12px;\n background: var(--luqta-bg);\n color: var(--luqta-text);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .luqta-share-btn-v2:hover {\n background: var(--luqta-bg-light);\n border-color: var(--luqta-border-medium);\n }\n\n .luqta-next-btn-v2 {\n width: 100%;\n padding: 16px 24px;\n border: none;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--luqta-success) 0%, var(--luqta-success-dark) 100%);\n color: white;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n }\n\n .luqta-next-btn-v2:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px var(--luqta-success-shadow);\n }\n\n /* ============================================================================\n LEVEL MODALS (QR & Image - Figma Design)\n ============================================================================ */\n\n .luqta-level-modal-special {\n max-width: 380px;\n width: 100%;\n border-radius: 24px;\n position: relative;\n background: var(--luqta-bg);\n overflow: hidden;\n }\n\n .luqta-modal-close-float {\n position: absolute;\n top: 16px;\n right: 16px;\n width: 36px;\n height: 36px;\n border: none;\n background: var(--luqta-bg-medium);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transition: all 0.2s ease;\n }\n\n .luqta-modal-close-float:hover {\n background: var(--luqta-border);\n }\n\n .luqta-modal-close-float svg {\n width: 18px;\n height: 18px;\n color: var(--luqta-text-muted);\n }\n\n .luqta-level-modal-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 60px 32px 32px;\n text-align: center;\n }\n\n .luqta-level-type-label {\n display: inline-block;\n padding: 6px 16px;\n background: var(--luqta-error-light);\n color: var(--luqta-error);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 16px;\n }\n\n .luqta-level-modal-title {\n font-size: 18px;\n font-weight: 600;\n color: var(--luqta-text);\n margin: 0 0 32px;\n line-height: 1.5;\n max-width: 280px;\n }\n\n /* QR Scanner Area - Figma Design */\n .luqta-qr-scanner-area {\n position: relative;\n width: 200px;\n height: 200px;\n margin: 0 auto 32px;\n }\n\n .luqta-qr-icon-placeholder {\n width: 100%;\n height: 100%;\n background: var(--luqta-bg-light);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n\n .luqta-qr-icon-placeholder svg {\n width: 64px;\n height: 64px;\n color: var(--luqta-text-muted);\n }\n\n /* Animated rings around QR icon */\n .luqta-qr-icon-placeholder::before,\n .luqta-qr-icon-placeholder::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border: 2px solid var(--luqta-primary-medium);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: luqta-ring-pulse 2s ease-out infinite;\n }\n\n .luqta-qr-icon-placeholder::after {\n animation-delay: 1s;\n }\n\n @keyframes luqta-ring-pulse {\n 0% {\n width: 100%;\n height: 100%;\n opacity: 1;\n }\n 100% {\n width: 140%;\n height: 140%;\n opacity: 0;\n }\n }\n\n .luqta-qr-scanner-area .luqta-qr-scanner-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n background: var(--luqta-overlay);\n display: none;\n }\n\n .luqta-qr-scanner-area .luqta-qr-scanner-preview.active {\n display: block;\n }\n\n .luqta-qr-scanner-area .luqta-qr-scanner-preview.active + .luqta-qr-icon-placeholder {\n display: none;\n }\n\n .luqta-qr-scanner-area video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Upload Area - Figma Design */\n .luqta-upload-area {\n width: 100%;\n max-width: 300px;\n height: 200px;\n margin: 0 auto 32px;\n position: relative;\n }\n\n .luqta-upload-placeholder {\n width: 100%;\n height: 100%;\n border: 2px dashed var(--luqta-border-medium);\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--luqta-bg-light);\n }\n\n .luqta-upload-placeholder:hover {\n border-color: var(--luqta-primary);\n background: var(--luqta-primary-light);\n }\n\n .luqta-upload-icon {\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-upload-icon svg {\n width: 48px;\n height: 48px;\n color: var(--luqta-text-light);\n }\n\n .luqta-upload-hint {\n font-size: 12px;\n color: var(--luqta-text-light);\n margin: 0;\n line-height: 1.6;\n text-align: center;\n }\n\n .luqta-upload-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n background: var(--luqta-bg-medium);\n }\n\n .luqta-upload-preview img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Action Button - Figma Design */\n .luqta-level-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 16px 48px;\n border: none;\n border-radius: 30px;\n background: linear-gradient(135deg, var(--luqta-primary), var(--luqta-secondary));\n color: white;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n min-width: 200px;\n }\n\n .luqta-level-action-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 20px var(--luqta-primary-shadow);\n }\n\n .luqta-level-action-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .luqta-level-action-btn svg {\n width: 20px;\n height: 20px;\n }\n\n /* QR Status in fullscreen modal */\n .luqta-level-modal-content .luqta-qr-status {\n margin-top: 16px;\n padding: 12px 24px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n }\n\n .luqta-level-modal-content .luqta-qr-status:empty {\n display: none;\n }\n\n .luqta-level-modal-content .luqta-qr-status.scanning {\n background: var(--luqta-primary-light);\n color: var(--luqta-secondary);\n }\n\n .luqta-level-modal-content .luqta-qr-status.success {\n background: var(--luqta-success-light);\n color: var(--luqta-success);\n }\n\n .luqta-level-modal-content .luqta-qr-status.error {\n background: var(--luqta-error-light);\n color: var(--luqta-error);\n }\n\n /* ============================================================================\n CONTEST COMPLETION MODAL\n ============================================================================ */\n\n .luqta-contest-complete-modal {\n max-width: 420px;\n width: 100%;\n border-radius: 24px;\n overflow: visible;\n background: var(--luqta-bg);\n }\n\n .luqta-contest-complete-content {\n text-align: center;\n padding: 40px 32px 32px;\n position: relative;\n overflow: visible;\n }\n\n .luqta-contest-complete-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, var(--luqta-warning), var(--luqta-warning-dark));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 20px;\n animation: luqta-badge-bounce 0.6s ease;\n }\n\n .luqta-contest-complete-icon svg {\n width: 40px;\n height: 40px;\n color: white;\n }\n\n .luqta-contest-complete-title {\n font-size: 24px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-text);\n }\n\n .luqta-contest-complete-subtitle {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 8px;\n }\n\n .luqta-contest-complete-name {\n font-size: 16px;\n font-weight: 600;\n color: var(--luqta-primary);\n margin: 0 0 24px;\n }\n\n .luqta-contest-complete-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .luqta-contest-complete-stat {\n background: var(--luqta-bg-light);\n padding: 16px 8px;\n border-radius: 12px;\n }\n\n .luqta-contest-complete-stat-value {\n font-size: 20px;\n font-weight: 700;\n color: var(--luqta-primary);\n margin-bottom: 4px;\n }\n\n .luqta-contest-complete-stat-label {\n font-size: 11px;\n color: var(--luqta-text-muted);\n }\n\n .luqta-contest-complete-draw {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n background: var(--luqta-warning-light);\n border-radius: 12px;\n margin-bottom: 20px;\n font-size: 14px;\n color: var(--luqta-warning-dark);\n }\n\n .luqta-contest-complete-draw svg {\n width: 18px;\n height: 18px;\n color: var(--luqta-warning);\n }\n\n .luqta-contest-complete-prizes {\n margin-bottom: 24px;\n }\n\n .luqta-contest-complete-prizes-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--luqta-text);\n margin: 0 0 12px;\n }\n\n .luqta-contest-complete-prizes-list {\n display: flex;\n justify-content: center;\n gap: 16px;\n flex-wrap: wrap;\n }\n\n .luqta-contest-complete-prize {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n\n .luqta-contest-complete-prize img {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n object-fit: cover;\n border: 2px solid var(--luqta-border);\n }\n\n .luqta-contest-complete-prize .luqta-prize-placeholder {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--luqta-warning-light), var(--luqta-warning-light));\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-contest-complete-prize .luqta-prize-placeholder svg {\n width: 28px;\n height: 28px;\n color: var(--luqta-warning);\n }\n\n .luqta-contest-complete-prize span {\n font-size: 12px;\n color: var(--luqta-text);\n font-weight: 500;\n }\n\n .luqta-contest-complete-actions {\n margin-top: 8px;\n }\n\n /* ============================================================================\n CONTEST INFO BUTTON & MODAL\n ============================================================================ */\n\n /* Info Button on Contest Card */\n .luqta-contest-info-btn {\n width: 36px;\n height: 36px;\n border: 1px solid var(--luqta-border);\n border-radius: 50%;\n background: var(--luqta-bg);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n position: relative;\n z-index: 10;\n }\n\n .luqta-contest-info-btn:hover {\n background: var(--luqta-primary-light);\n border-color: var(--luqta-primary);\n }\n\n .luqta-contest-info-btn svg {\n width: 18px;\n height: 18px;\n color: var(--luqta-text-muted);\n transition: color 0.2s ease;\n }\n\n .luqta-contest-info-btn:hover svg {\n color: var(--luqta-primary);\n }\n\n /* Info Modal */\n .luqta-info-modal {\n max-width: 400px;\n }\n\n .luqta-info-modal-large {\n max-width: 520px;\n }\n\n .luqta-info-content {\n padding: 4px 0;\n }\n\n .luqta-info-header {\n margin-bottom: 20px;\n }\n\n .luqta-info-title {\n font-size: 20px;\n font-weight: 700;\n margin: 0 0 8px;\n color: var(--luqta-text);\n }\n\n .luqta-info-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n line-height: 1.6;\n margin: 0;\n }\n\n /* Info Grid */\n .luqta-info-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .luqta-info-item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px;\n background: var(--luqta-bg-light);\n border-radius: 10px;\n }\n\n .luqta-info-icon {\n flex-shrink: 0;\n color: var(--luqta-primary);\n }\n\n .luqta-info-icon svg {\n width: 18px;\n height: 18px;\n }\n\n .luqta-info-detail {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n }\n\n .luqta-info-label {\n font-size: 11px;\n color: var(--luqta-text-light);\n font-weight: 500;\n text-transform: uppercase;\n }\n\n .luqta-info-value {\n font-size: 13px;\n color: var(--luqta-text);\n font-weight: 600;\n word-break: break-word;\n }\n\n /* Info Stats */\n .luqta-info-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n margin-bottom: 20px;\n }\n\n .luqta-info-stat {\n text-align: center;\n padding: 12px 8px;\n background: linear-gradient(135deg, var(--luqta-primary-light) 0%, var(--luqta-primary-light) 100%);\n border-radius: 10px;\n }\n\n .luqta-info-stat-value {\n font-size: 20px;\n font-weight: 700;\n color: var(--luqta-primary);\n display: block;\n }\n\n .luqta-info-stat-label {\n font-size: 10px;\n color: var(--luqta-text-muted);\n font-weight: 500;\n display: block;\n margin-top: 4px;\n }\n\n /* Info Badges */\n .luqta-info-badges {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n\n .luqta-info-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 16px;\n font-size: 12px;\n font-weight: 500;\n background: var(--luqta-bg-medium);\n color: var(--luqta-text);\n }\n\n .luqta-info-badge svg {\n width: 14px;\n height: 14px;\n }\n\n .luqta-info-badge.public {\n background: var(--luqta-success-light);\n color: var(--luqta-success-dark);\n }\n\n .luqta-info-badge.private {\n background: var(--luqta-warning-light);\n color: var(--luqta-warning-dark);\n }\n\n .luqta-info-badge.view-type {\n background: var(--luqta-primary-light);\n color: var(--luqta-secondary);\n }\n\n /* Info Sections */\n .luqta-info-section {\n margin-bottom: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--luqta-border);\n }\n\n .luqta-info-section-title {\n font-size: 14px;\n font-weight: 600;\n margin: 0 0 12px;\n color: var(--luqta-text);\n }\n\n /* Levels Preview */\n .luqta-info-levels-preview {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .luqta-info-level-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: var(--luqta-bg-light);\n border-radius: 8px;\n }\n\n .luqta-info-level-icon {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--luqta-primary-light);\n }\n\n .luqta-info-level-icon svg {\n width: 16px;\n height: 16px;\n color: var(--luqta-primary);\n }\n\n .luqta-info-level-icon.text {\n background: var(--luqta-primary-light);\n }\n .luqta-info-level-icon.text svg {\n color: var(--luqta-secondary);\n }\n\n .luqta-info-level-icon.qr {\n background: var(--luqta-success-light);\n }\n .luqta-info-level-icon.qr svg {\n color: var(--luqta-success);\n }\n\n .luqta-info-level-icon.link {\n background: var(--luqta-primary-light);\n }\n .luqta-info-level-icon.link svg {\n color: var(--luqta-info);\n }\n\n .luqta-info-level-icon.image {\n background: var(--luqta-warning-light);\n }\n .luqta-info-level-icon.image svg {\n color: var(--luqta-warning);\n }\n\n .luqta-info-level-icon.quiz {\n background: var(--luqta-primary-light);\n }\n .luqta-info-level-icon.quiz svg {\n color: var(--luqta-primary);\n }\n\n .luqta-info-level-name {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--luqta-text);\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .luqta-info-level-points {\n font-size: 12px;\n font-weight: 600;\n color: var(--luqta-primary);\n flex-shrink: 0;\n }\n\n .luqta-info-more {\n text-align: center;\n font-size: 12px;\n color: var(--luqta-text-light);\n padding: 8px;\n }\n\n /* Prizes Preview */\n .luqta-info-prizes-preview {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 4px;\n -webkit-overflow-scrolling: touch;\n }\n\n .luqta-info-prizes-preview::-webkit-scrollbar {\n display: none;\n }\n\n .luqta-info-prize-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n }\n\n .luqta-info-prize-img {\n width: 56px;\n height: 56px;\n border-radius: 10px;\n object-fit: cover;\n border: 2px solid var(--luqta-border);\n }\n\n .luqta-info-prize-placeholder {\n width: 56px;\n height: 56px;\n border-radius: 10px;\n background: linear-gradient(135deg, var(--luqta-warning-light), var(--luqta-warning-light));\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-info-prize-placeholder svg {\n width: 24px;\n height: 24px;\n color: var(--luqta-warning);\n }\n\n .luqta-info-prize-name {\n font-size: 11px;\n color: var(--luqta-text);\n font-weight: 500;\n text-align: center;\n max-width: 70px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /* Draw Rules */\n .luqta-info-rules {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .luqta-info-rule {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: var(--luqta-text);\n }\n\n .luqta-info-rule svg {\n width: 16px;\n height: 16px;\n color: var(--luqta-success);\n flex-shrink: 0;\n }\n\n /* Access Code Modal Content */\n .luqta-access-code-content {\n text-align: center;\n padding: 16px 0;\n }\n\n .luqta-access-code-icon {\n width: 56px;\n height: 56px;\n margin: 0 auto 16px;\n background: var(--luqta-warning-light);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-access-code-icon svg {\n width: 28px;\n height: 28px;\n color: var(--luqta-warning);\n }\n\n .luqta-access-code-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n margin: 0 0 20px;\n line-height: 1.6;\n }\n\n /* ============================================================================\n CONTEST INFO PAGE (Full Page View)\n ============================================================================ */\n\n .luqta-contest-info-page {\n background: var(--luqta-bg-light);\n min-height: 100%;\n }\n\n .luqta-info-page-content {\n padding: 20px;\n }\n\n .luqta-info-page-header {\n background: var(--luqta-bg);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 16px;\n }\n\n .luqta-info-page-title {\n font-size: 22px;\n font-weight: 700;\n margin: 0 0 10px;\n color: var(--luqta-text);\n line-height: 1.3;\n }\n\n .luqta-info-page-desc {\n font-size: 14px;\n color: var(--luqta-text-muted);\n line-height: 1.6;\n margin: 0 0 16px;\n }\n\n .luqta-info-page-section {\n background: var(--luqta-bg);\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 16px;\n }\n\n .luqta-info-page-section-title {\n font-size: 16px;\n font-weight: 700;\n margin: 0 0 16px;\n color: var(--luqta-text);\n }\n\n /* Info Page Levels List */\n .luqta-info-levels-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .luqta-info-level-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n background: var(--luqta-bg-light);\n border-radius: 12px;\n border: 1px solid var(--luqta-border);\n }\n\n .luqta-info-level-info {\n flex: 1;\n min-width: 0;\n }\n\n .luqta-info-level-title {\n font-size: 15px;\n font-weight: 600;\n margin: 0 0 4px;\n color: var(--luqta-text);\n }\n\n .luqta-info-level-desc {\n font-size: 13px;\n color: var(--luqta-text-muted);\n margin: 0;\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .luqta-info-level-points-badge {\n flex-shrink: 0;\n padding: 6px 12px;\n background: linear-gradient(135deg, var(--luqta-primary-light) 0%, var(--luqta-primary-medium) 100%);\n color: var(--luqta-primary);\n font-size: 13px;\n font-weight: 700;\n border-radius: 16px;\n }\n\n /* Draw Rules Card */\n .luqta-info-rules-card {\n background: var(--luqta-bg-light);\n border-radius: 12px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n /* Prize Value */\n .luqta-detail-prize-value {\n display: inline-block;\n margin-top: 8px;\n padding: 4px 10px;\n background: linear-gradient(135deg, var(--luqta-warning-light), var(--luqta-warning-light));\n color: var(--luqta-warning-dark);\n font-size: 12px;\n font-weight: 600;\n border-radius: 12px;\n }\n\n /* Info Page Footer (Fixed Bottom Button) */\n .luqta-info-page-footer {\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 16px 20px;\n background: var(--luqta-bg);\n border-top: 1px solid var(--luqta-border);\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);\n }\n\n /* Progress Section */\n .luqta-progress-section {\n background: linear-gradient(135deg, var(--luqta-primary-light) 0%, var(--luqta-primary-light) 100%);\n }\n\n .luqta-info-progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .luqta-info-progress-text {\n font-size: 14px;\n font-weight: 600;\n color: var(--luqta-primary);\n }\n\n .luqta-info-progress-stats {\n display: flex;\n justify-content: space-between;\n margin-top: 12px;\n }\n\n .luqta-info-progress-points {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n font-weight: 600;\n color: var(--luqta-primary);\n }\n\n .luqta-info-progress-points svg {\n width: 16px;\n height: 16px;\n }\n\n /* Participating Badge */\n .luqta-info-badge.participating {\n background: var(--luqta-success-light);\n color: var(--luqta-success-dark);\n }\n\n .luqta-info-badge.participating svg {\n width: 12px;\n height: 12px;\n }\n\n /* Level Card States */\n .luqta-info-level-card.clickable {\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .luqta-info-level-card.clickable:hover {\n border-color: var(--luqta-primary);\n background: var(--luqta-primary-light);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px var(--luqta-primary-medium);\n }\n\n .luqta-info-level-card.completed {\n background: var(--luqta-success-lighter);\n border-color: var(--luqta-success);\n }\n\n .luqta-info-level-card.locked {\n opacity: 0.6;\n }\n\n .luqta-info-level-icon.completed {\n background: var(--luqta-success) !important;\n }\n\n .luqta-info-level-icon.completed svg {\n color: white !important;\n }\n\n /* Level Status Labels */\n .luqta-info-level-status {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-weight: 500;\n margin-top: 4px;\n }\n\n .luqta-info-level-status.completed {\n color: var(--luqta-success);\n }\n\n .luqta-info-level-status.locked {\n color: var(--luqta-text-light);\n }\n\n .luqta-info-level-status svg {\n width: 12px;\n height: 12px;\n }\n\n /* Level Action Area */\n .luqta-info-level-action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n }\n\n .luqta-info-level-play-btn {\n padding: 8px 16px;\n background: var(--luqta-primary);\n color: white;\n border: none;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .luqta-info-level-play-btn:hover {\n background: var(--luqta-primary-dark);\n transform: scale(1.05);\n }\n\n .luqta-info-level-check {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--luqta-success);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .luqta-info-level-check svg {\n width: 18px;\n height: 18px;\n color: white;\n }\n\n /* Small Spinner for Button Loading */\n .luqta-spinner-small {\n display: inline-block;\n width: 16px;\n height: 16px;\n border: 2px solid var(--luqta-inverted-border);\n border-radius: 50%;\n border-top-color: white;\n animation: luqta-spin 0.8s linear infinite;\n margin-right: 8px;\n vertical-align: middle;\n }\n\n /* Responsive */\n @media (max-width: 640px) {\n .luqta-contests-grid {\n grid-template-columns: 1fr;\n }\n\n .luqta-contest-stats {\n grid-template-columns: 1fr;\n }\n\n .luqta-modal {\n margin: 10px;\n max-height: calc(100vh - 20px);\n }\n\n .luqta-nav {\n padding: 12px 16px;\n }\n\n .luqta-nav-btn {\n padding: 8px 16px;\n font-size: 13px;\n }\n\n .luqta-detail-banner {\n height: 220px;\n }\n\n .luqta-detail-company-card {\n width: 140px;\n }\n\n .luqta-detail-prize-card {\n width: 120px;\n }\n }\n\n .luqta-watermark {\n text-align: center;\n padding: 8px 0 12px;\n font-size: 11px;\n color: #999;\n font-weight: 500;\n pointer-events: none;\n user-select: none;\n }\n\n /* ============================================================\n PROFILE ICON (draggable floating button)\n ============================================================ */\n\n .luqta-profile-icon {\n position: absolute;\n right: 16px;\n bottom: 100px;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--luqta-primary, #5304fb), rgba(83,4,251,0.75));\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n box-shadow: 0 3px 8px rgba(83,4,251,0.35);\n z-index: 100;\n touch-action: none;\n user-select: none;\n transition: box-shadow 0.15s;\n }\n\n .luqta-profile-icon:hover {\n box-shadow: 0 5px 14px rgba(83,4,251,0.45);\n }\n\n /* ============================================================\n PROFILE SHEET\n ============================================================ */\n\n .luqta-profile-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.4);\n z-index: 9999;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n }\n\n .luqta-profile-sheet {\n background: #fff;\n border-radius: 24px 24px 0 0;\n width: 100%;\n max-width: 480px;\n padding-bottom: env(safe-area-inset-bottom, 16px);\n max-height: 90vh;\n overflow-y: auto;\n }\n\n .luqta-profile-handle {\n width: 36px;\n height: 4px;\n background: #e5e7eb;\n border-radius: 2px;\n margin: 12px auto 8px;\n }\n\n .luqta-profile-header {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 12px 20px;\n }\n\n .luqta-profile-avatar {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--luqta-profile-primary, #5304fb), rgba(83,4,251,0.7));\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n flex-shrink: 0;\n }\n\n .luqta-profile-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .luqta-profile-name {\n font-size: 18px;\n font-weight: 700;\n color: #111827;\n }\n\n .luqta-profile-contact {\n font-size: 13px;\n color: #6b7280;\n }\n\n .luqta-profile-verified {\n font-size: 11px;\n font-weight: 600;\n color: #10b981;\n background: rgba(16,185,129,0.1);\n padding: 3px 8px;\n border-radius: 12px;\n white-space: nowrap;\n }\n\n .luqta-profile-divider {\n border: none;\n border-top: 1px solid #f3f4f6;\n margin: 0;\n }\n\n .luqta-profile-points-badge {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 14px 20px;\n padding: 12px 16px;\n background: rgba(83,4,251,0.08);\n border-radius: 14px;\n border: 1px solid rgba(83,4,251,0.15);\n }\n\n .luqta-profile-points-value {\n font-size: 22px;\n font-weight: 800;\n color: var(--luqta-profile-primary, #5304fb);\n }\n\n .luqta-profile-points-label {\n font-size: 12px;\n color: #6b7280;\n }\n\n .luqta-profile-stats-title {\n font-size: 15px;\n font-weight: 700;\n color: #111827;\n margin: 4px 20px 8px;\n }\n\n .luqta-profile-stats-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n padding: 0 20px 16px;\n }\n\n .luqta-profile-stat-card {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 10px 12px;\n background: rgba(83,4,251,0.06);\n border-radius: 12px;\n border: 1px solid rgba(83,4,251,0.12);\n }\n\n .luqta-profile-stat-value {\n font-size: 16px;\n font-weight: 700;\n color: var(--luqta-profile-primary, #5304fb);\n }\n\n .luqta-profile-stat-label {\n font-size: 10px;\n color: #6b7280;\n }\n"; /** * Inject styles into document */ export declare function injectStyles(branding?: BrandingConfig): void;