:root{--target:#ffd166}
.fret-card{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),#10141a;border-color:#343d49}
.fretboard-shell{padding:14px;border-radius:18px;background:linear-gradient(180deg,#10141a,#0b0e12);border:1px solid #343d49;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 38px rgba(0,0,0,.38)}
.fretboard{border:1px solid #6a4b36!important;border-radius:16px!important;background:linear-gradient(90deg,#5a3522 0%,#805238 14%,#aa744c 38%,#b57e55 50%,#9d6947 64%,#7a4b33 86%,#57331f 100%)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),inset 0 18px 30px rgba(255,255,255,.045),inset 0 -18px 28px rgba(0,0,0,.24),0 12px 24px rgba(0,0,0,.28)}
.fret-numbers{color:#aab3c0!important;border-bottom:1px solid rgba(255,255,255,.09)}
.fret-numbers div{padding:8px 0!important}
.string{height:70px!important}
.cell{border-right:3px solid rgba(242,239,232,.5)!important;background:rgba(255,255,255,.018)}
.cell.open{border-right:6px solid #e5dfcd!important}
.cell::after{background:linear-gradient(#f1f1f1,#a5a5a5,#666)!important;box-shadow:0 1px 2px rgba(0,0,0,.85)!important}
.note-pill{width:40px!important;height:40px!important;font-size:.84rem!important;background:linear-gradient(180deg,#548cff,#2b64dc)!important;box-shadow:0 8px 17px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.25)!important;border:2px solid rgba(255,255,255,.24)!important;position:relative;z-index:3}
.note-pill.root{background:linear-gradient(180deg,#ff6c66,#d72f2a)!important}
.note-pill.dimmed{opacity:.18!important}
.note-pill.exercise-target{opacity:1!important;filter:none!important;transform:scale(1.16);border-color:#ffe8aa!important;box-shadow:0 0 0 4px rgba(255,209,102,.28),0 0 0 9px rgba(255,209,102,.12),0 8px 20px rgba(0,0,0,.46)!important;animation:exercisePulse .55s ease-out}
@keyframes exercisePulse{0%{transform:scale(.92)}45%{transform:scale(1.22)}100%{transform:scale(1.16)}}
.marker-layer{height:30px!important;margin-top:8px!important}
.marker span{width:9px!important;height:9px!important;background:#7a8493!important;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.string-label{color:#f2f5f8!important;border-color:#49515d!important;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.dot.target{background:var(--target)}
.exercise-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.exercise-panel .exercise-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exercise-panel .exercise-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.exercise-status{margin-top:10px;padding:12px 13px;border-radius:12px;background:#10151c;border:1px solid #313b48;min-height:70px}
.exercise-status strong{display:block;font-size:.96rem;margin-bottom:4px;color:#f5f7fa}
.exercise-status span{display:block;color:var(--muted);font-size:.82rem;line-height:1.4}
.exercise-progress{height:5px;border-radius:999px;background:#252b34;overflow:hidden;margin-top:10px}
.exercise-progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--target));transition:width .12s linear}
.exercise-current{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-weight:900;color:#ffe5a1}
.exercise-current::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--target);box-shadow:0 0 12px rgba(255,209,102,.7)}
.exercise-panel .hint-mini{margin-top:8px;color:var(--muted);font-size:.77rem;line-height:1.4}
.exercise-panel .btn.running{outline:2px solid var(--target);outline-offset:2px}
@media(max-width:620px){.exercise-panel .exercise-grid{grid-template-columns:1fr}.fretboard-shell{padding:10px}.string{height:66px!important}.note-pill{width:38px!important;height:38px!important}}