.quiz-frontend-container{background:linear-gradient(135deg,#0f0f23 0%,#1a1a2e 50%,#16213e 100%);color:#fff;min-height:100vh;padding:40px 20px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;position:relative;overflow-x:hidden}.quiz-frontend-container::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgb(0 212 255 / .1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgb(0 212 255 / .05) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgb(0 212 255 / .03) 0%,transparent 50%);pointer-events:none;z-index:0}.quiz-frontend-container>*{position:relative;z-index:1}.quiz-header{text-align:center;margin-bottom:40px;padding:30px;background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .3);border-radius:20px;backdrop-filter:blur(15px);box-shadow:0 10px 30px rgb(0 212 255 / .1)}.quiz-header h2{color:#00d4ff;font-size:2.5em;margin:0 0 15px 0;text-shadow:0 0 20px rgb(0 212 255 / .5);font-weight:700;letter-spacing:1px}.quiz-header p{color:#a0a0a0;font-size:1.1em;margin:0;line-height:1.6}.quiz-join-form{max-width:500px;margin:0 auto;background:rgb(255 255 255 / .03);border:1px solid rgb(0 212 255 / .2);border-radius:20px;padding:40px;backdrop-filter:blur(15px);box-shadow:0 15px 40px rgb(0 212 255 / .1)}.quiz-manager-login.quiz-frontend-container{background:linear-gradient(135deg,#14171f 0%,#1b2029 55%,#12161d 100%);color:#f2f4f7;text-align:center}.quiz-manager-login.quiz-frontend-container::before{background:radial-gradient(circle at 20% 80%,rgb(120 160 180 / .08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgb(120 160 180 / .05) 0%,transparent 50%)}.quiz-manager-login .quiz-header{margin:0 auto 22px auto;padding:16px 18px;max-width:360px;border:1px solid rgb(255 255 255 / .08);box-shadow:none}.quiz-manager-login .quiz-header h2{font-size:1.8em;color:#e5e7eb;text-shadow:none}.quiz-manager-login .quiz-join-form{max-width:360px;padding:22px;margin:0 auto}.quiz-manager-login .form-group{margin-bottom:14px}.quiz-manager-login .form-group label{font-size:.8em;text-transform:uppercase;letter-spacing:.08em;color:rgb(230 236 242 / .7)}.quiz-manager-login .form-group input{padding:10px 12px;font-size:.95em;border-radius:9px;border-color:rgb(120 160 180 / .35);background:rgb(255 255 255 / .06)}.quiz-manager-login .quiz-btn{padding:10px 16px;font-size:.95em;background:linear-gradient(135deg,#9aa3ad 0%,#7a8591 100%)}.quiz-manager-login .quiz-btn:hover::before{background:linear-gradient(90deg,transparent,rgb(255 255 255 / .12),transparent)}.quiz-manager-login .quiz-login-logo img{max-width:120px;height:auto}.quiz-manager-login .quiz-login-form{text-align:left}.quiz-manager-login .quiz-login-status{max-width:360px;margin:10px auto 0 auto}.quiz-manager-login .quiz-action-buttons{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}.quiz-manager-login .quiz-action-buttons .quiz-btn{width:auto;min-width:160px}.quiz-manager-login .quiz-remember{margin-top:4px}.quiz-manager-login .quiz-remember-label{display:flex;align-items:center;gap:10px;font-size:.82em;color:rgb(230 236 242 / .75);cursor:pointer;position:relative;padding-left:26px}.quiz-manager-login .quiz-remember-label input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}.quiz-manager-login .quiz-remember-label::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:4px;border:1px solid rgb(120 160 180 / .5);background:rgb(255 255 255 / .04);box-shadow:inset 0 0 0 1px rgb(15 20 25 / .4)}.quiz-manager-login .quiz-remember-label input[type="checkbox"]:checked+span{color:#f2f4f7}.quiz-manager-login .quiz-remember-label input[type="checkbox"]:checked+span::after{content:'';position:absolute;left:5px;top:50%;width:6px;height:10px;border:solid #cfe0ea;border-width:0 2px 2px 0;transform:translateY(-55%) rotate(45deg)}@media (max-width:640px){.quiz-manager-login .quiz-join-form{max-width:100%}.quiz-manager-login .quiz-header h2{font-size:1.6em}}.form-group{margin-bottom:25px}.form-group label{display:block;color:#fff;font-weight:700;margin-bottom:8px;font-size:1.1em;text-shadow:0 0 10px rgb(0 212 255 / .3)}.form-group input{width:100%;padding:15px 20px;background:rgb(255 255 255 / .1);border:2px solid rgb(0 212 255 / .3);border-radius:12px;color:#fff;font-size:1.1em;transition:all 0.3s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#00d4ff;box-shadow:0 0 20px rgb(0 212 255 / .4);background:rgb(255 255 255 / .15)}.form-group input::placeholder{color:#a0a0a0;font-style:italic}.quiz-btn{background:linear-gradient(135deg,#00d4ff 0%,#0099cc 100%);border:none;color:#fff;padding:15px 30px;border-radius:12px;font-size:1.1em;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all 0.3s ease;width:100%;margin-top:10px;position:relative;overflow:hidden}.quiz-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s ease}.quiz-btn:hover::before{left:100%}.quiz-btn:hover{background:linear-gradient(135deg,#0099cc 0%,#0077aa 100%);transform:translateY(-3px);box-shadow:0 10px 25px rgb(0 212 255 / .4)}.quiz-btn:active{transform:translateY(-1px)}.quiz-btn:disabled{background:linear-gradient(135deg,#6c757d 0%,#495057 100%);cursor:not-allowed;transform:none;box-shadow:none}.quiz-btn-primary{background:linear-gradient(135deg,#00d4ff 0%,#0099cc 100%)}.quiz-btn-secondary{background:linear-gradient(135deg,#6c757d 0%,#495057 100%)}.quiz-btn-success{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%)}.quiz-btn-danger{background:linear-gradient(135deg,#dc3545 0%,#c82333 100%)}.quiz-progress{margin:20px 0;text-align:center}.progress-bar{width:100%;height:8px;background:rgb(255 255 255 / .1);border-radius:4px;overflow:hidden;margin-bottom:10px;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#00d4ff 0%,#0099cc 100%);border-radius:4px;transition:width 0.5s ease;position:relative;overflow:hidden}.progress-fill::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.progress-text{color:#a0a0a0;font-size:.9em;font-weight:700}#quiz-questions-container{max-width:800px;margin:0 auto}.quiz-question{background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .3);border-radius:20px;padding:30px;margin-bottom:30px;backdrop-filter:blur(15px);box-shadow:0 10px 30px rgb(0 212 255 / .1);display:none}.quiz-question.active{display:block;animation:fadeInUp 0.5s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.quiz-question h3{color:#00d4ff;font-size:1.5em;margin-bottom:20px;text-shadow:0 0 15px rgb(0 212 255 / .3)}.quiz-question-options{display:flex;flex-direction:column;gap:15px}.quiz-option{background:rgb(255 255 255 / .05);border:2px solid rgb(0 212 255 / .2);border-radius:12px;padding:15px 20px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:15px}.quiz-option:hover{background:rgb(0 212 255 / .1);border-color:#00d4ff;transform:translateX(5px)}.quiz-option.selected{background:rgb(0 212 255 / .2);border-color:#00d4ff;box-shadow:0 0 20px rgb(0 212 255 / .3)}.quiz-option input[type="radio"]{margin:0;width:20px;height:20px;accent-color:#00d4ff}.quiz-option label{color:#fff;font-size:1.1em;cursor:pointer;flex:1;margin:0}.quiz-timer{position:fixed;top:20px;right:20px;background:rgb(0 0 0 / .8);border:2px solid #00d4ff;border-radius:15px;padding:15px 25px;backdrop-filter:blur(10px);z-index:1000}.timer-label{color:#a0a0a0;font-size:.9em;display:block;margin-bottom:5px}.timer-value{color:#00d4ff;font-size:1.5em;font-weight:700;text-shadow:0 0 10px rgb(0 212 255 / .5)}.timer-value.warning{color:#ffc107;animation:pulse 1s infinite}.timer-value.danger{color:#dc3545;animation:pulse 0.5s infinite}.quiz-navigation{display:flex;justify-content:space-between;align-items:center;max-width:800px;margin:30px auto 0;padding:20px;background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .2);border-radius:15px;backdrop-filter:blur(15px)}.quiz-navigation .quiz-btn{width:auto;padding:12px 25px;margin:0}.quiz-character-creation{max-width:800px;margin:0 auto;background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .3);border-radius:20px;padding:30px;backdrop-filter:blur(15px);box-shadow:0 15px 40px rgb(0 212 255 / .1)}.quiz-character-creation h3{color:#00d4ff;text-align:center;margin-bottom:20px;font-size:1.8em;text-shadow:0 0 15px rgb(0 212 255 / .3)}.character-attributes,.character-items{margin-bottom:30px}.character-attributes h4,.character-items h4{color:#fff;margin-bottom:15px;font-size:1.3em;text-shadow:0 0 10px rgb(0 212 255 / .3)}.attribute-item,.item-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .2);border-radius:12px;margin-bottom:10px;transition:all 0.3s ease}.attribute-item:hover,.item-item:hover{background:rgb(0 212 255 / .1);border-color:#00d4ff}.attribute-name,.item-name{color:#fff;font-weight:700;font-size:1.1em}.attribute-controls,.item-controls{display:flex;align-items:center;gap:15px}.attribute-value,.item-cost{color:#00d4ff;font-weight:700;min-width:50px;text-align:center}.attribute-btn,.item-btn{background:linear-gradient(135deg,#00d4ff 0%,#0099cc 100%);border:none;color:#fff;width:35px;height:35px;border-radius:50%;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}.attribute-btn:hover,.item-btn:hover{background:linear-gradient(135deg,#0099cc 0%,#0077aa 100%);transform:scale(1.1)}.attribute-btn:disabled,.item-btn:disabled{background:linear-gradient(135deg,#6c757d 0%,#495057 100%);cursor:not-allowed;transform:none}.character-summary{text-align:center;padding:20px;background:rgb(0 212 255 / .1);border:1px solid rgb(0 212 255 / .3);border-radius:15px;margin-top:20px}.points-remaining{color:#fff;font-size:1.2em;font-weight:700;margin-bottom:20px}.points-remaining span:last-child{color:#00d4ff;text-shadow:0 0 10px rgb(0 212 255 / .5)}.quiz-message{padding:15px 20px;border-radius:10px;margin:20px 0;font-weight:700;text-align:center}.quiz-message.success{background:rgb(40 167 69 / .2);border:1px solid #28a745;color:#28a745}.quiz-message.error{background:rgb(220 53 69 / .2);border:1px solid #dc3545;color:#dc3545}.quiz-message.info{background:rgb(0 212 255 / .2);border:1px solid #00d4ff;color:#00d4ff}.quiz-score{text-align:center;margin:20px 0}.score-label{color:#a0a0a0;font-size:1.1em;display:block;margin-bottom:10px}.score-value{color:#00d4ff;font-size:3em;font-weight:700;text-shadow:0 0 20px rgb(0 212 255 / .5);display:block}#character-summary-display{background:rgb(255 255 255 / .05);border:1px solid rgb(0 212 255 / .3);border-radius:15px;padding:20px;margin-top:20px}.character-summary-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgb(0 212 255 / .2)}.character-summary-item:last-child{border-bottom:none}.character-summary-label{color:#a0a0a0;font-weight:700}.character-summary-value{color:#00d4ff;font-weight:700}@media (max-width:768px){.quiz-frontend-container{padding:20px 10px}.quiz-header h2{font-size:2em}.quiz-join-form{padding:30px 20px}.quiz-navigation{flex-direction:column;gap:15px}.quiz-navigation .quiz-btn{width:100%}.quiz-timer{position:relative;top:auto;right:auto;margin:20px auto;display:block;text-align:center}.attribute-item,.item-item{flex-direction:column;gap:15px;text-align:center}.attribute-controls,.item-controls{justify-content:center}.quiz-character-creator{padding-top:50px!important}.quiz-character-creator,#step-character{padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px))!important}.points-display-sticky{display:block!important;position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:99999!important;background:#1a1a2e!important;border-bottom:1px solid rgb(255 255 255 / .1)!important;box-shadow:0 2px 8px rgb(0 0 0 / .3)!important;padding:6px 15px!important;width:100vw!important;max-width:100vw!important;box-sizing:border-box!important;margin:0!important}.points-display-sticky-content{display:flex!important;justify-content:space-between!important;align-items:center!important;max-width:100%!important;margin:0 auto!important}.points-display-sticky .points-label{font-size:12px!important;color:rgb(255 255 255 / .7)!important;font-weight:500!important;margin-right:8px!important;white-space:nowrap!important}.points-display-sticky .points-value{font-size:18px!important;color:#f97316!important;font-weight:bold!important;font-family:'JetBrains Mono',monospace!important;white-space:nowrap!important}.character-actions{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:99999!important;background:#1a1a2e!important;border-top:1px solid rgb(255 255 255 / .1)!important;box-shadow:0 -2px 8px rgb(0 0 0 / .3)!important;padding:8px 12px!important;margin-top:0!important;margin-bottom:0!important;gap:8px!important;width:100vw!important;max-width:100vw!important;box-sizing:border-box!important;display:flex!important;justify-content:center!important;align-items:center!important}.character-actions .btn-primary,.character-actions .btn-secondary{flex:1!important;padding:8px 12px!important;font-size:13px!important;line-height:1.3!important;border-width:1px!important;min-height:auto!important;height:auto!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;min-width:0!important;max-width:100%!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important}.character-actions .btn-secondary{display:none!important}body{padding:0!important}}@media (max-width:480px){.quiz-header h2{font-size:1.8em}.quiz-join-form{padding:20px 15px}.form-group input{padding:12px 15px;font-size:1em}.quiz-btn{padding:12px 20px;font-size:1em}}.quiz-loading{display:flex;justify-content:center;align-items:center;padding:40px}.quiz-spinner{width:40px;height:40px;border:4px solid rgb(0 212 255 / .3);border-top:4px solid #00d4ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgb(255 255 255 / .1);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#00d4ff 0%,#0099cc 100%);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#0099cc 0%,#0077aa 100%)}.quiz-sorting-container p{color:rgb(255 255 255 / .7);margin-bottom:15px;font-size:.95em}.quiz-sorting-options{display:flex;flex-direction:column;gap:8px}.quiz-sorting-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .15);border-radius:8px;color:#fff;cursor:grab;user-select:none;-webkit-user-select:none;transition:background 0.2s,border-color 0.2s,box-shadow 0.2s,opacity 0.2s}.quiz-sorting-item:hover{background:rgb(0 212 255 / .1);border-color:rgb(0 212 255 / .3)}.quiz-sorting-item:active,.quiz-sorting-item.dragging{cursor:grabbing;opacity:.5;background:rgb(0 212 255 / .15);border-color:rgb(0 212 255 / .4);box-shadow:0 4px 16px rgb(0 212 255 / .15)}.quiz-sorting-item .sorting-handle{color:rgb(255 255 255 / .4);font-size:1.1em;flex-shrink:0}.quiz-sorting-item .sorting-text{flex:1}.quiz-sorting-placeholder{height:52px;border:2px dashed rgb(0 212 255 / .4);border-radius:8px;background:rgb(0 212 255 / .05)}.quiz-sorting-item.sorting-ghost{background:rgb(0 212 255 / .2);border-color:#00d4ff;box-shadow:0 8px 24px rgb(0 212 255 / .25)}#quiz-toast-container{position:fixed;top:20px;right:20px;z-index:100000;display:flex;flex-direction:column;gap:10px;max-width:400px;pointer-events:none}.quiz-toast{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;background:#1a1a2e;color:#e8e8f0;font-size:14px;box-shadow:0 8px 32px rgb(0 0 0 / .4);border-left:4px solid #666;transform:translateX(120%);opacity:0;transition:transform 0.35s cubic-bezier(.21,1.02,.73,1),opacity 0.3s ease;pointer-events:all}.quiz-toast-visible{transform:translateX(0);opacity:1}.quiz-toast-exit{transform:translateX(120%);opacity:0}.quiz-toast-success{border-left-color:#28c76f}.quiz-toast-error{border-left-color:#ea5455}.quiz-toast-warning{border-left-color:#ff9f43}.quiz-toast-info{border-left-color:#00cfe8}.quiz-toast-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;font-weight:700}.quiz-toast-success .quiz-toast-icon{background:rgb(40 199 111 / .2);color:#28c76f}.quiz-toast-error .quiz-toast-icon{background:rgb(234 84 85 / .2);color:#ea5455}.quiz-toast-warning .quiz-toast-icon{background:rgb(255 159 67 / .2);color:#ff9f43}.quiz-toast-info .quiz-toast-icon{background:rgb(0 207 232 / .2);color:#00cfe8}.quiz-toast-message{flex:1;line-height:1.4}.quiz-toast-close{flex-shrink:0;background:none;border:none;color:#888;font-size:18px;cursor:pointer;padding:0 4px;line-height:1;transition:color 0.2s}.quiz-toast-close:hover{color:#fff}.quiz-loading-overlay{position:absolute;inset:0;background:rgb(10 10 30 / .85);display:flex;align-items:center;justify-content:center;z-index:1000;border-radius:inherit;opacity:0;transition:opacity 0.2s ease;backdrop-filter:blur(2px)}.quiz-loading-overlay.visible{opacity:1}.quiz-loading-content{display:flex;flex-direction:column;align-items:center;gap:16px;color:#e8e8f0}.quiz-loading-spinner{width:40px;height:40px;border:3px solid rgb(0 212 255 / .15);border-top-color:#00d4ff;border-radius:50%;animation:quiz-spin 0.8s linear infinite}@keyframes quiz-spin{to{transform:rotate(360deg)}}.quiz-loading-text{font-size:14px;opacity:.8}.quiz-btn-loading{position:relative;cursor:wait!important;opacity:.7}.quiz-btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgb(255 255 255 / .3);border-top-color:#fff;border-radius:50%;animation:quiz-spin 0.6s linear infinite;vertical-align:middle}.quiz-input-error{border-color:#ea5455!important;box-shadow:0 0 0 3px rgb(234 84 85 / .15)!important}.quiz-input-error:focus{border-color:#ea5455!important;box-shadow:0 0 0 3px rgb(234 84 85 / .25)!important}.quiz-field-error{color:#ea5455;font-size:12px;margin-top:4px;padding-left:2px;animation:quiz-shake 0.3s ease}@keyframes quiz-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media (max-width:480px){#quiz-toast-container{top:auto;bottom:20px;right:10px;left:10px;max-width:none}.quiz-toast{font-size:13px;padding:12px 14px}}