.practice-page {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 18px 16px 80px
}

.practice-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px
}

.eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .65
}

.practice-hero h2 {
    margin: 4px 0;
    font-size: 2rem
}

.practice-hero p {
    margin: 0;
    opacity: .72
}

.practice-stats {
    display: flex;
    gap: 8px
}

.practice-stats div,
.practice-stat-button {
    min-width: 76px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid rgba(127, 127, 127, .2);
    border-radius: 12px;
    background: var(--paper, #fff);
    color: inherit
}

.practice-stat-button {
    font: inherit;
    cursor: pointer;
    flex-direction: column;
}

.practice-stats strong,
.practice-stats span {
    display: block
}

.practice-stats strong {
    font-size: 1.35rem
}

.practice-stats span {
    font-size: .72rem;
    opacity: .65
}

.practice-stat-button:hover {
    border-color: currentColor
}

.practice-panel {
    max-width: var(--layout-width);
    margin: 30px auto;
    padding: 28px;
    text-align: center;
    border: 1px solid rgba(127, 127, 127, .2);
    border-radius: 18px;
    background: var(--paper, #fff)
}

.practice-panel h3 {
    margin-top: 0
}

.practice-primary {
    border: 0;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 700;
    cursor: pointer;
    background: var(--ink, #222);
    color: var(--paper, #fff);
    margin-top: 15px;
}

.practice-filters {
    max-width: var(--layout-width);
    text-align: left
}

.practice-filter-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center
}

.practice-filter-head h3 {
    margin-bottom: 5px
}

.practice-filter-head p {
    margin: 0;
    opacity: .7;
    font-size: .9rem
}

.practice-filter-actions {
    display: flex;
    gap: 6px
}

.practice-filter-actions button {
    border: 1px solid rgba(127, 127, 127, .25);
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer
}
@media (max-width:520px){
    .lesson-choices {
    grid-template-columns: repeat(2, 1fr) !important;
}
.practice-hero {
    flex-direction: column;
}
.practice-stats {
    width: 100%;
}
}
.lesson-choices {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 18px
}

.practice-filter-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer;font:inherit;}
.practice-filter-toggle-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
.practice-filter-toggle-text strong{font-size:1.15rem;}
.practice-filter-toggle-text small{font-size:.82rem;opacity:.62;font-weight:500;}
.practice-filter-chevron{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(127,127,127,.25);border-radius:9px;font-size:22px;line-height:1;transition:transform .18s ease,background .18s ease;}
.practice-filter-toggle.open .practice-filter-chevron{transform:rotate(180deg);background:rgba(127,127,127,.08);}
.lesson-choices-wrap{margin-top:18px;}
.lesson-choices-wrap[hidden]{display:none;}
.lesson-choices-wrap .practice-filter-head{padding-top:2px;}
@media(max-width:520px){
  .practice-filter-toggle-text strong{font-size:1.05rem;}
  .practice-filter-chevron{width:32px;height:32px;flex-basis:32px;}
}

/* Hard-review card controls: scoped to Practice only. */
#practiceCard.practice-card-panel{position:relative;max-width: var(--layout-width); margin:32px auto 80px;padding:10px 0 20px;}
#practiceCard .recall-card{position:relative;min-height:270px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:54px 42px 38px;border:1px solid rgba(127,127,127,.22);border-radius:24px;background:var(--paper,#fff);color:var(--ink,#222);box-shadow:0 18px 50px rgba(0,0,0,.12);text-align:center;}
#practiceCard .hard-review-star{position:absolute;top:16px;right:18px;z-index:3;width:42px;height:42px;border:1px solid rgba(127,127,127,.2);border-radius:50%;background:transparent;color:var(--accent,#e56f3f);font-size:25px;line-height:1;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease;}
#practiceCard .hard-review-star:hover{transform:scale(1.08);background:rgba(127,127,127,.08);}
#practiceCard .hard-review-star.removed{color:var(--ink-soft,#888);opacity:.55;}
#practiceCard .review-navigation{display:flex;justify-content:space-between;align-items:center;margin:14px 0 0;}
#practiceCard .review-nav-button{width:52px;height:52px;border:1px solid rgba(127,127,127,.22);border-radius:50%;background:var(--paper,#fff);color:var(--ink,#222);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.08);}
#practiceCard .review-nav-button:disabled{opacity:.28;cursor:not-allowed;box-shadow:none;}
#practiceCard .practice-progress{margin-bottom:12px;}
@media(max-width:520px){
  #practiceCard.practice-card-panel{margin:20px auto 72px;padding:6px 0 14px;}
  #practiceCard .recall-card{min-height:200px;padding:45px 20px 15px;border-radius:20px;}
  #practiceCard .hard-review-star{top:12px;right:12px;width:40px;height:40px;}
  #practiceCard .review-nav-button{width:48px;height:48px;font-size:25px;}
}