/* ═══════════════════════════════════════════════════════════════
   SPEAKING v2 — all custom styles scoped under .lejp-activity-wrap
   Tokens: --lg-* (matches quiz design system)
   ═══════════════════════════════════════════════════════════════ */

:root {
    --lg-green:     #22c55e;
    --lg-green-dk:  #16a34a;
    --lg-green-lt:  #f0fdf4;
    --lg-indigo:    #4f46e5;
    --lg-indigo-dk: #4338ca;
    --lg-indigo-lt: #eef2ff;
    --lg-amber:     #f59e0b;
    --lg-amber-lt:  #fef3c7;
    --lg-red:       #ef4444;
    --lg-red-lt:    #fef2f2;
    --lg-purple:    #a855f7;
    --lg-purple-lt: #faf5ff;
    --lg-bg:        #f8fafc;
    --lg-surface:   #ffffff;
    --lg-border:    #e2e8f0;
    --lg-border-hi: #cbd5e1;
    --lg-ink:       #0f172a;
    --lg-ink-2:     #475569;
    --lg-ink-3:     #94a3b8;
    --lg-radius:    12px;
    --lg-font:      'Sora', sans-serif;
    --lg-mono:      'JetBrains Mono', monospace;
}

/* ── Completed banner (shown on reload if already finished) ──── */
.sp-completed-banner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--lg-green-lt); border: 2px solid var(--lg-green);
    border-radius: var(--lg-radius); padding: 16px 18px; margin-bottom: 1.25rem;
    position: relative; z-index: 1;
}
.sp-completed-banner__icon { font-size: 1.6rem; line-height: 1; }
.sp-completed-banner__body { flex: 1; min-width: 200px; }
.sp-completed-banner__title {
    font-family: var(--lg-font); font-weight: 700;
    color: var(--lg-green-dk); margin-bottom: 2px;
}
.sp-completed-banner__sub {
    font-size: .85rem; color: var(--lg-ink-2); margin: 0;
}
.sp-completed-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sp-grid-bg {
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
        linear-gradient(rgba(79,70,229,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,70,229,.032) 1px, transparent 1px);
    background-size:40px 40px;
}

.lejp-activity-wrap {
    font-family:var(--lg-font);
    color:var(--lg-ink);
    position:relative;
    z-index:10;
}
.lejp-activity-wrap * { box-sizing:border-box; }

