*{box-sizing:border-box}body{margin:0}button,input{font-family:inherit}.app{background-color:#f5f7fb;min-height:100vh;font-family:Arial,sans-serif}.header{background-color:#fff;border-bottom:1px solid #e5e7eb;padding:24px 40px}.header h1{color:#2563eb;margin:0;font-size:28px}.header p{color:#64748b;margin-top:8px}.main{justify-content:center;padding:60px 20px;display:flex}.upload-container{background-color:#fff;border-radius:12px;width:100%;max-width:600px;padding:35px;box-shadow:0 4px 20px #0000000d}.upload-container h2{color:#1e293b;margin-top:0}.description{color:#64748b;margin-bottom:25px}.upload-box{text-align:center;background-color:#f8fafc;border:2px dashed #cbd5e1;border-radius:10px;padding:35px 20px}.upload-icon{color:#2563eb;margin-bottom:15px;font-size:40px}.upload-label{color:#2563eb;cursor:pointer;font-weight:700;display:inline-block}#scormFile{max-width:100%;margin:15px auto;display:block}.file-info{color:#94a3b8;font-size:13px}.upload-button{color:#fff;cursor:pointer;background-color:#2563eb;border:none;border-radius:8px;width:100%;margin-top:25px;padding:14px;font-size:16px}.upload-button:hover{background-color:#1d4ed8}.upload-button:disabled{cursor:not-allowed;background-color:#94a3b8}.reset-button{color:#2563eb;cursor:pointer;background-color:#fff;border:1px solid #2563eb;border-radius:8px;width:100%;margin-top:10px;padding:12px;font-size:15px}.reset-button:hover{background-color:#eff6ff}.course-info{overflow-wrap:anywhere;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;margin-top:30px;padding:20px}.course-info h2{color:#2563eb;font-size:22px}.course-info p{color:#334155;margin:12px 0}.error-message{color:#dc2626;margin-top:15px}.player-container{background-color:#fff;border-radius:12px;width:100%;max-width:1400px;padding:25px;box-shadow:0 4px 20px #0000000d}.player-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;display:flex}.player-header h2{color:#2563eb;margin:0}.player-header p{color:#64748b;margin-top:8px}.back-button{color:#2563eb;cursor:pointer;background-color:#fff;border:1px solid #2563eb;border-radius:8px;padding:12px 20px;font-size:15px}.back-button:hover{background-color:#eff6ff}.scorm-iframe{background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;height:750px;display:block}@media (width<=768px){.header{padding:20px}.main{padding:25px 12px}.upload-container{padding:20px}.player-container{padding:12px}.player-header{flex-direction:column;align-items:flex-start}.scorm-iframe{height:600px}}