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