.practice-page { background:#f3f6fa; }
.practice-topbar { position:relative; }
.practice-topbar nav { display:flex; align-items:center; gap:1.4rem; }
.practice-topbar nav a { color:#63758a; font-size:.7rem; font-weight:800; text-decoration:none; }
.practice-topbar nav a:hover,.practice-topbar nav a.is-current { color:var(--forest); }
.practice-back { border:1px solid var(--line); padding:.55rem .7rem; color:var(--forest); font-size:.64rem; font-weight:800; text-decoration:none; }
.practice-main { width:min(1180px,calc(100% - 2.4rem)); margin:0 auto; padding:5.2rem 0 7rem; }
.practice-hero { min-height:300px; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:2.2rem; background:var(--forest); color:#fff; box-shadow:8px 8px 0 #d5dee7; }
.practice-hero .eyebrow-label { color:var(--acid); }
.practice-hero h1 { max-width:730px; margin:.8rem 0 1rem; color:#fff; font:800 clamp(2.9rem,6vw,5.7rem)/.93 var(--sans); letter-spacing:-.085em; }
.practice-hero h1 em { color:var(--acid); font-style:normal; }
.practice-hero__intro { max-width:620px; margin:0; color:#c4d1de; font-size:.88rem; line-height:1.6; }
.practice-stats { min-width:180px; padding:1rem; border-left:1px solid #627890; color:#c7d2de; font:500 .6rem var(--mono); text-align:right; }
.practice-stats__number { display:block; color:var(--acid); font:800 3rem/.9 var(--sans); letter-spacing:-.08em; }
.practice-stats small { display:block; margin-top:1.2rem; color:#a7bacb; font-size:.58rem; }
.practice-stats small b { color:#fff; }
.practice-dashboard { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; margin-top:1.3rem; }
.practice-dashboard>div { min-width:0; padding:.85rem 1rem; display:flex; flex-direction:column; gap:.3rem; border:1px solid #c6d2de; background:#fff; }
.practice-dashboard strong { color:var(--forest); font:800 1.45rem/1 var(--sans); }
.practice-dashboard span { color:#6b7f91; font:500 .5rem/1.3 var(--mono); }
.practice-decks { margin-top:3rem; }
.practice-decks__heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin:.5rem 0 1.3rem; }
.practice-decks__heading h2 { max-width:600px; margin:0; color:var(--forest); font:800 clamp(1.8rem,4vw,3.2rem)/1 var(--sans); letter-spacing:-.07em; }
.practice-decks__heading p { max-width:380px; margin:0; color:#60758a; font-size:.72rem; line-height:1.5; }
.practice-deck-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.practice-deck { min-width:0; min-height:224px; padding:1.15rem; display:flex; flex-direction:column; border:1px solid #aebdcb; background:#fff; box-shadow:4px 4px 0 #dbe3eb; }
.practice-deck--bridge { background:#e9f0f7; }
.practice-deck__top { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.practice-deck__level { color:#ab7822; font:700 .58rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.practice-deck__count { color:#72849a; font:500 .55rem var(--mono); }
.practice-deck h3 { margin:.45rem 0 .55rem; color:var(--forest); font:800 1.4rem/1.1 var(--sans); letter-spacing:-.055em; }
.practice-deck p { margin:0 0 1rem; color:#61758a; font-size:.67rem; line-height:1.45; }
.practice-deck__progress { height:5px; margin-top:auto; background:#dce5ee; }
.practice-deck__progress span { height:100%; display:block; background:#c9983e; }
.practice-deck__bottom { margin-top:.65rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.practice-deck__bottom small { color:#72849a; font:500 .52rem var(--mono); }
.practice-deck__bottom button { min-height:35px; border:1px solid var(--forest); padding:.4rem .75rem; background:var(--forest); color:#fff; cursor:pointer; font:800 .62rem var(--sans); }
.practice-deck__bottom button:hover { background:#f1c66a; color:var(--forest); }
.practice-deck__bottom button:disabled { opacity:.6; cursor:default; }
.practice-add,.practice-library { margin-top:3rem; padding:2rem; background:#fff; border:1px solid #c6d2de; }
.panel-shadow { box-shadow:7px 7px 0 #dbe3eb; }
.practice-section-label { display:flex; align-items:center; gap:.7rem; margin:0; color:#a2772a; font:500 .56rem var(--mono); letter-spacing:.08em; }
.practice-section-label span:first-child { color:#b5862f; }
.practice-add h2,.practice-library h2 { margin:.65rem 0 1.2rem; color:var(--forest); font:800 clamp(1.5rem,3vw,2.4rem)/1 var(--sans); letter-spacing:-.065em; }
.card-form { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:.8rem; }
.card-form label { display:flex; flex-direction:column; gap:.4rem; color:#53677b; font-size:.64rem; font-weight:800; }
.card-form label em { color:#8a98a7; font-style:normal; font-weight:500; }
.translation-preview-status { min-height:1.2em; color:#8a5c36; font:600 .58rem/1.35 var(--sans); }
.translation-preview-status.is-ready { color:#326a50; }
.translation-preview-status.is-error { color:#a52d42; }
.card-form input,.practice-search input,.practice-tools select { min-height:49px; border:1px solid #abbccc; border-radius:0; padding:0 .8rem; background:#fff; color:var(--forest); outline:0; font:600 .72rem var(--sans); }
.card-form input:focus,.practice-search input:focus,.practice-tools select:focus { border-color:#a2772a; box-shadow:0 0 0 2px rgba(241,198,106,.3); }
.bulk-form { margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid #d5dee7; }
.bulk-form>label,.bulk-form__bottom label { display:block; color:#53677b; font-size:.64rem; font-weight:800; }
.bulk-form textarea { width:100%; min-height:92px; margin-top:.45rem; padding:.8rem; resize:vertical; border:1px solid #abbccc; background:#fff; color:var(--forest); font:600 .72rem/1.5 var(--sans); }
.bulk-form__bottom { display:flex; align-items:end; justify-content:space-between; gap:.7rem; margin-top:.6rem; }
.bulk-form__bottom label { width:min(320px,60%); }
.bulk-form__bottom input { width:100%; min-height:45px; margin-top:.4rem; padding:0 .7rem; border:1px solid #abbccc; color:var(--forest); font:600 .7rem var(--sans); }
.bulk-form small { display:block; margin-top:.7rem; color:#78899b; font:500 .52rem/1.45 var(--mono); }
.practice-primary { min-height:49px; border:1px solid var(--forest); padding:.65rem 1rem; background:var(--forest); color:#fff; cursor:pointer; font:800 .68rem var(--sans); }
.practice-primary:hover { border-color:#a2772a; background:var(--acid); color:var(--forest); }
.practice-primary:disabled { cursor:wait; opacity:.6; }
.practice-primary--compact { min-height:43px; }
.practice-status { min-height:1.2em; margin:.9rem 0 0; color:#517832; font:500 .6rem var(--mono); }
.practice-status.is-error { color:#a5453c; }
.practice-note { margin:.8rem 0 0; color:#7c8b9b; font:500 .55rem/1.5 var(--mono); }
.practice-library__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.practice-library__heading h2 { margin-bottom:0; }
.practice-review-actions { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.practice-review-actions>button:not(.practice-primary) { min-height:43px; border:1px solid #aabaca; padding:.6rem .7rem; background:#fff; color:var(--forest); cursor:pointer; font:700 .6rem var(--sans); }
.practice-review-actions>button:hover { border-color:#b5862f; }
.practice-tools { margin:1.6rem 0 1rem; display:grid; grid-template-columns:1fr 170px auto; gap:.7rem; align-items:center; }
.practice-search { min-height:47px; display:flex; align-items:center; border:1px solid #abbccc; background:#fff; }
.practice-search span { padding:0 .75rem; color:#a2772a; font-size:1.2rem; }
.practice-search input { width:100%; min-height:45px; border:0; box-shadow:none; }
.practice-tools select { min-height:47px; }
.practice-result-count { color:#7e8d9d; font:500 .56rem var(--mono); text-align:right; }
.card-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.flashcard-row { min-height:84px; padding:.9rem 1rem; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:.9rem; border:1px solid #c4d0dc; background:#f8fafc; }
.flashcard-row__word strong { display:block; color:var(--forest); font-size:.86rem; }
.flashcard-row__word small,.flashcard-row__translation small { color:#8a98a7; font:500 .5rem var(--mono); text-transform:uppercase; }
.flashcard-row__translation { color:#5a7085; font-size:.75rem; }
.flashcard-row.is-learned { border-color:#a9c490; background:#f0f7eb; }
.flashcard-row.is-learned .flashcard-row__word strong { text-decoration:line-through; text-decoration-color:#769c5b; }
.flashcard-row__actions { display:flex; gap:.3rem; }
.flashcard-row__actions button { width:31px; height:31px; border:1px solid #a8b7c6; background:#fff; color:#50667b; cursor:pointer; font:700 .7rem var(--sans); }
.flashcard-row__actions button:hover { border-color:#a2772a; background:var(--acid); color:var(--forest); }
.flashcard-row__edit { grid-column:1/-1; display:flex; gap:.4rem; }
.flashcard-row__edit[hidden] { display:none; }
.flashcard-row__edit input { min-width:0; flex:1; min-height:38px; padding:.55rem; border:1px solid #abbccc; background:#fff; color:var(--forest); font:600 .7rem var(--sans); }
.flashcard-row__edit button { min-height:38px; padding:.5rem .7rem; border:1px solid var(--forest); background:var(--forest); color:#fff; cursor:pointer; font:700 .6rem var(--sans); }
.card-empty { grid-column:1/-1; padding:2.2rem; border:1px dashed #b5c4d2; color:#718196; text-align:center; font-size:.78rem; }
.practice-modal { position:fixed; z-index:250; inset:0; display:none; }
.practice-modal.is-open { display:block; }
.practice-modal__backdrop { position:absolute; inset:0; background:rgba(8,22,38,.7); backdrop-filter:blur(5px); }
.practice-modal__dialog { width:min(640px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow-y:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:2rem; background:#f3f6fa; box-shadow:12px 12px 0 rgba(0,0,0,.18); }
.practice-modal__close { position:absolute; top:1rem; right:1rem; width:34px; height:34px; border:1px solid #a5b5c5; background:transparent; color:var(--forest); cursor:pointer; font:500 1.1rem var(--mono); }
.session-progress { margin:1.8rem 0 1.1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; position:relative; color:#7b8a9a; font:500 .56rem var(--mono); }
.session-progress::before { content:""; height:4px; flex:1; background:#d6e0e9; order:1; }
.session-progress span { width:var(--session-progress,0%); max-width:calc(100% - 3rem); height:4px; position:absolute; top:50%; left:0; transform:translateY(-50%); background:#ae812d; z-index:1; }
.session-progress b { order:2; color:#9b7225; }
.practice-modal h2 { margin:0 0 1rem; color:var(--forest); font:800 2rem/1 var(--sans); letter-spacing:-.065em; }
.session-card { min-height:220px; padding:2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; border:1px solid #9fb1c1; background:#fff; text-align:center; box-shadow:7px 7px 0 #d7e0e8; }
.session-card>span { color:var(--forest); font:800 clamp(2.3rem,8vw,4.2rem)/1 var(--sans); letter-spacing:-.08em; }
.session-card>button { border:0; border-bottom:1px solid #a2772a; padding:.2rem; background:transparent; color:#8e6828; cursor:pointer; font:700 .62rem var(--sans); }
.session-card>strong { color:#476a2f; font-size:1.25rem; }
.session-meaning { width:100%; padding-top:1rem; border-top:1px solid #dce5ed; text-align:left; }
.session-meaning[hidden],.session-actions[hidden] { display:none; }
.session-meaning strong { display:block; color:#476a2f; font-size:1.05rem; }
.session-meaning p,.session-meaning li { color:#51667a; font-size:.7rem; line-height:1.5; }
.session-meaning ul { margin:.65rem 0; padding-left:1.2rem; }
.session-meaning small { color:#a2772a; font:500 .53rem var(--mono); }
.sentence-form { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid #d3dde6; }
.sentence-form label { display:flex; flex-direction:column; gap:.4rem; color:#53677b; font-size:.64rem; font-weight:800; }
.sentence-form textarea { width:100%; min-height:88px; resize:vertical; border:1px solid #abbccc; padding:.8rem; background:#fff; color:var(--forest); outline:0; font:600 .75rem/1.45 var(--sans); }
.sentence-form textarea:focus { border-color:#a2772a; box-shadow:0 0 0 2px rgba(241,198,106,.3); }
.sentence-hint { margin:.55rem 0 .75rem; color:#7c8b9b; font:500 .55rem/1.5 var(--mono); }
.sentence-feedback { min-height:1.2em; margin:.7rem 0 0; color:#5a7187; font:700 .63rem/1.5 var(--sans); white-space:pre-line; }
.sentence-feedback.is-correct { color:#4d7a2f; }
.sentence-feedback.is-error { color:#a4453b; }
.sentence-feedback.is-checking { color:#8b6a2b; }
.sentence-corrected { margin-top:.65rem; padding:.8rem; border-left:3px solid #c77b30; background:#fff5e8; color:#724516; }
.sentence-corrected small { display:block; margin-bottom:.25rem; font:500 .52rem var(--mono); text-transform:uppercase; }
.sentence-corrected strong { font-size:.76rem; line-height:1.5; }
.sentence-translation { margin-top:.65rem; padding:.8rem; border-left:3px solid #71964a; background:#f0f7e9; color:#47692d; font-size:.78rem; line-height:1.5; }
.flashcard-row__sentence { grid-column:1/-1; padding-top:.65rem; border-top:1px dashed #cbd7e2; }
.flashcard-row__sentence small { color:#8a98a7; font:500 .5rem var(--mono); text-transform:uppercase; }
.flashcard-row__sentence p { margin:.3rem 0 .45rem; color:#536b81; font-size:.72rem; line-height:1.45; }
.sentence-badge { display:inline-flex; padding:.25rem .45rem; font:700 .52rem var(--mono); }
.sentence-badge.is-correct { color:#4d7a2f; background:#e8f3df; }
.sentence-badge.is-review { color:#9a5723; background:#fff0df; }
.session-actions { margin-top:1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.session-actions p { grid-column:1/-1; margin:0 0 .2rem; color:#5f7185; font:500 .58rem var(--mono); }
.session-actions button { min-height:47px; border:1px solid #8093a7; background:#fff; color:var(--forest); cursor:pointer; font:800 .67rem var(--sans); }
.session-actions button:hover { border-color:#a2772a; background:var(--acid); }
.session-actions button[data-rate="again"] { border-color:#c9958e; color:#994a42; }
.session-actions button[data-rate="easy"] { border-color:#9dbf86; color:#446b2c; }
.session-next-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid #e4d7cc; }
.session-next-row>span { color:#746b70; font-size:.68rem; line-height:1.4; }
.session-next-row button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-width:110px; min-height:46px; border:0; border-radius:10px; background:#aa293d; color:#fff; cursor:pointer; font:800 .76rem var(--sans); transition:background .2s ease,transform .2s ease; }
.session-next-row button:hover { background:#842135; transform:translateX(3px); }
.session-next-row button:focus-visible { outline:3px solid #d59e46; outline-offset:3px; }
@media (max-width:820px) { .practice-topbar nav { display:none; } .practice-main { width:min(100% - 1.2rem,680px); padding-top:2.8rem; } .practice-hero { align-items:flex-start; flex-direction:column; padding:1.4rem; } .practice-stats { width:100%; border-top:1px solid #627890; border-left:0; padding:1rem 0 0; text-align:left; } .practice-stats__number { display:inline-block; margin-right:.45rem; font-size:2.4rem; } .practice-dashboard { grid-template-columns:repeat(3,1fr); } .practice-add,.practice-library { padding:1.2rem; } .card-form,.practice-tools { grid-template-columns:1fr; } .practice-result-count { text-align:left; } .card-list { grid-template-columns:1fr; } .practice-library__heading { align-items:flex-start; flex-direction:column; } .practice-primary--compact { width:100%; } }
@media (max-width:700px) { .sentence-form .practice-primary { width:100%; } }
@media (max-width:820px) { .practice-deck-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .practice-decks__heading { display:block; } .practice-decks__heading p { margin-top:.7rem; } }
@media (max-width:560px) { .practice-deck-list { grid-template-columns:1fr; } .practice-deck { min-height:190px; } }
@media (max-width:560px) { .practice-dashboard { grid-template-columns:repeat(2,1fr); } .bulk-form__bottom { align-items:stretch; flex-direction:column; } .bulk-form__bottom label,.bulk-form__bottom button { width:100%; } .session-actions { grid-template-columns:repeat(2,1fr); } .practice-modal__dialog { padding:1.2rem; } }
@media (max-width:560px) { .session-next-row { position:sticky; bottom:-1.2rem; z-index:2; align-items:stretch; flex-direction:column; padding:.8rem 0 1.2rem; background:#fff9f1; box-shadow:0 -8px 15px rgba(255,249,241,.9); } .session-next-row button { width:100%; } }

/* Structured 20-word sets */
.practice-deck-list { display:flex; flex-direction:column; gap:.8rem; }
.practice-deck { min-height:0; padding:0; overflow:hidden; border:1px solid #dfd6d1; border-radius:18px; background:#fffdfa; box-shadow:0 8px 26px rgba(74,27,41,.06); }
.practice-deck details>summary { min-height:118px; padding:1.25rem 1.4rem; display:grid; grid-template-columns:1fr auto 34px; align-items:center; gap:1.2rem; cursor:pointer; list-style:none; }
.practice-deck details>summary::-webkit-details-marker { display:none; }
.practice-deck details>summary:hover { background:var(--deck-summary-hover,rgba(104,28,48,.04)); }
.practice-deck details>summary:focus-visible { outline:3px solid #d6a548; outline-offset:-5px; border-radius:inherit; }
.practice-deck__identity { min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.25rem .8rem; }
.practice-deck__identity small { color:#b92840; font:800 .58rem var(--mono); letter-spacing:.08em; }
.practice-deck__identity b { color:#401a2b; font:800 2rem/1 var(--sans); }
.practice-deck__identity em { grid-column:1/-1; color:#806d75; font:500 .72rem/1.45 var(--sans); font-style:normal; }
.practice-deck__summary { min-width:190px; text-align:right; }
.practice-deck__summary strong { display:block; color:#b92840; font:800 1.35rem/1 var(--sans); }
.practice-deck__summary small { display:block; margin-top:.4rem; color:#8b7780; font:500 .56rem var(--mono); }
.practice-deck__chevron { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#f8e9ee; color:#ae2940; font-size:1.1rem; transition:transform .16s ease; }
.practice-deck details[open] .practice-deck__chevron { transform:rotate(180deg); }
.practice-module-list { padding:0 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; border-top:1px solid #eee3df; }
.practice-module { width:100%; min-height:74px; padding:.75rem .9rem; display:grid; grid-template-columns:54px 1fr 84px; align-items:center; gap:.9rem; border:1px solid #e6dcda; border-radius:13px; background:#fff; color:#401a2b; cursor:pointer; text-align:left; transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease; }
.practice-module:first-child { margin-top:1rem; }
.practice-module:hover { transform:translateY(-2px); border-color:#cf7585; box-shadow:0 7px 18px rgba(89,32,48,.08); }
.practice-module__number { display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid #eadfdd; }
.practice-module__number b { font:800 1rem var(--sans); }
.practice-module__number small { color:#a18d94; font:600 .48rem var(--mono); text-transform:uppercase; }
.practice-module__body { min-width:0; }
.practice-module__body>strong { display:block; font:800 .75rem var(--sans); }
.practice-module__body>small { display:block; margin:.25rem 0 .45rem; color:#84717a; font:500 .55rem var(--mono); }
.practice-module__track { height:5px; display:block; overflow:hidden; border-radius:99px; background:#f0e6e8; }
.practice-module__track i { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#c32846,#e84ec8); }
.practice-module__percent { color:#b12640; font:800 .82rem var(--sans); text-align:right; }
.practice-module__percent small { display:block; margin-top:.2rem; color:#917a82; font:600 .48rem var(--mono); }
.practice-deck--b1,.practice-deck--b2 { background:#fff7dc; }
.practice-deck--c1,.practice-deck--c2 { border-color:#8d2137; background:#7d1e33; }
.practice-deck--c1,.practice-deck--c2 { --deck-summary-hover:rgba(255,255,255,.07); }
.practice-deck--c1 .practice-deck__identity b,.practice-deck--c2 .practice-deck__identity b,.practice-deck--c1 .practice-deck__identity em,.practice-deck--c2 .practice-deck__identity em,.practice-deck--c1 .practice-deck__summary small,.practice-deck--c2 .practice-deck__summary small { color:#fff; }
.practice-deck--c1 .practice-deck__identity small,.practice-deck--c2 .practice-deck__identity small,.practice-deck--c1 .practice-deck__summary strong,.practice-deck--c2 .practice-deck__summary strong { color:#ffe0a0; }
.practice-module { background:#fbf6ef; }
.practice-module:hover { background:#fff0e8; }
.practice-deck--b1 .practice-module,.practice-deck--b2 .practice-module { border-color:#e6d39a; background:#fff2c8; }
.practice-deck--b1 .practice-module:hover,.practice-deck--b2 .practice-module:hover { background:#ffe8a5; }
.practice-deck--c1 .practice-module,.practice-deck--c2 .practice-module { border-color:#a94a5d; background:#8d293f; color:#fff4e9; }
.practice-deck--c1 .practice-module:hover,.practice-deck--c2 .practice-module:hover { border-color:#d27883; background:#a1334b; }
.practice-deck--c1 .practice-module__number,.practice-deck--c2 .practice-module__number { border-color:#bb6573; }
.practice-deck--c1 .practice-module__number small,.practice-deck--c2 .practice-module__number small,.practice-deck--c1 .practice-module__body>small,.practice-deck--c2 .practice-module__body>small,.practice-deck--c1 .practice-module__percent small,.practice-deck--c2 .practice-module__percent small { color:#f1cbd0; }
.practice-deck--c1 .practice-module__percent,.practice-deck--c2 .practice-module__percent { color:#ffd27a; }
.practice-deck--c1 .practice-module__track,.practice-deck--c2 .practice-module__track { background:#672036; }

/* Focused study mode */
.session-setup[hidden],.session-study[hidden] { display:none!important; }
.session-setup { color:#401a2b; }
.session-setup__hero { margin:-2.1rem -2.4rem 1.25rem; padding:2rem 2.4rem 1.7rem; border-radius:22px 22px 0 0; position:relative; overflow:hidden; background:linear-gradient(135deg,#711a30 0%,#a9253d 72%,#c8394e 100%); color:#fff; }
.session-setup__hero::after { content:"FR"; position:absolute; right:-.6rem; bottom:-2.7rem; color:rgba(255,255,255,.07); font:900 9.5rem/1 var(--sans); letter-spacing:-.1em; pointer-events:none; }
.session-setup__hero>span { display:inline-flex; padding:.35rem .7rem; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(53,10,25,.22); color:#ffd27a; font:800 .58rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.practice-page .practice-modal .session-setup__hero h2 { max-width:520px; margin:.85rem 0 .25rem; color:#fff; font:800 clamp(1.8rem,5vw,2.75rem)/1.05 var(--sans); letter-spacing:-.04em; }
.session-setup__hero p { max-width:500px; margin:0; color:#f8dfe4; font:500 .78rem/1.5 var(--sans); }
.session-setup__hero strong { display:inline-block; margin-top:1rem; padding:.42rem .7rem; border-radius:8px; background:#f8c765; color:#531326; font:800 .62rem var(--sans); }
.session-mode-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.session-mode { min-height:170px; padding:1rem; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr auto; align-items:start; gap:.2rem .75rem; position:relative; border:1px solid #e0d4d2; border-radius:17px; background:#fff; color:#401a2b; cursor:pointer; text-align:left; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.session-mode:hover { transform:translateY(-2px); border-color:#c94a61; box-shadow:0 8px 22px rgba(96,31,50,.1); }
.session-mode.is-selected { border-color:#b72440; background:#fff8f3; box-shadow:0 0 0 3px rgba(183,36,64,.1); }
.session-mode.is-selected::after { content:"✓"; width:26px; height:26px; display:grid; place-items:center; position:absolute; right:.85rem; top:.85rem; border-radius:50%; background:#b72440; color:#fff; font:800 .75rem var(--sans); }
.session-mode__icon { width:38px; height:38px; display:grid; place-items:center; grid-row:1/3; border-radius:11px; background:#fae8dc; color:#a41f3a; font:900 .7rem var(--sans); }
.session-mode b { align-self:end; padding-right:1.6rem; font:800 .88rem var(--sans); }
.session-mode small { align-self:start; color:#7e6e75; font:500 .66rem/1.4 var(--sans); }
.session-mode em { grid-column:1/-1; width:max-content; margin-top:.55rem; padding:.3rem .55rem; border-radius:999px; background:#f5dca7; color:#7c5010; font:800 .52rem var(--sans); font-style:normal; }
.session-setup__tip { margin:.9rem 0; padding:.8rem 1rem; display:flex; align-items:flex-start; gap:.7rem; border-radius:13px; background:#fff0cf; color:#744c12; font:600 .66rem/1.45 var(--sans); }
.session-setup__tip>span:first-child { color:#b72440; font-size:1rem; }
.session-setup__how { padding:1rem 1.15rem; border:1px solid #e6d9d4; border-radius:15px; background:#fff; }
.session-setup__how>b { color:#891f35; font:800 .7rem var(--sans); }
.session-setup__how ol { margin:.7rem 0 0; padding:0; display:grid; gap:.45rem; counter-reset:setup; list-style:none; }
.session-setup__how li { display:flex; align-items:flex-start; gap:.65rem; color:#63565d; font:500 .65rem/1.45 var(--sans); counter-increment:setup; }
.session-setup__how li::before { content:counter(setup); flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#f6e7e8; color:#a42139; font:800 .55rem var(--sans); }
.session-start { width:100%; min-height:52px; margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:.7rem; border:0; border-radius:13px; background:#b72440; color:#fff; cursor:pointer; font:800 .8rem var(--sans); box-shadow:0 7px 0 #711a30; transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.session-start:hover { background:#9e1f38; transform:translateY(-1px); box-shadow:0 8px 0 #711a30; }
.session-start:active { transform:translateY(5px); box-shadow:0 2px 0 #711a30; }
.session-start:focus-visible,.session-mode:focus-visible { outline:3px solid #e2a93e; outline-offset:3px; }
.practice-modal__backdrop { background:#f5f7fb; backdrop-filter:none; }
.practice-modal__dialog { width:min(760px,calc(100% - 2rem)); padding:2.1rem 2.4rem; border-radius:22px; background:#f5f7fb; box-shadow:none; animation:session-in .18s ease-out both; }
@keyframes session-in { from { transform:translate(-50%,calc(-50% + 8px)); } to { transform:translate(-50%,-50%); } }
.practice-modal__close { border:0; border-radius:50%; background:#e9edf4; }
.session-heading { margin-top:.4rem; display:flex; align-items:center; justify-content:space-between; }
.session-heading b { color:#151526; font:800 .82rem var(--sans); }
.session-heading span { padding:.35rem .8rem; border-radius:999px; background:#f8e6f7; color:#ba2ba7; font:700 .62rem var(--sans); box-shadow:0 2px 7px rgba(97,41,91,.1); }
.session-progress { height:9px; margin:.65rem 0 1.5rem; display:block; overflow:hidden; border-radius:99px; background:#ead7ec; }
.session-progress::before { display:none; }
.session-progress span { max-width:none; height:100%; top:0; transform:none; border-radius:inherit; background:linear-gradient(90deg,#d527bd,#e44bc9); transition:width .16s ease; }
.practice-modal h2 { margin:0 0 .8rem; color:#667085; font:700 .65rem var(--sans); letter-spacing:0; }
.session-card { min-height:330px; padding:2rem; gap:1.3rem; border:1px solid #d8dde7; border-radius:20px; background:#fff; box-shadow:none; }
.session-word-line { display:flex; align-items:center; justify-content:center; gap:.65rem; }
.session-word-line>span { color:#10111c; font:800 clamp(1.65rem,5vw,2.2rem)/1 var(--sans); }
.session-word-line>small { padding:.25rem .6rem; border-radius:999px; background:#f8e8fa; color:#b526ba; font:700 .62rem var(--sans); }
.session-word-line>button { width:35px; height:35px; border:0; border-radius:50%; background:#f1f3f7; color:#202334; cursor:pointer; }
.session-word-line>button:hover { background:#e5e9f0; }
.session-meaning { padding-top:1.3rem; border-top:1px solid #dfe3eb; }
.session-meaning strong { color:#111522; font-size:1rem; }
.session-meaning p,.session-meaning li { color:#2f3545; font-size:.78rem; }
.session-meaning p::first-line { color:#657087; }
.session-actions { margin-top:1.4rem; grid-template-columns:1fr 1fr; gap:.75rem; }
.session-actions button { min-height:68px; border-radius:15px; font-size:.88rem; transition:transform .14s ease,filter .14s ease; }
.session-actions button:hover { transform:translateY(-2px); filter:saturate(1.08); }
.session-actions button[data-rate="again"] { border-color:#ff7184; background:#ffe5e9; color:#b60036; }
.session-actions button[data-rate="good"] { border-color:#42dba1; background:#c9f8e5; color:#006c47; }
.session-actions button[aria-pressed="true"] { box-shadow:0 0 0 3px rgba(35,39,57,.11); }
.sentence-optional { margin-top:1rem; border-top:1px solid #e2e6ed; }
.sentence-optional>summary { padding:.9rem 0 .2rem; color:#687288; cursor:pointer; font:600 .63rem var(--sans); }
.sentence-form { margin-top:.45rem; padding-top:.7rem; }
.session-next-row { justify-content:flex-end; margin-top:.6rem; padding-top:0; border:0; }
.session-next-row button { min-width:0; min-height:34px; border-radius:999px; padding:.4rem .8rem; background:transparent; color:#6f7788; font-size:.62rem; }
.session-next-row button:hover { background:#e9edf4; color:#202534; transform:none; }
@media (max-width:650px) { .practice-deck details>summary { grid-template-columns:1fr 28px; padding:1rem; } .practice-deck__summary { grid-column:1/-1; min-width:0; text-align:left; } .practice-deck__chevron { grid-column:2; grid-row:1; } .practice-module-list { padding:0 .7rem .7rem; } .practice-module { grid-template-columns:43px 1fr 66px; gap:.55rem; padding:.65rem .55rem; } .practice-modal__dialog { padding:1.2rem; } .session-setup__hero { margin:-1.2rem -1.2rem 1rem; padding:1.4rem 1.2rem 1.25rem; } .session-mode-list { grid-template-columns:1fr; } .session-mode { min-height:132px; } .session-card { min-height:280px; padding:1.2rem; } .session-actions button { min-height:58px; } .session-next-row { position:static; padding:.2rem 0; background:transparent; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
:root { --practice-backup-accent:#a91f3a; }
.practice-session-open{overflow:hidden}
.practice-backups{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.practice-backups button,.session-restart{border:1px solid #e6d8d2;background:#fffaf3;border-radius:12px;padding:.7rem 1rem;color:#7d1e33;font:600 .75rem var(--sans);cursor:pointer}
.session-restart{display:block;margin:1rem auto 0}
.session-restart[hidden]{display:none}
.session-complete{text-align:center;padding:2rem 1rem}
.session-complete>span{display:inline-grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#def6e7;color:#147142;font-size:2rem}
.session-complete h2{font:800 2rem var(--sans);color:#7d1e33}
.session-complete p{font:500 1rem/1.6 var(--sans);color:#76636b}