/* Học một chạm + chế độ lái xe — theo GUI2 (thẻ trắng, nút xanh dương; chế độ lái xe nền tối) */
.onetap{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 20px;box-shadow:var(--shadow);}
.ot-title{font-size:1.2rem;font-weight:800;line-height:1.25;color:var(--primary);}
.ot-desc{margin:4px 0 12px;color:var(--text-soft);font-size:.95rem;}
.ot-step{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-weight:700;}
.ot-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:.85rem;}
.ot-row{display:flex;flex-wrap:wrap;gap:8px;}
.ot-group{width:100%;font-size:.78rem;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 0;}
.ot-choice{min-height:46px;padding:9px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.ot-choice.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.ot-choice:disabled{opacity:.35;cursor:not-allowed;}
.ot-stage{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:6px 0;width:100%;background:var(--surface);}
.ot-stage summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center;}
.ot-stage-all{min-height:38px;padding:6px 12px;font-size:.9rem;margin:6px 0;}
.ot-flag{font-size:1.3rem;}
.ot-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.ot-grid label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:var(--text-soft);}
.ot-grid label[hidden]{display:none;}
.ot-grid select{min-height:46px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);font-size:1rem;background:var(--surface);color:var(--text);}
.ot-check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.92rem;min-height:36px;}
.ot-check input{width:22px;height:22px;accent-color:var(--primary);}
.settings-check{margin:8px 0;}
.ot-safety{margin:10px 0 0;font-size:.8rem;color:var(--warn);}
.ot-play{width:100%;min-height:68px;margin-top:2px;border:none;border-radius:16px;background:var(--primary);color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:.05em;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.35);}
.ot-play:active{background:var(--primary-d);}
.ot-play:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.ot-hint{margin:6px 0 0;font-size:.85rem;color:var(--warn);min-height:1em;}
.ot-resume{display:flex;gap:8px;margin-top:12px;}
.ot-resume-btn{flex:1;min-height:52px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--primary);background:var(--primary-soft);color:var(--primary);font-size:1rem;font-weight:700;cursor:pointer;text-align:left;}
.ot-resume-clear{width:52px;min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--text-soft);font-size:1.1rem;cursor:pointer;}

/* ---------- Trình phát ---------- */
.ot-track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.ot-fill{height:100%;width:0;background:var(--primary);transition:width .3s;}
.ot-meta{margin:8px 0;font-size:.9rem;color:var(--text-soft);}
.ot-now{min-height:110px;text-align:center;padding:8px 0;}
.ot-now-target{font-size:2rem;font-weight:800;line-height:1.3;font-family:var(--font-cjk);word-break:break-word;}
.ot-now-pinyin{margin-top:4px;font-size:1.1rem;color:var(--primary);}
.ot-now-meaning{margin-top:8px;font-size:1.05rem;color:var(--ok);font-weight:600;}
.ot-status{margin-top:6px;min-height:1.4em;font-size:.95rem;text-align:center;}
.ot-status.err{color:var(--bad);font-weight:700;}
.ot-note{margin-top:2px;min-height:1em;font-size:.82rem;text-align:center;color:var(--warn);}
.ot-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:12px;}
.ot-controls button{min-width:64px;min-height:64px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--text);font-size:1.5rem;cursor:pointer;}
.ot-controls .ot-big{min-width:92px;min-height:92px;font-size:2.4rem;background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35);}
.ot-controls-sub{flex-wrap:wrap;}
.ot-controls-sub button{border-radius:12px;min-width:0;min-height:52px;padding:8px 14px;font-size:.95rem;font-weight:600;}
.ot-controls-sub button.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.ot-errors{margin-top:12px;font-size:.82rem;}
.ot-errors summary{color:var(--bad);cursor:pointer;min-height:32px;}
.ot-errors ul{margin:4px 0 0;padding-left:18px;max-height:140px;overflow:auto;}

/* ---------- Chế độ lái xe: toàn màn hình, tối, chỉ nút lớn, ẩn chữ ---------- */
body.ot-driving{overflow:hidden;}
body.ot-driving .onetap{position:fixed;inset:0;z-index:60;border-radius:0;border:none;background:#0b1220;color:#e8eefc;display:flex;flex-direction:column;justify-content:center;padding:20px;}
body.ot-driving .ot-title,body.ot-driving .ot-desc,body.ot-driving .ot-now,body.ot-driving .ot-meta,body.ot-driving .ot-note,body.ot-driving .ot-errors,body.ot-driving .ot-controls-sub #otLoop{display:none;}
body.ot-driving .ot-track{background:#26344f;}
body.ot-driving .ot-status{color:#e8eefc;}
body.ot-driving .ot-controls{gap:20px;margin-top:20px;}
body.ot-driving .ot-controls button{min-width:96px;min-height:96px;font-size:2.4rem;background:#18243b;border-color:#2b3b5c;color:#e8eefc;}
body.ot-driving .ot-controls .ot-big{min-width:150px;min-height:150px;font-size:4rem;background:#2563eb;border-color:#3b82f6;color:#fff;}
body.ot-driving .ot-controls-sub button{min-height:80px;font-size:1.3rem;border-radius:16px;}