/* ── Topbar ──────────────────────────────────────────────────── */
.sp-topbar {
    background:var(--lg-surface);
    border:2px solid var(--lg-border);
    border-radius:var(--lg-radius);
    padding:10px 14px;
    margin-bottom:16px;
    display:flex; align-items:center; gap:10px;
}
.sp-progress-bar { flex:1; height:12px; background:var(--lg-border); border-radius:20px; overflow:hidden; }
.sp-progress-fill { height:100%; width:0%; background:var(--lg-amber); border-radius:20px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.sp-stat-pill {
    padding:5px 11px; background:var(--lg-border); border-radius:20px;
    font-size:.75rem; font-weight:700; white-space:nowrap; flex-shrink:0; cursor:default;
}
.sp-stat-pill--conf { background:var(--lg-amber-lt); color:#b45309; transition:background .3s; }
.sp-stat-pill--prompt { background:var(--lg-indigo-lt); color:var(--lg-indigo-dk); }
/* ── Eyebrow + header ────────────────────────────────────────── */
.sp-eyebrow {
    display:inline-block; padding:4px 12px; background:var(--lg-indigo-lt); color:var(--lg-indigo);
    border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    margin-bottom:8px;
}
.sp-page-title { font-size:1.45rem; font-weight:700; color:var(--lg-ink); margin:0 0 6px; line-height:1.25; }
.sp-page-sub   { font-size:.88rem; color:var(--lg-ink-2); margin:0 0 18px; line-height:1.55; }

/* ── Study materials drawer ──────────────────────────────────── */
.sp-drawer-toggle {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:13px 16px; border:2px solid var(--lg-border);
    border-radius:var(--lg-radius); background:var(--lg-surface);
    font-family:var(--lg-font); font-size:.9rem; font-weight:700; color:var(--lg-ink);
    cursor:pointer; margin-bottom:12px; transition:all .18s;
}
.sp-drawer-toggle:hover { border-color:var(--lg-indigo); background:var(--lg-indigo-lt); color:var(--lg-indigo); }
.sp-drawer-toggle.is-open { border-color:var(--lg-indigo); background:var(--lg-indigo-lt); color:var(--lg-indigo); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
.sp-drawer-chevron { font-size:.8rem; transition:transform .25s; }
.sp-drawer-toggle.is-open .sp-drawer-chevron { transform:rotate(180deg); }
.sp-drawer-label { display:flex; align-items:center; gap:8px; }

.sp-drawer {
    border:2px solid var(--lg-indigo); border-top:none;
    border-bottom-left-radius:var(--lg-radius); border-bottom-right-radius:var(--lg-radius);
    background:var(--lg-surface); overflow:hidden;
    margin-bottom:20px;
    max-height:2000px; transition:max-height .35s ease, opacity .25s;
}
.sp-drawer.is-closed { max-height:0; opacity:0; border-color:transparent; margin-bottom:0; }

.sp-drawer-inner { padding:18px 20px; display:flex; flex-direction:column; gap:16px; }

/* ── Ref cards inside drawer ─────────────────────────────────── */
.sp-ref-card { background:var(--lg-bg); border-radius:10px; padding:16px 18px; }
.sp-ref-card h2 { font-size:.92rem; font-weight:700; color:var(--lg-ink); margin:0 0 12px; }
.sp-ref-card h3 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--lg-ink-3); margin:10px 0 5px; }

/* ── Pattern lines ───────────────────────────────────────────── */
.sp-pattern { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.sp-pattern-line {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 12px; background:var(--lg-surface); border:2px solid var(--lg-border);
    border-bottom:3px solid var(--lg-border-hi); border-radius:10px; transition:all .12s;
}
.sp-pattern-line:hover { border-color:var(--lg-green); background:var(--lg-green-lt); }
.sp-pattern-line__text { font-size:.86rem; font-weight:600; color:var(--lg-ink); flex:1; }
.sp-pattern-line__jp   { font-size:.72rem; color:var(--lg-ink-2); text-align:right; flex-shrink:0; max-width:42%; }
.sp-listen-btn {
    width:26px; height:26px; border-radius:50%; background:var(--lg-green-lt);
    border:2px solid var(--lg-green); display:grid; place-items:center; font-size:.75rem;
    cursor:pointer; flex-shrink:0; transition:transform .12s;
}
.sp-listen-btn:hover { transform:scale(1.12); }

.sp-note {
    background:var(--lg-amber-lt); border:1.5px solid #fcd34d; border-radius:10px;
    padding:9px 12px; font-size:.78rem; font-weight:600; color:#78350f; line-height:1.5;
}

/* ── Word bank chips ─────────────────────────────────────────── */
.sp-word-group { margin-bottom:8px; }
.sp-chips { display:flex; flex-wrap:wrap; gap:5px; }
.sp-chip {
    border:2px solid var(--lg-border); border-bottom:3px solid var(--lg-border-hi);
    border-radius:100px; padding:4px 11px; background:var(--lg-surface);
    font-size:.78rem; font-weight:600; color:var(--lg-ink); cursor:pointer;
    transition:all .1s;
}
.sp-chip:hover  { border-color:var(--lg-indigo); background:var(--lg-indigo-lt); transform:translateY(-1px); }
.sp-chip:active { transform:translateY(2px); border-bottom-width:2px; }

/* ── Key-point cards ─────────────────────────────────────────── */
.sp-key-list { display:flex; flex-direction:column; gap:6px; }
.sp-key-card {
    background:var(--lg-surface); border:2px solid var(--lg-border); border-radius:10px;
    cursor:pointer; overflow:hidden; transition:border-color .12s, background .12s;
}
.sp-key-card:hover { border-color:var(--lg-indigo); background:var(--lg-indigo-lt); }
.sp-key-card__head { display:flex; align-items:center; gap:9px; padding:9px 12px; }
.sp-key-card__icon { width:22px; height:22px; border-radius:50%; background:var(--lg-indigo-lt); border:2px solid var(--lg-indigo); display:grid; place-items:center; font-size:.65rem; flex-shrink:0; }
.sp-key-card__title { font-size:.82rem; font-weight:700; color:var(--lg-ink); flex:1; line-height:1.3; }
.sp-key-card__jp    { font-size:.68rem; color:var(--lg-ink-2); display:block; font-weight:500; }
.sp-key-card__arrow { font-size:.72rem; color:var(--lg-indigo); flex-shrink:0; transition:transform .2s; }
.sp-key-card.is-open .sp-key-card__arrow { transform:rotate(180deg); }
.sp-key-card__body  { display:none; padding:0 12px 10px; border-top:1px dashed var(--lg-border); }
.sp-key-card.is-open .sp-key-card__body { display:block; animation:spFade .2s ease; }
.sp-key-card__body ul { margin:7px 0 0; padding:0 0 0 14px; }
.sp-key-card__body li { font-size:.78rem; line-height:1.6; color:var(--lg-ink); margin-bottom:3px; }
.sp-key-card__body .sp-li-jp { font-size:.7rem; color:var(--lg-ink-2); display:block; }

/* ── Activity card ───────────────────────────────────────────── */
.sp-activity-card {
    background:var(--lg-surface); border:2px solid var(--lg-border); border-radius:var(--lg-radius);
    padding:20px 20px 18px; box-shadow:0 4px 20px rgba(0,0,0,.06); margin-bottom:20px;
}

/* ── Step indicator ──────────────────────────────────────────── */
.sp-steps { display:flex; gap:4px; margin-bottom:18px; }
.sp-step {
    flex:1; padding:6px 4px; border-radius:8px; text-align:center;
    border:1.5px solid var(--lg-border); background:var(--lg-bg); transition:all .2s;
}
.sp-step.is-active { border-color:var(--lg-indigo); background:var(--lg-indigo-lt); }
.sp-step__num   { font-size:.62rem; font-weight:700; color:var(--lg-ink-3); text-transform:uppercase; letter-spacing:.04em; }
.sp-step__label { font-size:.68rem; font-weight:700; color:var(--lg-ink-2); line-height:1.25; margin-top:2px; }
.sp-step.is-active .sp-step__num,
.sp-step.is-active .sp-step__label { color:var(--lg-indigo); }

/* ── Journey stamp ───────────────────────────────────────────── */
.sp-journey-stamp {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 14px; border-radius:100px;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff; font-size:.75rem; font-weight:700; margin-bottom:14px;
    box-shadow:0 2px 8px rgba(79,70,229,.3);
}

/* ── Situation card ──────────────────────────────────────────── */
.sp-situation {
    background:var(--lg-bg); border:1.5px solid var(--lg-border); border-radius:10px;
    padding:14px 16px; margin-bottom:14px;
}
.sp-situation__en   { font-size:.92rem; font-weight:600; color:var(--lg-ink); margin:0 0 5px; line-height:1.5; }
.sp-situation__jp   { font-size:.82rem; color:var(--lg-ink-2); margin:0 0 10px; line-height:1.5; }
.sp-situation__divider { border:none; border-top:1px dashed var(--lg-border); margin:8px 0; }
.sp-goal-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--lg-ink-3); }
.sp-situation__goal-en { font-size:.85rem; font-weight:700; color:var(--lg-indigo); margin:3px 0 3px; line-height:1.45; }
.sp-situation__goal-jp { font-size:.78rem; color:var(--lg-ink-2); margin:0; line-height:1.5; }

