/* Figma Make visual language, adapted to real transcription and general English. */
.hero h1 { max-width: 1000px; font-size: clamp(32px,4.3vw,58px); line-height:1.3; letter-spacing:-1.8px; }
.scene-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px; }
.scene-tags span { border:1px solid var(--c-border); border-radius:20px; padding:6px 13px; font-size:12px; color:var(--c-text-sec); background:var(--c-surface); }
.upload-note .icon { width:13px; height:13px; vertical-align:middle; }
.feedback-heading { text-align:left; margin-bottom:28px; }
.feedback-heading h2 { font-size:28px; letter-spacing:-.6px; margin:0 0 12px; }
.feedback-heading p { color:var(--c-text-sec); font-size:14px; }
.feedback-heading .hero-badge { margin-bottom:16px; }
.feedback-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.feedback-card { min-width:0; padding:0; overflow:hidden; border:1px solid var(--c-border); border-radius:16px; background:var(--c-surface); cursor:zoom-in; text-align:left; color:var(--c-text); transition:transform .2s,box-shadow .2s; }
.feedback-card:hover { transform:translateY(-4px); box-shadow:var(--c-shadow-lg); }
.feedback-card img { width:100%; height:240px; object-fit:contain; background:var(--c-surface); display:block; padding:12px; }
.feedback-card > span { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--c-border); padding:14px 12px; }
.feedback-card strong { padding:5px 8px; background:var(--c-primary-light); border-radius:6px; color:var(--c-primary); font-size:11px; }
.feedback-card small { color:var(--c-text-sec); font-size:10px; }
.steps-section { border-radius:24px; background:#0f172a; color:white; padding:42px 36px; }
.steps-section .section-title h2,.steps-section h3 { color:white; }
.steps-section .eyebrow,.steps-section .step-number { color:#93c5fd; }
.steps-section .steps-grid { grid-template-columns:repeat(4,minmax(0,1fr)); text-align:left; }
.steps-section .steps-grid > div { background:transparent; border:0; padding:0; }
.steps-section p { color:#94a3b8; }
.listening-footer { margin-top:48px; padding-top:24px; border-top:1px solid var(--c-border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; color:var(--c-text-sec); font-size:12px; }
.listening-footer a { color:var(--c-primary); }
.feedback-dialog { background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-border); border-radius:18px; max-width:min(900px,94vw); padding:16px; margin:auto; }
.feedback-dialog::backdrop { background:#020617c9; backdrop-filter:blur(5px); }
.feedback-dialog > button { display:block; margin:0 0 12px auto; }
.feedback-dialog img { display:block; max-height:78vh; max-width:100%; object-fit:contain; margin:auto; }
#sentenceNav { display:none; }
.general-listening #sentenceNav { display:block; padding:0 14px 18px; overflow:auto; }
.general-listening #panelQuestions > .panel-body { display:none; }
.general-listening #panelDetail #practiceAnswer ~ * { display:none; }
.sentence-nav-note { font-size:12px; line-height:1.9; color:var(--c-text-sec); padding:12px 0; }
.sentence-nav-item { display:block; width:100%; text-align:left; border:1px solid var(--c-border); border-radius:12px; padding:12px; margin:0 0 8px; background:var(--c-surface); color:var(--c-text); cursor:pointer; }
.sentence-nav-item > span { display:flex; justify-content:space-between; font-size:12px; font-weight:750; color:var(--c-primary); }
.sentence-nav-item p { margin:8px 0 0; font-size:12px; line-height:1.7; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sentence-nav-item[aria-current=true] { border-color:var(--c-primary); background:var(--c-primary-light); }
.sentence-quote { font-size:17px; line-height:1.9; margin:20px 0; border-left:3px solid var(--c-primary); padding-left:14px; overflow-wrap:anywhere; }
.sentence-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sentence-actions .button:first-child { grid-column:1/-1; }
.sentence-actions [aria-pressed=true] { border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-light); }
.saved-sentences h2 { margin:20px 0 12px; font-size:22px; }
.saved-sentences .mistake-grid { margin-top:20px; }
.saved-sentences .exam-review-title { margin-top:48px; }
@media(min-width:1100px) { .general-listening .main { grid-template-columns:260px minmax(0,1fr) 320px; } }
@media(max-width:760px) { .feedback-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .feedback-card img { height:210px; } .steps-section .steps-grid { grid-template-columns:1fr 1fr; gap:26px; } .steps-section { padding:32px 22px; } }
@media(max-width:420px) { .feedback-card > span { flex-direction:column; align-items:flex-start; } .hero h1 { letter-spacing:-1px; } .feedback-card img { height:180px; } }

.steps-section .step-number { position:static; display:block; margin-bottom:12px; }
.steps-section .steps-grid h3 { margin-top:0; }