* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Roboto,sans-serif; background:#f4f6fa; color:#1e293b; min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:16px; }
.app-container { width:100%; max-width:720px; background:#fff; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,0.06); padding:30px 28px 36px; margin:20px 0; }

.brand-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid #eef2f6; flex-wrap:wrap; }
.logo-icon { width:48px; height:48px; background:#0b2b4a; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; flex-shrink:0; }
.brand-text h1 { font-size:20px; font-weight:700; color:#0b2b4a; }
.brand-text .sub { font-size:13px; color:#6b7a8f; margin-top:2px; }
.header-actions { margin-left:auto; }

.btn { padding:6px 16px; border-radius:30px; border:none; font-weight:600; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; transition:background .2s; }
.btn-outline { background:transparent; border:1.5px solid #dce1e9; color:#1e293b; }
.btn-outline:hover { background:#f0f4fe; }
.btn-sm { padding:4px 14px; font-size:12px; }
.btn-primary { background:#0b2b4a; color:#fff; }
.btn-primary:hover { background:#123a60; }

.notice-banner { background:#f0f4fe; border-left:4px solid #1a5a8c; padding:12px 16px; border-radius:12px; margin-bottom:20px; font-size:14px; display:flex; gap:10px; }
.notice-banner i { color:#1a5a8c; font-size:18px; margin-top:2px; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; font-size:14px; margin-bottom:4px; }
.required { color:#dc2626; margin-left:2px; }
.hint { font-size:12px; color:#8a99b0; font-weight:400; margin-left:6px; }
.form-control { width:100%; padding:11px 16px; border:1.5px solid #dce1e9; border-radius:12px; font-size:15px; background:#fafbfc; transition:border .2s; font-family:inherit; }
.form-control:focus { outline:none; border-color:#1a5a8c; box-shadow:0 0 0 4px rgba(26,90,140,0.08); background:#fff; }
.form-control.error { border-color:#dc2626; background:#fff5f5; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a8f' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.error-text { font-size:13px; color:#dc2626; margin-top:4px; display:none; }
.error-text.show { display:block; }

.video-section { margin:20px 0; border-radius:16px; overflow:hidden; background:#0b1a2a; }
.video-section video { width:100%; display:block; background:#0b1a2a; min-height:200px; }
.video-controls { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#0f2538; color:#cbd5e1; font-size:13px; flex-wrap:wrap; }
.video-controls .progress-bar { flex:1; height:4px; background:#2d4a66; border-radius:4px; min-width:60px; }
.video-controls .progress-bar .fill { height:100%; background:#4b9eff; border-radius:4px; width:0%; transition:width .3s; }
.status-badge { background:#1a3a55; padding:4px 14px; border-radius:20px; font-size:12px; color:#94b8d6; white-space:nowrap; }
.status-badge.done { background:#1a5a3a; color:#7ddfb0; }
.video-controls button { background:none; border:none; color:#cbd5e1; font-size:18px; cursor:pointer; padding:4px; }
.video-controls button:hover { color:#fff; }
.video-hint { padding:6px 16px 10px; background:#0f2538; color:#8db4d4; font-size:12px; border-top:1px solid #1a3852; }

.exam-section { background:#f8faff; border-radius:16px; padding:18px 20px; margin:18px 0; border:1px solid #e6edf6; }
.exam-title { font-weight:600; font-size:15px; color:#0b2b4a; margin-bottom:12px; }
.exam-hint { font-weight:400; font-size:13px; color:#6b7a8f; }
.question-item { margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed #e2e9f2; }
.question-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.question-item .q-text { font-weight:500; font-size:14px; margin-bottom:6px; }
.question-item .options label { display:flex; align-items:center; gap:10px; font-weight:400; font-size:14px; padding:4px 8px; cursor:pointer; border-radius:6px; transition:background .15s; }
.question-item .options label:hover { background:#eef4fa; }
.question-item .options input[type="radio"] { accent-color:#1a5a8c; width:16px; height:16px; flex-shrink:0; }
.exam-result { margin-top:10px; font-weight:500; font-size:14px; color:#1a5a8c; display:none; }
.exam-result.show { display:block; }
.exam-result.error { color:#dc2626; }

.commitment-section { background:#fafcfe; border-radius:16px; padding:16px 20px; margin:16px 0 20px; border:1px solid #e6edf6; }
.commit-text { font-size:14px; line-height:1.8; margin-bottom:10px; }
.checkbox-group label { display:flex; align-items:center; gap:12px; font-size:14px; cursor:pointer; padding:4px 0; }
.checkbox-group input[type="checkbox"] { accent-color:#1a5a8c; width:18px; height:18px; flex-shrink:0; }

.btn-submit { width:100%; padding:16px; background:#0b2b4a; color:#fff; border:none; border-radius:14px; font-size:18px; font-weight:600; cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:12px; }
.btn-submit:hover { background:#123a60; }
.btn-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-submit .spinner { display:none; width:20px; height:20px; border:2.5px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.btn-submit.loading .spinner { display:inline-block; }
.btn-submit.loading .btn-text { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

.success-page { text-align:center; padding:10px 0; }
.icon-check { font-size:56px; color:#16a34a; margin-bottom:10px; }
.success-page h2 { font-size:24px; color:#0b2b4a; }
.qr-wrapper { display:inline-block; background:#fff; padding:16px; border-radius:20px; box-shadow:0 8px 28px rgba(0,0,0,0.06); margin:12px auto; }
.qr-wrapper img { width:160px; height:160px; display:block; }
.info-summary { background:#f8faff; border-radius:14px; padding:14px 18px; text-align:left; font-size:14px; line-height:2; margin-top:10px; }
.info-summary span { color:#6b7a8f; }

.footer-note { text-align:center; font-size:12px; color:#99aabc; margin-top:28px; padding-top:16px; border-top:1px solid #edf2f7; }
.mt-2 { margin-top:12px; }

@media (max-width:540px) {
    .app-container { padding:18px 14px 24px; }
    .brand-text h1 { font-size:17px; }
    .header-actions { margin-left:0; width:100%; }
    .qr-wrapper img { width:130px; height:130px; }
    .video-section video { min-height:150px; }
}

@media print {
    .header-actions, .notice-banner, .btn-submit, .video-section, .exam-section, .commitment-section, .footer-note { display:none !important; }
    .success-page { display:block !important; }
    .app-container { box-shadow:none; padding:20px; }
}