*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI',sans-serif;background:#f0f4f8;min-height:100vh;color:#1a202c}
#app{max-width:680px;margin:0 auto;padding:12px}

/* Header */
.hd{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:10px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.hd-prog{font-weight:600;color:#4a5568;font-size:13px}
.hd-timer{font-size:22px;font-weight:700;color:#2563eb;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hd-timer.urgent{color:#ef4444;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Card */
.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Start */
.start{text-align:center;padding:40px 20px}
.start h1{font-size:26px;font-weight:700;margin-bottom:8px}
.start .sub{color:#718096;margin-bottom:28px}
.info{background:#f7fafc;border-radius:12px;padding:16px;margin-bottom:28px;text-align:left}
.info p{color:#4a5568;line-height:1.8;font-size:14px}

/* Buttons */
.btn{border:none;border-radius:10px;padding:12px 28px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.btn-blue{background:#2563eb;color:#fff}.btn-blue:hover{opacity:.9}
.btn-blue:disabled{background:#93c5fd;cursor:not-allowed}
.btn-gray{background:#e2e8f0;color:#4a5568}.btn-gray:hover{opacity:.85}

/* Ordering */
.trans{color:#4a5568;font-size:14px;margin-bottom:12px;padding:10px 14px;background:#eff6ff;border-radius:8px;border-left:3px solid #2563eb;line-height:1.6}
.word-area-wrap{display:flex;flex-direction:column;gap:8px;height:200px;margin-bottom:14px}
.placed{flex:1;border:2px dashed #cbd5e0;border-radius:10px;padding:8px;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;overflow-y:auto}
.placed-ph{color:#a0aec0;font-size:13px}
.avail{flex:1;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;overflow-y:auto}
.wt{border:none;border-radius:8px;padding:7px 12px;font-size:14px;cursor:pointer;font-family:inherit;transition:all .15s;font-weight:500}
.wt-av{background:#dbeafe;color:#1d4ed8;border:2px solid #bfdbfe}.wt-av:hover{background:#bfdbfe}
.wt-pl{background:#2563eb;color:#fff;border:2px solid #2563eb}.wt-pl:hover{background:#dc2626;border-color:#dc2626}
.ord-actions{position:relative;display:flex;justify-content:center;align-items:center;margin-top:4px}
.btn-kaito{background:#2563eb;color:#fff;font-size:19px;font-weight:700;padding:13px 48px;border-radius:12px;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}
.btn-kaito:disabled{background:#93c5fd;cursor:not-allowed}
.btn-reset{position:absolute;right:0;background:#e2e8f0;color:#4a5568;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}
.btn-reset:hover{opacity:.85}

/* Question */
.sent-display{font-size:15px;font-weight:600;color:#1d4ed8;margin-bottom:14px;padding:10px 14px;background:#eff6ff;border-radius:8px;line-height:1.5}
.q-text{font-size:15px;font-weight:600;margin-bottom:14px;line-height:1.6}
.choices{display:flex;flex-direction:column;gap:7px}
.choice{display:flex;align-items:flex-start;gap:9px;text-align:left;background:#f7fafc;border:2px solid #e2e8f0;border-radius:10px;padding:10px 13px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.5;transition:all .15s}
.choice:hover{background:#eff6ff;border-color:#93c5fd}
.choice .cn{font-weight:700;color:#2563eb;min-width:18px;flex-shrink:0}

/* Feedback */
.badge{display:inline-block;font-size:18px;font-weight:700;padding:8px 18px;border-radius:10px;margin-bottom:16px}
.badge.ok{background:#d1fae5;color:#065f46}
.badge.ng{background:#fee2e2;color:#991b1b}
.fb-label{font-size:11px;color:#718096;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.fb-val{font-size:14px;margin-bottom:12px;line-height:1.5}
.fb-correct{padding:10px 13px;background:#f0fdf4;border-radius:8px;border-left:3px solid #10b981;margin-bottom:12px}
.fb-wrong{padding:10px 13px;background:#fef2f2;border-radius:8px;border-left:3px solid #ef4444;margin-bottom:12px}
.fb-note{font-size:13px;color:#92400e;background:#fffbeb;padding:10px 13px;border-radius:8px;border-left:3px solid #f59e0b;margin-bottom:18px;line-height:1.6}

/* Results */
.results h2{font-size:22px;font-weight:700;margin-bottom:18px;text-align:center}
.score-box{background:linear-gradient(135deg,#2563eb,#1e40af);border-radius:16px;padding:24px;text-align:center;color:#fff;margin-bottom:20px}
.score-num{font-size:60px;font-weight:700;line-height:1}
.score-unit{font-size:22px}
.score-sub{font-size:13px;opacity:.8;margin-top:6px}
.review-section h3{font-size:16px;font-weight:700;margin-bottom:14px}
.rs-block{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:14px}
.rs-hd{background:#f7fafc;padding:9px 14px;font-weight:600;font-size:13px;border-bottom:1px solid #e2e8f0}
.rs-item{padding:10px 14px;border-bottom:1px solid #f0f0f0;font-size:13px}
.rs-item:last-child{border-bottom:none}
.rs-type{font-size:11px;font-weight:700;color:#718096;text-transform:uppercase;margin-bottom:3px}
.rs-q{font-weight:600;margin-bottom:5px;line-height:1.5}
.rs-ng{color:#dc2626;margin-bottom:2px}
.rs-ok{color:#059669;font-weight:600;margin-bottom:2px}
.rs-note{color:#92400e;background:#fffbeb;padding:5px 8px;border-radius:6px;font-size:12px;margin-top:4px;line-height:1.5}
.all-ok{text-align:center;font-size:16px;color:#065f46;background:#d1fae5;padding:18px;border-radius:10px;margin-bottom:18px}
.loading{text-align:center;padding:60px;color:#718096}
.mt16{margin-top:16px}