.practice-detail-modal{z-index:1000;background:#fff;flex-direction:column;max-width:600px;height:100vh;margin:0 auto;display:flex;position:fixed;inset:0;box-shadow:0 2px 16px #00000026}.modal-header{background:#f8f8f8;border-bottom:1px solid #eee;align-items:center;padding:12px 16px;display:flex}.modal-header button{margin-right:16px;font-size:16px}.question-display{padding:16px;font-size:18px}.question-title{margin-bottom:8px;font-weight:700}.question-type{color:#1890ff;margin-right:8px}.question-options{margin:8px 0 0;padding:0;list-style:none}.question-options li{margin-bottom:6px}.answer-input{flex-direction:column;gap:8px;padding:16px;display:flex}.option-label{align-items:center;margin-bottom:4px;font-size:16px;display:flex}.answer-input textarea{border:1px solid #ddd;border-radius:4px;width:100%;padding:8px;font-size:16px}.progress-bar{background:#eee;border-radius:4px;height:8px;margin:0 16px 8px;position:relative;overflow:hidden}.progress-bar-inner{background:#52c41a;height:100%;transition:width .3s}.progress-bar-text{color:#888;font-size:14px;position:absolute;top:-22px;right:0}.answer-card{background:#f8f8f8;border-top:1px solid #eee;flex-wrap:wrap;justify-content:center;gap:6px;padding:12px 16px;display:flex}.answer-card-item{color:#333;text-align:center;cursor:pointer;background:#fff;border:1px solid #bbb;border-radius:50%;width:32px;height:32px;font-size:16px;line-height:32px;transition:all .2s}.answer-card-item.answered{color:#fff;background:#52c41a;border-color:#52c41a}.answer-card-item.current{border:2px solid #1890ff}.modal-footer{background:#fafafa;border-top:1px solid #eee;justify-content:space-between;padding:12px 16px;display:flex}.practice-exercise-container{flex-direction:column;width:100%;height:100vh;display:flex;overflow:hidden}.sidebar-desktop{background-color:#f9f9f9;border-right:1px solid #eee;width:280px;transition:all .3s}.answer-card-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.mobile-answer-card-button{z-index:1000;color:#fff;background:#1890ff;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex;position:fixed;bottom:80px;right:16px;box-shadow:0 2px 8px #0003}.mobile-answer-card-modal{z-index:1100;background:#fff;border-top-left-radius:16px;border-top-right-radius:16px;max-height:70vh;padding:16px;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;box-shadow:0 -2px 10px #0000001a}.mobile-answer-card-overlay{z-index:1050;background:#00000080;position:fixed;inset:0}.progress-container{background-color:#f5f5f5;border-bottom:1px solid #eee;padding:8px 16px}.question-container{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#0000004d transparent;height:100%;padding-bottom:80px;overflow:hidden auto}.question-container::-webkit-scrollbar{width:6px}.question-container::-webkit-scrollbar-track{background:0 0}.question-container::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:20px}.practice-exercise-container .flex-grow{min-height:0}@media (max-width:600px){.practice-detail-modal{border-radius:0;max-width:100vw;height:100vh}.question-display,.answer-input,.answer-card,.modal-header,.modal-footer{padding-left:8px;padding-right:8px}.answer-card-item{width:28px;height:28px;font-size:14px;line-height:28px}.sidebar-desktop{display:none}.answer-card-grid{grid-template-columns:repeat(4,1fr)}.question-container{padding-bottom:120px}}@media (max-width:896px) and (orientation:landscape){.progress-container{padding:4px 16px}.answer-card-grid{grid-template-columns:repeat(8,1fr)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-answer-card-modal{animation:.3s ease-out slideUp}
