body.app-body{background:#f5f7fb;font-family:Inter,sans-serif;color:#111827;min-height:100vh}.metric-card{background:#fff;border:1px solid #e8eaf0;border-radius:12px;padding:20px 22px;display:flex;align-items:center;gap:16px;min-width:200px;flex:1;box-shadow:0 1px 4px #0000000f;transition:box-shadow .2s}.metric-card:hover{box-shadow:0 4px 14px #0000001a}.metric-card-action{padding-right:70px}.metric-card-action .action-btn{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:12px;background:#5f6dff;color:#fff;display:inline-flex;align-items:center;justify-content:center;border:none;box-shadow:0 8px 20px #5f6dff2e;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}.metric-card-action .action-btn:hover{background:#4e5ce6;transform:translateY(-1px)}.metric-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}.metric-icon.blue{background:#e6fbfc;color:#16adb5}.metric-icon.green{background:#edfaf2;color:#28a96a}.metric-icon.orange{background:#fff5ed;color:#f07030}.metric-icon.purple{background:#f4eeff;color:#8b4fe0}.metric-label{font-size:12px;color:#6b7280;font-weight:500;margin-bottom:2px}.metric-value{font-size:32px;font-weight:700;line-height:1;color:#111827;margin:4px 0}.metric-value.green{color:#28a96a}.metric-value.orange{color:#f07030}.metric-value.purple{color:#8b4fe0}.metric-sub{font-size:11px;color:#9ca3af}.section-card{background:#fff;border:1px solid #e8eaf0;border-radius:12px;padding:24px;box-shadow:0 1px 4px #0000000f}.section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.section-header h2{font-size:18px;font-weight:700;color:#111827;margin:0 0 2px}.section-header p{font-size:12px;color:#9ca3af;margin:0}.ctrl-group{display:flex;align-items:center;gap:10px}.ctrl-btn{display:flex;align-items:center;gap:5px;border:1px solid #e8eaf0;border-radius:8px;background:#fff;padding:7px 12px;font-size:12px;color:#374151;cursor:pointer;font-weight:500;transition:background .15s}.ctrl-btn:hover{background:#f5f7fa}.ctrl-btn .material-symbols-outlined{font-size:17px;color:#6b7280}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}.page-header-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.back-btn{display:flex;align-items:center;gap:6px;border:1px solid #e0e3ea;border-radius:8px;background:#fff;padding:8px 14px;font-size:13px;color:#374151;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s}.back-btn:hover{background:#f5f7fa}.back-btn .material-symbols-outlined{font-size:18px}.page-title-group{display:flex;flex-direction:column;gap:2px}.page-title{font-size:26px;font-weight:800;color:#111827}.page-meta{font-size:13px;color:#9ca3af;display:flex;align-items:center;gap:6px}.page-meta .dot{width:4px;height:4px;background:#d1d5db;border-radius:50%;display:inline-block}.excel-btn{display:flex;align-items:center;gap:8px;background:#1a202c;color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}.excel-btn:hover{background:#2d3748}.excel-btn .material-symbols-outlined{font-size:18px}.btn-primary{display:inline-flex;align-items:center;gap:6px;background:#16adb5;color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;text-transform:uppercase;letter-spacing:.02em}.btn-primary:hover{background:#129aa1}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary .material-symbols-outlined{font-size:18px}.btn-secondary{display:inline-flex;align-items:center;gap:6px;border:1px solid #e0e3ea;border-radius:8px;background:#fff;padding:8px 14px;font-size:13px;color:#374151;font-weight:500;cursor:pointer;transition:background .15s}.btn-secondary:hover{background:#f5f7fa}.btn-secondary .material-symbols-outlined{font-size:17px;color:#6b7280}.metrics-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px;justify-content:stretch}.metrics-row>.metric-card{flex:1 1 240px;min-width:240px}@media(max-width:640px){.metrics-row>.metric-card{flex:1 1 100%;min-width:0}}.tbl-section{background:#fff;border:1px solid #e8eaf0;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px #0000000f}.tbl-filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 0 16px}.tbl-filter-bar label{font-size:11px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}.tbl-filter-bar input,.tbl-filter-bar select{border:1px solid #e0e3ea;border-radius:8px;padding:7px 10px;font-size:13px;color:#374151;outline:none;background:#fff;transition:border-color .15s}.tbl-filter-bar input:focus,.tbl-filter-bar select:focus{border-color:#61dfe6}.filter-btn{display:flex;align-items:center;gap:5px;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:background .15s}.filter-btn.primary{background:#61dfe6;color:#111827}.filter-btn.primary:hover{background:#4ec2c9}.filter-btn.secondary{background:#f5f7fa;color:#374151;border:1px solid #e0e3ea}.filter-btn.secondary:hover{background:#eaecf0}.filter-btn .material-symbols-outlined{font-size:16px}.data-table{width:100%;border-collapse:collapse}.data-table thead th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#4b5563;padding:10px 14px;border-bottom:1px solid #e2e8f0;background:#f1f5f9}.data-table tbody tr{border-bottom:1px solid #f1f3f8;transition:background .12s}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody tr:hover{background:#fafbff}.data-table tbody td{padding:12px 14px;font-size:13px;color:#374151;vertical-align:middle}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}.badge .dot{width:6px;height:6px;border-radius:50%}.badge-green{background:#edfaf2;color:#28a96a}.badge-green .dot{background:#28a96a}.badge-red{background:#fff2f2;color:#e03c3c}.badge-red .dot{background:#e03c3c}.badge-orange{background:#fff5ed;color:#f07030}.badge-orange .dot{background:#f07030}.badge-blue{background:#e6fbfc;color:#16adb5}.badge-blue .dot{background:#16adb5}.badge-gray{background:#f1f3f8;color:#6b7280}.badge-gray .dot{background:#9ca3af}.tbl-pagination{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:4px;border-top:1px solid #f1f3f8;flex-wrap:wrap;gap:10px}.tbl-pag-info{font-size:12px;color:#6b7280}.tbl-pag-info b{color:#111827}.tbl-pag-btns{display:flex;align-items:center;gap:6px}.tbl-pag-btn{border:1px solid #e0e3ea;border-radius:8px;background:#fff;padding:6px 10px;font-size:12px;color:#374151;cursor:pointer;display:flex;align-items:center;transition:background .12s}.tbl-pag-btn:hover:not(:disabled){background:#f5f7fa}.tbl-pag-btn:disabled{opacity:.4;cursor:not-allowed}.tbl-pag-btn .material-symbols-outlined{font-size:17px}.tbl-per-page{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;vertical-align:middle}.tbl-per-page select{border:1px solid #e0e3ea;border-radius:6px;padding:4px 24px 4px 8px;font-size:12px;font-weight:500;color:#374151;outline:none;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 6px center / 14px;appearance:none;-webkit-appearance:none;-moz-appearance:none;min-width:54px;line-height:1.2;cursor:pointer}.form-input{width:100%;border:1px solid #e0e3ea;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;outline:none;background:#fff;transition:border-color .15s}.form-input:focus{border-color:#61dfe6}.form-select{width:100%;border:1px solid #e0e3ea;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;outline:none;background:#fff;transition:border-color .15s;cursor:pointer}.form-select:focus{border-color:#61dfe6}.form-label{font-size:11px;font-weight:600;color:#6b7280;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}.search-box{position:relative;max-width:380px}.search-box input{width:100%;border:1px solid #e0e3ea;border-radius:8px;padding:8px 12px 8px 36px;font-size:13px;color:#374151;outline:none;background:#fff;transition:border-color .15s}.search-box input:focus{border-color:#61dfe6}.search-box .material-symbols-outlined{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:17px;color:#9ca3af;pointer-events:none}.modal-overlay{position:fixed;inset:0;background:#00000059;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.modal-card{background:#fff;border-radius:12px;border:1px solid #e8eaf0;box-shadow:0 20px 60px #00000026;padding:24px;max-height:85vh;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid #f1f3f8}.modal-header h3{font-size:14px;font-weight:700;color:#111827;text-transform:uppercase;letter-spacing:.03em}.modal-close{background:none;border:none;cursor:pointer;color:#6b7280;display:flex;align-items:center;transition:color .15s}.modal-close:hover{color:#e03c3c}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;margin-top:16px;border-top:1px solid #f1f3f8}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite;display:inline-block}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fadeInUp .35s cubic-bezier(.16,1,.3,1) forwards}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.animate-pulse-slow{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.questions-grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}@media(max-width:900px){.questions-grid{grid-template-columns:1fr}}.q-card{border:1px solid #e8eaf0;border-radius:10px;padding:18px 20px 14px;background:#fff}.q-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.q-card-title{display:flex;align-items:center;gap:10px}.q-num{width:28px;height:28px;border-radius:50%;background:#61dfe6;color:#111827;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.q-text{font-size:14px;font-weight:600;color:#111827}.q-collapse-btn{background:none;border:none;cursor:pointer;color:#6b7280;display:flex;align-items:center}.q-audio{width:100%;height:36px;margin-bottom:14px;border-radius:6px}.ans-row{margin-bottom:12px}.ans-row:last-child{margin-bottom:0}.ans-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.ans-label{font-size:12px;color:#111827;font-weight:500}.ans-tag{font-size:11px;color:#9ca3af;margin-left:4px;font-weight:400}.ans-stats{font-size:12px;color:#6b7280;white-space:nowrap}.ans-pct{font-size:12px;font-weight:700;color:#111827;margin-left:8px}.ans-bar-bg{background:#f1f3f8;border-radius:4px;height:6px;overflow:hidden}.ans-bar-fill{background:#61dfe6;height:100%;border-radius:4px;transition:width .5s ease}.q-footer{margin-top:14px;padding-top:10px;border-top:1px solid #f1f3f8;display:flex;align-items:center;gap:6px;font-size:12px;color:#16adb5}.q-footer .material-symbols-outlined{font-size:16px}.q-summary{margin-top:20px;padding:14px 18px;background:#f5f7fb;border-radius:10px;display:flex;align-items:center;justify-content:space-between}.q-summary-left{display:flex;align-items:center;gap:10px}.q-summary-icon{width:38px;height:38px;border-radius:10px;background:#e6fbfc;display:flex;align-items:center;justify-content:center;color:#16adb5}.q-summary-icon .material-symbols-outlined{font-size:20px}.q-summary-title{font-size:14px;font-weight:600;color:#111827}.q-summary-sub{font-size:12px;color:#9ca3af}.pag-btns{display:flex;align-items:center;gap:6px}.pag-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e8eaf0;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#374151;transition:background .15s}.pag-btn:hover{background:#f5f7fa}.pag-btn.active{background:#61dfe6;color:#111827;border-color:#61dfe6;font-weight:700}.pag-btn .material-symbols-outlined{font-size:18px}.text-muted{color:#9ca3af}.text-dark{color:#111827}.text-mid{color:#6b7280}.border-soft{border-color:#f1f3f8}.bg-soft{background:#f5f7fb}@media(max-width:1023px){main>.flex-grow{padding:16px!important}.page-header{flex-direction:column;align-items:flex-start;gap:12px}.page-header>.excel-btn,.page-header>div:not(.page-header-left){width:100%;justify-content:center}.data-table-container{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.metric-cards-grid{grid-template-columns:1fr!important}.metric-card{min-width:unset;width:100%}.modal-card{width:95vw!important;max-width:95vw!important;margin:8px!important}main{padding-top:56px}}@media(max-width:639px){.page-title{font-size:20px}.page-header-left{flex-direction:column;align-items:flex-start;width:100%;gap:8px}.back-btn{width:100%;justify-content:center}}@media(max-width:1023px){.data-table{table-layout:auto!important;width:100%!important}.data-table thead th{width:auto!important}.hidden-mobile,th.hidden-mobile,td.hidden-mobile,table.data-table th.hidden-mobile,table.data-table td.hidden-mobile{display:none!important}}