.main-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.main-modes .mode{min-height:260px;border-color:#77dbff88}.main-controls{position:sticky;top:0;z-index:3;background:#101b33f5;backdrop-filter:blur(12px)}.main-controls h2{margin:8px 0}.main-controls p{margin:8px 0}.main-controls progress{width:100%}.main-match-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px}.main-sheet{min-width:0}.main-piece-table{width:100%;table-layout:fixed}.main-piece-table th:first-child{width:90px}.main-piece-table th:nth-child(2){width:42%}.main-piece-table td{overflow-wrap:anywhere;vertical-align:middle}.main-piece-table select{width:76px;min-height:48px;padding:8px}.composer-drop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:56px;border:1px dashed #77dbff66;border-radius:10px;padding:8px;cursor:pointer}.composer-drop[aria-disabled=true]{cursor:default}.composer-drop:focus-visible{outline:3px solid #77dbff}.main-bank{display:flex;flex-wrap:wrap;gap:10px;min-height:80px;padding:8px;border:1px dashed #77dbff55;border-radius:10px}.composer-chip{padding:10px 14px;min-height:44px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;max-width:100%;overflow-wrap:anywhere}.composer-chip[aria-pressed=true]{outline:3px solid #77dbff;background:#24556b}.composer-remove{min-width:32px;padding:4px 8px}.composer-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);border:2px solid #77dbff;border-radius:12px;padding:12px 18px;background:#173f62;color:#fff;box-shadow:0 8px 24px #0008;max-width:260px}#mainBankPanel{position:sticky;top:235px;align-self:start;max-height:calc(100dvh - 250px);overflow:auto}#mainBankPanel p{font-size:14px}#mainBankPanel h2{font-size:22px}#mainWork>.primary{margin-bottom:24px}@media(max-width:850px){.main-match-layout{grid-template-columns:1fr}#mainBankPanel{grid-row:1;position:static;max-height:none}.main-bank{max-height:220px;overflow:auto}.main-piece-table th:first-child{width:75px}.main-piece-table select{width:62px}.main-piece-table th:nth-child(2){width:40%}.main-piece-table th,.main-piece-table td{padding:9px 5px}.main-controls{top:0}.main-controls h2{font-size:22px}.main-controls .bar{margin:8px 0}}@media(max-width:500px){.main-modes{grid-template-columns:1fr}.main-piece-table{font-size:13px}.main-piece-table .composer-chip{padding:6px;font-size:12px}.main-sheet{padding:12px}.composer-drop{padding:5px}.main-controls{position:static}.main-piece-table th:first-child{width:65px}}
.clip-navigation{display:flex;flex-wrap:wrap;gap:8px;max-height:132px;overflow:auto;margin:12px 0}.clip-jump{min-width:44px;min-height:44px;padding:8px}.clip-jump[aria-current=true]{background:#3b6380;border-color:#7df0ff;outline:2px solid #7df0ff}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.answer-card{min-width:0;border:1px solid var(--line);border-radius:14px;padding:16px;overflow-wrap:anywhere}.answer-card h3{line-height:1.4}.answer-correct,.answer-wrong{padding:12px;margin:10px 0;border-radius:8px;border-left:4px solid}.answer-correct{border-color:#80d9ae;background:#80d9ae0c}.answer-wrong{border-color:#ffa6a6;background:#ffa6a610}.answer-card p{margin:6px 0}.progress-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.progress-stat{display:flex;flex-direction:column;gap:6px;padding:18px;background:#16213c;border:1px solid var(--line);border-radius:12px}.progress-stat strong{font-size:26px}.progress-stat span{font-size:14px;color:var(--muted)}.history-card{display:flex;gap:16px;align-items:center;justify-content:space-between}.history-card h2{font-size:20px}.history-card button{flex-shrink:0}.main-controls:has(.clip-navigation:not(.hide)){position:static}header nav{align-items:center}@media(max-width:850px){.report-grid{grid-template-columns:1fr}.progress-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.history-card{align-items:flex-start;flex-direction:column}header nav{gap:12px}.answer-card{padding:12px}.progress-stat{padding:12px}}@media(max-width:500px){.clip-navigation{max-height:none}.main-modes .mode{padding:18px}}

.clip-review progress{width:100%;height:12px}.clip-review .bar{flex-wrap:wrap}.clip-review h3{overflow-wrap:anywhere}