body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(to bottom right,#e6f2fb,#fff)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body,html{background:#0000!important;height:100%!important;margin:0!important;padding:0!important;width:100%!important}body{-webkit-overflow-scrolling:touch!important;overscroll-behavior:none!important}#root{height:100vh!important;overscroll-behavior:none!important}#root,.App{background:#0000!important;width:100%!important}.App{min-height:100vh!important;text-align:center}@supports (padding:env(safe-area-inset-top)){#root,.App,body,html{margin-top:0!important;padding-top:0!important}}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background:linear-gradient(to bottom right,#e6f2fb,#fff)!important;color:#333;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}#paramedic-subscription-container{align-items:center;background-color:#fff;box-sizing:border-box;color:#333;display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:center;line-height:1.6;min-height:100vh;padding:40px 20px;width:100%}.subscription-content{max-width:500px;text-align:center;width:100%}.header-section{margin-bottom:40px;text-align:center}.header-section h1{color:#2c3e50;font-size:2.2rem;font-weight:700;margin-bottom:10px}.subtitle{color:#6c757d;font-size:1.1rem;margin:0}.validation-section{margin-bottom:30px;text-align:center}.validation-section label{color:#555;display:block;font-size:.95rem;margin-bottom:10px}.validation-row{display:flex;gap:10px;justify-content:center;margin:0 auto;max-width:350px}#validation-input{border:2px solid #e9ecef;border-radius:6px;flex:1 1;font-size:1rem;outline:none;padding:10px 15px;transition:border-color .2s ease}#validation-input:focus{border-color:#0056b3}.apply-code-button{background:#6c757d;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:10px 20px;transition:background-color .2s ease}.apply-code-button:hover{background:#5a6268}.pricing-section{margin-bottom:30px;text-align:center}.price-card{background:linear-gradient(135deg,#fff,#f8f9fa);border:2px solid #0056b3;border-radius:12px;box-shadow:0 4px 12px #0056b31a;color:#2c3e50;margin:0 auto;max-width:350px;padding:25px}.price-card h2{font-size:1.5rem;margin-bottom:15px}.price{font-size:2.5rem;font-weight:700;margin-bottom:10px}.price span{font-size:1rem;font-weight:400}.price-card p{color:#6c757d;font-size:.95rem;margin:0}.action-section{text-align:center}.subscribe-button{background:linear-gradient(135deg,#28a745,#20c997);border:none;border-radius:8px;box-shadow:0 4px 12px #28a7454d;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:600;letter-spacing:1px;padding:15px 40px;text-transform:uppercase;transition:all .3s ease}.subscribe-button:hover{background:linear-gradient(135deg,#218838,#1e7e34);box-shadow:0 6px 20px #28a74566;transform:translateY(-2px)}.subscribe-button:active{transform:translateY(0)}.modal-overlay{animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;z-index:10000}.modal-content{animation:slideUp .3s ease-out;max-width:520px}.modal-close{align-items:center;background:#0000;border:none;border-radius:50%;color:#6c757d;cursor:pointer;display:flex;justify-content:center;padding:8px;position:absolute;right:16px;top:16px;transition:all .2s;z-index:1}.modal-close:hover{background:#f8f9fa;color:#333}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px 16px 0 0;color:#fff;padding:32px 24px 24px;text-align:center}.secure-badge{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:20px;display:inline-flex;font-size:14px;font-weight:500;gap:8px;margin-bottom:16px;padding:8px 16px}.secure-badge svg{stroke:#fff}.modal-header h2{color:#fff!important;font-size:1.75rem;font-weight:600;margin:0 0 8px}.modal-subtitle{font-size:1rem;font-weight:400;margin:0;opacity:.95}.trust-indicators{background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;gap:20px;justify-content:center;padding:20px 24px}.trust-item{align-items:center;color:#495057;display:flex;font-size:13px;gap:6px}.trust-item svg{stroke:#28a745;flex-shrink:0}.payment-form-container{padding:32px 24px 24px}.form-label{color:#32325d;display:block;font-size:14px;font-weight:600;margin-bottom:8px}.card-element-wrapper{background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;margin-bottom:16px;padding:16px;transition:all .2s}.card-element-wrapper:hover{border-color:#b0b0b0}.card-element-wrapper:focus-within{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.payment-security-note{align-items:flex-start;background:#f0f7ff;border:1px solid #d4e7ff;border-radius:8px;display:flex;gap:8px;margin-bottom:24px;padding:12px}.payment-security-note svg{stroke:#667eea;flex-shrink:0;margin-top:2px}.payment-security-note span{color:#495057;font-size:13px;line-height:1.5}.modal-error{background:#fff5f5;border:1px solid #feb2b2;border-radius:8px;color:#c53030;font-size:14px;margin-bottom:16px;padding:12px 16px;text-align:center}.modal-subscribe-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:10px;justify-content:center;padding:16px 24px;transition:all .3s ease;width:100%}.modal-subscribe-button:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.modal-subscribe-button:active:not(:disabled){transform:translateY(0)}.modal-subscribe-button:disabled{cursor:not-allowed;opacity:.7}.modal-subscribe-button svg{stroke:#fff}.spinner{animation:spin 1s linear infinite}.powered-by-stripe{align-items:center;border-top:1px solid #e9ecef;display:flex;gap:8px;justify-content:center;margin:20px 0;padding-top:20px}.powered-by-stripe span{color:#6c757d;font-size:13px}.powered-by-stripe img{height:20px;object-fit:contain}.card-logos{align-items:center;display:flex;gap:12px;justify-content:center;padding-bottom:8px}.card-logos svg{opacity:.7;transition:opacity .2s}.card-logos svg:hover{opacity:1}@media (max-width:768px){#paramedic-subscription-container{min-height:100vh;padding:30px 20px}.subscription-content{max-width:100%}.header-section h1{font-size:1.8rem}.validation-row{flex-direction:column;gap:10px}.price-card{max-width:100%;padding:20px}.price{font-size:2rem}.subscribe-button{font-size:1.1rem;max-width:300px;padding:12px 30px;width:100%}.modal-overlay{align-items:flex-end;padding:0}.modal-content{border-radius:16px 16px 0 0;max-height:95vh}.modal-header{padding:24px 20px 20px}.modal-header h2{font-size:1.5rem}.trust-indicators{align-items:flex-start;flex-direction:column;gap:12px}.payment-form-container{padding:24px 20px 20px}}.dashboard-container{background:linear-gradient(to bottom right,#e6f2fb,#fff);color:#333;font-family:Inter,sans-serif;min-height:100vh;overflow-x:hidden}.dash-header{align-items:center!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #007bbf33;display:flex!important;flex-direction:row!important;justify-content:space-between!important;padding:60px 16px 12px!important;position:relative}.logo-mascot{aspect-ratio:auto;display:block;height:auto;line-height:0;margin:0;max-width:62%;object-fit:contain;padding:0;vertical-align:top;width:170px}.site-title{color:#007bbf;font-size:24px;font-weight:700;line-height:1.1;margin:0;padding:0;text-align:center}.rank-badge-container{position:static;z-index:10}.rank-badge{align-items:center;background:#10b9811a;border:1px solid #10b9814d;border-radius:16px;color:#065f46;display:flex;font-size:13px;font-weight:500;gap:6px;padding:6px 10px}.rank-badge img{height:20px;width:20px}.dash-main{grid-gap:20px;display:grid;gap:20px;grid-template-rows:auto auto auto;margin:10px auto;max-width:800px;padding:0 10px}.welcome-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:15px;box-shadow:0 4px 20px #007bbf1a;padding:20px;text-align:center}.welcome-panel h2{color:#007bbf;font-size:22px;margin-bottom:10px}.welcome-panel p{color:#2d3748;font-size:16px}.stats-panel{display:flex;gap:15px;justify-content:space-between}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:10px;box-shadow:0 4px 20px #007bbf1a;flex:1 1;padding:12px}.stat-card h3{color:#005a8f;font-size:16px;margin-bottom:10px}.stat-card p{color:#007bbf;font-size:20px;font-weight:600}.quick-panel{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr;justify-items:stretch;padding:0 10px}.quick-panel button{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;font-size:17px!important;font-weight:600;justify-content:center;min-height:65px;overflow:hidden;padding:18px;position:relative;text-align:center;transition:all .2s ease;width:100%}@media (min-width:769px){.quick-panel{gap:18px;padding:0 20px}.quick-panel button{font-size:20px!important;min-height:80px;padding:24px}}.btn-primary{background:linear-gradient(135deg,#06b6d4,#0891b2)!important;box-shadow:0 4px 20px #06b6d44d}@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:linear-gradient(135deg,#0891b2,#0e7490)!important;box-shadow:0 6px 25px #06b6d466;transform:translateY(-2px)}}.btn-secondary{background:linear-gradient(135deg,#06b6d4,#0ea5e9)!important;box-shadow:0 4px 20px #06b6d44d;color:#fff!important}@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:linear-gradient(135deg,#0ea5e9,#0284c7)!important;box-shadow:0 6px 25px #06b6d466;transform:translateY(-2px)}}.btn-video{background:linear-gradient(135deg,#0ea5e9,#0284c7)!important;box-shadow:0 4px 20px #0ea5e94d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-video:hover{background:linear-gradient(135deg,#0284c7,#0369a1)!important;box-shadow:0 6px 25px #0ea5e966;transform:translateY(-2px)}}.btn-aqua{background:linear-gradient(135deg,#06b6d4,#0891b2)!important;box-shadow:0 4px 20px #06b6d44d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-aqua:hover{background:linear-gradient(135deg,#0891b2,#0e7490)!important;box-shadow:0 6px 25px #06b6d466;transform:translateY(-2px)}}.btn-tertiary{background:linear-gradient(135deg,#06b6d4,#0ea5e9)!important;box-shadow:0 4px 20px #06b6d44d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-tertiary:hover{background:linear-gradient(135deg,#0ea5e9,#0284c7)!important;box-shadow:0 6px 25px #06b6d466;transform:translateY(-2px)}}.btn-violet{background:linear-gradient(135deg,#0ea5e9,#0284c7)!important;box-shadow:0 4px 20px #0ea5e94d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-violet:hover{background:linear-gradient(135deg,#0284c7,#0369a1)!important;box-shadow:0 6px 25px #0ea5e966;transform:translateY(-2px)}}.icon{height:28px;margin-right:8px;vertical-align:middle;width:28px}.btn-aqua,.btn-tertiary,.btn-video,.btn-violet{align-items:center;display:flex;gap:8px;justify-content:center}.icon-large{height:60px;width:60px}.courses-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:15px;box-shadow:0 4px 20px #007bbf1a;overflow:hidden;padding:20px}.courses-panel h3{color:#007bbf;font-size:18px;margin-bottom:16px;text-align:center}.carousel-container{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;overflow-x:auto;position:relative;scroll-behavior:smooth;scrollbar-width:none}.carousel-container::-webkit-scrollbar{display:none}.carousel-track{display:flex;gap:15px;transition:transform .4s ease-in-out;width:-webkit-max-content;width:max-content}.course-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;color:inherit;flex:0 0 260px;padding:15px;text-align:center;text-decoration:none;transition:transform .2s}.course-card:hover{box-shadow:0 6px 25px #007bbf33;transform:translateY(-3px)}.course-card img{border-radius:10px;height:auto;object-fit:cover;width:100%}.course-card h4{color:#007bbf;font-size:16px;margin-top:10px}.course-card p{color:#333;font-size:14px;margin:8px 0}.course-card .learn-more{color:#005a8f;font-size:13px;font-weight:600;margin-top:4px}.course-card .learn-more:hover{text-decoration:underline}.dash-footer{color:#000;font-size:14px;padding:15px 0;text-align:center}.user-rank-header{align-items:center;display:flex;gap:6px;margin-left:12px}.rank-icon{height:28px;width:28px}.rank-label{color:#007bbf;font-weight:600}.rank-help-icon{background:#007bbf;border-radius:50%;color:#fff;cursor:pointer;display:inline-block;font-size:13px;font-weight:700;height:18px;line-height:18px;margin-left:6px;position:relative;text-align:center;-webkit-user-select:none;user-select:none;width:18px}.rank-help-icon .tooltip-text{background-color:#333;border-radius:4px;bottom:125%;color:#fff;font-size:12px;left:50%;line-height:1.4;opacity:0;padding:8px;position:absolute;text-align:left;transform:translateX(-50%);transition:opacity .3s;visibility:hidden;white-space:normal;width:220px;z-index:1}.rank-help-icon:focus .tooltip-text,.rank-help-icon:hover .tooltip-text{opacity:1;visibility:visible}.guides-panel h3{color:#007bbf;font-size:18px;margin-bottom:16px;text-align:center}@media (display-mode:standalone){.dashboard-container{padding-top:40px}.dash-header{margin-top:-40px;padding-top:90px}}@media (max-width:768px){.dash-header{flex-direction:column;gap:15px;text-align:center}.logo-container{justify-content:center}.stats-panel{flex-wrap:wrap;gap:15px}.stat-card{flex-basis:calc(50% - 10px);flex-grow:1;flex-shrink:1}.quick-panel{gap:12px}.quick-panel button{font-size:16px!important;min-height:60px;padding:14px}}.rank-up-overlay{align-items:center;animation:fadeInOverlay .5s ease-out;background:#003264cc;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.rank-up-modal{animation:confettiSlideIn .8s ease-out;max-width:500px;width:90%}@keyframes confettiSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.graffiti-container{background:#fff;border:1px solid #007bbf33;border-radius:16px;box-shadow:0 8px 24px #0000001a;overflow:hidden;position:relative}.graffiti-content{color:#2d3748;padding:32px 24px;position:relative;text-align:center}.graffiti-title{color:#007bbf;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:600;line-height:1.4;margin-bottom:16px}.achievement-text{margin-bottom:20px}.new-rank{color:#64748b;font-size:1rem;font-weight:400;margin-bottom:8px}.rank-badge-display{align-items:center;display:flex;flex-direction:column;gap:12px}.celebration-badge{background:#fff;border:2px solid #007bbf;border-radius:50%;height:64px;padding:4px;width:64px}.rank-name{color:#007bbf;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:600;margin:0}.next-rank-info{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin:16px 0;padding:16px}.next-rank-info p{color:#64748b;font-size:.9rem;margin:4px 0}.days-remaining,.next-rank-name{color:#007bbf;font-weight:600}.days-remaining{font-size:.9rem!important}.max-rank-info{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin:16px 0;padding:16px}.max-rank-text{color:#007bbf;font-size:1rem;font-weight:600}.close-celebration-btn{background:#007bbf;border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;padding:12px 24px;transition:all .2s ease}.close-celebration-btn:hover{background:#0056b3}.close-celebration-btn:active{background:#004085}@media (max-width:480px){.graffiti-title{font-size:1.8rem}.rank-name{font-size:1.5rem}.congrats-streak{font-size:1.2rem}.graffiti-content{padding:25px 20px}.close-celebration-btn{font-size:1rem;padding:12px 24px}}body{color:#333;font-family:Inter,sans-serif;overflow-x:hidden}#root,.flashcards-container{background:linear-gradient(to bottom right,#e6f2fb,#fff);min-height:100vh}.flashcards-container{color:#333;font-family:Inter,sans-serif}.flagged-review-mode{background:linear-gradient(135deg,#1f1012,#dc2626)!important;min-height:100vh}@media (hover:hover) and (pointer:fine){.back-btn:hover{background:#007bbf;box-shadow:0 5px 15px #007bbf4d;color:#fff;transform:translateY(-50%) translateY(-2px)}}.logo-container h1{color:#007bbf;font-size:24px;font-weight:700}.categories{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #007bbf33;padding:20px}.category-wrapper{margin:0 auto;max-width:500px}#category-select{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #007bbf;border-radius:12px;box-shadow:0 2px 10px #007bbf1a;cursor:pointer;font-size:16px;padding:15px 45px 15px 20px;transition:all .3s;width:100%}@media (hover:hover) and (pointer:fine){#category-select:hover{border-color:#005a8f;box-shadow:0 4px 15px #007bbf33;transform:translateY(-1px)}}#category-select:focus{border-color:#005a8f;box-shadow:0 0 0 3px #007bbf33;outline:none}#category-select:disabled{cursor:not-allowed;opacity:.6}.select-icon{color:#007bbf;right:15px;transition:transform .3s}#category-select:focus+.select-icon{transform:translateY(-50%) rotate(180deg)}.status-bar{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:15px;box-shadow:0 4px 20px #0000001a;display:flex;justify-content:space-between;margin:30px auto 0;max-width:500px;padding:20px}.progress-container{display:flex;flex-direction:column;gap:8px}.progress-bar{background:#007bbf33;border-radius:3px;height:6px;overflow:hidden;width:120px}.progress-fill{background:linear-gradient(90deg,#007bbf,#005a8f);border-radius:3px;height:100%;transition:width .3s;width:0}.status-bar span{color:#007bbf;font-size:16px;font-weight:600}.score-container{align-items:center;display:flex;gap:10px}.flip-container{height:300px;margin:30px auto;max-width:500px;perspective:1000px;position:relative;width:100%;z-index:1}.flipper{height:100%;inset:0;position:absolute;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%;z-index:2}.flipper.no-animation{transition:none}.flipper.is-flipped{transform:rotateY(180deg)}.back,.front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(135deg,#fff,#f8fafc);border:2px solid #007bbf;border-radius:20px;box-shadow:0 10px 30px #007bbf33;cursor:pointer;display:flex;flex-direction:column;inset:0;justify-content:center;padding:30px;position:absolute;transition:none}.back:before,.front:before{background:linear-gradient(135deg,#007bbf0d,#0000 50%);border-radius:18px;content:"";inset:0;pointer-events:none;position:absolute}.back{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);transform:rotateY(180deg)}.card-content{align-items:center;display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:center;width:100%}.back-text,.card-text{font-size:18px;line-height:1.6;margin-bottom:20px}.card-text{color:#2d3748;font-weight:500}.back-text{color:#1a365d;font-weight:600}.category-label{background:#007bbf1a;color:#007bbf;font-style:italic;left:15px}.category-label,.flip-hint{border-radius:12px;bottom:15px;font-size:12px;font-weight:500;padding:5px 10px;position:absolute}.flip-hint{background:#64748b1a;color:#64748b;right:15px}.controls{align-items:center;flex-direction:column;gap:20px;margin:30px auto 20px;max-width:500px;width:100%}.answer-controls,.navigation-controls{align-items:center;display:flex;gap:15px;justify-content:center}.controls button{align-items:center;border:none;border-radius:12px;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;justify-content:center;overflow:hidden;padding:12px 20px;position:relative;text-align:center;transition:all .2s}.controls button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s;width:100%}@media (hover:hover) and (pointer:fine){.controls button:hover:before{left:100%}}.flip-btn,.nav-btn{align-items:center;background:#fffffff2;border:2px solid #007bbf;color:#007bbf;display:flex;font-size:18px;height:50px;justify-content:center;padding:0;width:50px}@media (hover:hover) and (pointer:fine){.flip-btn:hover,.nav-btn:hover{background:#007bbf;box-shadow:0 5px 15px #007bbf4d;color:#fff;transform:translateY(-2px)}}.flip-btn:active,.nav-btn:active{transform:translateY(0)}.flag-btn,.right-btn,.wrong-btn{height:48px;min-width:120px}.wrong-btn{background:linear-gradient(135deg,#ef4444,#dc2626);border:2px solid #ef4444;color:#fff}@media (hover:hover) and (pointer:fine){.wrong-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 5px 15px #ef44444d;transform:translateY(-2px)}}.wrong-btn.active{background:linear-gradient(135deg,#b91c1c,#991b1b);box-shadow:0 0 0 3px #ef44444d}.right-btn{background:linear-gradient(135deg,#10b981,#059669);border:2px solid #10b981;color:#fff}@media (hover:hover) and (pointer:fine){.right-btn:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 5px 15px #10b9814d;transform:translateY(-2px)}}.right-btn.active{background:linear-gradient(135deg,#047857,#065f46);box-shadow:0 0 0 3px #10b9814d}.flag-btn{background:#fffffff2;border:2px solid #007bbf;color:#007bbf}@media (hover:hover) and (pointer:fine){.flag-btn:hover{background:#007bbf;box-shadow:0 5px 15px #007bbf4d;color:#fff;transform:translateY(-2px)}}.flag-btn.flagged{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444;box-shadow:0 0 0 3px #ef44444d;color:#fff}@media (hover:hover) and (pointer:fine){.flag-btn.flagged:hover{background:linear-gradient(135deg,#dc2626,#b91c1c)}}@media (max-width:768px){.flip-container{height:250px;margin:20px auto}.back,.front{padding:20px}.back-text,.card-text{font-size:16px}.controls{gap:20px;margin:20px auto}.answer-controls,.navigation-controls{gap:15px}.controls button{font-size:16px;min-height:56px;padding:16px 24px}.flip-btn,.nav-btn{font-size:20px;height:56px;width:56px}.flag-btn,.right-btn,.wrong-btn{font-size:16px;height:56px;min-width:140px}.status-bar{margin:20px auto 0}.categories,.status-bar{padding:15px}}@media (max-width:480px){.answer-controls{flex-direction:column;gap:8px;width:100%}.answer-controls button{max-width:200px;width:100%}}.header-logo{align-items:center;display:flex;left:50%;position:absolute;transform:translateX(-50%)}.video-library-container{background:linear-gradient(to bottom right,#e6f2fb,#fff);color:#333;font-family:Inter,sans-serif;min-height:100vh}.app-header{background:#fffffff2}.logo-container{flex:1 1}.video-filters{background:#ffffff4d;border-bottom:1px solid #007bbf33;padding:20px}.filter-row{display:flex;flex-wrap:wrap;gap:16px;margin:0 auto;max-width:800px}.category-wrapper{flex:1 1;min-width:200px;position:relative}.category-select{-webkit-appearance:none;appearance:none;background:#fffc;border:1px solid #007bbf4d;border-radius:12px;color:#333;cursor:pointer;font-size:14px;font-weight:500;padding:12px 40px 12px 16px;transition:all .2s ease;width:100%}.category-select:focus{background:#fffffff2;border-color:#007bbf;outline:none}.category-select option{background:#fff;color:#333}.select-icon{color:#333;opacity:.7;pointer-events:none;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.search-input{background:#fffc;border:1px solid #007bbf4d;border-radius:12px;color:#333;min-width:250px;padding:12px 16px;transition:all .2s ease}.search-input::placeholder{color:#3339}.search-input:focus{background:#fffffff2}.video-content{margin:0 auto;max-width:1200px;padding:20px}.video-count{color:#333;font-size:16px;font-weight:500;margin-bottom:24px;text-align:center}.video-list{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:20px}.video-card{background:#fffc;border:1px solid #007bbf33;border-radius:16px;box-shadow:0 2px 8px #0000001a;cursor:pointer;overflow:hidden;transition:all .3s ease}@media (hover:hover) and (pointer:fine){.video-card:hover{background:#fffffff2;border-color:#007bbf;box-shadow:0 8px 32px #007bbf4d;transform:translateY(-4px)}}.video-thumbnail{overflow:hidden;padding-bottom:56.25%;position:relative}.video-thumb{height:100%;left:0;object-fit:cover;position:absolute;top:0;transition:transform .3s ease;width:100%}@media (hover:hover) and (pointer:fine){.video-card:hover .video-thumb{transform:scale(1.05)}}.play-overlay{align-items:center;background:#0000004d;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}@media (hover:hover) and (pointer:fine){.video-card:hover .play-overlay{opacity:1}}.play-button{align-items:center;background:#ffffffe6;border-radius:50%;color:#007bbf;display:flex;font-size:16px;height:48px;justify-content:center;padding-left:3px;transition:all .2s ease;width:48px}@media (hover:hover) and (pointer:fine){.play-button:hover{background:#fff;transform:scale(1.1)}}.video-info{padding:16px}.video-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;font-size:16px;font-weight:600;line-height:1.4;margin:0 0 8px;overflow:hidden}.video-meta{align-items:center;display:flex;gap:8px;justify-content:space-between}.video-category{background:#007bbf26;color:#007bbf}.video-category,.video-duration{border-radius:6px;display:inline-block;font-size:12px;font-weight:500;padding:4px 8px}.video-duration{background:#0000000d;color:#666}.loading-state{grid-column:1/-1;padding:60px 20px;text-align:center}.loading-text{color:#666;font-size:18px}.no-videos{grid-column:1/-1;padding:60px 20px;text-align:center}.no-videos h3{color:#333;font-size:20px;font-weight:600;margin:0 0 12px}.no-videos p{color:#666;font-size:16px;margin:0}.video-modal{align-items:center;background:#000000e6;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#1a2b42;border:1px solid #ffffff1a;border-radius:16px;max-height:90vh;max-width:900px;overflow:hidden;position:relative}.close-button{align-items:center;background:#000000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;position:absolute;right:16px;top:16px;transition:all .2s ease;width:40px;z-index:1001}@media (hover:hover) and (pointer:fine){.close-button:hover{background:#000000e6;transform:scale(1.1)}}.video-player{padding-bottom:56.25%;position:relative;width:100%}.video-player iframe{border:none;height:100%;left:0;position:absolute;top:0;width:100%}.video-details{padding:20px}.video-details h3{color:#e2f4ff;font-size:20px;font-weight:600;margin:0 0 12px}.video-meta{color:#e2f4ffb3;font-size:14px;font-weight:500}@media (max-width:768px){.video-list{gap:16px;grid-template-columns:1fr}.filter-row{flex-direction:column;gap:12px}.category-wrapper,.search-input{min-width:0;min-width:auto}.app-header,.video-content{padding:16px}.modal-content{margin:10px;max-height:95vh}.video-details{padding:16px}}.profile-container{background:#fff;display:flex;flex-direction:column;min-height:100vh}.profile-header{align-items:center;background:#fff;border-bottom:1px solid #007bbf1a;display:flex;height:60px;justify-content:space-between;margin-top:50px;padding:18px 12px;position:relative}.profile-header .back-btn{align-items:center;background:#fffffff2;border:1px solid #007bbf;border-radius:8px;color:#007bbf;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:36px;justify-content:center;padding:6px 12px;transition:all .2s ease}@media (hover:hover) and (pointer:fine){.profile-header .back-btn:hover{background:#007bbf;color:#fff}}.profile-header .header-title{color:#007bbf;font-size:18px;font-weight:700;left:50%;margin:0;position:absolute;text-align:center;transform:translateX(-50%);width:auto}.profile-content{flex:1 1;margin:0 auto;max-width:600px;padding:20px 16px;width:100%}.profile-loading{align-items:center;color:#666;display:flex;font-size:18px;justify-content:center;min-height:100vh}.profile-section{background:#fff;border:1px solid #007bbf33;border-radius:12px;margin-bottom:20px;padding:20px}.form-group{margin-bottom:16px}.form-group label{color:#333;font-size:14px}.profile-input{border:1px solid #007bbf4d;border-radius:8px;box-sizing:border-box;font-size:16px;outline:none;padding:12px;transition:border-color .2s;width:100%}.profile-input:focus{border-color:#007bbf}.email-note{color:#666;font-size:13px;line-height:1.4;margin:8px 0 16px}.save-btn{background:linear-gradient(135deg,#06b6d4,#0891b2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px;transition:opacity .2s;width:100%}.save-btn:disabled{cursor:not-allowed;opacity:.6}.save-btn:not(:disabled):active{opacity:.8}.badges-container{background:#fff;display:flex;flex-direction:column;min-height:100vh}.badges-header{align-items:center;background:#fff;border-bottom:1px solid #007bbf1a;display:flex;height:60px;justify-content:space-between;margin-top:50px;padding:18px 12px;position:relative}.badges-header .back-btn{align-items:center;background:#fffffff2;border:1px solid #007bbf;border-radius:8px;color:#007bbf;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:36px;justify-content:center;padding:6px 12px;transition:all .2s ease}@media (hover:hover) and (pointer:fine){.badges-header .back-btn:hover{background:#007bbf;color:#fff}}.badges-header .header-title{color:#007bbf;font-size:18px;font-weight:700;left:50%;margin:0;position:absolute;text-align:center;transform:translateX(-50%);width:auto}.badges-content{flex:1 1;margin:0 auto;max-width:800px;padding:20px 16px;width:100%}.badges-loading{align-items:center;color:#666;display:flex;font-size:18px;justify-content:center;min-height:100vh}.badges-subtitle{color:#666;font-size:14px;line-height:1.5;margin:0 0 24px;text-align:center}.badges-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-bottom:32px;margin-left:auto;margin-right:auto;max-width:500px}.badge-card{align-items:center;background:#fff;border:2px solid #007bbf4d;border-radius:10px;display:flex;flex-direction:column;padding:12px;position:relative;transition:transform .2s,box-shadow .2s}.badge-card:not(.unearned):hover{box-shadow:0 8px 24px #007bbf33;transform:translateY(-4px)}.badge-card.unearned{border-color:#0000001a}.badge-image-container{height:50px;margin-bottom:8px;position:relative;width:50px}.badge-image{height:100%;object-fit:contain;width:100%}.badge-overlay{background:#ffffffb3;border-radius:50%;bottom:0;left:0;position:absolute;right:0;top:0}.badge-info{text-align:center;width:100%}.badge-name{color:#007bbf;font-size:11px;font-weight:700;margin:0 0 4px;text-align:center}.badge-card.unearned .badge-name{color:#999}.badge-description{color:#666;font-size:9px;line-height:1.3;margin:0 0 6px;text-align:center}.badge-requirement{align-items:center;background:#007bbf1a;border-radius:6px;display:flex;gap:3px;justify-content:center;margin-bottom:4px;padding:4px 6px}.badge-card.unearned .badge-requirement{background:#0000000d}.requirement-icon{font-size:10px}.requirement-text{color:#007bbf;font-size:9px;font-weight:600}.badge-card.unearned .requirement-text{color:#999}.badge-earned{align-items:center;background:#d4edda;border-radius:4px;display:flex;gap:3px;justify-content:center;margin-top:4px;padding:3px 6px}.earned-icon{color:#28a745;font-size:10px;font-weight:700}.earned-text{color:#28a745;font-size:9px;font-weight:600}.badges-summary{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:32px}.summary-card{background:linear-gradient(135deg,#06b6d4,#0891b2);border-radius:12px;color:#fff;padding:20px;text-align:center}.summary-number{font-size:32px;font-weight:700;margin-bottom:4px}.summary-label{font-size:14px;font-weight:500;opacity:.9}.billing-container{background:#fff;display:flex;flex-direction:column;min-height:100vh}.billing-header{align-items:center;background:#fff;border-bottom:1px solid #007bbf1a;display:flex;height:60px;justify-content:space-between;margin-top:50px;padding:18px 12px;position:relative}.billing-header .back-btn{align-items:center;background:#fffffff2;border:1px solid #007bbf;border-radius:8px;color:#007bbf;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:36px;justify-content:center;padding:6px 12px;transition:all .2s ease}@media (hover:hover) and (pointer:fine){.billing-header .back-btn:hover{background:#007bbf;color:#fff}}.billing-header .header-title{color:#007bbf;font-size:18px;font-weight:700;left:50%;margin:0;position:absolute;text-align:center;transform:translateX(-50%);width:auto}.billing-content{flex:1 1;margin:0 auto;max-width:600px;padding:20px 16px;width:100%}.billing-loading{align-items:center;color:#666;display:flex;font-size:18px;justify-content:center;min-height:100vh}.message{border-radius:8px;font-size:14px;font-weight:500;margin-bottom:20px;padding:12px 16px}.message.success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.message.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.billing-section{background:#fff;border:1px solid #007bbf33;border-radius:12px;margin-bottom:20px;padding:20px}.section-title{font-size:18px;margin:0 0 16px}.status-card{display:flex;flex-direction:column;gap:12px}.status-row{align-items:center;border-bottom:1px solid #007bbf1a;display:flex;justify-content:space-between;padding:12px 0}.status-row:last-child{border-bottom:none}.status-label{color:#666}.status-label,.status-value{font-size:14px;font-weight:600}.status-value{color:#333}.status-badge{border-radius:12px;font-size:13px;font-weight:700;padding:4px 12px;text-transform:uppercase}.status-badge.active{background:#d4edda;color:#28a745}.status-badge.inactive{background:#f8d7da;color:#dc3545}.cancel-info{margin-bottom:20px}.cancel-description{color:#333;font-size:14px;line-height:1.6;margin:0 0 12px}.cancel-note{background:#ffc1071a;border-left:3px solid #ffc107;border-radius:4px;color:#666;font-size:13px;line-height:1.5;margin:0;padding:12px}.cancel-note strong{color:#333}.cancel-btn{background:#dc3545;border:none;border-radius:8px;color:#fff;font-size:16px;padding:12px;transition:opacity .2s;width:100%}.cancel-btn:disabled{cursor:not-allowed;opacity:.6}.cancel-btn:not(:disabled):active{opacity:.8}.no-subscription{padding:20px;text-align:center}.no-subscription p{color:#666;font-size:14px;line-height:1.6;margin:0 0 12px}.no-subscription p:last-child{margin:0}@media (hover:hover) and (pointer:fine){.reset-btn:hover{background:#007bbf;color:#fff}}.scenario-builder-container{background:linear-gradient(to bottom right,#e6f2fb,#fff);color:#333;font-family:Inter,sans-serif;min-height:100vh}.app-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2!important;border-bottom:1px solid #007bbf33;padding:20px 20px 10px;position:relative}.back-btn{border:2px solid #007bbf;border-radius:12px;font-size:14px;left:15px;padding:8px 16px;position:absolute;top:50%;transform:translateY(-50%)}@media (hover:hover) and (pointer:fine){.back-btn:hover{background:#007bbf;color:#fff;transform:translateY(-50%) translateY(-1px)}}.logo-container{align-items:center;display:flex;gap:.75rem;justify-content:center;margin-top:10px}.logo-mascot{height:120px;pointer-events:none;-webkit-user-select:none;user-select:none;width:auto}.scenario-selector{background:linear-gradient(to bottom right,#e6f2fb,#fff);color:#333;font-family:Inter,sans-serif;min-height:100vh;padding:20px}.title-container{display:flex;justify-content:center;margin:20px 0 30px}.title-container h2{color:#007bbf;font-size:28px;font-weight:700;margin:0}.random-section{background:linear-gradient(135deg,#ffffffe6,#f0f8ffcc);border:2px solid #007bbf33;border-radius:16px;box-shadow:0 4px 16px #007bbf1a;margin:0 20px 32px;padding:24px;text-align:center}.random-instructions{color:#666;font-size:16px;font-weight:500;margin:0 0 16px}.random-scenario-btn{align-items:center;background:linear-gradient(135deg,#20c997,#28a745);border:none;border-radius:12px;box-shadow:0 4px 12px #20c9974d;color:#fff;cursor:pointer;display:inline-flex;font-size:18px;font-weight:600;gap:8px;padding:16px 32px;transition:all .3s ease}@media (hover:hover) and (pointer:fine){.random-scenario-btn:hover{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 6px 20px #20c99766;transform:translateY(-2px)}}.scenario-group{background:linear-gradient(135deg,#fffffff2,#f8fafce6);border:2px solid #007bbf26;border-radius:20px;box-shadow:0 8px 32px #007bbf1a;margin-bottom:32px;overflow:hidden;padding:28px;position:relative}.scenario-group:before{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(90deg,#007bbf,#20c997,#007bbf);background-size:200% 100%;content:"";height:4px;left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%,to{background-position:-200% 0}50%{background-position:200% 0}}.group-title{color:#007bbf;font-size:26px;font-weight:700;margin:0 0 20px;position:relative;text-align:center;text-shadow:0 2px 4px #007bbf1a}.group-title:after{background:linear-gradient(90deg,#007bbf,#20c997);border-radius:2px;bottom:-8px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.scenario-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.scenario-button{background:linear-gradient(135deg,#fffffff2,#f0f8ffe6);border:2px solid #007bbf4d;border-radius:16px;box-shadow:0 4px 15px #007bbf1a;color:#007bbf;cursor:pointer;font-size:16px;font-weight:600;overflow:hidden;padding:20px 24px;position:relative;text-align:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.scenario-button-content{align-items:center;display:flex;flex-direction:column;gap:4px}.scenario-name{font-size:16px}.completion-percentage{color:#666;font-size:12px;font-weight:500;opacity:.8}.scenario-button.completed{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #28a745;color:#155724}.scenario-button.completed .checkmark{color:#28a745;font-weight:700}.scenario-button.completed .completion-percentage{color:#155724;font-weight:600}.scenario-button:before{background:linear-gradient(90deg,#0000,#007bbf1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}@media (hover:hover) and (pointer:fine){.scenario-button:hover:before{left:100%}.scenario-button:hover{background:linear-gradient(135deg,#007bbf,#0056b3);border-color:#007bbf;box-shadow:0 12px 32px #007bbf4d;color:#fff;transform:translateY(-4px) scale(1.02)}}.scenario-container{margin:20px auto;max-width:800px;padding:0 20px}.scenario-card{background:#fffffff2;border:2px solid #007bbf4d;border-radius:20px;box-shadow:0 8px 32px #007bbf33;margin-bottom:20px;padding:32px;position:relative}.step-pill{background:linear-gradient(135deg,#007bbf,#0056b3);border:2px solid #fff;border-radius:20px;box-shadow:0 4px 12px #007bbf4d;color:#fff;font-size:14px;font-weight:700;left:20px;padding:8px 16px;position:absolute;top:-10px}.scenario-description{color:#444;font-size:18px;font-weight:500;line-height:1.6;margin-bottom:16px}.scenario-step{color:#666;font-size:16px;font-style:italic;margin-bottom:20px}.scenario-question{color:#007bbf;font-size:24px;font-weight:700;margin:20px 0;text-align:center}.scenario-choices{grid-gap:12px;display:grid;gap:12px;margin-top:24px}.choice-btn{background:#ffffffe6;border:2px solid #007bbf;border-radius:12px;color:#007bbf;cursor:pointer;font-size:16px;font-weight:500;line-height:1.5;padding:16px 20px;text-align:left;transition:all .3s ease}@media (hover:hover) and (pointer:fine){.choice-btn:hover:not(:disabled){background:#f0f8ff;transform:translateX(4px)}}.choice-btn:disabled{cursor:not-allowed}.correct-choice{background:#d4edda!important;border-color:#28a745!important;color:#155724!important}.incorrect-choice{background:#f8d7da!important;border-color:#dc3545!important;color:#721c24!important}.disabled-choice{background:#f8f9fa!important;border-color:#dee2e6!important;color:#6c757d!important}.feedback-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.feedback-modal{animation:slideIn .3s ease-out;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:500px;overflow:hidden;width:100%}@keyframes slideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.feedback-header{border-bottom:1px solid #f0f0f0;padding:24px 24px 16px;text-align:center}.feedback-header.correct{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724}.feedback-header.incorrect{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24}.feedback-icon{display:block;font-size:48px;margin-bottom:8px}.feedback-header h3{font-size:24px;font-weight:700;margin:0}.feedback-content{padding:24px}.feedback-text{color:#444;font-size:16px;line-height:1.6;margin-bottom:24px;text-align:left}.btn-next-step{background:linear-gradient(135deg,#007bbf,#0056b3);border:none;border-radius:12px;box-shadow:0 4px 12px #007bbf4d;color:#fff;cursor:pointer;display:block;font-size:18px;font-weight:600;margin:0 auto;padding:16px 32px;transition:all .3s ease;width:100%}@media (hover:hover) and (pointer:fine){.btn-next-step:hover{box-shadow:0 6px 20px #007bbf66;transform:translateY(-2px)}}.correct-answer-section{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #ffc107;border-radius:12px;margin:16px 0;padding:16px}.correct-answer-label{color:#856404;font-size:14px;font-weight:600;margin:0 0 8px}.correct-answer-text{background:#ffffffb3;border-radius:8px;color:#856404;font-size:16px;font-weight:600;margin:0;padding:8px 12px}.path-mapping{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #007bbf33;border-radius:16px;margin:24px 0;padding:24px}.path-title{color:#007bbf;font-size:20px;font-weight:700;margin:0 0 20px;text-align:center}.path-flow{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.path-step{align-items:center;background:#fffc;border:1px solid #007bbf1a;border-radius:12px;display:flex;gap:16px;padding:16px;transition:all .3s ease}@media (hover:hover) and (pointer:fine){.path-step:hover{box-shadow:0 4px 12px #007bbf26;transform:translateX(4px)}}.step-indicator{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:16px;font-weight:700;height:40px;justify-content:center;width:40px}.step-indicator.correct{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.step-indicator.incorrect{background:linear-gradient(135deg,#dc3545,#fd7e14);color:#fff}.step-content{flex:1 1}.step-name{color:#007bbf;font-size:14px;font-weight:600;margin-bottom:4px}.step-choice{color:#333;font-size:16px;margin-bottom:4px}.step-result{border-radius:6px;display:inline-block;font-size:12px;font-weight:600;padding:2px 8px}.step-result.correct{background:#28a7451a;color:#28a745}.step-result.incorrect{background:#dc35451a;color:#dc3545}.path-arrow{color:#007bbf;flex-shrink:0;font-size:24px;font-weight:700}.score-summary{background:linear-gradient(135deg,#007bbf1a,#20c9971a);border:2px solid #007bbf33;border-radius:12px;padding:16px;text-align:center}.score-text{color:#007bbf;font-size:18px;font-weight:700}.return-button{background:#ffffffe6;border:2px solid #007bbf;border-radius:12px;color:#007bbf;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .3s ease}@media (hover:hover) and (pointer:fine){.return-button:hover{background:#007bbf;box-shadow:0 4px 12px #007bbf4d;color:#fff;transform:translateY(-1px)}}@media (max-width:768px){.scenario-group,.scenario-selector{padding:16px}.scenario-grid{grid-template-columns:1fr}.scenario-card{padding:20px}.title-container{flex-direction:column;gap:12px}.title-container h2{font-size:24px}.scenario-question{font-size:20px}.choice-btn{font-size:14px;padding:12px 16px}}*{box-sizing:border-box}*,body,html{margin:0;padding:0}body,html{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;height:100%}.drag-drop-container,body,html{overscroll-behavior:none;-webkit-overscroll-behavior:none}.drag-drop-container{background:#fff;color:#333;display:flex;flex-direction:column;font-family:Inter,sans-serif;min-height:100vh}.back-btn{margin:0}@media (hover:hover) and (pointer:fine){.back-btn:hover{background:#007bbf;color:#fff}}.reset-btn{align-items:center;background:#fffffff2;border:1px solid #007bbf;border-radius:8px;color:#007bbf;cursor:pointer;display:flex;flex-shrink:0;font-size:16px;font-weight:600;height:36px;justify-content:center;padding:6px 12px;transition:all .2s ease;width:36px}@media (hover:hover) and (pointer:fine){.reset-btn:hover{background:#007bbf1a;border-color:#007bbf99;transform:translateY(-1px)}}.header-right-buttons{align-items:center;display:flex;gap:8px}.drag-drop-content{display:flex;flex:1 1;flex-direction:column;margin:0 auto;max-width:1200px;padding:8px;width:100%}.title-section{margin-bottom:16px;text-align:center}.title-section h1{color:#007bbf;font-size:1.8rem;font-weight:700;margin-bottom:8px}.title-section p{color:#2d3748;display:none;font-size:14px;line-height:1.4;margin:0 auto;max-width:600px}.scenario-section{background:#fffffff2;border-radius:8px;box-shadow:0 1px 6px #007bbf1a;margin-bottom:10px;padding:10px}.scenario-section h2{color:#007bbf;font-size:14px;font-weight:600;margin-bottom:8px}.scenario-text{color:#2d3748;font-size:13px;line-height:1.4}.quiz-container{display:flex;flex-direction:column;gap:10px}.therapies-section{background:#fffffff2;border-radius:8px;box-shadow:0 1px 6px #007bbf1a;height:220px;overflow:hidden;padding:10px}.therapies-section h3{color:#007bbf;font-size:14px;font-weight:600;margin-bottom:8px}.selection-indicator{animation:pulse 2s ease-in-out infinite;background:#10b9811a;border:2px solid #10b981;border-radius:8px;color:#065f46;font-size:14px;font-weight:600;margin-bottom:12px;padding:12px;text-align:center}.therapy-list{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr;min-height:80px}.therapy-item{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-items:center;background:#f8fafccc;border:1px solid #007bbf33;border-radius:8px;cursor:grab;display:flex;font-size:14px;height:44px;padding:12px 16px;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}.therapy-item:active{background:#007bbf26;transform:scale(.98)}.therapy-item.dragging{background:#007bbf33!important;border-color:#007bbf!important;box-shadow:0 8px 20px #007bbf66!important;opacity:.8!important;transform:rotate(2deg) scale(1.05)!important;z-index:1000!important}.therapy-item{transition:all .15s ease}.therapy-name{color:#2d3748;font-size:14px;font-weight:600;white-space:nowrap}.empty-therapies{color:#64748b;font-style:italic;padding:40px 20px;text-align:center}.check-answers-container{align-items:center;display:flex;grid-column:1/-1;justify-content:center;min-height:80px;padding:40px 20px}.check-answers-btn{background:#007bbf;border:none;border-radius:12px;box-shadow:0 2px 8px #007bbf4d;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .2s ease}@media (hover:hover) and (pointer:fine){.check-answers-btn:hover{background:#0056b3;box-shadow:0 4px 12px #007bbf66;transform:translateY(-1px)}}.drop-zones{display:flex;flex-direction:column;gap:8px}.drop-zone-container{background:#fffffff2;border-radius:8px;box-shadow:0 1px 6px #007bbf1a;padding:10px}.drop-zone-title{font-size:13px;font-weight:600;margin-bottom:8px}.drop-zone-title.indicated{color:#10b981}.drop-zone-title.not-indicated{color:#ef4444}.drop-zone{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:#f8fafc80;border:1px dashed #cbd5e1;border-radius:6px;cursor:pointer;min-height:60px;padding:8px;touch-action:none;transition:all .15s ease;will-change:background-color,border-color,transform}.drop-zone.drop-ready{background:#94a3b81a;border-color:#94a3b8;border-width:3px}.drop-zone.drag-active{background:#94a3b81a;border-color:#94a3b8}.drop-zone.drag-over-indicated{background:#10b98133!important;border:2px solid #10b981!important;transform:scale(1.02)!important;transition:all .2s ease!important}.drop-zone.drag-over-not-indicated{background:#ef444433!important;border:2px solid #ef4444!important;transform:scale(1.02)!important;transition:all .2s ease!important}.drop-zone-empty{align-items:center;color:#64748b;display:flex;font-size:14px;font-style:italic;height:100%;justify-content:center;min-height:60px;text-align:center}.dropped-items{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr;min-height:44px}.dropped-item{background:#fff;border:2px solid;border-radius:12px;cursor:pointer;padding:12px;position:relative;transition:all .2s ease}.dropped-item.indicated{border-color:#10b9814d}.dropped-item.not-indicated{border-color:#ef44444d}.dropped-item.correct{background:#10b9811a;border-color:#10b981}.dropped-item.incorrect{background:#ef44441a;border-color:#ef4444}@media (hover:hover) and (pointer:fine){.dropped-item:hover:not(.correct):not(.incorrect){box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.dropped-item.indicated:hover:not(.correct):not(.incorrect){border-color:#10b981}.dropped-item.not-indicated:hover:not(.correct):not(.incorrect){border-color:#ef4444}}.dropped-item-name{color:#2d3748;font-size:13px;font-weight:500;padding-right:24px}.remove-item-btn{align-items:center;border-radius:50%;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:18px;justify-content:center;line-height:1;margin:0;padding:0;position:absolute;right:-8px;top:-8px;transition:all .2s ease;width:18px;z-index:10}.dropped-item.indicated .remove-item-btn{background:#10b981e6;border:1px solid #10b981;color:#fff}.dropped-item.not-indicated .remove-item-btn{background:#ef4444e6;border:1px solid #ef4444;color:#fff}@media (hover:hover) and (pointer:fine){.dropped-item.indicated .remove-item-btn:hover{background:#10b981;transform:scale(1.1)}.dropped-item.not-indicated .remove-item-btn:hover{background:#ef4444;transform:scale(1.1)}}.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}.control-btn{border:none;border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;min-width:120px;padding:12px 24px;transition:all .2s ease}.control-btn:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.btn-primary{background:linear-gradient(135deg,#007bbf,#005a8f);box-shadow:0 4px 20px #007bbf4d}@media (hover:hover) and (pointer:fine){.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#005a8f,#004570);box-shadow:0 6px 25px #007bbf66;transform:translateY(-2px)}}.btn-secondary{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 4px 20px #6b72804d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:linear-gradient(135deg,#4b5563,#374151);box-shadow:0 6px 25px #6b728066;transform:translateY(-2px)}}.btn-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 20px #10b9814d;color:#fff}@media (hover:hover) and (pointer:fine){.btn-success:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 25px #10b98166;transform:translateY(-2px)}}.results-overlay{animation:resultsSlideIn .4s cubic-bezier(.16,1,.3,1);left:50%;pointer-events:none;position:fixed;top:100px;transform:translateX(-50%);z-index:10000}@keyframes resultsSlideIn{0%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.results-modal{animation:modalSlideIn .4s cubic-bezier(.16,1,.3,1) .1s both;background:#fff;border:2px solid #007bbf33;border-radius:16px;box-shadow:0 0 0 8px #0000001a,0 0 0 12px #0000000d,0 8px 32px #00000026,0 4px 16px #007bbf33;max-width:400px;min-width:320px;pointer-events:auto;width:auto}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.results-content{padding:20px 24px;text-align:center}.results-content.success{background:linear-gradient(135deg,#10b9811a,#10b9810d)}.results-content.failure{background:linear-gradient(135deg,#ef44441a,#ef44440d)}.results-header{margin-bottom:24px}.results-header h3{color:#2d3748;font-size:18px;font-weight:700;margin:0 0 12px}.score-display{color:#2d3748;font-size:24px;font-weight:800;margin:12px 0;text-shadow:0 2px 4px #0000001a}.score-message{font-size:14px;font-weight:500;line-height:1.4;margin:12px 0}.score-message.success{color:#065f46}.score-message.failure{color:#991b1b}.results-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px;width:100%}.results-actions .control-btn{font-size:14px;min-width:100px;padding:10px 16px}.loading-container{background:linear-gradient(to bottom right,#e6f2fb,#fff);min-height:100vh}.loading-content{text-align:center}.loading-spinner{margin:0 auto 16px}.loading-text{color:#64748b;font-size:16px}@media (min-width:769px){.therapy-list{gap:12px}}@media (max-width:768px){.quiz-container{gap:20px;grid-template-columns:1fr}.title-section h1{font-size:2rem}.title-section p{font-size:14px}.drag-drop-content{padding:16px}.drop-zone-container,.scenario-section,.therapies-section{padding:20px}.controls{gap:12px}.control-btn{font-size:16px;min-width:100px;padding:14px 20px}.app-header{padding:16px}.logo-mascot{height:100px}}@media (max-width:480px){.controls{align-items:center;flex-direction:column}.control-btn{max-width:200px;width:100%}.therapy-item{border-width:1px;box-sizing:border-box;font-size:12px;height:32px;min-height:32px;padding:8px 6px;width:100%}.therapy-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.therapy-list{grid-gap:6px;display:grid;gap:6px;grid-template-columns:repeat(2,1fr);justify-items:stretch;width:100%}.drop-zone{border-width:3px;min-height:140px;padding:20px}.drop-zone-empty{font-size:16px;padding:20px}.results-modal{margin:20px;width:95%}.results-content{padding:24px 20px}.score-display{font-size:28px}.score-message{font-size:16px}.results-actions{align-items:center;flex-direction:column;gap:12px}.results-actions .control-btn{max-width:300px;min-width:auto;width:100%}}.scenario-section-collapsed{align-items:center;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;text-align:center}.scenario-info-badges{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.scenario-count-badge{border:1.5px solid #007bbf4d;border-radius:20px;font-weight:600;letter-spacing:-.2px;padding:8px 16px;white-space:nowrap}.scenario-count-badge,.scenario-tap-button{background:#007bbf1a;color:#007bbf;font-size:14px}.scenario-tap-button{border:1px solid #007bbf4d;border-radius:8px;cursor:pointer;font-weight:500;max-width:300px;padding:12px 20px;transition:all .2s ease;width:100%}@media (hover:hover) and (pointer:fine){.scenario-tap-button:hover{background:#007bbf33;border-color:#007bbf}}.scenario-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#007bbf26;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.scenario-modal{background:#fff;border:2px solid #007bbf33;border-radius:20px;box-shadow:0 20px 60px #007bbf66;max-height:90vh;max-width:500px;overflow:auto;width:90%}.scenario-content{padding:32px;text-align:center}.scenario-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:24px}.scenario-header h3{color:#007bbf;font-size:24px;font-weight:700;margin:0}.completion-badge{border-radius:20px;font-size:13px;font-weight:600;letter-spacing:-.2px;padding:6px 14px;white-space:nowrap}.completion-badge.completed{background:#10b98126;border:1.5px solid #10b9814d;color:#059669}.completion-badge.not-completed{background:#ef44441a;border:1.5px solid #ef444433;color:#dc2626}.completion-badge-inline{border-radius:20px;display:inline-block;font-size:14px;font-weight:600;letter-spacing:-.2px;padding:8px 16px;white-space:nowrap}.completion-badge-inline.completed{background:#10b98126;border:1.5px solid #10b9814d;color:#059669}.completion-badge-inline.not-completed{background:#ef44441a;border:1.5px solid #ef444433;color:#dc2626}.scenario-text-display{background:#007bbf0d;border:1px solid #007bbf1a;border-radius:12px;color:#2d3748;font-size:16px;line-height:1.6;margin-bottom:24px;padding:20px;text-align:left}.scenario-actions{display:flex;gap:16px;justify-content:center;margin-top:24px}.scenario-btn{border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;min-width:160px;padding:14px 28px;transition:all .2s ease}@media (max-width:480px){.scenario-modal{margin:20px;width:95%}.scenario-content{padding:24px 20px}.scenario-text-display{font-size:15px;padding:16px}.scenario-btn{width:100%}}.result-revealed{animation:revealResult .6s ease-out forwards}@keyframes revealResult{0%{transform:scale(1) rotateY(0deg)}50%{transform:scale(1.05) rotateY(90deg)}to{transform:scale(1) rotateY(0deg)}}.result-indicator{align-items:center;animation:resultPopIn .3s ease-out .3s both;border-radius:50%;display:flex;height:24px;justify-content:center;position:absolute;right:-8px;top:-8px;width:24px;z-index:20}@keyframes resultPopIn{0%{opacity:0;transform:scale(0) rotate(180deg)}50%{transform:scale(1.2) rotate(90deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}.result-icon{font-size:16px;font-weight:700;line-height:1}.correct-icon,.incorrect-icon{color:#fff}.result-indicator .correct-icon{background:#10b981;border:2px solid #059669;border-radius:50%;box-shadow:0 2px 8px #10b98166}.result-indicator .correct-icon,.result-indicator .incorrect-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.result-indicator .incorrect-icon{background:#ef4444;border:2px solid #dc2626;border-radius:50%;box-shadow:0 2px 8px #ef444466}.dropped-item.result-revealed.correct{background:#10b98126;border-color:#10b981;box-shadow:0 0 12px #10b9814d}.dropped-item.result-revealed.incorrect{background:#ef444426;border-color:#ef4444;box-shadow:0 0 12px #ef44444d}@media (pointer:coarse) and (min-width:481px){.therapy-item{align-items:center;display:flex;justify-content:center;min-height:60px;text-align:center}.drop-zone{min-height:160px}}.info-popup{animation:infoFadeIn .2s ease-out}@keyframes infoFadeIn{0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.sorting-questions-container,body,html{background:linear-gradient(to bottom right,#e6f2fb,#fff)!important}.sorting-questions-container{min-height:100vh;width:100%}.simple-header{background:#fff;border-bottom:1px solid #007bbf1a;height:60px;justify-content:space-between;margin-top:50px;padding:18px 12px;position:relative}.back-btn,.simple-header{align-items:center;display:flex}.back-btn{background:#fffffff2;border:1px solid #007bbf;border-radius:8px;bottom:auto!important;color:#007bbf;cursor:pointer;flex-shrink:0;font-size:12px;font-weight:600;height:36px;justify-content:center;left:auto!important;padding:6px 12px;position:static!important;right:auto!important;top:auto!important;transform:none!important;transition:all .2s ease}.back-btn:hover{background:#007bbf;color:#fff}.header-title{color:#007bbf;font-size:18px;font-weight:700;left:50%;margin:0;position:absolute;text-align:center;transform:translateX(-50%);width:auto}.repeat-notification{align-items:center;animation:slideDown .4s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffcc00f2;border-radius:14px;box-shadow:0 8px 24px #0000001f,0 0 0 .5px #0000000f;color:#1d1d1f;display:flex;font-size:15px;font-weight:600;gap:8px;justify-content:center;letter-spacing:-.2px;margin:16px auto;max-width:400px;padding:16px 24px;position:relative;text-align:center;z-index:1000}.repeat-notification:before{content:"↻";font-size:18px;font-weight:700}.sorting-container{background:#0000!important;margin:0 auto;max-width:1200px;padding:20px}.question-header{flex-wrap:wrap;gap:10px;margin-bottom:20px;text-align:center;width:100%}.question-counter-with-info,.question-header{align-items:center;display:flex;justify-content:center;position:relative}.question-counter{background:linear-gradient(135deg,#3b82f6,#1e40af);border-radius:20px;box-shadow:0 2px 4px #0000001a;color:#fff;font-size:14px;font-weight:600;padding:8px 16px}.info-icon-container{margin-left:12px;position:relative}.question-header h2{color:#1e40af;font-size:28px;font-weight:700;margin:0}.info-icon{align-items:center;background:#3b82f61a;border:1px solid #3b82f64d;border-radius:50%;color:#3b82f6;cursor:pointer;display:flex;font-size:16px;font-weight:600;height:32px;justify-content:center;transition:all .2s ease;width:32px}.info-icon:hover{background:#3b82f633;transform:scale(1.05)}.info-popup{animation:fadeIn .2s ease-out;background:#fff;border:1px solid #3b82f633;border-radius:16px;box-shadow:0 8px 32px #0003;left:50%;max-width:400px;min-width:320px;position:fixed;top:180px;transform:translateX(-50%);width:90%;z-index:10000}.info-popup-content{padding:16px;position:relative}.info-popup-content p{color:#374151;font-size:14px;line-height:1.5;margin:0;padding-right:24px}.info-close{align-items:center;background:none;border:none;border-radius:4px;color:#9ca3af;cursor:pointer;display:flex;font-size:16px;height:24px;justify-content:center;position:absolute;right:8px;top:8px;transition:all .2s ease;width:24px}.info-close:hover{background:#0000000d;color:#374151}.info-panel{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;border-radius:12px;margin-bottom:24px;padding:20px}.info-panel p{color:#1e40af;font-size:16px;font-weight:500;line-height:1.6;margin:0}.question-panel{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:24px}.question-panel h3{color:#1f2937;font-size:20px;font-weight:600;line-height:1.4;margin-bottom:24px}.sorting-table-container{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:24px;overflow-x:auto}.sorting-table{border-collapse:collapse;font-size:16px;width:100%}.sorting-table th{background:linear-gradient(135deg,#3b82f6,#1e40af);border:none;color:#fff;font-size:16px;font-weight:600;padding:16px 12px;text-align:center}.sorting-table th:first-child{padding-left:20px;text-align:left}.sorting-table td{border-bottom:1px solid #e5e7eb;padding:16px 12px;transition:background-color .2s ease}.sorting-table tr:hover{background-color:#f8fafc}.sorting-table tr:last-child td{border-bottom:none}.item-name{color:#374151;font-weight:600;padding-left:20px!important;text-align:left!important}.category-cell{text-align:center}.category-radio{accent-color:#3b82f6;cursor:pointer;height:20px;width:20px}.category-radio:disabled{cursor:not-allowed;opacity:.5}.correct-answer{background-color:#dcfce7!important;border-left:4px solid #16a34a}.incorrect-answer{background-color:#fee2e2!important;border-left:4px solid #dc2626}.correct-answer:hover{background-color:#dcfce7!important}.incorrect-answer:hover{background-color:#fee2e2!important}.results-panel{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #0ea5e9;border-radius:12px;margin-bottom:24px;padding:20px}.results-panel h4{color:#0c4a6e;font-size:18px;font-weight:600;margin:0 0 8px}.results-panel p{color:#0c4a6e;font-size:16px;font-weight:500;margin:0}.action-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.btn-primary{background:linear-gradient(135deg,#3b82f6,#1e40af);border:none;border-radius:12px;box-shadow:0 2px 4px #0000001a;cursor:pointer;font-size:16px;font-weight:600;min-width:140px;padding:12px 24px;transition:all .2s ease}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 8px #00000026;transform:translateY(-1px)}.btn-primary:disabled{background:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}.btn-secondary{border:2px solid #d1d5db;border-radius:12px;color:#374151;cursor:pointer;font-size:16px;font-weight:600;min-width:140px;padding:12px 24px;transition:all .2s ease}.btn-secondary:hover:not(:disabled){background-color:#f9fafb;border-color:#9ca3af;transform:translateY(-1px)}.btn-secondary:disabled{background:#f3f4f6;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;transform:none}.loading-container{background:linear-gradient(to bottom right,#e6f2fb,#fff)!important;color:#64748b;min-height:60vh}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #3b82f633;border-top-color:#3b82f6;height:48px;margin-bottom:16px;width:48px}.error-container{background:linear-gradient(to bottom right,#e6f2fb,#fff)!important;margin:0 auto;max-width:500px;padding:40px 20px;text-align:center}.error-container h2{color:#dc2626;font-size:24px;margin-bottom:16px}.error-container p{color:#64748b;font-size:16px;line-height:1.6;margin-bottom:24px}@media (max-width:768px){.sorting-container{padding:16px}.question-header{align-items:stretch;flex-direction:column;text-align:center}.question-header h2{font-size:24px}.question-counter{align-self:center}.question-panel{padding:20px 16px}.question-panel h3{font-size:18px}.sorting-table td,.sorting-table th{font-size:14px;padding:12px 8px}.item-name{padding-left:12px!important}.sorting-table th:first-child{padding-left:12px}.action-buttons{align-items:stretch;flex-direction:column}.btn-primary,.btn-secondary{min-width:auto;width:100%}}@media (max-width:480px){.sorting-table-container{font-size:12px}.sorting-table td,.sorting-table th{padding:8px 4px}.item-name{padding-left:8px!important}.sorting-table th:first-child{padding-left:8px}.category-radio{height:16px;width:16px}}@media (display-mode:standalone){.sorting-container{padding-top:40px}}@media (prefers-color-scheme:dark){.question-panel{background:#1f2937;border-color:#374151}.question-panel h3{color:#f9fafb}.item-name{color:#e5e7eb}.sorting-table td{border-color:#374151}.sorting-table tr:hover{background-color:#374151}}.info-btn{align-items:center;background:#fffffff2;border:1px solid #3b82f6;border-radius:8px;color:#3b82f6;cursor:pointer;display:flex;font-size:16px;font-weight:600;height:36px;justify-content:center;min-width:36px;padding:6px 12px;transition:all .2s ease}.info-btn:hover{background:#3b82f61a;transform:scale(1.05)}.user-management-container{background:#fff;min-height:100vh;padding-bottom:80px}.simple-header .add-user-btn{align-items:center;background:#fffffff2;border:1px solid #007bbf;border-radius:8px;color:#007bbf;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:36px;justify-content:center;padding:6px 12px;transition:all .2s ease}@media (hover:hover) and (pointer:fine){.simple-header .add-user-btn:hover{background:#007bbf;color:#fff}}.message-banner{animation:slideDown .3s ease;justify-content:space-between;margin:12px}.message-banner.success{background:#4caf501a;border:1px solid #4caf504d;color:#2e7d32}.message-banner.error{background:#f443361a;border:1px solid #f443364d;color:#c62828}.close-message{background:none;border:none;color:inherit;cursor:pointer;font-size:18px;margin-left:12px;opacity:.7;padding:0;transition:opacity .2s}.close-message:hover{opacity:1}.filters-section{background:#f8f9fa;border-bottom:1px solid #007bbf1a;display:flex;gap:12px;padding:12px}.search-input{border:1px solid #007bbf33;border-radius:8px;flex:1 1;font-size:14px;padding:10px 14px;transition:all .2s}.search-input:focus{border-color:#007bbf;box-shadow:0 0 0 3px #007bbf1a;outline:none}.role-filter{background:#fff;border:1px solid #007bbf33;border-radius:8px;cursor:pointer;font-size:14px;min-width:140px;padding:10px 14px;transition:all .2s}.role-filter:focus{border-color:#007bbf;box-shadow:0 0 0 3px #007bbf1a;outline:none}.user-count{color:#666;font-size:14px;font-weight:500;padding:12px}.users-table-container{margin:0 12px 12px}.user-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d;overflow:hidden;transition:box-shadow .2s}.user-card:hover{box-shadow:0 4px 12px #007bbf26}.user-card-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:16px;transition:background .2s}.user-card-header:hover{background:#007bbf08}.user-info-main{flex:1 1}.user-email{margin-bottom:6px}.expand-icon{align-items:center;background:#007bbf1a;border-radius:50%;color:#007bbf;display:flex;font-size:24px;font-weight:300;height:32px;justify-content:center;width:32px}.role-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;text-transform:capitalize}.role-badge.admin{background:#ff980026;color:#e65100}.role-badge.user{background:#007bbf26;color:#007bbf}.user-card-actions{grid-gap:10px;animation:slideDown .2s ease;background:#f8f9fa;border-top:1px solid #007bbf1a;display:grid;gap:10px;grid-template-columns:repeat(2,1fr);padding:12px 16px 16px}@keyframes slideDown{0%{max-height:0;opacity:0;padding-bottom:0;padding-top:0}to{max-height:200px;opacity:1;padding-bottom:16px;padding-top:12px}}.action-btn-labeled{align-items:center;background:#fff;border:1px solid #0000001a;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:12px 16px;transition:all .2s}.action-btn-labeled span{flex:1 1;text-align:left}@media (hover:hover) and (pointer:fine){.action-btn-labeled.info:hover{background:#2196f31a;border-color:#2196f3;color:#2196f3}.action-btn-labeled.warning:hover{background:#ff98001a;border-color:#ff9800;color:#f57c00}.action-btn-labeled.primary:hover{background:#9c27b01a;border-color:#9c27b0;color:#9c27b0}.action-btn-labeled.danger:hover{background:#f443361a;border-color:#f44336;color:#f44336}}.no-users{color:#999;padding:40px;text-align:center}.loading-container{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:60px 20px}.loading-spinner{animation:spin .8s linear infinite;border:3px solid #007bbf33;border-radius:50%;border-top-color:#007bbf;height:40px;width:40px}@keyframes spin{to{transform:rotate(1turn)}}.modal-overlay{align-items:center;animation:fadeIn .2s ease;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{animation:slideUp .3s ease;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;margin-top:60px;max-height:85vh;max-width:540px;overflow-y:auto;width:100%}.modal-content.analytics-modal{max-width:600px}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;border-bottom:2px solid #f1f5f9;display:flex;justify-content:space-between;padding:24px 24px 20px}.modal-header h2{color:#007bbf;font-size:24px;font-weight:700;margin:0}.close-modal{align-items:center;background:none;border:none;border-radius:50%;color:#999;cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;transition:all .2s;width:32px}@media (hover:hover) and (pointer:fine){.close-modal:hover{background:#0000000d;color:#333}}.add-user-form,.modal-body,.modal-content form{padding:24px}.form-group{margin-bottom:20px}.form-group label{color:#1e293b;display:block;font-size:15px;font-weight:600;margin-bottom:8px}.form-group input,.form-group select{background:#fff;border:2px solid #e2e8f0;border-radius:10px;box-sizing:border-box;font-size:15px;padding:12px 16px;transition:all .2s;width:100%}.form-group input::placeholder,.form-group select::placeholder{color:#94a3b8}.form-group input:focus,.form-group select:focus{border-color:#007bbf;box-shadow:0 0 0 4px #007bbf1a;outline:none}.form-group small{color:#64748b;display:block;font-size:13px;line-height:1.4;margin-top:6px}.modal-actions{border-top:2px solid #f1f5f9;display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px}.btn-danger,.btn-primary,.btn-secondary{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#007bbf,#09c);color:#fff}@media (hover:hover) and (pointer:fine){.btn-primary:hover{box-shadow:0 4px 12px #007bbf4d;transform:translateY(-1px)}}.btn-secondary{background:#fff;border:1px solid #0000001a;color:#666}@media (hover:hover) and (pointer:fine){.btn-secondary:hover{background:#f8f9fa;border-color:#0003}}.btn-danger{background:#f44336;color:#fff}@media (hover:hover) and (pointer:fine){.btn-danger:hover{background:#d32f2f;box-shadow:0 4px 12px #f443364d}}.user-info{background:#f8f9fa;border-radius:8px;font-size:14px;margin:16px 0;padding:12px}.warning-text{color:#f44336;font-size:13px;font-weight:600;margin-top:12px}.user-details{margin-bottom:24px;text-align:center}.user-details h3{color:#333;font-size:20px;margin:0 0 4px}.user-email{color:#666;font-size:14px;margin:0}.section-title{color:#007bbf;font-size:16px;font-weight:700;margin:24px 0 12px}.stats-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:20px}.stat-card{background:linear-gradient(135deg,#f8f9fa,#fff);border:1px solid #007bbf1a;border-radius:12px;padding:16px;text-align:center;transition:all .2s}.stat-card.wide{grid-column:1/-1}@media (hover:hover) and (pointer:fine){.stat-card:hover{border-color:#007bbf4d;box-shadow:0 4px 12px #007bbf1a;transform:translateY(-2px)}}.stat-icon{align-items:center;display:flex;justify-content:center;margin-bottom:8px}.stat-value{color:#007bbf;font-size:20px;font-weight:700;margin-bottom:4px}.stat-value.small{color:#666;font-size:12px}.stat-label{color:#999;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.management-header{align-items:center;background:linear-gradient(135deg,#007bbf,#005a8f);color:#fff;display:flex;justify-content:space-between;padding:16px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.management-header .back-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s}@media (hover:hover) and (pointer:fine){.management-header .back-btn:hover{background:#ffffff4d}}.management-header .header-title{align-items:center;color:#fff;display:flex;font-size:20px;font-weight:700;margin:0}.actions-bar{align-items:center;background:#f8f9fa;border-bottom:1px solid #007bbf1a;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:16px}.stats-summary{display:flex;flex-wrap:wrap;gap:20px}.stat-item{align-items:center;display:flex;font-size:14px;gap:6px}.stat-item .stat-label{color:#666;font-weight:500}.stat-item .stat-value{color:#007bbf;font-weight:700}.add-user-btn{align-items:center;background:linear-gradient(135deg,#007bbf,#09c);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:10px 20px;transition:all .2s}@media (hover:hover) and (pointer:fine){.add-user-btn:hover{box-shadow:0 4px 12px #007bbf4d;transform:translateY(-1px)}}.users-list{flex-direction:column}.user-header,.users-list{display:flex;gap:12px;padding:16px}.user-header{align-items:center;justify-content:space-between}.user-info{flex:1 1;min-width:0}.user-name{color:#333;font-size:16px;font-weight:600;margin-bottom:4px}.user-actions,.user-name{align-items:center;display:flex;gap:8px}.user-actions{flex-shrink:0}.toggle-btn{border:none;border-radius:12px;cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;transition:all .2s}.toggle-btn.active{background:#10b98126;color:#059669}.toggle-btn.inactive{background:#94a3b826;color:#64748b}@media (hover:hover) and (pointer:fine){.toggle-btn:hover{transform:scale(1.05)}}.icon-btn{align-items:center;background:#fff;border:1px solid #0000001a;border-radius:8px;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s;width:36px}.icon-btn.edit{color:#3b82f6}.icon-btn.delete{color:#ef4444}@media (hover:hover) and (pointer:fine){.icon-btn.edit:hover{background:#3b82f61a;border-color:#3b82f6}.icon-btn.delete:hover{background:#ef44441a;border-color:#ef4444}}.code-details{display:flex;flex-wrap:wrap;gap:16px;padding:0 16px 16px}.detail-item{display:flex;font-size:13px;gap:6px}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-weight:600}.modal-content.small{max-width:400px}.close-modal-btn{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;justify-content:center;padding:0;transition:all .2s}@media (hover:hover) and (pointer:fine){.close-modal-btn:hover{color:#333}}.cancel-btn{background:#f1f5f9;border:2px solid #e2e8f0;border-radius:10px;color:#475569;cursor:pointer;font-size:15px;font-weight:600;padding:12px 28px;transition:all .2s}@media (hover:hover) and (pointer:fine){.cancel-btn:hover{background:#e2e8f0;border-color:#cbd5e1}}.submit-btn{background:linear-gradient(135deg,#007bbf,#09c);border:none;border-radius:10px;box-shadow:0 2px 8px #007bbf33;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 28px;transition:all .2s}@media (hover:hover) and (pointer:fine){.submit-btn:hover{box-shadow:0 6px 16px #007bbf59;transform:translateY(-2px)}}.delete-btn{background:#ef4444;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}@media (hover:hover) and (pointer:fine){.delete-btn:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d}}.checkbox-label{align-items:center;background:#f8fafc;border-radius:10px;color:#1e293b;cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:12px;padding:12px;transition:all .2s}.checkbox-label:hover{background:#f1f5f9}.checkbox-label input[type=checkbox]{accent-color:#007bbf;cursor:pointer;height:20px;width:20px}.checkbox-label span{flex:1 1}.message-banner{align-items:center;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;font-size:14px;font-weight:500;gap:8px;left:50%;margin:16px;max-width:500px;min-width:320px;padding:12px 16px;position:fixed;top:80px;transform:translateX(-50%);z-index:1000}.message-banner.success{background:#10b981f2;border:1px solid #10b981;color:#fff}.message-banner.error{background:#ef4444f2;border:1px solid #ef4444;color:#fff}@media (max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.modal-content{max-width:95%}.user-card-actions{grid-template-columns:1fr}.management-header{flex-wrap:wrap}.actions-bar{align-items:stretch;flex-direction:column}.stats-summary{justify-content:space-between}.code-details{flex-direction:column;gap:8px}.user-actions{flex-wrap:wrap}}