:root { --primary: #2196f3; --success: #4caf50; --danger: #f44336; --warning: #ff9800; --bg: #f4f7f9; }
    *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
    body{margin:0; background:var(--bg); font-family:-apple-system,sans-serif; transition: 0.3s; display:flex; justify-content:center;}
    body.dark{--bg:#121212; color:#e0e0e0}
    
    #app{max-width:600px; width:100%; min-height:100vh; padding:20px; display:flex; flex-direction:column; position: relative;}
    
    /* 顶部导航 */
    #top{background:white; padding:15px; border-radius:18px; box-shadow:0 4px 12px rgba(0,0,0,0.05); margin-bottom:15px;}
    body.dark #top{background:#1e1e1e}
    .status-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
    #backBtn{background:#eee; border:none; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:0.8rem; display:none; font-weight:bold;}
    body.dark #backBtn{background:#333; color:#ccc;}
    #progressText{font-weight:bold; cursor:pointer; color:var(--primary); background:rgba(33, 150, 243, 0.1); padding:4px 10px; border-radius:8px;}
    #progressText.clickable::after { content: ' ⇅'; font-size: 0.7rem; }

    /* 菜单控制 */
    .ctrl-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
    .repo-info{font-size: 0.8rem; color: #666; width: 100%; margin-top: 5px; font-weight: bold;}
    body.dark .repo-info{color: #aaa;}
    
    select, input[type="number"]{padding:8px; border-radius:8px; border:1px solid #ddd; font-size:0.85rem; outline:none; background:#fff;}
    body.dark select, body.dark input{background:#333; color:white; border-color:#444}
    
    /* 进度条 */
    #timeBar{height:6px; background:#e0e0e0; border-radius:3px; margin-bottom:20px; overflow:hidden;}
    #timeProgress{height:100%; width:0%; background:var(--success); transition: width 0.3s linear}
    
    /* 内容区 */
    #qArea{font-size:1.3rem; font-weight:700; margin-bottom:20px; line-height:1.4;}
    #optsArea{display:flex; flex-direction:column; gap:12px; flex:1}
    .opt{padding:16px; border-radius:15px; background:#fff; text-align:left; font-size:1.1rem; box-shadow:0 2px 6px rgba(0,0,0,0.03); border:2px solid transparent; cursor:pointer; transition: 0.2s;}
    body.dark .opt{background:#252525; color:#ddd}
    .opt.correct{background:#e8f5e9 !important; border-color:var(--success) !important; color:#2e7d32}
    .opt.wrong{background:#ffebee !important; border-color:var(--danger) !important; color:#c62828}

    #explArea{background:#e3f2fd; padding:15px; border-radius:15px; margin-top:20px; display:none; border-left:5px solid var(--primary); animation: slideUp 0.3s;}
    body.dark #explArea{background:#1a237e33; color:#bbdefb}

    /* 弹窗系统 */
    .modal-overlay{
        position: fixed; top:0; left:0; width:100%; height:100%; 
        background:rgba(0,0,0,0.6); display:none; justify-content:center; align-items:center; z-index:1000;
        backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s;
    }
    .modal-overlay.active{ display:flex; opacity:1; }
    .modal-content{ background:white; padding:24px; border-radius:24px; width:85%; max-width:360px; text-align:center; transform: scale(0.9); transition: transform 0.2s; }
    .modal-overlay.active .modal-content{ transform: scale(1); }
    body.dark .modal-content{background:#1e1e1e; border:1px solid #333;}
    
    .modal-footer{ display: flex; gap: 10px; margin-top: 20px; }
    .btn-modal{ flex:1; padding:12px; border-radius:12px; border:none; font-weight:bold; cursor:pointer; }
    .btn-cancel{ background:#eee; color:#666; }
    .btn-confirm{ background:var(--primary); color:white; }

    @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
    @keyframes slideUp { from{opacity:0; transform:translateY(10px)} to{opacity:1} }
    #mainBtn, #nextBtn{width:100%; padding:16px; border-radius:15px; font-size:1.1rem; font-weight:bold; cursor:pointer; border:none; margin-top:10px;}
    #mainBtn{background:var(--success); color:white}
    #nextBtn{background:var(--primary); color:white; display:none}