.practice-panel{max-width:760px;margin:22px auto;padding:20px 24px;text-align:left;border:1px solid #789d9945;border-radius:14px;background:linear-gradient(115deg,#142d30ed,#121d2beb);color:#edf3f0}
.practice-panel[hidden],.practice-result[hidden]{display:none}
.practice-panel .section-label{color:#a9d7cf;font-size:11px;letter-spacing:.18em}
.practice-panel p{margin:8px 0 14px;line-height:1.5}.practice-options{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.practice-options label{display:grid;gap:6px;font-size:12px;color:#c5d3d7}.practice-options input{width:125px}.practice-options select,.practice-options input{padding:10px;border:1px solid #677f8a;border-radius:6px;background:#10212c;color:#eff7f6;font:inherit}.practice-panel .small{font-size:12px;color:#abc5ca;margin:10px 0 0}.practice-panel a{color:#bce8de}
.practice-history{width:min(980px,92vw);max-height:85vh;overflow:auto;background:#101e2b;color:#e7efec;border:1px solid #698c98;border-radius:18px;padding:28px}.practice-history::backdrop{background:#030910ce;backdrop-filter:blur(7px)}.practice-history header{display:flex;align-items:center;justify-content:space-between;gap:16px}.practice-history h2{font-size:clamp(23px,3vw,36px);margin:0}.practice-history p{line-height:1.5;color:#bed0d4}.practice-history .practice-progress{font-size:24px;color:#e3f3e9}.practice-history svg{display:block;width:100%;height:100px;border-bottom:1px solid #718a8d50}.practice-history svg[hidden]{display:none}.practice-history .table-wrap{overflow-x:auto}.practice-history table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}.practice-history th{font-weight:500;color:#91b6b7;font-size:11px;letter-spacing:.02em}.practice-history th,.practice-history td{padding:12px 9px;border-bottom:1px solid #78929830}.practice-history caption{text-align:left;padding:20px 0 12px;color:#c8dcdb}.practice-result{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;max-width:100%;margin:0;padding:0;border:0;background:none;color:#bce6d8;font-size:clamp(12px,1.8dvh,20px)}.practice-result p{line-height:1.3}.practice-result button{min-height:36px;padding:6px 8px;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:#bce6d855;text-underline-offset:4px}.practice-result button:hover{color:white}

.practice-trend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:24px 0}.practice-trend[hidden]{display:none}
.practice-metric{margin:0;min-width:0}.practice-metric figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:18px;color:#d8e9e4}.practice-metric strong{font-size:34px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-weight:600}
.practice-history .practice-metric-meaning{font-size:13px;line-height:1.4;margin:6px 0 12px;min-height:2.8em;color:#afc3c6}
.practice-history .practice-metric svg{height:auto;border:0;overflow:visible}
.practice-history .practice-metric-change{font-size:13px;margin:8px 0 0;color:#d2e2df}
.practice-history .practice-progress{font-size:17px;color:#b6ccca}.practice-history #practice-history-note{font-size:14px;max-width:75ch}
.practice-history #practice-history-close{border:0;background:#ffffff0b;color:#dbefea;border-radius:6px;min-height:44px;padding:8px 18px;font:inherit}
@media(max-width:580px){.practice-trend{grid-template-columns:1fr;gap:24px}.practice-history{padding:20px}.practice-metric figcaption{font-size:17px}}

/* A singing notebook needs a scrollable page on a phone. Preserve room for
   the song covers instead of letting the extra controls collapse the carousel. */
@media(max-width:650px){
 body[data-phase=catalogue]:has(#practice-panel:not([hidden])){height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
 body[data-phase=catalogue]:has(#practice-panel:not([hidden])) #player-shell{height:auto;min-height:100dvh;overflow:visible}
 body[data-phase=catalogue]:has(#practice-panel:not([hidden])) #song-selection{grid-template-rows:auto auto clamp(250px,72vw,340px) auto auto}
 .practice-panel{width:100%;padding:18px 16px;margin:14px auto}
}