/* ── Scaffold chips ──────────────────────────────────────────── */
.sp-scaffold { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; min-height:30px; }
.sp-scaffold-chip {
    display:inline-flex; align-items:center; gap:5px; padding:5px 13px;
    border-radius:100px; border:2px solid var(--lg-border);
    background:var(--lg-surface); font-size:.76rem; font-weight:700;
    color:var(--lg-ink-2); transition:all .25s;
}
.sp-scaffold-chip.hit {
    border-color:var(--lg-green); background:var(--lg-green-lt);
    color:var(--lg-green-dk); transform:scale(1.04);
}

/* ── Help hint ───────────────────────────────────────────────── */
.sp-help {
    background:var(--lg-amber-lt); border:1.5px solid #fcd34d; border-radius:10px;
    padding:10px 13px; font-size:.82rem; font-weight:600; color:#78350f;
    line-height:1.5; margin-bottom:16px; display:none;
}
.sp-help.is-visible { display:block; animation:spFade .2s ease; }
.sp-help__jp { display:block; font-size:.74rem; font-weight:500; color:#92400e; margin-top:3px; }

/* ── Mic zone ────────────────────────────────────────────────── */
.sp-mic-zone { display:flex; align-items:center; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
.sp-ring     { position:relative; width:90px; height:90px; flex-shrink:0; }
.sp-ring svg { width:90px; height:90px; transform:rotate(-90deg); }
.sp-ring__bg   { fill:none; stroke:var(--lg-border); stroke-width:7; }
.sp-ring__fill {
    fill:none; stroke:var(--lg-indigo); stroke-width:7;
    stroke-dasharray:251.33; stroke-dashoffset:251.33;
    stroke-linecap:round; transition:stroke-dashoffset .5s ease, stroke .3s;
}
.sp-ring__fill.is-rec {
    stroke:var(--lg-green);
    stroke-dashoffset:0;
    animation:spRingPulse 1.5s ease-in-out infinite;
}
@keyframes spRingPulse { 0%,100%{opacity:.65;stroke-width:7} 50%{opacity:1;stroke-width:9} }

.sp-mic {
    position:absolute; inset:0; margin:auto; width:46px; height:46px;
    border-radius:50%; border:none; background:var(--lg-indigo);
    color:#fff; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(79,70,229,.35); transition:all .15s;
}
.sp-mic:hover { background:var(--lg-indigo-dk); transform:scale(1.06); }
.sp-mic:disabled { background:var(--lg-border-hi); cursor:not-allowed; box-shadow:none; transform:none; }
.sp-mic.is-rec { background:var(--lg-green); box-shadow:0 4px 18px rgba(34,197,94,.45); animation:spMicPulse 1.2s ease-in-out infinite; }
@keyframes spMicPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

.sp-status { flex:1; min-width:0; }
.sp-status__main { font-size:1rem; font-weight:700; color:var(--lg-ink); margin-bottom:3px; }
.sp-status__sub  { font-size:.78rem; color:var(--lg-ink-2); line-height:1.4; }
.sp-timer        { font-size:.75rem; font-weight:600; color:var(--lg-ink-3); margin-top:4px; font-variant-numeric:tabular-nums; }

/* ── Prepare countdown box ───────────────────────────────────── */
.sp-countdown-box {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:18px 20px; margin:14px 0;
    background:var(--lg-indigo-lt); border:2px solid var(--lg-indigo);
    border-radius:var(--lg-radius); animation:spFade .25s ease;
}
.sp-countdown-ring { position:relative; width:84px; height:84px; flex-shrink:0; }
.sp-countdown-ring svg { width:84px; height:84px; transform:rotate(-90deg); }
.sp-cd-bg   { fill:none; stroke:#c7d2fe; stroke-width:6; }
.sp-cd-fill {
    fill:none; stroke:var(--lg-indigo); stroke-width:6;
    stroke-dasharray:163.36; stroke-dashoffset:0;
    stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke .4s;
}
.sp-cd-fill.urgent { stroke:var(--lg-amber); }
.sp-countdown-num {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:1.9rem; font-weight:900; color:var(--lg-indigo); font-variant-numeric:tabular-nums;
}
.sp-countdown-num.urgent { color:#d97706; }
.sp-countdown-meta { text-align:center; }
.sp-countdown-label { font-size:.82rem; font-weight:700; color:var(--lg-indigo); display:block; }
.sp-countdown-sub   { font-size:.72rem; color:var(--lg-ink-2); display:block; margin-top:2px; }

/* ── Controls row ────────────────────────────────────────────── */
.sp-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.sp-btn {
    padding:9px 16px; border-radius:10px; font-family:var(--lg-font); font-size:.86rem;
    font-weight:700; cursor:pointer; transition:all .1s; line-height:1.3;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    border:2px solid transparent; min-height:40px;
}
.sp-btn--primary { background:var(--lg-indigo); color:#fff; border-bottom:3px solid var(--lg-indigo-dk); }
.sp-btn--primary:hover { background:var(--lg-indigo-dk); }
.sp-btn--primary:active { transform:translateY(2px); border-bottom-width:1px; }
.sp-btn--soft    { background:var(--lg-bg); color:var(--lg-ink-2); border:2px solid var(--lg-border); border-bottom:3px solid var(--lg-border-hi); }
.sp-btn--soft:hover { border-color:var(--lg-indigo); color:var(--lg-indigo); background:var(--lg-indigo-lt); }
.sp-btn--soft:active { transform:translateY(2px); border-bottom-width:1px; }
.sp-btn--ghost   { background:transparent; color:var(--lg-ink-3); border:2px solid var(--lg-border); }
.sp-btn--ghost:hover { color:var(--lg-ink); border-color:var(--lg-border-hi); }
.sp-btn--warn    { background:transparent; color:#d97706; border:2px solid #d97706; border-bottom:3px solid #b45309; }
.sp-btn--warn:hover { background:var(--lg-amber-lt); }
.sp-btn--warn:active { transform:translateY(2px); border-bottom-width:1px; }
.sp-btn--indigo  { background:var(--lg-indigo-lt); color:var(--lg-indigo); border:2px solid var(--lg-indigo); }
.sp-btn--indigo:hover { background:var(--lg-indigo); color:#fff; }
.sp-btn--expand  { background:var(--lg-bg); color:var(--lg-ink-2); border:2px solid var(--lg-border); }
.sp-btn--expand:hover { border-color:var(--lg-indigo); color:var(--lg-indigo); }
.sp-expand-chevron { font-size:.75rem; transition:transform .2s; }
.sp-btn--expand[aria-expanded="true"] .sp-expand-chevron { transform:rotate(180deg); }

/* ── Type zone ───────────────────────────────────────────────── */
.sp-type-zone { margin-top:14px; border:2px solid var(--lg-border); border-radius:10px; padding:14px; background:var(--lg-bg); }
.sp-type-label { font-size:.78rem; font-weight:700; color:var(--lg-ink-2); display:block; margin-bottom:7px; }
.sp-textarea {
    width:100%; min-height:78px; padding:10px 13px; border-radius:8px;
    border:2px solid var(--lg-border); background:var(--lg-surface); font-family:var(--lg-font);
    font-size:.88rem; color:var(--lg-ink); resize:vertical; line-height:1.5;
    transition:border-color .15s;
}
.sp-textarea:focus { outline:none; border-color:var(--lg-indigo); }

/* ── Feedback boxes ──────────────────────────────────────────── */
.sp-feedback { border-radius:10px; padding:0; font-size:.85rem; line-height:1.55; margin-top:10px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s; }
.sp-feedback.is-visible { max-height:500px; padding:12px 14px; }
.sp-feedback--heard   { background:#f0f9ff; border:1.5px solid #bae6fd; color:#0c4a6e; }
.sp-feedback--neutral { background:var(--lg-indigo-lt); border:1.5px solid var(--lg-indigo); color:var(--lg-indigo-dk); }
.sp-feedback--good    { background:var(--lg-green-lt); border:1.5px solid var(--lg-green); color:var(--lg-green-dk); }
.sp-feedback--fix     { background:var(--lg-amber-lt); border:1.5px solid #fcd34d; color:#78350f; }
.sp-feedback--model   { background:var(--lg-purple-lt); border:1.5px solid var(--lg-purple); color:#6b21a8; }
.sp-feedback--model.is-visible { padding:12px 14px; }
.sp-result-list  { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:4px; }
.sp-result-item  { font-size:.82rem; font-weight:600; }
.sp-result-item.hit  { color:var(--lg-green-dk); }
.sp-result-item.miss { color:var(--lg-ink-3); }
.sp-transcript-toggle {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.76rem; font-weight:700; font-family:var(--lg-font);
    color:var(--lg-ink-2); background:var(--lg-surface);
    border:1.5px solid var(--lg-border); border-radius:100px;
    padding:5px 13px; margin-top:9px; cursor:pointer;
    transition:all .15s;
}
.sp-transcript-toggle:hover { border-color:var(--lg-indigo); color:var(--lg-indigo); background:var(--lg-indigo-lt); }
.sp-transcript-toggle:active { transform:translateY(1px); }

/* ── XP toast ────────────────────────────────────────────────── */
.sp-xp-toast {
    position:fixed; top:28px; right:28px; z-index:9999;
    background:var(--lg-green); color:#fff; font-family:var(--lg-font);
    font-size:.9rem; font-weight:700; padding:8px 16px; border-radius:100px;
    box-shadow:0 4px 14px rgba(34,197,94,.4);
    animation:spToast .4s ease, spToastFade .4s ease 1s forwards;
    pointer-events:none;
}
@keyframes spToast     { from{transform:translateY(-12px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes spToastFade { from{opacity:1} to{opacity:0} }

/* ── Complete card ───────────────────────────────────────────── */
.sp-complete {
    background:var(--lg-surface); border:2px solid var(--lg-border); border-radius:var(--lg-radius);
    padding:28px 22px 22px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.06);
    margin-bottom:20px;
}
.sp-complete__trophy { font-size:3rem; display:block; margin-bottom:10px; }

/* Confidence arc */
.sp-conf-arc { position:relative; width:160px; height:90px; margin:0 auto 14px; }
.sp-conf-arc svg { overflow:visible; }
.sp-arc-bg   { stroke:var(--lg-border); }
.sp-arc-fill { stroke:var(--lg-green); stroke-linecap:round; transition:stroke-dashoffset 1s ease 0.2s; }
.sp-conf-center { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); text-align:center; line-height:1.2; }
.sp-conf-emoji  { font-size:1.4rem; display:block; }
.sp-conf-pct    { font-size:.68rem; font-weight:700; color:var(--lg-ink-2); }

.sp-complete__title { font-size:1.2rem; font-weight:700; color:var(--lg-ink); margin:0 0 6px; }
.sp-complete__body  { font-size:.9rem; color:var(--lg-ink-2); margin:0 0 6px; line-height:1.5; }
.sp-complete__sub   { font-size:.82rem; color:var(--lg-ink-3); margin:0 0 16px; }
.sp-achievements { display:flex; flex-direction:column; gap:5px; margin:0 0 18px; text-align:left; }
.sp-ach-item { font-size:.82rem; font-weight:600; color:var(--lg-green-dk); background:var(--lg-green-lt); border-radius:8px; padding:6px 12px; }
.sp-complete__actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }

/* ── Article banner ──────────────────────────────────────────── */
.sp-article-banner {
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    padding:14px 16px; background:#e0e7ff; border:2px solid #4f46e5; border-radius:12px;
    margin-bottom:18px; position:relative; z-index:2;
}
.sp-article-banner__icon { font-size:1.3rem; flex-shrink:0; line-height:1; margin-top:2px; }
.sp-article-banner__body { flex:1; }
.sp-article-banner__title { font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#4f46e5; margin-bottom:3px; }
.sp-article-banner__text  { font-size:.85rem; font-weight:700; color:#0f172a; line-height:1.4; margin-bottom:7px; }
.sp-article-banner__link  { display:inline-flex; align-items:center; gap:4px; background:#4f46e5; color:#fff; font-size:.75rem; font-weight:800; padding:5px 13px; border-radius:100px; text-decoration:none; transition:opacity .15s; }
.sp-article-banner__link:hover { opacity:.85; }
.sp-article-banner__dismiss { background:none; border:none; cursor:pointer; padding:3px; color:#94a3b8; font-size:1rem; line-height:1; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.sp-article-banner__dismiss:hover { color:#0f172a; background:rgba(0,0,0,.06); }
.sp-article-banner__restore { display:none; align-items:center; gap:5px; background:none; border:1.5px dashed rgba(79,70,229,.4); border-radius:8px; padding:4px 10px; cursor:pointer; font-size:.7rem; font-weight:700; color:#4f46e5; margin-bottom:10px; transition:all .15s; }
.sp-article-banner__restore:hover { border-color:#4f46e5; background:#e0e7ff; }
.sp-article-banner__restore.visible { display:flex; }

/* ── Tabbed Study Guide: wrap width override ─────────────────── */
.lejp-activity-wrap.sp-tabbed { max-width:1000px; margin:0 auto; padding:20px; }

/* ── View switcher ────────────────────────────────────────────── */
.sp-view-switcher {
    display:flex; gap:8px; margin-bottom:16px; position:relative; z-index:2;
}
.sp-switch-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 14px; border-radius:var(--lg-radius); border:2px solid var(--lg-border);
    background:var(--lg-surface); font-family:var(--lg-font); font-size:.86rem; font-weight:700;
    color:var(--lg-ink-2); cursor:pointer; transition:all .15s;
}
.sp-switch-btn:hover { border-color:var(--lg-indigo); color:var(--lg-indigo); background:var(--lg-indigo-lt); }
.sp-switch-btn.active { border-color:var(--lg-indigo); background:var(--lg-indigo); color:#fff; }

.sp-panel { display:none; }
.sp-panel.active { display:block; animation:spPanelFade .25s ease; }
@keyframes spPanelFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── Study Guide content card ─────────────────────────────────── */
.sp-guide-card {
    background:var(--lg-surface); border:2px solid var(--lg-border); border-radius:var(--lg-radius);
    padding:20px 22px; margin-bottom:16px;
}
.sp-guide-card h2 { font-family:var(--lg-font); font-size:1.05rem; font-weight:800; color:var(--lg-ink); margin:0 0 12px; }
.sp-guide-card h3 { font-family:var(--lg-font); font-size:.88rem; font-weight:700; color:var(--lg-ink); margin:16px 0 8px; }
.sp-guide-card h4 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--lg-ink-3); margin:12px 0 6px; }
.sp-guide-card p { font-size:.88rem; color:var(--lg-ink-2); line-height:1.6; margin:0 0 10px; }

.sp-vocab-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.sp-vocab-item { background:var(--lg-bg); border:1.5px solid var(--lg-border); border-radius:8px; padding:9px 12px; }
.sp-vocab-en { font-size:.85rem; font-weight:700; color:var(--lg-ink); display:block; }
.sp-vocab-jp { font-size:.74rem; color:var(--lg-ink-2); display:block; margin-top:2px; }

.sp-phrase-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sp-phrase-item { background:var(--lg-bg); border:1.5px solid var(--lg-border); border-radius:8px; padding:9px 12px; }
.sp-phrase-en { font-size:.85rem; font-weight:600; color:var(--lg-ink); display:block; }
.sp-phrase-jp { font-size:.74rem; color:var(--lg-ink-2); display:block; margin-top:2px; }

.sp-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.sp-compare-card { border-radius:10px; padding:12px 14px; border:2px solid; }
.sp-compare-card--bad  { background:var(--lg-red-lt); border-color:var(--lg-red); }
.sp-compare-card--good { background:var(--lg-green-lt); border-color:var(--lg-green); }
.sp-compare-badge { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.sp-compare-card--bad .sp-compare-badge  { color:var(--lg-red); }
.sp-compare-card--good .sp-compare-badge { color:var(--lg-green-dk); }

.sp-mistake-block { background:var(--lg-amber-lt); border:1.5px solid #fcd34d; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.sp-mistake-title { font-size:.85rem; font-weight:700; color:#78350f; margin:0 0 4px; }

.sp-guide-card .sp-dialogue-wrap { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.sp-guide-card .sp-line { background:var(--lg-bg); border-radius:8px; padding:8px 12px; }
.sp-guide-card .sp-speaker { font-size:.7rem; font-weight:700; color:var(--lg-indigo); display:block; margin-bottom:2px; }
.sp-guide-card .sp-text-en { font-size:.85rem; color:var(--lg-ink); }

.sp-template-box {
    background:var(--lg-bg); border:1.5px dashed var(--lg-border-hi); border-radius:10px;
    padding:12px 14px; font-family:var(--lg-mono); font-size:.82rem; color:var(--lg-ink); line-height:1.7;
    margin-bottom:10px; white-space:pre-wrap;
}

/* ── Utilities ───────────────────────────────────────────────── */
.sp-hidden { display:none !important; }
.sp-divider { border:none; border-top:1px solid var(--lg-border); margin:14px 0; }
@keyframes spFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:480px) {
    .sp-mic-zone { gap:12px; }
    .sp-steps .sp-step__label { font-size:.6rem; }
    .sp-stat-pill--prompt { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .sp-ring__fill.is-rec { animation:none; }
    .sp-mic.is-rec { animation:none; }
}