/* محفوظاتي (pages/saved.html): extends the mistakes-page look (.grp/.gh/.gtog/.mq in style.css)
   with a blue count pill, an editable note per question and the ⭐ example in the empty state.
   Colours come only from the style.css tokens, so light and dark mode need nothing extra. */
.sv .gc{border-color:var(--sign);color:var(--sign)}
.sv .btn.sm{min-height:44px}
.sv .mq summary{min-height:44px}
.sv .mq .ml{margin-top:10px}
/* note */
.nt{margin-top:12px;max-width:420px}
.nt label{display:block}
.nl{display:block;font-size:.85rem;color:var(--dim);margin-bottom:4px}
/* scoped to the list cards: the player's own feedback note (#note) keeps the global style */
.nt .note{display:block;width:100%;min-height:44px;padding:9px 12px;border:1.5px solid var(--line2);border-radius:12px;
background:var(--raise);color:var(--ink);font:inherit;font-size:.95rem;line-height:1.6;resize:none;overflow:hidden;-webkit-appearance:none}
.nt .note:focus{border-color:var(--ink);outline:none}
.nt .note::placeholder{color:var(--dim)}
.ns{display:block;min-height:1.3em;margin-top:2px;font-size:.8rem;color:var(--dim)}
.ns.ok{color:var(--ok)}
/* empty state: how the star button looks in the player */
.eg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px;color:var(--dim);font-size:.9rem}
.eg-b{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line2);
color:var(--ink2);font-weight:600;white-space:nowrap}
@media(max-width:600px){.nt{max-width:none}}