.typing-app{display:grid;grid-template-columns:minmax(255px,300px) minmax(0,1fr);gap:14px;min-height:680px;height:min(780px,calc(100vh - 220px));margin:18px 0;background:#f5f7fb;border:1px solid #dfe4ee;border-radius:16px;padding:14px;box-sizing:border-box;color:#172033;overflow:hidden}
.typing-side{display:flex;flex-direction:column;gap:12px;min-height:0;background:#fff;border:1px solid #e1e6ef;border-radius:13px;padding:16px;overflow:auto}
.typing-side-title{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #edf0f5}.typing-side-title b,.typing-side-title small{display:block}.typing-side-title small,.tt-setting small,.tt-upload small{color:#687387;font-size:.82rem}.typing-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef0ff;color:#4338ca;font-size:1.6rem;font-weight:800}
.tt-setting{display:grid;gap:5px;font-size:.9rem;font-weight:700}.tt-setting select{width:100%;min-height:42px;padding:8px 10px;border:1px solid #d6dce8;border-radius:9px;background:#fff;color:#172033;font:inherit;font-weight:500}
.tt-exam-toggle{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #c7d2fe;border-radius:10px;background:#f5f6ff;cursor:pointer}.tt-exam-toggle input{width:18px;height:18px;accent-color:#4338ca}.tt-exam-toggle b,.tt-exam-toggle small{display:block}.tt-exam-toggle small{color:#687387;font-size:.78rem}.tt-exam-note{margin:-6px 0 0;padding:9px 10px;border-left:3px solid #4338ca;background:#f5f6ff;font-size:.84rem;color:#34405a}
.tt-upload{display:grid;gap:7px;border:1px dashed #cbd3e1;border-radius:10px;padding:11px}.tt-upload label b,.tt-upload label small{display:block}.tt-upload input{max-width:100%;font-size:.82rem}.tt-upload .btn{min-height:36px;padding:7px 10px;font-size:.84rem}
.tt-side-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px}.tt-side-actions .btn{min-height:40px;padding:8px 10px;font-size:.88rem}.tt-side-actions #tt-fullscreen{grid-column:1/-1}.typing-side .tt-kbar{margin:3px 0 0}.typing-side .tt-kbar .btn{width:100%;min-height:36px}.typing-side .tt-kbd{width:100%;box-sizing:border-box;margin:0;overflow:hidden}.typing-side .tt-kbd .k{height:35px;font-size:.78rem}.typing-side .tt-kbd .k small{font-size:.58rem}
.typing-work{display:flex;flex-direction:column;gap:13px;min-width:0;min-height:0;background:#fff;border:1px solid #e1e6ef;border-radius:13px;padding:18px;overflow:auto}.typing-work .kv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0}.typing-work .kv>div{min-width:0;background:#f7f8fc;border:1px solid #e9ecf3;border-radius:10px;padding:9px 8px;text-align:center}.typing-work .kv b{display:block;font-size:1.35rem;color:#272f48}.typing-work .kv span{display:block;font-size:.76rem;color:#687387}.typing-passage-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.typing-passage-head h2{font-size:1.08rem;margin:0 0 3px}.typing-passage-head p{margin:0;color:#687387;font-size:.87rem}.typing-live{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#475569;font-size:.82rem}.typing-live i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px #dcfce7}
.typing-work .tt-text{flex:1;min-height:180px;max-height:none;overflow:auto;font-size:1.2rem;line-height:2;padding:16px;background:#fdfdff}.typing-work .tt-hindi,.typing-work .tt-prev{font-size:1.12rem;margin:0}.typing-work #tt-in{min-height:130px;resize:vertical;font-size:1.16rem;line-height:1.8;margin:0;padding:14px;border:2px solid #cbd5e1}.typing-work #tt-in:focus{outline:3px solid #c7d2fe;border-color:#6366f1}.typing-tip{margin:0;color:#667085;font-size:.82rem}.typing-work .bigout{margin:0;padding:12px;border-radius:10px;background:#eefbf4}.typing-work .cd-status{margin:0}
#typing-app:fullscreen,#typing-app.typing-focus{position:fixed;inset:0;z-index:99999;width:100vw;height:100vh;min-height:0;margin:0;border:0;border-radius:0;padding:16px;background:#e9edf5;grid-template-columns:minmax(270px,320px) minmax(0,1fr)}#typing-app:fullscreen .typing-work,#typing-app.typing-focus .typing-work{padding:22px}#typing-app:fullscreen .tt-text,#typing-app.typing-focus .tt-text{font-size:1.35rem}
@media(max-width:850px){.typing-app{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}.typing-side{display:grid;grid-template-columns:1fr 1fr;align-items:start}.typing-side-title,.tt-exam-toggle,.tt-exam-note,.tt-upload,.tt-side-actions,.typing-side .tt-kbar,.typing-side .tt-kbd{grid-column:1/-1}.typing-work{min-height:620px}.typing-work .tt-text{flex:none;min-height:190px}.typing-side .tt-kbd .k{height:38px}}
@media(max-width:560px){.typing-side{grid-template-columns:1fr;padding:12px}.typing-work{padding:12px;min-height:580px}.typing-work .kv{grid-template-columns:repeat(3,minmax(0,1fr))}.typing-work .kv>div:nth-child(n+4){grid-column:span 1}.typing-passage-head{align-items:flex-start;flex-direction:column}.typing-work .tt-text{font-size:1.05rem;padding:11px}.typing-work #tt-in{font-size:1rem;min-height:116px}.typing-side .tt-kbd .k{height:32px;font-size:.7rem}.typing-side .tt-kbd .k small{font-size:.5rem}#typing-app:fullscreen,#typing-app.typing-focus{display:flex;flex-direction:column;overflow:auto;padding:9px}#typing-app:fullscreen .typing-side,#typing-app.typing-focus .typing-side{display:grid;grid-template-columns:1fr 1fr;padding:10px}#typing-app:fullscreen .typing-side-title,#typing-app:fullscreen .tt-exam-toggle,#typing-app:fullscreen .tt-exam-note,#typing-app:fullscreen .tt-upload,#typing-app:fullscreen .tt-side-actions,#typing-app:fullscreen .tt-kbar,#typing-app:fullscreen .tt-kbd,#typing-app.typing-focus .typing-side-title,#typing-app.typing-focus .tt-exam-toggle,#typing-app.typing-focus .tt-exam-note,#typing-app.typing-focus .tt-upload,#typing-app.typing-focus .tt-side-actions,#typing-app.typing-focus .tt-kbar,#typing-app.typing-focus .tt-kbd{grid-column:1/-1}#typing-app:fullscreen .typing-work,#typing-app.typing-focus .typing-work{min-height:60vh;padding:12px}}
.typing-work .tt-type-wrap{position:relative;min-height:130px;flex:0 0 auto}.typing-work .tt-type-wrap #tt-in{display:block;width:100%;min-height:130px;box-sizing:border-box}.typing-work .tt-type-wrap.translated #tt-in{position:relative;z-index:2;background:transparent;color:transparent!important;-webkit-text-fill-color:transparent;caret-color:transparent;resize:none}.typing-work .tt-type-wrap.translated #tt-prev{display:block;position:absolute;inset:0;z-index:1;box-sizing:border-box;min-height:130px;margin:0;padding:14px;border:2px solid #cbd5e1;border-radius:8px;background:#fff;color:#172033;font-size:1.16rem;line-height:1.8;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;pointer-events:none}.typing-work .tt-type-wrap.translated #tt-in:focus+#tt-prev{outline:3px solid #c7d2fe;border-color:#6366f1}.typing-work .tt-type-wrap.translated #tt-prev[hidden]{display:none}@media(max-width:560px){.typing-work .tt-type-wrap,.typing-work .tt-type-wrap #tt-in,.typing-work .tt-type-wrap.translated #tt-prev{min-height:116px}.typing-work .tt-type-wrap.translated #tt-prev{font-size:1rem;padding:14px}}