:root { --accent: #a8650f; }
.draft { max-height: 520px; overflow: auto; display: grid; gap: 10px; }
.draft .dc { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.draft .dc textarea { min-height: 44px; background: var(--panel); font-size: 14px; }
.draft .dc .row { justify-content: space-between; }
.deck h2 { margin-bottom: 4px; }
.deck .nums { display: flex; gap: 14px; margin: 10px 0; font-size: 13px; }
.deck .nums b { display: block; font-size: 20px; }
.study-wrap { max-width: 680px; margin: 0 auto; }
.flash { perspective: 1200px; cursor: pointer; }
.flash .inner { position: relative; min-height: 280px; transition: transform .45s; transform-style: preserve-3d; }
.flash.flipped .inner { transform: rotateY(180deg); }
.flash .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px; font-size: 20px; font-weight: 500; }
.flash .back { transform: rotateY(180deg); }
.flash .hint { position: absolute; bottom: 12px; font-size: 12px; color: var(--muted); font-weight: 400; }
.cloze { color: var(--accent); font-weight: 700; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.grades .btn { justify-content: center; flex-direction: column; gap: 0; }
.grades .btn small { font-weight: 400; color: var(--muted); font-size: 11px; }
.g-again { border-color: var(--bad) !important; }
.g-good { border-color: var(--good) !important; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--muted); }
@media (max-width: 600px) { .grades { grid-template-columns: repeat(2, 1fr); } }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); font-size: 14px; }
.clickable { cursor: pointer; }
.clickable:hover { color: var(--accent); }
#bTable tr.sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#bTable td { vertical-align: middle; }
.draft .dc.invalid { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.stackbar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--panel-2); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.heatmap { overflow-x: auto; }
#bulkBar { gap: 6px; }